6. How Pages Use Structure
Digital versions
often have similar
structure
7. Structure In Word Docs
Headings and
subheadings
reflect hierarchy
of information
8. Structure In Word Docs
Main heading
and important
information
appear first
9. Structure In Word Docs
The information
is expanded upon
and may use
subheadings
10. Html: Page Structure
<html>
</html>
<body>
</body>
<h1>This is the Main Heading</h1>
<h2>This is a Sub-Heading</h2>
<h2>Another Sub-Heading</h2>
<p>This text might be an introduction to
the rest of the page.</p>
<p>Here you can see another.</p>
<p>Many long articles have sub-headings
to help you follow the structure.</p>
11. A Closer Look At Tags
OPENING TAG CLOSING TAG
CHARACTER CHARACTER
LEFT-ANGLE BRACKET RIGHT-ANGLE BRACKET
FORWARD SLASH
13. Body, Head & Title
<html>
<head>
<title>This is the Title of...</title>
</head>
<body>
<h1>This is the Body of the Page</h1>
<p>Anything within the body of a web
page is displayed in the main
browser window.</p>
</body>
</html>
14. Body, Head & Title
<html>
<head>
<title>This is the Title of...</title>
</head>
<body>
<h1>This is the Body of the Page</h1>
<p>Anything within the body of a web
page is displayed in the main
browser window.</p>
</body>
</html>
16. Body, Head & Title
<html>
<head>
<title>This is the Title of...</title>
</head>
<body>
<h1>This is the Body of the Page</h1>
<p>Anything within the body of a web
page is displayed in the main
browser window.</p>
</body>
</html>
18. Summary
• HTML pages are text documents.
• HTML uses tags, which act like containers and tell you
about the information that lies between them.
• Tags are often referred to as elements.
• Tags usually come in pairs. Opening tags denote the start
of a piece of content; closing tags denote the end.
• Opening tags can carry attributes, which tell us more about
the content of that element.
• Attributes require a name and a value.
• To learn HTML you need to know what tags you can use,
what they do, and where they can go.
23. <h1>This is a Main Heading</h1>
<h2>This is a level 2 heading</h2>
<h3>This is a level 3 heading</h3>
<h4>This is a level 4 heading</h4>
<h5>This is a level 5 heading</h5>
<h6>This is a level 6 heading</h6>
Headings
24.
25. <p>A paragraph consists of one or more
sentences that form a self-contained unit
of discourse. The start of a paragraph is
indicated by a new line.</p>
<p>Text is easier to understand when it is
split up into units of text. For example, a
book may have chapters. Chapters can have
subheadings. Under each heading will be one
or more paragraphs.</p>
Paragraphs
26. <p>The Earth<br />gets one hundred tons
heavier every day<br />due to falling space
dust.</p>
Line breaks
27. <p>The Earth<br />gets one hundred tons
heavier every day<br />due to falling space
dust.</p>
Line breaks
30. 1. Chop potatoes into quarters
2. Simmer in salted water
3. Heat milk and butter
4. Drain potatoes and mash
5. Mix in the milk mixture
Three List Types
UNORDERED DEFINITIONORDERED
• 1kg King Edward potatoes
• 100ml milk
• 50g salted butter
• Freshly grated nutmeg
• Salt and pepper to taste
Sashimi
Sliced raw fish
Scale
A device used to
accurately measure weight
31. <ol>
<li>Chop potatoes into quarters</li>
<li>Simmer in salted water for 15-20
minutes until tender</li>
<li>Heat milk, butter and nutmeg</li>
<li>Drain potatoes and mash</li>
<li>Mix in the milk texture</li>
</ol>
Ordered lists (numbered)
32.
33. Unordered lists (bullets)
<ul>
<li>1kg King Edward potatoes</li>
<li>100ml milk</li>
<li>50g salted butter</li>
<li>Freshly grated nutmeg</li>
<li>Salt and pepper to taste</li>
</ul>
34.
35. <dl>
<dt>Sashimi</dt>
<dd>Sliced raw fish served
with condiments.</dd>
<dt>Scale</dt>
<dd>Device used to measure the weight
of ingredients.</dd>
<dd>A technique by which the scales are
removed from the skin of fish. <dd>
</dl>
Definition lists
67. Semantic Markup
WHAT IS IT?
Set of elements, for
example:
The <em> tag adds
emphasis
<blockquote>
contains a quote
WHY USE IT?
Provides extra
information about
your content
Do NOT use it to
alter presentation of
those elements
APPLICATION
Screen readers can
add emphasis to
words in <em>
Search engines can
find quotations in
<blockquote>
68. <p><strong>Beware</strong> pickpockets
operate in this area.</p>
<p>I <em>think</em> Ivy was the first.</p>
<p>I think <em>Ivy</em> was the first.</p>
<p>I think Ivy was the <em>first</em>.</p>
Strong & emphasis
69. <p><strong>Beware</strong> pickpockets
operate in this area.</p>
<p>I <em>think</em> Ivy was the first.</p>
<p>I think <em>Ivy</em> was the first.</p>
<p>I think Ivy was the <em>first</em>.</p>
Strong & emphasis
70. <p><strong>Beware</strong> pickpockets
operate in this area.</p>
<p>I <em>think</em> Ivy was the first.</p>
<p>I think <em>Ivy</em> was the first.</p>
<p>I think Ivy was the <em>first</em>.</p>
Strong & emphasis
71. <p><strong>Beware</strong> pickpockets
operate in this area.</p>
<p>I <em>think</em> Ivy was the first.</p>
<p>I think <em>Ivy</em> was the first.</p>
<p>I think Ivy was the <em>first</em>.</p>
Strong & emphasis
72. <p><strong>Beware</strong> pickpockets
operate in this area.</p>
<p>I <em>think</em> Ivy was the first.</p>
<p>I think <em>Ivy</em> was the first.</p>
<p>I think Ivy was the <em>first</em>.</p>
Strong & emphasis
78. Summary
• HTML elements are used to describe the structure of the
page (e.g. headings, subheadings, paragraphs).
• They also provide semantic information (e.g. where
emphasis is placed, definitions of acronyms, when text is a
quotation).
80. <!-- start of introduction -->
<h1>Current Exhibition</h1>
<h2>Olafur Eliasson</h2>
<!-- end of introduction -->
<!--
<a
href="mailto:info@example.org">Contact</a>
-->
Comments in HTML
82. <div id="header">
<img src="logo.gif" alt="Anish Kapoor" />
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="bio.html">Bio</a></li>
<li><a href="works.html">Works</a></li>
<li><a href="contact.html">Contact</a>
</li>
</ul>
</div><!-- #header -->
Grouping text &
elements in a block
83. <div id="header">
<img src="logo.gif" alt="Anish Kapoor" />
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="bio.html">Bio</a></li>
<li><a href="works.html">Works</a></li>
<li><a href="contact.html">Contact</a>
</li>
</ul>
</div><!-- #header -->
Grouping text &
elements in a block
84.
85. <p>Anish Kapoor won the Turner Prize in
1991 and exhibited at the
<span class="gallery">Tate Modern</span>
gallery in London in 2003.</p>
Grouping text &
elements inline
86. <p>Anish Kapoor won the Turner Prize in
1991 and exhibited at the
<span class="gallery">Tate Modern</span>
gallery in London in 2003.</p>
Grouping text &
elements inline
105. Summary
• The new HTML5 elements indicate the purpose of different
parts of a web page and help to describe its structure.
• The new elements provide clearer code (compared with
using multiple <div> elements).
• Older browsers that do not understand HTML5 elements
need to be told which elements are block-level elements.
• To make HTML5 elements work in Internet Explorer 8 (and
older versions of IE), extra JavaScript is needed, which is
available free from Google.
