You are on page 1of 7

Basic HTML

Part 1: Basic Web Page Production
By Kathy Schrock

c1999 Kathleen Schrock 1 c1999 Kathleen Schrock 2
(kathy@kathyschrock.net) (kathy@kathyschrock.net)

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
(kathy@kathyschrock.net) (kathy@kathyschrock.net)

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
(kathy@kathyschrock.net) (kathy@kathyschrock.net)

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
(kathy@kathyschrock.net) (kathy@kathyschrock.net)

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
(kathy@kathyschrock.net) (kathy@kathyschrock.net)

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
(kathy@kathyschrock.net) (kathy@kathyschrock.net)

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
(kathy@kathyschrock.net) (kathy@kathyschrock.net)

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
(kathy@kathyschrock.net) (kathy@kathyschrock.net)

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
(kathy@kathyschrock.net) (kathy@kathyschrock.net)

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
(kathy@kathyschrock.net) (kathy@kathyschrock.net)

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
(kathy@kathyschrock.net) (kathy@kathyschrock.net)

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
(kathy@kathyschrock.net) (kathy@kathyschrock.net)

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
(kathy@kathyschrock.net)

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
(kathy@kathyschrock.net) (kathy@kathyschrock.net)

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
(kathy@kathyschrock.net) (kathy@kathyschrock.net)

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
(kathy@kathyschrock.net) (kathy@kathyschrock.net)

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
(kathy@kathyschrock.net) (kathy@kathyschrock.net)

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
(kathy@kathyschrock.net) (kathy@kathyschrock.net)

6
The End

c1999 Kathleen Schrock 37
(kathy@kathyschrock.net)

7