Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. HTML/CSS - Introduction
  3. HTML/CSS - Définitions et rôles
  4. HTML/CSS - Versions
  5. HTML/CSS - Travail en local
  6. HTML/CSS - L'éditeur de texte

Les bases en HTML

  1. HTML - Eléments, balises, attributs
  2. HTML - Structure
  3. HTML - Affichage
  4. HTML - Indentation et commentaires
  5. HTML - Titres et paragraphes
  6. HTML - Espaces et retours à la ligne
  7. HTML - Strong, em et mark
  8. HTML - Listes
  9. HTML - Liens internes et externes
  10. HTML - Autres types de liens
  11. HTML - Images
  12. HTML - Validation
  13. Test n°1

Les bases en CSS

  1. CSS - Sélecteurs, propriétés
  2. CSS - Emplacement
  3. CSS - Commentaires
  4. CSS - Sélecteurs simples
  5. HTML/CSS - Id et class
  6. CSS - L'héritage
  7. HTML/CSS - Block vs inline
  8. HTML/CSS - Div et span
  9. Test n°2

Mise en forme de textes

  1. CSS - Font-family
  2. CSS - Propriétés "font-"
  3. CSS - Couleur et opacité
  4. CSS - Propriétés "text-"
  5. CSS - Les espaces
  6. Test n°3

Le modèle des boîtes

  1. CSS - Le modèle des boîtes
  2. CSS - Dimensions
  3. CSS - Bordures
  4. CSS - Marges
  5. CSS - Ombres
  6. CSS - Affichage
  7. CSS - Positionnement
  8. CSS - Flottement
  9. CSS - Alignement
  10. Test n°4

Gestion du fond

  1. CSS - Couleur de fond
  2. CSS - Image(s) de fond
  3. CSS - Dégradés linéaires
  4. CSS - Dégradés radiaux
  5. Test n°5

Les tableaux

  1. HTML/CSS - Créer un tableau simple
  2. HTML - Structurer son tableau
  3. HTML - Améliorer un tableau
  4. Test n°6

Image, audio, vidéo

  1. HTML/CSS - Les images
  2. HTML - L'audio
  3. HTML - La vidéo
  4. HTML - Intégration et sémantique
  5. Test n°7

CSS avancé

  1. CSS - Long hand vs short hand
  2. CSS - Sélecteurs avancés
  3. CSS - Pseudo classes
  4. CSS - Pseudo éléments
  5. CSS - Sprites
  6. CSS - Transitions
  7. CSS - Animations
  8. Test n°8

Formulaires HTML

  1. HTML - Présentation des formulaires
  2. HTML - Créer un formulaire simple
  3. HTML - Les types d'input et les listes
  4. HTML - Les attributs des formulaires
  5. HTML/CSS - Organiser et mettre en forme un formulaire
  6. Test n°9

Responsive design

  1. HTML/CSS - Introduction au responsive
  2. HTML - Le viewport
  3. CSS - Les media queries
  4. Test n°10

Création d'un site perso (cv)

  1. Présentation de l'exercice
  2. Création des parties "fixes" du site
  3. Création de la page accueil.html
  4. Création des autres pages du site
  5. Conclusion de l'exercice et du cours

ELEMENTS, BALISES, ATTRIBUTS EN HTML

Les éléments en HTML

Le langage HTML tout entier repose sur l’utilisation d’éléments. Si vous comprenez bien ce qu’est un élément, vous comprenez le HTML.

Nous allons utiliser les éléments en HTML pour structurer du contenu, pour lui donner du sens. Selon l’élément utilisé, le navigateur va reconnaître le contenu comme étant de telle ou telle nature.

Ainsi, on va utiliser des éléments pour définir un paragraphe ou un titre par exemple, ou encore pour insérer une image ou une vidéo dans un document. L’élément p, par exemple sert à définir un paragraphe.

Les balises en HTML

Un élément HTML peut être soit constitué d’une paire de balises et d’un contenu, soit (plus rarement) d’une balise unique qu’on dit alors orpheline.

L’élément p ci-dessous est constitué d’une balise ouvrante, d’un balise fermante (notez la présence du slash), et d'un contenu (textuel) entre les balises.

L'élément p est constitué d'une balise ouvrante et d'une balise fermante en HTML

L’élément br ci-dessous (servant à créer un retour à la ligne) n’est lui constitué que d’une balise orpheline.

L'élément br n'est constitué que d'une seule balise orpheline

Sur le web, vous trouverez peut être des éléments br écrits avec un slash après le nom de l’élément, comme ceci : <br/>. Les deux syntaxes sont acceptées en HTML, la seule différence est que la syntaxe utilisant le slash est également reconnue par le langage XML. Dans ce cours, j'utiliserai par simplicité la syntaxe sans le slash

Les attributs en HTML

Finalement, la balise ouvrante d’un élément HTML peut contenir des attributs, qui sont parfois même obligatoires.

Les attributs vont venir compléter les éléments en les définissant plus précisément ou en leur apportant des informations supplémentaires.

Un attribut contient toujours une valeur, qu’on peut cependant parfois omettre dans le cas des attributs ne possédant qu’une seule valeur (la valeur est considérée comme évidente).

Par exemple, l’élément a (pour "anchor") servant à créer des liens vers d’autres sites ou d’autres pages, va avoir besoin d’un attribut href ("hypertexte reference") qui va prendre comme valeur l'adresse (relative ou absolue) de la page vers laquelle on souhaite faire un lien.

L'élément a à besoin d'un attribut href pour fonctionner

L’élément img, servant à insérer une image dans une page HTML, va lui demander deux attributs : src et alt.

L'attribut src va prendre comme valeur le nom et l’emplacement de l’image tandis que l'attribut alt va afficher un texte alternatif dans le cas où l’image ne serait pas disponible (pour les non voyants par exemple).

Notez que cet élément n'est constitué que d'une seule balise orpheline, tout comme l'élément br.

L'élément img a besoin de ses attributs src et alt pour fonctionner

Notez bien que les balises et les attributs ne seront jamais affichés par le navigateur : ils vont servir à indiquer au navigateur comment il doit traiter chaque contenu. Bien construire sa page web sera aussi hautement bénéfique pour votre référencement dans les moteurs de recherche.

Résumé et conclusion sur les éléments en HTML

  • Les éléments sont à la base du fonctionnement du HTML ;
  • Les éléments servent à donner du sens aux différents objets de la page ;
  • Les éléments peuvent être constitués soit d’une paire de balises (ouvrante et fermante) et d'un contenu entre les balises, soit d’une seule balise « orpheline » ;
  • Un élément peut contenir des attributs. Les attributs se placent dans la balise ouvrante d’un élément et possèdent toujours une valeur (parfois implicite) ;
  • Le navigateur n’affichera jamais les balises ni les attributs : il va s’en servir d’indication pour justement savoir ce qu’il doit afficher (un paragraphe, un titre, un lien, une image, etc.).

Chapitre précédent

Chapitre suivant