Table of Contents

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!
  1. Sous votre dossier Documents, créer un répertoire WEB1)
  2. 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 ici

Choix des outils

Vous pouvez utiliser :

Mon premier exemple

Soit le code suivant qui va nous servir de base pour démarrer. 

 <!DOCTYPE html>
 <html>
<body>
<h1>niveau 1</h1>
<p>Un paragraphe.</p>
<h2>niveau 2</h2>
<p>Un autre paragraphe
pour faire joli.</p>
</body>
 </html>

A Faire :

  • Enregistrer ce fichier sous : exo0.html2)
  • Charger ce code dans un navigateur3)
  • 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 4)
    • A quoi servent les balises <h1> et <h2> ? Et <p> ? 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 <h1> ou <p> 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.

Si vous voulez en savoir plus sur Doctype dans les versions antérieures à html5

Première validation

A Faire :

  • Tester votre code dans le validateur du W3C 5) 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.
<head>
<meta charset="UTF-8">
</head>
  • Visualisez à présent votre document, les accents à présent sont interprétés par votre navigateur 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 navigateur6), l'onglet a pour nom, le nom de votre fichier. Afin de remédier à ce problème, ajouter un titre à votre document par exemple : 
<head>
<meta charset="UTF-8">
<title>Mon premier exemple </title>
</head>
  • 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 (<head>…</head>), 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 <html>)

L'attribut lang précise la langue utilisée pour le contenu de la page, lorsqu'il est placé sur la racine <html>. 

 <html lang="fr">

Une langue bien indiquée sera utile ainsi aux synthèses vocales, par exemple pour adopter le bon accent.

L'entête : la balise <head>

Les balises <head> et </head> 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 <title> (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 <meta>, et éventuellement <link>, <script> ou <style>.

D'après http://www.w3schools.com/tags/tag_meta.asp 

<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Ståle Refsnes">
</head>

L'attribut charset (sur <meta>)

Référence: http://www.alsacreations.com/article/lire/1374-html5-structure-globale-document.html

Préciser l'encodage des caractères est primordial pour exploiter la bonne page de code et ne pas se retrouver avec les caractères spéciaux ou accentués. Le choix de l'UTF-8 est désormais préconisé par le W3C pour tous les protocoles échangeant du texte sur internet (dont HTML). 

<meta charset="utf-8">

On retrouvera donc très souvent ce codage de caractères, par contre il faut toujours veiller à ce que l'éditeur permettant de coder en HTML (que ce soit un IDE tout-en-un ou un simple éditeur de texte) enregistre le fichier avec le bon encodage, et non en Latin-1 (alias ISO-5589-1) ou ANSI si la balise <meta> indique UTF-8.

Veillez à toujours placer cette déclaration d'encodage avant toutes les autres balises contenues dans la section <head>. En effet, celles-ci sont immédiatement concernées, par exemple <title> qui peut déjà faire appel à des caractères en UTF-8 ; ceci également dans un but de sécuriser l'interprétation des caractères spéciaux et prévenir les injections de contenu indésirables.

Images

Nous allons à présent ajouter une image à notre document (en savoir plus)

Exemple de code pour visualiser une image dans un document html. 

<img src="smiley.png" alt="Smiley face" height="42" width="42"/>

A Faire :

  • Modifier le fichier précédent et ajouter la référence à une image de votre choix que vous aurez placé dans votre répertoire.
  • Visualiser votre document.. Qu'en pensez-vous?
  • Retirer le dimensionnement en largeur de l'image. Re-visualiser votre document.
  • A quoi sert l'attribut alt? Mettez un nom erroné d'image, et re-testez.
  • Si vous ôtez cet attribut, votre fichier est-il toujours valide?
  • Si vous ne l'avez pas encore fait placer l'image dans un répertoire /images au même niveau que le répertoire TD1 (sous WEB), puis référencer l'image de manière relative par rapport au répertoire où vous vous situez.

Si votre environnement le permet:

  • Oter la visualisation des images dans votre navigateur. Voyez-vous l'intérêt du champs alt?
  • Ecouter le contenu de votre page web. Entendez-vous l'intérêt du champs alt?

Liens

En savoir plus sur les liens (utile pour l'exercice) 

<a href="http://www.w3schools.com">Visit W3Schools.com!</a>

A Faire :

  • Placer un lien vers l'IUT.

Tableaux

La déclaration d'un tableau se fait avec la balise conteneur <table>. Cette balise contient le tableau composé de lignes.

La balise du type conteneur <tr> permet de créer une ligne. Une ligne peut être composée de cellules.

Une cellule d'entête est créée par la balise conteneur <th>, elle permet d'indiquer le titre d'une colonne ou d'une ligne.

Une cellule de contenu est créée par la balise conteneur <td>.

Pour donner un titre à un tableau, il faut utiliser la balise

. <code html> <table border=“1”> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> </code> <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > * Créer un tableau dont les colonnes correspondent à 3 jours de la semaine, les lignes aux cours (algo, web), et les cases contiennent le nombre d'heures de la journée consacrée au cours. * Attention, évidemment, les cellules correspondant à algo et web sont des cellules d'entête (Table Header) * Si vous n'avez pas cours, laissez la case libre en utilisant &nbsp; </box> ===== Listes ===== En savoir plus sur les listes <code html> One ordered (<ol>) and one unordered (<ul>) HTML list: <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </code> <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > * En utilisant uniquement des listes (et donc pas de numéros), obtenez la visualisation suivante : </box> ===== Autres balises ===== Extrait de cours de Gaëtan Rey ===== 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é XHTML, il fallait lui associer des règles plus strictes dont voici un extrait : Extrait * Toute balise ouvrante doit être fermée, et les balises dites « vides » sont écrites avec une barre oblique finale (exemple: <br />). * 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 <code html>(<strong><span>contenu</span></strong> et pas <strong><span>contenu</strong></span>). </code> <note tip>USAGE : la plupart des développeurs web professionnels utilisent XHTML. </note> <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire : > * Vérifier que vos codes respectent bien la syntaxe XHTML. </box> <note warning>A partir de maintenant vous ne coderez plus qu'en XHTML</note> ===== Fichier par défaut ===== Quand un serveur reçoit une requête pour un nom de répertoire à la place d'un nom de fichier précis, il regarde s'il existe un document qui s'appelle index.html7) et en renvoie le contenu au navigateur qui va l'afficher. Certains serveurs, si ce fichier par défaut est absent, renvoient la liste des fichiers dans le répertoire. Donc, si vous ne voulez pas qu'ils soient visibles, n'oubliez pas le fichier par défaut !! <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire (si votre environnement le permet) : > * Tester la présence et l'absence du fichier index.html </box> ===== Présentez-vous ===== Vous devez réaliser votre page web. Nous l'améliorerons par la suite et surtout nous la mettrons en ligne. Pour en savoir plus sur les balises <box round rgb(185,211,238) rgb(220,226,255) 95%|A Faire & A Rendre (Pour ce TD, seule cette partie du travail est à rendre): > * Créer un fichier sous WEB, index.html, il contiendra votre page personnelle. Puisque vous travaillez peut-être à deux sur la même machine, un seul fichier est créé par binôme. Mais au prochain TD, vous devrez construire éventuellement par copier/modifier la page du deuxième membre du binôme. Pour l'instant, votre page doit contenir au moins les éléments suivants : * structurer votre page en utilisant des titres de niveaux différents : <h1> … </h1> à <h6> … </h6> le plus petit, non obligatoire, mais au moins deux niveaux doivent être utilisés. * Sauter une ligne : <br /> * Tracer une ligne horizontale : <hr /> * Insérer des commentaires : < !- - Ceci est un commentaire - - > (attention pas d'espace entre les tirets!!) * Utiliser des listes * Un tableau * Insertion d’image * Des liens vers : * Vers un fichier (votre CV, si vous l'avez déjà fait, sinon un fichier contenant pour l'instant uniquement nom et prénom) * Vers votre adresse email : <code html> <a href=“mailto:toto@unice.fr”>Ecrire à toto</a></code> * Et tout ce qui vous amuse et vous semble utile. * N'oubliez pas de faire une archive de votre environnement, puis respectez les contraintes de rendu données * Si vous pensez que d'autres questions à la rubrique suivante peuvent être ajoutées, envoyez les dans un fichier joint “jeSaisAussi”. </box> ===== Rendre votre page web accessible depuis l'extérieur ===== Pour en savoir plus : http://wiki.unice.fr/display/IntraSIDI/ProgWeb <note tip>Pour rendre votre page web accessible depuis l'extérieur * Vous êtes sur Sophia ou sur Nice : Vous devez déposer vos fichiers web sur lindmz.unice.fr dans un dossier web à la racine de votre répertoire personnel sur ce serveur : (putty→linserv1) et modifier les droits (chmod 755) * Accès extérieur via http://lindmz.unice.fr/users/etudiant/n/nomIdentifiant/web * Accès local via http://linserv1/users/etudiant/n/nomIdentifiant/web/ * Vous êtes sur Sophia Pour vous connecter sur ce serveur, en ligne de commande, utilisez ssh, puis créez le dossier: mkdir web ou utilisez putty Si vous vous appelez doe, rendez vous à l'adresse http://lindmz.unice.fr/users/etudiant/d/doe/web/ pour valider qu'il n'y ait pas d'erreur. Créer une page de test html, par exemple par echo “coucou” > web/index.html Retourner sur http://lindmz.unice.fr/users/etudiant/a/alt01/web/ pour vérifier que son contenu apparaît. Si tout fonctionne, vous pouvez transférer vos fichiers à l'aide de Winscp. </note> ===== Je sais répondre à ===== <box round rgb(255,204,153) rgb(255,255,204) 97%|Je sais répondre à : > * Ecrivez la structure minimale d'un document en (X)HTML5 ? * Comment “donner un titre” à une page web ? * Qu'est-ce que le balisage sémantique ? * Comment vérifier que mon document est bien formé ? * Quels exemples sont incorrects en XHTML? Donner la raison et écrivez les dans la bonne syntaxe * <code><img “moi.jpg”></code> * <code><i> Youpi! <i></code> * <code><a href=“mon fichier.html”> mon lien </a></code> * <code><p> un paragraphe</p></code> * <code><ol> toto <li> sous-titre1</li> <ul> sous-titre niveau 2</ul> </ol> </code> * <code><H1> Titre 1 </H1></code> * Quelles informations doivent être données dans mon document pour faciliter sa lecture par les navigateurs et favoriser son « identification » par les robots du web ? * Quelles informations non visibles sont également utiles à certains internautes ? * Quel fichier est affiché si seul le nom d'un répertoire est donné ? Que se passe-t-il si ce fichier n'existe pas ? Est-ce toujours le cas ? * Quand utiliser th? td''?

</box>

Autres outils

Attention, il n'est pas prévu de faire JS, Python, Php dans ce module.

1)
clique droit, nouveau, dossier
2)
Bien le placer dans le répertoire TD1, puis l'extraire : clique droit, extraire tout en ôtant l'extension exo0.html
3)
clique droit, ouvrir, c'est le navigateur Internet explorer qui s'ouvre.
4)
clique droit, ouvrir avec, visual studio 2012, puis sélectionner Développement Web
5)
Préférez un clique droit, ouvrir dans un nouvel onglet
6)
Visual Studio 2012 vous le signale également
7)
le nom du fichier dépend en fait de la configuration du serveur, index.html est un nom courant