- Review HTML structure
- Understand links and the different ways to use them
- Display accessible images
- What do we know so far?
- How to name documents and view them in the browser
- HTML document structure & basic syntax
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
<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>
Linking to other sites
<a href="http://samfee.net/courses.html">Fee's Site</a>
<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.
- 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
- 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
Clicking an email link opens your mail application and populates the email address.
<a href="mailto:email@example.com">Email me</a>
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
<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
- Only use letters (or _)
- IDs have to be unique
- Can be used on any HTML element
<h1 id="top">My site!</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>
<p>Stands for hypertext markup language<p>
<p>Stands for cascading stylesheets<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
Stands for hypertext markup language
Stands for cascading stylesheets
- Why use images?
- Remember accessibility
- Online images are subject to copyright
- Good practice: use images folder
<img src="cat.png" alt="my cat sitting on a couch" />
<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"/>
- 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
- Save images in the right format
- Save images at the right size
- Use correct resolution - book says 72dpi. This is old! Use 150dpi for now.
- straight edges and 100% transparent - GIF
- curved/rounded edges, partially opaque - PNG
Figure and Figcaption
If your image has a caption, use
<img src="images/capecod.jpg" alt="birds flying by the sea" />
<figcaption>This cat was rescued from the streets of Pittsburgh and now lives in a house downtown.</figcaption>
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
- What's the difference between an absolute and relative URL?
- What does the
href of an email link look like?
- What are the three different image formats we discussed? Why would you choose one over another?
- Why set a height/width on an image tag?
- 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
- Create a folder to hold your lecture 4 activities.
- 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'.
- Add author and description meta tags.
- In the body, add content to the document so that you have a level one (main) heading that says 'Welcome to my Writing Website!'.
- 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.
- Paragraphs should be displayed as paragraphs and line breaks should be present where displayed.
- At the bottom, add another paragraph that says who the poem was written by. Emphasize the author's name.
Exercise 2: Accessibility Write Up
- 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.
- Set the title to 'Accessibility | Lecture 4'.
- If your accessibility.html page doesn't have one already, add a level one heading that labels your writing response.
- 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.
- 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).
- 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.
- 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).
- 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'.
- Add a level one heading that says 'Contact Me'.
- Add an email link that, when clicked, opens an email client with the "To" field populated.
- In your index.html and accessibility.html pages, add another link in the unordered list that links to the contact.html page.
- 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
- In your contact page, add a paragraph with a short description about yourself.
- 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.
- Place the image in your lecture 4 folder.
- 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.
- 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).
- Make another image tag after the photo of yourself. Set the
src attribute to the copied absolute link from the previous step.
- Test in the browser and make sure that both images display.
- Show me when you're done.
- Read: Duckett, Chps. 6
- Homework: finish in class exercises, Homework #2
- Duckett, John. Html & CSS: Design and Build Websites. John Wiley and Sons, 2014.
- Link Targets
- Complete Guide to Links and Buttons