Scribd Logo
Importer

Bienvenue sur Scribd !

  • Objectifs Du TP: Avant-Propos

    Transféré par

    Arij Chouchene
    7 vues5 pages

    Titre original

    TP1

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    7 vues5 pages

    Objectifs Du TP: Avant-Propos

    Transféré par

    Arij Chouchene

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 5

    Programmation Web

    TP 01

    Objectifs du TP

     apprendre à faire une page web simple en HTML5


     valider une page web

    Avant-propos
    HTML5 est la nouvelle génération des langages de balisage HTML et a remplacé maintenant
    HTML 4 et les XHTML 1.x.
    Le W3C ou World Wide Web Consortium désigne un organisme international à but non lucratif.
    Son rôle est de définir les standards techniques liés au web.
    Développer aux normes W3C ?
    Il peut s’avérer utile de respecter les normes W3C pour différentes raisons :

     Pour votre référencement naturel. En effet, un site construit selon les normes W3C sera
    mieux référencé et votre visibilité sera donc d’autant plus importante.

     Pour l’harmonisation de votre site. Un site doit être correctement codé pour qu’il soit affiché
    de la bonne et de la même manière sur tous les moteurs de recherche.

    L’organisme W3C propose un outil pour examiner le code HTML, W3C validator.

    On rappelle le squelette d'une page HTML5 :

    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <title> … </title>
    <meta charset="utf-8" />
    </head>

    <body>
    …
    </body>
    </html>
    I. Installation de l'environnement de travail
    1. IDE : visual studio code

    Un IDE (Integrated Development Environment) est un logiciel qui simplifie la programmation. Il


    intègre un éditeur texte pour écrire votre code et propose un certain nombre de raccourcis et d'aides
    adaptées au langage utilisé. Pour le HTML, on utilise visual studio code sachant qu’il est parfaitement
    possible de créer son site web simplement avec n'importe quel éditeur de texte.

    LiveServer est une extension qui permet de lancer un serveur web en local, dont la racine est le
    projet ouvert avec l'éditeur de texte

    2. Extension navigateur

    Web Developer est une extension Chrome qui ajoute une barre d’outils destinée à la création de
    sites. Disponible également sur Firefox et Opera. Une fois installée, ajoute une barre d’outils à votre
    navigateur et permet de visualiser de nombreuses informations sur la page web affichée ; en particulier,
    on peut lancer une vérification aux spécifications du W3C.

    II. HTML : Création d’une page personnelle

    On vous demande de rédiger un curriculum vitæ (CV). Vous devez faire votre propre CV, ou celui
    de l'étudiant "idéal" du Département Informatique (suivre dans ce cas l'image ci-dessous).

    Préparation
    - Créer un répertoire TP1
    - Ouvrir le dossier avec l’IDE et créer le fichier « cv.html ».
    - Commencez par mettre en place le squelette de votre page web.

    ☺ Conseil :
    - Tapez html:5, puis sélectionnez Entrée. Le code du modèle HTML5 est ajouté au fichier.
    - Consulter les normes w3c pour html5. https://www.w3schools.com/html/html5_syntax.asp

    ! Attention:
    - Uniquement de l'HTML5 (aucune mise en forme, aucun CSS pour ce TP).
    - Vérifier régulièrement la validité de votre document grâce au validateur.

    ⊙ Note :
    Le méta-tag : <meta http-equiv="X-UA-Compatible" content="IE=edge" /> permet d’interdire
    le mode de compatibilité dans IE.
    Modifier l’élément head
    L’élément <head> contient des informations sur votre site web qui ne sont pas visibles dans
    l’onglet du navigateur.

    Les métadonnées définissent des données sur le document HTML, comme le jeu de caractères, les
    scripts et le navigateur dans lequel la page web s’ouvre.

    - Ajouter les metas « description», « keywords » et « author » à votre code.


    - Ajouter un titre à votre page web.

    Modifier l’élément body


    Votre CV comportera 7 divisions (à positionner dans la partie <body> … </body>):

     Une première division (header) regroupant :


    o un titre h1
    o une photo
    o un paragraphe avec des informations générales (âge, adresse, téléphone,...)

    ⊙ Note :
    Pour insérer une image il faut insérer un élément HTML img. Cet élément s'écrit avec une seule
    balise que l'on appelle une balise auto fermante ou une balise orpheline.

    <!-- Balise auto fermante (notation XHTML) -->


    <img src='black-ops.jpg'/>
    <!-- Balise classique (notation HTML5) -->
    <img src='black-ops.jpg'>

    ⊙ Notes :

    Les éléments de type inline sont des éléments qui se placent les uns à la suite des autres
    sur une même ligne tant qu'il y a de la place sur cette ligne. (< img >, < a > )

    Les éléments de type block se placent les uns à la suite des autres. Ils 'ouvrent' une
    nouvelle ligne et occupent toute cette ligne. ( < h1 >, < p>, <div> )
     Cinq divisions (article) qui seront structurées toutes de la même façon, avec :
    o un titre h2
    o des informations (voir ci-dessous les différents éléments HTML à utiliser
    obligatoirement)
     Une dernière division (footer) comprenant, un lien interne vers le haut de la page, la date de mise
    à jour de la page.

    Les cinq divisions article seront :

    - Formation:
    Cette division vous permet de présenter votre formation.
    Vous utiliserez des listes non numérotées.
    Vous ferez également des liens externes qui renvoient sur les sites des écoles/universités que
    vous avez fréquentées.
    - Compétences:
    Cette division présente vos compétences informatiques.
    Vous utiliserez une liste de définition.
    - Expériences professionnelles:
    Cette division présente vos expériences professionnelles des plus récentes aux plus anciennes.
    Vous utiliserez une liste numérotée.
    - Langues:
    Cette division présente vos compétences linguistiques.
    Vous utiliserez un tableau
    - Centres d’intérêt:
    Cette division présente vos centres d’intérêt.
    Vous utiliserez les éléments de votre choix

    ! Pour marquer le changement de sujet entre chacune des 7 divisions, vous utiliserez la balise <hr>.

    Vous aimerez peut-être aussi