HTML Lesson 1
Introduction
HTML stands for HyperText Markup
Language. HTML is basically a text file that is marked up with codes that
are called tags. These tags tell web browsers what to do with the web page
elements. Without these tags the browser would only display text files.
Tags There are two kinds of tags
in HTML, container tags and empty tags. Then there are tag attributes in
which they enhance the way the tag displays the content on the page. All
tags consist of either <> or </>, these are called angle brackets.
These tell the browser that the text between them is an HTML command and tell the browser how to display the content.
Container Tags need both an
opening tag <> and a closing tag </>. These tell the browser when to begin
a command and when to end it. Most tags are comprised of container tags.
Empty Tags are made up of just
the opening tag, the closing tag is not needed. The three most common
empty tags are <HR> horizontal rule, <BR> line break, and <P> paragraph.
The <P> can be used as an empty tag or a container tag with the closing
tag being </P>. It is considered more proper to use the paragraph tags as
container tags.
Attributes are added to a tag to
enhance the way the tag displays the content on the page. They are made up
of three components, the name of the attribute, the = sign and the value
of the attribute. Attributes are optional.
Basic Structure Tags are the tags required by the
browser , without them the browser will not recognize the file as being an
HTML file and the if the page loaded it would not be displayed properly.
These tags are the <HTML> <HEAD> <TITLE> and <BODY> tags. When using
FrontPage or AceHTML these tags are automatically included in any new
page.
<HTML> This is the first tag on the page and it tells the
web browser that it is an HTML document. Then at the very end of the page
the </HTML> tag is displayed to tell the browser that the document is
finished.
<HEAD> This tag holds the page title, meta tags, javascript, style sheets. When this information is finished it would end
with the </HEAD> tag.
<TITLE> This tag tells the browser the name of the page.
This will be displayed in the browsers title bar. The end tag for this is
</TITLE>
<BODY>This tag will hold all the information you want
displayed on the page. When you have finished entering your data you want
displayed you would end it with </BODY>.
Putting all the basic structure tags together your page
would look as follows:
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Paragraphs are created by using the <P> tag, it is
not mandatory to use the end tag </P> but it will assist you in easily
recognizing where a paragraph begins and ends when editing a page. You
enter the <P> tag just before your paragraph and then the </P> tag at the
end of your paragraph. If you enter more than one paragraph on a page a
double space will be left between each paragraph.
You can
align your paragraphs by using attributes. The alignment attributes are
Left, Right, Center and Justify. These attributes would be entered as
follows:
<P ALIGN=LEFT> <P ALIGN=RIGHT> <P ALIGN=CENTER>
<P ALIGN=JUSTIFY>
If no attribute is included it will
default to left. When ending any one of these attributes the end tag still
remains at </P>. You can also center a paragraph by using the
<CENTER></CENTER> tags if you wish.
Blockquoting is
similar to using the tab function on the keyboard. It will indent your
text. The start tag is <BLOCKQUOTE> and the end tag is </BLOCKQUOTE>. You
can even use a series of blockquotes enabling you to indent the text as
many times as you need.
Line Breaks are accomplished
using the <BR> tag. It is similar to the paragraph tag except that it
leaves only a single line instead of a double line. This tag is an empty
tag so it does not require an end tag to use it.
Headings
are used to create titles and arrange information. Headings create a bold
text in six sizes. <H1> being the largest and <H6> being the smallest. The
tags for each size is as follows:
<H1>Your text</H1>
<H2>Your text</H2>
<H3>Your text</H3>
<H4>Your text</H4>
<H5>Your
text</H5>
<H6>Your text</H6>
You can align the headings in the same manner as aligning
paragraphs although justify probably wouldn't really work for a title.
Coding a heading with an alignment attribute would look as follows:
<H1 ALIGN=CENTER>Your text</H1>
Lists are useful to provide information in a
structured format. There are three kinds of lists, ordered, which numbers
the list items chronologically; unordered, which lists the items in a
bulleted fashion; and the definition list which produce term/definition
pairs.
Ordered List start tag is <OL> and end tag is </OL> and
each item in the list will begin with <LI>. An ordered list will look as
follows:
<OL>
<LI> Item one
<LI> Item
two
<LI> Item three
<OL>
<LI> Item A
<LI> Item B
<LI> Item C
</OL>
<LI> Item four
<LI> Item five
</OL>
and will look as follows when seen in the web browser
-
Item one
-
Item two
-
Item three
- Item A
- Item B
- Item C
-
Item four
-
Item five
The ordered list has the following attributes:
1 Numbers (default)
A Uppercase letters
a Lowercase letters
I Uppercase Roman Numerals
i Lowercase Roman Numerals
The tag with attributes will look like this:
<OL TYPE="I">
Unordered List start tag is <UL> and end tag is </UL> and
each item in the list will begin with <LI>. An unordered list will look as
follows:
<UL>
<LI> Item one
<LI> Item
two
<LI> Item three
<UL>
<LI> Item A
<LI> Item B
<LI> Item C
</UL>
<LI> Item four
<LI> Item five
</UL>
and will look as follows when seen in the web browser
- Item one
- Item two
- Item three
- Item four
- Item five
The unordered list has the following attributes:
Disc - Bullet in the shape of a disc
Square - Bullet in the shape of a square
Circle - Bullet in the shape of a circle
The tag with attributes will look like this:
<UL TYPE="Disc">
Definition List start tag is <DL> and end tag is
</DL>. Each term is started with <DT> and each definition is started with
<DD>
Example of a definition list:
<DL>
<DT>FrontPage<DD>A Web Editor
<DT>Windows<DD>An Operating System
<DT>Paintshop Pro<DD>A
Graphics Editor
</DL>
and it would look like this in your web browser:
- FrontPage
- A Web Editor
- Windows
- An Operating System
- Paintshop Pro
- A Graphics Editor
Menu List start tag is <MENU> and the end tag is </MENU>.
Even though the start tag and end tag are different this list looks
identical to the bulleted list.
Example of a Menu list:
<MENU>
<LI>eggs</LI>
<LI>bacon</LI>
<LI>toast</LI>
<LI>orange juice</LI>
<LI>coffee</LI>
</MENU>
will come out like this in the browser:
Directory List start tag is <DIR> and the end tag is </DIR> and
as with the Menu List it will produce the same list as the bulleted list.
Horizontal Rule is used to separate parts of a web page.
The tag for the horizontal rule is <HR> and it is an empty tag so it does
not need an end tag. The attributes of the horizontal rule are as follows:
- SIZE
- this adjusts the thickness of the rule
- WIDTH
- this adjusts the width of the rule, can be specified as a percentage of the screen or absolute
- ALIGN
- aligns to the left, right or center of the page
- NOSHADE
- removes the 3D look the horizontal rule usually has
Examples
<HR SIZE=10>
<HR WIDTH=50%>
<HR WIDTH=100>
<HR ALIGN=RIGHT WIDTH=50%>
<HR NOSHADE>
