HTML
HTML stand for HyperText Markup Language
EXPLANATION OF TAG
An element is a fundamental component of the structure of text document. Some examples of elements are heads, tables, paragraph, and list. To get your browse to recognize the different elements we will have to use HTML tag.
HTML tags consist of a left angle bracket (<), a tag name, and right ngle bracket (>).
Tags are usually paired (e.g.</H1> and </H1> to start and end the tag instruction .
Markup Tags
HTML- This element tells your browse that the file contains HTML codes information
HEAD- The head element identifies the first part of your HTML coded document that contains the title
TITLE -the title element contains your documents title and identifies it content in a global context. stand for HyperText Markup Language.
BODY
The second and largest part of your HTML document is the body, which contains the
content of your document (displayed within the text area of your browser window). The
tags explained below are used within the body of your HTML document.
- Background Graphics
Newer versions of Web browsers can load an image and use it as a background
when displaying a page. Some people like background images and some don't. In
general, if you want to include a background, make sure your text can be read
easily when displayed on top of the image.
However you only have to create a small piece of the image. Using a feature called
tiling, a browser takes the image and repeats it across and down to fill your
browser window. In sum you generate one image, and the browser replicates it
enough times to fill your window. This action is automatic when you use the
background tag shown below.
The tag to include a background image is included in the <BODY> statement as an
attribute:
<BODY BACKGROUND="filename.gif">
- Background Color
By default browsers display text in black on a gray background. However, you can
change both elements if you want. Some HTML authors select a background color
and coordinate it with a change in the color of the text.
Always preview changes like this to make sure your pages are readable. In
general, try to avoid using high-contrast images or images that use the color of
your text anywhere within the graphic.
You change the color of text, links, visited links, and active links (links that are
currently being clicked on) using further attributes of the <BODY> tag. For
example:
<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">
This creates a window with a black background (BGCOLOR), white text (TEXT),
and silvery hyperlinks (LINK).
The six-digit number and letter combinations represent colors by giving their RGB
(red, green, blue) value. The six digits are actually three two-digit numbers in
sequence, representing the amount of red, green, or blue as a hexadecimal value
in the range 00-FF. For example, 000000 is black (no color at all), FF0000 is bright
red, 0000FF is bright blue, and FFFFFF is white (fully saturated with all three
colors).
These number and letter combinations are generally rather cryptic. Fortunately an
online resource is available to help you track down the combinations that map to
specific colors and there is software available for you to do this on your
workstation:
http://www.hidaho.com/colorcenter/
- Headings
HTML has six levels of headings, numbered 1 through 6, with 1 being the largest.
Headings are typically displayed in larger and/or bolder fonts than normal body
text. The first heading in each document should be tagged <H1>.
The syntax of the heading element is:
<Hy>Text of heading </Hy>
where y is a number between 1 and 6 specifying the level of the heading.
Do not skip levels of headings in your document. For example, don't start with a
level-one heading (<H1>) and then next use a level-three (<H3>) heading.
- Paragraphs
Unlike documents in most word processors, carriage returns in HTML files aren't
significant. In fact, any amount of whitespace -- including spaces, linefeeds, and
carriage returns -- are automatically compressed into a single space when your
HTML document is displayed in a browser. So you don't have to worry about how
long your lines of text are. Word wrapping can occur at any point in your source file
without affecting how the page will be displayed.
For example, a paragraph of text is coded as
<P>Welcome to the world of HTML.
This is the first paragraph.
No matter how short it is, it is
still a paragraph!</P>
In the source file there is a line break between the sentences. A Web browser
ignores this line break and starts a new paragraph only when it encounters another
<P> tag.
Important: You must indicate paragraphs with <P> elements. A browser ignores
any indentations or blank lines in the source text. Without <P> elements, the
document becomes one large paragraph. (One exception is text tagged as
"preformatted," which is explained below.) For example, the following would
produce identical output as the example given above:
<H1>Level-one heading</H1>
<P>Welcome to the world of HTML. This is the
first paragraph. No matter how short it is,
it is still a paragraph! </P> <P>And this is
the second paragraph.</P>
To preserve readability in HTML files, put headings on separate lines, use a blank
line or two where it helps identify the start of a new section, and separate
paragraphs with blank lines (in addition to the <P> tags). These extra spaces will
help you when you edit your files (but your browser will ignore the extra spaces
because it has its own set of rules on spacing that do not depend on the spaces
you put in your source file).
NOTE: The </P> closing tag may be omitted. This is because browsers
understand that when they encounter a <P> tag, it means that the previous
paragraph has ended. However, since HTML now allows certain attributes to be
assigned to the <P> tag, it's generally a good idea to include it.
Using the <P> and </P> as a paragraph container means that you can center a
paragraph by including the ALIGN=alignment attribute in your source file.
<P ALIGN=CENTER>
This is a centered paragraph.
</P>
This is a centered paragraph.
It is also possible to align a paragraph to the right instead, by including the
ALIGN=RIGHT attribute. ALIGN=LEFT is the default alignment; if no ALIGN
attribute is included, the paragraph will be left-aligned.
- Lists
HTML supports unnumbered, numbered, and definition lists.
Unnumbered Lists
To make an unnumbered, bulleted list,
1. start with an opening list <UL> (for unnumbered list) tag
2. enter the <LI> (list item) tag followed by the individual item; no closing </LI> tag is
needed
3. end the entire list with a closing list </UL> tag
Below is a sample three-item list:
<UL>
<LI> apples
<LI> bananas
<LI> grapefruit
</UL>
The output is:
• apples
• bananas
• grapefruit
The <LI> items can contain multiple paragraphs. Indicate the paragraphs with the
<P> paragraph tags.
Numbered Lists
A numbered list (also called an ordered list) uses <OL> instead of <UL>. The items
are tagged using the same <LI> tag. The following HTML code:
<OL>
<LI> oranges
<LI> peaches
<LI> grapes
</OL>
produces this formatted output:
1. oranges
2. peaches
3. grapes
Definition Lists
A definition list (coded as <DL>) usually consists of alternating a definition term
(coded as <DT>) and a definition definition (coded as <DD>). Web browsers
generally format the definition on a new line and indent it.
The following is an example of a definition list:
<DL>
<DT> Introduction to ITE
<DD> ITE, the Institute of Technical Education, is
a statutory board which comes under the charge of
the Ministry of Education, Singapore.
<DT> Role and Function
<DD> ITE takes the role and function of the
Vocational and Industrial Training Board. It is
the national authority for the setting of skills
standards in Singapore.
</DL>
The output looks like:
Introduction to ITE
ITE, the Institute of Technical Education, is a
statutory board which comes under the charge
of the Ministry of Education, Singapore.
Role and Function
ITE takes the role and function of the
Vocational and Industrial Training Board. It
is the national authority for the setting of skills
standards in Singapore.
The <DT> and <DD> entries can contain multiple paragraphs (indicated by <P>
paragraph tags), lists, or other definition information.
Nested Lists
Lists can be nested. You can also have a number of paragraphs, each containing
a nested list, in a single list item.
Here is a sample nested list:
<UL>
<LI> A few New England states:
<UL>
<LI> Vermont
<LI> New Hampshire
<LI> Maine
</UL>
<LI> Two Midwestern states:
<UL>
<LI> Michigan
<LI> Indiana
</UL>
</UL>
The nested list is displayed as
• A few New England states:
• Vermont
• New Hampshire
• Maine
• Two Midwestern states:
• Michigan
• Indiana
Preformatted Text
Use the<PRE> tag to generate text in a fixed-width font. This tag also makes spaces,
new lines, and tabs significant -- multiple spaces are displayed as multiple spaces, and
lines break in the same locations as in the source HTML file. This is useful for program
listings, among other things. For example, the following lines:
<PRE>
#!/bin/csh
cd $SCR < abc > &
cfs get mysrc.f:mycfsdir/mysrc.f
cfs save myoutfile:mycfsdir/myoutfile
rm *
</PRE>
display as:
#!/bin/csh
cd $SCR < abc > &
cfs get mysrc.f:mycfsdir/mysrc.f
cfs save myoutfile:mycfsdir/myoutfile
rm *
Note that because <, >, and & have special meanings in HTML, you must use their
escape sequences (<, >, and &, respectively) to enter these characters.
