Lecture 3 Creating a Web Page with HTML

1
Lecture 3Creating a Web Page with HTML
2
Objectives

• Hypertext Document in WWW p1.4-1.5
• The HTML language p.1.8-1.10
• Definition
• Web browsers and HTML
• Versions of HTML
• Tools for creating HTML documents
• HTML syntax
• Examples of HTML tags
• Basic tags

3
Objectives (cont)

• Creating p.1.11-1.34
• Headings
• Paragraphs
• Lists
• Character tags
• Special characters
• Horizontal lines
• Graphic images
• Exercises

4
Hypertext Document in WWW

• A hypertext document is an electronic file that
  contains elements that a user can select, usually
  by clicking a mouse, to open another document.

Liner VS. hypertext document
5
Hypertext Markup Language (HTML)

• Definition Language used to create and format
  Web pages, using a set of special codes, called
  tags
• HTML doesnt describe how text looks
• HTML uses a code that describes the function the
  text has

6
Web browser HTML

• A Web browser interprets the codes to determine a
  documents appearance
• Different browsers might display a document
  differently

7
An Example A HTML file displayed by two browsers
ref.
8
Why different browsers display a web document
differently ?

• Portability
• different computer platforms
• different types of fonts supported e.g. Arial,
  Gothic
• different I/O devices
• chunky teletypes
• high-end workstations
• non visual media such are speech and Braille
• Advantage frees web page authors worrying about
  compatibility on different computers and
  operating systems

9
Why different browsers display a web document
differently ? (cont)

• Speed
• exact specification on how to display each
  character dramatically increase
• file size
• the time to transfer

10
Versions of HTML

• HTML has a grammar or set of rules called syntax
• The specifications or standards have been
  developed by a consortium of web authors,
  software companies and interested users (World
  Wide Web Consortium W3C)
• Extensions are supported by some browsers to add
  new possibilities to HTML

11
Versions of HTML (cont)

• 5 versions of HTML ref.
• HTML 0.0
• HTML 1.0
• HTML 2.0
• HTML 3.2
• HTML 4.01

12
Adds support for style sheets, new features to
tables and forms ...
HTML 4.01
13
Tools for Creating HTML Documents

• HTML documents text files
• Tools
• Text editor e.g. MS note pad
• HTML convertor e.g. MS Word
• HTML editor
• Other design tools MS FrontPage,
• Macromedia Dreamweaver

14
HTML syntax

• 2 elements
• Document content
• Parts that the user sees
• Tags
• HTML codes that indicate the document content

15
HTML syntax (cont)

• ltTag Name Propertiesgt Document Content lt/Tag
  namegt
• e.g. ltH1 ALIGNCENTERgtMary TaylorltH1gt
• A tag contains
• brackets (lt gt) that enclose the tag name
• properties (optional)
• additional information that defines the tags
  appearance
• Document content parts the user sees

16
HTML syntax Two-side tags

• Two-sided tags
• require both opening and closing tags
  e.g.
• ltH1 ALIGNCENTREgt Mary Taylor lt/H1gt
• opening tag tells the browser to turn on the
  feature and apply it to the document content that
  follows
• closing tag turns off the feature

17
HTML syntax One-sided tags

• require only the opening tag
• e.g. ltLIgt, ltIMGgt
• ltOLgt
• ltLIgtGraduated May, 1996. M.A. International
• ltLIgtGrade Point Average 3.5 overall, 3.9 in
  major
• lt/OLgt
• ltIMG SRC Taylor.gifgt

18
HTML syntax characteristics

• Tags are NOT case sensitive
• H1h1
• HTML ignores extra blank space, blank lines or
  tabs

19
HTML syntax characteristics (cont)

• The following HTML statements are the same
• ltH1gtTo be or not to be. That is the
  question.lt/H1gt
• ltH1gtTo be or not to be. That is the
  question.lt/H1gt
• ltH1gtTo be or not to be.
• That is the question.lt/H1gt

20
Examples of HTML tags
21
Examples of HTML tags (cont)
22
Basic Tags (example)
Displayed at the title line
ltHeadgt surround information about the Web
page ltBodygt surround the part that appears in
the browser
23
Example Result Basic Tags
24
Creating Headings

• 6 levels
• ltHy propertiesgtHeading textlt/Hygt
• where y is a heading numbered 1- 6

25
Example Headings
26
Example Creating headings
27
Example Result Headings in the browser
28
Creating a paragraph

• Syntax
• ltPgttextlt/Pgt

29
Example paragraph text (no ltPgt tag)
30
Example Result Text Not separated into paragraphs
31
Example ltPgt tag for paragraphs

• ltPgtSatellite Technician (Front Range Media Inc.
  1993-1994) Monitored satellite uplink/downlink
  procedures to assure quality video transmissions.
  Aided technicians with transmission problem.
  Associated in the assembly and maintenance of
  uplink facility.lt/Pgt
• ltPgtTechnical Assistant(Mountain View Bank
  1992-1993)Managed data cessing system. Handled
  user requests anf\d discussed programming option
  Managed delivery servicelt/Pgt
• ltPgtSalesperson(Computer Visions 1991) Sales and
  customer support in computers and electronics.
  Managed commercial accounts in Mountain View and
  Crabtree locations.lt/Pgt

32
Example result paragraphs with ltPgt tag
33
Creating lists Ordered list

• List in numeric order
• Example
• ltOLgt
• ltLIgtGraduated May, 1996. M.A. International
  Telecommunications
• ltLIgtGrade Point Average 3.5 overall, 3.9 in
  major
• ltLIgtDeans List September 1994-May 1996
• ltLIgtMember, Phi Alpha Omega Honor Society
• lt/OLgt
• Result
• 1. Graduated May, 1996. M.A. International
  Telecommunications
• 2. Grade Point Average 3.5 overall, 3.9 in major
• 3. Deans List September 1994-May 1996
• 4. Member, Phi Alpha Omega Honor Society

34
Creating list Unordered list

• List in which list items have no particular
  order.
• Example
• ltULgt
• ltLIgtGraduated May, 1996. M.A. International
  Telecommunications
• ltLIgtGrade Point Average 3.5 overall, 3.9 in
  major
• ltLIgtDeans List September 1994-May 1996
• ltLIgtMember, Phi Alpha Omega Honor Society
• lt/ULgt
• Result
• Graduated May, 1996. M.A. International
  Telecommunications
• Grade Point Average 3.5 overall, 3.9 in major
• Deans List September 1994-May 1996
• Member, Phi Alpha Omega Honor Society

35
Character tags

• Definitions
• Character tag A tag that is applied to an
  individual character
• Logical tag Indicates how you want to use text,
  not necessarily how want it displayed
• Physical tag Indicates exactly how characters
  are to be formatted

36
Common Logical tags

• It indicates how you want it displayed.

37
Example Logical tags
38
Common Physical tags
39
Example Physical Character tags
40
Example Applying character tags
41
Example result Applying character tags
42
Special characters
43
Example Special characters

• ltH5 ALIGNCENTERgt11 Kemper Ave. 183 Lake View,
  CO 80517 183 (303 555-1012lt/H5gt
• Result

44
Horizontal lines

• ltHR ALIGNCENTER SIZE12 WIDTH100gt
• ltHR ALIGNCENTER SIZE6 WIDTH50gt
• ltHR ALIGNCENTER SIZE3 WIDTH 25gt
• ltHR ALIGNCENTER SIZE1 WIDTH10gt

45
Example Horizontal line

• After the end of Marys address line, press Enter
• type ltHRgt
• Result

46
Inserting a graphic

• Two types
• Inline image
• External image

47
Inline image

• appears directly on the Web page
• loaded when the page is loaded
• 2 types supported by all browsers
• GIF (Graphical Interchange Format)
• JPEG (Joint Photographic Experts Group)
• Syntax
• ltIMG SRC filenamegt
• e.g. ltIMG SRCTaylor.gifgt

48
External image

• Not displayed with the Web page
• Browser must have a file viewer
• e.g. Shockwave