Université de BordeauxInternational Track - Informatics Unit.
Initiation au développement Web
HTML 5/CSS 3/Javascript
Florent Grélard, Marie Beurton-Aimar (Étienne André)[email protected]
http://dept-info.labri.fr/~beurton
Version : 15 avril 2019 (diapositives de présentation)
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 1 / 32
Goals
Know how to write and to manage Web pages in a formattinglanguage for content descriptions.
Know how to modify the presentation attributes of a Web page.
Be able to design couleurstyle sheets
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 2 / 32
HTML
Dé�nition (HTML)
HTML (HyperText Markup Language), is a standard language used todescribe web pages.
HyperLink : allows to jump from one document to another one.
Today HTML is de facto the unic language to describe web pages.
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 3 / 32
At the beginning : the text
The 80s : needs to publish, to share and to recover documents.
My document t i t l e
A parag raph i n my document .An ano the r pa rag raph which ment ions ano the r web page .
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 4 / 32
Hypertext Links
End of the 80s : the hypertext links/anchors
Allow to point out to another page
My document t i t l e
A parag raph i n my document .An ano the r pa rag raph which ment ions
<A HREF=" ht tp ://www. ce rn . f r ">anothe r Web page</A>.
(This code is not correct considering the current HTML standard.)
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 5 / 32
The Tags1991 : proposition of Tags
<TITLE> My document t i t l e</TITLE>
A paragraph i n my document .<P>Un au t r e pa rag raphe qu i ment ionne une<A HREF=" ht tp ://www. ce rn . f r ">au t r e page Web</A>.
(This code is not correct considering the current HTML standard.)
Tim Berners-Lee
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 6 / 32
HTML Speci�cations
1995 : speci�cation of HTML 2.0 by IETFI Internet Engineering Task Force build the Internet standards.
1996 : W3C (World Wide Web Consortium) manages the standards.I Consortium (421 organisations belong to it in 2016) which create all
Web standards.
1997-1999 : HTML 4.0 : style sheets design.
2008 : publication by W3C of the �rst draft of HTML5 speci�cation.I Beginning of writting of Web pages following the HTML5
pre-specification.
2011 : last call to contribute to the speci�cation.
28th october 2014 : publication of HTML5 standard as W3Crecommandation.
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 7 / 32
HTML Code Validation
Good news/bad news : no respect of HTML syntax don't block yourdisplaying in the browser - at the opposite of a lot of programminglanguages.
In general, your browser will display something (not speci�ed) or nothing,but never displays an error.
Validation
It is mandatory to validate your HTML code before to plublish it.
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 8 / 32
HTML Code Validation
Good news/bad news : no respect of HTML syntax don't block yourdisplaying in the browser - at the opposite of a lot of programminglanguages.
In general, your browser will display something (not speci�ed) or nothing,but never displays an error.
Validation
It is mandatory to validate your HTML code before to plublish it.
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 8 / 32
Validating by W3C
A necessary tool
the W3C and Mozilla fundation validator.
http://validator.w3.org/
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 9 / 32
Language with TagsHTML is based on tags.
Two types of tags :1 Tags which are opened then closed and enclose contents
I Example : <em>italic stuff</em>
2 Tags which are opened and closed at the same time.I Example : <img src="mon_image.png" />
<h1>Example o f t i t l e</h1><hr /><d i v>
<p><b>bo ld</b> t e x t then <em> i t a l i c</em> one ,then <b><em>bo ld and i t a l i c</em></b>.
</p><img s r c="mon\_image . png" a l t="An image" />
</ d i v>
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 10 / 32
Tags and attributes
Some tags can possess couleurattributes.
Examples :
<meta charset="ut f−8" />
<img src="mon\_image . png" alt="An image" />
<p style=" tex t−a l i g n : r i g h t ">Text r i g h t a l i g n .
</p>
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 11 / 32
Tags and hierarchy
Tags are structured into a hierarchyEach tag inherits properties from the highest level � or they rede�ned them.
<p>t h i s t e x t i s <b>on l y i n bo ld</b>.</p><p>t h i s t e x t i s <b>seu l ement i n bo ld < i>and
t h i s p a r t i s i n bo ld and i n i t a l i c</ i></b>.</p>
Closing order
It is mandatory to close the tags in the inverse order than they have beenopen - as parentheses in math.
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 12 / 32
Tags and hierarchy
Tags are structured into a hierarchyEach tag inherits properties from the highest level � or they rede�ned them.
<p>t h i s t e x t i s <b>on l y i n bo ld</b>.</p><p>t h i s t e x t i s <b>seu l ement i n bo ld < i>and
t h i s p a r t i s i n bo ld and i n i t a l i c</ i></b>.</p>
Closing order
It is mandatory to close the tags in the inverse order than they have beenopen - as parentheses in math.
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 12 / 32
Comments
Comments are HTML codo which are not executed, so not visible in thebrowser.Syntax : <!-- Text between comments -->
<h1>A t i t l e ( which w i l l be d i s p l a y )</h1>
<p>This s en t en c e w i l l be d i s p l a y i n the browse r<!−− But t h i s one not−−>
</p>
Attention
Comments remain visible in the source code of the Web page, which isavailable from the client part.
Take care to not leave con�dential information inside !
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 13 / 32
Comments
Comments are HTML codo which are not executed, so not visible in thebrowser.Syntax : <!-- Text between comments -->
<h1>A t i t l e ( which w i l l be d i s p l a y )</h1>
<p>This s en t en c e w i l l be d i s p l a y i n the browse r<!−− But t h i s one not−−>
</p>
Attention
Comments remain visible in the source code of the Web page, which isavailable from the client part.
Take care to not leave con�dential information inside !
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 13 / 32
Structure of an HTML document
Two main parts :
Head : de�nition of the title, coding, key-words, etc.I Information dedicated to the machines (browser, robots, etc.)
Body : Web page contents.I Information dedicated to human beings (and machines)
<!DOCTYPE html><html>
<head><!−− Here , the head −−>
</head>
<body><!−− Here , the body page −−>
</body></html>
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 14 / 32
A minimal example (syntax in accordance to HTML5)
<!DOCTYPE html><html>
<head><meta cha r s e t="ut f−8" />< t i t l e>The t i t l e o f my document</ t i t l e>
</head>
<body><p>This document c o n t a i n s on l y one s en t en c e .</p>
</body>
</html>
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 15 / 32
Document Type De�nition
A document compliant to HTML5 syntax begins always with
<!DOCTYPE html>
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 16 / 32
The tag title (1/2)
Placed in the document 'head
between the tags <head> and </head>
This is the only one mandatory tag in head part.
Syntax :
. . .<head>
< t i t l e>The t i t l e o f my Web page</ t i t l e></head>
. . .
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 17 / 32
The tag title (2/2)
Its content de�nes the document title
Previously always displays in the browser or tab window title.
Today, less an less
Improve a lot the referencing
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 18 / 32
Meta tags
Placed in the head of the document
between <head> </head> tags
Order is not speci�ed
Allow to give informations to the browser and to search engines
Characters coding
Author, description, key-words of the page
Never displayed on the page directly.
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 19 / 32
Character Coding
Syntaxe :
<meta cha r s e t="Coding_Name" />
Possible Values
utf-8 : unicode (recommended)
<meta cha r s e t="ut f−8" />
iso-8859-1 : latin alphabet
and so much
Presence of this tag is not a W3C requirement, but very stronglyrecommended (understand : mandatory).
Complète liste of values :
https://www.iana.org/assignments/character-sets/character-sets.xhtml
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 20 / 32
Description, mots-cles, auteur
Syntaxe :
<meta name=" d e s c r i p t i o n " content=" I n t r o d u c t i o nto Web deve lopment " />
<meta name="keywords " content=" Lec tu r e ,HTML, L i c en c e Parcou r sI n t e r n a t i o n a l " />
<meta name=" autho r " content="The t e a c h e r " />
Important
Ful�l this �elds is important, no for the client, but for referencing by searchengine.
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 21 / 32
Description, mots-cles, auteur
Syntaxe :
<meta name=" d e s c r i p t i o n " content=" I n t r o d u c t i o nto Web deve lopment " />
<meta name="keywords " content=" Lec tu r e ,HTML, L i c en c e Parcou r sI n t e r n a t i o n a l " />
<meta name=" autho r " content="The t e a c h e r " />
Important
Ful�l this �elds is important, no for the client, but for referencing by searchengine.
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 21 / 32
An example of Head
<!DOCTYPE html><html l ang=" f r ">
<head><meta cha r s e t="ut f−8" /><meta name=" d e s c r i p t i o n " content="Une page Web" /><meta name="keywords " content="Lectu re ,HTML, L i c en c e
Parcou r s I n t e r n a t i o n a l " /><meta name=" autho r " content="The t e a c h e r " />< t i t l e>T i t l e o f my Web page</ t i t l e>
</head>
<body>. . .
</body></html>
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 22 / 32
Head part : good practices
Bonnes pratiques
It is recommanded to always specify, in addition of the tag <title> :
coding system,
author,
description,
key-words.
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 23 / 32
Section
Tag <div> : element to structure (or make a section)
Good practices
most often the Web page is organised in nested <div>.
<d i v><d i v>
<!−− F i r s t p a r t −−></ d i v><d i v>
<!−− Second pa r t −−></ d i v>
</ d i v>
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 24 / 32
Paragraph
Tag <p> : paragraphTag <br> or <br /> : line break.
Good practices
It is better to add a paragraph (<p>) more than a break line (<br>).
<d i v><p>A f i r s t pa rag raph .</p><p>A second parag raph .</p>
</ d i v>
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 25 / 32
Forms principles
Goal
Send inpun information from the current Web page to another one (whichis mostoften dynamic)
Examples :
Type the user name and a password.
Research on a search engine.
Writting message on social network.
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 26 / 32
Forms principles
Goal
Send inpun information from the current Web page to another one (whichis mostoften dynamic)
Examples :
Type the user name and a password.
Research on a search engine.
Writting message on social network.
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 26 / 32
Forms principles
Goal
Send inpun information from the current Web page to another one (whichis mostoften dynamic)
Examples :
Type the user name and a password.
Research on a search engine.
Writting message on social network.
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 26 / 32
Forms principles
Goal
Send inpun information from the current Web page to another one (whichis mostoften dynamic)
Examples :
Type the user name and a password.
Research on a search engine.
Writting message on social network.
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 26 / 32
An example of form
<form ac t i o n=" t r a i t emen t . php">< f i e l d s e t><l egend>Pe r s ona l data</ l egend>
<p>< l a b e l f o r="setname">myname</ l a b e l>< i n pu t type=" t e x t " name="setname" i d="setname"
p l a c e h o l d e r=" your name"></p>
<p>< l a b e l f o r="ddn">Bi r thDate</ l a b e l>< i n pu t type="date " name="ddn" i d="ddn"></p>
<p>< l a b e l f o r="mdp">PassWord</ l a b e l>< i n pu t type="password " name="mdp" i d="mdp" p l a c e h o l d e r=
" your passwork "></p>
<p><button type=" submit " r o l e=" button " a r i a−d i s a b l e d="f a l s e ">Send</ button></p>
</ f i e l d s e t></ form>
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 27 / 32
An example de formulaire : rendu
Rendu dans Mozilla Firefox 30 (sans feuille de style)
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 28 / 32
Forms : notes
It is recommended to add to each �eld a label (tag to describe the�eld)
The identi�ant for of the label has to refer the identi�ant id in thecorresponding �eld.
Identi�ants don't have to contain space, and will be never displayed.
The attribute placeholder contains text displayed by default (andcan contain any kind of characters)
The tag <fieldset> allows a nice displaying by default.
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 29 / 32
Forms : a lot of possibilities
Numerous types of possible �elds :
Boxes to check (checkbox), radio buttons (radio), text area(textarea), selections (select), set of buttons (toolbar), �les todump (file), etc.
Kinds of text : tel, email, url, date, color, etc.
See for example :http://dmouronval.developpez.com/ (CC BY)
Take care, some new �elds (tel, date, color, etc.) could be displayed notcorrectly with some browsers.
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 30 / 32
Forms : a lot of possibilities
Numerous types of possible �elds :
Boxes to check (checkbox), radio buttons (radio), text area(textarea), selections (select), set of buttons (toolbar), �les todump (file), etc.
Kinds of text : tel, email, url, date, color, etc.
See for example :http://dmouronval.developpez.com/ (CC BY)
Take care, some new �elds (tel, date, color, etc.) could be displayed notcorrectly with some browsers.
Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 30 / 32