HTML Document Structure
Doctype, Head, Body, Semanti c
Tags, Tables, HTML Enti ti es
HTM
Stru L
ctu r
e
SoftUni Team
Technical Trainers
Software University
http://softuni.bg
Table of Contents
1. HTML Document Structure:
<DOCTYPE>, <html>, <head>, <body>
2. Semantic Structural Tags
<nav>, <header>, <main>, <footer>
3. HTML Tables
<table>, <thead>, <tbody>, <tr>, <td>
4. HTML Entities
© ® ™ < >
2
Have a Question?
sli.do
#html-softuni
3
HTML Document Structure
HTML Document, Doctype, Head, Body
HTML Document Structure
Essential elements for each HTML document:
<!DOCTYPE>, <html>, <head>, <body>
The <html> element
All the content of the Web page is inside the <html> tag
<!DOCTYPE html>
<html>
…
</html>
5
Head Element
The <head> contains markup not visible to the user
But helps the browser to render correctly the HTML document
What is in the <head>? Specify the character encoding
Metadata definitions <meta charset="UTF-8">
<link rel="stylesheet"
Styles declarations type="text/css" href="site.css">
Scripts declarations <script src="main.js"></script>
6
Head Element: Title + Favicon
The <title> tag – HTML document title HTML title
<head>
<title>Home – …</title>
</head>
favicon – a site icon Favicon
<link href="/favicon.ico"
rel="shortcut icon" type="image/x-icon"/>
Favicon generator: http://www.favicon-generator.org
7
Semantic Structural Tags
The Structure of a Web Page
A typical layout structure of a Web page
The "HTML 4 and Old" Way
Using <div>s with IDs (the IDs are needed for styling)
<html>
<head> … </head>
<body>
<div id="navigation">…</div>
<div id="header">…</div>
<div id="sidebar">…</div>
<div id="content">…</div>
<div id="footer">…</div>
</body>
</html>
10
The HTML 5 Way
HTML 5 uses semantic tags for the document structure
<body>
<nav>…</nav>
<header>…</header>
<main>
<aside>…</aside>
<section>…</section>
<article>…</article>
</main>
<footer>…</footer>
</body>
11
HTML5 Semantic Tags
<nav> <figure> + <figcaption>
<header> <details> + <summary>
<main>
<time>
<section>
<address>
<article>
<aside> <dialog>
<footer> <audio> / <video>
12
HTML5 Semantic Tags: Nav
<nav> – defines a set of navigation links
<nav id="topmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Courses</a></li>
</ul>
</nav>
13
Problem: Navigation Bar
Create a HTML page with navigation bar like the shown below
Hints:
Modify the HTML
code from the
previous slide
Write some CSS
14
Solution: Navigation Bar (CSS)
body { nav#topmenu li {
margin: 0; font-size: 24px;
padding: 0; line-height: 40px;
background: #ccc; height: 40px;
} display: inline-block;
nav#topmenu ul { padding: 20px;
list-style: none; }
background-color: #444; nav#topmenu a {
text-align: center; text-decoration: none;
padding: 0; color: #fff;
margin: 0; }
}
Check your solution here: https://judge.softuni.bg/Contests/395 15
HTML5 Semantic Tags: Header
<header> – holds a document or section header
<header> holds title +
posted article date
...
<header>
<h1>Google buys Nest</h1>
<p>Posted at <time datetime="2014-01-
13T11:34">11:34AM, 13th January 2014</time></p>
</header>
<p>The acquisition brings …</p>
16
HTML5 Semantic Tags: Main
<body>
<header>…</header>
Holds the main
<nav>…</nav>
page content
<main>
<h1>Guitars</h1>
<p>The greatest guitars …</p>
<article>
<h2>Gibson SG</h2>
<p>…</p>
</article>
</main>
Use only one <main>
<footer>…</footer>
tag in the document
</body>
17
Semantic Tags: Section
<section> – a group of related content
Use <h1> … <h6> to define
the topic for the section
<section>
<h2>Heading</h2>
<img src="bird.jpg" />
</section>
18
Problem: Page Content
Create a HTML
<section>
Holding a few <header>
<article>
elements with
<header> <article>
Like shown on the
screenshot <article>
19
Solution: Page Content (HTML)
<section>
<article>
<header>
<h1>Just another day</h1>
<p>Written by…</p>
</header>
<p>This is my second blog…</p>
</article>
<article>
<!-- TODO: put the next article here -->
</article>
</section>
Check your solution here: https://judge.softuni.bg/Contests/395 20
Solution: Page Content (CSS)
body { h1 {
margin: 0; font-size: 28px;
padding: 0; }
background: #ccc; header > p {
} font-style: italic;
}
section { article > p {
margin-left: 20px; font-size: 24px;
} }
21
Semantic Tags: Aside
<aside> – defines a sidebar (left / right navigation)
Main site
... content Sidebar:
<aside> <aside>
<h2>Blogroll</h2>
<ul>
<li><a href="#">My Friend</a></li>
<li><a href="#">My Other Friend</a></li>
<li><a href="#">My Best Friend</a></li>
</ul>
</aside>
22
Semantic Tags: Footer
<footer> – a document / section footer
Document author + contact
info + copyright info
<footer>
<p>Posted by: Hege Refsnes</p>
<p><a href="
[email protected]">Contact...</a></p>
<p>©copyright</p>
</footer>
23
Problem: Simple Website
24
Solution: Simple Website (HTML + CSS)
<nav> /* TODO: use the CSS from
<ul> the previous problem */
<li><a href="#">Home</a></li>
<!-- TODO: add the missing links --> footer {
</ul> background: #444;
</nav> color: #fff;
<section> text-align: center;
<article><!-- TODO: use the code }
from prevous problem --></article>
</section> Check your solution here:
<footer> https://judge.softuni.bg/Contests/395
<p>© Copyright 2009 …</p>
</footer>
25
Semantic Tags: Figure + Figcaption
<figure> – element to mark up a photo in a document:
<p>The Pulpit Rock …</p>
Without <figcaption>
<figure>
<img src="img_pulpit.jpg" alt="The …">
</figure>
<figcaption> – a caption for a figure element
<p>The Pulpit Rock …</p>
With <figcaption>
<figure>
<img src="img_pulpit.jpg" alt="The …">
<figcaption>Fig.1 - A view …</figcaption>
</figure>
26
Semantic Tags: Details + Summary
<details> – tag specifies additional details
<details>
<p>More info about the details.</p> expand
</details>
<summary> – a visible heading for the <details>
<details>
<summary>Some details</summary>
expand
<p>More info about the details.</p>
</details>
27
Semantic Tags: Time + Address
<time> – a human-readable time
<p>
We open at <time>10:00</time> every morning.
</p>
<address> – contact information for site author / owner
<address>
Street Address: Karlstraße 120<br/>
Country Name: Germany<br/>
Tel: +49 1234 5678<br/>
Fax: +49 1234 5679
</address>
28
Multimedia Context
Embedding Audio and Video
Embedding Audio
The <audio> element inserts
audio player in the Web page
<audio controls autoplay>
<source src="horse.mp3" type="audio/mpeg">
</audio>
Audio formats supported:
MP3, OGG, WAV
Attributes: controls, autoplay, loop, preload
30
Embedding Video
The <video> element inserts video player in your site
<video controls="controls">
<source src="shuttle.mp4" type="video/mp4">
<source src="shuttle.ogv" type="video/ogg">
Your browser does not support the HTML5 video.
</video>
Video formats: MP4, OGG, WebM
Attributes: width, height, poster,
controls, autoplay, loop
31
HTML Tables
Tags For Building Tables
Simple HTML Tables
Simple HTML tags for creating tables: <table>, <tr>, <td>
<table>
HTML table defined
<tr>
by the <table> tag
<td>Cell 1.1</td>
<td>Cell 1.2</td>
Rows defined
</tr>
by the <tr> tag
<tr>
<td>Cell 2.1</td>
<td>Cell 2.2</td> Table data
</tr> (cells) defined
</table> by the <td> tag
33
Complete HTML Tables
Complete tables use best practices in HTML 5
There are three specific parts <table>
in every table: <thead>…</thead>
<tbody>
Table header <tr>
Table body <td>Mark</td>
<td>5,75</td>
Table footer </tr>
</tbody>
Each table part holds rows (<tr>)
<tfoot>…</tfoot>
Rows hold cells (<td> / <th>) </table>
34
Complete HTML Tables <table>
<thead>
Table header <tr>
<th>Name</th>
<thead> group header content <th>Mark</th>
in an HTML table </tr>
</thead>
Holds <tr> with <th> header cells
<!-- TODO: <tbody> -->
Table body: <tr> with <td> cells <tfoot>
<tr>
Table footer <td>Average</td>
<td>4.12</td>
<tfoot> group footer content </tr>
in an HTML table </tfoot>
</table>
Holds <tr> with <td> cells 35
Complete HTML Tables
Merge rows and columns
<td colspan="2">Sum: $180</td>
Columns Rows
colspan="1" colspan="1" rowspan="2" rowspan="1"
Cell [1,1] Cell [1,2] Cell [1,2]
Cell [1,1]
Cell [2,2]
Cell [2,1]
colspan="2" rowspan="1"
36
Problem: Exam Results
Create a HTML table like the screenshot below: <thead>
<tr>
<th>…</th>
</tr>
</thead>
<tbody>
<tr>…</tr> <tfoot>
</tbody> <tr>…</tr>
</tfoot>
37
Solution: Exam Results (HTML + CSS)
<table>
<thead>
<tr><th colspan="4">Web Fundamentals</th></tr>
</thead>
<tbody>
<tr>
<td class="bold">№</td>
<!-- TODO: put the rest <td> here … -->
</tr>
<!-- TODO:put the rest <tr> with <td> here … -->
</tbody>
38
Solution: Exam Results (More HTML + CSS)
<tfoot>
<tr><td colspan="4" class="result"><!--TODO:--></td></tr>
</tfoot>
</table>
table, td, tr, th { .bold {
border: 1px solid #000000; font-weight: bold;
} text-align: center;
}
.result {
td { width: 400px;
padding-left: 5px; text-align: right;
} padding-right: 5px; }
Check your solution here: https://judge.softuni.bg/Contests/395 39
HTML Entities
Character entities show special characters in HTML
Incorrect html-tag
<some-Text-example>
Will display <some-
Text-example>
<some-Text-example>
40
Summary
HTML document structure:
<!DOCTYPE>,<html>,<head>,<body>
HTML semantic tags:
<nav>,<header>,<main>,<footer>…
HTML table tags:
<table>,<thead>,<tbody>,<tfoot>…
HTML entities:
© ™ < >…
42
HTML Document Structure
? ?
sti on s ?
Qu e
?
?
?
?
?
https://softuni.bg/courses/
License
This course (slides, examples, demos, videos, homework, etc.)
is licensed under the "Creative Commons
Attribution-NonCommercial-ShareAlike 4.0 International" license
44
Free Trainings @ Software University
Software University – High-Quality Education,
Profession and Job for Software Developers
softuni.bg
Software University Foundation
softuni.org
Software University @ Facebook
facebook.com/SoftwareUniversity
Software University Forums
forum.softuni.bg
