SlideShare une entreprise Scribd logo
HTML 101 : Back to Basics
Le HTML ?
Une définition ? 
L’Hypertext Markup Language, 
généralement abrégé HTML, est 
le format de données conçu 
pour représenter les pages 
web. 
Source : wikipedia.org
Hypertext ? 
Un système hypertexte est un système 
contenant des noeuds liés entre eux par des 
hyperliens permettant de passer 
automatiquement d'un noeud à un autre. 
Source : wikipedia.org
Hypertext ?
Markup Language ? 
Les langages de balisage représentent une classe de 
langages spécialisés dans l'enrichissement 
d'information textuelle. Ils utilisent des balises, 
unités syntaxiques délimitant des séquences de 
caractères à l'intérieur d'un flux de caractères. 
Source : wikipedia.org
Une balise HTML ? (1) 
<p>Hello World</p> 
Balise ouvrante Balise fermante
Une balise HTML ? (2) 
<img src=‘logo.png’ /> 
Nom de l’attribut 
Valeur de l’attribut 
Balise auto-fermante
Balises & règles syntaxiques 
Noms de balise standards 
Balise & attributs en minuscule 
Cohérence des inclusions
Cohérence des balises 
<p> 
<h1>Toto</h1> 
<img src=‘logo.png’ /> 
</p> 
<img src=‘logo2.png’ /> 
<p> 
<h1>Toto</p> 
<image src=‘logo.png’ /> 
</h1> 
<IMG src=‘logo2.png’ />
Quelques balises
Paragraphes (1) 
The p element represents a paragraph. 
Source : w3.org 
List elements cannot be children of p elements 
Source : w3.org 
The p element should not be used when a 
more specific element is more appropriate. 
Source : w3.org
Paragraphes (2) 
<p>Hello World</p> 
<p>Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Nulla nunc neque, 
condimentum convallis ante eget, faucibus 
fringilla augue. Duis non tortor gravida, 
fermentum justo quis, accumsan mi. Mauris ac 
fermentum dui. Curabitur tincidunt finibus 
dolor ac vulputate. Aliquam ullamcorper dolor 
vel diam imperdiet, nec congue ligula 
aliquam.</p>
Titres (1) 
The h1–h6 elements are headings. 
Source : w3.org 
The first element of heading content in an 
element of sectioning content represents the 
heading for that section. Subsequent headings of 
equal or higher rank start new (implied) 
sections, headings of lower rank start implied 
subsections that are part of the previous one. 
Source : w3.org
Titres (2) 
<h1>Hello World</h1> 
<h2>Hello World</h2> 
<h3>Hello World</h3> 
<h4>Hello World</h4> 
<h5>Hello World</h5> 
<h6>Hello World</h6>
Titres (3) 
<h1>Apples</h1> 
<p>Apples are fruit.</p> 
<h2>Taste</h2> 
<p>They taste lovely.</p> 
<h3>Sweet</h3> 
<p>Red apples are sweeter than 
green ones.</p> 
<h2>Color</h2> 
<p>Apples come in various 
colors.</p> 
<h1>Apples</h1> 
<p>Apples are fruit.</p> 
<h3>Taste</h3> 
<p>They taste lovely.</p> 
<h3>Sweet</h3> 
<p>Red apples are sweeter than 
green ones.</p> 
<h4>Color</h4> 
<p>Apples come in various 
colors.</p>
Listes (1) 
The ol element represents a list of items, where 
the items have been intentionally ordered, such 
that changing the order would change the 
meaning of the document. 
Source : w3.org 
The ul element represents a list of items, where 
the order of the items is not important — that 
is, where changing the order would not 
materially change the meaning of the document. 
Source : w3.org
Listes (2) 
The li element represents a list item. If its parent 
element is an ol, or ul, then the element is an 
item of the parent element's list, as defined for 
those elements. Otherwise, the list item has no 
defined list-related relationship to any other li 
element. 
Source : w3.org
Listes (3) 
<p>I have lived in the following 
countries (given in the order of 
when I first lived there):</p> 
<ol> 
<li>Switzerland</li> 
<li>United Kingdom</li> 
<li>United States</li> 
<li>Norway</li> 
</ol> 
<p>I have lived in the following 
countries:</p> 
<ul> 
<li>Norway</li> 
<li>Switzerland</li> 
<li>United Kingdom</li> 
<li>United States</li> 
</ul>
Liens hypertexte (1) 
If the a element has an href attribute, then it 
represents a hyperlink (a hypertext anchor) 
labeled by its contents. 
Source : w3.org 
The a element may be wrapped around 
entire paragraphs, lists, tables, and so forth, 
even entire sections, so long as there is no 
interactive content within (e.g. buttons or 
other links). 
Source : w3.org
Liens hypertextes (2) 
<a href=‘index.html’>Hello World</a> 
<h1> 
<a href=‘index.html’>Hello World</a> 
</h1> 
<a href=‘index.html’> 
<h1>Hello World</h1> 
</a> 
<a href=‘index.html’> 
<h1>Hello World</h1> 
<p>Lorem Ipsum</p> 
</a>
Chemins & arborescence (1) 
Chemin relatif Chemin absolu 
site/index.html 
La cible va être cherchée par le 
navigateur à partir de la page 
html qu'il interprète, dans le 
sous-répertoire "site". 
/site/index.html 
La cible va être cherchée par le 
navigateur à partir de la racine 
dans le sous-répertoire "site".
Chemins & arborescence (2.1) 
Dossier www / racine du serveur 
Dossier articles 
Dossier templates 
page.html footer.html 
news.html 
list.html 
index.html about.html 
Dossier portfolio 
projet.html ref.html 
A partir de list.html - /about.html
Chemins & arborescence (2.2) 
Dossier www / racine du serveur 
Dossier articles 
Dossier templates 
page.html footer.html 
news.html 
list.html 
index.html about.html 
Dossier portfolio 
projet.html ref.html 
A partir de about.html - index.html
Chemins & arborescence (2.3) 
Dossier www / racine du serveur 
Dossier articles 
Dossier templates 
page.html footer.html 
news.html 
list.html 
index.html about.html 
Dossier portfolio 
projet.html ref.html 
A partir de ref.html - ../articles/templates/footer.html
Chemins & arborescence (2.4) 
Dossier www / racine du serveur 
Dossier articles 
Dossier templates 
page.html footer.html 
news.html 
list.html 
index.html about.html 
Dossier portfolio 
projet.html ref.html 
A partir de news.html - ./templates/page.html
Commentaires 
<!-- Commentaire -->
Structure d’une page html
Base d’une page web 
<!doctype html> 
<html> 
<head> 
<!-- Méta-informations --> 
</head> 
<body> 
<!-- Contenu de la page --> 
</body> 
</html>
Doctype ? 
The <!DOCTYPE> declaration must be the very 
first thing in your HTML document, before 
the <html> tag. 
Source : w3schools.com 
The <!DOCTYPE> declaration is not an HTML 
tag; it is an instruction to the web browser 
about what version of HTML the page is 
written in. 
Source : w3schools.com
Méta-informations (1) 
L'élément HTML Head Element (<head>) 
fournit des informations générales 
(metadata) sur le document, incluant son 
titre et des liens ou des définitions vers des 
scripts et feuilles de style. 
Source : https://developer.mozilla.org
Méta-informations (2) 
<head> 
<title>Titre du document</title> 
<meta charset="utf-8"> 
</head>
Contenu de la page (1) 
L'élément HTML <body> représente le 
contenu principal du document HTML, la 
partie affichée aux internautes. Il n'y a qu'un 
élément <body> par document. 
Source : https://developer.mozilla.org
Contenu de la page (2) 
<!doctype html> 
<html> 
<head> 
<title>Titre de la page</title> 
</head> 
<body> 
<h1>Super titre</h1> 
<p>Lorem ipsum</p> 
</body> 
</html>
Mise en pratique
Exercice 1 
Intégrer la maquette fournis en utilisant uniquement les balises vue dans ce cours.
Exercice 2 
Intégrer la maquette fournis en utilisant uniquement les balises vue dans ce cours.
Merci pour votre attention.
Bibliographie 
Bien construire sa hiérarchie de titres - Laurie-Anne 
http://www.alsacreations.com/astuce/lire/952-bien-construire-sa-hirarchie-de-titres.html 
La hiérarchie des balises H1, H2, Hn... et le référencement- AxeNet 
http://blog.axe-net.fr/hierarchie-balises-h1-h2-hn-referencement/ 
A vocabulary and associated APIs for HTML and XHTML - W3C 
http://www.w3.org/TR/html5/ 
HTML5 : structure globale du document -Simon-K 
http://www.alsacreations.com/article/lire/1374-html-5-structure-globale-du-document.html
Crédits 
HTML5 - Erick Dimas 
http://commons.wikimedia.org/wiki/File:HTML5_de_Erick_Dimas.jpg 
Hypertext Editing System (HES) console - Greg Lloyd 
http://commons.wikimedia.org/wiki/File:HypertextEditingSystemConsoleBrownUniv1969.jpg

Contenu connexe

Tendances

Formation HTML pour Bac Informatique
Formation HTML pour Bac InformatiqueFormation HTML pour Bac Informatique
Formation HTML pour Bac Informatique
Mohamed Anas Ben Othman
 
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-201518 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
Emmanuelle Morlock
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francais
Vlad Posea
 
Introduction à XML
Introduction à XMLIntroduction à XML
Introduction à XML
Saïd Radhouani
 
Formation web
Formation webFormation web
Formation web
Stéphane BIOKOU
 
Les balises HTML
Les balises HTMLLes balises HTML
Les balises HTML
Neovov
 
Formation HTML5/CSS3
Formation HTML5/CSS3Formation HTML5/CSS3
Formation HTML5/CSS3
G²FOSS ENIT
 
HTML
HTMLHTML
HTML
Neovov
 
IPW 2eme course - HTML
IPW 2eme course - HTMLIPW 2eme course - HTML
IPW 2eme course - HTML
Vlad Posea
 
Exploration et visualisation de fichiers XML avec BaseX
Exploration et visualisation de fichiers XML avec BaseXExploration et visualisation de fichiers XML avec BaseX
Exploration et visualisation de fichiers XML avec BaseX
Emmanuelle Morlock
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
Axel Chalon
 
2014 03 atelier-xml-tei-stage-ecdotique-institut-sources-chretiennes-hisoma
2014 03 atelier-xml-tei-stage-ecdotique-institut-sources-chretiennes-hisoma2014 03 atelier-xml-tei-stage-ecdotique-institut-sources-chretiennes-hisoma
2014 03 atelier-xml-tei-stage-ecdotique-institut-sources-chretiennes-hisoma
Emmanuelle Morlock
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
Erwan Tanguy
 
Le langage HTML
Le langage HTMLLe langage HTML
Le langage HTML
Bruno Delb
 
IPW Course 3 CSS
IPW Course 3 CSSIPW Course 3 CSS
IPW Course 3 CSS
Vlad Posea
 
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHSN. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
OpenEdition
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidoc
priscilla_mommessin
 
cours Php
cours Phpcours Php
cours Php
mohamednacim
 

Tendances (20)

Formation HTML pour Bac Informatique
Formation HTML pour Bac InformatiqueFormation HTML pour Bac Informatique
Formation HTML pour Bac Informatique
 
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-201518 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
 
HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francais
 
Introduction à XML
Introduction à XMLIntroduction à XML
Introduction à XML
 
Formation web
Formation webFormation web
Formation web
 
Les balises HTML
Les balises HTMLLes balises HTML
Les balises HTML
 
Css+html
Css+htmlCss+html
Css+html
 
C5 Javascript
C5 JavascriptC5 Javascript
C5 Javascript
 
Formation HTML5/CSS3
Formation HTML5/CSS3Formation HTML5/CSS3
Formation HTML5/CSS3
 
HTML
HTMLHTML
HTML
 
IPW 2eme course - HTML
IPW 2eme course - HTMLIPW 2eme course - HTML
IPW 2eme course - HTML
 
Exploration et visualisation de fichiers XML avec BaseX
Exploration et visualisation de fichiers XML avec BaseXExploration et visualisation de fichiers XML avec BaseX
Exploration et visualisation de fichiers XML avec BaseX
 
Cours HTML/CSS
Cours HTML/CSSCours HTML/CSS
Cours HTML/CSS
 
2014 03 atelier-xml-tei-stage-ecdotique-institut-sources-chretiennes-hisoma
2014 03 atelier-xml-tei-stage-ecdotique-institut-sources-chretiennes-hisoma2014 03 atelier-xml-tei-stage-ecdotique-institut-sources-chretiennes-hisoma
2014 03 atelier-xml-tei-stage-ecdotique-institut-sources-chretiennes-hisoma
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
Le langage HTML
Le langage HTMLLe langage HTML
Le langage HTML
 
IPW Course 3 CSS
IPW Course 3 CSSIPW Course 3 CSS
IPW Course 3 CSS
 
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHSN. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
N. Dufournaud : XML TEI un outil méthodologique pour la recherche en SHS
 
Outils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidocOutils de publication pour le CMS d'e-sidoc
Outils de publication pour le CMS d'e-sidoc
 
cours Php
cours Phpcours Php
cours Php
 

En vedette

Catalogue Idwatt 2016
Catalogue Idwatt 2016Catalogue Idwatt 2016
Catalogue Idwatt 2016
SOREA
 
Présentation de MEODEX 2015 - Vos modules LED sur mesure
Présentation de MEODEX 2015 - Vos modules LED sur mesurePrésentation de MEODEX 2015 - Vos modules LED sur mesure
Présentation de MEODEX 2015 - Vos modules LED sur mesure
Marketing and Sales MEODEX
 
Le référencement pour les developpeurs
Le référencement pour les developpeursLe référencement pour les developpeurs
Le référencement pour les developpeurs
relevant_traffic_france
 
Lucibel Corporate presentation oct2011
Lucibel Corporate presentation oct2011Lucibel Corporate presentation oct2011
Lucibel Corporate presentation oct2011
Giorgio Anselmetti
 
Superivision Aéroportuaire
Superivision AéroportuaireSuperivision Aéroportuaire
Superivision Aéroportuaire
Karim Hassaouan
 
Document Object Model ( DOM)
Document Object Model ( DOM)Document Object Model ( DOM)
Document Object Model ( DOM)
Abdelouahed Abdou
 
Promenades et randonnées autour de Sainte-Maxime
Promenades et randonnées autour de  Sainte-MaximePromenades et randonnées autour de  Sainte-Maxime
Promenades et randonnées autour de Sainte-Maxime
Sainte-Maxime Tourisme
 
Pepsi Kick
Pepsi KickPepsi Kick
Pepsi Kick
M51
 
APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2
APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2
APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2
jicarbonelli
 
Spot Mr16 Led lamp
Spot Mr16 Led lampSpot Mr16 Led lamp
Spot Mr16 Led lamp
guesteed145a4
 
Catálogo Neoflash Iluminação 2016
Catálogo Neoflash Iluminação 2016Catálogo Neoflash Iluminação 2016
Catálogo Neoflash Iluminação 2016
Lerche Iluminacao Profissional
 
Catálogo Holle Iluminação 2016
Catálogo Holle Iluminação 2016Catálogo Holle Iluminação 2016
Catálogo Holle Iluminação 2016
Lerche Iluminacao Profissional
 
LED lighting - Iluminação LED - Dualcom
LED lighting - Iluminação LED - DualcomLED lighting - Iluminação LED - Dualcom
LED lighting - Iluminação LED - Dualcom
dualcom
 
PORTIFÓLIO_LF BUILDING_LINKEDIN
PORTIFÓLIO_LF BUILDING_LINKEDINPORTIFÓLIO_LF BUILDING_LINKEDIN
PORTIFÓLIO_LF BUILDING_LINKEDIN
Luciano Fonseca
 
Leds
LedsLeds
French www.lumin-lighting.com
French www.lumin-lighting.comFrench www.lumin-lighting.com
French www.lumin-lighting.com
led panel
 
Présentation html5
Présentation html5Présentation html5
Présentation html5
Kénium
 

En vedette (17)

Catalogue Idwatt 2016
Catalogue Idwatt 2016Catalogue Idwatt 2016
Catalogue Idwatt 2016
 
Présentation de MEODEX 2015 - Vos modules LED sur mesure
Présentation de MEODEX 2015 - Vos modules LED sur mesurePrésentation de MEODEX 2015 - Vos modules LED sur mesure
Présentation de MEODEX 2015 - Vos modules LED sur mesure
 
Le référencement pour les developpeurs
Le référencement pour les developpeursLe référencement pour les developpeurs
Le référencement pour les developpeurs
 
Lucibel Corporate presentation oct2011
Lucibel Corporate presentation oct2011Lucibel Corporate presentation oct2011
Lucibel Corporate presentation oct2011
 
Superivision Aéroportuaire
Superivision AéroportuaireSuperivision Aéroportuaire
Superivision Aéroportuaire
 
Document Object Model ( DOM)
Document Object Model ( DOM)Document Object Model ( DOM)
Document Object Model ( DOM)
 
Promenades et randonnées autour de Sainte-Maxime
Promenades et randonnées autour de  Sainte-MaximePromenades et randonnées autour de  Sainte-Maxime
Promenades et randonnées autour de Sainte-Maxime
 
Pepsi Kick
Pepsi KickPepsi Kick
Pepsi Kick
 
APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2
APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2
APARTAMENTO PRONTO PARA MORAR - Alameda Morumbi -96m2
 
Spot Mr16 Led lamp
Spot Mr16 Led lampSpot Mr16 Led lamp
Spot Mr16 Led lamp
 
Catálogo Neoflash Iluminação 2016
Catálogo Neoflash Iluminação 2016Catálogo Neoflash Iluminação 2016
Catálogo Neoflash Iluminação 2016
 
Catálogo Holle Iluminação 2016
Catálogo Holle Iluminação 2016Catálogo Holle Iluminação 2016
Catálogo Holle Iluminação 2016
 
LED lighting - Iluminação LED - Dualcom
LED lighting - Iluminação LED - DualcomLED lighting - Iluminação LED - Dualcom
LED lighting - Iluminação LED - Dualcom
 
PORTIFÓLIO_LF BUILDING_LINKEDIN
PORTIFÓLIO_LF BUILDING_LINKEDINPORTIFÓLIO_LF BUILDING_LINKEDIN
PORTIFÓLIO_LF BUILDING_LINKEDIN
 
Leds
LedsLeds
Leds
 
French www.lumin-lighting.com
French www.lumin-lighting.comFrench www.lumin-lighting.com
French www.lumin-lighting.com
 
Présentation html5
Présentation html5Présentation html5
Présentation html5
 

Similaire à Intégration #2 : HTML 101 : Back to Basics

hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
ABDENNACEURGHANDRI1
 
Formation - P2 - Standards du Web
Formation - P2 - Standards du WebFormation - P2 - Standards du Web
Formation - P2 - Standards du Web
Patrick Vincent
 
HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?
Eroan Boyer
 
Chapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdfChapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdf
YassineZARIOUH
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies web
IrinaTsimpilova1
 
formation developpement web seance html.pptx
formation developpement web seance html.pptxformation developpement web seance html.pptx
formation developpement web seance html.pptx
IdrissaDembl
 
Copy_of_HTML.pdfffffffffffffffffffffffff
Copy_of_HTML.pdfffffffffffffffffffffffffCopy_of_HTML.pdfffffffffffffffffffffffff
Copy_of_HTML.pdfffffffffffffffffffffffff
HafsaAmarhlif
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptx
BrahimKarimi
 
Introduction à XML
Introduction à XMLIntroduction à XML
Introduction à XML
Saïd Radhouani
 
Css présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamiqueCss présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamique
DanielMohamed4
 
Javascript #7 : manipuler le dom
Javascript #7 : manipuler le domJavascript #7 : manipuler le dom
Javascript #7 : manipuler le dom
Jean Michel
 
MMI Web Design P2
MMI Web Design P2MMI Web Design P2
MMI Web Design P2
David Raichman
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
tanokouakouludovic
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
Hamid Tasra
 
Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3
Stephane PERES
 
Atelier template
Atelier templateAtelier template
Atelier template
Pierre Sempé
 

Similaire à Intégration #2 : HTML 101 : Back to Basics (20)

hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
Formation - P2 - Standards du Web
Formation - P2 - Standards du WebFormation - P2 - Standards du Web
Formation - P2 - Standards du Web
 
HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?HTML5 et le SEO : quelles opportunités ?
HTML5 et le SEO : quelles opportunités ?
 
Chapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdfChapitre 1_HTML_complet_version1.pdf
Chapitre 1_HTML_complet_version1.pdf
 
Environnement et technologies web
Environnement et technologies webEnvironnement et technologies web
Environnement et technologies web
 
formation developpement web seance html.pptx
formation developpement web seance html.pptxformation developpement web seance html.pptx
formation developpement web seance html.pptx
 
Copy_of_HTML.pdfffffffffffffffffffffffff
Copy_of_HTML.pdfffffffffffffffffffffffffCopy_of_HTML.pdfffffffffffffffffffffffff
Copy_of_HTML.pdfffffffffffffffffffffffff
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptx
 
Introduction à XML
Introduction à XMLIntroduction à XML
Introduction à XML
 
Css présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamiqueCss présentation Pour des sites web dynamique
Css présentation Pour des sites web dynamique
 
Javascript #7 : manipuler le dom
Javascript #7 : manipuler le domJavascript #7 : manipuler le dom
Javascript #7 : manipuler le dom
 
Html css-xhtml
Html css-xhtmlHtml css-xhtml
Html css-xhtml
 
Mmi Web Design P2
Mmi Web Design P2Mmi Web Design P2
Mmi Web Design P2
 
MMI Web Design P2
MMI Web Design P2MMI Web Design P2
MMI Web Design P2
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
 
Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3
 
Zotero Adbs
Zotero AdbsZotero Adbs
Zotero Adbs
 
Atelier template
Atelier templateAtelier template
Atelier template
 
RDF en quelques slides
RDF en quelques slidesRDF en quelques slides
RDF en quelques slides
 

Plus de Jean Michel

Startup #7 : how to get customers
Startup #7 : how to get customersStartup #7 : how to get customers
Startup #7 : how to get customers
Jean Michel
 
Javascript #2.2 : jQuery
Javascript #2.2 : jQueryJavascript #2.2 : jQuery
Javascript #2.2 : jQuery
Jean Michel
 
HTML & CSS #10 : Bootstrap
HTML & CSS #10 : BootstrapHTML & CSS #10 : Bootstrap
HTML & CSS #10 : Bootstrap
Jean Michel
 
Javascript #11: Space invader
Javascript #11: Space invaderJavascript #11: Space invader
Javascript #11: Space invader
Jean Michel
 
Javascript #10 : canvas
Javascript #10 : canvasJavascript #10 : canvas
Javascript #10 : canvas
Jean Michel
 
Architecture logicielle #4 : mvc
Architecture logicielle #4 : mvcArchitecture logicielle #4 : mvc
Architecture logicielle #4 : mvc
Jean Michel
 
Wordpress #3 : content strategie
Wordpress #3 : content strategieWordpress #3 : content strategie
Wordpress #3 : content strategie
Jean Michel
 
Architecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented designArchitecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented design
Jean Michel
 
Architecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezoneArchitecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezone
Jean Michel
 
Architecture logicielle #1 : introduction
Architecture logicielle #1 : introductionArchitecture logicielle #1 : introduction
Architecture logicielle #1 : introduction
Jean Michel
 
Architecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto frameworkArchitecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto framework
Jean Michel
 
Wordpress #2 : customisation
Wordpress #2 : customisationWordpress #2 : customisation
Wordpress #2 : customisation
Jean Michel
 
Wordpress #1 : introduction
Wordpress #1 : introductionWordpress #1 : introduction
Wordpress #1 : introduction
Jean Michel
 
PHP #7 : guess who?
PHP #7 : guess who?PHP #7 : guess who?
PHP #7 : guess who?
Jean Michel
 
PHP #6 : mysql
PHP #6 : mysqlPHP #6 : mysql
PHP #6 : mysql
Jean Michel
 
PHP & MYSQL #5 : fonctions
PHP & MYSQL #5 :  fonctionsPHP & MYSQL #5 :  fonctions
PHP & MYSQL #5 : fonctions
Jean Michel
 
PHP #4 : sessions & cookies
PHP #4 : sessions & cookiesPHP #4 : sessions & cookies
PHP #4 : sessions & cookies
Jean Michel
 
PHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulairesPHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulaires
Jean Michel
 
PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles
Jean Michel
 
PHP #1 : introduction
PHP #1 : introductionPHP #1 : introduction
PHP #1 : introduction
Jean Michel
 

Plus de Jean Michel (20)

Startup #7 : how to get customers
Startup #7 : how to get customersStartup #7 : how to get customers
Startup #7 : how to get customers
 
Javascript #2.2 : jQuery
Javascript #2.2 : jQueryJavascript #2.2 : jQuery
Javascript #2.2 : jQuery
 
HTML & CSS #10 : Bootstrap
HTML & CSS #10 : BootstrapHTML & CSS #10 : Bootstrap
HTML & CSS #10 : Bootstrap
 
Javascript #11: Space invader
Javascript #11: Space invaderJavascript #11: Space invader
Javascript #11: Space invader
 
Javascript #10 : canvas
Javascript #10 : canvasJavascript #10 : canvas
Javascript #10 : canvas
 
Architecture logicielle #4 : mvc
Architecture logicielle #4 : mvcArchitecture logicielle #4 : mvc
Architecture logicielle #4 : mvc
 
Wordpress #3 : content strategie
Wordpress #3 : content strategieWordpress #3 : content strategie
Wordpress #3 : content strategie
 
Architecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented designArchitecture logicielle #3 : object oriented design
Architecture logicielle #3 : object oriented design
 
Architecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezoneArchitecture logicielle #2 : TP timezone
Architecture logicielle #2 : TP timezone
 
Architecture logicielle #1 : introduction
Architecture logicielle #1 : introductionArchitecture logicielle #1 : introduction
Architecture logicielle #1 : introduction
 
Architecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto frameworkArchitecture logicielle #5 : hipsto framework
Architecture logicielle #5 : hipsto framework
 
Wordpress #2 : customisation
Wordpress #2 : customisationWordpress #2 : customisation
Wordpress #2 : customisation
 
Wordpress #1 : introduction
Wordpress #1 : introductionWordpress #1 : introduction
Wordpress #1 : introduction
 
PHP #7 : guess who?
PHP #7 : guess who?PHP #7 : guess who?
PHP #7 : guess who?
 
PHP #6 : mysql
PHP #6 : mysqlPHP #6 : mysql
PHP #6 : mysql
 
PHP & MYSQL #5 : fonctions
PHP & MYSQL #5 :  fonctionsPHP & MYSQL #5 :  fonctions
PHP & MYSQL #5 : fonctions
 
PHP #4 : sessions & cookies
PHP #4 : sessions & cookiesPHP #4 : sessions & cookies
PHP #4 : sessions & cookies
 
PHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulairesPHP #3 : tableaux & formulaires
PHP #3 : tableaux & formulaires
 
PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles PHP #2 : variables, conditions & boucles
PHP #2 : variables, conditions & boucles
 
PHP #1 : introduction
PHP #1 : introductionPHP #1 : introduction
PHP #1 : introduction
 

Intégration #2 : HTML 101 : Back to Basics

  • 1. HTML 101 : Back to Basics
  • 3. Une définition ? L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. Source : wikipedia.org
  • 4. Hypertext ? Un système hypertexte est un système contenant des noeuds liés entre eux par des hyperliens permettant de passer automatiquement d'un noeud à un autre. Source : wikipedia.org
  • 6. Markup Language ? Les langages de balisage représentent une classe de langages spécialisés dans l'enrichissement d'information textuelle. Ils utilisent des balises, unités syntaxiques délimitant des séquences de caractères à l'intérieur d'un flux de caractères. Source : wikipedia.org
  • 7. Une balise HTML ? (1) <p>Hello World</p> Balise ouvrante Balise fermante
  • 8. Une balise HTML ? (2) <img src=‘logo.png’ /> Nom de l’attribut Valeur de l’attribut Balise auto-fermante
  • 9. Balises & règles syntaxiques Noms de balise standards Balise & attributs en minuscule Cohérence des inclusions
  • 10. Cohérence des balises <p> <h1>Toto</h1> <img src=‘logo.png’ /> </p> <img src=‘logo2.png’ /> <p> <h1>Toto</p> <image src=‘logo.png’ /> </h1> <IMG src=‘logo2.png’ />
  • 12. Paragraphes (1) The p element represents a paragraph. Source : w3.org List elements cannot be children of p elements Source : w3.org The p element should not be used when a more specific element is more appropriate. Source : w3.org
  • 13. Paragraphes (2) <p>Hello World</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nunc neque, condimentum convallis ante eget, faucibus fringilla augue. Duis non tortor gravida, fermentum justo quis, accumsan mi. Mauris ac fermentum dui. Curabitur tincidunt finibus dolor ac vulputate. Aliquam ullamcorper dolor vel diam imperdiet, nec congue ligula aliquam.</p>
  • 14. Titres (1) The h1–h6 elements are headings. Source : w3.org The first element of heading content in an element of sectioning content represents the heading for that section. Subsequent headings of equal or higher rank start new (implied) sections, headings of lower rank start implied subsections that are part of the previous one. Source : w3.org
  • 15. Titres (2) <h1>Hello World</h1> <h2>Hello World</h2> <h3>Hello World</h3> <h4>Hello World</h4> <h5>Hello World</h5> <h6>Hello World</h6>
  • 16. Titres (3) <h1>Apples</h1> <p>Apples are fruit.</p> <h2>Taste</h2> <p>They taste lovely.</p> <h3>Sweet</h3> <p>Red apples are sweeter than green ones.</p> <h2>Color</h2> <p>Apples come in various colors.</p> <h1>Apples</h1> <p>Apples are fruit.</p> <h3>Taste</h3> <p>They taste lovely.</p> <h3>Sweet</h3> <p>Red apples are sweeter than green ones.</p> <h4>Color</h4> <p>Apples come in various colors.</p>
  • 17. Listes (1) The ol element represents a list of items, where the items have been intentionally ordered, such that changing the order would change the meaning of the document. Source : w3.org The ul element represents a list of items, where the order of the items is not important — that is, where changing the order would not materially change the meaning of the document. Source : w3.org
  • 18. Listes (2) The li element represents a list item. If its parent element is an ol, or ul, then the element is an item of the parent element's list, as defined for those elements. Otherwise, the list item has no defined list-related relationship to any other li element. Source : w3.org
  • 19. Listes (3) <p>I have lived in the following countries (given in the order of when I first lived there):</p> <ol> <li>Switzerland</li> <li>United Kingdom</li> <li>United States</li> <li>Norway</li> </ol> <p>I have lived in the following countries:</p> <ul> <li>Norway</li> <li>Switzerland</li> <li>United Kingdom</li> <li>United States</li> </ul>
  • 20. Liens hypertexte (1) If the a element has an href attribute, then it represents a hyperlink (a hypertext anchor) labeled by its contents. Source : w3.org The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links). Source : w3.org
  • 21. Liens hypertextes (2) <a href=‘index.html’>Hello World</a> <h1> <a href=‘index.html’>Hello World</a> </h1> <a href=‘index.html’> <h1>Hello World</h1> </a> <a href=‘index.html’> <h1>Hello World</h1> <p>Lorem Ipsum</p> </a>
  • 22. Chemins & arborescence (1) Chemin relatif Chemin absolu site/index.html La cible va être cherchée par le navigateur à partir de la page html qu'il interprète, dans le sous-répertoire "site". /site/index.html La cible va être cherchée par le navigateur à partir de la racine dans le sous-répertoire "site".
  • 23. Chemins & arborescence (2.1) Dossier www / racine du serveur Dossier articles Dossier templates page.html footer.html news.html list.html index.html about.html Dossier portfolio projet.html ref.html A partir de list.html - /about.html
  • 24. Chemins & arborescence (2.2) Dossier www / racine du serveur Dossier articles Dossier templates page.html footer.html news.html list.html index.html about.html Dossier portfolio projet.html ref.html A partir de about.html - index.html
  • 25. Chemins & arborescence (2.3) Dossier www / racine du serveur Dossier articles Dossier templates page.html footer.html news.html list.html index.html about.html Dossier portfolio projet.html ref.html A partir de ref.html - ../articles/templates/footer.html
  • 26. Chemins & arborescence (2.4) Dossier www / racine du serveur Dossier articles Dossier templates page.html footer.html news.html list.html index.html about.html Dossier portfolio projet.html ref.html A partir de news.html - ./templates/page.html
  • 29. Base d’une page web <!doctype html> <html> <head> <!-- Méta-informations --> </head> <body> <!-- Contenu de la page --> </body> </html>
  • 30. Doctype ? The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. Source : w3schools.com The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. Source : w3schools.com
  • 31. Méta-informations (1) L'élément HTML Head Element (<head>) fournit des informations générales (metadata) sur le document, incluant son titre et des liens ou des définitions vers des scripts et feuilles de style. Source : https://developer.mozilla.org
  • 32. Méta-informations (2) <head> <title>Titre du document</title> <meta charset="utf-8"> </head>
  • 33. Contenu de la page (1) L'élément HTML <body> représente le contenu principal du document HTML, la partie affichée aux internautes. Il n'y a qu'un élément <body> par document. Source : https://developer.mozilla.org
  • 34. Contenu de la page (2) <!doctype html> <html> <head> <title>Titre de la page</title> </head> <body> <h1>Super titre</h1> <p>Lorem ipsum</p> </body> </html>
  • 36. Exercice 1 Intégrer la maquette fournis en utilisant uniquement les balises vue dans ce cours.
  • 37. Exercice 2 Intégrer la maquette fournis en utilisant uniquement les balises vue dans ce cours.
  • 38. Merci pour votre attention.
  • 39. Bibliographie Bien construire sa hiérarchie de titres - Laurie-Anne http://www.alsacreations.com/astuce/lire/952-bien-construire-sa-hirarchie-de-titres.html La hiérarchie des balises H1, H2, Hn... et le référencement- AxeNet http://blog.axe-net.fr/hierarchie-balises-h1-h2-hn-referencement/ A vocabulary and associated APIs for HTML and XHTML - W3C http://www.w3.org/TR/html5/ HTML5 : structure globale du document -Simon-K http://www.alsacreations.com/article/lire/1374-html-5-structure-globale-du-document.html
  • 40. Crédits HTML5 - Erick Dimas http://commons.wikimedia.org/wiki/File:HTML5_de_Erick_Dimas.jpg Hypertext Editing System (HES) console - Greg Lloyd http://commons.wikimedia.org/wiki/File:HypertextEditingSystemConsoleBrownUniv1969.jpg