HTML Intermediate SummaryS2C Home « HTML Intermediate Summary

To conclude the HTML Intermediate 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 Intermediate Tutorial and see what can be achieved with these tags.

HTML Tags Used in the HTML Intermediate Section:



<div> and <span> structural style tags.
<cite>, <code>, <del>, <dfn>, <ins>, <kbd>, <samp> and <var> formatting tags
<dl>, <dt> and <dd> defintion list tags
<base> the document base URL tag.
<table>, <tr>, <th> and <td> table tags
<form>, <input>, <label> and <textarea> 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 Getting To Grips With Forms

You saved the file to your computer in the C:\_HTMLIntermediate 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 - Intermediate HTML Lesson 8 - HTML Intermediate Summary
</title>
  <base  href="http://server2client.com/" />
</head>
<!--HTML Intermediate Summary -->
<body>
<h2>Formatting Text Tags</h2>
<p>Shakespeare once wrote '<cite>If music be the food of love, play on</cite>'</p>
<p>A void return Java Method Signature. <code>void foo() {} </code></p>
<p>Today is <del>Monday</del>Tuesday.</p>
<p>The Milky Way is a <dfn>Spiral</dfn> galaxy.</p>
<p>There were <ins>6</ins> green bottles hanging on the wall</p>
<p>Type <kbd>Fried Green Tomatoes</kbd> and press the Enter key.</p>
<p>System.out.println("Sample Output Code"); <samp>Sample Output Code</samp></p>
<p><var>colCount</var> = 20;</p>
<div style="font-style:italic">
<h2>Using Tables</h2>
<table border="2">
  <tr><td>Banana</td><td>Yellow</td></tr>
  <tr><td>Pea</td><td>Green</td></tr>
</table>
<table>
  <tr><th>Fruit</th><th>Colour</th></tr>
  <tr><td>Banana</td><td>Yellow</td></tr>
  <tr><td>Pea</td><td>Green</td></tr>
</table>
<h2>Basic Forms</h2>
<p><span style="color:red">Please fill in our Pie Survey:</span></p>
<form action="html4intermediate/simpleform.html"  method="get">
  <p>Name: <input type="text" name="name" /></p>
  <p><span style="color:red">Which pie do you prefer?:</span></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><span style="color:red">Other stuff you wanna tell us about pies:</span></p>
  <p><textarea rows="3" cols="30" name="comments"></textarea></p>
  <p><span style="color:red">Submit your information:</span></p>
  <p><input type="submit" value="Submit" /></p>
</form>
</div>
</body>
</html>

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

save intermediate 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.

intermediate summary

Reviewing Our Changes

That's all the tags used from the HTML4 Intermediate Section and our pages are looking more complex as we progress.

Lesson 8 Complete

Well, our journey through The HTML Intermediate Tutorials is 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 intermediate tutorials. Play around with the file and change the HTML to see what you get.

Related Tutorials

HTML4 Basics Tutorials - Lesson 9 - HTML4 Basics Summary

HTML4 Advanced Tutorials - Lesson 8 - HTML4 Advanced Summary

What's Next?

We conclude our journey through the HTML maze with the HTML Advanced Tutorials.

HTML4 Reference

Basic TagsDefinition List Tags
The <!--...--> comment tag The <dd> definition description tag
The <!DOCTYPE> document type tag The <dl> definition list tag
The <dt> definition term tag
Formatting TagsForm Tags
The <cite> citation tag The <form> interactive form tag
The <code> computer code fragment tag The <input> form input control tag
The <del> editorial deletion text tag The <label> label tag
The <dfn> definition term tag The <textarea> multi-line text field tag
The <ins> editorial insertion text tag
The <kbd> keyboard entry tag
The <samp> sample output code fragment tag
The <var> computer variable tag
Link TagsStructural Style Tags
The <base /> base URL location tag The <div> structural division style tag
The <span> structural inline style tag
Table Tags
The <table> table tag
The <td> table data cell tag
The <th> table header cell tag
The <tr> table row tag

go to home page Homepage go to top of page Top