Topic02a HTML

Markup Language
Topic 2 – introduction to HTML

- What is HTML and where did it come from?
- HTML Syntax
- HTML Structure
- Element types and HTML5
What is HTML?
Where did it come from?
2
What Is HTML and Where Did It Come from?
HTML
• A Web page is a text file written in HTML (Hypertext Markup Language)

• A markup language describes the content and structure of a document
by identifying, or tagging, different document elements
• HTML has been through many versions and branches, the details of
which might matter if you ever see old HTML code.
• Versions:
• HTML
• HTML 2.0
• HTML 3.0
• HTML 4.0 (xHTML 1.0)
• HTML 5

HTML
• In the early years of HTML, browser developers were free to define and
modify the language as no rules or syntax were defined
• The World Wide Web Consortium, or the W3C, created a set of
recommendations (de-facto standards) for all browser manufacturers to
follow
• The W3C has no enforcement power
• The recommendations of the W3C are usually followed since a uniform
approach to Web page creation is beneficial to everyone
XHTML and Validation
Validator provides
feedback on markup’s
validity according to
W3C specification
HTML Syntax
6
HTML Syntax
Elements and Attributes
• HTML documents are composed of textual content and HTML

elements
• HTML element encompasses
• the element name within angle brackets (i.e., the tag) and
• HTML elements can also contain attributes.
• the content within the tag.
Opening tag Closing tag
<a href="http://www.centralpark.com">Central Park</a>
Element name Attribute Content

(may be text or other HTML elements)
Example empty element <img src="file.gif" alt="something" />

Element name Trailing slash (optional)
7
HTML Syntax
Elements and Attributes
An empty element does not contain any text content; instead, it is an

instruction to the browser to do something.
• In XHTML, empty elements had to be terminated by a trailing slash.
• In HTML5, the trailing slash in empty elements is optional.
Opening tag Closing tag
Element name Attribute Content

(may be text or other HTML elements)
Example empty element <img src="file.gif" alt="something" />

Element name Trailing slash (optional)
8
HTML Syntax
Nesting HTML Elements
Correct nesting
Correct nesting
<h1>Share Your <strong>Travels</strong></h1>
<h1>Share Your <strong>Travels</strong></h1>
Incorrect nesting
Incorrect nesting
<h1>Share Your <strong>Travels</h1></strong>
<h1>Share Your <strong>Travels</h1></strong>
HTML Syntax
Nesting HTML Elements
Ancestor
<body>
Parent
<p>
Child
This is some <strong>text</strong>
</p>
<h1>Title goes here</h1>
Sibling
<div>
Descendants
<p>
This is <span>important</span>
</p>
</div>
</body>
<body>
Descendants Children
<p> <h1> <div> 10
Siblings
<strong> <p>
Ancestors
This is some <strong>text</strong>
</p>
<h1>Title goes here</h1>
Sibling
<div>
Descendants
HTML Syntax <p>
Nesting HTML Elements This is <span>important</span>
</p>
</div>
</body>
<body>
Descendants Children
<p> <h1> <div>
Siblings
<strong> <p>
Ancestors
<span>
11
Semantic Markup
Focus on the structure of the document, not the visual
Advantages:
12
Structure of HTML Docs
13
Structure
A simple example
of HTML Documents
14
Structure
DOCTYPE
of HTML Documents
DOCTYPE Short for Document Type Definition tells the browser what
type of document it is about to process
<!DOCTYPE html>
A slightly more complex document
1 <!DOCTYPE html>
<html lang="en">
2 <head>
<meta charset="utf-8" /> 5
3 <title>Share Your Travels -- New York - Central Park</title>
<link rel="stylesheet" href="css/main.css" /> 6
<script src="js/html5shiv.js"></script> 7
</head>
<body>
<h1>Main heading goes here</h1>
4 ...
</body>
</html>
15
Structure
Head and Body
of HTML Documents
HTML5 does not require the use of the <html> , <head> , and <body>
elements (but most developers continue to use them).
• <html> contains all the other HTML elements in the document (Item 2
in previous slide)
• <head> contains descriptive elements about the document, such
(title, style sheets, JavaScript files etc.) (Item 3)
• <body> contains content to be displayed by the browser (Item 4)
16
Structure of HTML Documents
Some more common elements
• The <meta> element (Item 5) declares that the character encoding

for the document is UTF-8.
• Item 6 specifies an external CSS style sheet file with <link> that is
used with this document.
• Item 7 references an external JavaScript file using <script>
17
HTML Elements
Quick Tour
18
HTML Elements
Kinds of Content
• Each element in HTML5 falls into one or more of the following

categories:
• Metadata content
• Flow content
• Sectioning content
• Heading content
• Phrasing content
• Embedded content
• Interactive content
19
Quick Tour of HTML Elements

A document to walk through
<body>
<h1>Share Your Travels</h1>
1
<h2>New York - Central Park</h2>
2 <p>Photo by Randy Connolly</p>
<p>This photo of Conservatory Pond in
<a href="http://www.centralpark.com/">Central Park</a> 3
New York City was taken on October 22, 2016 with a
<strong>Canon EOS 30D</strong> camera.
</p> 4
5 <img src="images/central-park.jpg" alt="Central Park" />
<h3>Reviews</h3>
6 <div> 7
<p>By Ricardo on <time>2016-05-23</time></p>
<p>Easy on the HDR buddy.</p>
</div>
8 <hr>
<div>
<p>By Susan on <time>2016-11-18</time></p>
<p>I love Central Park.</p>
</div>
9
<p><small>Copyright © 2017 Share Your Travels</small></p>

</body> 10
20
A document to walk through
21

Headings
• HTML provides six levels of heading

(h1 - h6)
• Headings are also used by the browser to create a document
outline for the page.
<body>
<h1>Share Your Travels</h1>
1
<a href="http://www.centralpark.com/">Central Park</a>
<strong>Canon EOS 30D</strong> camera. 22
</p> 4
Paragraphs and Divisions
• <p> tag is a container for text and other HTML elements

• <div> also a <body>
container element and is used to create a logical
grouping <h1>Share Your Travels</h1>
1 of content
<a href="http://www.centralpark.com/">Central Park</a> 3
<strong>Canon EOS 30D</strong> camera.
</p> 4
<h3>Reviews</h3>
6 <div> 7
<p>By Ricardo on <time>2016-05-23</time></p>
<p>Easy on the HDR buddy.</p>
</div>
23
8 <hr>
<div>
<p>By Susan on <time>2016-11-18</time></p>
<p>I love Central Park.</p>
</div>
9
Links <p><small>Copyright © 2017 Share Your Travels</small></p>
</body> 10
• Links are an essential feature of all web pages

• Links use the <a> element (the “a” stands for anchor).
Destination Label (text)
<a href="index.html"><img src="logo.gif" alt="logo" /></a>
Label (image)
24
Links
Link to external site
Link to resource on external site
<a href="http://www.centralpark.com/logo.gif">Central Park</a>
Link to another page on same site as this page
<a href="index.html">Home</a>
Link to another place on the same page
<a href="#top">Go to Top of Document</a>

... Link to external site
<a name="top">
Defines anchor for a link to another place on same page
Link to resource on external site
Link to specific place on another page
<a href="http://www.centralpark.com/logo.gif">Central Park</a>

<a href="productX.html#reviews">Reviews for product X</a> 25
Link to another page on same site as this page
Link to email
<a href="index.html">Home</a>
<a href="mailto:person@somewhere.com">Someone</a>
Link to another place on the same page
Link to JavaScript function
<a href="#top">Go to Top of Document</a>
...
<a href="javascript:OpenAnnoyingPopup();">
Links See This</a>
<a (continued)
name="top">
Link to telephone (automatically dials the number
Defines
whenanchor for aon
user clicks link to another
it using place on browser)
a smartphone same page
Link to specific place on another page

<a href="tel:+18009220579"> Call toll free (800) 922-0579</a>
<a href="productX.html#reviews">Reviews for product X</a>
Link to email
<a href="mailto:person@somewhere.com">Someone</a>
Link to JavaScript function
<a href="javascript:OpenAnnoyingPopup();">See This</a>

Link to telephone (automatically dials the number
when user clicks on it using a smartphone browser)
<a href="tel:+18009220579">Call toll free (800) 922-0579</a>
26
Relative Link Type Example
URL Relative Referencing
Same directory <a href="example.html">
Child Directory <a href="images/logo.gif">
Grandchild/Descenda <a href="css/images/background.gif">

nt Directory
Parent/Ancestor <a href="../about.html">
Directory <a href="../../about.html”>
Sibling Directory <a href="../images/about.html">
Root Reference <a href="/images/background.gif">
27

Inline Text Elements … they do not disrupt the flow
• <a>
• <abbr>
• <br>
• <cite>
• <code>
• <em>
• <mark>
• <small>
• <span>
• <strong>
• <time>
28
Images
Specifies the URL of the image to display Text in title attribute will be displayed in a pop-up
(note: uses standard relative referencing). tool tip when user moves mouse over image.
<img src="images/central-park.jpg" alt="Central Park" title="Central Park" width="80" height="40" />
Text in alt attribute provides a brief Specifies the width and height of
description of image’s content for users who image in pixels
are unable to see it.
29

Character Entities
These are special characters for symbols for which

• there is either no easy way to type them via a keyboard
• or which have a reserved meaning in HTML (like“<“)
Entity Description
Nonbreakable space
< <
> >
© ©
™ ™
30
Lists
• Unordered Lists <ul>

• Ordered Lists <ol>
• Description Lists <dl>
31

Lists
32
HTML
Semantic Structure Elements
33
HTML5 Semantic Structure Elements

<body> <body>
<div id="header"> <header>
... 1 ...
1
<div id="top-navigation"> <nav>
<header> ... ...
</div> </nav> 2
2 <nav>
</div> </header>
3 <div id="main"> <main>
<main> <div id="left-navigation"> <nav>
... ...
3
</div> </nav>
<h1>Page Title</h1> <h1>Page Title</h1>
<div class="content"> <section>
<h2>Stories</h2> <h2>Stories</h2>
4
<div class="story"> 4 <article>
<section> ... ... 5
5 <article>
</div> </article>
<div class="story"> <article>
... <figure>
<div class="story-photo"> <img ... />
6 6
<img ... class="blog-photo"/> <figcaption>...
<figcaption>...
<p class="photo-caption">... <figure> </figure>
</div>
...
7 <figcaption> </article> 7
</div>
<aside>
<div class="related-stuff-on-right">
... 8
... 8 <aside>
</aside>
</div>
</section>
</div>
<section>
<div class="content">
...
...
</section>
</div> </main>
</div> <footer>
<div id="footer"> 9
9 ...
... </footer>
<footer> </div> </body>
</body>
34
Header and Footer
• A header element is intended <header>

to usually contain the section’s <img src="logo.gif" alt="logo" />
heading (an h1– h6 element), <h1>Fundamentals of Web
but this is not required. Development</h1>
...
</header>
• The header element can also <article>
be used to wrap a section’s <header>
table of contents, a search <h2>HTML5 Semantic Structure
form, or any relevant logos. Elements</h2>
<p> By <em>Randy Connolly</em></p>
</header>
...
</article>
35

Navigation
<header>
<img src="logo.gif" alt="logo" />
<h1>Fundamentals of Web Development</h1>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="browse.html">Browse</a></li>
</ul>
</nav>
</header>
36
Main
• <main> is meant to contain the main unique content of the

document.
• <main> provides a semantic replacement for markup such as <div
id="main"> or <div id="main-content">
37

Articles and Sections
<section> is a much broader element, while the

<article> element is to be used for blocks of content that could
potentially be read or consumed independently of the other content on
the page
<figure> and <figcaption> elements creates standalone content aside
from the flow.
38
Aside
The <aside> element can be used for sidebars, pull quotes, groups of
advertising images, or any other grouping of nonessential elements
<details> and <summary> elements display content blocks with “more

info” or “less info”.
39
Tables
40
Introducing Tables
Basic Table Structure
41
Introducing Tables
Basic Table Structure
<table>
<tr> The Death of Marat Jacques-Louis David 1793 162cm 128cm

<td> <td> <td> <td> <td>
<tr> Burial at Ornans Gustave Courbet 1849 314cm 663cm

<table>
<tr>
<td>The Death of Marat</td>
<td>Jacques-Louis David</td>
<td>1793</td>
<td>162cm</td>
<td>128cm</td>
</tr>
<tr>
<td>Burial at Ornans</td>
<td>Gustave Courbet</td>
<td>1849</td>
<td>314cm</td>
<td>663cm</td>
</tr>
</table>
42
Introducing Tables
Adding Headings
<table>
<tr> Title Artist Year Width Height
<th> <th> <th> <th> <th>


<table>
<tr>
<th>Title</th>
<th>Artist</th>
<th>Year</th>
<th>Width</th>
<th>Height</th>
</tr>
<tr>
<td>1793</td>
<td>162cm</td>
<td>128cm</td>
</tr>
<tr>
<td>Burial at Ornans</td>
<td>Gustave Courbet</td>
<td>1849</td>
<td>314cm</td>
<td>663cm</td>
</tr>
</table>
43
Introducing Tables
Spanning Columns
<table>
<tr> Title Artist Year Size (width x height)
<th> <th> <th> <th colspan=2>


<table>
<tr>
Notice that this row <th>Title</th>
<th>Artist</th>
now only has four <th>Year</th>
cell elements. <th colspan="2">Size (width x height)</th>
</tr>
<tr>
<td>1793</td>
<td>162cm</td>
<td>128cm</td>
</tr>
...
</table>
44
Introducing Tables
Spanning Rows
<table>
Artist Title Year <tr>
<th> <th> <th>
The Death of Marat 1793 <tr>
<td> <td>
Jacques-Louis David The Intervention of the 1799
Sabine Women <tr>
<td> <td>
1800
Napoleon Crossing the Alps <tr>
<td rowspan=3> <td> <td>
<table>
<tr>
<th>Title</th>
<th>Artist</th>
<th>Year</th>
</tr>
<tr>
<td rowspan="3">Jacques-Louis David</td>
<td>1793</td>
</tr>
<tr>
Notice that these <td>The Intervention of the Sabine Women</td>
<td>1799</td>
two rows now only </tr>
have two cell <tr>
elements. <td>Napoleon Crossing the Alps</td>
<td>1800</td>
</tr>
</table>
45
Introducing Tables
Additional Table Elements
A title for the

table is good for <table>
accessibility. <caption>19th Century French Paintings</caption>
<col class="artistName" />
<colgroup id="paintingColumns">
These describe our <col />
columns, and can be <col />
used to aid in styling. </colgroup>
<thead>
<tr>
Table header could <th>Title</th>
potentially also <th>Artist</th>
include other <tr> <th>Year</th>
elements. </tr>
</thead>
<tfoot>
Yes, the table footer <tr>
comes before the <td colspan="2">Total Number of Paintings</td>
body. <td>2</td>
</tr>
</tfoot>
<tbody>
<tr>
Potentially, with <td>Jacques-Louis David</td>
styling the browser <td>1793</td>
can scroll this </tr>
information, while <tr>
keeping the header <td>Burial at Ornans</td>
and footer ﬁxed in <td>Gustave Courbet</td>
place. <td>1849</td>
</tr>
</tbody>
</table>
46

Topic02a HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Topic02a HTML

Uploaded by

Copyright:

Available Formats

Markup Language

Topic 2 – introduction to HTML

• A Web page is a text file written in HTML (Hypertext Markup Language)

What Is HTML and Where Did It Come from?

• HTML documents are composed of textual content and HTML

Opening tag Closing tag

<a href="http://www.centralpark.com">Central Park</a>

Element name Attribute Content

Example empty element <img src="file.gif" alt="something" />

An empty element does not contain any text content; instead, it is an

<a href="http://www.centralpark.com">Central Park</a>

Element name Attribute Content

Example empty element <img src="file.gif" alt="something" />

Focus on the structure of the document, not the visual

A slightly more complex document

• The <meta> element (Item 5) declares that the character encoding

• Each element in HTML5 falls into one or more of the following

Quick Tour of HTML Elements

<p><small>Copyright &copy; 2017 Share Your Travels</small></p>

Quick Tour of HTML Elements

• HTML provides six levels of heading

• <p> tag is a container for text and other HTML elements

• Links are an essential feature of all web pages

<a href="http://www.centralpark.com">Central Park</a>

Destination Label (text)

<a href="index.html"><img src="logo.gif" alt="logo" /></a>

Link to external site

<a href="http://www.centralpark.com">Central Park</a>

Link to resource on external site

<a href="http://www.centralpark.com/logo.gif">Central Park</a>

Link to another page on same site as this page

Link to another place on the same page

<a href="#top">Go to Top of Document</a>

<a href="http://www.centralpark.com/logo.gif">Central Park</a>

Link to specific place on another page

<a href="productX.html#reviews">Reviews for product X</a>

Link to JavaScript function

<a href="javascript:OpenAnnoyingPopup();">See This</a>

<a href="tel:+18009220579">Call toll free (800) 922-0579</a>

Child Directory <a href="images/logo.gif">

Grandchild/Descenda <a href="css/images/background.gif">

Root Reference <a href="/images/background.gif">

Quick Tour of HTML Elements

<img src="images/central-park.jpg" alt="Central Park" title="Central Park" width="80" height="40" />

Quick Tour of HTML Elements

These are special characters for symbols for which

• Unordered Lists <ul>

Quick Tour of HTML Elements

HTML5 Semantic Structure Elements

• A header element is intended <header>

HTML5 Semantic Structure Elements

• <main> is meant to contain the main unique content of the

HTML5 Semantic Structure Elements

<section> is a much broader element, while the

<details> and <summary> elements display content blocks with “more

<tr> The Death of Marat Jacques-Louis David 1793 162cm 128cm

<tr> Burial at Ornans Gustave Courbet 1849 314cm 663cm

<tr> The Death of Marat Jacques-Louis David 1793 162cm 128cm

<tr> Burial at Ornans Gustave Courbet 1849 314cm 663cm

<tr> The Death of Marat Jacques-Louis David 1793 162cm 128cm

<tr> Burial at Ornans Gustave Courbet 1849 314cm 663cm

A title for the

You might also like

<p><small>Copyright © 2017 Share Your Travels</small></p>