Mini-Projet 5 Création d’un petit site WEB

OBJECTIF : Créer un site WEB en local en utilisant les langages HTML et CSS et un éditeur de texte comme Notepad++

Consigne : Vous devez créer plusieurs pages HTML reliées les unes aux autres (au moins 3 pages).

Le thème est sur une personne importante de l’histoire de l’informatique. Outre la biographie, il faudra bien sûr expliquer ce que cette personne a apporté dans l’évolution de la science informatique.

La mise en page commune des pages du site sera donnée par un fichier CSS. Si vous utilisez des templates, il faudra expliquer les différentes parties du fichier CSS.

Pensez que pour ces fichiers CSS téléchargeables gratuitement il y a des restrictions minimes certes, mais qui doivent être respectées. Pour Simple Beauty, vous observerez par exemple :

Ce travail est à rendre pour le vendredi 14 mars : le dossier comprendra les fichiers HTML, le fichier CSS et les photos utilisées (attention à vérifier les droits).

Remarque : Autoformation sur le droit d’auteur et le droit à l’image (Ecole des Mines de Nantes) à l’adresse : http://imedia.emn.fr/droits/co/droit_web.html ou encore le portail internet responsable du Ministère de l’Education Nationale : http://eduscol.education.fr/internet-responsable

AIDE : RAPPEL SUR HTML et CSS

Grâce au langage CSS, la conception d’un document HTML se fait plus rapidement, car sans se soucier de la présentation : le code HTML est considérablement réduit en taille et en complexité puisqu’il ne contient plus de balises ni d’attributs de présentation (Aller revoir le fichier poeme.html : le code HTML présentait des balises avec attributs de présentation …).

La structure et les éléments d’une page HTML sont définis par des balises. C’est donc sur ces balises que porteront les styles CSS ; si on a défini une classe (cf TP 10 suite) c’est sur cette classe qu’on définira un style.

Un style est défini par un ensemble de couples (propriété , valeur). Ainsi, on précise le type d’élément concerné par le style, puis on énumère entre accolades et séparés par des ; les couples sous la forme : propriété : valeur.

Par exemple, exemple de style qui s’applique aux éléments marqués par la balise h3 : h3 {

font-size : 16 pt ;

color : yellow ;

background-color : #6A0888;

} On comprend facilement les propriétés utilisées et leurs valeurs : la taille de la police fixée à 16pt, la couleur d’écriture fixée à la constante prédéfinie yellow et la couleur d’arrière-plan fixée à #6A0888

Vous pouvez tester : body { background-color = #FF0000 ;}

On peut rencontrer :

.strophe{ text-align : center; color : bleu;

} On applique un style à tous les représentants de la classe strophe.

Si on a défini des classes : le nom de la classe est précédé d’un point.

Vous pouvez utiliser le site : http://www.w3schools.com/cssref/ pour la liste des propriétés existantes et leurs valeurs possibles.

Liste des sujets :

CARRARA Laurie MONROLIN Guillaume CALLERISA CORTO ROLLAND Anthony AUBERTIN Kilian MUHAMMAD AL-KHWARIZMI

GARNIER Romain TIM BERNERS-LEE LEBRET Loic BERGE Corentin BERNASCONI Quentin VINTON CERF & ROBERT KAHN BONAVITA Alexandre , Kathleen Antonelli, , Marlyn Meltzer, et . On appelait ces femmes « les computeurs ». MALLET Théo PHILIPPE FLAJOLET MENETREY Robinson CLAUDE SHANNON

Devoir pour le vendredi 14 mars supplémentaire :

Lire le cours sur le livre d’ISN de la page 116 à la page 120, puis de la page 147 à la page 152

 Exercices 8.13 et 8.15 à faire sur le cahier d’ISN  Compléter les définitions suivantes :

Définition d’un HYPERTEXTE : .……………………………………………………………………………………………………………………………………..

Donner un exemple de lien hypertexte : .……………………………………………………………………………………………………………………..

Définition de l’HYPERMNESIE : ……………………………………………………………………………………………………………………………………..

Définition d’un HYPERLIEN : …………………………………………………………………………………………………………………………………………

Définition d’une ancre : ……………………………………………………………………………………………………………………………………………….