HTML Syntax
html syntax= <tag attribute= “value”></end tag>
<html> </html>
<head> </head>
<title>MY FIRST WEB</title>
<meta name= “keywords” content= “WEB, DESIGN, INTERNET”>
<meta name= “description” content= “DESIGN AND CREATE A WEB PAGE…..”>
<link rel= “stylesheet” type= “text/css” href= “/main.css” >
<body> </body>
<body bgcolor=blue text=black > </body> (quotation marks not required)
<body bgcolor= “#0000ff” text= “ff0000”> </body>
<body bgproperties= “fixed” text= “ff0000”> </body>
<body link= “#ff00ff” vlink= “#33ff66” alink= “#9900cc”>
Font
<font color=red> </font>
<font size= “3”> </font>
<font size= “+7”></font>
<font face= “arial”> </font>
<b>bold font </b>
<i>italics font </i>
<h1>main heading </h1>
<h2>sub heading </h2>
<p><font color="#0000FF"><i><b>BOLD, BLUE, ITALICS</b></i></font></p>
Paragraphs, Tables and Cells
<p>paragraph </p>
<p align= “center”><b> BOLD TEXT IN THE MIDDLE OF THE PAGE </b> </p>
<table width=”400” border=”2”> </table>
<tr>table row </tr>
<td>table data or cell </td>
<td> </td> (this cell is empty)
<table border="1" cellpadding="0" cellspacing="0" bordercolor="#111111" width="100%">
<tr>
<td width="50%">BLUE TEXT IN A CELL</td>
<td width="50%"><img src="images/picture.jpg" width="151" height="211"></td>
</tr>
</table>
<table width= “400” div align= “center” border= “0”> (division tag)
<table width= “400” border= “0” background color= “#ff00ff”>
<table width= “400” border= “0” background= “picture.jpg”> (Picture as table background)
<td width= “400”> <img src= “picture.jpg” width= “200” height= “100”> (Picture as foreground)
<td valign= “top” align= “center”> </td>
<td colspan= “2” valign=”top”>
<center> TO ALIGN TEXT TO CENTER </center>
<!--comment-->
Advanced HTML Syntax
Anchor tag <a>
<a name="middleofpage"></a>
<a href= “#middleofpage”>TO MIDDLE OF PAGE </a> (anchor tag used for hyperlink)
<a href= “http://www.anz.com.au”>BANK</a>
<td ><a href="mailto:">EMAIL US</a></td>
Hot Spots located over an image
· This statement placed anywhere in the body
<map name=“map1”><area shape=“rect” coords= “115,26,460,237” href=“middleofpage”></map>
(coords= “fromleft, fromtop, width, height” relative to “Table”)
· This statement to be placed where the image is to be located
<td><img src=“picture.jpg” width=“200” height=“100” alt=“sky” usemap=“#map1”>
Style (User Defined Style: placed in the <Head>)
<style><!--
h2 { font-family: Arial; font-size: 18pt; color: #FF00FF; font-style: italic }
h3 { font-family: Comic Sans MS; font-size: 16pt; color: #008000 }-->
</style>
<p>UnOrdered List (Bulleted)</p>
<ul>
<li>Milk</li>
<li>Bread</li>
<li>Sugar</li>
</ul>
Layers
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 31px; top: 347px;"><img src="/Platypus~240.jpg" width="185" height="240"></div>
Background Table Image
<table width="774" height="1000" border="0" div align="center"
background="platypus~240.jpg" style="background-repeat: no-repeat;
background-position: top center;">
Background Cell Image
<tr>
<td width="50%" background="Echidna.jpg" height="97">
Cell Text Here</td>
<td width="50%" height="97"> </td>
</tr>
<p>sdashdasj<br> Break tag starts new line with single row space (Shift + Enter)
asdasd</p>
<a style="text-decoration: none" href="/pages/contact.htm">/pages/contact.htm</a>
<a href="http://www.hub.org.au/" target="_blank">Click Here</a> to open in another Browser
CSS
This text in css sets the format for any Hyperlink other than ones with the Class attribute:
a, a:link, a:visited, a:active { text-decoration: none; font: 12px Verdana, sans-serif; color: gray; }
This text in css sheet sets the format for any Hyperlink with the class=”navLink” attribute:
a.navlink:hover { text-decoration: underline; font: 12px Verdana, Arial; color: #00A1E5; }
On page
<td align="center"><a href="about.html" class="navLink">About Us</a>
<hr></td>
This text in css sheet sets the format for any Hyperlink with the class=”footer” attribute:
a.footer:hover { text-decoration: underline; font: 9px Verdana; color: #00A1E5; }
On page
<td><a href="index.html" class="footer">Home</a> | <a href="About.html" class="footer">
Forms
<form name="reply" method="post" action="mailto:">
Example 1
<FORM ACTION="http://users.netconnect.com.au/utilities/submit-mail?" METHOD="POST">
<INPUT TYPE=HIDDEN NAME="SUBJECT" VALUE="RETURN FORM">
<td> <input type="SUBMIT" value="Submit" name="" id="fp6" tabindex="6"><input type="reset" value="Reset" name="B2"id="fp7" tabindex="7"></td>
</form>
Example 2
<body>
<p>RETURN FORM</p>
<form method="POST" action="http://users.netconnect.com.au/utilities/submit-mail?” >
<!--webbot bot="SaveResults" U-File="fpweb:///_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" --><p>
Comments Please<input type="text" name="T1" size="20"></p>
<p><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset" name="B2"></p>
</form>
</body>
C:\2004\Training\Web\HTMLBasic.doc PHKrelle16/08/2006