Scribd Logo
Upload

Welcome to Scribd!

  • H05 Introduction HTML PDF

    Uploaded by

    oboumou
    17 views6 pages

    Original Title

    H05_Introduction_HTML.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    17 views6 pages

    H05 Introduction HTML PDF

    Uploaded by

    oboumou

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    Introduction au HTML

    Naissance

    Comment le HTML est-il né ? En fait, tout commence quand TIM BERNERS-LEE crée une
    méthode pour relier des documents à l'aide de liens hypertextes, sur un réseau appelé à
    l'époque "la mère de tous les réseaux" : Internet.
    Le World Wide Web (W.W.W.) est constitué de pages Web. Ces pages sont conçues avec le
    langage HTML ou HyperText Markup Language ou encore Langage dit à balises. Le HTML
    est donc un simple "langage à balises", comme les premiers traitements de texte (Wordstar).
    Ce langage permet de coder une page à l'aide de commandes de mise en forme. Ces dernières
    sont ensuite interprétées par un navigateur (ou browser en anglais) et apparaissent sur votre
    écran.
    Les pages HTML sont aujourd'hui le système de base d'Internet. Les sites peuvent inclure du
    texte ainsi que des images fixes ou animées, du son , de la vidéo et même des programmes
    interactifs (à l'aide de Java ou Javascript). Le langage HTML ne se rencontre pas
    exclusivement sur le web, celui ci est également utilisé pour fournir une Interface aux CD-
    ROM multimédia et maintenant aux DVD ROM.

    L'évolution du langage

    1. HTML 2.0
    2. HTML 3.0
    3. HTML 3.2
    4. HTML 4.0 (dernière version).

    Les différents types de balises

    - Balises contenant des métainformations telles que <head> ou <title>.

    - Balises de mise en forme du document telles que par exemple <b> <i> ou encore
    <table>.

    - Balises de liens telles que <a>.

    - Balises d'insertions (multimédia) ou comment insérer des images, du son, de la vidéo.


    Premier code HTML

    Définition

    Le code HTML est un langage de description. A l'aide d'instructions que vous insérez, vous
    allez définir la forme de votre texte (gras, italique, polices, ...), inclure des images, du son,
    implanter des liens vers d'autres pages...

    Exemple

    Une balise (ou tag) est facilement identifiable, elle est constituée d'un mot (ou plusieurs dans
    certain cas) encadrée par les signes inférieur (<) et supérieur (>).

    1. Balise d'ouverture
    2. Votre texte
    3. Balise de Fermeture

    Les premières balises (ou tags)

    La balise : Elle apparaît en premier et signale aux différents navigateurs que c'est une page
    Web, le tag indique la fin de la page.

    La balise <head> : Elle indique les informations propres à votre page. Elle inclut les balise
    title et body ainsi que les balises meta qui permettront aux moteurs de recherche d'indexer
    votre site Web.

    La balise <title> : Elle définit le titre de votre site (ou page). Ce titre se loge dans la barre
    supérieure de votre navigateur, ainsi que lors d'un ajout dans les favoris (ou bookmark) d'un
    navigateur.

    La balise <body> : Elle va contenir toutes les informations qui s'afficheront dans la fenêtre
    du navigateur : Textes, liens, images...
    Les balises indispensables
    Tableau des balises les plus rencontrées

    Balise Description
    <a> Lien hypertexte
    <strong> ou <b> Texte en gras
    <br> Saut de ligne
    <center> Centrage
    <font> Définition du texte
    <h1> à <h6> Titre de niveau 1 à 6
    <hr> Filet horizontal (séparation)
    <em> ou <i> Texte en italique
    <p> Début d'un paragraphe (saut de 2 lignes)
    <table> Structure d'un tableau
    <tr> Ligne d'un tableau
    <td> Cellule d'un tableau
    <ol> Liste ordonnée (1,2,3…)
    <ul> Liste non ordonnées (symbole)
    <li> Item de la liste (<ol> ou <ul>)
    <form> Zone de formulaire
    <frameset> Zone de cadres
    <frame> Cadre
    Première page avec le bloc-note

    Avant de commencer à écrire votre première page, il vous faut un éditeur html, mais le plus
    simple et le plus économique pour débuter reste le bloc-notes de Windows. Malheureusement
    son plus gros désavantage que vous devez "tout faire à la main" mais c'est une excellente
    façon de progresser.

    1. Tapez votre code (le retour chariot n'est pas obligatoire, et il n'a aucun effet ou presque
    sur le html, il permet juste d'avoir une meilleure visibilité de la syntaxe html

    2. Enregistrez le fichier avec l'extension .htm (dans la majorité des cas la première page
    vue par vos visiteurs se nomme index.htm ou index.html ou encore index.shtml)

    Quelques règles simples pour débuter

    • Pratiquement toutes les balises vont par paire (balises d'ouverture et de fermeture,
    exemple : <b> et </b>)

    • Ecrivez vos balises en minusules, cela peut faciliter le transfert de votre code vers le
    XHTML

    • Essayer d'aérer au maximum votre code

    • Le langage HTML ignore les retours chariot et les tabulations. Servez-vous des balises
    <br> ou <p> pour passer à la ligne

    • Certaines balises sont ignorées par certains navigateurs ou ne s'affichent pas de la


    même façon. Ex: Un titre de niveau supérieur h1 ne s'affiche pas de la même façon
    selon le navigateur utilisé

    • Le cas des balises spécifiques à Internet Explorer (ex:<marquee>) ou à Netscape


    (ex:<blink>) est un peu plus épineux, essayez de ne pas trop en abuser !! ou mieux ne
    les utilisez pas, Internet par définition c'est pour tous et pas seulement pour Microsoft
    et Netscape !!
    Première maquette de votre site Web

    Avant de se lancer dans la réalisation du code html, ou dans l'habillage graphique de votre
    site, il convient de réfléchir et définir le contenu, l'architecture, et la forme générale de votre
    site... Pour cela rien ne vaut une page blanche et un stylo pour esquisser une première
    maquette de votre site.

    1. Le contenu
    C'est certainement le point le plus important, il ne faut surtout pas le négliger car c'est celui
    qui donnera envie à vos visiteurs de revenir sur votre site Web.
    a ) Maîtriser le sujet que l'on va aborder
    b ) Dégagez les principales rubriques
    c ) Préparez vos textes (paragraphes, orthographe...)

    2. L'architecture
    Sous peine de courir très vite à la catastrophe et, de perdre un temps précieux pour l'avenir,
    dégagez au plus tôt une architecture (arborescence) de votre site.
    a ) Préparez une arborescence de votre site
    b ) Spécifiez les liens vers vos différentes pages
    c ) Votre site doit être modulable (pour accueillir de nouvelles rubriques)

    Note : Votre première page (page d'accueil, home page, ...) doit se nommer index.htm ou
    index.html. Il est de plus préférable que les noms de vos pages ne dépassent pas 8 caractères.

    3. La forme
    Afin de faciliter plus tard la création du code avec un éditeur html, n'hésitez pas à griffonner
    une première esquisse de vos pages, ceci également dans le but d'affecter aux éléments des
    côtes en pixels pour une mise en page soignée.
    a ) Dessinez un premier croquis graphique de votre page d'accueil
    b ) Spécifiez les côtes en pixels

    Note : Pour que votre site soit correctement visible dans une résolution de 800 x 600, basez
    vous sur une largeur de 771 pixels maximum. En ce qui concerne la hauteur, la taille
    maximale préconisée est 1200 pixels.
    Liens intéressants

    Sites d’apprentissage et de référence (anglais)


    http://www.w3schools.com/html/html_www.asp

    Les bases du HTML (anglais)


    http://www.cwru.edu/help/introHTML/toc.html
    http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html

    Le World Wide Web Consortium (W3C) (anglais)


    http://www.w3.org/

    Sites d’apprentissage et de référence (français)


    http://www.lehtml.com/html/

    You might also like