===== xHTML, une affaire de balises =====
** Toutes les questions du TD sont à répondre dans un document xHTML validé qui contiendra les noms et prénoms du binôme.
Ce fichier de réponse et votre page perso seront à déposer sous Jalon, la veille au soir du prochain TD au plus tard.**
===== Votre environnement de travail pour commencer =====
- Sous votre dossier ''Documents'', créer un répertoire ''WEB''((clique droit, nouveau, dossier))
- Sous le répertoire ''WEB'', créer un répertoire ''TD1''. A chaque séance, vous créerez un nouveau répertoire.
**Vous pouvez aussi faire le choix de créer directement des pages accessibles depuis l'extérieur**, ce qui change un peu la structure, voir [[https://wiki.unice.fr/display/IntraSIDI/ProgWeb|l'aide du département info]] et/ou le paragraphe "Rendre votre page web accessible depuis l'extérieur" en bas de page.
==== Choix des outils ====
Nous vous conseillons d'utiliser [[http://brackets.io/|Brackets]].
Vous pouvez utiliser :
* [[https://notepad-plus-plus.org/fr/|notepad++]]. Sélectionnez le bon encodage de vos fichiers :
* dans "Encoding", sélectionner [[http://fr.wikipedia.org/wiki/UTF-8|UTF-8 sans BOM]]
* dans "Langage", sélectionner "HTML"
* VisualStudio, Codepen.io, ... -> vous assumez.
Au sein du navigateur, pensez à utiliser la console du développeur web.
===== Un peu de vocabulaire =====
//Internet// : le **réseau** mondial qui permet d’échanger de l’information **entre ordinateurs ou objets connectés** grâce à des **protocoles applicatifs** comme HTTP (Web), SMTP (e-mail) ou FTP (fichiers) supportés par le protocole réseau Internet Protocol (IPv4 ou IPv6).\\
//Web : World Wide Web (WWW)//, communément appelé le Web, est un système hypertexte public fonctionnant sur Internet. Le Web permet de consulter, avec un navigateur, des pages accessibles sur des sites grâce au protocole HTTP. Il n’est qu’une application d’Internet, au même titre que l’e-mail.
Les ordinateurs constituant Internet prennent le rôle de clients ou de serveurs, respectivement s'ils envoient des requêtes à de l'information ou s'ils y répondent.
Un ordinateur a besoin de pouvoir gérer les transactions HTTP pour appartenir au Web.
Un ordinateur connecté à Internet à une adresse //IP (Internet Protocol)//.
Pour lire les documents qui se trouvent sur un autre ordinateur, il faut sur notre ordinateur client aussi un logiciel appelé client web.
Les //navigateurs// (Chrome, Firefox, Internet Explorer) jouent ce rôle sur le web.
Ces définitions simplifiées seront étayées dans les différents modules abordant le réseau, la programmation web, etc.
===== Mon premier exemple =====
Soit le code suivant qui va nous servir de base pour démarrer.
niveau 1
Un paragraphe.
niveau 2
Un autre paragraphe
pour faire joli.
* {{:2016_2017:s1:webdoc:exo0.html.zip|Enregistrer ce fichier sous}} : ''exo0.html''((Bien le placer dans le répertoire ''TD1'', puis l'extraire : clique droit, //extraire tout// **en ôtant l'extension exo0.html**))
* Charger ce code dans un navigateur((clique droit, "ouvrir", ou "ouvrir avec" si ce n'est pas un navigateur par défaut.))
* Faîtes la correspondance entre le code et sa visualisation (par exemple en modifiant le texte) pour cela vous ouvrez le fichier en utilisant Brackets ((clique droit, ouvrir avec, Brackets))
* À quoi servent les balises ''
'' et ''
'' ? Et ''
'' ?
Attention, les copier-coller posent parfois des problèmes sur les caractères spéciaux, cf encodage.
==== Balisage sémantique ====
Les balises ''
'' ou ''
'' par exemple ont pour objectif non pas de donner des instructions sur l'aspect du contenu mais de le structurer, d'apporter du sens sur l'élement. C'est pourquoi on parle de balisage sémantique.
Ce n'est pas la manière dont le titre est visualisé qui nous importe mais le fait qu'il s'agisse d'un titre.
Vous constatez ici un style par défaut, défini par votre navigateur, sur ces balises.
L'utilisation d'une feuille de style nous permettra par la suite d'associer une représentation spécifique à ces informations structurelles.
[[2013_2014:s1:docweb:html:doctype|Si vous voulez en savoir plus sur Doctype dans les versions antérieures à html5]]
===== Première validation =====
* Tester votre code dans le [[http://validator.w3.org/|validateur du W3C]] ((Clic droit, ouvrir dans un nouvel onglet)) par « //upload// » du fichier ou « //direct input// ».
* Vous constatez qu'il vous est demandé de préciser l'« encodage » des caractères. Pour mieux comprendre, ajoutez dans votre code devant ''niveau'', "entête" en mettant bien les accents, puis visualisez votre document. Que constatez-vous? Rien...Internet Explorer et Firefox ont automatiquement déterminé l'encodage adéquate...!
* Ajoutez les lignes suivantes, entre les balises ''html'' et ''body''.
* Visualisez à présent votre document, les accents à présent sont interprétés par votre navigateur [[http://www.w3.org/International/questions/qa-html-encoding-declarations|En savoir plus sur l'encodage]]
* Re-validez votre document. Vous constatez qu'il manque un titre à votre document. Vous pouvez le voir au niveau de votre navigateur((Visual Studio 2012 vous le signale également)), l'onglet a pour nom, le nom de votre fichier. Afin de remédier à ce problème, ajouter un titre à votre document par exemple :
Mon premier exemple
* Re-validez votre document. Vous n'avez plus d'erreur!
===== xHTML =====
Avec la popularité du web est venue la nécessité de partager toutes sortes d'informations qui peuvent être aussi bien des équations mathématiques, des partitions de musique, que des descriptions de composants chimiques. Il était donc nécessaire de permettre un balisage spécialisé par domaine et donc de définir des « langages à balises spécialisés ». C'est le rôle de ''XML''.
Pour que HTML soit un tel langage dédié au web, nommé [[https://www.w3.org/TR/xhtml1/#xhtml|xHTML]], il fallait lui associer des règles plus strictes dont voici un [[http://www.alsacreations.com/article/lire/44-difference-html-xhtml.html|extrait]].
* Toute balise ouvrante doit être fermée, et les balises dites « vides » sont écrites avec une barre oblique finale (exemple: '' '').
* Les noms des balises et des attributs sont écrits en minuscules.
* Les valeurs des attributs sont encadrés par des '//quotes//' (guillemets droits simples) ou des "//double quotes//" (guillemets droits doubles).
* Chaque attribut doit avoir une valeur (pas d'attribut vide comme checked, qui doit être écrit //checked="checked"//).
* Les éléments HTML doivent être correctement imbriqués
(
contenu
et pas
contenu
).
A partir de maintenant vous ne coderez plus qu'en XHTML
Pour ceux qui souhaiteraient en savoir plus, voici une [[https://wiki.whatwg.org/wiki/HTML_vs._XHTML|liste assez complète (en)]] et... assez technique des différences entre HTML5 et XHTML5.
==== Prise de recul et Grammaire ====
Une page web est donc un **document** contenant **des balises**.
Ces balises forment **un arbre** et définissent la **sémantique** des éléments.
Une balise peut contenir des **attributs**, qui sont des paires clef-valeur.
Une balise peut avoir comme contenu (ce qui se trouve entre la balise ouvrante et la balise fermante) du texte et/ou d'autres balises qui seront ses filles.
Toute balise ouvrante doit avoir une balise fermante correspondante, et vice-versa.
La syntaxe générale est ainsi la suivante :
contenu
ou '''' pour les balises auto-fermantes.
===== Méta-Informations : Pour quoi faire? =====
Nous venons de voir que dans l'entête de notre document (''
''...''''), certaines informations sont exigées. Nous en avons perçu l'intérêt pour l'internaute qui arrive sur cette page, mais ces informations sont aussi essentielles aux navigateurs et aux robots qui indexent nos pages, par exemple pour des moteurs de recherche comme celui de Google, de DuckDuckGo, ...
Ces moteurs décident alors qu'elles sont les pages les plus «pertinentes» en réponse à une requête.
Faire en sorte que sa page web soit bien «évaluée» (apparaisse dans les premières suite à une recherche) est le processus d'optimisation appelé en anglais //Search Engine Optimization// (SEO).
Nous ne l'aborderons pas en détail mais il sous-tend de nombreux éléments présentés dans la suite de cet enseignement et présente un enjeu clef en matière de visibilité sur le Web.
==== L'attribut lang (sur ) ====
L'attribut //lang// précise la langue utilisée pour le contenu de la page, lorsqu'il est placé sur la racine ''''.
Une langue bien indiquée sera utile aux synthèses vocales, par exemple, pour adopter le bon accent.
==== L'entête : la balise ====
Les balises '''' et '''' regroupent toutes les méta-informations, c'est-à-dire les données qui ne sont pas représentées directement à l'écran dans le rendu du document, mais qui lui sont tout de même liées : le titre dans '''' (extrêmement recommandé), les autres méta-informations variées (facultatives : mots-clés, description générale de la page) dans zéro ou plusieurs '''', et éventuellement '''', ''