Slayt 1

1
Introduction to HyperText Markup Language 4 (HTML
4)
COMPE 111 Lab.
2
Outline

• Introduction
• Markup Languages
• Editing HTML
• Common Tags
• Headers
• Text Styling
• Linking
• Images
• Formatting Text With ltFONTgt
• Special Characters, Horizontal Rules and More
  Line Breaks
• Mini Project

3
Introduction

• HTML is not a procedural programming language
  like C, Fortran, Pascal
• It is a markup language for identifying the
  elements of a page.
• A browser such as Microsofts Internet Explorer
  or Netscapes communicator can render that page
  on your computer screen.

4
Markup Languages

• HTML is a markup language,
• It is used to format text and information,
• Text is marked up with elements,
• Elements are delineated by tags,
• For example HTML element begins with a start tag
  of ltHTMLgt and terminates with an end tag of
  lt/HTMLgt

5
Editing HTML

• Notepad can be used for editing HTML,
• All HTML files typically have either the .htm or
  .html file name extension,
• The name of your home page should be index.html

6
Common Tags

• lthtmlgtlt/htmlgt tells the browser that every
  thing between these tags is html.
• ltheadgtlt/headgt shows the header section of web
  page.
• ltbodygtlt/bodygt body of a html document, where
  you place all content you would like to browser
  to display.
• ltPgtlt/Pgt forms one paragraph.

7
Common Tags
ltHTMLgt lt!-- Fig. 9.1 main.html --gt lt!-- Our
first Web page --gt ltHEADgt ltTITLEgtInternet and
WWW How to Program - Welcomelt/TITLEgt lt/HEADgt ltBOD
Ygt ltPgtWelcome to Our Web Site!lt/Pgt lt/BODYgt lt/HTM
Lgt
8
Headers

• Headers are simple form of text formatting that
  vary text size based on the headers level,
• Often used header elements are H1 through H6

9
Headers
ltHTMLgt lt!-- Fig. 9.2 header.html --gt lt!-- HTML
headers --gt ltHEADgt ltTITLEgtInternet and
WWW How to Program - Headerslt/TITLEgt lt/HEADgt ltBOD
Ygt lt!-- Centers everything in the CENTER element
--gt ltCENTERgt ltH1gtLevel 1 Headerlt/H1gt lt!-- Level
1 header --gt ltH2gtLevel 2 headerlt/H2gt lt!-- Level
2 header --gt ltH3gtLevel 3 headerlt/H3gt lt!-- Level
3 header --gt ltH4gtLevel 4 headerlt/H4gt lt!-- Level
4 header --gt ltH5gtLevel 5 headerlt/H5gt lt!-- Level
5 header --gt ltH6gtLevel 6 headerlt/H6gt lt!-- Level
6 header --gt lt/CENTERgt lt/BODYgt lt/HTMLgt
10
Text Styling

• ltUgtlt/Ugt underlined,
• ltSTRONGgtlt/STRONGgt bold,
• ltEMgtlt/EMgt italic,
• ltH1 ALIGN "center"gtltUgtlt/Ugtlt/H1gt centered
  ltH1gt

11
Text Styling
ltHTMLgt ltHEADgt ltTITLEgtInternet and WWW How to
Program - Welcomelt/TITLEgt lt/HEADgt ltBODYgt ltH1
ALIGN "center"gtltUgtWelcome to Our Web
Site!lt/Ugtlt/H1gt ltPgtWe have designed this site to
teach about the wonders of ltEMgtHTMLlt/EMgt. We have
been using ltEMgtHTMLlt/EMgt since ltUgtversionltSTRONGgt
2.0lt/STRONGgtlt/Ugt, and we enjoy the features that
have been added recently. It seems only a short
time ago that we read our first
ltEMgtHTMLlt/EMgt book. Soon you will know about many
of the great new features of HTML 4.0.lt/Pgt ltH2
ALIGN "center"gtHave Fun With the
Site!lt/H2gt lt/BODYgt lt/HTMLgt
12
Linking

• Links are inserted using A(anchor) element.
• ltA HREF "http//www.yahoo.com"gt
• http//www.yahoo.comlt/Agt link to yahoos web
  page.
• The form of an email anchor is ltA HREF
  mailtoemailaddressgtlt/Agt

13
Linking
ltHTMLgt ltHEADgt ltTITLEgtInternet and WWW How to
Program - Linkslt/TITLEgt lt/HEADgt ltBODYgt ltCENTERgt
ltH2gtHere are my favorite Internet Search
Engineslt/H2gt ltPgtltSTRONGgtClick on the Search
Engine address to go to that page.lt/STRONGgtlt/Pgt lt
!-- Hyperlink form ltA HREF "address"gt
--gt ltPgtYahoo ltA HREF "http//www.yahoo.com"gt ht
tp//www.yahoo.comlt/Agtlt/Pgt ltPgtAltaVista ltA HREF
"http//www.altavista.com"gt http//www.altavista
.comlt/Agtlt/Pgt lt/CENTERgt lt/BODYgt lt/HTMLgt
14
Linking
ltHTMLgt ltHEADgt ltTITLEgtInternet and WWW How to
Program - Contact Pagelt/TITLEgt lt/HEADgt ltBODYgt lt!
-- The correct form for hyperlinking to an email
address --gt lt!-- is ltA HREF "mailtoaddress"gtlt/A
gt --gt ltPgtMy email address is
ltA HREF "mailtodeitel_at_deitel.com"gt deitel_at_deite
l.comlt/Agt. Click on the address and your
browser will open an email message and address it
to me. lt/Pgt lt/BODYgt lt/HTMLgt
15
Images

• An image as background
• ltBODY BACKGROUND "bckgrnd.gif"gt
• ltIMG SRC "deitel.gif" BORDER "1" HEIGHT
  "144"
• WIDTH "200" ALT "Harvey and Paul
  Deitel"gt defines the source, border type,
  height and width of picture, and the text when
  cursor is on the pisture.
• Link to a picture
• ltA HREF "main.html"gt
• ltIMG SRC "buttons/about.jpg" WIDTH "65"
  HEIGHT "50" BORDER "0" ALT "Main Page"gtlt/Agt

16
Images
ltHTMLgt ltHEADgt ltTITLEgtInternet and WWW How to
Program - Welcomelt/TITLEgt lt/HEADgt ltBODY
BACKGROUND "bckgrnd.gif"gt ltCENTERgt lt!-- Format
for entering images ltIMG SRC "name"gt --gt ltIMG
SRC "deitel.gif" BORDER "1" HEIGHT "144"
WIDTH "200" ALT "Harvey and Paul
Deitel"gt lt/CENTERgt lt/BODYgt lt/HTMLgt
17
Formatting Text With ltFONTgt
ltHTMLgt ltHEADgt ltTITLEgtInternet and WWW How to
Program - Welcomelt/TITLEgt lt/HEADgt ltBODYgt ltH1
ALIGN "center"gtltUgtWelcome to Our Web
Site!lt/Ugtlt/H1gt lt!-- Font tags change the
formatting of text they enclose --gt ltPgtltFONT
COLOR "red" SIZE "1" FACE "Arial"gtWe have
designed this site to teach about the wonders of
ltEMgtHTMLlt/EMgt.lt/FONTgt ltFONT COLOR "purple"
SIZE "2" FACE "Verdana"gtWe have been using
ltEMgtHTMLlt/EMgt since ltUgtversionltSTRONGgt
2.0lt/STRONGgtlt/Ugt, and we enjoy the features that
have been added recently.lt/FONTgt ltFONT COLOR
"blue" SIZE "1" FACE "Helvetica"gtIt seems
only a short time ago that we read our first
ltEMgtHTMLlt/EMgt book.lt/FONTgt ltFONT COLOR "green"
SIZE "2" FACE "Times"gtSoon you will know
about many of the great new features of HTML
4.0.lt/FONTgtlt/Pgt ltH2 ALIGN "center"gtHave Fun
With the Site!lt/H2gt lt/BODYgt lt/HTMLgt
18
Formatting Text With ltFONTgt
19
Special Characters, Horizontal Rules and More
Line Breaks
ltHTMLgt ltHEADgt ltTITLEgtInternet and WWW How to
Program - Contact Pagelt/TITLEgt lt/HEADgt ltBODYgt lt!
-- Special characters are entered using the form
code --gt ltPgtMy email address is ltA HREF
"mailtodeitel_at_deitel.com"gt deitel_at_deitel.comlt/Agt.
Click on the address and your browser will
automatically open an email message and address
it to my address.lt/Pgt ltPgtAll information on this
site is ltSTRONGgtcopylt/STRONGgt Deitel
ltSTRONGgtamplt/STRONGgt Associates,
1999.lt/Pgt lt!-- Text can be struck out with a set
of ltDELgt...lt/DELgt --gt lt!-- tags, it can be set
in subscript with ltSUBgt...lt/SUBgt, --gt lt!-- and it
can be set into superscript with ltSUP...lt/SUPgt
--gt ltDELgtltPgtYou may copy up to 3.14 x
10ltSUPgt2lt/SUPgt characters worth of information
from this site.lt/DELgtltBRgt Just make sure you
ltSUBgtdo not copy more informationlt/SUBgt than is
allowable. ltPgtNo permission is needed if you
only need to use ltSTRONGgt lt frac14lt/STRONGgt
of the information presented here.lt/Pgt lt/BODYgt lt/
HTMLgt
20
Special Characters, Horizontal Rules and More
Line Breaks
21
Mini Project

• Prepare your web page including
• Information related to you,
• Your pictures,
• Links to your favorite web sides.