HTML Basics SummaryS2C Home « HTML Basics Summary

To conclude the HTML 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 HTML 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 existing content:

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 Tutorials - Basic HTML Lesson 9 - HTML Basics Summary
</title>
</head>
<body>
<h1>HTML Basics Summary</h1>
<h3 id="smallpie">What a lovely pie</h3>
<img src="http://server2client.com/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://server2client.com/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://server2client.com/html4basics/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.

save summary

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.

summary

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 HTML Basic Tutorials. Play around with the file and maybe improve on the headings I used to enhance 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.

HTML4 Reference

Formatting TagsImage Tags
The <em/> emphasise tag The <img /> image tag
The <strong/> strongly emphasise tag
Informational TagsLink Tags
The <title> document title tag The <a> anchor tag
List TagsStructural 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