Développement web 10

Leçon 1

Lis les articles suivants :

1. Éléments, balises et attributs HTML
2. Les titres et les paragraphes en HTML

Leçon 2

Lis les articles suivants sur les concepts de :

1. Structure minimale d’une page HTML valide
2. L’indentation et les commentaires en HTML

Valider le code HTML ou CSS

Les navigateurs (Firefox, Chrome, Safari, etc.) feront de leur mieux pour rendre une page web HTML, même s'il y a des erreurs dans le code. C'est l'une des grandes différences entre un langage de balisage et un langage de programmation.

Ainsi, les validateurs HTML et CSS sont incontournables pour s'assurer que le code est valide puisque le navigateur va ignorer ces erreurs.

Les erreurs soulignées par les validateurs sont généralement assez descriptives, mais certaines pourraient être difficiles à comprendre. Alors, il y a une section solutions aux erreurs trouvées par le validateur dans les ressources pour vous aider.

La structure minimale pour une page web valide

Pour qu'une page soit valide, il faut inclure certaines balises avec certains attributs.

Leçon 3

Nous allons apprendre les concepts suivants :

1. les listes (comme celle-ci)
2. les balises br, hr et pre
3. Les entités HTML
•   - espace insécable, très utile en français pour les guillemets et les unités, 10 km/h, 73,25 $ etc.
•   - demi-espace, utile en français pour après les ? et !

Lis les articles suivants.

1. Créer des listes en HTML
2. Les espaces et retours à la ligne en HTML

Leçon 4

Nous allons approfondir notre compréhension des hyperliens :

1. la balises a qui permet de créer des hyperliens externes et internes.
2. les hyperliens externes
3. les hyperliens internes (de la page)
• les « id » et la référence « # »
• les « id » doivent être uniques (comparés aux classes qui pourraient être utilisées à volonté)
• contrôler le défilement
4. les hyperliens internes (du site)
• les pages dans le même dossier
• les pages qui se trouvent dans un autre dossier (avec « .. » et « / »)
5. Comment structurer un site web
• index.html - page principale (ou d'acceuil)
• toutes les images dans un dossier (généralement nommé « media »)
• tous tes fichiers .css dans un dossier (généralement nommé « css »)
• bien organisé et structuré comme un dossier sur l'ordinateur
• bonne convention d'appellation

Lis les articles suivants.

1. HTML - Ancre
2. (facultatif) - Une explication très complète de comment Créer des liens en HTML

Leçon 5

Nous allons apprendre les concepts suivants :

1. les balises strong et em
2. les entités HTML

Lis les articles suivants.

1. Définir le niveau d’importance des contenus en HTML
2. lis seulement la section Les entités HTML (vers le bas)

La convention d'appellation

Pour éviter des bogues et du comportement non voulu, il est important de respecter les règles suivantes lorsqu'on nomme les fichiers.

1. utiliser des noms descriptifs
2. pas d'espaces
3. pas de caractères spéciaux ($, *, @, #, etc.)
4. pas de lettres accentuées (É, ô, à, etc.)
5. le premier caractère devrait être une lettre
6. toutes les lettres en minuscule
7. faire attention aux extensions
• Chaque fichier doit avoir une extension valide (.html, .css, .jpg, .png, etc).
• Le nom de fichier doit ne contenir qu'un seul point « . ». Alors, pas de nom_photo.png.jpg
• Fais attention aux espaces invisibles dans l'extension (Ex. index.html_ où le soulignement représente un espace.)

Entités HTML

Leçon 6

Cette leçon introduit le CSS. Nous allons apprendre les concepts suivants :

1. Les sélecteurs et les propriétés CSS
2. Les trois endroits où l'on peut écrire le code CSS

Lis les articles suivants.

1. Sélecteurs et propriétés CSS
2. Où écrire le code CSS ?
3. Anatomie d'une règle

Leçon 7

Lis les articles suivants :

1. Commentaires et indentation en CSS
2. Sélecteurs CSS simples et combinateurs
3. SMNArnold - Text

Leçon 8

Lis les articles suivants :

1. Les attributs HTML class et id et les sélecteurs CSS associés
2. SMNArnold - Sélecteurs
3. SMNArnold - Police
4. SMNArnold - Unités de couleur

Voici un exemple de ressource utile pour générer une palette (de couleurs). Note que ce n'est pas la seule qui existe. Il y a des centaines sur l'internet. Pour l'utiliser :

• Si tu n'as pas trop de temps ou veux une palette déjà bien choisie, sélectionne Explore trending palettes
• Si tu as déjà au moins une couleur en tête, ou tu as le temps d'explorer sélectionne Start Generator

Leçon 9

Lis les articles suivants :

1. Les éléments HTML div et span (conteneurs génériques)
2. CSS - Nommage et formatage
3. Sélecteurs avancés

Leçon 10

Fais les niveaux 9 à 14 dans le CSS Diner.

Lis les articles suivants :

1. Display

Fais les exercices suivants :

1. Display - Celeste

Leçon 11

Lis les articles suivants  et fais les exercices associés (dont les liens se trouvent en bas):

1. Unités de mesure
2. Width & Height
3. Bordure
4. Modèle des boîtes

Fais les exercices suivants :

1. Width/Height - System32
2. Border-radius - Q-bitz
3. Box-model - Corno

Leçon 12

Lis les articles suivants :

1. Padding
2. Margin
3. Box-sizing
4. Légende de média

Fais les exercices suivants :

1. Width/Height - Prévert
2. Box-model - Broforce
3. Box-sizing - Illustrator

Largeur, hauteur et les problèmes de dépassement

Voici la leçon de référence.

Les concepts inline et block

See the Pen Cours HTML CSS 5.2.1 by Pierre (@pierregiraud) on CodePen.

Essaie de répliquer l'image suivante et modifiant le code ci-haut.

Essaie maintenant de répliquer l'image suivante.

Solution

h1 { background-color: red; width: 75%; color: white; margin: auto; text-align: center; }

Lis cet article au complet pour apprendre des problèmes de dépassement. N'oublie pas de modifier le code dans les CodePen pour bien comprendre les concepts.

Sémantique HTML

Dans cette section, nous allons introduire la sémantique HTML.

Pour compléter cette leçon, fais les choses suivantes :

1. Lis cet article sur la sémantique HTML.
2. Lis cet article (en anglais) qui parle de la sémantique plus généralement.
3. Relis cet article sur l'inspecteur et plus spécifiquement la section sur le DOM tree pour te préparer à faire les exercices suivants.
4. Quand tu cherches des éléments sémantiques dans les pages, fais la distinction entre un élément sémantique (Ex. <nav>) et une classe (Ex. <div class="nav">)
5. L'outil HTML5 Outliner te permet à générer un plan de site web. Vous pouver fournir une adresse URL ou copier/coller directement le code HTML. En utilisant l'Outliner, tu peux voir comment les moteurs de recherche (comme Google, Baidu, DuckDuckGo) et des lecteurs d'écran voient ta page. Cette ressource a été ajouté à la section Ressources en haut.
6. Analyse les sites suivants. Essaie de voir comment le site est structuré sémantiquement. Utilise l'outliner HTML et l'inspecteur aussi. Penses-tu que ces sites utilisent une bonne sémantique HTML? Compare avec un partenaire.
   • BBC - Crise ukrainienne : le puzzle géopolitique de Vladimir Poutine
   • The Line - Jen Gerson: What if Omicron is the Really Big Bad?
   • Marksheet - HTML is about meaning
7. Complète ce quiz sur le sujet

Les éléments iframe, figure, details et les citations

Dans cette leçon, nous allons aborder plusieurs éléments HTML utiles.

Suis les instructions suivantes, te référant à la liste d'hyperliens pour chaque concept en dessous.

1. Crée un site web.
   • Ajoute un thème avec des couleurs complémentaires. Utilise un outil comme Coolors ou autre.
2. Lis cet article sur iframe.
   • Ajoute une carte Google à ton site centrée sur le parc Stanley
   • Ajoute une carte OpenStreetMap à ton site centrée sur l'île de Vancouver'
   • Ajoute du texte pour expliquer ce que contiennent ces cartes.
   • Ajoute trois (3) vidéos YouTube et trois (3) vidéos Vimeo à ton site avec du texte pour mettre ces vidéos en contexte. Ex. « voici 3 vidéo-clips de mon artiste musicale préférée. »
   • Ajoute deux (2) sites web (dont le site sur lequel tu es en ce moment et un autre site web de ton choix) dans des iframe.
3. Lis cet article sur figure et figcaption.
   • Ajoute au moins 3 images à ton site avec des légendes
   • Ajoute du CSS pour changer la mise en forme des légendes
4. Lis cet article et cet article sur q, blockquote et cite.
   • Créer deux pages web avec des attributes « lang » différents avec une citation (q) pour démontrer comment cet attribut change le comportement
   • Intègre ces deux pages directement dans ton site avec des éléments iframe qui ont une taille appropriée
   • Crée une citation q qui utilise un emoji pour entourer la citation.
5. Trouve toutes les valeurs CSS par défaut pour les éléments appris dans cette leçon et ajoute cette information dans ton site web. (Rappelles-tu où trouver cette information?)
6. Ajoute du CSS pour faire en sorte que la taille des éléments suivants soit standardisée (ex. toutes les cartes ont la même taille)
   • images
   • cartes
   • vidéos
   • autres sites webs dans un iframe
7. Lis cet article sur details et summary
   • Cache chaque partie de ton site web, la rendant visible seulement quand on fais un clic là-dessus.
8. Téléverse ton site web sur ManageBac

Détails ici

Viewport

Article SMNArnold sur les viewports.

Le code suivant inséré dans votre section head servira bien dans la majorité des cas :

Media Query

• SMNArnold - media queries
• Exercices SMNArnold - Minions
• Exercices SMNArnold - Où est Charlie

Breakpoints

Un bon point de départ est d'utiliser les breakpoints suivants :

1. 600px
2. 900px
3. 1200px
4. 1800px (facultatif)

Flexbox

Articles et exercices sur Flexbox :

• SMNArnold - Flexbox
• SMNArnold - Flexbox intermédiaire
• SMNArnold - Flexbox avancé
• Exercices Flexbox Zombies
• Exercices Flexbox Froggy
• Exercices Flexbox Defense
• Exercices SMNArnold - Scrabble Potter
• Exercices SMNArnold - Pony
• Exercices SMNArnold - Actualités Google

Grid

Articles et exercices sur Grid :

• SMNArnold - Grid
• SMNArnold - Grid intermédiaire
• Exercices SMNArnold - Joker
• Exercices Grid Garden
• Exercices SMNArnold - Offres Samsung