Emily Kauffman

Back to teaching

CIS 275 Lecture 4: Links and Images

Goals

  1. Review HTML structure
  2. Understand links and the different ways to use them
  3. Display accessible images

Review

  1. What do we know so far?
  2. How to name documents and view them in the browser
  3. HTML document structure & basic syntax

Hyperlinks

You'll commonly see the following types of links:

  • links from one website to another
  • links from one page to another on the same website
  • links from one part of a a web page to another part of the same page
  • links that open in a new browser window/tab
  • links that start your email program and address a new email to someone

Writing Links

<a href="https://emilykauffman.com">Emily Kauffman</a>
<a href="https://emilykauffman.com/contact">Contact Page</a>
<a href="https://emilykauffman.com/contact.html">Contact Page</a>

Displays as: Emily Kauffman


Linking to other sites

<!-- from emilykauffman.com-->
<a href="http://samfee.net/courses.html">Fee's Site</a>
<!-- from emilykauffman.com-->
<a href="courses.html">Fee's Site</a>

Why won't this second example work? What type of link is this? If I'm on emilykauffman.com, where will this link go?


Linking to other pages on the same site

When linking to a page on the same site, you don't need to use an absolute URL.

<!-- from emilykauffman.com-->
<a href="contact.html"></a>

Navigation example:

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="about-us.html">About</a></li>
  <li><a href="contact.html">Contact</a></li>
</ul>

Displays as:


Directory Structure

  • On larger websites - organize your code by placing the pages for each different section of the site into a new folder.
  • Folders on a website are sometimes referred to as directories.
  • Every page and every image on the web has a URL composed of the domain name (ex. emilykauffman.com) and a path to the page or image (/teaching/cis-275/syllabus)
  • This is an absolute URL - you can get to it from anywhere by typing it in address bar

directory structure of a web page

Relative URLs

  • if all of your website files are in one folder, simply use the name of the file
  • if your site is organized into subdirectories, you have to tell the browser how to get from the page it is currently on to the page that you are linking to
  • Duckett, page 84 for examples

Email Links

Clicking an email link opens your mail application and populates the email address.

<a href="mailto:ekauffman@washjeff.edu">Email me</a>

Displays as: Email me


Opening Links in a new window

  • Anchor tags (<a>) have an attribute called target that can control how the link opens
  • Can be a good practice to indicate that a tab will open in a new window
  • Many sites (including mine) open external links using target
<a target="_blank" href="https://emilykauffman.com/teaching/cis-275/syllabus">Class Syllabus</a>

Link to specific part of the same page

  • Why would you do this? User doesn't have to scroll to find stuff.
  • How to do this? Use the id attribute!
  • Only use letters (or _)
  • IDs have to be unique
  • Can be used on any HTML element
<h1 id="top">My site!</h2>
<ul>
  <li><a href="#browser">Browser</a></li>
  <li><a href="#html">HTML</a></li>
  <li><a href="#css">CSS</a></li>
</ul>
<h2 id="browser">Browser</h2>
<p>A browser is a software application used to locate, retrieve and display content on the World Wide Web, including webpages, images, video and other files<p>
<h2 id="html">HTML</h2>
<p>Stands for hypertext markup language<p>
<h2 id="css">CSS</h2>
<p>Stands for cascading stylesheets<p>
<p><a href="#top">Top<a/></p>

Displays as:

My site!

Browser

A browser is a software application used to locate, retrieve and display content on the World Wide Web, including webpages, images, video and other files

HTML

Stands for hypertext markup language

CSS

Stands for cascading stylesheets

Top


Images

  • Why use images?
  • Remember accessibility
  • Online images are subject to copyright
  • Good practice: use images folder

Adding Images

<!-- image is in same directory as html file -->
<img src="cat.png" alt="my cat sitting on a couch" />

<!-- image is in an images folder -->
<img src="images/myimage.png" alt="my cat sitting on a couch" />

If an image is decorative and has on meaning (such as a graphic dividing line), include the alt attribute but make the value an empty string ("").

Height and Width

You can specifiy height and width so when the page loads, it leaves room for the image. This is often overwritten in CSS.

<img src="images/myimage.png" alt="my cat sitting on a couch" height="300" width="400"/>

Placement

  • HTML images display inline, as opposed to block
  • They can be placed before paragraphs, inside paragraphs but before text, or in a paragraph in the middle of some text.
  • See Duckett, pg. 101

Creating Images

Three rules:

  1. Save images in the right format
  2. Save images at the right size
  3. Use correct resolution - book says 72dpi. This is old! Use 150dpi for now.

Bugs bunny and Daffy arguing over the pronunciation of GIF

Transparency

  • "see-through"
  • straight edges and 100% transparent - GIF
  • curved/rounded edges, partially opaque - PNG

Figure and Figcaption

If your image has a caption, use <figure> and <figcaption>.

<figure>
  <img src="images/capecod.jpg" alt="birds flying by the sea" />
  <br />
  <figcaption>This cat was rescued from the streets of Pittsburgh and now lives in a house downtown.</figcaption>
</figure>

Recap

Things are getting more complicated... don't try to memorize every detail! Use your book as a reference. Practicing often will cause you to learn them.

  • hyperlinks - link pages together
  • can link to the page you're on or another page, start emails, etc
  • images - format, sizing, resolution

Knowledge Check

  1. What's the difference between an absolute and relative URL?
  2. What does the href of an email link look like?
  3. What are the three different image formats we discussed? Why would you choose one over another?
  4. Why set a height/width on an image tag?
  5. What's the difference between an inline element and a block element?

In Class Exercises

Scenario: you've decided that you want to make a website to hold some of your favorite writing, including outside sources and your own.

When doing the exercises, avoid copying and pasting HTML code from old exercises or the web since it makes learning it harder. You have the class time to make this become muscle memory.

Exercise 1: Home Page

  1. Create a folder to hold your lecture 4 activities.
  2. Create a new web page labeled index.html. In the HEAD section, make sure you have the charset and title defined. The title should read 'Home | Lecture 4'.
  3. Add author and description meta tags.
  4. In the body, add content to the document so that you have a level one (main) heading that says 'Welcome to my Writing Website!'.
  5. Find a poem online that has at least twenty lines. Copy and paste it into your index.html and mark it up so it can be viewed in the browser. Add the title of the poem as a level two heading. Note - sometimes when you copy and paste from a browser, it can include special characters that you don't want. If this happens, copy and paste into a basic text editor like Notepad and then copy and paste into your HTML.
  6. Paragraphs should be displayed as paragraphs and line breaks should be present where displayed.
  7. At the bottom, add another paragraph that says who the poem was written by. Emphasize the author's name.

Exercise 2: Accessibility Write Up

Part A:

  1. Take your homework HTML page that was due today and put it into your Lecture 4 folder. Rename it accessibility.html and make sure that you can view it in the browser.
  2. Set the title to 'Accessibility | Lecture 4'.
  3. If your accessibility.html page doesn't have one already, add a level one heading that labels your writing response.
  4. In your index.html, add an unordered list before the poem section. Add a list item that contains a hyperlink to your accessibility page. When you click on the hyperlink, it should take you to your new page.
  5. In your accessibility.html page, make another unordered list at the top of the page (same thing as the previous step), but make the hyperlink take you to the home page (your index.html).
  6. At the bottom of the accessibility page, add a paragraph that includes a link to the article that you read for the assignment. Give it descriptive link text. When clicked, it should open in a new tab.
  7. Below the article link, add another paragraph that contains a link that scrolls you to the top of the accessibility page (hint - if you get stuck, check out today's code examples).

Part B:

  1. Add a new page called contact.html that includes all of the normal HTML page set up tags (doctype, html, head, etc). Set the title to 'Contact | Lecture 4'.
  2. Add a level one heading that says 'Contact Me'.
  3. Add an email link that, when clicked, opens an email client with the "To" field populated.
  4. In your index.html and accessibility.html pages, add another link in the unordered list that links to the contact.html page.
  5. In the contact.html page, add an unordered list that contains links to the accessibility.html and index.html pages.

Basically, at this point, you should be able to link to all other site HTML pages from the one you're on.

Exercise 3: Images

  1. In your contact page, add a paragraph with a short description about yourself.
  2. Find a picture of yourself (download from social media, email it to yourself from your phone and then download, etc). If you don't want to use a picture of yourself, use a picture of a celebrity that you like.
  3. Place the image in your lecture 4 folder.
  4. Add an image tag to your contact.html page before the description paragraph. Be sure to include alt text. The src attribute should point to your image.
  5. Find a second image online that depicts an activity that you enjoy. Get the absolute link to this file (to do this on Chrome, you right click on the image and copy the image location. Let me know if you get hung up on other browsers).
  6. Make another image tag after the photo of yourself. Set the src attribute to the copied absolute link from the previous step.
  7. Test in the browser and make sure that both images display.
  8. Show me when you're done.

Next Class

  • Read: Duckett, Chps. 6
  • Homework: finish in class exercises, Homework #2

Resources

  1. Duckett, John. Html & CSS: Design and Build Websites. John Wiley and Sons, 2014.
  2. Link Targets
  3. Complete Guide to Links and Buttons