Apprenez à créer votre site web avec HTML 5 et CSS3
Apprenez à créer votre site web avec HTML5 et CSS3
Partie 1 : Les bases de HTML5
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
Sous Windows
Sous Mac OS X
Sous Linux
Les navigateurs
Pourquoi le navigateur est important
Les navigateurs sur ordinateur
Les navigateurs sur mobile
En résumé
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 HTML5
Le doctype
La balise </html>
L’en-tête <head> et le corps <body>
Les commentaires
Insérer un commentaire
Tout le monde peut voir vos commentaires… et tout votre code HTML !
En résumé
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é
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é
Les images
Les différents formats d’images
Le JPEG
Le PNG
Le GIF
Il existe un format adapté à chaque image
Les erreurs à éviter
Insérer une image
Insertion d’une image
Ajouter une infobulle
Miniature cliquable
Les figures
Création d’une figure
Bien comprendre le rôle des figures
En résumé
Partie 2 : Les joies de la mise en forme avec CSS
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 (recommandé)
Dans l’en-tête <head> du fichier HTML
Directement dans les balises (non recommandé)
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 que vous connaissez déjà
Les sélecteurs avancés
D’autres sélecteurs existent !
En résumé
Formatage du 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
Soulignement et autres décorations
L’alignement
Les flottants
Faire flotter une image
Stopper un flottant
En résumé
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 Track
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é
Les bordures et les ombres
Bordures standard
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é
Création d’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é
Partie 3 : Mise en page du site
Structurer sa page
Les balises structurantes de HTML5
<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
Résumé
Exemple concret d’utilisation des balises
Assurer la compatibilité avec IE
En résumé
Partie 1 : Les bases de HTML5
Vous n’avez jamais entendu parler du HTML, ou alors seulement de façon très vague ?
Pas de panique, les explications arrivent dès le premier chapitre… et la pratique suit juste après !
Nous commencerons par présenter comment les sites web fonctionnent, puis nous téléchargerons tous les programmes (gratuits) nécessaires pour bien travailler.
A la fin de cette partie, vous saurez déjà insérer du texte, des liens et des images !
Comment fait-on pour créer des sites web ?
Bonjour et bienvenue à toutes et à tous !
Voici donc le premier chapitre de ce livre pour débutants, qui va vous apprendre à créer votre site web !
Nous allons passer un certain temps ensemble, tout dépendra de la vitesse à laquelle vous apprendrez. Si vous lisez ce livre régulièrement et à une bonne vitesse, vous l’aurez terminé en une à deux semaines. Mais si vous avez besoin d’un peu plus de temps, ne vous inquiétez pas : le principal est que vous y alliez à votre rythme, de préférence en prenant du bon temps.
Je vous propose de commencer par la question la plus simple mais aussi la plus importante : comment fonctionnent les sites web ?
Le fonctionnement des sites web
Comment fonctionnent les sites web ?
Non, n’ayez pas peur de poser des questions même si vous pensez qu’elles sont « bêtes ». Il est très important que nous en parlions un peu avant de nous lancer à fond dans la création de sites !
Je suis certain que vous consultez des sites web tous les jours. Pour cela, vous lancez un programme appelé le navigateur web en cliquant sur l’une des icônes représentées à la figure suivante.
Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)Apprenez à créer votre site web avec HTML 5 et CSS3 (11.49 MB) (Cours PDF)
