Basic HTML Part 1: Basic Web Page Production

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>
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

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”>

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%>

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

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>

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>
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

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>

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

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
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

Parts of a table
<TABLE>
<TR>
Part 5 : Tables <TD> </TD>
</TR>
<TR>
<TD> </TD>
</TR>
</TABLE>
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

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>

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

6
The End
c1999 Kathleen Schrock 37

(kathy@kathyschrock.net)

Basic HTML Part 1: Basic Web Page Production

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Basic HTML Part 1: Basic Web Page Production

Hochgeladen von

Copyright:

Verfügbare Formate

Basic HTML

Part 1: Basic Web Page Production

c1999 Kathleen Schrock 1 c1999 Kathleen Schrock 2

Basic Web page creation Basic HTML tags

Heading tags Paragraph and break tags

n Used to denote main headings and n <P></P> surround a paragraph of info

<H1>This is H1</H1> This is H1 n <BR> (single-sided tag)

c1999 Kathleen Schrock 5 c1999 Kathleen Schrock 6

c1999 Kathleen Schrock 7 c1999 Kathleen Schrock 8

Changing the text color The horizontal rule

n Same codes as for background color n Used to separate portions of a page

c1999 Kathleen Schrock 9 c1999 Kathleen Schrock 10

Bold and italic

n Used to emphasize text

c1999 Kathleen Schrock 11 c1999 Kathleen Schrock 12

n Bulleted lists n Good for drawing attention to items that

c1999 Kathleen Schrock 13 c1999 Kathleen Schrock 14

Numbered (ordered) lists Definition list

Links and navigation

c1999 Kathleen Schrock 17 c1999 Kathleen Schrock 18

c1999 Kathleen Schrock 19 c1999 Kathleen Schrock 20

Changing the link color

n If you change the background color, you

c1999 Kathleen Schrock 21 c1999 Kathleen Schrock 22

Graphics for your page Adding graphics to your page

n Adding graphics to your page n Two file formats

c1999 Kathleen Schrock 25

Using graphics as links Inserting a background picture

n You may use a picture as a hypertext n Background pictures should be small

c1999 Kathleen Schrock 27 c1999 Kathleen Schrock 28

c1999 Kathleen Schrock 31 c1999 Kathleen Schrock 32

Adding a caption Cell padding and spacing

c1999 Kathleen Schrock 33 c1999 Kathleen Schrock 34

Table Headings Spanning across columns or cells

c1999 Kathleen Schrock 35 c1999 Kathleen Schrock 36

c1999 Kathleen Schrock 37

Das könnte Ihnen auch gefallen