Introduction to HTML
What really happens when we view the Web page http://dailynews.yahoo.com/topstory.html
?
-
Your Web browser program attempts to contact the computer named dailynews.yahoo.com
-
dailynews.yahoo.com looks for a
file named topstory.html
on its hard drive
-
dailynews.yahoo.com sends a copy
of this file to your computer
-
Your Web browser displays the page by reading (or interpreting)
the HTML formatting commands in the file
-
A copy of the topstory.html file
may be stored in the computer's cache on your local hard drive for
future reference
Hypertext Markup Language (HTML)
-
HTML is a formal computer language that obeys precise syntactic rules
-
Used to specify the content and layout of Web pages
-
HTML is less powerful than traditional computer programming languages such
as C, Java, or BASIC
-
An HTML file is just a plain ordinary text file
-
HTML tags are used within the file to specify how information should
be formatted
Sample HTML File
<HTML>
<HEAD>
<TITLE>My First Page</TITLE>
</HEAD>
<BODY>
<P>This is my <I>very first</I>
Web page. How <B>exciting</B>!</P>
</BODY>
</HTML>
This is my very first Web page. How exciting!
Common HTML Tags
-
Document structure tags: <HTML>,
<HEAD>, <TITLE>, <BODY>
-
Header tags: <H1>, <H2>, <H3>,
<H4>, <H5>, <H6>
-
Most tags come in pairs: <BODY>...</BODY>,
<P>...</P>, <H3>...</H3>, etc.
-
Section tags: <P>, <BLOCKQUOTE>,
<CODE>, <CENTER>, <PRE>
-
Character tags: <I>, <B>,
<U>, <TT>, <SUB>, <SUP>
-
List tags: <OL>, <UL>, <LI>,
<DL>, <DT>, <DD>
-
Font tags: <FONT>
-
A few tags are "one-sided": <HR>,
<BR>
-
Comment tags: <!-- ... -->
Tag Attributes
-
Behavior of tags can be modified by adding attributes to the tag
-
Possible attributes depend on the type of tag involved
-
Examples:
-
<P ALIGN=CENTER>...</P>
-
<H2 ALIGN=CENTER>...</H2>
-
<BODY BACKGROUND="image.gif">...</BODY>
-
<BODY BGCOLOR=YELLOW TEXT=BLUE>...</BODY>
-
<HR WIDTH=80% SIZE=5 NOSHADE>
-
<FONT FACE="Arial" COLOR=RED>...</FONT>
Images
-
GIF and JPEG files are the principal types of image files found on Web
pages
-
Image tags: <IMG SRC="image.jpg">
-
Attributes: <IMG SRC="image.jpg"
ALIGN=TOP ALT="Descriptive text">