Multimedia Communication

1
Multimedia Communication

• Introduction to HTML

2
Webpage and HTML fundamental

• HTML - Hyper Text Markup Language
• Can be viewed by a browser
• Composed by tags
• Backbone of ASP
• Similar to text file
• Extension of HTML .htm, .html

3
Webpage and HTML fundamental

• Famous webpage editor
• Microsoft FrontPage
• Microsoft Word
• Netscape Composer
• Macromedia Dreamweaver

4
HTML Language

• HTML, or Hypertext Mark-up Language is designed
  to specify the logical organisation of a
  document, with important Hypertext extensions.
• It is important to make the distinction between
  text viewed in a browser and text viewed in a
  word processor.
• The HTML standard is used to tell WEB browsers
  how to format and display your web page.

5
HTML language

• Composed by two parts
• Between ltHEADgt and lt/HEADgt
• Between ltBODYgt and lt/BODYgt
• The first part above provide information for
  browser
• The second is the core of the file
• Content of the webpage
• HTML code is case-insensitive

6
HTML language

• The simplest HTML webpage

lthtmlgt ltheadgt lttitlegtTitle of webpagelt/titlegt lt/he
adgt ltbodygt Content of webpage lt/bodygt lt/htmlgt
7
HTML language

• Webpage title (ltTITLEgt lt/TITLEgt
• Must be placed inside ltHEADgtlt/HEADgt
• Text between ltTITLEgt and lt/TITLEgt is displayed as
  the title of the webpage
• Displayed in the title bar of browser

8
HTML language

• Heading (ltH1gtlt/H1gt, ltH6gt lt/H6gt)
• HTML support 6 different heading size
• ltH1gt, ltH2gt, ltH3gt, ltH4gt, ltH5gt and ltH6gt
• Heading occupy the whole line
• Line will be feed for different heading

9
Header Information

• ltHTMLgt
• ltH1gtthis is a large headerlt/H1gt
• ltH2gtthis is smaller headerlt/H2gt
• ltH3gtthis is more smallerlt/H3gt
• ltH4gtmuch more smallerlt/H4gt
• ltH5gtvery small headerlt/H5gt
• ltH6gttiny headerlt/H4gt
• lt/BODYgt
• lt/HTMLgt

10
HTML language

• Font size (ltFONTgt lt/FONTgt
• ltFONT SIZEsizegt lt/FONTgt to control size of
  text
• Totally 7 size (size1 to 7) can be selected
• ltFONT FACEFont Namegt lt/FONTgt to control the
  type of font
• E.g. ltFONT FACEArialgt

11
HTML language

• Text effect
• Supported effect
• Bold (ltBgt lt/Bgt)
• Italic (ltIgt lt/Igt)
• Underline (ltUgt lt/Ugt)
• Blink (ltBLINKgt lt/BLINKgt)

12
HTML language

• Paragraph (ltPgt lt/Pgt)
• In HTML, ltPgt means the end of a paragraph
• Text after ltPgt will be placed at next line
• Ending tag lt/Pgt is optional

13
Paragraphs

• ltHTMLgt
• ltBODYgt
• ltPgtthis is the 1st paragraph on this html
• example and it should work fine lt/Pgt
• ltPgtthis is the 2nd paragraph on this
• html example and also works fine lt/Pgt
• lt/BODYgt
• lt/HTMLgt

14
HTML language

• Line Break (ltBRgt)
• ltBRgt is a single tag (Ending tag is not provided)
• Compare with ltPgt, ltBRgt give a genuine line break
• Paragraph give more vertical space between
  paragraphs

15
HTML language

• Center (ltCENTERgt lt/CENTERgt)
• Align elements in between center
• Can be performed for image
• Can be performed for many paragraphs

16
HTML language

• Image (ltIMG SRCgt)
• Common graphic file type are GIF and JPEG
• No ending tag provided
• Example
• ltIMG SRCpicture.gif WIDTH240 HEIGHT150
  BORDER0 ALTThis is a picturegt

17
Images

• ltHTMLgt
• ltBODY BACKGROUND"backgrnd.gif"gt
• ltIMG SRC"animated.gif"gt
• lt/BODYgt
• lt/HTMLgt

18
HTML language

• Background image or colour
• Background image
• E.g. ltBODY BACKGROUNDback.gifgt
• Background colour
• E.g. ltBODY BGCOLOR 9933FFgt

19
HTML language

• Hyperlink (ltA HREFgt lt/Agt)
• Can be linked to another page
• E.g. ltA HREFhttp//hk.yahoo.comgt Yahoo lt/Agt
• Link to an e-mail
• E.g. ltA HREFmailtomyemail_at_yahoo.comgt Mail to
  Me lt/Agt

20
Anchors and Bookmarks

• An anchor allows a user to jump from a reference
  in a WWW page to an anchor point. This avoids
  scrolling through large volumes of text. (eg
  Table of Contents)
• ltA NAMElinkgtJump from this pointlt/Agt
• ltA NAMElinkgtDestinationlt/Agt
• Once the hyperlink is clicked the user jumps to
  this location.

21
Lists

• ltHTMLgt
• ltBODYgt
• ltOLgt
• ltLIgtThis is the 1st list Item
• ltLIgtThis is the 2nd list Item
• ltLIgtThis is the 3rd list Item
• ltLIgtThis is the 4th list Item
• lt/OLgt
• lt/BODYgt
• lt/HTMLgt

22
Tables

• ltHTMLgt
• ltBODYgt
• ltTABLE Border1gt
• ltCaptiongttable captionlt/Captiongt
• ltTRgt ltTDgt1st Cell 1st Rowlt/TDgt
• ltTDgt2nd Cell 1st Rowlt/TDgt
• ltTRgt ltTDgt1st Cell 2nd Rowlt/TDgt
• ltTDgt2nd Cell 2ndst Rowlt/TDgt
• ltTRgt ltTDgt1st Cell 3rd Rowlt/TDgt
• ltTDgt2nd Cell 3rd Rowlt/TDgt
• lt/TABLE gt
• lt/BODYgt
• lt/HTMLgt

23
Reference

• Discovering Computers World 2003 (Ch.2 3)