XHTML > Travaux pratiques : créer votre site Internet

On ne s'occupe pas du design dans le cadre de cette mise en pratique, mais seulement de la structuration de l'information. La beauté viendra avec les feuilles de style CSS.

Liste des pages/sections à créer

1. Page d'accueil - Logo du site. Quel est l'objet de votre site ? De quoi allez-vous parler ? Un menu permettant d'accéder à toutes les autres sections du site. etc.
2. Curriculum Vitae avec un sommaire permettant d'accéder rapidement à une section.
3. Liens préférés - Liste de liens vers mes sites préférés.
4. Blog / Mes actualités - Page listant mes derniers billets de blog (avec pour chaque billet un titre, une photo miniature, un résumé et un lien pour lire la suite).
5. Albums photos - avec classement par catégorie
6. Formulaire de contact
7. Plan du site
8. Mentions légales
9. Un formulaire de connexion
10. Un formulaire de recherche

Et pourquoi pas une boutique en ligne ? - exemple : https://www.materiel.net/
Accueil, catégories d'articles, articles, formulaire d'ajout, panier, ...

Quelques conseils :

• Le logo et le menu doivent être présents sur chaque page.
• Chaque page doit proposer un lien permettant de revenir à l'accueil du site.
• Le logo est très souvent cliquable et mène à l'accueil du site.
• Un "fil d'ariane" doit être présent sur chaque page pour indiquer au visiteur où il se trouve.

Exemple d'arborescence

/css -> dossier pour feuilles de style CSS
/javascript -> dossier por fichiers Javascript
/images -> dossier pour les images du site (conseil: utiliser des sous-dossiers)

/index.html -> page d'accueil
/contact.html
/plan-du-site.html
/mentions-legales.html
/connexion.html
/recherche.html

/cv.html

/liens-preferes.html

/blog
/blob/index.html
/blob/article1.html
/blob/article2.html
....

/photo
/photos/index.html
/photo/album1/
/photo/album1/index.html
/photo/album1/photo1.jpg
/photo/album1/photo2.jpg
....

/boutique
/boutique/index.html
/boutique/categorie1
/boutique/categorie1/index.html
/boutique/categorie1/article1.html
/boutique/categorie1/article2.html
....
/panier.html
....