HYPERTEXT MARKUP LANGUAGE HTML

1
HYPERTEXT MARKUP LANGUAGE (HTML)
HTML (HyperText Markup Language) is the coding
language used to mark up text files with styles
and links for use with World Wide Web browsers,
such as Netscape or Internet Explorer.
HTML Element Tags HTML is composed of tagged
elements that instruct Web browsers to perform a
defined task eg. make text bold, insert a
paragraph break, format and number a list in a
predetermined manner
2
COMMON HTML TAGS
ltPgt inserts a paragraph break in a document.
ltBgt "turns on" the bold, while lt/Bgt turns it off.
ltH1 ALIGN"CENTER"gt begins a centred level 1
heading and lt/H1gt ends the heading.
ltH3gt is a smaller font than ltH1gt Changes the
colour of the text, links, visited and
active. Other ways of changing font
size/colour changes
font size of whole document The following tags
allow you to change only selected parts of
document
3
LISTS
2 kinds of lists 1. Unordered list ltULgt and
lt/ULgt Produces an indented, bulleted
list. 2. Ordered list ltOLgt and lt/OLgt Produces an
indented list items in order, usually 1,2,3 etc.
Example 1 Some of my favourite food
includes ltULgt ltLIgt Chocolate ltLIgt Ice Cream ltLIgt
Pizza lt/ULgt will look like this
4
LISTS (CONT.)
Example 2 Some of my favourite food
includes ltOLgt ltLIgt Chocolate ltLIgt Ice Cream ltLIgt
Pizza lt/OLgt will look like this
5
LISTS (CONT.)
How would you write the HTML code for the
following indented list?

• Some of my favourite food includes
• Desserts
• Ice cream
• Chocolate cake
• Main Meals
• Pizza
• Pie

6
ADDING IMAGES
Image File Formats The file formats most commonly
used on the Internet are GIF (Graphical
Interchange Format) and JPG (Joint Photographic
Experts Group).
The Image Tag ltIMG SRC ..... gt Note The image
tag has no closing tag
7
THE IMAGE TAG
Image Attributes SRC "url"  only the src...
attribute is required, the rest are optional  
1. ALIGN TOP MIDDLE BOTTOM LEFTRIGHT 2.
WIDTH n image width in pixels HEIGHT
n image height in pixels The width and height
attributes are not required but are recommended
to help the browser render the page faster. The
height and width attributes can also be used to
scale an image in the horizontal and vertical
dimensions 3. WIDTH n HEIGHT n
8
THE IMAGE TAG (CONT.) ANCHOR TAG
4. ALT alternative text Some browsers cannot
view graphics. Alt includes text of your choosing
that will be seen instead of the image.
The Anchor Tag Links are accomplished using the
anchor tag pair, ltAgt and lt/Agt. The format to
link to another web page looks like this eg.
The anchor links to the Kodak site when the
word Kodak is clicked.
9
NAMING A TARGET ANCHOR
Name anchors are used to tag locations within
HTML documents as hypertext targets. This is
especially useful if the HTML document is a large
one and you want the user to be able to navigate
to selected parts of the webpage quickly. This
names that part of the webpage as summary. You
can then navigate to that location using a
hypertext reference anchor. This takes you to
the name anchor summary in the current
document.