Download - Intégration #2 : HTML 101 : Back to Basics
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 nœuds liés entre eux par des hyperliens permettant de passer automatiquement d'un nœud à 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 elementsSource : 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>
<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>
Titres (3)
<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
Dossier portfolio
projet.html ref.html
index.html about.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
Dossier portfolio
projet.html ref.html
index.html about.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
Dossier portfolio
projet.html ref.html
index.html about.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
Dossier portfolio
projet.html ref.html
index.html about.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.
BibliographieBien 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/
HTML5 : structure globale du document -Simon-K http://www.alsacreations.com/article/lire/1374-html-5-structure-globale-du-document.html
A vocabulary and associated APIs for HTML and XHTML - W3C http://www.w3.org/TR/html5/
CréditsHTML5 - 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