PDF Version

HTML
What is HTML?
HTML stands for HyperText Mark-up Language. It is the computer language used to write
web pages and was first introduced by Tim Berners-Lee in 1990. Since then there have
been many versions of HTML. At the time of writing, HTML5 is the latest HTML standard.
HTML is a mark-up language rather than a programming language. However, it is a good
way to get pupils used to working in a formal, text-based computer language. As with other
text-based languages, working in HTML helps reinforce the importance of spelling,
punctuation and grammar: mistakes in the mark-up of the page usually become quite
apparent in the way the browser displays the page.
How HTML works
The web browser, for example Google Chrome, Mozilla Firefox or Internet Explorer, reads
the HTML and displays the web page to us as the creator intended.
HTML uses tags to structure the web page and tells the web browser how to display the
page, although the actual appearance (fonts, colours etc) of the page is controlled by style
sheets, which are not covered in this lesson.
Common tags are shown in the table below (download a helpsheet here).
Using HTML
In the report shown below, used in the Introduction to HTML with Mozilla Thimble activity, it
is easy to identify the structure of the report by the heading, sub heading and lists.
So when we type in a keyword such as ‘dog’ into a search engine, it consults the index and
returns a list of all the web pages on which that keyword appears. Typing in several
HTML
Page 1 of 4
keywords, e.g. ‘dog’ and ‘bowl’ would only return pages with both of these keywords, which
helps to narrow down the set of results.
Adding HTML tags to the text document allows us to tell the web browser that we want the
report to be structured and displayed in that way. The tags are not shown by the web
browser and the report is displayed as we have specified with the HTML tags.
You can ‘right click’ on the web page and select view source to view the HTML behind the
web page. Indeed, you can do this with any web page to view the HTML.
The screenshot and the code block below show the HTML code for this page.
HTML
Page 2 of 4
<!doctype html>
<html>
<head>
<title>Red Pandas Non-Chronological Report</title>
</head>
<body>
<h1>Red Pandas </h1>
<h2>Introduction</h2>
<p> The red pandas, or Ailurus fulgens, is also known as the Firefox or Lesser panda, as it
is related more closely to the raccoon than a giant panda. These special creatures are most
active at night and spend much of the day curled up asleep with their tail wrapped around
their head. </p>
<h2>Habitat</h2>
<p> Red pandas live in the mountain forests of Nepal, Burma and central China where they
spend most of their lives in the trees.</p>
<h2>Food</h2>
<p> Red pandas eat mostly bamboo, like giant pandas. However they also enjoy foraging for
other foods such as insects, fruit and eggs. During the winter months, red pandas can spend
as long as 13 hours per day looking for and eating bamboo.</p>
<h2>Fascinating Facts</h2>
<ul>
<li>The head and body length of red pandas averages 56 to 63 cm and their tails about 37
to 47 cm. </li>
<li>Red pandas are an endangered species as their forest habitats are being destroyed by
logging and agriculture</li>
<li>Like giant pandas, red pandas have an extended wrist bone that functions almost like a
thumb and greatly aids their grip.</li>
<li> They are shy and solitary except when mating.</li>
</ul>
<h2>Conclusion</h2>
<p>Red pandas are fascinating animals and they deserve our protection to ensure they have
a place on our planet in the future. You can find out more about Red Pandas
<a href=”http://animals.nationalgeographic.com/animals/mammals/redpanda/“>here.</a></p>
<img src=”http://upload.wikimedia.org/wikipedia/commons/5/5f/Red_Panda__Nashville_Zoo.jpg“>
</body>
</html>
Document structure


<!DOCTYPE> is the first element in an HTML document. It tells the web browser
what version of HTML the page is written in and is an instruction to the web browser
rather than an HTML tag. For this activity, <!DOCTYPE HTML> will be the instruction
used.
The first tag in an HTML document is the <html> tag which tells the web browser that
this is an HTML document (as opposed to the <!DOCTYPE> instruction which tells
the browser what version of HTML is used).
HTML
Page 3 of 4




The <head> tag contains the <title> tag and any other elements that the writer wishes
to be included in the head of the document, for example meta tags which provide
information about the document to search engines.
<title> tells the web browser the title of the document. This is important as the title is
shown in search engine results, displays a title in the web browser toolbar and gives
a title to the page when it is added to favourites.
<body> is where the contents of an HTML page are stored and where text, images,
lists, hyperlinks etc are added. It is here where the pupils will be adding their HTML
tags and content for this activity.
You will notice that the <body> tags are nested inside the <html> tags, so the closing
</body> tag comes before the </html> tag at the end of the document.
Introduction to HTML Lesson 1 – Mozilla X-Ray
Goggles
HTML
Page 4 of 4

Download Report

PDF Version

Paperzz.com

Your Paperzz