Download presentation
Presentation is loading. Please wait.
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 2019/11/22 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 </address> </body> </html> 2019/11/22 HTML
4
Kinds of Markup Structural markup <p>, <h1>
Stylistic markup <b> Descriptive (semantic) markup <title>, <address> 2019/11/22 HTML
5
Creating Links A Tags for creating hyperlinks
href=: URL for the hyperlink img src=: images An Image Link: <a href=" src=" width="153" height="31" border="0" alt="W I R E D"></a> A Text Link: <A HREF=" 3.06/xanadu.html?person=ted_nelson&topic_set=wiredpeople"> Full Text of Article</A> 2019/11/22 HTML
6
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
7
<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
8
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
9
Embedding Audio For Internet Explorer, you can use BGSOUND:
<BGSOUND src=" Netscape doesn’t support BGSOUND, so you need to use the EMBED tag: <EMBED SRC=" controls="console"> 2019/11/22 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> <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
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 2019/11/22 HTML
12
Divides the screen horizontally
Frame Example 1.0 Divides the screen horizontally <HTML> <HEADER><TITLE>Framesets Example</TITLE></HEADER> <FRAMESET ROWS="60%,*"> <FRAME src=" <FRAME src=" <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
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 2019/11/22 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 2019/11/22 HTML
16
Start of Form Tag End of Form Tag <HTML> <HEAD>
<TITLE>Form Example 1.0</TITLE> </HEAD> <BODY> <CENTER> ... <FORM ACTION= 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
Similar presentations
