HTML
Understanding HTML
• Web pages are made up of text and
graphics you want to display, along with
links to other documents.
• You use HTML (Hypertext Markup
Language) to:
▫ provide information to the browsers as to
how to display pages (structure of the
document)
▫ create links.
Understanding HTML
• HTML is a Web’s universal programming
language
• It’s not specific to any platform, computer
brand, or operating system
• HTML documents are actually text files
with HTML tags embedded.
• Each browser expresses the commands in
its own way.
How can I see the source code of a Web
page?
• In Internet Explorer
• In Mozilla Firefox
Creating web pages with HTML
• If you want to code your page from
scratch, you can use Windows Notepad.
▫ Demonstration
• You can create your page using an editor
such as iWeb, Microsoft Expression Web,
KompoZer, Amaya, or Adobe
Dreamweaver
Understanding HTML Tags
• HTML is a set of codes that you use to
create a document.
• These codes, called tags, format text,
place graphics on the page, and create
links.
• HTML vs. XHTML
Understanding HTML Tags
• HTML tags follow a certain format, or
syntax
• Each tag begins with an opening angle
bracket () and contains a command
between the brackets.
• Many of the tags are paired. The first tag
indicates the beginning of the command.
The closing tag of the pair has the same
syntax as the opening tag, but includes a
forward slash (/) before the command.
Example of paired tags
The entire Web document
Using HTML Structure Tags
• Always two main sections: HEAD and
BODY
text that appears in title bar
all information that will be displayed on the
screen
HTML Structure
• Like a sandwich?
Using HTML Structure Tags
• Many browsers display the title in a title
bar when it is displayed
• The body section contains the
information – text, graphics, and so on –
that will appear on the screen.
Entering Headings in an HTML File
• Headings serve to separate text and
introduce new topics on Web pages.
• The heading tags used for this purpose
vary in size.
• The size range from through ,
with being the largest.
Entering Text in Paragraph Format
• Web pages generally contain a significant
amount of text, most of which will be in
paragraph format
•
• tag starts a new line and adds some
additional vertical space between the line
it just displayed and the following line.
Creating a List
• Bulleted lists (Unordered Lists)
• Numbered lists (Ordered Lists)
First Item Name
Second Item Name
• typeName: disc, square, circle
Creating a List
First Item Name
Second Item Name
• typeName: 1, A, a, I, i
Adding Background Color
• The bgcolor attribute lets you change the
background color of the Web page.
• Located in the body tag
• See common Web Page Colors and their
hexadecimal equivalents + sixteen
predefined colors
Adding an Horizontal Rule
• Horizontal rules are graphical images
that act as dividers in a Web page.
• tag
Alignment Attribute
• align attribute
•
• left, center, or right
FONT Attributes
• font tag
• Font Attributes:
color Changes the font color
Uses color codes
face Changes the font type
size Changes the font size
Choices from 1 to 7, or
relative values such as +2
Bold and Italic
• Bold: ….
• Italic: …..
Web Page Images
• Used as:
▫ Background
▫ Pictures or graphics on the web page
• Image Types:
▫ JPEG (Joint Photographic Experts Groups)
files: A graphic image that is saved using
compression techniques to make it smaller for
download on the Web. It supports more colors
and resolutions than the other file types =>
good for complex images such as scanned
photographs.
Background Images
• Use the “background” attribute for the
body tag
Inserting an Image and Wrapping Text
• src attribute with border, height, width,
align
• border value: 0 => No border
1 => Thin border
2 => Thicker border …..
• align value: left, right, bottom, top,
middle
Adding a Link
• Uses and tags
• Three types of links:
▫ E-mail links
▫ Internal links
▫ External links
• mailto word
Collier
E-mail links
• mailto word
Collier
here
External Links
Yahoo!