This is Part 1 of a two-lecture series on implementing HTML. I created this lecture in an effort to keep my design students from "fearing the code" they encounter in an introductory level course to Dreamweaver and Web Site design.
3. What you need to know
• HTML
• Hypertext Markup Language
• A Computer language used to add objects and other information to a Web page
• Not a programming language, it’s a markup language
• Markup Language
• A set of markup tags
• HTML Tags
• Surrounded by angle brackets <>
• <html>
• Come in pairs
• <b>Content Here</b>
• Start Tag = first tag —also called an opening tag
• End Tag = second tag —also called a closing tag
• HTML Documents = Web Pages
• Describe Web pages
• Contain HTML tags and plain text
4. More stuff to know
• XHTML
• Extensible Hypertext Markup Language
• Very similar to HTML—same concept
• Newer and Stricter than HTML, but the two terms are often used interchangeably
• A sort of cross between HTML and XML (Extensible Markup Language)
• XML
• A set of rules used to encode electronic documents
• Employed to increase compatibility among electronic documents and satisfy current Web
standards
• Employed to increase compatibility between electronic documents and the Web
• CSS
• Cascading Style Sheets
• A type of computer language used to specify how a web page should be presented
• Font colors, positioning, line spacing, borders, etc…
5. Two types of HTML and XHTML
• Strict
• The only one you should use
• Do not use outdated tags
• Everything in lowercase!
• Transitional
• Use only when dealing with a page that is in the process of being updated to the new
version
6. HTML strict document type declaration
• DOCTYPE
• Document type declaration
• Always the first thing typed into your HTML document
• Appears BEFORE opening tag
• Tells the browser which version and what type of (X)HTML you are using
• Does not display as visual content on your Web page
• More forgiving than XHTML, so we will stick with what’s below
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
8. Anatomy of a tag
• An (X)HTML tag is a name/keyword surrounded by angle brackets
• The closing tag needs a slash (/) before the tag name
• opening tag + closing tag + content = (X)HTML element —Below is an example of the h1 (X)HTML element
• Use only lowercase letters!
Closing tag
Tag name
<h1>Content Here</h1>
Opening tag
Angle Brackets
9. Most commonly used tags
• <html>Content Here</html> • Italics
• Text placed between the angled brackets describes
the Web page • <b>Content Here</b>
• Opening tag is very first displayed in the markup
• Bold
•
after DOCTYPE
Closing tag is the very last displayed in the markup
• <font>Content Here</font>
• Describes the font you’re using
• <title>Content Here</title>
• <q>Content Here</q>
• Text placed between the angled brackets describes
• Displays quotation marks around content
the title of the Web page
• <body>Content Here</body> •
• Text placed between the angled brackets describes • Adds a space
the visible page content
• <br />
• <h1>Content Here</h1> • Adds a line break
• Text placed between the angled brackets displays as a • Empty/Self-Closing tag
heading • <br /> —space before the slash mark makes it
• h1 (largest heading), h2, h3, h4, h5, h6 (smallest compatible with older browsers
•
heading)
<hr />
• <p>Content Here</p> • Adds a horizontal line
•
•
Text placed between the angled brackets displays as a
paragraph <img />
• Adds an image to your page
• <i>Content Here</i>
10. Even more commonly used tags
• <a>Content Here</a>
• Displays a hyperlink
• <ol>Content Here</ol>
• Displays an ordered list
• Uses numbers for list items
• <ul>Content Here</ul>
• Displays an unordered list
• Uses bullets for list items
• <li>Content Here</li>
• Used in an unordered or ordered list to separate the
items in a list
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
• <center>Content Here</center>
• Centers content on a page
11. Yes, (X)HTML can be nested
• (X)HTML elements can be nested inside of each other
<p><h1><i>Content Here</i></h1></p>
• When nesting elements, the first tag opened, must be the last tag closed
•GOOD
<p><h1><i>Content Here</i></h1></p>
•BAD
<p><h1></i>Content Here</p></h1></i>
12. Putting it to work
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<title>My Great Web Page</title>
<body>
<h1>My first heading</h1>
<h2>My second heading</h2>
<h3>My third heading</h3>
<h4>My fourth heading</h4>
<h5>My fifth heading</h5>
<h6>My sixth heading</h6>
<h1><i>My italic heading</i></h1>
<h2><b>My bold heading</b></h2>
<p>This is a paragraph
with no line breaks.</p>
<p>
This<br />
is a<br />
paragraph<br />
with<br />
line breaks<br />
</p>
</body>
</html>
14. Attributes
• Adds extra information to an (X)HTML tag
• The value for an attribute can be placed within either single or double quotes
• Always go inside the opening tag
• Tags can have multiple attributes
• Separate each attribute with a space
Attribute
<font face="verdana">Content Here</font>
Value
15. Commonly used attributes and values
• face • width
• Describes a typeface • Specifies the width of an image or horizontal line
• <font face="garamond">This is Garamond.</font> • Use pixels
• <img src="http://www.interestment.co.uk/wp-
• color content/uploads/2009/04/lampard-poodle.jpg"
alt=Crazy Poodle width="100" />
• Describes a tag’s color
• Or use percentages
• <font color="#FFFF00">This is yellow text.</font>
• <img src="http://www.interestment.co.uk/wp-
• <hr color="#80ff80" /> content/uploads/2009/04/lampard-poodle.jpg"
alt=Crazy Poodle width="50%" />
• bgcolor • If you don’t include the height attribute, the image will
• Describes a background color for your page be resized proportionately
• <body bgcolor="#FFFF00">Content Here</body>
• height
• src • Specifies the height of an image
• Describes your image source • Use pixels or percentages
• <img src="http://www.interestment.co.uk/wp-content/ • <img src="http://www.interestment.co.uk/wp-content/
uploads/2009/04/lampard-poodle.jpg" /> uploads/2009/04/lampard-poodle.jpg" alt=Crazy
Poodle width="50%" height="20%" />
• alt • If you don’t include the width attribute, the image will
be resized proportionately
• Specifies an alternate text for an image
• <img src="http://www.interestment.co.uk/wp-content/
• size
uploads/2009/04/lampard-poodle.jpg" alt=Crazy
Poodle /> • Specifies the height of a typeface [-8(–)+8]
• <font face="garamond" size="+5" height="60">This is
Garamond.</font>
16. Hyperlink (Anchor) attributes and values
• href • target
• Describes your hyperlinked Web source • Describes the browser window you want the
• <a href="http://www.google.com">Click here to go hyperlink to open in
to Google!</a> • _blank, _self, _parent, _top
• Opens hyperlink in a new browser window
• name • <a href="http://www.google.com"
• Describes a name anchor (bookmark) target="_blank">Click here to go to Google!</
a>
• Enables travel within a single html document
• Opens hyperlink in the current browser window
• First create your bookmarks
• <a href="http://www.google.com"
• <a name="P1">Paragraph One</a> target="_self">Click here to go to Google!</a>
• Next, create your hyperlink that will take you to the
bookmark of your choice
• <a href="#P1">Click to Return to Paragraph
One</a>
18. Using TextEdit
• TextEdit is the Plain Text Editor for Mac users
• Finder ➞ Applications ➞ TextEdit
• PC Users will use Notepad
• Google Search for other available plain text editors if
necessary
• Once in TextEdit ➞ Format ➞ Make Plain Text
• File ➞ Save As ➞ index.html
• lowercase letters!
Use only
• No spaces !
• You must include the .html extension!
19. I need more tags!
http://cedesign.net/help2j.htm
http://www.w3schools.com/tags/