Outils pour utilisateurs

Outils du site


cours2012:concepts_et_outils_pour_internet:preparation_tp_realisation_de_pages_simples

préparation TP Réalisation de pages simples

Le but de ce TD est de vous présenter l'activité du TP : Réalisation de pages simples

Partant des fichiers fournis, vous devez réaliser des pages HTML conformes aux images fournies.

Notions

Code HTML de base

Le code HTML minimum :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Titre Page | Titre site</title>
  </head>
  <body>
    <h1>Titre Page</h1>
    <p>Bonjour Monde</p>
  </body>
</html>

Pour chaque fichier texte, faire un fichier HTML reprenant le contenu textuel.

Important : N'oubliez pas d'éditer le contenu de l'élément <title>

Éléments sémantiques de base

Titre et paragraphe

h1,h2,h3,… et p.

Balisez le document pour qu'ils soient correctement affichés.

Liste

Listes non ordonnées

ul et li.

Elles sont fréquemment utilisées en HTML :

  • Pour des usages très naturels comme la liste des réalisations
  • Pour des usages plus formels comme grouper une succession d'éléments
    • Exemple: les vignettes de la galerie
    • Un classique et d'utiliser une liste pour les liens du menu de navigation.

Important : Le choix d'une liste (non ordonnée) n'est pas lié a l'affichage de puces. C'est le style par défaut. On peut les supprimer avec les styles CSS.

Les sections du document

la notion de section

body, section, article, aside

Le concept de section et un ajout d'HTML5. Il vise à aider à structurer le contenu indépendamment de l'usage des titres hiérarchiques.

  • body est la section de base du document.
  • Chaque section imbriquée définit une sous-partie.
    • Avec des niveaux de titre indépendant.
    • Utilisé un sous-titre défini une section implicite.
  • Il existe des section spécialisées :
    • article est un contenu qui existe indépendamment de son conteneur.
    • aside sert à recevoir un contenu corrélé à la section où il apparaît.

Pour information, voici l'arborescence des éléments que vous devez avoir sur la page less-is-more.html (à la fin du TP) :

Pour vérifier le bon usage des sections, utiliser la Bookmarklet affichant la table de matière suivant la recommandation HTML5. Vous devez voir le résultat suivant :

header et footer

Utilisé dans une section (body, section, article) ils servent à :

  • header : (entête) contenu d'introduction (au minium le titre) ou aide à la navigation.
  • footer : (pied de page) information sur le contenu (de la section en cours), lien vers d'autres documents (sources d'information).

Les liens

Faire des liens relatifs entre les pages.

Remarques :

  • Pour aller à un fichier du même dossier, il suffit de mettre son nom (avec l'extension !).
  • Si le fichier de destination est dans un sous-dossier, il faut indiquer le nom de sous-dossier avant le nom de fichier (et les séparer par / ).
  • Si le fichier de destination est dans le dossier parent, on utilise le nom de dossier spécial .. avant le nom de fichier (toujours séparer par / ).

La règle pour un lien relatif est :

  • On prend l'adresse du document actuel (affiché dans la barre d'adresse).
  • On retire le nom du document actuel.
  • On ajoute le lien relatif.

Une bonne façon de corriger les problèmes de lien, c'est de faire cette procédure à la main (en copiant/collant le texte du lien dans la barre d'adresse).

Les images

Les règles sont les mêmes que pour les liens hypertextes.

Comme elles sont dans un sous-dossier, celui-ci doit apparaître dans le lien.

Ajouter des styles CSS

On va utiliser des styles prédéfinis par la librairie Bootstrap. C'est un ensemble de styles CSS et composants JavaScript qui peuvent servir de base un projet de site WEB.

Lier une feuille de style

Télécharger le code de Bootstrap et l'extraire dans un sous-dossier.

Lier la feuille de style bootstrap/css/bootstrap.css :

Ajouter des Classes CSS

Bootstrap définit des styles qui peuvent être appliqués en ajoutant la Classe CSS à des éléments HTML :

  • container peut-être ajouté à body pour avoir un site centré en largeur fixe.
  • lead donne un style approprié à un paragraphe d'introduction.
  • unstyled peut-être ajouté à une liste pour supprimer les puces.
  • img-polaroid ajoute un cadre et une ombre à une image.

On n'est pas tenu d'ajouter Bootstrap à un projet pour obtenir les mêmes effets. Il est très simple de voir le code employé en utilisant FireBug (Firefox) ou l'inspecteur WEB (Chrome/Safari).

Valider, valider, …

Toujours valider vos fichiers. En utilisant le service en ligne du W3C ou une commende intégré à votre éditeur (Ctrl+Shift+V avec Aptana).

cours2012/concepts_et_outils_pour_internet/preparation_tp_realisation_de_pages_simples.txt · Dernière modification: 2012/09/10 22:00 (modification externe)