HTML 5/CSS 3/Javascriptbeurton/Enseignement/PI/web-en.pdf · HTML 5/CSS 3/Javascript Florent...

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

[email protected]

http://dept-info.labri.fr/~beurton

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


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.


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 .


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.)


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


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.


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.


Validating by W3C

A necessary tool

the W3C and Mozilla fundation validator.

http://validator.w3.org/


http://validator.w3.org/

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>


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>


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.


Comments

Comments are HTML codo which are not executed, so not visible in thebrowser.Syntax : 

<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 !

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>


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>


Document Type De�nition

A document compliant to HTML5 syntax begins always with

<!DOCTYPE html>


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>

. . .


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


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.


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


https://www.iana.org/assignments/character-sets/character-sets.xhtml

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.


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>


Head part : good practices

Bonnes pratiques

It is recommanded to always specify, in addition of the tag <title> :

coding system,

author,

description,

key-words.


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>


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>


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.


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>


An example de formulaire : rendu

Rendu dans Mozilla Firefox 30 (sans feuille de style)


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.


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.


http://dmouronval.developpez.com/

HTML 5/CSS 3/Javascriptbeurton/Enseignement/PI/web-en.pdf · HTML 5/CSS 3/Javascript Florent...

Documents

Transcript of HTML 5/CSS 3/Javascriptbeurton/Enseignement/PI/web-en.pdf · HTML 5/CSS 3/Javascript Florent...