Admin CliCours
Initiation à HTML et à la création d’un site Web
Introduction
Concevoir un site web consiste à définir :
– l’emplacement où ce site sera hébergé
– à qui ce site s’adresse
– le design des pages qui le constituent (organisation et présentation des informations)
– le contenu de ces pages qui sera en général écrit à l’aide du langage html
Nous nous plaçons dans le contexte du site de vos pages personnelles qui seront hébergées sous votre compte unix (accessibles par un serveur de l’enst) et qui seront lues par tout visiteur auquel vous souhaitez présenter des informations personnelles ou autres.
Le but de ce TP est de vous montrer comment concevoir les pages qui le constituent en faisant un travail tel que la mise à jour et les évolutions du site se feront à un moindre coût.
Structure globale d’une page html :
Elle est composée à partir de balises qui peuvent être définies avec des attributs précisant les conditions d’utilisation de la balise. Elles sont ouvertes puis fermées et définissent comment le navigateur interprète le texte inclus dans la balise (<balise> texte </balise>).
Toute page html doit être structurée par les balises suivantes :
<html> <head>
<title>titre de la page</title> (entete de la page)
</head><body>bla bla bla (corps de la page)</body></html>
Définissez les paramètres externes de la page (dans l’entête):
<meta name= »description » content= »page perso »>
<meta name= »auteur » content= »moi »>
<meta name= »keywords » content= »enst paris »>
Les balises meta n’apparaîssent pas à l’affichage de la page, mais sont utilisées, par exemple, par les moteurs de recherche pour savoir comment référencer votre page.
Elles peuvent aussi servir à effectuer quelques calculs que nous n’aborderons pas ici.
Définissez la structure générale de présentation de la page
Les balises de définition d’un tel tableau sont les suivantes :
<table width= »100% » border= »1″>
<tr><td>mon logo</td><td>mon cursus</td> (première ligne avec 2 colonnes)
</tr><tr><td>le plan…</td><td>2004-2005 …</td> (deuxième ligne avec 2 colonnes)
</tr><tr><td colspan= »2″>écrivez-moi</td> (troisième ligne avec 2 colonnes)
</tr></table>De manière générale, on définit un tableau par la balise <table></table>
Une ligne se définit par la balise <tr></tr>
Une colonne (à l’intérieur d’une ligne) est définie avec <td></td>ou avec <th></th>s’il s’agit des titres d’une colonne. L’attribut colspan signifie que la cellule prendra la place de deux cellules par rapport au découpage complet du tableau.
Définir le style d’écriture dans ce tableau (dans l’entête) :
On définira une feuille de style à laquelle certains éléments de la page se réfèreront
On fera référence à la feuille de style en incluant la ligne suivante dans l’entête de la page html.:
<link title= »ma feuille de style perso » type= »text/css »
rel= »stylesheet » href= »styles/styleperso.css » />
Pour faire la feuille de style, définissez dans le répertoire public_html, un sous-répertoire de nom styles (si vous ne l’avez pas déjà fait au premier tp).Vous définirez ensuite un fichier de nom styleperso.cssque vous enregistrerez dans le répertoire styles.
Ce fichier constitue la feuille de style. Elle va contenir, dans une syntaxe précise, des définitions de présentation de texte ou d’éléments html.
Elle sera simple au départ. Vous pourrez l’enrichir ultérieurement en fonction de vos besoins en ajoutant d’autres styles.
Remplir plus précisément les cases du tableau en définissant le rôle de chaque cellule
Dans un premier temps, vous préciserez la page de votre cursus, ainsi que des renvois vers les autres pages que vous prévoyez de faire figurer dans votre site.
Vous définirez :
– zone 1: votre logo
– zone 2 : le titre de la page de cursus
– zone 3 : le plan général du site avec les renvois vers les autres pages (hobbies, sites)
– zone 5 : un bas de page avec un lien pour vous écrire
– zone 4: le contenu de la page à proprement parler : votre cursus
Les contenus des cases devront utiliser les styles de la feuille de style..
Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)Initiation à HTML et à la création d’un site Web (165.28 KO) (Cours PDF)
