HTML
• Hypertext Markup Language
– First proposed by CERN in 1989
– It is non-linear so it allows you to jump from place to
place
– Markup refers to the structure of the language so you
can identify what is going on
• Source code example
• W3C – new governing body that regulates HTML
coding
– W3 consortium
HTML as a Markup Language
• A markup language is a structured language
that lets you identify common sections of a
document such as headings, paragraphs, and
lists
• An HTML file includes text and HTML markup
elements
• The browser interprets the HTML markup
elements and displays the results, hiding the
actual markup tags from the user
XML: An Open Standard
• XML is the Extensible Markup Language
• XML is a meta-language; not a language
itself, but a language that lets you describe
other languages
• XML describes data, not presentation
• XML allows better access to data
• XML lends itself to customized information
XML Syntax Rules
• Documents must be well-formed
• Elements must nest correctly
• XML is case-sensitive
• End tags are required
• Empty elements are signified by a
closing slash
• Attribute values must be quoted
XHTML: The Future of HTML
• XHTML is a reformulation of HTML 4.01
in XML
• Brings data-handling benefits of XML to
HTML
• Style sheets are required
• Stricter syntax rules
HTML Limitations
• HTML (HyperText Markup Language) is a very general
language designed to place information on web pages.
It is not a word processing or desktop publishing tool.
The sooner you come to grips with this fact, the faster
you will become an effective webdesigner. Here's why:
– No two browsers show a page quite the same way.
– Even if everyone were to use the same browser, not
everyone would have the same resolution as you.
– It really never was intended to be as specific as a word
processor, and its fundamental structure reflects this.
– Nobody owns the web. Therefore, standards are rather
difficult to enforce.
File Names and URLs
• Names
– Front door URL
– Page names
• Case Sensitivity
• Character Exceptions that you CANNOT USE
– /,/,&,*, , and blank spaces
• File Extensions
– .htm
– .html
– .asp
– .xls
– .gif
– .jpg
Complete URLs and Directory
Structure
• http://isec.sandiego.edu/carl/gba576.asp
• Versus gba576.asp
• Relative versus absolute paths
Web Page Elements
• Title • Headings
• Bookmarks • Images
• Body • Horizontal Rules
• Background • Image map
• Normal text • Hotspot
• Paragraph • Animated images
• Bulleted list • Hyperlinks
Web Page Elements
title
heading
horizontal rule
image
paragraph
body links
bulleted list
animated image
Entering HTML Tags and Text
• Four tags define the overall structure of standard
Web pages:
– and
• Indicates file is an HTML document
– and
• Introduction to the rest of the file
• Indicates the area where the title will be placed
– and
• Indicates the title that will display in the title bar
– and
• Indicates the boundaries of the Web page
HTML Tags and Functions
Entering Initial HTML Tags
initial tags
insertion point
It is good form to be consistent
when you type tags, adhering
to a standard practice
Entering Initial HTML Tags
all Web page content will be placed here
ending BODY and HTML tags
If you notice an error in the text,
use the BACKSPACE key to
erase all the characters back to
and including the one that is
incorrect
Headings
• Used to separate text and introduce new
topics
• Vary in size, from through
• Use the same sized heading for the same
level of topic
Paragraphs
• Most text on Web pages is in paragraph
format
• The tag has an optional ending tag
• When a browser finds a tag, it starts a
new line and adds a paragraph break
• Try not to type large sections of text
without having paragraph breaks
Creating a List
• Lists structure your text in outline format
– Unordered (bulleted) lists
• and marks the beginning and end of
unordered lists
– Ordered (numbered) lists
• and marks the beginning and end of
ordered lists
• The and tags define list items
• The TYPE attribute defines the default
bullet or number type
Unordered Lists
Unordered Lists
First item – type disc
Second item – type disc
First item – type square
Second item – type square
First item – type circle
Second item – type circle
Ordered Lists
Ordered Lists
First item – type 1
Second item – type 1
First item – type A
Second item – type A
First item – type a
Second item – type a
First item – type I
Second item – type I
First item – type i
Second item – type i
Creating a Bulleted List
bulleted list
tags and text
Saving the HTML File
• You must save the file before you can view
it in your browser
• HTML files must end with an extension of
.htm or .html
• .html extensions only work on Web servers
running an operating system that supports
long filenames
maximize
Internet Explorer Window
Your Browser
button
menu bar
standard
address bar buttons
toolbar
default
startup page
status bar
Your Web Page
title
main heading
paragraph
H2 heading
body of
Web page bulleted list
Adding Background Color
Locate the
6-character code
of the color you
wish to use
Adding Background Color
Background color code goes
at the end of the BODY tag
Centering the Heading
• Text can be aligned differently on the page
– ALIGN = “LEFT”
– ALIGN = “RIGHT”
– ALIGN = “CENTER”
• The default alignment for headings is left-
alignment
Centering the Heading
center-alignment code
Adding a Horizontal Rule
• Horizontal Rules are graphical images that
act as dividers
• The tag used to insert a Horizontal Rule is
• Horizontal Rules are easy to insert
Adding a Horizontal Rule
• Horizontal Rules are graphical images that
act as dividers
• The tag used to insert a Horizontal Rule is
• Horizontal Rules are easy to insert
Adding a Horizontal Rule
Horizontal Rules
Default HR
HR with size=1
HR with size=5
HR with size=10
HR with size=10 and noshade
Adding a Horizontal Rule
horizontal
rule tag
Viewing the Modified File in Your
Browser
after saving the modified file,
click the Refresh button in
your browser
Viewing Your Web Page Source
• You can view the HTML code on any Web
page from within your browser
• This allows you to see how others created
their Web pages
Definition Lists
• Used to list information without the
standard bullet or numbered list symbols
• Syntax is not as straightforward as ,
, or
• and start and end the list
• and are used to create the
actual list elements, terms, and definitions
Definition Lists
definition list start definition
term start
definition
start
definition list end
definition terms
definitions
Summary
• Identify elements of a Web Page
• Enter the , , ,
and tags
• Enter a paragraph of text, a bulleted list, and
HTML tags
• Save an HTML file