Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Importer

Bienvenue sur Scribd !

  • 4 vues

    HTML5

    Transféré par

    Kel Creative

    Droits d'auteur :

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

    HTML5

    Transféré par

    Kel Creative
    4 vues7 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é ?

    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
    4 vues7 pages

    HTML5

    Transféré par

    Kel Creative

    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

    Chapitre 1 : GENERALITE SUR LA PROGRAMMATION WEB

    1. Balises HTML

    Les balises HTML (HyperText Markup Language) sont des éléments utilisés pour structurer et
    présenter le contenu sur le web.

    En HTML, les balises peuvent être classées en deux catégories : les balises paires et les balises
    impaires. Les balises paires ont une balise ouvrante et une balise fermante, tandis que les
    balises impaires (aussi appelées balises auto-fermantes ou vides) n'ont pas de balise
    fermante séparée.

    1.1. Balise impaire

    Aussi appelées balises auto-fermantes ou vides n'ont pas de balise fermante séparée.

    Syntaxe :

    <nom de balise > ou <nom de balise/>

    Exemple :

    <hr>, <input>, <br>, <img>, <meta>

    Les balises impaires sont utilisées pour insérer des éléments qui ne contiennent pas de
    contenu enfant

    1.1. Balises paires

    Les balises paires en HTML sont des balises qui viennent en paires : une balise ouvrante et
    une balise fermante. Elles encadrent le contenu auquel elles s'appliquent.

    Syntaxe

    <nom balise> Contenus </fin nom balise>

    Exemple :

    <p> salut à tous </p>


    <b> Salut </b>
    <i> contenus </i>
    <marquee> ulikis </marque>
    2. Structure générale d’un document html

    La structure générale d'une page web en HTML se compose de plusieurs sections clés qui
    permettent de définir et d'organiser le contenu de manière logique et accessible

    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la Page</title>
    <link rel="stylesheet" href="styles.css">
    </head>
    <body>
    <h1>Mon premier Site</h1>

    </body>
    </html>

    Explication :

    1. <!DOCTYPE html> : Déclaration du type de document, spécifiant que le document est


    en HTML5.

    2. <html lang="fr"> : Élément racine du document HTML. L'attribut lang spécifie la


    langue du contenu.

    3. <head> : Contient des métadonnées et des liens vers des ressources externes (feuilles
    de style, scripts, etc.).

     <meta charset="UTF-8"> : Définit l'encodage des caractères du document.

     <meta name="viewport" content="width=device-width, initial-scale=1.0"> :


    Assure que la page s'affiche bien sur les appareils mobiles.
     <title> : Définit le titre de la page, affiché dans l'onglet du navigateur.

     <link rel="stylesheet" href="styles.css"> : Lie une feuille de style CSS externe


    pour le style de la page.

    4. <body> : Contient le contenu principal du document, qui est visible par les
    utilisateurs.
    2.1. Autres balises de base
    Les balises de base en HTML sont essentielles pour créer la structure d'une page
    web. Voici une liste et une description des balises de base les plus courantes que
    vous rencontrerez en HTML :

    ### Balises de Texte

    **`<h1>` à `<h6>`** :
    - Utilisées pour définir des titres, avec `<h1>` étant le plus important et `<h6>` le
    moins important.
    <h1>Titre Principal</h1>
    <h2>Sous-titre</h2>

    **`<p>`** :
    - Définit un paragraphe de texte.
    <p>Ceci est un paragraphe.</p>

    **`<a>`** :
    - Crée un lien hypertexte.
    <a href="https://www.example.com">Visitez Example</a>
    <a href="Historique.html ">Historique</a>
    <a href="Contact.html ">Contact</a>

    **`<img>`** :
    - Insère une image.
    <img src="image.jpg" alt="Description de l'image">

    ### Listes

    **`<ul>` et `<li>`** :
    - Définit une liste non ordonnée et ses éléments.
    <ul>
    <li>Élément de liste 1</li>
    <li>Élément de liste 2</li>
    </ul>
    **`<ol>` et `<li>`** :
    - Définit une liste ordonnée et ses éléments.
    <ol>
    <li>Premier élément</li>
    <li>Deuxième élément</li>
    </ol>

    ### Tables

    <table>`, `<tr>`, `<td>`, et `<th>`** :


    - Utilisées pour créer des tableaux,
    `<tr>` pour les lignes,
    `<td>` pour les cellules et
    `<th>` pour les en-têtes de colonnes.

    <table>
    <tr>
    <th>En-tête 1</th>
    <th>En-tête 2</th>
    </tr>
    <tr>
    <td>Donnée 1</td>
    <td>Donnée 2</td>
    </tr>
    </table>
    ```

    ### Formulaires

    14. **`<form>`** :
    - Définit un formulaire HTML pour la saisie de données utilisateur.
    ```html
    <form action=" " method="post ou get">
    <label for="name">Nom:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="Envoyer">
    </form>
    ```

    15. **`<input>`** :
    - Définit un champ de saisie pour un formulaire.
    ```html
    <input type="text" placeholder="Entrez votre texte ici">
    ```

    16. **`<label>`** :
    - Associe une étiquette à un élément de formulaire.
    ```html
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
    ```

    ### Balises de Groupement

    17. **`<div>`** :
    - Définit une division ou une section dans un document, souvent utilisée pour
    regrouper des éléments pour le style ou le script.
    ```html
    <div class="container">
    <p>Contenu dans un div</p>
    </div>
    ```

    18. **`<span>`** :
    - Utilisé pour regrouper des éléments en ligne pour des besoins de style.
    ```html
    <p>Ceci est un <span style="color: red;">texte en rouge</span>.</p>
    ```

    ### Balises Sémantiques


    19. **`<header>`** :
    - Contient l'en-tête d'un document ou d'une section.
    ```html
    <header>
    <h1>Titre de la Page</h1>
    </header>
    ```

    20. **`<nav>`** :
    - Définit un ensemble de liens de navigation.
    ```html
    <nav>
    <ul>
    <li><a href="#home">Accueil</a></li>
    <li><a href="#about">À propos</a></li>
    <li><a href="#contact">Contact</a></li>
    </ul>
    </nav>
    ```

    21. **`<main>`** :
    - Spécifie le contenu principal du document.
    ```html
    <main>
    <h2>Contenu Principal</h2>
    <p>Ceci est le contenu principal de la page.</p>
    </main>
    ```

    22. **`<footer>`** :
    - Définit le pied de page d'un document ou d'une section.
    ```html
    <footer>
    <p>Droits d'auteur &copy; 2024</p>
    </footer>
    ```
    23. **`<section>`** :
    - Définit une section thématique dans un document.
    ```html
    <section>
    <h2>Section Titre</h2>
    <p>Contenu de la section.</p>
    </section>
    ```

    24. **`<article>`** :
    - Contenu autonome pouvant être distribué indépendamment.
    ```html
    <article>
    <h2>Article Titre</h2>
    <p>Contenu de l'article.</p>
    </article>
    ```

    25. **`<aside>`** :
    - Contenu en marge, tel qu'une barre latérale.
    ```html
    <aside>
    <h2>Articles Connexes</h2>
    <p>Contenu en marge.</p>
    </aside>
    ```

    Ces balises de base sont les fondations de tout document HTML. Elles permettent
    de structurer le contenu de manière claire et organisée, facilitant ainsi la lecture et
    la maintenance du code, ainsi que l'accessibilité et le référencement (SEO).

    Vous aimerez peut-être aussi