Outils pour utilisateurs

Outils du site


html:td2

Squelette du site

Création de pages HTML et utilisation des styles CSS (bases)

Mise en place

À la fin du projet, les documents seront à rendre dans un dossier nommé projet_html visible à l'adresse : http://src.pu-pm.univ-fcomte.fr/public/src2006/votre_login/projet_html/

Vous pouvez créer un site sous Dreamweaver qui publie dans ce dossier ou utiliser le site fait la séance précédente (pour gagner du temps).

Pages HTML brutes

Organisations des fichiers HTML

Ce travail préalable n'est en rien définitif, vous pourrez revoir l'organisation de votre site quand vous serez plus avancé dans votre travail. Si certains de vos textes manquent, vous pouvez utiliser le site http://lipsum.org pour générer du faux texte.

Votre site doit comporter un fichier index.html à la racine. C'est votre page d'accueil, la 1re page vue par les visiteurs.

Les noms des autres pages sont laissés à votre libre-choix, mais doivent respecter les critères suivants :

  • Le nom des fichiers doit refléter leurs contenus (mais rester très court)
  • Pas d'espaces ni d'accents dans les noms de fichiers.
    • Seulement des lettres de l'alphabet ou des chiffres.
    • Au besoin le caractère de soulignement « _ » ou le tiret (moins) « - » .

Remarque : pensez à respecter la case dans vos liens.

Suivant l'organisation de votre site et/ou le nombre de pages, il sera nécessaire de les organisés en créant des sous répertoires. Les règles pour les noms de répertoires sont identiques à celles des fichiers. Chaque répertoire doit comporter un fichier index.html.

Créations des fichiers

Dans un 1er temps, créez des fichiers vides pour tout ou partie de votre site. Renommez-les et placez-les dans leurs éventuels sous répertoires. La seule chose à modifier initialement est le titre des documents HTML, pour ce faire éditez le contenu de la balise <title> … </title> (en vue « Code »).

Remarque : le titre doit refléter le contenu (future) du fichier tout comme le nom de fichier. Mais il peut être plus long (d'un mot à une phrase).

Faite des expérimentations sur les sujets abordés dans la suite du document. Vous pouvez vous inspirer des exemples suivants pour les mises en forme que l'on peut obtenir simplement : exemples de typographie

Les étapes suivantes sont à répéter pour chaque fichier :

Saisie du texte brut

Copier votre texte (en vue : « Code » dans l'élément HTML BODY . Au besoin, copiez-le au préalable dans un éditeur de texte simple (Bloc note ou Scite), le but est de supprimer tous les enrichissements d'origine.

Structuration du texte

Structure de base

Utilisez :

  • les balises de titres hiérarchiques : <h1> … </h1> , <h2> … </h2> , <h3> … </h3> …
  • ainsi que les paragraphes <p> … </p>

Le but est d'avoir un document dont l'affichage semble « clair ».

  • Rappel : la présentation du texte dans le code n'a aucun rapport avec son affichage.
  • Généralement on se limite à un grand titre (H1) plus d'éventuelles sous parties (H2).
  • Le contenu de H1 reprend le titre et le développe si besoin.
  • Remarque : les premières lignes de texte doivent être une bonne introduction au document (contenir les mots clefs).

C'est utile pour le lecteur, mais aussi pour les moteurs de recherches.

P.-S. : Ne prenez pas de temps ici pour la rédaction des textes, ce n'est pas le but.

Sémantisation

Pensez à utiliser :

  • Les balises appropriées pour marquer des passages de textes <em> … </em> , <strong> …</strong>
  • Les listes (UL ou OL) pour les énumérations <ul> <li> … <li> <li>…</li> … </ul>
  • Les éléments HTML spéciaux (BLOCKQUOTE, ADDRESS… )
  • Au besoin la balise <hr />

Attention, n'utilisez pas <br />, il est peut probable que son usage soit approprié.

La clarté du document est toujours le seul objectif à ce point.

Liens Hypertextes

Un document n'est pas HTML sans liens “hypertextes”.

Marquer des passages de texte avec l'élément A pour faire des liens vers d'autres pages de votre site, ou vers des pages d'un autre site (au minimum un lien externe dans votre site).

L'adresse des pages est à placer dans l'attribut href de l'élément A.

<a href="http://google.fr">Google</a>

Un lien externe (absolu) est identique à ce que vous tapez ou visualisez dans la barre d'adresse de votre navigateur (URL).

Laisser Dreamweaver construire pour vous les liens relatifs (internes). Il omet le nom du serveur et représente le déplacement dans les répertoires pour accéder au fichier.

<a href="../partie1/page2.html">Page2 de la Partie1 depuis une autre sous-partie</a>
  • .. retourne au répertoire parent
  • partie1 va dans le répertoire 'partie1'
  • page2.html demande le fichier 'page2.html'

Remarque : pour un menu destiné à la navigation, on place les liens dans une liste à puce (UL)

La mise en forme sera changée par le biais des styles CSS (vertical, horizontal, pas de puces …).

Les images

Les fichiers des images sont à placer dans un sous répertoire images commun à tout le site et/ou propre à un sous-répertoire. L'insertion d'une image se fait en utilisant l'élément IMG l'attribut href donnant l'adresse ( Eg : relative images/mon_imge.png).

Utilisez Dreamweaver pour ce faire, il ajoutera des attributs supplémentaires (la taille).
Remarque : ne pas modifier les paramètres de tailles pour redimensionner les images. Les redimensionner avec un logiciel d'édition graphique puis importer de nouveau l'image ou éditer la balise.

L'insertion d'images est facultative à ce point. Ne faire qu'un essai, puis l'effacer. Ou alors si vous disposez d'images quasi définitives.

Mise en forme typographique

Le but est d'explorer les possibilités offertes par les propriétés CSS.

Dans un premier temps, on va se limiter à la mise en forme du texte (titre, paragraphes, liens, listes de liens, …).

Ce que vous allez faire ici n'engage en rien le graphisme final de vos pages. Vous verrez en graphisme les possibilités typographiques et leurs usages.

Des liens vont vous renvoyer vers la documentation SELFHTML qui a pour principal intérêt d'être exhaustive.

Toutes les possibilités ne sont pas à utiliser, au final c'est votre graphisme qui déterminera quelles propriétés CSS employer.

Mise en place d'un fichier CSS

La typographie n'a aucune raison de varier entre les pages de votre site. Vous allez utiliser une possibilité très utile des CSS : un fichier CSS peut être utilisé par plusieurs pages.

Créez un fichier nommé typo.css à la racine de votre site. Pour se faire se rapporter à la fin du didacticiel sur Dreamweaver vu la séance précédente : Prise en main de Dreamweaver.

Éditer le code de ce fichier, visualiser les résultats sur différentes pages de ce site.

Les bases des sélecteurs

Dans un premier temps, vous allez utiliser des propriétés CSS simples pour visualiser les possibilités offertes par les sélecteurs CSS.

L'héritage des propriétés

Certaines (mais pas toutes) propriétés CSS sont héritées par les enfants de l'élément a qui elles sont appliquées.

body { 
 font-family:arial; 
 color:blue; 
 border:solid 1px black; 
}
  • Tous les textes passent en police 'Arial' et en couleur bleu. Ces propriétés sont héritées.
  • La page est encadrée par un cadre noir. Seule la page est encadrée, cette propriété n'est pas héritée par défaut.

La règle, qui détermine si une propriété donnée est héritée, a été fixée selon le sens commun.
Exemple : encadrer un élément, ne veux par dire que l'on désire que tout soit encadré.

Il est possible, de fixer les propriétés propres à une famille d'éléments. Cela prend le pas sur les propriétés héritées.

p { 
 color:black; /*Tous les paragraphes passent en noir.*/
}

Utiliser cette possibilité pour éviter de répéter les mises en forme communes à toute la page (ou à une sous-partie)

Les sélecteurs multiples

En utilisant une liste de sélecteurs séparés par des virgules, vous pouvez appliquer la même mise en forme à plusieurs familles d’éléments.

h1, h2, h3 {color:red;} /*Tous les titres en rouge.*/

On évite ainsi de répéter la même propriété plusieurs fois. Cela facilite ma mise à jour.

Les pseudo sélecteurs

Utilisés principalement pour les liens, ils permettent de fixer les propriétés CSS en fonction d'autres paramètres. Ici « l'état » du lien : :link, :visited, :hover, :active, :focus (pseudo-formats pour les liens)

Les sélecteurs imbriqués

Ils permettent de varier la mise en forme en fonction de place d'un élément dans le document. Pour ce faire, l'on écrit les sélecteurs séparés par des espaces pour marquer l'imbrication des éléments HTML.

p a:link {color:red;} /* les liens dans les paragraphes sont en rouge */ 
ul a:link {color:black;} /* les liens dans les listes à puce sont en noir */ 

L'utilisation des attributs universels id et class

L'attribut id

Si vous désirez appliquer des mises en forme spécifiquement à un élément, donnez à son attribut id une valeur unique.

<ul id="menu"> 
 <li><a href="http:%%//%%google.fr">google</a></li> 
 <li><a href="http:%%//%%yahoo.fr">yahoo</a></li> 
</ul> 
#menu {border:1px solid black;} /* encadre le menu, mais pas les autres listes */ 
#menu a:link, #menu a:visited {color:green;} /* on peut le combiner avec d'autres sélecteurs, ici on fixe la couleur des liens dans le menu et juste dans le menu */ 
L'attribut class

Si vous voulez personnaliser la mise en forme de plusieurs éléments disséminés dans le document et/ou appartenant à des familles différentes.

Pour ce faire, donnez à leurs attributs class une valeur déterminée.

<p class="droite"> ... </p> 
<h2 class="droite"> ... </h2> 
.droite {text-align:right;} /* les deux à droite */ 
h2.droite {margin-right:60px;} /* une marge seulement pour les titres */ 
Les éléments anonymes SPAN et DIV

Si aucune balise ne convient sémantiquement, utilisez les éléments DIV et SPAN. Ces balises doivent impérativement être combinées avec les attributs class ou id.

<p> ... <span class="en_rouge">en rouge</span> ... </p> 
.en_rouge {color:red;} 

Pour finir :

Faite des expérimentations sur les sujets abordés. Vous pouvez vous inspirer des exemples suivants pour les mises en forme que l'on peut obtenir simplement : exemples de typographie

Une partie des exemples recouvre le positionnement. Cette notion sera mise en œuvre le TD suivant. Mais vous pouvez faire des essais et demander de l'aide si vous êtes suffisamment avancé.

html/td2.txt · Dernière modification: 2008/04/24 22:00 (modification externe)