Html tutorial

Definitions WWW -- a software infrastructure layered on top of the Internet HTTP -- HyperText Transport Protocol, layered on top of TCP HTTPS -- secure HTTP using encryption HTML -- HyperText Markup Language, version 4.01 is current

HTML Page Format <HTML> <HEAD> <TITLE> Qi’s web! </TITLE> </HEAD> <BODY> <H1> Hello World </H1> <! Rest of page goes here. This is a comment. > </BODY> </HTML>

BODY Element <BODY attributename="attributevalue"> Deprecated attributes (but still used) BACKGROUND=“ Sunset.jpg” (can be tiled) BGCOLOR=color TEXT= color LINK= color (unvisited links) VLINK= color (visited links) ALINK= color (when selected)

Headings <H1 ...> text </H1> -- largest of the six <H2 ...> text </H2> <H3 ...> text </H3> <H4 ...> text </H4> <H5 ...> text </H5> <H6 ...> text </H6> -- smallest of the six ALIGN= "position" --left (default), center or right

Headings <HTML> <HEAD> <TITLE>Document Headings</TITLE> </HEAD> <BODY> Samples of the six heading types: <H1> Level-1 (H1) </H1> <H2 ALIGN="center"> Level-2 (H2) </H2> <H3> <U>Level-3 (H3)</U> </H3> <H4 ALIGN="right"> Level-4 (H4) </H4> <H5> Level-5 (H5) </H5> <H6> Level-6 (H6) </H6> </BODY> </HTML>

<P> Paragraph <P> defines a paragraph Add ALIGN= "position" (left, center, right) Multiple <P>'s do not create blank lines Use <BR> for blank line Fully-specified text uses <P> and </P> But </P> is optional

<BODY> <P>Here is some text </P> <P ALIGN="center"> Centered text </P> <P><P><P> <P ALIGN="right"> Right-justified text <! Note: no closing /P tag is not a problem> </BODY>

<PRE> Preformatted Text <PRE> if (a < b) { a++; b = c * d; } else { a--; b = (b-1)/2; } </PRE>

Special Characters   Space " " & & > > < < Use Character

Colors Values for BGCOLOR and COLOR many are predefined (red, blue, green, ...) all colors can be specified as a six character hexadecimal value: RRGGBB FF0000 – red 888888 – gray 004400 – dark green FFFF00 – yellow

Fonts <FONT COLOR="red" SIZE="2" FACE="Times Roman"> This is the text of line one </FONT> <FONT COLOR="green" SIZE="4" FACE="Arial"> Line two contains this text </FONT> <FONT COLOR="blue" SIZE="6" FACE="Courier" The third line has this additional text </FONT> Note: <FONT> is now deprecated in favor of CSS.

Ordered (Numbered) Lists <OL TYPE="1"> <LI> Item one </LI> <LI> Item two </LI> <OL TYPE="I" > <LI> Sublist item one </LI> <LI> Sublist item two </LI> <OL TYPE="i"> <LI> Sub-sublist item one </LI> <LI> Sub-sublist item two </LI> </OL> </OL> </OL>

Unordered (Bulleted) Lists <UL TYPE="disc"> <LI> One </LI> <LI> Two </LI> <UL TYPE="circle"> <LI> Three </LI> <LI> Four </LI> <UL TYPE="square"> <LI> Five </LI> <LI> Six </LI> </UL> </UL> </UL>

Physical Character Styles <H1>Physical Character Styles</H1> <B>Bold</B><BR> <I>Italic</I><BR> <TT>Teletype (Monospaced)</TT><BR> <U>Underlined</U><BR> Subscripts: f<SUB>0</SUB> + f<SUB>1</SUB><BR> Superscripts: x<SUP>2</SUP> + y<SUP>2</SUP><BR> <SMALL>Smaller</SMALL><BR> <BIG>Bigger</BIG><BR> <STRIKE>Strike Through</STRIKE><BR> <B><I>Bold Italic</I></B><BR> <BIG><TT>Big Monospaced</TT></BIG><BR> <SMALL><I>Small Italic</I></SMALL><BR> <FONT COLOR="GRAY">Gray</FONT><BR> <DEL>Delete</DEL><BR> <INS>Insert</INS><BR>

Logical Character Styles <H1>Logical Character Styles</H1> <EM>Emphasized</EM><BR> <STRONG>Strongly Emphasized</STRONG><BR> <CODE>Code</CODE><BR> <SAMP>Sample Output</SAMP><BR> <KBD>Keyboard Text</KBD><BR> <DFN>Definition</DFN><BR> <VAR>Variable</VAR><BR> <CITE>Citation</CITE><BR> <EM><CODE>Emphasized Code</CODE></EM><BR> <FONT COLOR="GRAY"><CITE>Gray Citation</CITE></FONT><BR> <ACRONYM TITLE="Java Development Kit">JDK Acronym</ACRONYM>

<A> Anchors (HyperLinks) Link to an absolute URL: If you get spam, contact <A HREF="htttp:www.microsoft.com"> Microsoft </A> to report the problem. Link to a relative URL: See these <A HREF="#references"> references </A> concerning our fine products. Link to a section within a URL: Amazon provided a <A HREF="www.amazon.com/#reference"> reference for our company. </A>

Naming a Section <H2> <A NAME="#references"> Our References </A> </H2> Example

Hyperlinks <BODY> <H3>Welcome to <A HREF="http://www.cs.virginia.edu"> <STRONG>Computer Science</STRONG></A> at the <A HREF="www.virginia.edu">University of Virginia.</A> </H3> </BODY>

Images SRC is required WIDTH, HEIGHT may be in units of pixels or percentage of page or frame WIDTH="357" HEIGHT="50%" Images scale to fit the space allowed

Images Words align with middle of image Middle Image is left; words align with bottom of image Bottom Image is left; words align with top of image Top Image on right edge; text flows to left Right Image on left edge; text flows to right of image Left Image/Text Placement Align= position

Images <BODY> <img src="dolphin.jpg" align="left" width="150" height="150" alt="dolphin jump!"> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> This is a very cute dolphin on the left!<br> You can see text wrap around it<br> </BODY> </HTML>

Tables <TABLE> table tag <CAPTION> optional table title <TR> table row <TH> table column header <TD> table data element

Tables <TABLE BORDER=1> <CAPTION>Table Caption</CAPTION> <TR><TH>Heading1</TH> <TH>Heading2</TH></TR> <TR><TD>Row1 Col1 Data</TD><TD>Row1 Col2 Data</TD></TR> <TR><TD>Row2 Col1 Data</TD><TD>Row2 Col2 Data</TD></TR> <TR><TD>Row3 Col1 Data</TD><TD>Row3 Col2 Data</TD></TR> </TABLE>

<TABLE> Element Attributes ALIGN= position -- left, center, right for table BORDER= number -- width in pixels of border (including any cell spacing, default 0) CELLSPACING= number -- spacing in pixels between cells, default about 3 CELLPADDING= number -- space in pixels between cell border and table element, default about 1 WIDTH= number[%] -- width in pixels or percentage of page/frame width

cellspacing=10 cellpadding=10

<TABLE> Element Attributes BGCOLOR= color -- background color of table, also valid for <TR>, <TH>, and <TD> RULES= value -- which internal lines are shown; values are none, rows, cols, and all (default) EX: <TABLE COLS=“40%, *,*”> <TABLE ROWS=“*,*”>

<TR> Table Row Attributes Valid for the table row: ALIGN -- left, center, right VALIGN -- top, middle, bottom BGCOLOR -- background color <TABLE ALIGN="center" WIDTH="300" HEIGHT="200"> <TR ALIGN="left" VALIGN="top" BGCOLOR="red"><TD>One</TD><TD>Two</TD> <TR ALIGN="center" VALIGN="middle" BGCOLOR="lightblue"><TD>Three</TD><TD>Four</TD> <TR ALIGN="right" VALIGN="bottom" BGCOLOR="yellow"><TD>Five</TD><TD>Six</TD> </TABLE>

<TD> Table Cell Attributes Valid for the table cell: colspan -- how many columns this cell occupies rowspan – how many rows this cell occupies <TABLE ALIGN="center" WIDTH="300" HEIGHT="200" border="1"> <TR> <TD colspan="1" rowspan="2">a</TD> <TD colspan="1" rowspan="1">b</TD> </TR> <TR> <TD colspan="1" rowspan="1">c</TD> </TR> </TABLE>

Frames Frames help control navigation and display <FRAME> attributes include FRAMEBORDER – yes or 1 for borders FRAMESPACING – width of border BORDERCOLOR – color SRC – location of HTML to display in frame NAME – destination for TARGET attribute

Frames MARGINWIDTH – left/right margins MARGINHEIGHT – top/bottom margins SCROLLING – yes or 1 adds scroll bar NORESIZE – yes or 1 disables resizing

Frames <FRAMESET ROWS=" 75%,25% "> <FRAMESET COLS="*,*,*"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> </FRAMESET> <FRAMESET COLS="*,*"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> </FRAMESET> </FRAMESET>

Frames <FRAMESET ROWS=" 25%,75% " <FRAMESET COLS="*,*,*"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> </FRAMESET> <FRAMESET COLS="*,*"> <FRAME SRC="http://www.virginia.edu"> <FRAME SRC="http://www.virginia.edu"> </FRAMESET> </FRAMESET>

Frames <FRAMESET ROWS=" *,* "> <FRAMESET COLS=" 15%, 2*, * "> <FRAME SRC="http://www.cs.virginia.edu/"> <FRAME SRC="http://www.cs.virginia.edu/"> <FRAME SRC="http://www.cs.virginia.edu/"> </FRAMESET> <FRAMESET COLS=" 40%, * "> <FRAME SRC="http://www.cs.virginia.edu/"> <FRAME SRC="http://www.cs.virginia.edu/"> </FRAMESET> </FRAMESET>

Cascading Style Sheets A powerful way to specify styles and formatting across all documents in a web site Style sheets can be specified inline or as a separate document Helps to keep a common look and feel

CSS General form: selector {property: value} or selector {property1: value1; property2: value2; ... propertyn: valuen }

CSS H1 {text-align: center; color: blue; font: Arial, Times New Roman} P {text-align: left; color: red; font-family: Tahoma, Arial Narrow; font-style: italics}

Fizzics1 (no style sheet) <HTML> <HEAD> <TITLE>New Advances in Physics</TITLE> </HEAD> <BODY> <H1>New Advances in Physics</H1> <H2>Turning Gold into Lead</H2> In a startling breakthrough, scientist B.O. "Gus" Fizzics has invented a <STRONG>practical</STRONG> technique for transmutation! For more details, please see <A HREF="give-us-your-gold.html">our transmutation thesis</A>. ... </BODY> </HTML> From: Core Web Programming, Marty Hall and Larry Brown, © 2002

Html tutorial

More Related Content

Html tutorial