Cours Conception de Sites Web L2 MASS 2011/2012

 <?xml version="1.0" encoding="utf-8" ?>
		<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
		<html xmlns="http://www.w3.org/1999/xhtml">
		
		<head>
		        <title>pages pour la programmation web de login</title>
		</head>
		<body>
		    
		</body>
		</html>

Si le modèle de votre document est html, alors votre fichier contiendra au moins les lignes suivantes :

		
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
		<html>
		<head>
		        <title>pages pour l'option IPW de login</title>
			<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
		
		</head>
		<body>
		    
		</body>
		</html>

  Note : la balise meta sert à indiquer l'encodage du fichier, ce qui est demandé par le validateur.

Sur votre compte (linux), créez à la racine un répertoire www s'il n'existe pas encore.  Naviguez avec l'explorateur de fichier graphique ou en ligne de commande, dans une console, à l'aide des commandes cd (pour changer de répertoire) et ls (pour lister le contenu d'un répertoire) et mkdir (pour créer un répertoire).  Ce répertoire sera votre site web sur le serveur www-mips.unice.fr. Créer un fichier html ou xhtml valide que vous appellerez index.html dans le votre répertoire www.  Pour créer le fichier, utilisez n'importe quel éditeur de texte (vi, emacs, gedit, kate, quantas+, kwrite, etc.) et sauvegardez le nouveau fichier dans votre répertoire www, sous le nom index.html . Visualisez votre nouveau document dans un navigateur.

Dans votre document, modifiez ce qui est écrit dans la balise "title". Rafraîchissez (rechargez) la page dans votre navigateur. Que constatez-vous ? Où cela se répercute-t-il ? Vous l'aurez compris, tous vos documents dans le répertoire www seront visibles via le Web et que pour voir les modifications de ces documents, il faudra recharger la page web en question.

Dans votre document, modifiez ce qui est écrit entre la balise "body". Par exemple, dans une balise "div", écrivez "bienvenue sur ma page web étudiante". Rajoutez des espaces et des retours à la ligne dans ces quelques mots. Que constatez-vous ? Changez la balise div par une balise pre ? Quel est l'impact sur le document ?

Pour y accéder à votre page web, l'url est la suivante : http://www-mips.unice.fr/~login où login doit être remplacé par votre identifiant étudiant.

Note. N'hésitez pas à faire référence à des sources externes pour apprendre html et css.

Note. Ne mettez pas d'espaces dans les noms des fichiers !

Note. Pour accéder à distance à votre dossier www utiliser sesame (aller sur ent.unice.fr puis sur l'onglet "Gestion des identités numériques"). Sinon, vouz pouvez travailler ches vous (il suffit un éditeur de texte) et ammener vos fichiers sur une clef usb.

2. L'HTML

Pour mette du texte dans un document html il faut toujours le placer dans un box. Pour créer un box non formatté utilisez la balise <div> ; pour créér un paragraphe, en revanche, utilisez la balise <p>, qui après le texte ajoute un saut de ligne. Il existe aussi un box de texte pre-formatté, qui se réalise à travers la balise <pre> (le résultat est celui des modèles de fichier html et xhtml plus en haut).
N'oubliez pas de fermer les balises à chaque fois !
Note. Les balises p et pre (au contraire de la balise div) ne peuvent pas être imbriqués !

Pour écrire un commentaire dans le fichier html (texte non affiché dans la page web) placez-le entre .

Pour faire un retour à la ligne, utilisez <br> (en html) ou <br/> (en xhtml).

Pour insérer un titre utilisez (du plus grand au plus petit) <h1>, <h2>, <h3>, <h4>, <h5>, <h6> ou <h7>.

Pour mettre un texte en italique utilisez la balise <em> ; pour mettre un texte en gras utilisez la balise <strong>.

Les caractères spéciaux

Pour écrire les caractères spéciaux (y compris les lettres accentuées) faire référence au tableau suivant.

Caractère	Code ISO	Code HTML
"	"	"
&	&	&
€		€

'
ƒ
"
…
+
#
^
‰
Š
<		<
Œ

Z


'
'
"
"
*
-
--
~
™
š
>		>
œ		&oelig;

z
Y		&Yuml;
Space
¡	¡	¡
¢	¢	¢
£	£	£
¤	¤	¤
¥	¥	&yen
¦	¦	¦
§	§	§
¨	¨	¨
©	©	©
ª	ª	ª
«	«	«
¬	¬	¬

®	®	®
¯	¯	&masr;
°	°	°
±	±	±
²	²	²
³	³	³
'	´	´
µ	µ	µ
¶	¶	¶
·	·	·
¸	¸	¸
¹	¹	¹
º	º	º
»	»	»
¼	¼	¼
½	½	½
¾	¾	¾
¿	¿	¿
À	À	À
Á	Á	Á
Â	Â	Â
Ã	Ã	Ã
Ä	Ä	Ä
Å	Å	Å
Æ	&#198	&Aelig
Ç	Ç	Ç
È	È	È
É	É	É
Ê	Ê	Ê
Ë	Ë	Ë
Ì	Ì	Ì
Í	Í	Í
Î	Î	Î
Ï	Ï	Ï
Ð	Ð	ð
Ñ	Ñ	Ñ
Ò	Ò	Ò
Ó	Ó	Ó
Ô	Ô	Ô
Õ	Õ	Õ
Ö	Ö	Ö
×	×	×
Ø	Ø	Ø
Ù	Ù	Ù
Ú	Ú	Ú
Û	Û	Û
Ü	Ü	Ü
Ý	Ý	Ý
Þ	Þ	þ
ß	ß	ß
à	à	à
á	á	á
â	â	â
ã	ã	ã
ä	ä	ä
å	å	å
æ	æ	æ
ç	ç	ç
è	è	è
é	é	é
ê	ê	ê
ë	ë	ë
ì	ì	ì
í	í	í
î	î	î
ï	ï	ï
ð	ð	ð
ñ	ñ	ñ
ò	ò	ò
ó	ó	ó
ô	ô	ô
õ	õ	õ
ö	ö	ö
÷	÷	÷
ø	ø	ø
ù	ù	ù
ú	ú	ú
û	û	û
ü	ü	ü
ý	ý	ý
þ	þ	þ
ÿ	ÿ	ÿ

Les liens

Pour mette un lien à un texte il faut utiliser la balise <a>. Il faut ajouter à la balise l'option href="", pour indiquer la cible du lien. Le lien peut avoir comme cible quelque chose qui se trouve à l'extérieur de votre site (dans ce cas il faut mettre l'url) ou à l'intérieur (dans ce cas il faut mettre le nom du fichier). Par exemple :

Ce <a href="http://www.google.fr/">site</a> est utile (lien externe).
Cette <a href="travaux.html">page de mon site</a> est intéressante (lien interne vers la page travaux.html contenue dans votre dossier www).

Notez qu'on peut mettre comme cible d'un lien un fichier quelconque (image, pdf, etc.), pas nécessairement une page html. L'important c'est que sont parcours soit une url (pour un lien externe), ou un parcours relatif (pour un lien interne). Par exemple :

Ce <a href="http://deptinfo.unice.fr/~renevier/introweb/html/exo/text.pdf">document</a> est intéressant (lien externe).
Cette <a href="img/logos/image1.jpg">image</a> est belle (lien interne vers le fichier image1.jpg qui se trouve dans le sous-dossier logos du sous-dossier image du dossier www).

Créez un nouveau document html ou xhtml, que vous appellerez exo2.html, et créez dans ce document un lien vers index.html. Créez aussi, dans le document index.html, un lien vers exo2.html. Privilégiez les liens relatifs.

Créez, à l'intérieur du dossier www, un nouveau dossier et applellez-le exo3. Créez dans le dossier exo3 un nouveau document html ou xhtml, que vous appellerez exo3.html, et créez dans ce document un lien vers index.html. Créez aussi, dans le document index.html, un lien vers exo3.html. Pour remonter d'un niveau dans l'arbre des fichiers il faut utiliser ../

Controlez que vos pages index.html, exo2.html, exo3.html soient valides, à travers l'outil de validation du W3C (http://validator.w3.org/). Note: vous devez insérer dans la validateur les URL de vos pages web (http://www...), et non pas les parcours locaux dans votre machine de ceux-ci (file:///...).

Les listes

Pour créer une liste non ordonnée utilisez la balise <ul>. A son intérieur, chaque élément sera à l'intérieur d'une balise <li>. Par exemple :

<ul>
	<li> Premier truc ; </li>
	<li> Deuxième truc ; </li>
	<li> Troisième truc. </li>
</ul>

Le résultat sera :

Premier truc ;
Deuxième truc ;
Troisième truc.

Pour créer une liste ordonnée utilisez la balise <ol>. A son intérieur, chaque élément sera à l'intérieur d'une balise <li>. Par exemple :

<ol>
	<li> Premier truc ; </li>
	<li> Deuxième truc ; </li>
	<li> Troisième truc. </li>
</ol>

Le résultat sera :

Premier truc ;
Deuxième truc ;
Troisième truc.

Pour créer une liste de description utilisez la balise <dl>. A son intérieur, on place les étiquettes de description à l'aide de la balise <dt> et les éléments à l'aide de la balise <dd>. Par exemple :

<dl>
  <dt> Café </dt>
    <dd> noir </dd>
    <dd> chaud </dd>
  <dt> Lait </dt>
    <dd> blanc </dd>
    <dd> froid </dd>
</dl>

Le résultat sera :

Café: noir; chaud
Lait: blanc; froid

Reproduisez la liste suivante :
liste

Reproduisez la page à l'adresse suivante : http://www.i3s.unice.fr/~fici/l2mass/pagecv.jpg.

3. Les feuilles de style CSS

Pour définir le style de chaque élément d'une page web (couleur, police, images, marges, etc.) on définit le style de chaque élément à travers le CSS (Cascading Style Sheet).
En général, les déclarations de style suivent la syntaxe :

balise {
propriété: valeur;
propriété: valeur;
...
}

Par exemple, pour attribuer la couleur rouge et la police "Georgia" à tous les titres h3 d'une page web on déclare le style ainsi :

h3 {
font-family: Georgia;
color: red;
}

On mettra toutes les déclarations de style dans un seul fichier, qui doit avoir extension .css, par exemple premierstyle.css, et qui se trouvera dans le même répertoire de la page à laquelle on veut appliquer le style.
Finalement, il faut insérer, dans la page html à laquelle on veut applique le style, le lien au fichier css qu'on veut charger, à travers la balise spéciale "link", qu'il faut placer dans la section head de la page html. Par exemple, si le fichier css s'appelle premierstyle.css, on doit mettre les lignes suivantes dans la section head de la page html :

<link rel="stylesheet" type="text/css" media="screen" 
href="premierstyle.css" />

Ouvrez un nouveau fichier texte, copiez la définition de style ci-dessus pour les titres h3, puis sauvegardez le fichier avec le nom premierstyle.css dans la répertoire www. Dans votre page index.html ajoutez le lien au fichier premierstyle.css. Mettez un titre h3 dans la page index.html et constatez l'effet.

Note. Dans un fichier css, tous ce qui ne respecte pas la syntaxe du css est ignoré.

Pour mettre un commentaire il faut le placer entre /* et */

Il y a beaucoup de choix pour les polices ; il y a les familles de polices : Georgia, Arial, Verdana, "Times New Roman" (si le nom de la police contient des espaces il faut mettre les guillemets "" ), Courier, etc. Et les groupes de familles : serif, sans-serif, monospace, etc. Une famille de police est chargée seulement si la machine qui visualise votre page web a cette police installée ! Pour cette raison, il vaut mieux déclarer plusieurs familles de polices ; le navigateur cherchera alors à charger la première, sinon la deuxième, etc. Par exemple :

font-family: Georgia, Arial, Verdana, "Times New Roman", sans-serif;

Pour plus d'informations sur les polices et les différents propriétés que l'on peut modifier regardez par exemple cette page.

Les valeurs possibles pour les couleurs sont : soit leur nom (red, green, etc.), soit leur code html, par exemple #FFFF00 pour le jaune, #FF0000 pour le rouge, etc.
Pour une liste des codes des couleurs (n'oubliez pas de mettre le symbole # avant le code de la couleur !) cliquez ici.

Les valeurs possibles pour les mesures (par exemples les marges) sont : cm, mm (centimètres, millimètres), px (pixels), em (dimension d'une lettre m), ex (dimension d'une lettre x), ou encore en pourcentage (par rapport à l'élément conteneur).
Il existe deux types de marges : les marges externes (propriété margin) et celles internes (propriété padding). On peut déclarer les valeurs des quatre cotés séparement ou toutes ensembles, dans ce dernier cas l'ordre est : top, right, bottom, left (pour plus de renseignements regardez par exemple ici). Par exemple :

margin: 3px 100px 2em 3ex;

est équivalant à :

margin-top: 3px; 
margin-right: 100px;
margin-bottom: 2em;
margin-left: 3ex;

Note. Pour centrer un élément div dont on a déclaré les dimensions, il suffit de déclarer margin: auto;

Créez dans votre répertoire www un répertoire exocss, et placez là-dedans une nouvelle page html ou xhtml. Mettez dans cette page un div, contenant un texte de quelques lignes.
Dans le même répertoire créez un fichier css nommé style1.css, donnez à la balise body la valeur green pour la propriété background-color (change la couleur de fond) ; pour le div, réglez la largeur à 400px (utilisez la propriété width), la hauteur à 600px (utilisez la propriété height), la couleur de fond white, les marges internes de 4em (utilisez la propriété padding), et les marges externes pour qu'il soit centré dans la page (utilisez la propriété margin). Le texte doite être en italique (utilisez la propriété font-style) et de couleur bleu (utilisez la propriété color). Finalement, associez à la page html le style que vous venez de créer.

Toujours dans le répertoire exocss créez une deuxième feuille de style nommée style2.css. Les seules différences avec style1.css seront : la couleur de fond de body bleu et le texte en vert. Changez le style de la page html avec style2.css en modifiant le link dans le head.

Si on veut changer le style d'un élément seulement quand il se trouve à l'intérieur d'un autre élément, on peut le faire avec css avec la syntaxe:

balise1 balise2 {
propriété: valeur;
propriété: valeur;
...
}

Seulement les balises "balise2" qui se trouvent imbriquées dans une balise "balise1" recevront le style déclaré. Par exemple, si on veut que toutes les listes ordonnées qui se trouvent à l'intérieur d'une liste non ordonnée aient le texte de couleur bleu, on mettra dans le css :

ul ol {
color: blue;
}

Créez deux div imbriqués, et sélectionnez la couleur de fond rouge pour le div interne.

Les classes

En css, pour donner des styles différents à un même élément, par exemple pour différencier deux div, on peut définir des classes. Supposons qu'on veut des div avec couleur de fond bleu et d'autres avec couleur de fond rouge. Dans le css on mettra la déclaration des div avec le nom de chaque classe après un point :

div.bleu {
background-color: blue;
}

div.rouge {
background-color: red;
}

Maintenant, dans le fichier html on pourra utiliser les deux classes en spécifiant l'option class dans l'ouverture de la balise div, par exemple :

<div class="rouge">
ceci est un div rouge.
</div>

<div class="bleu">
ceci est un div bleu.
</div>

Créez une page contenant deux div de hauteur 100px, un avec couleur de fond rouge et texte de couleur noir, l'autre avec couleur de fond bleu et texte de couleur blanc.

Les id

Les id sont des étiquettes utilisés pour donner des propriétés à tous les éléments qui ont la même étiquette. Par exemple si on met dans le css l'étiquette suivante :

#bleu {
background-color: blue;
}

alors dans le fichier html pour tout élément ayant étiquette "bleu" aura couleur de fond bleu.

<div id="bleu">
ceci est un div bleu.
</div>

<p id="bleu">
ceci est un paragraphe bleu.
</p>

Dans le css, on peut mettre une étiquette à une balise particulière seulement, par exemple comme ça :

div#bleu {
background-color: blue;
}

De cette manière, seul les div d'étiquette bleu auront le fond bleu.

Les pseudoclasses

Si on veut différencier une propriété pour les liens non-visités/visités/survolés il faut utiliser les pseudoclasses. Par exemple si on met dans le css:

a:link {color: blue;}      
a:visited {color: red;} 
a:hover {color: yellow;}

on aura les liens non visités de couleur bleu, les liens visités de couleur rouge, et quand on passe la sourie sur un lien il deviendra jaune.

Note. La pseudoclasse hover peut être utile également pour d'autres éléments que les liens.

Il existe aussi d'autres pseudoclasses (first-child, first-line, first-letter, before, after), renseignez vous sur internet, par exemple ici.

Les éléments flottants et la structure de la page

Avec le css on peut créer de éléments qui apparaissent à coté l'un de l'autre et non pas l'un après l'autre comme dans le flux normal (pensez à des div). Ceci permet notemment de créer des div qui donnent une structuration à la page web. Par exemple, on met souvant un div sur la gauche pour y placer un menu. Pour réaliser une mise en page à colonnes avec les div, il faut déclarer dans le css que certains div sortent du flux, à gauche ou à droite ou en bas. Par exemple, regardez le code html et le css de cette page à trois colonnes, que vous pouvez modifier à votre gré (par exemple en ne mettant qu'une partie des div). Avec Firefox, vous pouvez regarder le code html d'une page web à travers la combinaison de touches CTRL+U. Une fois que vous visulaisez le code, répérez le lien au fichier css contenant le style de la page et cliquez sur ce lien pour affichier le style.
N'hesitez pas à chercher sur internet des renseignements complémentaires sur les éléments flottants. Pour un premier pas, regardez par exemple cette page. Un peu plus avancé ici.

4. Conclusion

Maintenant vous êtes assez grands pour marcher sur vos jambes, vous pouvez consulter sur internet les sites sur css pour apprendre plus de techniques et de propriétés possibles pour les éléments. N'hésitez pas à emprunter un texte sur css en bibliothèque.

5. Correction du partiel CSS

Les réponses au qcm se trouvent dans ce fichier. La réponse à la dernière question se trouve ici (affichez le code source puis cliquez sur le fichier css).

6. Consignes pour la réalisation du site

Vous devez réaliser un site web correspondant à des critères minimums :

Le site doit comporter au moins trois pages, avec menu de navigation entre les pages.
Le site doit être accessible depuis internet à l'adresse http://www-mips.unice.fr/~login, où "login" est votre login étudiant.
Toutes les pages du site doivent être en html strict ou xhtml strict (pas de php, javascript, flash, etc.).
Tout élément de style et de mise en page doit être placé dans un fichier css.
Les pages doivent contenir le bouton de validation html et le bouton de validation css du W3C, et, bien sûr, être toutes valides.

En ce qui concerne le contenu de votre site, vous avez libre choix, mais visez à réaliser un site qui puisse susciter l'intérêt des internautes !

Lors de la dernière séance du cours (le 6 décembre) chaque étudiant disposera de 5 minutes pour illustrer personnellement le travail réalisé, et devra répondre à des questions sur les choix techniques effectués pour la conception et la construction du site. Les critères d'évaluation pour la note du contrôle final seront :

La qualité du code html
La qualité du code css
L'aspect graphique du site
La qualité globale du site
La discussion orale sur le site

Menu

1. Prise en main et création de votre page

2. L'HTML

Les caractères spéciaux

Les liens

Les listes

3. Les feuilles de style CSS

Les classes

Les id

Les pseudoclasses

Les éléments flottants et la structure de la page

4. Conclusion

5. Correction du partiel CSS

6. Consignes pour la réalisation du site