Vous allez réaliser votre premier site internet dans lequel vous présenterez la société Solution10, agence spécialisée dans la communication sur Internet.

1 - Une première page en HTML

Le document html de base se présente ainsi :


Structure d'un document HTML
Le code associé en HTML 5 :

page_html

Exercice 1 : création de votre première page html

Préparez votre espace de travail en créant un dossier "public_html_local" dans lequel vous allez créer un sous-dossier "exercice1".
En vous aidant de l'exemple ci-dessus, prenez un éditeur de texte (textEdit, bloc note, notePad...) et créer votre propre document html. Ajoutez une balise <p> ..... </p> avec le texte de votre choix.

Méthode :

2 - Le texte

Tout le texte contenu sur votre page se trouvera entre les balises <body> et </body>
Le texte tient une place importante dans un site Internet. Il est primordial de pouvoir l'utiliser et l'adapter de façon optimale.

Les balises titres

Elles permettent de bien structurer votre page mais aussi d'optimiser le futur référencement de votre site Internet. les différentes balises se présentent de cette manière :
titre

Exercice 2 : les titres

Dans le dossier "public_html_local", vous allez créer un nouveau sous-dossier que vous nommerez "exercice2".
 En vous basant sur l'exercice 1, vous créerez 4 pages html que vous nommerez :

Pour chacune des pages, vous organiserez le contenu de cette manière en exploitant les balises h1 et h2 pour les titres et les sous-titres :

v1

Exercice 3 : Formatage de texte

Reprenez les pages html de l'exercice 2 et modifier les titres et les textes en y insérant des balises des mises en forme (testez les mises en forme proposées ci-dessous).
Pensez à enregistrer régulièrement votre travail. Visualisez le résultat dans votre navigateur.

La mise en forme

Il est très simple de modifier la forme du texte en encadrant des mots ou phrases par des balises.
En voici quelques-unes :

Plus d'information sur les balises : http://www.vectorskin.com/referentiels-standards-w3c/balises-html5/#noframes

ref="http://validator.w3.org/" target="_blank">W3C

3 - Les images

Vous allez ajouter aux pages du contenu visuel.

Exercice 3 : Ajout d'images

Vous allez reprendre les pages précédentes afin d'y intégrer une image sur chaque.

v2

Méthode :

logo
Logo pour page d'index
bureau
Photo des bureaux pour la page de présentation
site web
Copie d'écran d'une réalisation
equipe
Visuel pour la page Contact

4 - Les liens

Vous allez maintenant lier vos pages afin de pouvoir naviguer entre elles.

exercice 4 : les liens

- La page "index.html" servira de page de regroupement.
Dans cette page, ajouter un menu pointant vers chacunes des pages du site.
Vous nommerez les titres du menu du même nom que leurs pages correspondantes (Présentation, Réalisations, Contact)
- Sur la page "presentation.html", vous insérerez un lien sur le mot Solution10' vers le page "contact".
- Sur la page "realisation.html", vous insérerez un lien vers le site du département MMI de l'IUT de Troyes (http://mmi.iut-troyes.univ-reims.fr).
- Sur la page Contact, vous insérerez un lien vers le page "realisation.html" sur le texte 'nos réalisations'
- Sur chaque page, vous ajouterez un bouton retour, redirigeant le visiteur vers la page d'index du site.

Méthode :

5 - Les listes

Afin de mieux organiser notre menu présent en page d'accueil, vous allez organiser les liens vers les pages en liste.

Exercice 5 : Ajouter une liste au menu

Vous allez donc reprendre votre page index.html dans laquelle se trouve votre menu, et lui appliquer une liste afin d'optenir le résultat suivant :

6 - Les Tableaux

Vous allez utiliser les tableaux pour la page "contact.html".

Exercice 6: Les tableaux

Adapter votre page de contact afin d'y insérer le tableau suivant :

tableau

N'oubliez pas de passer votre page au validateur w3c.

8 - Pour aller plus loin...

Si il vous reste un peu de temps, améliorez le rendu des pages du site de l'entreprise Solution 10 en exploitant une feuille de styles.
Vos efforts porteront sur la typographie, les couleurs et la disposition des éléments sur la page.

9 - Annexe

Texte page Présentation :
Spécialisée dans la réalisation de sites internet, Solution10 vous propose une qualité de service irréprochable depuis 2001.

Texte page Nos réalisations :
Site Internet dynamique de présentation du département MMI de l'IUT de Troyes.
Vous y trouverez l'ensemble des informations concernant votre année universitaire au sein de l'établissement

Texte page Contact :
Vous êtês intéressé par nos réalisations, Contactez-nous : Adresse Solution10, 65 Avenue de la liberté 10000 Troyes
Téléphone : 0325334455, Email : contact@at-solution10.fr

 

vf

10 - La mise en ligne

Exploitation de votre compte ftp.

Méthode :