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

CREER ET AFFICHER NOTRE PREMIERE PAGE HTML

Définir le type et l’encodage du fichier

Maintenant que nous avons établi les bases ensemble, vous allez pouvoir commencer à coder en même temps que moi.

Pour cela, commencez par ouvrir votre éditeur de texte et créez un nouveau fichier.

Avant toute chose, vous allez devoir définir le type de page que vous souhaitez créez et l’encodage de votre page.

Dans notre cas, nous souhaitons créer une page html et utiliser l’encodage utf-8.

Pour définir le type de page, vous avez deux choix : soit vous « enregistrez votre fichier sous » et vous changez l’extension de celui-ci en « .html » lorsqu’on vous demande de choisir le nom du fichier et le dossier dans lequel il doit être enregistré, soit vous définissez cela directement dans votre éditeur via l’un de ses onglets.

Voici les deux façons de faire illustrées ci-dessous en utilisant Komodo Edit avec un Mac.

Tout d’abord, en enregistrant mon fichier sous :

On peut préciser le type d'un fichier lors de son enregistrement

Ou, autre façon, en recherchant l’option nous permettant de changer le type du document.

Dans Komodo Edit, cette option se trouve en bas de votre document ouvert. Sinon, vous devrez probablement chercher dans les onglets de votre éditeur.

Nous allons utiliser le format HTML5 comme ci-dessous ou, à défaut, le HTML.

On peut définir notre fichier comme étant un fichier HTML directement depuis notre éditeur

Ensuite, nous devons définir l’encodage utilisé car notre élément meta ne suffit pas : il faut également le préciser dans notre éditeur.

Avec Komodo, c’est très simple, l’option est disponible juste à côté du type de document, en bas de notre fichier ouvert. Avec un autre éditeur, vous devrez une nouvelle fois certainement chercher parmi les onglets.

Nous devons définir l'encodage de notre fichier HTML sur utf-8

Nous sommes prêts, nous n’avons plus qu’à nous occuper de notre fichier en soi.

Ecrire et enregistrer notre fichier

Dans ce nouveau fichier, nous allons déjà écrire la structure minimale d’un page HTML afin qu’elle soit valide comme nous l’avons appris au chapitre précédent.

Ensuite, nous allons simplement rajouter deux éléments h1 et p à l’intérieur de notre élément body afin de rajouter un peu de contenu dans notre page.

On crée notre premier fichier HTML

Essayer ce code

Dès que c’est fait, nous pouvons immédiatement enregistrer la page comme vous le feriez pour n’importe quel document.

Je vous conseille de créer un dossier séparé sur votre bureau dans lequel vous placerez tous les fichiers que nous créerons durant ce cours. Cela vous permettra d’avoir une meilleure vision d’ensemble sur vos fichiers et sur les progrès réalisés.

Lorsque vous enregistrez une page, quelque soit le langage informatique utilisé, évitez les espaces et les caractères spéciaux (caractères accentués, etc.) dans le nom de la page.

Ainsi, vous n'enregistrerez pas votre page sous le nom Première page html !!.html mais plutôt premiere-page-html.html.

Affichage de la page HTML

Pour afficher le résultat correspondant à la page que nous venons de créer dans votre navigateur favori, c’est très simple : vous n’avez qu’à double-cliquer sur votre fichier tout juste enregistré.

On double clique sur notre fichier afin d'afficher le résultat dans notre navigateur

Votre page s’ouvre alors automatiquement dans votre navigateur par défaut, et voilà ce que vous devriez voir :

Notre première page HTML s'affiche bien dans notre navigateur

Note : il est possible, que lorsque vous double-cliquiez sur votre document celui-ci se rouvre dans votre éditeur de texte plutôt que dans votre navigateur.

Cela peut arriver si votre éditeur de texte a été défini comme le programme par défaut pour ouvrir ce type de document.

Dans ce cas là, faites simplement un clic droit sur votre document puis choisissez « ouvrir avec… » et choisissez votre navigateur favori.

Chapitre précédent

Chapitre suivant