HTML4 Advanced SummaryS2C Home « HTML4 Advanced Summary

To conclude the HTML Advanced Tutorial section, we bring all we have learnt together in a web page utilizing the knowledge we have gathered so far. We will use all the HTML tags from the HTML Advanced Tutorial and see what can be achieved with these tags.

HTML Tags Used in the HTML Advanced Section:


<iframe> define an in-line window that holds another document.
<link /> link to external resource tag.
<meta /> generic meta information tag.
<script> and <noscript> scripting tags
<style> style information tag.
<abbr>, <acronym>, <address>, <bdo>, <blockquote>, <q> and <pre> formatting tags
<map> and <area /> interactive image tags
<object> and <param /> embedded object tags
<caption>, <col>, <colgroup>, <thead>, <tfoot> and <tbody> table tags
<button>, <fieldset>, <legend>, <optgroup>, <option> and <select> form tags

In this summary we will use all these tags to refresh ourselves with their usage.

Open the file with Notepad we created and tested in Lesson: 7 Inline Frames

You saved the file to your computer in the C:\_HTMLAdvanced folder as lesson_7_webpage.html

Copy and paste the following code into the reopened file, overwriting the files contents.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
  HTML Tutorials - Advanced HTML Lesson 7 - HTML Advanced Summary
</title>
  <meta name="Description" content="Title info used in searge engine descriptions." />
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <link href="http://server2client.com/css/lesson8.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="../js/jquery.js"></script>
  <style type="text/css">.red {color: red;} </style>
  <style type="text/css">.blue {color: blue;} </style>
  <style type="text/css">.green {color: green;} </style>
</head>
<!--HTML Advanced Summary -->
<body>
<div id="wrapper">
<h1 class="red">HTML Advanced Tutorials</h1>
<noscript>
  <p>Find out how to turn on JavaScript: 
	  <a href="http://server2client.com/pages/scripton.html">here</a></p>
</noscript>
<div id="sidebar">
<h2 class="blue">Formatting Text Tags</h2>
<h3 class="green">The Abbreviation Tag</h3>
<p><abbr title="Electric Light Orchestra">ELO</abbr></p>
<h3 class="green">The Acronym Tag</h3>
<p><acronym title="Time And Relative Dimesion In Space">TARDIS</acronym></p>
<h3 class="green">The Address Tag</h3>
<address>Freddy Fudpucker<br />12 Flamingo Way<br />Bird Town<br />Turkey<br />
<a href="mailto:kevandjules@server2client.com">Email</a><br />
</address>
<h3 class="green">The Bidirectional Override Tag</h3>
<p><bdo dir="ltr">The text will flow from left to right</bdo><br />
   <bdo dir="rtl">The text will flow from right to left</bdo></p>
<h3 class="green">The Block Quotation Tag</h3>
<blockquote>
 <p>Quotation text here, remember blockquotes always enclose other<br /> 
    block elements such as paragraphs. If you do not do this the HTML<br />
    will not pass Strict HTML/XHTML. Better to have our code pass this.</p> 
</blockquote>
<h3 class="green">The Quotation Tag</h3>
<p>Quotation text: <q>will be wrapped with quotation marks.</q></p>
  <h3 class="green">The Preformatted Text Tag</h3>
  <pre>This text will be be displayed
  in a fixed width font and preserves whitespace
	and carriage returns.</pre>
<h2 class="blue">Interactive Images</h2>
<!-- Our HTML for interactive images follows -->
<p><img src="http://server2client.com/images/enhancedimagesmall.jpg"
     alt="interaction" width="300" height="200" usemap="#lesson3" />
<map id="lesson3" name="lesson3">
  <area shape="rect"
        alt="paper" coords="10,10,156,190" href="javascript:alert('blank paper');" />
  <area shape="circle" alt="apple" coords="235,45,50" 
        href="http://server2client.com/pages/apple.html" />
  <area shape="circle" alt="tomato" coords="230,145,25" 
        href="http://server2client.com/pages/tomato.html" />
</map></p>
<p>Click on something in the picture pls.</p>
<!-- Our HTML for embedding objects follows -->
<h2 class="blue">Embedded Objects</h2>
<p>Take a look at this lovely apple.</p>
<p><object data="http://server2client.com/pages/apple.html" type="text/html" width="300"
  height="200" alt : <a href="http://server2client.com/pages/apple.html">View Apple</a>
</object></p>
</div>
<div id="main">
<!--Inline Frame -->
<h2 class="blue">Example Of An Inline Frame</h2>
<iframe src="http://server2client.com/html4advanced/iframes.html" 
        width="100%" height="480">Title here for browsers not supporting iframes
</iframe>
<!--Tables -->
<h2 class="blue">Advanced Tables</h2>
<h3 class="green">Caption and Column Group Tags</h3>
<table border="1"><caption>Caption Names A Table</caption>
  <colgroup span="2" width="200"></colgroup><colgroup  width="75"></colgroup>
  <tr><th>Fruit</th><th>Colour</th><th>Quantity</th></tr>
  <tr><td>Banana</td><td>Yellow</td><td>5</td></tr>
  <tr><td>Pea</td><td>Green</td><td>50</td></tr>
</table>
<h3 class="green">The Table Column Tag</h3>
<table border="2"><col width="250" /><col width="150" /><col width="75" />
  <tr><th>Fruit</th><th>Colour</th><th>Quantity</th></tr>
  <tr><td>Banana</td><td>Yellow</td><td>5</td></tr>
  <tr><td>Pea</td><td>Green</td><td>50</td></tr>
</table>
<!--Advanced Forms -->
<h2 class="blue">Advanced Forms</h2>
<h3 class="green">Fieldset and Drop-Down List</h3>
<form action="http://server2client.com/html4advanced/simpleform.html" method="get">
  <fieldset>
  <legend>Pie Survey</legend>
  <p>Name:<input type="text" name="name" /></p>
  <p>Which pie do you prefer?:</p>
  <p><input type="radio" name="pie" checked="checked" value="Chicken" id="chicken" />
  <label for="chicken">Chicken</label></p>
  <p><input type="radio" name="pie" value="Fish" id="fish" />
  <label for="fish">Fish</label></p>
  <p><input type="radio" name="pie" value="Shepherds" id="shepherds" />
  <label for="shepherds">Shepherds</label></p>
  <p>Select a pie shape:</p>
  <p><select name="mySelection">	
    <optgroup label="Normal">
      <option selected="selected"  value="Round">round</option>
      <option value="Square">square</option>
    </optgroup>
    <optgroup label="Custom">
      <option value="Hexagon">hexagon</option>
      <option value="Star">star</option>
      <option value="Triangle">triangle</option>
    </optgroup>
  </select></p>
  <p>Submit your information:</p>
  <p><button type="submit" value="Submit">Submit</button></p>
  </fieldset>
</form>
</div>
</div>
</body>
</html>

Save the file in the C:\_HTMLAdvanced folder as lesson_8_webpage.html and close the Notepad.

save advanced summary

Viewing Our Changed File

From the C:\_HTMLIntermediate folder, double click on the saved file and it will appear in your default web browser and look something like the following image.

advanced summary

Reviewing Our Changes

That's all the tags used from the HTML Advanced Section and I have used some division tags and CSS to present the screen. How we do this is the subject of the CSS tutorials.

Lesson 8 Complete

The HTML Advanced Tutorial lessons are now complete. We have covered a lot of ground in these lessons and I hope you have not only learned, but also enjoyed doing these advanced tutorials. Play around with the file and change the HTML to see what you get.

Related Tutorials

HTML4 Basics Tutorials - Lesson 9 - HTML Basics Summary

HTML4 Intermediate Tutorials - Lesson 8 - HTML Intermediate Summary

What's Next?

In the next lesson we bring all we have learnt together in this section in the HTML Advanced Summary.

HTML4 Reference

Formatting TagsImport, Meta and Script Tags
The <abbr> abbreviated form tag The <link /> link to external resource tag
The <acronym> acronym tag The <meta /> generic meta information tag
The <address> contact information tag The <noscript> non script statement tag
The <bdo> bidirectional override tag The <script> script statement tag
The <blockquote> long quotation tag The <style> style information tag
The <q> short inline quotation tagInline Frames
The <pre> preformatted tag The <iframe> inline frame tag
Interactive Image TagsEmbedded Object Tags
The <map> client-side image map tag The <object> embedded object tag
The <area /> client-side image area map tag The <param /> object parameter tag
Table TagsForm Tags
The <caption> table caption tag The <button> push button tag
The <col> table column tag The <fieldset> control group tag
The <colgroup> table column group tag The <legend> control group(fieldset) legend tag
The <thead> table header tag The <optgroup> option group tag
The <tfoot> table footer tag The <option> selectable option tag
The <tbody> table body tag The <select> option selector tag

go to home page Homepage go to top of page Top