http://a3nm.net
http://pierre.senellart.com
Fabian M. Suchanek
With some material from Antoine Amarilli
HTML
and Pierre Senellart
Introduction
Page Structure
HTML tags
Forms
Multimedia
Charsets
Overview
2
blah
blah
...
2. sends file
3. displays file
Displaying Web pages
Client
Server
1. requests file
3
Disneyland declares its independence.
[...] M. Mouse: "We have had enough of the
health reform and stuff!"
What the
server sends
What the
client displays
4
Displaying Web pages
?
<h1>
Disneyland declares its independence.
</h1>
[...] M. Mouse:
<em>
We have had enough of the
health reform and stuff!
</em>
What the
server sends
What the
client displays
5
HTML markup
<h1>
Disneyland declares its independence.
</h1>
HTML
(the Hypertext Markup Language) is a system of
tags that structure a text document.
• basically a text document
annotated
with tags
of the form
<tag> ... </tag>
• standardized by the W3C (World Wide Web Consortium),
which unites industrial partners (Microsoft, Google, Apple,..)
and academic partners (INRIA, MIT, ...)
• describes the
structure
of the document,
not its layout. The layout is described by another language (CSS).
(de facto: HTML tags determine a great part of the layout)
• describes the static part of the Web page, not dynamic parts.
6
HTML
important
• First attempt at a structured markup language:
SGML
•
HTML
inspired from SGML, versions 1 to 4
• attempt to define a more general language:
XML
•
XHTML
: HTML that conforms with XML,
i.e. a stand-alone tag has to "self-close":
<br />
•
HTML 5
: Current standard, exists in an XML-compliant version
and a “normal” version
=>
HTML exists in numerous different versions!
=>
In general, browsers are very forgiving
and will try to display anything.
Example
<h1>
Disneyland declares its independence.
</h1>
7
History of HTML
• You cannot use arbitrary tags, but only the ones defined in HTML
• Most tags
open
(as in
<h1>
) and
close
(as in
</h1>
)
• Tags can be nested, as in this example:
<h1>
Disneyland declares its
<em>
independence
</em>
</h1>
• some tags are stand alone tags, as
<br>
These do not open or close, but stand on their own
• whitespace does not matter
• capitalization in tags does not matter:
<h1>
=
<H1>
<h1>
Disneyland declares its independence.
</h1>
8
Basic principles of HTML
This is
<em>
emphasized
</em>
He used
<strong>
strong
language
</strong>
<strong>
<em>
This is
</string>
a mess
</em>
White space really
does not matter...
Emphasizing
(usually rendered in italic)
Importance
(usually rendered in bold)
Non-conforming code
(usually rendered
unpredictably)
• In theory, HTML describes the
structure
of the document
and leaves the layout to the client.
• De facto,
<em>
is used as a synonym for italic
9
Examples of HTML
In reality, people write completely non-conforming HTML code
<h1>Disneyland
<em>Legoland...</h1></em>
• The Web browser company
does not want to bother the
Web user with error messages
• The browser has to be
compatible with all historic
versions of HTML
=>
Web browsers are
extremely fault tolerant
Example
10
Theory and Reality
• Out of
idealism
• Non-standard HTML might
appear differently
in
different browsers, or different future versions
of the browser
• Non-standard HTML is possibly rendered badly in
non-vanilla devices
, such as mobile phones,
audio readers, etc.
• Non-standard HTML code is more
difficult to maintain
,
debug, and re-use
The W3C offers an
HTML validator
http://validator.w3.org/
11
Why write good code?
important
I hear and I forget.
I see and I remember.
I do and I understand.
Confucius
12
>
Blackboard, baby!
<h1>
Disneyland declares Independence.
</h1>
M. Mouse marries Michele Obama.
14
Try it out
Type something like this in a text editor
Save it as
test.html
Open it in a browser
Change seats to distribute laptops (and previous expertise)
Introduction
Page Structure
HTML tags
Forms
Multimedia
Charsets
Overview
15
An HTML document has a certain standard structure:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>This appears in the window title</title>
</head>
<body>
<h1>Disneyland invaded by US</h1>
...
</body>
</html>
“Doctype
declaration”
says we're
doing HTML,
+ version
“Head”
contains
general info
“Body”
contains
content
See example
16
Structure of an HTML document
Modify your document in this way!
An HTML document has a tree structure — the
DOM tree
.
<!DOCTYPE html>
<html>
<head>
<title>This appears...</title>
</head>
<body>
<h1>Disneyland...</h1>
<h1>Legoland...</h1>
</body>
</html>
Tree structure is shown by indentation
17
DOM Tree
html
head
body
title
h1
h1
This appears...
Disneyland
Legoland
important
<h1>Disneyland</h1>
The US invades the newly
founded country.
<!‐‐ suckers!! I wanted to
emigrate there ‐‐>
Comments are enclosed in
<!‐‐
...
‐‐>
They are ignored by the
browser, but serve documentation.
Comments can also hide portions of the document:
The US invades the newly founded country.
<!‐‐
Get this prepared, just in case.
<em>But Goofy strikes back and wins the battle</em>
‐‐>
18
Comments
<div>
<h1>First Headline</h1>
<p>First paragraph</p>
<p>Second paragraph</p>
<div>
<h2>Sub-Headline</h2>
<p>First paragraph... </p>
</div>
</div>
<div>
<h1>Second Headline</h1>
...
The standard structure of the page body is
<div> starts a section
(usually with a blank line)
<p> starts a paragraph
(usually with a blank line)
<h1>,... <h6> marks a
headline
<div> can contain <p>
but not vice sersa.
19
Page body structure
important
<div>
<h1>First Headline</h1>
<p>First paragraph
<p>Second paragraph
</div>
<div>
<h1>Second Headline</h2>
<p>First paragraph...
</div>
Closing tags can be omitted in some situations
<p> cannot contain <p>
so omitting </p> is safe
<div> can contain <div>
therefore we have to close it
to avoid nesting
In general, it is recommended
to close all opening tags in order
to avoid ambiguities.
20
Optional closing tags
Introduction
Page Structure
HTML tags
Forms
Multimedia
Charsets
Overview
21
Paragraphs, headlines, and some other tags can only contain
inline content
. This is
normal text
breaks<br> between lines
here is<sub>subscript</sub>
<sup>superscript</sup>
<q>quotation</q>
<code>computer code</code>
22
Inline content ½
<strong>important (bold)</strong>
<em>emphasized</em>
<mark>marked (highlighted)</mark>
<small>small</small>
<b>bold</b>
<s>incorrect (strike-through)</s>
<u>stylistically different (underlined)
<i>alternate (italic)</i>
Paragraphs, headlines, and some other tags can only contain
inline content
. This is
23
Inline content 2/2
<a href="http://disneyland.gov">Government</a>
What distinguishes a Web document from plain text are its
links
to other pages. Links are inline content, too.
Government
Some tags can have
attributes
.
These take the form
attribute="value"
The HTML specification says which tags
can have which attributes.
Clicking on
the content
will redirect the
browser to the
given URL.
24
Links
important
Links can be
absolute
(i.e. given by a complete URL)
or
relative
to the current document path.
/quux
..
bar2.html
baz/toto.html
#top
http://example.com/quux
http://example.com/foo
http://example.com/foo/bar2.html
http://example.com/foo/baz/toto.html
http://example.com/foo/bar.html#top
The purpose of the
#
fragment is to
scroll
to the position
in the document. It is not actually sent to the server.
25
Link Resolution
Let's consider the document
http://example.com/foo/bar.html
Link
Resolves to
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
<dl>
<dt>USA</dt>
<dd>United States</dd>
</dl>
There are 3 types of lists in HTML. Lists are not inline.
26
Lists
U
nordered
L
ists
with
L
ist
I
tems
O
rdered
L
ists
with
L
ist
I
tems
with
D
efinition
T
erms
D
efinition
L
ists
and
D
efinition er...
D
efinitions
<table>
<tr>
<td> no </td>
<td> food </td>
</tr>
<tr>
<td> on this </td>
<td> table </td>
</tr>
</table>
27
Start table
Start first table row
Tables
First row, first cell
End first table row
Start second table row
First row, second cell
important
<table>
<caption>My Table</caption>
<tr>
<th> Column 1 </th>
<th> Column 2 </th>
</tr>
<tr>
<td> still </td>
<td> no food </td>
</tr>
...
28
Nicer Tables
caption
Column headers
<iframe src="http://en.wikipedia.org/wiki/Mickey_Mouse">
</iframe>
A
frame
is a page within the page.
• Can be annoying for the
user (e.g., if link is clicked
within frame)
• Poses security problems
• Renders unpredictably
=>
avoid
29
Frames
<details>
<summary>Please read this</summary>
<p>Wow, you are reading it!</p>
</details>
30
Fancy (new) stuff in HTML5
•click*
<meter value="2" min="0" max="10">2 out of 10</meter><br>
<meter value="0.6">60%</meter>
Downloading progress:
<progress value="80" max="100"> </progress>
31
Fancy (new) stuff in HTML5
<nav><a...>Home</a></nav>
<article>
<header>
<h1>Headline</h1>
<p>Header information</p>
</header>
<section>...</section>
<footer>
Posted by Daisy Duck.
<address>Disneyland</address>
</footer>
</article>
HTML5 defines several tags to give
semantic structure
to a document.
32
Semantic Structure
Group navigation links
Delimit articles
Delimit headlines
Delimit sections
Delimit footer
Identify an address
Introduction
Page Structure
HTML tags
Forms
Multimedia
Charsets
Overview
33
Order your Disneyland passport here:
<form name="input" action="action.asp" method="get">
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" name="personName"><br>
Password: <input type="password" name="pwd"><br>
</fieldset>
<input type="submit" value="Submit">
</form>
34
Forms ask users for input
Order your Disneyland passport here:
<form name="input" action="action.asp" method="get">
Which file to request from the
server when "Submit" is clicked
Name of this form
(there can be several
forms on a page)
HTTP method
GET or POST
35
Forms ask users for input
Order your Disneyland passport here:
<form name="input" action="action.asp" method="get">
<fieldset>
<legend>Personalia:</legend>
</fieldset>
<input type="submit" value="Submit">
</form>
Fieldset structures
fields that belong
together
Legend explains
fieldset
submit
button
36
Forms ask users for input
Order your Disneyland passport here:
<form name="input" action="action.asp" method="get">
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text" name="personName"><br>
Password: <input type="password" name="pwd"><br>
Different types of fields
behave differently
A name identifies
the field
Try it out!
Passwords are still
transmitted in plain
text to the server!!
37
Text and Passwords
Please tell us about your previous
romantic relationships:<br>
<textarea name="romantic" cols="40" rows="5">
Yes, just go ahead
</textarea>
Try it out!
38
Text areas
<fieldset>
<legend>Gender</legend>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<input type="radio" name="sex" value="other">Not sure
<input type="checkbox" name="sexchange" value="change">
Change planned
</fieldset>
Try it out!
adding
checked ="checked"
will check the box
39
Radio Buttons and Check Boxes
<select name="age">
<option value="20">Less than 20</option>
<option value="100">20 years - 100 years</option>
<option value="1000">100 years - 1000 years</option>
<option value="inf" selected="selected">Immortal</option>
</select>
Try it out!
Adding
selected ="selected"
will select an option
40
Drop down lists
Upload picture: <input type="file" name="picture">
• The browser will display an upload button
and an upload dialog upon click
• Because of the size of the file, the HTTP method
POST
should be chosen
41
Files
Favorite color: <input type="color" name="favcolor">
Birthday: <input type="date" name="bday">
Party: <input type="datetime" name="party">
Email: <input type="email" name="email">
Age: <input type="number" name="age" min="1" max="130">
Age: <input type="range" name="age2" min="1" max="130">
Telephone: <input type="tel" name="telephone">
Pick up time: <input type="time" name="pickuptime">
Homepage: <input type="url" name="homepage">
Inputs are checked
syntactically by
the browser.
Mobiles show
different keyboard.
Try it out!
42
Validated input
The form can contain
hidden fileds
These can serve to store information on the client side,
which will be send back to the server upon form submission.
<input type="hidden" name="userId" value="user132">
Attention: The client could modify these fields
by hand, which could cause trouble on the server side!
43
Hidden fields
<form name="input" action="action.asp" method="get">
<fieldset>
<input type="text" name="FirstName">
</fieldset>
<input type="submit" value="Envoyer">
</form>
submit
is the type
of the submit button
Text of the button
can be configured here
When the user clicks submit, the browser requests
action.asp?FirstName=Goofy
by the HTTP method GET
(whatever the user typed)
44
Submitting the form
<form action="monAction.html" method="get">
<fieldset>
<legend>
Informations personelles
</legend>
Votre prénom :
<input type="text" name="prenom">
Votre date de naissance :
<input type="date" name="dateDeNaissance">
...
</fieldset>
<input type="submit" value="Envoyer">
</form>
Forms: Summary
45
monAction.html?prenom=XYZ&dateDeNaissance=ABC
generates GET request for
important
Introduction
Page Structure
HTML tags
Forms
Multimedia
Charsets
Overview
46
• HTML pages can contain multimedia elements
such as
music, videos, images
• These elements are usually stored in a separate file
and
linked
from the HTML document
<html>
This is princess Jasmine:<br>
<img src="jasmine.jpg">
</html>
47
Multimedia
+
index.html
jasmine.jpg
=
<img src="jasmine.jpg" alt="Princess Jasmine" >
•
src
specifies the URL of the image file
(relative or absolute)
•
alt
is the obligatory attribute to
replace the image
• in case the image is not found
• for blind people
• for text browsers
• for robots
JPG image format
SVG image format
PNG image format
48
Images
important
•
JPEG
is a lossy file format best suited for photos
•
PNG
is a lossless file format best suited for pixel drawings
such as screen shots
•
SVG
is a vector graphic, i.e., it consists of simple elements
and scales without pixelization
Image Formats
49
important
<audio src="elvis.mp3" controls>
Your browser does not support audio, click
<a href="elvis.mp3">here</a>
</audio>
Optional attributes for
<audio>
•
controls
: Show play, pause, etc.
•
autoplay
: Start playing automatically (avoid this)
•
loop
: Repeat the sound in a loop
50
Audio
<audio>
<source src="elvis.mp3" type="audio/mpeg">
<source src="elvis.ogg" type="audio/ogg">
Your browser does not support this audio format.
</audio>
Audio formats:
WAV
: Without compression
FLAC
: Lossless compression
MP3
: Most well-known, but has patents on it, bad quality
Ogg Vorbis, Opus
: Free alternatives to MP3
Speex
: Compression optimized for voice
HTML5 allows the browser to choose an audio format it supports.
51
Audio Formats
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
</video>
Video formats:
H.264
: Most common format, usually wrapped in MP4
Problems with patents.
Ogg Theora
: A free alternative, not very common
WebM
: Format proposed by Google
Videos work similarly to audio:
Try it out!
52
Video
• HTML describes the
structure
of a document
•
tags
take the form
<tag attribute="value" ...> ... </tag>
• HTML can contain
forms
and
multimedia
Summary HTML
53