Beginning HTML

Example 1-1

<HTML>
<Head>
<Title> Joe's Music and Movies </Title>
</Head>
<Body>
</Body>
</Html>

Headings serve to create larger and bolder text on Web Pages. The heading tags allow you to vary the size of the heading that you use. They come in sizes <H1> to <H6>, with <H1> being the largest and <H6> being the smallest.

Example 1-2

<Html>
<Head>
<Title> Joe's Music and Movies </Title>
</Head>
<Body>
<H1> Joe's Music and Movies</H1>
</Body>
</Html>

Paragraph Format is usually used when a web page contains a large amount of text or the designer is giving their page a look that is less messy. The<P> and</P> tag start a new line of text and creates some additional vertical space between the line that it just displayed and the following line. If you plan on using large amounts of text then it is wise to use the <P> tag.

Example 1-3

<Html>
<Head>
<Title> Joe's Music and Movies </Title>
</Head>
<Body>
<H1> Joe's Music and Movies</H1>
<P>Joe's Music and Movies has been in business for the past 30 years. We specialize in your favorite CD's and DVD's. Located on Main Street, Joe's is proud to be one lf the city's best locally owned businesses. Call 1-245-543-9856 for more information on your favorite music and movies.</P>
</Body>
</Html>

Lists are text that are displayed in outline format. Lists come in two types, ordered and unordered. Unordered lists are also known as bulleted lists. They format their information with bullets. Ordered lists are known as numbered lists. Their information is displayed as either numbers or letters. The unordered list uses the <UL> and </UL> tags while the ordered list uses the <OL> and </OL> tags. Inside of each of the opening list tags you give the tag an instruction on which type of bullet, number, or letter to use. It is written by using the word Type=" " inside the tag like this: <OL type="I"> which would produce Roman Numerals for your list. In HTML you must tell the browser which items are supposed to have the bullets, numbers, or letters in front of them. You do this by using the tag <LI> in front of the items when you type them.

Example 1-4

Example of Lists

To see how you would input the different bullets into a list type the examples below.

<HTML>
<Body>
<H3> Unordered List </H3>
<UL Type="disc">
<LI> First Item - bullet is a disc
<LI> Second Item - bullet is a disc
</UL>

<UL Type="square">
<LI> First Item - bullet is a square
<LI> Second Item - bullet is a square
</UL>

<UL Type="circle">
<LI> First Item - bullet is a circle
<LI> Second Item - bullet is a circle
</UL>

<H3> Ordered List </H3>
<UL Type="1">
<LI> First Item - bullet is a Number 1
<LI> Second Item - bullet is a Number 2
</UL>

<UL Type="A">
<LI> First Item - bullet is a Capital A
<LI> Second Item - bullet is a Capital B
</UL>

<UL Type="a">
<LI> First Item - bullet is a lowercase a
<LI> Second Item - bullet is a lowercase b
</UL>

<UL Type="I">
<LI> First Item - bullet is a Roman Numeral I
<LI> Second Item - bullet is a Roman Numeral II
</UL>

<UL Type="i">
<LI> First Item - bullet is a Roman Numeral i
<LI> Second Item - bullet is a Roman Numeral ii
</UL>

</Body>
</HTML>

You may have noticed that your HTML Web Page is displayed with a white background with black text. Most people would rather have some sort of color scheme to make their web page more exciting. First you must choose the color you would like to change your background to using the six digit color code. That six digit color would be combined with the attribute BGCOLOR inside of the <Body> tag. The tag would then look like this: <Body Bgcolor="#94D6E7">.

Example 1-5

<Html>
<Head>
<Title> Joe's Music and Movies </Title>
</Head>
<Body BGCOLOR="#ADDE63">
<H1>Joe's Music and Movies</H1>
<P>Joe's Music and Movies has been in business for the past 30 years. We specialize in your favorite CD's and DVD's. Located on Main Street, Joe's is proud to be one lf the city's best locally owned businesses. Call 1-245-543-9856 for more information on your favorite music and movies.</P>
<H2>Our top three CD's are:</H2>
<OL>
<LI>Blink 182
<LI>Creed
<LI> Staind
</OL>
</Body>
</Html>

To set your heading apart from the rest of your page you can align the text differently on your page. You can specify left, right, and center alignment with the attributes Align="Left", Align="Right", and Align="Center" inside of the heading tag like <H1 align="right">.

Example 1-6

<Html>
<Head>
<Title> Joe's Music and Movies </Title>
</Head>
<Body BGCOLOR=#ADDE63>
<H1 ALIGN="Center">Joe's Music and Movies</H1>
<P>Joe's Music and Movies has been in business for the past 30 years. We specialize in your favorite CD's and DVD's. Located on Main Street, Joe's is proud to be one lf the city's best locally owned businesses. Call 1-245-543-9856 for more information on your favorite music and movies.</P>
<H2>Our top three CD's are:</H2>
<OL>
<LI>Blink 182
<LI>Creed
<LI> Staind
</OL>
</Body>
</Html>

Horizontal Rules are graphical images that act as dividers on a Web Page. They help to separate sections on your page. the tag used to insert a horizontal rule is <HR>. You can add a variety to your page by adding the attribute size=# into your <HR> or by adding the word NOSHADE to turn the shading of the rule off.

Example 1-7

<Html>
<Head>
<Title> Joe's Music and Movies </Title>
</Head>
<Body BGCOLOR=#ADDE63>
<H1 ALIGN="Center">Joe's Music and Movies</H1>
<HR size=5> <P>Joe's Music and Movies has been in business for the past 30 years. We specialize in your favorite CD's and DVD's. Located on Main Street, Joe's is proud to be one lf the city's best locally owned businesses. Call 1-245-543-9856 for more information on your favorite music and movies.</P>
<H2>Our top three CD's are:</H2>
<OL>
<LI>Blink 182
<LI>Creed
<LI> Staind
</OL>
</Body>
</Html>

<<Go Back to Table of Contents

Go to Section 2>>