TPE Programmation Web
TPE Programmation Web
TPE Programmation Web
Spécialité : GSI
TP1 - HTML
Vous allez réaliser votre premier site Web dans lequel vous présenterez la société
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, blocnote, notePad...) et
créez votre propre document html. Ajoutez une balise <p> .....
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 Web. Il est primordial de pouvoir l'utiliser et
l'adapter de façon optimale.
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 :
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 :
- index.html
- presentation.html
- realisation.html
Pour chacune des pages, vous organiserez le contenu de la manière suivante en exploitant les balises
h1 et h2 pour les titres et les sous-titres :
Reprenez les pages html de l'exercice 2 et modifiez 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 :
3 - Les images
Vous allez reprendre les pages précédentes afin d'y intégrer une image sur chaque.
Méthode :
-dossier "exercice2".
5 - Les liens
o Sur la page "realisation.html", insérez un lien sur le texte « le site » vers le site de l'ISSTY de
Yaoundé (http://www.issty.net).
Sur chaque page, ajoutez un bouton retour, redirigeant le visiteur vers la page d'index du site.
Méthode :
s html.
6 - Les listes
Afin de mieux organiser notre menu de la page d'accueil, vous allez organiser en liste les liens vers
les pages.
Vous allez reprendre votre page index.html dans laquelle se trouve votre menu, et lui appliquer une
liste afin d'obtenir le résultat suivant :
7 - Les Tableaux
8- Les formulaires
Exercice 8 : formulaire
Afin de faciliter la communication entre les visiteurs et le site, vous allez ajouter un formulaire qui
récupère les informations des visiteurs.
Le formulaire doit être le plus lisible possible, pour tout type de public. On veillera donc à
éviter une mise en page tableau, pour lui préférer l’emploi de CSS adaptables au type de navigateur
(petit ou grand écran, graphique ou texte, lecteur d’écran ou plage braille, etc.) et aux besoins de
l’utilisateur (navigation intelligente à l’aide de la touche Tab et de touches de raccourci, libellés
associés aux champs, etc.).
La photo peut être téléchargée à l’aide d’un champ de type fichier. Ce champ doit filtrer les
possibilités pour ne retenir que les formats d’image pris en charge par le site, pour lequel on a
décidé de se limiter à JPEG, PNG et GIF.
1. Informations de connexion
Les champs du formulaire sont ajoutés dans un élément de type fieldset, muni du titre Connexion
De façon similaire, rajoutez au formulaire créé ci-dessus un nouveau fieldset contenant les champs
présentés dans la figure ci-dessous.
3. Détails personnels
Remarques :
Rendu final du TP :
1. Le site d’agence dont la forme est similaire à l’image suivante (vous êtes libres de choisir les
textes et les images qui vous semblent adéquates.)
http://validator.w3.org/#validate_by_input
http://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-
et-css3/memento-des-balises-html