Cours de Développement Web — HTML/CSS

Introduction à HTML

HTML (HyperText Markup Language) est le langage de balisage standard utilisé pour créer des pages web. Il structure le contenu en utilisant des éléments appelés "balises". Ces balises permettent de définir la structure et la signification du contenu, ce qui est essentiel pour le référencement et l'accessibilité des sites web. En d'autres termes, HTML est la fondation sur laquelle repose toute page web, permettant aux navigateurs de comprendre comment afficher le contenu.

Structure de base d'un document HTML

Voici un exemple de la structure de base d'un document HTML :

```html

Titre principal

Paragraphe de texte.

Dans cet exemple, la déclaration `` informe le navigateur que le document est en HTML5. La balise `` englobe tout le contenu de la page. À l'intérieur de la balise ``, nous trouvons des métadonnées, comme le charset et le viewport, qui sont cruciaux pour le bon affichage sur différents appareils. Le viewport, par exemple, permet de s'assurer que la page s'affiche correctement sur les écrans mobiles.

Balises HTML essentielles

Voici quelques balises HTML fondamentales :

• `

  ` à `

  ` : Utilisées pour les titres, `

  ` étant le plus important et `

  ` le moins important. Par exemple, `

  Mon Titre Principal

  ` dénote le titre le plus important sur la page. Utiliser des titres de manière hiérarchique aide également les moteurs de recherche à comprendre la structure de votre contenu.


• `

  ` : Définit un paragraphe. C'est l'élément de base pour le texte. Exemple : `

  Ceci est un paragraphe de texte.

  `. Les paragraphes doivent être utilisés pour diviser le contenu et améliorer la lisibilité.


• `` : Crée un lien hypertexte. Par exemple, pour créer un lien vers Google : `Visitez Google`. Les liens sont essentiels pour la navigation entre les pages.


• `` : Intègre une image. L'attribut `alt` est important pour l'accessibilité. Exemple : ``. Cela permet aux utilisateurs malvoyants de comprendre le contenu de l'image.


• `
  ` et `
  ` : Utilisées pour créer des listes non ordonnées (`
  `) et ordonnées (`
  `). Exemple :
  
  ```html
  
  
  
  • Élément 1
  
  
  • Élément 2
  
  
  
  ```
  
  • `
    ` : Un conteneur générique qui permet de regrouper des éléments pour le style ou la structure. Par exemple :
  
  
  ```html
  
  
  
  Une section
  
  
  Du texte dans cette section.
  
  
  
  ```

  Introduction à CSS

  CSS (Cascading Style Sheets) est utilisé pour styliser les pages HTML. Il permet de contrôler la mise en page, les couleurs, les polices, et bien plus. L'utilisation de CSS permet de séparer le contenu de la présentation, ce qui est fondamental pour la maintenance et la flexibilité des sites web. En d'autres termes, CSS donne vie à votre HTML en le rendant visuellement attrayant.

  Syntaxe de base