Writing Web Pages in HTML (Part 2)

Rob Wall

StigmergicWeb

This document lives at http://www.stigmergicweb.org/presentations/html/html2.html

References

• HTML Dog (http://www.htmldog.com)
• Books
  • HTML for the World Wide Web by Elizabeth Castro
  • Designing with Web Standards by Jeffrey Zeldman

Overview

• Inline elements - can be included within a block
  • Strong and emphasized text
  • Line breaks
  • Links
  • Images

Strong and Emphasized Text

• Text can be <em>emphasized</em> or <strong>strong</strong>
  

• Text can be emphasized or strong

• They can even be <em><strong>combined for effect</strong> 
  but be careful!</em>
  

• They can even be combined for effect but be careful

Line breaks

• A line break forces text to continue on a new line
• Can be used to separate two lines of text that are connected

• <p>Here comes the line break<br /> and this 
  text is after the line break</p>
  

• Here comes the line break
  and this test is after the line break
• <br /> is a single tag

Example of using line breaks

Beautiful city of Glasgow, with your streets so neat and clean,
Your stateley mansions, and beautiful Green!
Likewise your beautiful bridges across the River Clyde,
And on your bonnie banks I would like to reside.

from Glasgow by William McGonagall

Links (Part 1)

• Hypertext - linking to other pages
  • Ours
  • Others (no permission required)
• <a href="http://www.google.com">Google</a>
• Google

Links (Part 2)

• Write full address of the page you are linking to
• Exception! - if the file is in the same directory, you can just use the file name

Images

• Single tag!
• <img src="titan.gif" alt="titan icon" />
• And here it is -
• src is the path and name of the image file
• alt is a text description of the image
  • Required in XHTML
  • Used by text based browsers, page reader software and search engine robots

Time to try it

• Practice - a page about you
  • I'll take digital pictures
• Where you from, what are you interested in, why you decided to do this
• Don't try to make it look nice - just add content