html5 Site Icon CSS3 Site Icon CSS Site Icon

HTML4 Basics

Lesson 9 - HTML4 Basics Summary

To conclude the HTML4 Basics Tutorials section, we bring all we have learnt together in a web page utilizing the knowledge we have gathered so far. Even with just a few basics you can really get your web pages looking snazzy and well laid out. We will use all the HTML tags from the HTML basics and see what can be achieved with a small percentage of the HTML tags available.

HTML Tags Used in the HTML4 Basics Section:


<html> the document root tag.
<head> the document head tag.
<title> the document title tag.
<body> the document body tag.
<h1> - <h6> for creating heading.
<p> for creating paragraphs.
<br /> for forcing line breaks.
<em> and <strong> tags for emphasising text.
<ol>, <ul> and <li> tags for ordered and unordered lists.
<img /> tag for including images in our web pages.
<a/> anchor tag for links and hyperlinks.

Open the file with Notepad we created and tested in Lesson: 8 Links

You saved the file to your computer in the C:\_HTMLBasics folder as lesson_8_webpage.html

Copy and paste the following code into the reopened file, overwriting the opening <body> and closing </body> tags.


<body>
<h1>HTML4 Basics Summary</h1>
<h2>Using the tags from this section</h2>
<h3 id="smallpie">What a lovely pie</h3>
<img src="http://htmldoctor.info/images/chickenpiesmall.jpg"
     alt="Chicken Pie" />
<a href="#bigpie">The Bigger Picture</a>
<p>That pie looks so good thing I shall make it for dinner</p>
<br />
<h4>Getting Ready For Pie!</h4>
<h5>Shopping List</h5>
<p><em>What I need to get at the supermarket</em></p>
<ul>
  <li>Tin of Tomatoes</li>
  <li>Bacon</li>
  <li>Loaf of Bread</li>
  <li>Mushrooms</li>
</ul>
<h6><strong>remember the chicken</strong></h6>
<h5>Cooking Instructions</h5>
<p><em>Instructions for perfect Chicken Pie</em></p>
<ol>
  <li>Turn the oven on</li>
  <li>Cook the chicken and gravy</li>
  <li>roll the pasrty</li>
  <li>put chicken and gravy in ovenproof dish</li>
  <li>lay over and trim pastry</li>
  <li>cook in the preheated oven</li>
</ol>
<h3 id="bigpie">Man That Pie looks Good</h3>
<img src="http://htmldoctor.info/images/chickenpiesmall.jpg"
     alt="Same Image But Bigger" 
     width="300" 
     height="200" />
<a href="#smallpie">The Smaller Picture</a>
<h2>Even More Delicious Pies</h2>
<a href="http://htmldoctor.info/htmlbasics/lotsofpies.html">Pie Central</a>
</body>

Reviewing Our Changes

Ok with the changes cut and pasted into the file, your HTML code should now look like the code below.


<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
  HTML Doctor - HTML and CSS Tutorials - Basic HTML Lesson 9 - HTML4 Basics Summary
</title>
</head>
<body>
<h1>HTML4 Basics Summary</h1>
<h3 id="smallpie">What a lovely pie</h3>
<img src="http://htmldoctor.info/images/chickenpiesmall.jpg"
     alt="Chicken Pie" />
<a href="#bigpie">The Bigger Picture</a>
<p>That pie looks so good thing I shall make it for dinner</p>
<h5>Shopping List</h5>
<p><em>What I need to get at the supermarket</em></p>
<ul>
  <li>Tin of Tomatoes</li>
  <li>Bacon</li>
  <li>Loaf of Bread</li>
</ul>
<h5>Cooking Instructions</h5>
<p><em>Instructions for perfect Chicken Pie</em></p>
<ol>
  <li>Cook the chicken and gravy</li>
  <li>put chicken and gravy in ovenproof dish</li>
  <li>roll the pastry and put over pie filling</li>
  <li>cook in preheated oven</li>
</ol>
<h3 id="bigpie">Man That Pie looks Good</h3>
<img src="http://htmldoctor.info/images/chickenpiesmall.jpg"
     alt="Same Image But Bigger" 
     width="300" 
     height="200" />
<a href="#smallpie">The Smaller Picture</a>
<h2>Even More Delicious Pies</h2>
<a href="http://htmldoctor.info/htmlbasics/lotsofpies.html">Pie Central</a>
</body>
</html>

When your file matches the HTML code above, save in the C:\_HTMLBasics folder as lesson_9_webpage.html and close the Notepad.

notepad

Viewing Our Changed File

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

notepad

Lesson 9 Complete

Well, our journey from HTML beginner to intermediate is now complete. We have covered a lot of ground on our initial foray into HTML and I hope you have not only learned, but also enjoyed doing these HTML4 Basic Tutorials. Play around with the file and maybe improve on the headings I used to improve the look of the web page.

Related Tutorials

HTML4 Intermediate Tutorials - Lesson 8 - HTML4 Intermediate Summary

HTML4 Advanced Tutorials - Lesson 8 - HTML4 Advanced Summary

What's Next?

We continue our expedition through the HTML jungle with the HTML4 Intermediate Tutorials.



Links  << Prev           Next >>  HTML4 Intermediate Tutorials

HTML4 Reference

Formatting Tags Image Tags
The <em/> emphasis tag The <img /> image tag
The <strong/> strongly emphasis tag
Informational Tags Link Tags
The <title> document title tag The <a> anchor tag
List Tags Structural Tags
The <li> list item tag The <html> document root tag
The <ol> ordered list tag The <head> document head tag
The <ul> unordered list tag The <body> document body tag
Structural Text Tags
The <br /> forced line break tag
The <h1> - <h6> heading tags
The <p> paragraph tag

go to home page Homepage go to top of page Top

HTML4 Elements

The complete set of HTML elements also known as HTML tags from the latest HTML 4.01 Specification.

Click the links for more information on individual tags and their attributes.

<!--...-->

<!DOCTYPE>

<a>

<abbr>

<acronym>

<address>

<applet>

<area />

<b>

<base />

<basefont />

<bdo>

<big>

<blockquote>

<body>

<br />

<button>

<caption>

<center>

<cite>

<code>

<col />

<colgroup>

<dd>

<del>

<dfn>

<dir>

<div>

<dl>

<dt>

<em>

<fieldset>

<font>

<form>

<frame />

<frameset>

<h1> - <h6>

<head>

<hr />

<html>

<i>

<iframe>

<img />

<input />

<ins>

<isindex />

<kbd>

<label>

<legend>

<li>

<link />

<map>

<menu>

<meta />

<noframes>

<noscript>

<object>

<ol>

<optgroup>

<option>

<p>

<param />

<pre>

<q>

<s>

<samp>

<script>

<select>

<small>

<span>

<strike>

<strong>

<style>

<sub>

<sup>

<table>

<tbody>

<td>

<textarea>

<tfoot>

<th>

<thead>

<title>

<tr>

<tt>

<u>

<ul>

<var>