HTML

1
HTML

• COMP 101
• Spring Semester, 2006
• (Last updated23-Feb-06)

2
A computer system
Applications
Operating System
Device Drivers
3
The World Wide Web

• Invented by Tim Berners-Lee at CERN in 1990
• Based on the hypertext concept
• Allows information retrieval over the Internet
  with little training
• Handles text, graphics, voice, video, programs,
  etc.
• May work with a variety of display devices

4
Basic elements of WWW

• Each website must have a unique Internet address
  called the Uniform Resource Locator (URL) (e.g.,
  www.cs.ust.hk).
• The address (not necessarily starting with www)
  is registered with a Web server at the users
  organization or at an Internet service provider.
• A data file may contain links to the same
  webpage, to other files in the local directory,
  or to other websites.

5
Information on the WWW

• Coded in the Hyper Text Markup Language (HTML)
• Transferred using the Hyper Text Transfer
  Protocol (HTTP)

6
Popular authoring tools

• Any text editor (e.g. Microsoft Notepad)
• Microsoft Frontpage
• Netscape Composer
• Macromedia Dreamweaver
• Other proprietary editors

7
An HTML document

• Can be viewed on many computer platforms (e.g.,
  desktop computer, PDA, mobile phone, etc.)
• Can expand and shrink when window size is changed
• Can interact with the user
• Can be processed by other computers

8
The HTML document

• A text file ending with .htm or .html
• Containing instructions to the browser regarding
  how the contents of the webpage should be
  rendered in the window
• Instructions given in tags, which are special
  codes enclosed in angular brackets
• Contents given in text or links to files elsewhere

9
A general HTML template

• lt!DOCTYPE html public
• "-//W3C//DTD HTML 4.01 Transitional//EN"gt
• lthtmlgt
• ltheadgt
• ltmeta http-equiv"content-type"
  content"text/html charsetutf-8"gt
• lttitlegt
• text appears in browser's title bar
• lt/titlegt
• lt/headgt
• ltbodygt
• text appears in browser's window
• lt/bodygt
• lt/htmlgt

10
HTML tags

• lthtmlgt
• ltheadgt
• lttitlegt
• text appears in browser's title bar
• lt/titlegt
• lt/headgt
• ltbodygt
• text appears in browser's window
• lt/bodygt
• lt/htmlgt

11
HTML tags

• lthtmlgt
• ltheadgt
• lttitlegt
• text appears in browser's title bar
• lt/titlegt
• lt/headgt
• ltbodygt
• text appears in browser's window
• lt/bodygt
• lt/htmlgt

12
HTML tags

• lthtmlgt
• ltheadgt
• lttitlegt
• text appears in browser's title bar
• lt/titlegt
• lt/headgt
• ltbodygt
• text appears in browser's window
• lt/bodygt
• lt/htmlgt

13
HTML tags

• lthtmlgt
• ltheadgt
• lttitlegt
• text appears in browser's title bar
• lt/titlegt
• lt/headgt
• ltbodygt
• text appears in browser's window
• lt/bodygt
• lt/htmlgt

14
Tips on creating an HTML file

• Text is viewed by the browser as a continuous
  string of characters.
• Tags are not case-sensitive.
• After revising and saving the file, the revised
  contents can be viewed after reload.
• One should use the W3C Markup Validation Service
  to ensure the webpage will be rendered properly.

15
Frequently-used HTML tags

• Headings
• Paragraphs
• Lists
• Emphasis
• Links
• Many others
• Learn from others

16
(No Transcript)
17
Headings

• Largest
• lth1gt Largest heading lt/h1gt
• Smallest
• lth6gt Smallest heading lt/h6gt

18
Paragraphs

• Normal paragraph
• ltpgt This is a short paragraph. lt/pgt
• Block quotation
• ltblockquotegt
• This is a quotation to be placed in the middle
  of the window. lt/blockquotegt

19
Lists

• Unordered
• ltulgt
• ltligt Headings lt/ligt
• ltligt Paragraphs lt/ligt
• ltligt Lists lt/ligt
• lt/ulgt

20
Lists

• Ordered
• ltolgt
• ltligt Headings lt/ligt
• ltligt Paragraphs lt/ligt
• ltligt Lists lt/ligt
• lt/olgt

21
Font emphasis

• Bold
• ltbgt Boldface text lt/bgt
• Italics
• ltigt Italics text lt/igt
• Changed color
• ltfont color"red"gt Red text lt/fontgt

22
Links

• Link to another website (absolute link)
• lta href"http//www.cs.ust.hk"gt Computer Science
  Department lt/agt

23
Links

• Link to a file within the same directory
  (relative link)
• lta href"html2.html"gt Another example lt/agt

24
Links

• Link to a place within the same document (named
  anchor)
• lta href"end"gt The end of document lt/agt
• Define the name of anchor
• lta name"end"gt This is the end. lt/agt