Scribd
Upload
69 views

Basic HTML Part 1: Basic Web Page Production

The document introduces basic HTML tags for structuring web pages, including tags for headings, paragraphs, lists, links, and adding graphics. It covers common text formatting tags, how to add and align images, and creating internal and external links. The goal is to provide the essential information needed for basic web page creation and formatting using HTML.

Uploaded by

saraa1990
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
69 views

Basic HTML Part 1: Basic Web Page Production

The document introduces basic HTML tags for structuring web pages, including tags for headings, paragraphs, lists, links, and adding graphics. It covers common text formatting tags, how to add and align images, and creating internal and external links. The goal is to provide the essential information needed for basic web page creation and formatting using HTML.

Uploaded by

saraa1990
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 7

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

You might also like