HTML Lecture Part 1 of 2

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 = ﬁrst 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

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…

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

HTML strict document type declaration
• DOCTYPE
• Document type declaration
• Always the ﬁrst 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">

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

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 ﬁrst 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>

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

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 ﬁrst 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>

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>

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

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>

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>

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!

I need more tags!
http://cedesign.net/help2j.htm
http://www.w3schools.com/tags/

Web-Safe Fonts
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Web-Safe Colors
http://ﬁcml.org/jemimap/style/color/wheel.html
http://www.webmonkey.com/reference/Color_Charts

More sources
http://www.tizag.com/htmlT/
http://www.learningnerd.com/series/xhtml-css

HTML Lecture Part 1 of 2

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to HTML Lecture Part 1 of 2

Similar to HTML Lecture Part 1 of 2 (20)

Recently uploaded

Recently uploaded (20)

HTML Lecture Part 1 of 2