====== Bases de la conception d'un site Web : Html ======
===== Un peu de vocabulaire =====
Version simplifiée, qui sera étayée dans les différents modules abordant le réseau, la programmation web, etc.
//Internet// : réseau d'ordinateurs connectés.\\
Les transferts de données entre les ordinateurs s'appuient sur des //protocoles// FTP, HTTP, ...\\
//Web : World Wide Web// est un moyen pour partager des informations via internet via le protocole HTTP.
Les ordinateurs qui constituent l'Internet répondent à des requêtes en « servant » des documents, d'où leur nom de //serveur//. Seuls des ordinateurs sur lesquels est installé un logiciel de services Web permettant de gérer des transactions HTTP (par exemple Apache ou Microsoft IIS) peuvent faire partie du Web. On parle de //Serveur HTTP//.
Un ordinateur connecté à Internet à une adresse //IP (Internet Protocol)//.
Pour lire les documents qui se trouvent sur un autre ordinateur, il nous faut aussi un logiciel appelé //client//. Les //navigateurs// jouent ce rôle sur le web (Chrome, Firefox, Internet Explorer sont des navigateurs).
===== Votre environnement de travail pour commencer =====
Des "notes de bas de page" vous aident à faire certaines actions, qui ne vous sont peut-être pas familières. Laisser la souris sur les chiffres correspondant, et elles s'affichent!
- 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://mbf-iut.i3s.unice.fr/doku.php?id=2013_2014:s1:docweb:html:start#rendre_votre_page_web_accessible_depuis_l_exterieur|ici]]
==== Choix des outils ====
Vous pouvez utiliser :
* **notepad++** s'il fonctionne sur votre machine, dans ce cas, il vous faut sélectionner 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 2010 (ou [[2013_2014:s1:docweb:html:visual2012|2012]] selon les machines)
* créer un fichier ... fractionner etc.
* [[http://codepen.io/anon/pen/eAayL|codePen]] (Très pratique pour le 1e TD pour tester en ligne)
===== 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.
* {{:2013_2014:s1:docweb:html: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, c'est le navigateur Internet explorer qui s'ouvre.))
* Faîtes la correspondance entre le code et sa visualisation (par exemple en modifiant le texte) pour cela vous ouvrez le fichier en utilisant ''visual studio 2012'' ((clique droit, ouvrir avec, visual studio 2012, puis sélectionner// Développement Web//))
* A quoi servent les balises ''
'' et ''
'' ? Et ''
'' ? Aidez-vous de ce qui suit pour utiliser l'environnement visual studio 2012
Attention, les copier-coller posent parfois des problèmes sur les caractères spéciaux.
==== 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. 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.
L'utilisation d'une feuille de style nous permettra par la suite d'associer à ces informations structurelles une représentation.
[[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]] ((Préférez un clique droit, ouvrir dans un nouvel onglet)) par « //upload// » du fichier.
* 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!
===== Meta-Informations : Pourquoi 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 Google Search.
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 appelé « optimisation », 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.
==== 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 ainsi 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 '''', ''