Aller au contenu

410-CJQ-LG

  • Déplier
    • Ouvrir une session sur un ordinateur du collège
    • Accéder à Colnet
    • Remettre un devoir sur Moodle
    • Sécurité et mots de passe
    • Captures d'écran
  •   WindowsDéplier
    • L’Explorateur de fichiers
    • Les disques durs de votre ordinateur
    • Créer une arborescence
    • Raccourcis essentiels de Windows
  • ThèmesDéplier
    • Client ou visiteur
    • Environnement
    • Modèle d'affaires
    • Rôles et emplois
    • TechnologiesDéplier
      • HTML et CSS
      • WordPress
    • Expérience utilisateurDéplier
      • Rédaction pour le Web
  •   CoursDéplier
    • Semaine 1
    • Semaine 2
    • Semaine 3
    • Semaine 4
    • Semaine 5
    • Semaine 6 (Examen 1)
    • Semaine 7
    • Semaine 8
    • Semaine 9
  • Ressources en ligne
  • Zotero 410-CJQ
  • Glossaire
410-CJQ-LG

Réalisez votre site web avec HTML5 et CSS3

Réalisez votre site web avec HTML5 et CSS3
Catégorie: Livres
Étiquettes: HTML et CSS, ScholarVox
Sujet: HTML et CSS
Publié: 2017
Édition: 2
Vous rêvez d'apprendre à créer des sites web mais vous avez peur que ce soit compliqué car vous débutez ? Ce livre est fait pour vous ! Conçu pour les débutants, il vous permettra de découvrir HTML 5 et CSS 3, les dernières technologies en matière de création de sites web, de façon progressive et sans aucun prérequis, si ce n'est de savoir allumer son ordinateur ! Qu'allez-vous apprendre ? Les bases de HTML 5…
Ouvrir ce livre

Fermer

Table des matières

Réalisez votre site web avec HTML 5 et CSS 3

Table des matières

Première partie – Les bases de HTML 5

1 Comment fait‑on pour créer des sites web ?

Le fonctionnement des sites web

HTML et CSS : deux langages pour créer un site web

Les rôles de HTML et CSS

Les différentes versions de HTML et CSS

L’éditeur de texte

Sublime Text

Sous Windows

Sous Mac OS X

Sous Linux

Les navigateurs

Pourquoi le navigateur est-il important ?

Les navigateurs sur ordinateur

Les navigateurs sur mobile

En résumé

2 Votre première page web en HTML

Créer une page web avec l’éditeur

Les balises et leurs attributs

Les balises

Les attributs

Structure de base d’une page HTML 5

Le doctype

La balise <html>

L’en-tête <head> et le corps <body>

Les commentaires

Insérer un commentaire

Votre code HTML est public

En résumé

3 Organiser son texte

Les paragraphes

Sauter une ligne

Les titres

La mise en valeur

Mettre un peu en valeur

Mettre bien en valeur

Marquer le texte

N’oubliez pas : HTML pour le fond, CSS pour la forme

Les listes

Liste non ordonnée

Liste ordonnée

En résumé

4 Créer des liens

Un lien vers un autre site

Un lien vers une autre page de son site

Deux pages situées dans un même dossier

Deux pages situées dans des dossiers différents

Résumé en images

Un lien vers une ancre

Lien vers une ancre située dans une autre page

Cas pratiques d’utilisation des liens

Un lien qui affiche une infobulle au survol

Un lien qui ouvre une nouvelle fenêtre

Un lien pour envoyer un e-mail

Un lien pour télécharger un fichier

En résumé

5 Les images

Les différents formats d’image

Le JPEG

Le PNG

Le GIF

Il existe un format adapté à chaque image

Les erreurs à éviter

Insérer une image

Ajouter une infobulle

Miniature cliquable

Les figures

Création d’une figure

Bien comprendre le rôle des figures

En résumé

Deuxième partie – Les joies de la mise en forme avec CSS

6 Mettre en place le CSS

La petite histoire du CSS

Petit rappel : à quoi sert CSS ?.

CSS : des débuts difficiles

CSS : la prise en charge des navigateurs

Où écrit-on le CSS ?

Dans un fichier .css

Dans l’en-tête <head> du fichier HTML

Directement dans les balises (déconseillé)

Quelle méthode choisir ?

Appliquer un style : sélectionner une balise

Appliquer un style à plusieurs balises

Des commentaires dans du CSS

Appliquer un style : class et id

Les balises universelles

Appliquer un style : les sélecteurs avancés

Les sélecteurs déjà connus

Les sélecteurs avancés

D’autres sélecteurs existent

En résumé

7 Formater le texte

La taille

Une taille absolue

Une valeur relative

La police

Modifier la police utilisée

Utiliser une police personnalisée avec @font-face

Italique, gras, souligné

Mettre en italique

Mettre en gras

Souligner et agrémenter le texte

L’alignement

Les flottants

Faire flotter une image

Stopper un flottant

En résumé

8 La couleur et le fond

Couleur du texte

Indiquer le nom de la couleur

La notation hexadécimale

La méthode RGB

Et en bonus

Couleur de fond

Le CSS et l’héritage

Exemple d’héritage avec la balise <mark>

Images de fond

Appliquer une image de fond

Options disponibles pour l’image de fond

Combiner les propriétés

Plusieurs images de fond

La transparence

La propriété opacity

La notation RGBa

En résumé

9 Les bordures et les ombres

Bordures standards

En haut, à droite, à gauche, en bas

Bordures arrondies

Les ombres

box-shadow : les ombres des boîtes

text-shadow : l’ombre du texte

En résumé

10 Créer des apparences dynamiques

Au survol

Au clic et lors de la sélection

:active : au moment du clic

:focus : lorsque l’élément est sélectionné

Lorsque le lien a déjà été consulté

En résumé

11 Effets avancés en CSS

Les multi-colonnes

Créer des colonnes

Séparer des colonnes

Un texte sur plusieurs colonnes

Les sauts de colonne

Les dégradés

Les dégradés linéaires

Les dégradés radiaux

Les dégradés répétitifs

Les transformations 2D

Premier exemple simple : la rotation

L’origine de la transformation

L’agrandissement (et le rétrécissement)

La translation (déplacement)

La transformation oblique

Combinez les transformations !

La matrice : la mère de toutes les transformations

Les transitions CSS

Les bases des transitions CSS

Configurer sa transition

Affiner la transition avec cubic-bezier()

La super-propriété transition

Les animations CSS

Les bases de l’animation CSS

L’ensemble des propriétés CSS des animations

Une animation par étapes avec les steps()

Jouer l’animation en continu

Les transformations 3D

Définir la perspective

Définir le point de fuite

Notions de base des transformations 3D

Les translations 3D

L’agrandissement 3D.

Les rotations 3D.

La face cachée des blocs

Troisième partie – Mise en page du site

12 Structurer sa page

Les balises structurantes de HTML 5

<header> : l’en-tête

<footer> : le pied de page

<nav> : principaux liens de navigation

<section> : une section de page.

<aside> : informations complémentaires

<article> : un article indépendant

Conclusion

Exemple concret d’utilisation des balises

En résumé

13 Le modèle des boîtes

Les balises de type block et inline

Quelques exemples

Les balises universelles

Respecter la sémantique !

Les dimensions

Minimum et maximum

Les marges

En haut, à droite, à gauche, en bas… Et on recommence !

Centrer des blocs

Quand ça dépasse

overflow: couper un bloc

word-wrap: couper les textes trop larges

En résumé

14 La mise en page avec Flexbox

Un conteneur, des éléments

Soyez flex !

La direction

Le retour à la ligne

Aligner les éléments

Aligner sur l’axe principal

Aligner sur l’axe secondaire

Désaxer un élément

Répartir plusieurs lignes

Rappel à l’ordre

Encore plus flex : faire grossir ou maigrir les éléments

En résumé

15 Quelques autres techniques de mise en page

Le positionnement flottant

Transformer ses éléments avec display

Le positionnement inline-block

Les positionnements absolu, fixe et relatif

Le positionnement absolu

Le positionnement fixe

Le positionnement relatif

En résumé

16 TP : créer un site pas à pas

Maquetter le design

Organiser le contenu en HTML

Mettre en forme en CSS

Les polices personnalisées

Définition des styles principaux

En-tête et liens de navigation

La bannière

Le corps

Le pied de page

Vérifier la validité

Le code final

Quatrième partie – Fonctionnalités avancées

17 Les tableaux

Un tableau simple

La ligne d’en-tête

Le titre du tableau

Un tableau structuré

Diviser un gros tableau

3, 2, 1… Fusioooon !

En résumé

18 Les formulaires

Créer un formulaire

Les zones de saisie basiques

Zone de texte monoligne

Les libellés

Quelques attributs supplémentaires

Zone de mot de passe

Zone de texte multiligne

Les zones de saisie enrichies

Adresse e-mail

URL

Numéro de téléphone

Nombre

Curseur

Couleur

Date

Recherche

Éléments d’options

Cases à cocher

Zones d’options

Listes déroulantes

Finaliser et envoyer le formulaire

Regrouper les champs

Sélectionner automatiquement un champ

Rendre un champ obligatoire

Ajouter le bouton d’envoi

En résumé

19 La vidéo et l’audio

Les formats audio et vidéo

Les formats audio

Les formats vidéo

Insérer un élément audio

Insérer une vidéo

En résumé

20 Le responsive design avec les media queries

Mettre en place des media queries

Appliquer une media query

Les règles disponibles

Tester les media queries

Mettre en pratique des media queries sur le design

La page

Le menu de navigation

La bannière

Le bloc « À propos de l’auteur »

Le résultat

Media queries et navigateurs mobiles

En résumé

21 Aller plus loin

Du site web à l’application web (JavaScript, Ajax…)

Technologies liées à HTML 5 (Canvas, SVG, Web Sockets)

Les sites web dynamiques (PHP, JEE, ASP .NET…)

Cinquième partie – Annexes

A Publier son site sur le Web

Le nom de domaine

Réserver un nom de domaine

L’hébergeur

Le rôle de l’hébergeur

Trouver un hébergeur

Commander un hébergement pour votre site web

Utiliser un client FTP

Installer un client FTP

Configurer le client FTP

Transférer les fichiers

En résumé

B Mémento des balises HTML

Balises de premier niveau

Balises d’en-tête

Balises de structuration du texte

Balises de listes

Balises de tableau

Balises de formulaire

Balises sectionnantes

Balises génériques

C Mémento des propriétés CSS

Propriétés de mise en forme du texte

Propriétés de couleur et de fond

Propriétés de positionnement et d’affichage

Propriétés des listes

Propriétés des tableaux

Autres propriétés

Index

410-CJQ-LG

© 2025 Marc Gagnon
Creative Commons BY-NC-CA

    • Ouvrir une session sur un ordinateur du collège
    • Accéder à Colnet
    • Remettre un devoir sur Moodle
    • Sécurité et mots de passe
    • Captures d'écran
  •   Windows
    • L’Explorateur de fichiers
    • Les disques durs de votre ordinateur
    • Créer une arborescence
    • Raccourcis essentiels de Windows
  • Thèmes
    • Client ou visiteur
    • Environnement
    • Modèle d'affaires
    • Rôles et emplois
    • Technologies
      • HTML et CSS
      • WordPress
    • Expérience utilisateur
      • Rédaction pour le Web
  •   Cours
    • Semaine 1
    • Semaine 2
    • Semaine 3
    • Semaine 4
    • Semaine 5
    • Semaine 6 (Examen 1)
    • Semaine 7
    • Semaine 8
    • Semaine 9
  • Ressources en ligne
  • Zotero 410-CJQ
  • Glossaire
Rechercher