Scribd Logo
Importer

Bienvenue sur Scribd !

  • 02-Langage HTML - Nov19

    Transféré par

    josoarazafimandimby66
    9 vues35 pages

    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é
    9 vues35 pages

    02-Langage HTML - Nov19

    Transféré par

    josoarazafimandimby66

    Droits d'auteur :

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

    LANGAGE HTML

    UNE PAGE WEB


    COMMENT?
    HTML
    ¢ HTML (HyperText Markup Language) :
    — Crée en 1991
    — Rôle :
    ¢ Organiser et Gérer le contenu
    — Ecrire en HTML ce qui doit être affiché sur la page
    ¢ Texte
    ¢ Lien

    ¢ Images

    ¢ Etc…

    — HTML : « Ceci est mon titre, ceci est mon menu, voici
    le texte principal de la page, voici une image à
    afficher, etc. ».
    CSS
    ¢ CSS (Cascading Style Sheets, aussi appelées
    Feuilles de style) :
    — Créer en 1996 pour compléter le HTML
    — le rôle du CSS
    ¢ gérer l'apparence de la page web
    ¢ Agencement

    ¢ Positionnement

    ¢ Décoration

    ¢ Couleurs

    ¢ taille du text

    ¢ Etc…
    HTML PURE
    HTML AVEC CSS
    XML
    ¢ eXtensible Markup Language
    ¢ Langage de description de documents

    ¢ Description de la structure logique du document,


    indépendante de l’application
    ¢ Format universel des documents structurés et
    des données
    XML : EXEMPLE
    HTML
    ¢ HyperText Markup Language
    ¢ Basé sur XML qui est basé sur SGML

    ¢ Permet de structurer des documents pour créer


    des pages web
    ¢ Version
    — HTML 4.01
    — xHTML : une version plus stricte du HTML 4.01
    — HTML 5 : évolution de xHTML et ajout plusieurs
    nouveautés
    HTML : PRINCIPE
    ¢ Outil
    — Editeur de fichier texte : notepad, notepad++
    — Navigateur Web
    ¢ Déroulement
    — Ecriture d’un fichier texte
    — Sauvegarde sous .html ou .htm
    — Ouverture du fichier dans un navigateur
    ¢ On n’a pas besoin d’être connecté sur Internet
    pour créer un site web
    HTML : DOCUMENT MINIMAL
    <!DOCTYPE html>
    <html>
    <head>
    <title> Titre du document</title>
    <meta charset="UTF-8">
    </head>
    <body>
    <p> Ma première page HTML</p>
    </body>
    </html>
    HTML : DOCUMENT MINIMAL
    <!DOCTYPE html> ¢ Signification des balises
    <html> — html : élément de base
    <head> d’un document html
    <title> Titre du — head : contient des
    document</title> informations techniques
    <meta charset="UTF-8"> sur le document
    </head> — title : titre du document
    <body> — Meta : information
    <p> Ma première page supplémentaire
    HTML</p> — body : le corps du
    </body> document, contient tout
    </html> le contenu visible du
    document
    — p : paragraphe
    ¢ Il n’y a pas de saut de
    ligne automatique
    HTML : TP 1
    ¢ Voir TP1.pdf
    HTML : CHOISIR VERSION
    ¢ Doctype : permet de choisir quelle version de
    HTML on veut utiliser
    ¢ On met le doctype au début du document

    ¢ Si on oublie le doctype, c’est le navigateur qui va


    le choisir à votre place et il y aura un risque
    d’interprétation
    ¢ HTML5
    <!DOCTYPE html>
    HTML ET NAVIGATEUR
    ¢ On doit respecter les règles selon la version
    (doctype) qu’on a choisit
    ¢ Dans la pratique, peu de document respecte les
    règles à la lettre
    ¢ Les navigateurs sont parfois tolérants aux
    erreurs et interprètent à leur façon le document
    HTML : BALISE
    ¢ Rappel :
    — <balise> (ouverture)
    — </balise> (fermeture)
    ¢ Il existe un nombre défini de balise pour HTML,
    ces balises seront interprétés par le navigateur
    ¢ Ex:
    — <p> Ceci est un paragraphe </p> //paragraphe
    — <b> Texte gras </b> //texte gras
    ¢ Remarque
    — Toute balise ouverte doit être fermé
    — Il existe des balises qui se ferment pas
    HTML : ATTRIBUT
    ¢ Les balises ouvrantes peuvent contenir des
    attributs
    ¢ Syntaxe
    — <balise attribut="valeur de l'attribut">
    ¢ Exemple
    — <img src="monimage.jpg" alt="description de mon image" />
    ¢ Il n’y a pas d’ordre dans les attributs, on peut
    aussi avoir
    — <img alt="description de mon image src="monimage.jpg" />
    HTML : ELÉMENTS
    ¢ <h1> à <h6> : entête de niveau 1 à 6
    ¢ <p> : paragraphe

    ¢ <ul> et <ol> : liste

    ¢ <li> : éléments d’une liste

    ¢ <hr> : trait horizontal


    H1 À H6

    ¢ <h1> à <h6> : entête de paragraphe


    ¢ Définit un entête de paragraphe de niveau 1 à 6.
    La balise <h1> ne doit pas être utilisée qu’une
    seule fois
    — Ex :
    <h1>Titre 1</h1>
    <h2>Titre 2</h2>
    <h3>Titre 3</h3>
    <h4>Titre 4</h4>
    <h5>Titre 5</h5>
    <h6>Titre 6</h6>
    <P>
    ¢ <p> : paragraphe
    — Ex :
    <p>Premier paragraphe</p>
    <HR>
    ¢ <hr /> : trait horizontal
    — Insère un trait horizontal
    — Ex :
    <p>Premier paragraphe</p>
    <hr />
    <p>Deuxième paragraphe</p>
    LISTE

    ¢ <ul> et <ol> : liste


    — Définit une liste à puces.
    — La balise ul étant une liste à puces.
    — La balise ol étant une liste ordonnée.
    — La balise li est toujours l’élément de la liste
    — Ex:
    <ul>
    <li>Menu</li>
    <li>Entrée</li>
    <li>Plat principal</li>
    <li>Plat secondaire</li>
    <li>Dessert (important)</li>
    </ul>
    LES ÉLÉMENTS (SUITE)
    ¢ <a> : lien
    ¢ <br> : saut de ligne

    ¢ <em> : mise en emphase

    ¢ <img> : images

    ¢ <strong> : mise en emphase forte


    LIEN

    ¢ <a> : lien
    — Un lien :
    <a href="http://www.google.fr">Google</a>
    Google sera le texte à cliquer
    lien (Suite)
    • l’attribut href de <a> a pour valeur l'adresse de
    destination.
    • Exemple:
    Lien vers un fichier de même répertoire
    <a href="page1.html">Page1</a>
    Lien vers un fichier dans un sous répertoire
    <a href="2010/page2.html">Page2 2010</a>
    Lien vers un fichier de répertoire supérieur
    <a href="../index.html">Index</a>
    Lien vers un fichier de répertoire supérieur (2
    niveau)
    <a href="../../index.html">Index</a>
    SAUT DE LIGNE

    ¢ <br> : saut de ligne


    — Provoque un saut de ligne (balise souvent
    déconseillée)
    — Ex :
    Du texte
    <br />
    La suite ...
    EMPHASE

    ¢ <em> : mise en emphase


    — Mettre en avant
    — Ex :
    Vive le XHTML et <em>moi</em> aussi !
    IMAGES

    ¢ <img /> : images


    — Insère une image
    — Ex :
    <img src="logo.png" alt="Logo XHTML" />
    — Src : chemin relatif à la page
    — Format image : jpg, gif, png
    — On peut avoir les attributs width et height pour la
    taille des images (en pixel)
    ¢ <img src="logo.png" width="300" />
    STRONG

    ¢ <strong> : mise en emphase forte


    — Mise en emphase forte du texte.
    — Ex :
    Vive le <strong>XHTML</strong>.
    HTML : TP 2
    ¢ Voir TP2.pdf
    HTML : TABLEAUX
    ¢ Composantes élémentaires :
    — Balise <table> (tableau de données)
    — Balise <th> (cellule d'en-tête)
    — Balise <tr> (ligne de tableau)
    — Balise <td> (cellule de tableau)
    HTML : TABLEAUX (2)
    ¢ Exemple ¢ Résultat

    ¢ Border : taille bordure


    tableau
    ¢ Width : taille en pixel
    HTML : FUSION DE LIGNE/COLONNE
    ¢ Résultat

    ¢ Colspan : fusion de
    colonnes
    ¢ Rowspan : fusion de
    lignes
    HTML TP3
    ¢ Voir TP3-CV.pdf

    Vous aimerez peut-être aussi