Multimedia Communication
Download
Report
Transcript 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
Microsoft FrontPage
Microsoft Word
Netscape Composer
Macromedia Dreamweaver
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.
HTML language
Composed by two parts
The first part above provide information for
browser
The second is the core of the file
Between <HEAD> and </HEAD>
Between <BODY> and </BODY>
Content of the webpage
HTML code is case-insensitive
HTML language
The simplest HTML webpage
<html>
<head>
<title>Title of webpage</title>
</head>
<body>
Content of webpage
</body>
</html>
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
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
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>
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”>
HTML language
Text effect
Supported effect
Bold (<B> … </B>)
Italic (<I> … </I>)
Underline (<U> … </U>)
Blink (<BLINK> … </BLINK>)
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
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>
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
HTML language
Center (<CENTER> … </CENTER>)
Align elements in between center
Can be performed for image
Can be performed for many paragraphs
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”>
Images
<HTML>
<BODY BACKGROUND="backgrnd.gif">
<IMG SRC="animated.gif">
</BODY>
</HTML>
HTML language
Background image or colour
Background image
E.g. <BODY BACKGROUND=“back.gif”>
Background colour
E.g. <BODY BGCOLOR = “#9933FF”>
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:[email protected]”>
Mail to Me </A>
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.
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>
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>
Reference
Discovering Computers World 2003
(Ch.2 – 3)