Institut supérieur des sciences Technologies et
appliquées et de technologie de
Programmation web
Sousse A.U : 2020/2021
TP1 Section : LF-SI-A3
Dhouha Ben Noureddine
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 ([Link] + 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: [Link]
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 ''[Link]" 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.
1
– 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)
"[Link]", "[Link]", "[Link]", "[Link]", "[Link]" et
"[Link]".
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é "[Link]". 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é "[Link]". 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 " [Link]" qui décrit la page demandée :
2
c. Page "expérience"
Copiez votre page de structure dans un fichier nommé "[Link]". 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 " [Link]" qui décrit la page demandée :
3
a. Page "compétences"
Copiez votre page de structure dans un fichier nommé "[Link]". 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é "[Link]". 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é "[Link]". 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
4
– le sujet de votre message
– un message
Voici un exemple d'une page " [Link]" qui décrit la page demandée :
2. Valider votre Page
Validez votre code HTML:
– Ouvrir [Link] (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
([Link] et héberger votre site.