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="https://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="https://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="https://server2client.com/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.
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.
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.
We continue our expedition through the HTML jungle with the HTML Intermediate Tutorials.
|Formatting Tags||Image Tags|
|The <em/> emphasise tag||The <img /> image tag|
|The <strong/> strongly emphasise 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|