Basic HTML
Part 1: Basic Web Page Production
By Kathy Schrock
c1999 Kathleen Schrock 1 c1999 Kathleen Schrock 2
(
[email protected]) (
[email protected])
Basic Web page creation Basic HTML tags
<HTML>
n Basic HTML tags n Background color <HEAD>
n Heading tags n Text color
<TITLE> </TITLE>
n Paragraph and n Horizontal rules
break tags </HEAD>
n Bold and italic
n Text alignment <BODY>
</BODY>
</HTML>
c1999 Kathleen Schrock 3 c1999 Kathleen Schrock 4
([email protected]) ([email protected])
Heading tags Paragraph and break tags
n Used to denote main headings and n <P></P> surround a paragraph of info
subheadings; go from 1 to 6 n Skips a line and starts a new paragraph
n Show relative importance of information
<H1>This is H1</H1> This is H1 n <BR> (single-sided tag)
<H2>This is H2</H2> This is H2 n Starts the next word on the next line
<H3>This is H3</H3> This is H3 n No space left between lines
<H4>This is H4</H4> This is H4
c1999 Kathleen Schrock 5 c1999 Kathleen Schrock 6
(
[email protected]) (
[email protected])
1
Text alignment Background color
n The default is that all text is left-aligned n Attribute added to the <BODY> tag
n To align paragraphs, you can add to the n There are 16 color names you can add
paragraph tag <P align=center> </P> (red, blue, yellow, etc.) or you have to
know the hexadecimal code
n To center whole blocks of text, just use n Examples
<CENTER> </CENTER> <BODY BGCOLOR=“red”>
<BODY BGCOLOR=“#00FFFF”>
c1999 Kathleen Schrock 7 c1999 Kathleen Schrock 8
(
[email protected]) (
[email protected])
Changing the text color The horizontal rule
n Same codes as for background color n Used to separate portions of a page
n Attribute of the body tag, too n A one-sided tag
n Example would lead to a light blue page n Can include a % attribute
with dark purple text n Example
<HR>
<BODY BGCOLOR=“#00FFFF” TEXT=“#800000”> <HR WIDTH=50%>
c1999 Kathleen Schrock 9 c1999 Kathleen Schrock 10
(
[email protected]) (
[email protected])
Bold and italic
n Used to emphasize text
n Two-sided tags
Part 2: Creating Lists
n Examples
<B>This is bold</B> This is bold
<I>This is italic</I> This is italic
c1999 Kathleen Schrock 11 c1999 Kathleen Schrock 12
(
[email protected]) (
[email protected])
2
Lists Bulleted (unordered) list
n Bulleted lists n Good for drawing attention to items that
n Numbered lists are in no particular order
n Definition list <UL>
<LI>Dogs * Dogs
<LI>Cats * Cats
</UL>
c1999 Kathleen Schrock 13 c1999 Kathleen Schrock 14
(
[email protected]) (
[email protected])
Numbered (ordered) lists Definition list
n Includes a statement of the word and
n Great for describing sequential tasks or followed by the definition
step-by-step procedures
<DL>
<OL>
<DT>Cirrus Cirrus
<LI>Phase 1 1. Phase 1
<DD>high wispy high wispy
<LI>Phase 2 2. Phase 2
<DT>Nimbus Nimbus
</OL>
<DD>dark dark
</DL>
c1999 Kathleen Schrock 15 c1999 Kathleen Schrock 16
(
[email protected]) (
[email protected])
Links and navigation
n Relative links
Part 3 : Links and Navigation – Links in your own directory
n Absolute links
– Links located on another server
n Changing link color
c1999 Kathleen Schrock 17 c1999 Kathleen Schrock 18
(
[email protected]) (
[email protected])
3
Relative links Absolute links
n Give you the name of the file you want n Specify the entire URL to go to
to access in relation to the page you are
on n <A HREF=“http://cnn.com/”>Go to CNN</A>
n If index.htm and page2.htm are in the
same directory, the link on the index
page to page 2 would look like this
n <A HREF=“page2.htm”>Go to page 2</A>
c1999 Kathleen Schrock 19 c1999 Kathleen Schrock 20
(
[email protected]) (
[email protected])
Changing the link color
n If you change the background color, you
may need to change the link color, too
n <BODY BGCOLOR=“#00FFFF”
Part 4: Adding Graphics
text=“#000000” link=“#FF0000”
VLINK=“#000000”>
n Link is the color before choosing
n Vlink is the color of the visited link
c1999 Kathleen Schrock 21 c1999 Kathleen Schrock 22
(
[email protected]) (
[email protected])
Graphics for your page Adding graphics to your page
n Adding graphics to your page n Two file formats
n Aligning graphics – GIF for icons and line drawings
n Using graphics as links – JPEG for photographs
n Insert a background package n Try to keep graphic files under 30k
n Example of adding an apple picture
n <IMG SRC=“apple.gif” alt=“apple”>
n The alt tag shows up in text browsers
c1999 Kathleen Schrock 23 c1999 Kathleen Schrock 24
(
[email protected]) (
[email protected])
4
Aligning graphics on a page
By using the
align=right tag, you
n By default, the next line of text starts can move the
after the graphic image picture to the right
side of the text and
n By using the align tag, the text can be
put the text next to
next to the graphic the picture rather
n <IMG SRC=“apple.gif” alt=“apple” than below it.
ALIGN=RIGHT>
c1999 Kathleen Schrock 25
(
[email protected])
Using graphics as links Inserting a background picture
n You may use a picture as a hypertext n Background pictures should be small
link by typing <A HREF= gifs that tile well
“http://apple.com/”><IMG SRC= n <BODY BACKGROUND=“background.gif”
“apple.gif” alt=“apple”></A> which results text=“#000000” link=“#FF0000”
VLINK=“#000000”>
in an apple picture with a blue box
around it to show it as a link; for no box,
add BORDER=0 to the IMG SRC tag
c1999 Kathleen Schrock 27 c1999 Kathleen Schrock 28
(
[email protected]) (
[email protected])
Parts of a table
<TABLE>
<TR>
Part 5 : Tables <TD> </TD>
</TR>
<TR>
<TD> </TD>
</TR>
</TABLE>
c1999 Kathleen Schrock 29 c1999 Kathleen Schrock 30
([email protected]) ([email protected])
5
Adding a border Changing the size of a table
n Becomes an attribute of the TABLE tag n By default, tables take up as much room
n <TABLE BORDER=2> as they need to hold the text
n Gives your table a 2 pixel border n To make it a certain size, add the
n With a border=0, you can easily create attribute to the TABLE tag
columns that are lined up and leave as n <TABLE height=100 width=200>
much space as you wish n You can also use these in the <TD> tag
to change the size of a particular cell
c1999 Kathleen Schrock 31 c1999 Kathleen Schrock 32
(
[email protected]) (
[email protected])
Adding a caption Cell padding and spacing
n Used to tell someone what the table n Attributes of the TABLE tag
means n Cell spacing adds space between the
n Comes after the TABLE tag cells without making the cells bigger
n <CAPTION></CAPTION> n Cell padding adds space around the
n Appears at the top of the table contents of a cell, pushing the walls of
the cell outward
n <TABLE cellspacing=2 cellpadding=2>
c1999 Kathleen Schrock 33 c1999 Kathleen Schrock 34
(
[email protected]) (
[email protected])
Table Headings Spanning across columns or cells
n Used to put column headings in the n <TD colspan=2> would have data cover
table two columns
<TR>
<TH></TH><TH></TH>
</TR> n <TD rowspan=2> would have data
cover two rows
c1999 Kathleen Schrock 35 c1999 Kathleen Schrock 36
(
[email protected]) (
[email protected])
6
The End
c1999 Kathleen Schrock 37
(
[email protected])
