Introduction To
HTML
1
Definitions
W W W – World Wide Web.
HTML – HyperText Markup Language –
The Language of Web Pages on the World
Wide Web.
HTML is a text formatting language.
URL – Uniform Resource Locator.
Browser – A software program which is
used to show web pages.
2
“Normal text” surrounded by
bracketed tags that tell browsers how
to display web pages
Pages end with “.htm” or “.html”
HTML Editor – A word processor that
has been specialized to make the
writing of HTML documents more
effortless.
3
Tags
Codes enclosed in brackets
Usually paired
<TITLE>My Web Page</TITLE>
Not case sensitive
<TITLE> = <title> = <TITLE>
4
Creating a Basic Starting
Document
<HTML>
<HEAD>
<TITLE>Superior University</TITLE>
</HEAD>
<BODY>
This is what is displayed.
</BODY>
</HTML> 5
Creating a Basic Starting
Document
The HEAD of your document point to above
window part. The TITLE of your document
appears in the very top line of the user’s
browser. If the user chooses to “Bookmark”
your page or save as a “Favorite”; it is the
TITLE that is added to the list.
The text in your TITLE should be as
descriptive as possible because this is what
many search engines, on the internet, use for
indexing your site. 6
Setting Document Properties
Document properties are controlled
by attributes of the BODY element.
For example, there are color settings
for the background color of the page,
the document’s text and different
states of links.
7
Color Codes
• Colors are set using “RGB” color codes,
which are, represented as hexadecimal
values. Each 2-digit section of the code
represents the amount, in sequence, of
red, green or blue that forms the color. For
example, a RGB value with 00 as the first
two digits has no red in the color.
8
Main Colours
16 Basic Colors
10
Color Codes
1. WHITE 1. #FFFFFF
2. BLACK 2. #000000
3. RED 3. #FF0000
4. GREEN 4. #00FF00
5. BLUE 5. #0000FF
6. MAGENTA 6. #FF00FF
7. CYAN 7. #00FFFF
8. YELLOW 8. #FFFF00
9. AQUAMARINE 9. #70DB93
10. BAKER’S CHOCOLATE 10. #5C3317
11. VIOLET 11. #9F5F9F
12. BRASS 12. #B5A642
13. COPPER 13. #B87333
14. PINK 14. #FF6EC7
15. ORANGE 15. #FF7F00 11
Color Codes
If you require more information about color
values, there is an excellent site entitled
“VGDesign’s Interactive Color Cube” that
displays the background color code when
you put your cursor over a small color
sample. The Web address is :
http://www.vgdesign.com/color.html
12
The Body Element
• The BODY element of a web page is an
important element in regards to the page’s
appearance. Here are the attributes of the
BODY tag to control all the levels:
TEXT="#RRGGBB" to change the color of all
the text on the page (full page text color.)
This element contains information about the
page’s background color, the background image,
as well as the text and link colors.
13
Background Color
It is very common to see web pages with
their background color set to white or some
other colors.
To set your document’s background color,
you need to edit the <BODY> element by
adding the BGCOLOR attribute. The
following example will display a document
with a white background color:
<BODY BGCOLOR=“#FFFFFF”></BODY>
14
TEXT Color
The TEXT attribute is used to control the
color of all the normal text in the
document. The default color for text is
black. The TEXT attribute would be added
as follows:
<BODY BGCOLOR=“#FFFFFF”
TEXT=“#FF0000”></BODY>
In this example the document’s page
color is white and the text would be red. 15
Using Image Background
The BODY element also gives you ability
of setting an image as the document’s
background.
An example of a background image’s
HTML code is as follows:
<BODY BACKGROUND=“hi.gif”
BGCOLOR=“#FFFFFF”></BODY>
16
Previewing Your Work
Once you have created your basic starting
document and set your document properties it
is a good idea to save your file.
To save a file, in NotePad, follow these steps:
1. Locate and click on the menu called “File”.
2. Select the option under File Menu labeled
“Save As”.
3. In the “File Name” text box, type in the entire
name of your file (including the extension
name .html).
17
Headings, <Hx> </Hx>
Inside the BODY element, heading elements
H1 through H6 are generally used for major
divisions of the document. Headings are
permitted to appear in any order, but you will
obtain the best results when your documents
are displayed in a browser if you follow these
guidelines:
1. H1: should be used as the highest level of heading, H2
as the next highest, and so forth.
2. You should not skip heading levels: e.g., an H3 should
not appear after an H1, unless there is an H2 between
them.
18
Headings, <Hx> </Hx>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY>
<H1> Heading 1 </H1>
Heading 1
<H2> Heading 2 </H2> Heading 2
<H3> Heading 3 </H3>
<H4> Heading 4 </H4> Heading 3
<H5> Heading 5 </H5> Heading 4
<H6> Heading 6 </H6> Heading 5
</BODY> Heading 6
</HTML>
19
Paragraphs, <P> </P>
Paragraphs allow you to add text to a
document in such a way that it will
automatically adjust the end of line to suite
the window size of the browser in which it
is being displayed. Each line of text will
stretch the entire length of the window.
20
Paragraphs, <P> </P>
<HTML><HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
Heading 1
Paragraph 1,….
<BODY></H1> Heading 1 </H1>
<P> Paragraph 1, ….</P>
<H2> Heading 2 </H2>
Heading 2
<P> Paragraph 2, ….</P> Paragraph 2,….
<H3> Heading 3 </H3>
<P> Paragraph 3, ….</P>
Heading 3
<H4> Heading 4 </H4> Paragraph 3,….
<P> Paragraph 4, ….</P> Heading 4
<H5> Heading 5 </H5> Paragraph 4,….
<P> Paragraph 5, ….</P>
<H6> Heading 6</H6> Heading 5
<P> Paragraph 6, ….</P> Paragraph 5,….
</BODY></HTML> Heading 6
Paragraph 6,….
Break, <BR>
Line breaks allow you to decide where the text
will break on a line or continue to the end of the
window.
A <BR> is an empty Element, meaning that it
may contain attributes but it does not contain
content.
The <BR> element does not have a closing tag.
22
Break, <BR>
<HTML>
<HEAD>
<TITLE> Example Page</TITLE>
</HEAD>
<BODY> Heading 1
<H1> Heading 1 </H1>
Paragraph 1,….
<P>Paragraph 1, <BR>
Line 2 <BR> Line 3 <BR>…. Line 2
</P> Line 3
</BODY>
….
</HTML>
Bold, Italic and other Character Formatting
Elements
<FONT SIZE=“+2”> Two sizes bigger</FONT>
The size attribute can be set as an absolute value from 1
to 7 or as a relative value using the “+” or “-” sign. Normal
text size is 3 (from -2 to +4).
<B> Bold </B>
<I> Italic </I>
<U> Underline </U>
Color = “#RRGGBB” The COLOR attribute of the FONT
element. E.g., <FONT COLOR=“#RRGGBB”>this text
has color</FONT>
<PRE> Preformatted </PRE> Text enclosed by PRE tags
is displayed in a mono-spaced font. Spaces and line
breaks are supported without additional elements or
24
special characters.
Bold, Italic and other Character Formatting
Elements
<EM> Emphasis </EM> Browsers usually
display this as italics.
<STRONG> STRONG </STRONG> Browsers
display this as bold.
<TT> TELETYPE </TT> Text is displayed in a
mono-spaced font. A typewriter text, e.g. fixed-
width font.
<CITE> Citation </CITE> represents a
document citation (italics). For titles of books,
films, etc. Typically displayed in italics. (A
Beginner's Guide to HTML)
25
Bold, Italic and other Character Formatting
Elements
<P> <FONT SIZE=“+1”> One One Size Larger - Normal – One
Size Larger </FONT> - Normal Size Smaller
– Bold - italics - Underlined -
<FONT SIZE=“-1”> One Size Colored
Smaller </FONT> <BR> Emphasized - Strong - Tele
<B> Bold</B> - <I> italics</I> - Type
<U> Underlined </U> -
<FONT COLOR=“#FF0000”>
Colored </FONT> <BR>
<EM> Emphasized</EM> -
<STRONG> Strong
</STRONG> - <TT> Tele Type
</TT> <BR>
27
