qui se trouvent à l'intérieur d'autres balises
<div style="color: blue;">
Ce texte sera bleu.
</div>
C'est ça l'héritage de style, la couleur bleue est appliquée au div et à tout ce qu'il contient, en tant que balises imbriquées (Mais toutes les propriétés ne sont pas héritables)
liens
a { color: black; }
un seul élément parmi d'autres,
Le cours est mal expliqué; Id, c'est l'identité, c'est comme si tu donnais un nom et un prénom à un élément. id c'est comme si tu écrivais "nom:". Et le contenu de l'id c'est un identifiant unique pour chacun (tu vas pas appeler plusieurs élement "Id: Image_de_Marie", sinon on ne sait pas le quel c'est.
Classe, c'est pour des catégories, par exemple, je crée une classe Photo_de_femme, une Photo_de_chats, et à l'intérieur d'une classe tu peux avoir des éléments que tu as désigné de façon unique par leur id (identité).
mailto
Si ça ne marche pas, c'est qu'il faut, sur votre ordi, mentionner quel logiciel sera utilisé pour ouvrir les mails, ou si le protocole "mailto" ouvre par exemple une page vers votre Gmail.
href
id = identité et href = hypertext reference.
Pour faire le dièse sur Windows: Alt GR + touche 3 du clavier central.
des espaces
Utiliser plutôt des _ (ou à la limite, des tirets -)
Les points marchent, mais sont à éviter, car on les utilise beaucoup en CSS, et ça peut créer des confusions.
#ancre
<br>
#Exemple_oiseau_migrateur
robots de moteurs de recherche
Les crawlers.
tailles différentes
Pour mettre un texte en valeur, on ne doit pas le transformer en titre, mais utiliser la balise paire
Autrefois, on utilisait la balise bold, mais elle est dépréciée maintenant, et ne doit plus être utilisée.
Pour régler plus finement l'apparence et la taille des lettres, il ne faut pas le faire en HTML, mais on le fera quand on abordera le CSS, complément indispensable du HTML.
<title>
De plus, la différence est aussi que h1 se situe dans le corps (body), alors que titre est dans l'en-tête (head)
<h1>
Il y a 6 niveaux de titre. Header 1 jusqu'au 6. H1 est écrit en gros, H6 est écrit dans la taille la plus petite des titres.
Attention: une seule balise H1 par page. C'est le titre affiché de la page. Par contre, pour les autre headers, on peut en mettre autant qu'on veut.
Les headers ne sont pas seulement important pour afficher une hiérarchie de titres sur la page. Mais Google et les moteurs de recherche les lisent, pour savoir de quoi parle la page. Ils accordent plus d'importance aux titres qu'aux non-titres pour évaluer le contenu. Si on met plusieurs balises H1 (il ne devrait y en avoir qu'une par page, Google enlève du "poids" (de l'importance) à un des titres, donc ce n'est pas souhaitable our des raison d'optimisation du code dans les moteurs de recherche (permettre à notre site d'être facilement trouvés par les internet dans Google).
On ne doit pas non plus tricher en mettant des titres, et un contenu qui n'a rien à voir, ou trop de titres par rapport au contenu, Google le détecte.
bouts de code
On dit des snippets, en anglais.
index.html
Il est très important de l'appeler exactement de ce nom. Et bien vérifier que le fichier n'a pas été enregistré en index.html.txt par exemple, car ça ne marchera pas!
En minuscule "index" et pas "Index", car ce serait 2 fichiers différents.
Si on nomme la page accueil.html ou ma-page.html, le site ne s'ouvrira pas automatiquement !
Quand un serveur web (ou un navigateur) entre dans un dossier, il cherche par défaut un fichier nommé index. C'est l'automatisme qui permet d'arriver sur www.monsite.com sans avoir à taper www.monsite.com/accueil.html.
Squelette, structure minimale de ce fichier:
Un fichier index.html doit toujours contenir ces éléments dans cet ordre pour être considéré comme "propre" :
<html>
<head>
<meta charset="UTF-8">
<title> Ma page... </title>
</head>
<body>
Bienvenue sur mon site
</body>
</html>
Noter que le titre se trouve pas dans le corps (body) mais dans l'en-tête (head), c'est le titre qui est destiné à Google, mais le titre qui s'affiche sur la page est dans la balise H1
Le fichier index.html doit tojours être à la racine du dossier dans lequel se trouve le site web, sinon le serveur ne le trouvera pas tout seul.
je pourrai venir vérifier si vous avez bien suivi le cours à la lettre
Une menace!
code source
C'est le code écrit en HTML.
Si les accents s'affichent mal par la suite, c'est qu'il y a un problème avec l'encodage. Vérifiez que la balise meta indique bien UTF-8, et que votre fichier est enregistré en UTF-8.
Si on mets une étiquette "Fr" mais que c'est écrit avec un alphabet bizarre que personne ne peut lire, l'étiquette ne sert à rien. Enregistrer en UTF-8, c'est choisir le bon alphabet au moment de cliquer sur "Enregistrer".
L'encodage est un réglage de l'éditeur de texte (VS Code, Sublime Text, Notepad++, etc.).
Dans VS Code : Tout en bas à droite de la fenêtre, dans la barre bleue. C'est écrit "UTF-8". Si c'est écrit"Windows-1252" ou "Western", c'est qu'il y a un blème !
Par Les "é" deviennent des é
Si les accents bugguent malgré la balise meta :
Ouvrir le fichier dans l'éditeur.
Cliquer sur l'encodage en bas à droite (souvent "UTF-8" ou "Win1252"). "Save with Encoding" (Enregistrer avec l'encodage).
Sélectionner UTF-8.
faire un clic droit sur n'importe quelle page, et de sélectionner l'inspecteur.
Essayez maintenant! Moi j'ai "voir le code source de la page" dans le menu contextuel (qui apparaît quand on a fait clic droit) Et voilà !
le navigateur web qui fait le reste du travail : lire le code HTML et CSS
CSS et HTML sont des langages (pas de programmation mais de mise en page) HTML: langage de balisage, et CSS langage de marquage (mark up language).
Ils fonctionnent de façon complémentaire pour créer des pages web, d'un côté le fond (HTML), de l'autre la forme (CSS), et quand on parle de langage, il faut quelque chose pour le traduire en rendu, ici c'est le navigateur.
Le navigateur est l'interpréteur de ces langages, c'est lui qui les lit, les décode pour les transformer en page qu'on voit.
Dans la famille des langages informatiques, on a les langages interprétés et compilés, ceux-ci sont interprétés, par le navigateur.
en 1996,
Le CSS est né en 1996, à retenir. Le HTML en 1991. Donc, avant, au début de l'internet, on ne séparait pas le fond et la forme.
Cascading Style Sheets,
En bon français, Feuilles de style en cascade. On parle de "Feuilles de style" (pourquoi on parle de feuilles de style en informatique: c'est un héritage de l'imprimerie).
Une feuille de style (conc style sheet en anglais) est un document qui contient l'ensemble des règles de mise en forme d'une page web.
On dit en cascade, car les règles de style se suivent les unes les autres, On dit en cascade car les règles de style se suivent les unes les autres, si plusieurs règles ciblent le même élément, c'est la plus précise ou la dernière qui l'emporte
1991 lors du lancement du Web
à retenir. Le Web date de 1991. ça peut tomber dans un quizz!
HyperText Markup Language
à bien retenir. En français, on dirait langage de marquage hypertexte. L'hypertexte, c'est quand on clique sur un mot d'une page, pour atterrir ailleurs (une autre page, un autre endroit de la page), c'est le lien entre les pages web.
propriétés CSS
On parle de balise HTML (les mots-clefs entre chevron, par exemple , ça c'est une balise ouvrante. Une balise fermante utilise une barre oblique. et entre les 2 le contenu de la balise.
Retenez bien qu'on parle de balises en HTML, mais en revanche de propriétés en CSS;
CSS et HTML sont les 2 langages utilisés pour faire des pages web, HTML en gros sert à dire quel contenu, et CSS a dire comment on veut l'afficher (rouge, gras, centré, etc).
La version qu'on utilise de CSS et le CSS3 et pour HTML le HTML5. Voilà les choses basiques à connaitre.
mémo pour assimiler les informations essentielles.
Une autre façon de faire un mémo, est de bien utiliser le surlignage avec Hypothesis. Vous pouvez créer un groupe privé, ça mettra de côté toutes les parties que vous soulignez pour y revenir, avec vos annotations qui servent à apprendre.
branches
Très important de bien comprendre comment on navigue dans GitHub.
GitHub est la plateforme la plus utilisée pour héberger du code et collaborer dessus.
C'est incroyable comme les gens ne savent pas apprendre, ils surlignent tout, sauf ce qu'il est important de retenir. Ici, une info importante.
isual Studio Code
Vous n'êtes pas obligés d'installer Visual Studio Code. Il y a beaucoup d'autres logiciels. VSCodium est mieux, car sans les mouchards Microsoft; Voici une version sans installation (portable, à juste mettre sur une clef USB): https://portapps.io/app/vscodium-portable/, il y a aussi Notepad++; qu'on peut aussi mettre sur une clef USB,; etc...