Ma première conception web HTML et CSS
 |
Description
Introduction au livre
J'attendais un livre de conception web aussi simple. Même si vous ne connaissez rien au développement web, vous pouvez apprendre les bases du HTML et du CSS avec ce seul livre. Des dessins animés mignons et des illustrations riches ajoutent au plaisir du visionnage. Apprenez les bases, ainsi que la mise en page Flexbox, la mise en page en grille CSS, la conception web réactive et l'animation CSS, en suivant les étapes de création d'une collection de liens vers les réseaux sociaux, d'un site de blog, d'un site d'invitations web et d'un site de restaurant avec une conception web époustouflante. L'annexe fournit des informations sur la manière de publier un site web, une liste de sites recommandés pour vous aider à le créer, un aide-mémoire et des exemples de données XD pour la conception du site. |
- Vous pouvez consulter un aperçu du contenu du livre.
Aperçu
indice
Préface du traducteur x
Avis du lecteur bêta xii
Introduction xiii
Comment lire ce livre xv
Points clés de chaque partie xvi
Sites à créer dans ce livre xvii
Télécharger les données d'entraînement xxi
Téléchargez les quatre annexes xxii
Prologue BD xxvi
PARTIE 1 Écrire du HTML
CHAPITRE 1 Avant de commencer
SECTION 1 Avant de commencer l'apprentissage 2
SECTION 2 Comprendre la structure d'un site Web 3
SECTION 3 Installation des applications requises 4
SECTION 4 Apprendre efficacement 9
SECTION 5 Mise en route avec un exemple très simple 12
CHAPITRE 2 Notions de base du HTML
SECTION 1 Pourquoi le balisage est important 14
SECTION 2 : Résumé du contenu de la lettre d'amour 16
SECTION 3 : Premiers pas avec HTML 20
SECTION 4 Annoter votre lettre d'amour 24
SECTION 5 : Écrire du code lisible 38
PARTIE 2 Création d'une page de collection de liens vers les réseaux sociaux
Sites à créer dans cette partie → Site de collecte de liens SNS 42
CHAPITRE 3 Notions de base du CSS
SECTION 1 : Premiers pas avec CSS 44
SECTION 2 UTILISATION DES OUTILS DE DÉVELOPPEMENT 46
SECTION 3 Connexion HTML et CSS 48
SECTION 4 Réinitialisation des styles par défaut du navigateur 52
SECTION 5 Comprendre le modèle de la boîte 54
CHAPITRE 4 Écriture de CSS pour les collections de liens des réseaux sociaux
SECTION 1 Rédaction CSS 56
PARTIE 3 Création d'une page à deux colonnes
Site à créer dans cette partie → Conception de mise en page à 2 colonnes 74
CHAPITRE 5 : Écrire du code HTML pour votre site de blog
SECTION 1 Délimitation des zones du site Web 76
SECTION 2 Balisement de la structure de document de votre blog 78
SECTION 3 Comprendre les plans et les sections 83
SECTION 4 Apprendre d'autres nouvelles balises HTML 86
CHAPITRE 6 Écrire du CSS pour votre site de blog
SECTION 1 Comprendre la mise en page Flexbox 90
SECTION 2 Écriture du CSS pour la page entière et l'en-tête 94
SECTION 3 Écriture du CSS pour la zone principale et la barre latérale 100
SECTION 4 Écriture du CSS pour la zone d'article et le pied de page 110
PARTIE 4 : Création d’une page à une seule colonne
Site à créer dans cette partie → Mise en page à une colonne 120
CHAPITRE 7 : Écrire du code HTML pour un site d’invitation Web
SECTION 1 Comprendre la structure HTML 122
SECTION 2 Insertion de liens internes à la page 124
SECTION 3 Annotation des formulaires 125
CHAPITRE 8 : Écrire du CSS pour un site d’invitation Web
SECTION 1 Ordre de rédaction CSS 132
SECTION 2 Comment utiliser les polices Web 134
SECTION 3 Écriture CSS relative aux polices 136
SECTION 4 Écriture CSS relative à la mise en page 137
SECTION 5 Rédaction de la conception commune CSS 139
SECTION 6 Rédaction de l'en-tête CSS 140
SECTION 7 Écriture du CSS pour le message Section 149
SECTION 8 Rédaction CSS pour la date Section 153
SECTION 9 Écriture du CSS pour le formulaire section 157
SECTION 10 Écriture de pied de page CSS et effets de parallaxe 162
CHAPITRE 9 Ajout d'animations CSS
SECTION 1 Principes de base de l'animation CSS 164
CHAPITRE 10 : Prise en charge de la conception Web adaptative
SECTION 1 Principes de base de la prise en charge multi-appareils 170
SECTION 2 Préparation à la conception Web adaptative 172
SECTION 3 Placement de chaque partie sur l'écran 177
SECTION 4 Ajustement de la conception de chaque pièce 180
SECTION 5 Création d'images pour écrans haute résolution 184
PARTIE 5 : CRÉER UN SITE MULTI-PAGES
Site à créer dans cette partie → Site multipage 188
CHAPITRE 11 : Les bases de la création et de la conception de sites web
SECTION 1 Processus de création de site web 190
SECTION 2 Aperçu de la conception Web 193
SECTION 3 Principes fondamentaux de la conception Web 194
CHAPITRE 12 : Écrire du CSS pour un site web de restaurant (mobile)
SECTION 1 : Points clés pour la création d'un site multipage 198
SECTION 2 Écriture CSS pour la page d'en-tête 200
SECTION 3 CONCEPT Page d'écriture CSS 208
SECTION 4 Écriture du CSS pour le MENU Page 220
SECTION 5 Écriture de CSS pour la page INFO 224
CHAPITRE 13 : Écrire du CSS pour un site de restaurant (PC)
SECTION 1 Écriture du CSS pour la page d'accueil (PC) 234
SECTION 2 : Écriture du CSS pour la page CONCEPT (PC) 240
SECTION 3 Écriture du CSS pour la page MENU (PC) 246
SECTION 4 Écriture du CSS pour la page INFO (PC) 248
CHAPITRE 14 Apprendre à utiliser les sites de référence
SECTION 1 Utilisation des informations sur le Web 250
SECTION 2 Intégration d'un exemple de code à votre site 252
CHAPITRE 15 Préparation de votre site Web en vue de sa publication
SECTION 1 Définition d'une favicon 254
SECTION 2 Configuration d'OGP 256
Méthodes d'étude après la lecture de ce livre 258
Avis du lecteur bêta xii
Introduction xiii
Comment lire ce livre xv
Points clés de chaque partie xvi
Sites à créer dans ce livre xvii
Télécharger les données d'entraînement xxi
Téléchargez les quatre annexes xxii
Prologue BD xxvi
PARTIE 1 Écrire du HTML
CHAPITRE 1 Avant de commencer
SECTION 1 Avant de commencer l'apprentissage 2
SECTION 2 Comprendre la structure d'un site Web 3
SECTION 3 Installation des applications requises 4
SECTION 4 Apprendre efficacement 9
SECTION 5 Mise en route avec un exemple très simple 12
CHAPITRE 2 Notions de base du HTML
SECTION 1 Pourquoi le balisage est important 14
SECTION 2 : Résumé du contenu de la lettre d'amour 16
SECTION 3 : Premiers pas avec HTML 20
SECTION 4 Annoter votre lettre d'amour 24
SECTION 5 : Écrire du code lisible 38
PARTIE 2 Création d'une page de collection de liens vers les réseaux sociaux
Sites à créer dans cette partie → Site de collecte de liens SNS 42
CHAPITRE 3 Notions de base du CSS
SECTION 1 : Premiers pas avec CSS 44
SECTION 2 UTILISATION DES OUTILS DE DÉVELOPPEMENT 46
SECTION 3 Connexion HTML et CSS 48
SECTION 4 Réinitialisation des styles par défaut du navigateur 52
SECTION 5 Comprendre le modèle de la boîte 54
CHAPITRE 4 Écriture de CSS pour les collections de liens des réseaux sociaux
SECTION 1 Rédaction CSS 56
PARTIE 3 Création d'une page à deux colonnes
Site à créer dans cette partie → Conception de mise en page à 2 colonnes 74
CHAPITRE 5 : Écrire du code HTML pour votre site de blog
SECTION 1 Délimitation des zones du site Web 76
SECTION 2 Balisement de la structure de document de votre blog 78
SECTION 3 Comprendre les plans et les sections 83
SECTION 4 Apprendre d'autres nouvelles balises HTML 86
CHAPITRE 6 Écrire du CSS pour votre site de blog
SECTION 1 Comprendre la mise en page Flexbox 90
SECTION 2 Écriture du CSS pour la page entière et l'en-tête 94
SECTION 3 Écriture du CSS pour la zone principale et la barre latérale 100
SECTION 4 Écriture du CSS pour la zone d'article et le pied de page 110
PARTIE 4 : Création d’une page à une seule colonne
Site à créer dans cette partie → Mise en page à une colonne 120
CHAPITRE 7 : Écrire du code HTML pour un site d’invitation Web
SECTION 1 Comprendre la structure HTML 122
SECTION 2 Insertion de liens internes à la page 124
SECTION 3 Annotation des formulaires 125
CHAPITRE 8 : Écrire du CSS pour un site d’invitation Web
SECTION 1 Ordre de rédaction CSS 132
SECTION 2 Comment utiliser les polices Web 134
SECTION 3 Écriture CSS relative aux polices 136
SECTION 4 Écriture CSS relative à la mise en page 137
SECTION 5 Rédaction de la conception commune CSS 139
SECTION 6 Rédaction de l'en-tête CSS 140
SECTION 7 Écriture du CSS pour le message Section 149
SECTION 8 Rédaction CSS pour la date Section 153
SECTION 9 Écriture du CSS pour le formulaire section 157
SECTION 10 Écriture de pied de page CSS et effets de parallaxe 162
CHAPITRE 9 Ajout d'animations CSS
SECTION 1 Principes de base de l'animation CSS 164
CHAPITRE 10 : Prise en charge de la conception Web adaptative
SECTION 1 Principes de base de la prise en charge multi-appareils 170
SECTION 2 Préparation à la conception Web adaptative 172
SECTION 3 Placement de chaque partie sur l'écran 177
SECTION 4 Ajustement de la conception de chaque pièce 180
SECTION 5 Création d'images pour écrans haute résolution 184
PARTIE 5 : CRÉER UN SITE MULTI-PAGES
Site à créer dans cette partie → Site multipage 188
CHAPITRE 11 : Les bases de la création et de la conception de sites web
SECTION 1 Processus de création de site web 190
SECTION 2 Aperçu de la conception Web 193
SECTION 3 Principes fondamentaux de la conception Web 194
CHAPITRE 12 : Écrire du CSS pour un site web de restaurant (mobile)
SECTION 1 : Points clés pour la création d'un site multipage 198
SECTION 2 Écriture CSS pour la page d'en-tête 200
SECTION 3 CONCEPT Page d'écriture CSS 208
SECTION 4 Écriture du CSS pour le MENU Page 220
SECTION 5 Écriture de CSS pour la page INFO 224
CHAPITRE 13 : Écrire du CSS pour un site de restaurant (PC)
SECTION 1 Écriture du CSS pour la page d'accueil (PC) 234
SECTION 2 : Écriture du CSS pour la page CONCEPT (PC) 240
SECTION 3 Écriture du CSS pour la page MENU (PC) 246
SECTION 4 Écriture du CSS pour la page INFO (PC) 248
CHAPITRE 14 Apprendre à utiliser les sites de référence
SECTION 1 Utilisation des informations sur le Web 250
SECTION 2 Intégration d'un exemple de code à votre site 252
CHAPITRE 15 Préparation de votre site Web en vue de sa publication
SECTION 1 Définition d'une favicon 254
SECTION 2 Configuration d'OGP 256
Méthodes d'étude après la lecture de ce livre 258
Image détaillée
.jpg)
Dans le livre
CSS est l'acronyme de Cascading Style Sheets (feuilles de style en cascade).
« Cascade » est un mot qui désigne une chute d'eau en forme de marches, et il en est venu à signifier couler (hériter) de haut en bas comme cette forme.
/ Comme expliqué précédemment, le HTML est constitué d'une structure imbriquée d'éléments (page 23).
L'héritage désigne la propriété selon laquelle les éléments enfants héritent du CSS spécifié dans l'élément parent.
N'oubliez pas que même si toutes les règles CSS ne sont pas héritées, toute règle CSS que vous spécifiez sur un élément parent sera appliquée par défaut à ses éléments enfants.
--- p.44
Les documents HTML contiennent uniquement des informations sémantiques et ne dictent pas les effets visuels tels que la modification de la taille de la police ou les sauts de ligne.
Le texte marqué comme titre s'agrandit et passe à la ligne dans le navigateur car celui-ci applique son propre style à l'élément titre.
Ces styles sont appelés « styles par défaut du navigateur ».
Le nom officiel est User Agent Stylesheet.
Comme il n'existe pas de spécification unifiée pour le CSS de base, différents styles peuvent être appliqués selon le navigateur.
--- p.52
Les paramètres margin-bottom:40px; spécifiés à l'ÉTAPE 1 et margin-top:80px; spécifiés à l'ÉTAPE 2 définissent des marges dans la même zone, mais cela ne donne pas une marge de 40px + 80px = 120px.
Il s'agit d'un phénomène qui se produit lors de la spécification des marges verticales d'éléments adjacents, et qui est appelé effondrement des marges.
/
En cas de décalage de marge, c'est la valeur la plus élevée de la marge qui s'applique.
--- p.151
L'approche « Mobile First » est une façon de penser qui optimise un site en fonction des caractéristiques des appareils mobiles dès sa conception.
Prenons par exemple les caractéristiques suivantes : petite taille de l’écran, données de communication limitées et visionnage intermittent en déplacement.
/ Veuillez noter qu'il ne s'agit pas simplement d'un ordre de travail consistant à « commencer par la version mobile ».
--- p.191
On comprend souvent le design comme quelque chose qui rend l'apparence belle, mais l'étymologie du mot design (designare) contient le sens de concevoir.
Comme on peut le constater dans le flux de production, plusieurs processus permettent de créer une ébauche de conception, et la conception Web est établie une fois tous ces processus terminés.
En d'autres termes, la conception web ne se limite pas à l'esthétique, elle vise également à répondre aux besoins des utilisateurs cibles ou à l'objectif du site.
/ Lorsque l'objectif ou la finalité change, la définition d'un bon design change également.
--- p.193
Il arrive que le format des images affichées sur les PC à écran horizontal soit différent de celui des smartphones à écran vertical.
Vous pouvez préparer plusieurs images et les intervertir en fonction de l'appareil, mais vous pouvez prendre en charge différents appareils avec une seule image en utilisant la propriété object-fit.
La propriété object-fit spécifie comment l'image est affichée dans la zone occupée par l'élément.
position de l'objet
Utilisées conjointement, ces options permettent également de spécifier quelle partie de l'image afficher.
« Cascade » est un mot qui désigne une chute d'eau en forme de marches, et il en est venu à signifier couler (hériter) de haut en bas comme cette forme.
/ Comme expliqué précédemment, le HTML est constitué d'une structure imbriquée d'éléments (page 23).
L'héritage désigne la propriété selon laquelle les éléments enfants héritent du CSS spécifié dans l'élément parent.
N'oubliez pas que même si toutes les règles CSS ne sont pas héritées, toute règle CSS que vous spécifiez sur un élément parent sera appliquée par défaut à ses éléments enfants.
--- p.44
Les documents HTML contiennent uniquement des informations sémantiques et ne dictent pas les effets visuels tels que la modification de la taille de la police ou les sauts de ligne.
Le texte marqué comme titre s'agrandit et passe à la ligne dans le navigateur car celui-ci applique son propre style à l'élément titre.
Ces styles sont appelés « styles par défaut du navigateur ».
Le nom officiel est User Agent Stylesheet.
Comme il n'existe pas de spécification unifiée pour le CSS de base, différents styles peuvent être appliqués selon le navigateur.
--- p.52
Les paramètres margin-bottom:40px; spécifiés à l'ÉTAPE 1 et margin-top:80px; spécifiés à l'ÉTAPE 2 définissent des marges dans la même zone, mais cela ne donne pas une marge de 40px + 80px = 120px.
Il s'agit d'un phénomène qui se produit lors de la spécification des marges verticales d'éléments adjacents, et qui est appelé effondrement des marges.
/
En cas de décalage de marge, c'est la valeur la plus élevée de la marge qui s'applique.
--- p.151
L'approche « Mobile First » est une façon de penser qui optimise un site en fonction des caractéristiques des appareils mobiles dès sa conception.
Prenons par exemple les caractéristiques suivantes : petite taille de l’écran, données de communication limitées et visionnage intermittent en déplacement.
/ Veuillez noter qu'il ne s'agit pas simplement d'un ordre de travail consistant à « commencer par la version mobile ».
--- p.191
On comprend souvent le design comme quelque chose qui rend l'apparence belle, mais l'étymologie du mot design (designare) contient le sens de concevoir.
Comme on peut le constater dans le flux de production, plusieurs processus permettent de créer une ébauche de conception, et la conception Web est établie une fois tous ces processus terminés.
En d'autres termes, la conception web ne se limite pas à l'esthétique, elle vise également à répondre aux besoins des utilisateurs cibles ou à l'objectif du site.
/ Lorsque l'objectif ou la finalité change, la définition d'un bon design change également.
--- p.193
Il arrive que le format des images affichées sur les PC à écran horizontal soit différent de celui des smartphones à écran vertical.
Vous pouvez préparer plusieurs images et les intervertir en fonction de l'appareil, mais vous pouvez prendre en charge différents appareils avec une seule image en utilisant la propriété object-fit.
La propriété object-fit spécifie comment l'image est affichée dans la zone occupée par l'élément.
position de l'objet
Utilisées conjointement, ces options permettent également de spécifier quelle partie de l'image afficher.
--- p.218
Avis de l'éditeur
Mon premier livre sur la conception web : facile à apprendre, amusant et avec des résultats époustouflants.
Tout le monde a probablement rêvé au moins une fois d'avoir son propre site web.
L'éditeur de ce livre a également créé un site web dès qu'il a appris à coder.
J'ai essayé de le faire moi-même à l'aide d'un modèle, mais je ne savais pas comment l'améliorer.
En corrigeant ce livre, je me suis rendu compte qu'il s'agissait exactement du livre d'initiation à la conception web que je recherchais.
Lorsque nous ouvrons le livre, le mignon personnage de capybara « Capyjou » nous accueille.
Copyzoo crée un site web collectant les liens des réseaux sociaux pour inviter Copyko à sortir, et un blog d'entreprise pour promouvoir sa ferme de carottes.
Copyzou, qui a décidé d'épouser Kapiko, crée également un site d'invitations en ligne et ouvre un restaurant, en créant un site web pour ce restaurant.
En suivant l'exemple de Copyzoo, vous serez capable de créer quatre types différents de sites web exceptionnels.
Les explications des concepteurs web et des concepteurs de balisage « humains » qui apparaissent ici et là sont faciles à comprendre et couvrent l'essentiel de la conception web.
Nous vous enseignons étape par étape à partir des bases, de sorte que même ceux qui débutent sans aucune connaissance préalable n'auront aucun problème.
Il y a quatre annexes au total.
« Comment rendre votre site Web public » vous apprend à rendre votre « propre site Web » public, et « Sites recommandés » présente 47 sites que l'auteur (ou le traducteur) utilise réellement dans son travail.
Les données « Sample Design XD Data » peuvent être utilisées pour s'exercer, par exemple au recadrage d'images ou à l'extraction de couleurs, et peuvent servir de référence lors de la création de fichiers de conception.
L'annexe la plus utile, la « fiche récapitulative », peut être consultée non seulement pendant vos études, mais aussi lors de la création et de la gestion de votre site web à l'avenir.
Hautement recommandé aux débutants qui souhaitent apprendre à créer un site web de A à Z, et à ceux qui veulent devenir concepteurs web.
Contenu principal
- Notions de base en HTML et CSS
-Site de collecte de liens SNS
-Site de blog
- Site d'invitation Web
- Animation CSS
-Conception web adaptative
-Site de restaurant
-Comment rendre votre site web public
Tout le monde a probablement rêvé au moins une fois d'avoir son propre site web.
L'éditeur de ce livre a également créé un site web dès qu'il a appris à coder.
J'ai essayé de le faire moi-même à l'aide d'un modèle, mais je ne savais pas comment l'améliorer.
En corrigeant ce livre, je me suis rendu compte qu'il s'agissait exactement du livre d'initiation à la conception web que je recherchais.
Lorsque nous ouvrons le livre, le mignon personnage de capybara « Capyjou » nous accueille.
Copyzoo crée un site web collectant les liens des réseaux sociaux pour inviter Copyko à sortir, et un blog d'entreprise pour promouvoir sa ferme de carottes.
Copyzou, qui a décidé d'épouser Kapiko, crée également un site d'invitations en ligne et ouvre un restaurant, en créant un site web pour ce restaurant.
En suivant l'exemple de Copyzoo, vous serez capable de créer quatre types différents de sites web exceptionnels.
Les explications des concepteurs web et des concepteurs de balisage « humains » qui apparaissent ici et là sont faciles à comprendre et couvrent l'essentiel de la conception web.
Nous vous enseignons étape par étape à partir des bases, de sorte que même ceux qui débutent sans aucune connaissance préalable n'auront aucun problème.
Il y a quatre annexes au total.
« Comment rendre votre site Web public » vous apprend à rendre votre « propre site Web » public, et « Sites recommandés » présente 47 sites que l'auteur (ou le traducteur) utilise réellement dans son travail.
Les données « Sample Design XD Data » peuvent être utilisées pour s'exercer, par exemple au recadrage d'images ou à l'extraction de couleurs, et peuvent servir de référence lors de la création de fichiers de conception.
L'annexe la plus utile, la « fiche récapitulative », peut être consultée non seulement pendant vos études, mais aussi lors de la création et de la gestion de votre site web à l'avenir.
Hautement recommandé aux débutants qui souhaitent apprendre à créer un site web de A à Z, et à ceux qui veulent devenir concepteurs web.
Contenu principal
- Notions de base en HTML et CSS
-Site de collecte de liens SNS
-Site de blog
- Site d'invitation Web
- Animation CSS
-Conception web adaptative
-Site de restaurant
-Comment rendre votre site web public
SPÉCIFICATIONS DES PRODUITS
- Date de publication : 6 octobre 2023
- Nombre de pages, poids, dimensions : 288 pages | 188 × 245 × 20 mm
- ISBN13 : 9791192987149
- ISBN10 : 1192987144
Vous aimerez peut-être aussi
카테고리
Langue coréenne
Langue coréenne
![GQ KOREA Mark (Mensuel) : décembre [2025]](http://librairie.coreenne.fr/cdn/shop/files/8ef265dbbfbf186523ed75ba7319009d.jpg?v=1765340328&width=3840)
