Création de pages HTML et utilisation des styles CSS (bases)
À 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).
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 :
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.
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 :
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.
Utilisez :
<h1> … </h1> , <h2> … </h2> , <h3> … </h3> … <p> … </p> Le but est d'avoir un document dont l'affichage semble « clair ».
H1) plus d'éventuelles sous parties (H2). H1 reprend le titre et le développe si besoin. 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.
Pensez à utiliser :
<em> … </em> , <strong> …</strong> … UL ou OL) pour les énumérations <ul> <li> … <li> <li>…</li> … </ul>BLOCKQUOTE, ADDRESS… ) <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.
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 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.
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.
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.
Dans un premier temps, vous allez utiliser des propriétés CSS simples pour visualiser les possibilités offertes par les sélecteurs CSS.
font-family (Famille de police) color (Couleur du texte) border (Bordures)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; }
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)
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.
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)
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 */
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 */
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 */
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;}
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é.