Introduction to HTML
What is HTML?
HTML, otherwise known as
HyperText Markup Language, is the
language used to create Web pages
Using HTML, you can create a Web
page with text, graphics, sound,
and video
Tags
Theessence of HTML
programming is tags
A tag is a keyword enclosed by
angle brackets ( Example: <I> )
There are opening and closing
tags for many but not all tags;
The affected text is between the
two tags
More Tags...
The opening and closing tags use
the same command except the
closing tag contains and additional
forward slash /
Forexample, the expression <B>
Warning </B> would cause the word
‘Warning’ to appear in bold face on
a Web page
Nested Tags
Whenever you have HTML tags
within other HTML tags, you
must close the nearest tag first
Example:
<H1> <I> The Nation </I> </H1>
Structure of a Web Page
<HTML>
All Web pages
<HEAD>
share a common
<TITLE> Example </TITLE>
structure
</HEAD>
All Web pages <BODY>
should contain a This is where you would
pair of <HTML>, include the text and
images on your Web page.
<HEAD>,
</BODY>
<TITLE>, and
</HTML>
<BODY> tags
The <TITLE> Tag
Choose the title of your Web page
carefully; The title of a Web page
determines its ranking in certain
search engines
The title will also appear on
Favorite lists, History lists, and
Bookmark lists to identify your page
Text Formatting
Manipulating text in HTML can
be tricky; Oftentimes, what
you see is NOT what you get
Forinstance, special HTML tags
are needed to create
paragraphs, move to the next
line, and create headings
Text Formatting Tags
<B> Bold Face </B>
<I> Italics </I>
<U> Underline </U>
<P> New Paragraph </P>
<BR> Next Line
Changing the Font
The expression <FONT
FACE = “fontname”> …
</FONT> can be used to
change the font of the
enclosed text
Tochange the size of text use the
expression <FONT SIZE=n> …. </FONT>
where n is a number between 1 and 7
Changing the Font
To change the color, use <FONT COLOR=“red”>…. </FONT>; The color
can also be defined using hexadecimal representation ( Example:
#ffffff )
These attributes can be combined to
change the font, size, and color of the
text all at once; For example, <FONT
SIZE=4 FACE=“Courier” COLOR=“red”> ….
</FONT>
Headings
Web pages are typically organized into
sections with headings; To create a
heading use the expression <Hn>….</Hn>
where n is a number between 1 and 6
In this case, the 1 corresponds to the
largest size heading while the 6
corresponds to the smallest size
Aligning Text
The ALIGN attribute can be inserted
in the <P> and <Hn> tags to right
justify, center, or left justify the
text
For example, <H1 ALIGN=CENTER>
The New York Times </H1> would
create a centered heading of the
largest size
Page Formatting
Todefine the background color,
use the BGCOLOR attribute in
the <BODY> tag
Todefine the text color, use the
TEXT attribute in the <BODY> tag
Todefine the size of the text,
type <BASEFONT SIZE=n>
Example
<HTML>
<HEAD>
<TITLE> Example </TITLE>
</HEAD>
<BODY BGCOLOR=“black” TEXT=“white”>
<BASEFONT SIZE=7>
This is where you would include the text
and images on your Web page.
</BODY>
</HTML>
Inserting Images
Type <IMG SRC = “image.ext”>,
where image.ext indicates the
location of the image file
The WIDTH=n and HEIGHT=n
attributes can be used to adjust the
size of an image
The attribute BORDER=n can be used
to add a border n pixels thick around
the image
Alternate Text
Some browsers don’t support
images. In this case, the ALT
attribute can be used to create
text that appears instead of the
image.
Example:
<IMG SRC=“satellite.jpg” ALT =
“Picture of satellite”>
Links
A link lets you move from one page
to another, play movies and sound,
send email, download files, and
more….
A link has three parts: a
destination, a label, and a target
To create a link type
<A HREF=“page.html”> label </A>
Anatomy of a Link
<A HREF=“page.html”> label </A>
In the above link, “page.html” is the destination. The
destination specifies the address of the Web page or file
the user will access when he/she clicks on the link.
The label is the text that will appear underlined or
highlighted on the page
Example: Links
To create a link to CNN, I would type:
<A HREF=“http://www.cnn.com”>CNN</A>
To create a link to MIT, I would type:
<A HREF=“http://www.mit.edu”>MIT</A>
Changing the Color of Links
The LINK, VLINK, and ALINK attributes can
be inserted in the <BODY> tag to define
the color of a link
LINK defines the color of links that have not
been visited
VLINK defines the color of links that have
already been visited
ALINK defines the color of a link when a user
clicks on it
Using Links to Send Email
Tocreate a link to an email address,
type <A
HREF=“mailto:email_address”>
Label</A>
Forexample, to create a link to send
email to myself, I would type: <A
HREF=“mailto:
ktdunn@mit.edu”>email Katie
Dunn</A>
Ordered Lists
Ordered lists are a Here’s how it would
list of numbered look on the Web:
items.
To create an
ordered list, type:
<OL>
<LI> This is step
one.
<LI> This is step
two.
<LI> This is step
three.
</OL>
More Ordered Lists….
TheTYPE=x attribute allows you to
change the the kind of symbol that
appears in the list.
A is for capital letters
a is for lowercase letters
I is for capital roman numerals
i is for lowercase roman numerals
Unordered Lists
An unordered list is
a list of bulleted
items Here’s how it would
look on the Web:
To create an
unordered list,
type:
<UL>
<LI> First item in list
<LI> Second item in
list
<LI> Third item in
list
</UL>
