Scribd
Upload
62 views

HTML Structure

The document summarizes key HTML elements for structuring an HTML document, including the <DOCTYPE>, <html>, <head>, and <body> tags. It also covers semantic structural tags like <header>, <nav>, <main>, <footer>, and <section>. Finally, it discusses HTML tables, entities, and embedding multimedia content.

Uploaded by

Ivailo Ivanov
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
62 views

HTML Structure

The document summarizes key HTML elements for structuring an HTML document, including the <DOCTYPE>, <html>, <head>, and <body> tags. It also covers semantic structural tags like <header>, <nav>, <main>, <footer>, and <section>. Finally, it discusses HTML tables, entities, and embedding multimedia content.

Uploaded by

Ivailo Ivanov
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 44

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
 &copy; &reg; &trade; &lt; &gt;
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>&copy;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>&copy; 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">&#8470;</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>

&lt;some-Text-example&gt;

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:
&copy; &trade; &lt &gt…
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

You might also like