Plan d'apprentissage HTML

HTML (HyperText Markup Language) est un langage de balisage standard utilisé pour créer des pages Web. Comprendre HTML est la base d'activités telles que l'exploration et le développement Web. Voici quelques points de connaissances HTML de base mais importants :

Éléments et balises :
- Éléments : les éléments HTML vont de la balise d'ouverture à la balise de fermeture.
- Balises : les balises HTML sont des mots-clés utilisés pour définir des éléments HTML, entourés de crochets angulaires.
```
<tagname>Content goes here...</tagname>
```
Propriétés :
- Les éléments HTML peuvent avoir des attributs qui fournissent des informations supplémentaires sur l'élément et sont toujours inclus dans la balise d'ouverture.
```
<tagname attribute="value">Content goes here...</tagname>
```
Structure du document :
- <!DOCTYPE html>: Définissez le type de document.
- <html>: L'élément racine du document HTML.
- <head>: contient des métadonnées (telles que <title>, <link>, <meta>etc.).
- <body>: Contient le contenu visible de la page (tel que <h1>, <p>, <img>etc.).
```
<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
  <body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
  </body>
</html>
```
Titres et paragraphes :
- <h1>To <h6>: Définit le titre, <h1>qui est le titre de plus haut niveau.
- <p>: Définir le paragraphe.
```
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
```

Liens et photos :

<a>: Définir un lien hypertexte.
<img>: Définir l'image.

<a href="https://www.example.com">This is a link</a>
<img src="image.jpg" alt="An image">

Liste :
- <ul>: Définit une liste non ordonnée.
- <ol>: Définir une liste ordonnée.
- <li>: Définir les éléments de la liste.
```
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
```

Tableau :

<table>: Définir le tableau.
<tr>: Définissez les lignes du tableau.
<th>: Définissez la cellule d'en-tête.
<td>: Définir les cellules du tableau.

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Row 1 Col 1</td>
    <td>Row 1 Col 2</td>
  </tr>
</table>

Formulaire :
- <form>: Définir le formulaire.
- <input>: Définir les champs de saisie.
- <textarea>: Définit un champ de saisie de texte multiligne.
- <button>: Définir le bouton.
```
<form>
  <input type="text" name="name">
  <textarea name="comment"></textarea>
  <button type="submit">Submit</button>
</form>
```

CSS et Javascript :

CSS (Cascading Style Sheets) : utilisé pour styliser les éléments HTML.
JavaScript : utilisé pour ajouter de l'interactivité aux pages Web.

<head>
    <style>
        body {
        
        font-family: Arial, sans-serif;}
    </style>
    <script>
        function myFunction() {
        
        
            alert("Hello World!");
        }
    </script>
</head>

Balises Div et Span :
- <div>: est un élément de niveau bloc, souvent utilisé pour combiner des éléments de niveau bloc et les styliser via CSS.
- <span>: est un élément en ligne souvent utilisé pour combiner du texte et être stylisé avec CSS.
```
<div style="background-color:lightblue">
  <h3>This is a heading in a div element</h3>
  <p>This is some text in a div element.</p>
</div>

<span style="color:blue">This text is in blue color</span>
```
Attributs ID et Classe :
- ididLes attributs fournissent une identification unique et la valeur doit être unique dans chaque document HTML .
- classLes attributs sont utilisés pour définir le nom de classe d'un élément, permettant d'appliquer le même style à classplusieurs éléments avec la même valeur.
```
<div id="uniqueElement">This element has a unique ID</div>
<p class="styled-text">This text has a specific style.</p>
<p class="styled-text">This text has the same style.</p>
```

Nouvelle balise HTML5 :

<header>, <footer>, <nav>, <section>, <article>etc. sont de nouvelles balises introduites dans HTML5 et sont utilisées pour organiser le contenu de manière plus sémantique.

<header>
  <h1>Site Title</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#services">Services</a></li>
    </ul>
  </nav>
</header>
<section>
  <article>
    <h2>Article Title</h2>
    <p>Article Content</p>
  </article>
</section>
<footer>
  <p>Copyright © 2023</p>
</footer>

Contenu embarqué :

<iframe>: Peut être intégré dans une autre page HTML.
<video>et <audio>: de nouvelles balises HTML5 pour l'intégration de contenu vidéo et audio.

<iframe src="https://www.example.com" width="600" height="400"></iframe>

<video controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<audio controls>
  <source src="sound.mp3" type="audio/mp3">
  Your browser does not support the audio tag.
</audio>

Type de saisie du formulaire :
- HTML5 introduit de nouveaux types d'entrée tels que <input type="email">, <input type="date">, <input type="range">, <input type="color">etc. pour prendre en charge davantage d'options de saisie utilisateur.
```
<input type="date" name="birthdate">
<input type="email" name="email" placeholder="Enter your email">
```
attribut de données ( data-*) :
- Attributs de données personnalisés pour stocker des données personnalisées privées pour une page ou une application, préfixés data-par .
```
<div data-role="page" data-theme="a">This div has some data attributes</div>
```
Balises et attributs liés au responsive design :
- Par exemple <meta name="viewport" content="width=device-width, initial-scale=1">, utilisé pour contrôler le rendu des pages sur différents appareils.

Il s'agit de fonctionnalités plus avancées du HTML ou nouvellement introduites dans le HTML 5. Les comprendre vous aidera à écrire du code HTML plus moderne et plus efficace, ainsi qu'à mieux comprendre et analyser la structure des pages Web sur Internet.

おすすめ