1. 1
Technologies côté client
TP1: HTML
Objectifs pédagogiques du TP
– Se familiariser avec les principaux langages de description de documents utilisés côté client:
HTML, CSS.
– Avoir un aperçu des autres technologies disponibles et savoir les intégrer dans une page web.
Outils
– Logiciels: Navigateurs web, éditeur de texte (Notepad++, bloc note, sublime text, Visual
studio code…), etc
– Logiciel libre que vous pouvez installer chez vous: éditeur HTML + validateur XML:
HTML-Kit (http://www.chami.com/) + plugin XML Validator (menu Tools/Install/Install
Plugin)
– Ressources: site d'Open Source Web Design, qui propose des feuilles de style CSS à
télécharger.
– Tutoriel: http://w3schools.com/.
Préambule
Dans ce TP, vous allez écrire votre CV en HTML, à l'aide de plusieurs pages web. Ces différentes
pages correspondent à des "rubriques" et sont décrites ci-dessous. Elles seront reliées entre elles par
un menu.
Dans votre dossier de travail, créez un dossier "CV-HTML", dans lequel vous enregistrerez les
fichiers produits dans ce TP.
Première étape: HTML et XHTML
1. Structure de la page
Créez une page ''index.html" et faites en sorte que le titre qui s’affiche dans la barre du navigateur
soit “Curriculum Vitae” qui comporte les informations suivantes:
– un titre principal contenant votre nom et prénom.
– un titre de niveau 2 indiquant votre profession.
A.U : 2020/2021
Section : LF-SI-A3
Institut supérieur des sciences
appliquées et de technologie de
Sousse
Technologies et
Programmation web
TP1
Dhouha Ben Noureddine
2. 2
– un menu, composé des lignes suivantes:
Présentation
Formation
Expérience
Compétences
Divers
Contact
– Un bloc de texte principal, destiné à contenir les informations présentées dans la page.
À faire: placez des liens sur les lignes du menu, pointant respectivement vers les pages (locales)
"index.html", "formation.html", "experience.html", "divers.html", "competences.html" et
"contact.html".
Ces pages n'existent pas encore, les questions suivantes vont vous permettre de les créer.
a. Page "présentation"
Copiez votre page de structure dans un fichier nommé "index.html". Complétez le bloc principal pour
qu'il contienne:
– des paragraphes indiquant votre état civil, votre adresse, etc.
– une description de vous en moins de 2 phrases parlant de votre carrière.
– mettre l'accent sur les mots importants en gras et italique.
– une photo.
b. Page "formation"
Copiez votre page de structure dans un fichier nommé "formation.html". Complétez le bloc principal
pour qu'il contienne une liste indiquant votre formation. Chaque item de cette liste comportera:
– l'intitulé de la formation suivie
– une date de la formation
– une période de la formation
Voici un exemple d'une page " formation.html" qui décrit la page demandée :
3. 3
c. Page "expérience"
Copiez votre page de structure dans un fichier nommé "experience.html". Complétez le bloc principal
pour qu'il contienne des tableaux indiquant votre expérience professionnelle. Chaque ligne du chaque
tableau comportera:
– une date ou période de l'expérience
– l'intitulé de la position occupée
– le nom de l'entreprise ou organisme
Voici un exemple d'une page " experience.html" qui décrit la page demandée :
4. 4
a. Page "compétences"
Copiez votre page de structure dans un fichier nommé "competences.html". Complétez le bloc
principal pour qu'il contienne une liste indiquant vos compétences.
b. Page "divers"
Copiez votre page de structure dans un fichier nommé "divers.html". Complétez le bloc principal en
laissant libre cours à votre imagination. La structuration devra toutefois être en accord avec le
contenu...
c. Page "contact"
Copiez votre page de structure dans un fichier nommé "contact.html". Complétez le bloc principal
pour qu'il contienne un formulaire indiquant vos informations. Chaque ligne du formulaire
comportera:
– le nom et le prénom
– le mail
– le numéro de téléphone
5. 5
– le sujet de votre message
– un message
Voici un exemple d'une page " contact.html" qui décrit la page demandée :
2. Valider votre Page
Validez votre code HTML:
– Ouvrir http://validator.w3.org/ (HTML)
– Cliquer "Validate by File Upload" et naviguer vers vos fichiers html, ou cliquer "Validate
by Direct Input" et copier/coller votre code dans le text box.
– Corriger les erreurs.
– Ajouter des liens de validations à votre page comme c'est le cas de ce TP.
3. Héberger votre Page
Faites une recherche sur Internet d'un hébergeur de site gratuit par exemple
(http://www.awardspace.com/) et héberger votre site.
