Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download Introduction to HTML
Document related concepts
no text concepts found
Transcript
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)
