TP : Ma première page web

Ressources nécessaires :

Partie 1 : le langage HTML

  1. Va dans ton navigateur et ouvre une page web. Affiche le code source de la page en utilisant la clic droit de ta souris.
  2. Regarde le début du code de la page, et la fin du code.
  3. Refais cela pour plusieurs pages web.
  4. En déduire le code minimal d'une page web.

Pour plus d'informations sur le HTML, ses balises et ses caractères spéciaux, consulte la page de cours

Partie 2 : Création d'une page web

Objectif : On veut créer cette page web :

Clique pour agrandir l'image

Télécharche le dossier compressé contenant le texte et les différentes ressources nécessaires : TÉLÉCHARGER
Crée un dossier sources, et place les quatre images dedans.

  1. Ouvre ton éditeur de code Notepad++.
  2. Crée un nouveau document, avec l'encodage utf-8 et le langage HTML. Puis nomme-le TPHTML_tonNom (à place de tonNom tu sais quoi mettre, l'éditeur mettra automatiquement .html derrière).
  3. Recopie le code minimal d'une page web. Le titre de la page doit être « Premier site Web au monde ». 

    <!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8"/>
	<title>titre de la page</title>
</head>
	<body>
	
    
	</body>
</html>

    Masquer

  4. Insérer le texte entre les balises <body> et </body>.
  5. Place les balises structurante de HTML5 : <header> , <section> et <footer>.
  6. Commence par le <header>.Place l’image CERNLogo.gif, et lui affecter un lien vers http://info.cern.ch.
  7. Pour la partie centrale de la page (<section>), applique au texte introductif les formats suivants:
  8. Pour le reste du texte, scinde-le en paragraphes selon le modèle avec les balises <p> et </p>.
  9. Définissez les acronymes (<abbr>) CERN (Laboratoire européen pour la recherche nucléaire) et SLAC (Centre de l'accélérateur linéaire de Stanford), en s'appuyant sur le modèle : <abbr title= "Laboratoire européen pour la recherche nucléaire">CERN</abbr>.
    rq : Ctrl+F permet de chercher un mot dans un document !!
  10. Insére les images avec la balise <img> comme sur le modèle, avec la balise <figure>, pour pouvoir mettre une légende avec la balise <figcaption>. Vous trouverez les légendes à la fin du fichier texte de base.txt.
  11. Applique la balise <code> à l'adresse http://info.cern.ch/hypertext/WWW/TheProject.html.
  12. Lie les éléments suivants aux adresses correspondantes:
    Elément liéAdresse correspondante
    propositionhttp://info.cern.ch/Proposal-fr.html
    prototypehttp://info.cern.ch/NextBrowser-fr.html
    cette pagehttp://www.w3.org/History/19921103-hypertext/hypertext/ WWW/TheProject.html
    navigateurhttp://info.cern.ch/LMBrowser-fr.html
    Chaque page liée s'ouvrira dans un nouvel onglet du navigateur(en rajoutant dans la balise target="blank").
  13. Passe au <footer>, crée un lien email entre la chaîne de caractères « web.communications@cern.ch » et l'adresse web.communications@cern.ch.
  14. Enregistre ton travail. Et dépose-le sur l'.