Multimedia Communication - PowerPoint PPT Presentation

Loading...

PPT – Multimedia Communication PowerPoint presentation | free to download - id: 728a64-MTUyN



Loading


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation
Title:

Multimedia Communication

Description:

Multimedia Communication Introduction to HTML Webpage and HTML fundamental HTML - Hyper Text Markup Language Can be viewed by a browser Composed by tags Backbone of ... – PowerPoint PPT presentation

Number of Views:2
Avg rating:3.0/5.0
Slides: 24
Provided by: HKP81
Learn more at: http://www.peter-lo.com
Category:

less

Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: 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)
About PowerShow.com