Scribd Logo
Importer

Bienvenue sur Scribd !

  • 6 vues

    Chapitre 01

    Transféré par

    achraf allali

    Droits d'auteur :

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

    Chapitre 01

    Transféré par

    achraf allali
    6 vues7 pages

    Titre original

    Chapitre_01

    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é ?

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    6 vues7 pages

    Chapitre 01

    Transféré par

    achraf allali

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Télécharger au format pdf ou txt
    sur 7

    1

    Chapitre 1

    Hyper Text Markup Language (HTML)


    1. C’est Quoi html :

     HTML signifie Hyper Text Markup Language


     HTML décrit la structure d'une page Web
     HTML est un langage se compose d'une série d'éléments (balisage) standard pour la
    création des pages Web.
     Les éléments HTML indiquent au navigateur comment afficher le contenu.

    2. Les composants d’une page html:

    L’image suivante montre clairement la structure générale d’un document html

     HTML: c’est un élément principal


     Head : contient des métas informations pour le page web, non visible dans
    la page.
     Body: contient le contenu visible dans le page web.

    3. Les éléments HTML

    Un élément HTML se compose généralement d'une élément de début et d'une


    élément de fin, le contenu étant inséré entre les deux:
    2

    <élément ouvrante> Le contenu va ici ... </élément fermante>

    4. Les Attributs HTML :

    Les attributs HTML sont utilisés pour fournir l'information supplémentaire sur Les
    éléments HTML. L'attribut a un nom suivi d'un signe égal (=) et d'une valeur placée
    entre guillemets ("").

    Syntaxe :

    5. Les titres en HTML


    Les titres sont définis avec les <h1>à <h6>balises. <h1>définit le cap le plus important. <h6>
    définit le moins important cap.

    <h1> titre 1</h1>


    <h2> titre 2</h2>
    <h3> titre 3</h3>
    <h4> titre 4</h4>
    <h5> titre 5</h5>
    <h6> titre 6</h6>

    6. Les paragraphes en HTML

    Les paragraphes en html sont définis par l’élément <p> :

    <p>Paragraphe 1 …… </p>
    <p>Paragraphe 2 …… </p>

    Le saut de ligne : pour assurer un saut de ligne en html nous pouvons utiliser l’élément <br>.

    Par exemple :

    <p> horizon est un école <br>


    pour apprendre les langages d’une façon générale <br>
    comme le français l’anglais et <br>d’autre langage de programmation <br>
    </p>
    3

    7. Forma de texte en html


    HTML nous offre la possibilité de forma du texte comme nous le faisons dans MS Word.
    nous allons passer par quelques-unes de ces options.

     <b> </b>- texte en gras.


     <strong> </strong>- texte important.
     <i></i> - le texte en italique.
     <u></u> - souligné texte.
     <del> </del>- texte supprimé.
     <sub></sub> - texte subscript.
     <sup></sup> - texte superscript.

    8. Les liens html

    Les liens hypertextes sont définis à l'aide de l'élément <a>. Le texte de cet élément constitue
    la zone sur laquelle cliquer pour exécuter un lien :

    <a href="adresse de destination">Nom du lien</a>

    Exemple

    <a href="https://www.univ-biskra.dz">Visiter le site de l’université de biskra</a>

    a. Les images liens


    Il est acceptable d’utiliser une image comme un lien par exemple :

    <p>L’image suivante est un lien où vous pouvez cliquer .</p>


    <a href="google.com">
    <img src="google.png" alt="image de google" >
    </a>

    b. Envoyer un e-mail
    Dans cette partie nous allons utiliser l’élément <a> pour permettre aux utilisateurs
    d’envoyer des emails

    <p> Envoyer un e-mail.</p>


    <a href="mailto:[email protected]">mail</a>

    c. Ajouter un lien vers un signer dans la méme page

    <body>
    <p><a href="#C4">Jump to Chapter 4</a></p>
    <h2>Chapter 1</h2>
    <p>This chapter explains ba bla bla</p>
    <h2>Chapter 2</h2>
    <p>This chapter explains ba bla bla</p>
    4

    <h2>Chapter 3</h2>
    <p>This chapter explains ba bla bla</p>
    <h2 id="C4">Chapter 4</h2>
    <p>This chapter explains ba bla bla</p>
    </body>

    9. Les images HTML

    Pour insérer une image dans la page web, on utilise l’élément simple <img> avec un certain
    nombre d'attributs. L’attribut obligatoires pour l’élément <img> L’attribut src (source), car
    il indique le chemin de l’accès à l’image.
    Example:
    <img src="example.jpg">

    Ou
    <img src="https://www.example.com/images/example.jpg">

    Ou
    <img src="univ.jpg" alt="universities de biskra" width="500" height="600">

    Les attributs sur l’élément <img> :


     width: attribut définit la largeur de l’image occupée sur le page web (px) ou bien (%).
     height: attribut définit la hauteur de l’image occupée sur le page web (px) ou bien (%).
     alt: texte explicatif. " />

    10. Les tableaux en html


    Une table HTML est définie avec l’élément <table>. Chaque ligne de table est définie avec
    l' <tr> étiquette. Un en- tête de table est définie avec l' <th> étiquette. Par défaut, les titres
    des tableaux sont en gras et centré. Une des données de table cellule est définie avec l' <td>
    étiquette.

    <table >
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    </tr>
    <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    </tr>
    <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    5

    </tr>
    </table>

    Pour qu’une cellule prend plus qu’une colonne nous pouvons utiliser l’attribut
    colspan

    Pour qu’une cellule prend plus qu’une lignes nous pouvons utiliser l’attribut
    rowspan

    Exemple

    <table>
    <tr>
    <th>Name</th>
    <th colspane="2">Telephone</th>
    </tr>

    <tr>
    <td>Person_1</td>
    <td>55577854</td>
    <td>55577855</td>
    </tr>

    <tr>
    <td rowspane="2">Person_2</td>
    <td>55577856</td>
    <td>55577857</td>
    </tr>

    <tr>
    <td>55577858</td>
    <td>55577859</td>
    </tr>
    </table>

    11. Les listes en HTML

    Les listes non ordonnées : Par defaut les éléments de la liste seront marqués par des
    balles (petits cercles noirs) par défaut: pour cela nous utilisons les balise ul et li

    <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ul>

    Les listes ordonnées :


    6

    Chaque élément de la liste ordonnée commence par la balise <ol>

    <ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ol>

    Nous poussons distinguer plusieurs types de liste ordonnées

    L'attribut type de la balise ol, définit le type du marqueur d'élément de la liste

     type="1" Les éléments de la liste seront numérotés (par défaut)


     type="A" Les éléments de la liste seront numérotés avec des lettres majuscules
     type="a" Les éléments de la liste seront numérotés avec des lettres minuscules
     type="I" Les éléments de la liste seront numérotés avec des chiffres romains
    majuscules
     type="i" Les éléments de la liste seront numérotés avec des chiffres romains
    minuscules

    <ol type="1">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ol>

    Liste controlée : Pour cela nous utilisons la balise start comme le montre
    l’exemple suivant :

    <ol start="50">
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ol>

    12. Insérer de la Insérer multimédia (audio et vidéo) en html

    Pour ajouter un fichier audio nous utilisons l’élément audio.


    Pour ajouter un fichier vidéo nous utilisons l’élément video.

    <audio src="exemple.ogg" controls ></audio>


    <video src="exemple.mbeg" width="375" height="280" controls></video>

    13. L'élément HTML <head>

    L'élément HTML <head> fournit des informations générales (métadonnées) sur le document.
    7

    Les éléments qui peuvent être utilisés à l'intérieur de l'élément <head> :

    <title>: l'élément de titre du document

    <title>Et voici le titre de ma page !</title>

    <meta> : l'élément de métadonnées du document

    a. Définir des mots-clés pour les moteurs de recherche :

    <meta name="keywords" content="HTML, CSS, JavaScript">

    b. description de votre page Web :

    <meta name="description" content="Free Web tutorials for HTML and CSS">

    c.Définir l'auteur :

    <meta name="author" content="John Doe">

    d. ajouter ico avotre page:

    <meta property="og:image" content="https://example.com/thumbnail.jpg">

    e. Le type de codage de caractères utilisé (iso-8859-1, iso-8859-15, utf-8….):

    <meta charset="utf-8">

    Note :

    1. Les commentaires en HTML écrit comme ca <!- - commentaire - - >.


    2. L'élément en html écrit avec une lettre majuscule ou minuscule.

    Vous aimerez peut-être aussi