1 / 16

HTML: A brief introduction

HTML: A brief introduction. HTML for Web Publishing. HTML stands for HyperText Markup Language It is a non-proprietary format based upon SGML HTML uses tags such as <h1> and </h1> to structure text into headings, paragraphs, lists, hypertext links etc.

martinezdavid
Download Presentation

HTML: A brief introduction

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. HTML: A brief introduction

  2. HTML for Web Publishing • HTML stands for HyperText Markup Language • It is a non-proprietary format based upon SGML • HTML uses tags such as <h1> and </h1> to structure text into headings, paragraphs, lists, hypertext links etc. • It’s used for presenting the content of data on the Web HTML

  3. An Example <html> <head> <title>A simple HTML document</title> </head> <body> <h1>A demonstration of simple HTML</h1> <p>Here is a simple paragraph. <p>Here is the <b>second</b> paragraph. <address> Qiang Yang qyang@cs.ust.hk </address> </body> </html> HTML

  4. Kinds of Markup • Structural markup • <p>, <h1> • Stylistic markup • <b> • Descriptive (semantic) markup • <title>, <address> HTML

  5. Creating Links • A Tags for creating hyperlinks • href=: URL for the hyperlink • img src=: images • An Image Link: <a href="http://www.wired.com"><img src="http://static.wired.com/wired/images/wired_logoblue.gif" width="153" height="31" border="0" alt="W I R E D"></a> • A Text Link: <A HREF="http://www.wired.com/wired/archive/ 3.06/xanadu.html?person=ted_nelson&topic_set=wiredpeople"> Full Text of Article</A> HTML

  6. Font Tags <FONT FACE=ARIAL SIZE=6> <B>The Curse of Xanadu</B> </FONT> <FONT FACE=ARIAL SIZE=3> by By Gary Wolf, <I>Wired Magazine</I> </FONT> • Font tags: • face: Arial, Courier, etc. • size: e.g. 3, 6 • color: e.g. “RED”, “GREEN”, etc. HTML

  7. <P> and <BR> Tags • <BR>: Break • <P>: Paragraph tag. Creates more space than a BR tag. • <HR>: Creates a Horizontal Rule HTML

  8. Lists • HTML supports two types of Lists: • Ordered Lists (OL): e.g. 1,2,3 • UnOrdered Lists (UL): e.g. bullets. • Basic Syntax: <UL> <LI>Item 1 <LI>Item 2 </UL> HTML

  9. Embedding Audio • For Internet Explorer, you can use BGSOUND: <BGSOUND src="http://www.3-cities.com/~yogi/Starwars/impressive.wav"> • Netscape doesn’t support BGSOUND, so you need to use the EMBED tag: <EMBED SRC="http://www.3-cities.com/~yogi/Starwars/impressive.wav" controls="console"> HTML

  10. Tables: Basic Tag Structure TR: Table Row <TABLE> <TR > <TH>Ticker</TH> <TH>Price</TH> </TR> <TR> <TD>MSFT</TD> <TD>71 1/16</TD> </TR> <TR> <TD>KO</TD> <TD>46 15/16</TD> </TR> </TABLE> TH: Table Heading TD: Table Data Every <TD> must have a matching </TD>. Every <TR> must have a matching </TR>. HTML

  11. HTML Frames • Enables you to divide a page into parts. • Each part can be served by the same or different web server. • Very simple to use. • Use with Caution: • Some browsers don’t support frames • Reduces screen “real estate” • Much better way: use DHTML HTML

  12. Frame Example 1.0 Divides the screen horizontally <HTML> <HEADER><TITLE>Framesets Example</TITLE></HEADER> <FRAMESET ROWS="60%,*"> <FRAME src="http://www.onvia.com"> <FRAME src="http://www.office.com"> <NOFRAMES> You are using a browser that does not support frames. </NOFRAMES> </FRAMESET> </HTML> Specify IndividualFrames Used by old browsers. HTML

  13. HTML Colors • You have two options for specifying colors: • Specify the color name, e.g. blue, maroon, pink. • Specify the RGB value. • RGB Values indicate the amount of Red, Green and Blue within each color. • These are specified as Hexadecimal numbers. • First Two Digits: Amount of Red • Next Two Digits: Amount of Green • Last Two Digits: Amount of Blue HTML

  14. HTML Forms

  15. Forms Overview • Every form must have a start <form> tag and an end </form> tag. <FORM> … </FORM> • Note that the form tag also has two attributes: • Method • Action HTML

  16. <HTML> <HEAD> <TITLE>Form Example 1.0</TITLE> </HEAD> <BODY> <CENTER> ... <FORM ACTION=http://www.someone.com/action.cgi METHOD="POST"> First Name: <INPUT TYPE=TEXT NAME=first SIZE=20 MAXLENGTH=20><BR> Last Name: <INPUT TYPE=TEXT NAME=last SIZE=20 MAXLENGTH=20><BR> Password: <INPUT TYPE=PASSWORD NAME=password SIZE=20 MAXLENGTH=20> <BR><INPUT TYPE=SUBMIT VALUE="Submit"> </FORM> </CENTER> </BODY> </HTML> Start of Form Tag End of Form Tag HTML

More Related