1 / 23

Multimedia Communication

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 ASP Similar to text file Extension of HTML: *.htm, *.html. Webpage and HTML fundamental. Famous webpage editor

nronald
Télécharger la présentation

Multimedia Communication

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 WEBbrowsers how to format and display your web page.

  5. HTML language • Composed by two parts • Between <HEAD> and </HEAD> • Between <BODY> and </BODY> • 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 <html> <head> <title>Title of webpage</title> </head> <body> Content of webpage </body> </html>

  7. HTML language • Webpage title (<TITLE> … </TITLE> • Must be placed inside <HEAD>…</HEAD> • Text between <TITLE> and </TITLE> is displayed as the title of the webpage • Displayed in the title bar of browser

  8. HTML language • Heading (<H1>…</H1>, <H6> … </H6>) • HTML support 6 different heading size • <H1>, <H2>, <H3>, <H4>, <H5> and <H6> • Heading occupy the whole line • Line will be feed for different heading

  9. Header Information <HTML> <H1>this is a large header</H1> <H2>this is smaller header</H2> <H3>this is more smaller</H3> <H4>much more smaller</H4> <H5>very small header</H5> <H6>tiny header</H4> </BODY> </HTML>

  10. HTML language • Font size (<FONT> … </FONT> • <FONT SIZE=“size”> … </FONT> to control size of text • Totally 7 size (size=1 to 7) can be selected • <FONT FACE=“Font Name”> … </FONT> to control the type of font • E.g. <FONT FACE=“Arial”>

  11. HTML language • Text effect • Supported effect • Bold (<B> … </B>) • Italic (<I> … </I>) • Underline (<U> … </U>) • Blink (<BLINK> … </BLINK>)

  12. HTML language • Paragraph (<P> … </P>) • In HTML, <P> means the end of a paragraph • Text after <P> will be placed at next line • Ending tag </P> is optional

  13. Paragraphs <HTML> <BODY> <P>this is the 1st paragraph on this html example and it should work fine </P> <P>this is the 2nd paragraph on this html example and also works fine </P> </BODY> </HTML>

  14. HTML language • Line Break (<BR>) • <BR> is a single tag (Ending tag is not provided) • Compare with <P>, <BR> give a genuine line break • Paragraph give more vertical space between paragraphs

  15. HTML language • Center (<CENTER> … </CENTER>) • Align elements in between center • Can be performed for image • Can be performed for many paragraphs

  16. HTML language • Image (<IMG SRC=“…”>) • Common graphic file type are GIF and JPEG • No ending tag provided • Example • <IMG SRC=“picture.gif” WIDTH=“240” HEIGHT=“150” BORDER=“0” ALT=“This is a picture”>

  17. Images <HTML> <BODYBACKGROUND="backgrnd.gif"> <IMG SRC="animated.gif"> </BODY> </HTML>

  18. HTML language • Background image or colour • Background image • E.g. <BODY BACKGROUND=“back.gif”> • Background colour • E.g. <BODY BGCOLOR = “#9933FF”>

  19. HTML language • Hyperlink (<A HREF=“…”> … </A>) • Can be linked to another page • E.g. <A HREF=“http://hk.yahoo.com”> Yahoo </A> • Link to an e-mail • E.g. <A HREF=“mailto:myemail@yahoo.com”> Mail to Me </A>

  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) <A NAME=“link”>Jump from this point</A> : : <A NAME=“link”>Destination</A> Once the hyperlink is clicked the user jumps to this location.

  21. Lists <HTML> <BODY> <OL> <LI>This is the 1st list Item <LI>This is the 2nd list Item <LI>This is the 3rd list Item <LI>This is the 4th list Item </OL> </BODY> </HTML>

  22. Tables <HTML> <BODY> <TABLE Border=1> <Caption>table caption</Caption> <TR> <TD>1st Cell 1st Row</TD> <TD>2nd Cell 1st Row</TD> <TR> <TD>1st Cell 2nd Row</TD> <TD>2nd Cell 2ndst Row</TD> <TR> <TD>1st Cell 3rd Row</TD> <TD>2nd Cell 3rd Row</TD> </TABLE > </BODY> </HTML>

  23. Reference • Discovering Computers World 2003 (Ch.2 – 3)

More Related