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. It’s used for presenting the content of data on the Web 2019/11/22 HTML
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> 2019/11/22 HTML
Kinds of Markup Structural markup <p>, <h1> Stylistic markup <b> Descriptive (semantic) markup <title>, <address> 2019/11/22 HTML
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> 2019/11/22 HTML
Font Tags Font tags: face: Arial, Courier, etc. size: e.g. 3, 6 <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 tags: face: Arial, Courier, etc. size: e.g. 3, 6 color: e.g. “RED”, “GREEN”, etc. 2019/11/22 HTML
<P> and <BR> Tags <BR>: Break <P>: Paragraph tag. Creates more space than a BR tag. <HR>: Creates a Horizontal Rule 2019/11/22 HTML
Lists Ordered Lists (OL): e.g. 1,2,3 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> 2019/11/22 HTML
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"> 2019/11/22 HTML
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> <TD>KO</TD> <TD>46 15/16</TD> </TABLE> TH: Table Heading TD: Table Data Every <TD> must have a matching </TD>. Every <TR> must have a matching </TR>. 2019/11/22 HTML
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 2019/11/22 HTML
Divides the screen horizontally 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 Individual Frames Used by old browsers. 2019/11/22 HTML
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 2019/11/22 HTML
HTML Forms
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 2019/11/22 HTML
Start of Form Tag End of Form Tag <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 2019/11/22 HTML