HTML et CSS? Qu'est ce que c'est?
Le HTML,le CSS et le Javascript sont des véritables standards en matière de programmation web, qui n'ont à l'heure actuelle aucuns concurrents. Ils sont à la base de tous projets web, car ils peuvent être lus et décryptés par tout les navigateurs!
Le but d'un navigateur de recherche est donc d'interpréter et de traduire les documents HTML. Ce langage n’est pas un langage de programmation mais un langage de description de contenu. Une fois que le navigateur à finit de lire la structure de la page HTML, il charge ensuite les différents contenus externes référencés(images, sons, typographies etc.).
C'est le World Wide Web Consortium, un organisme de standardisation à but non lucratif qui est chargé de s'occuper de la compatibilité des technologies du World Wide Web (le Web). Il à été fondé par Tim Berners-Lee en 1994. Il est considéré comme le créateur du HTML en 1992.
Il est possible d'accéder au code HTML de toutes les pages webs que vous consultez! Dans la plupart des navigateurs, il est possible de faire un clic droit et de cliquer sur "Afficher le code source de la page". Vous pouvez aussi "Inspecter" la page web, ce qui permet d'ouvrir un terminal, une fenêtre qui permet de voir ce qu'il se passe sur la page.
Comment créer une page web?
Voici comment se compose un fichier html basique:
Pour créer une page web, il suffit de:
1.Créer un fichier dans n’importe quel éditeur de texte, et l’enregistrer en terminant son nom avec l'extension .html
2.Même si on écrit pas la totalité des balises -normalement- indispensables, le navigateur arrive quand même
à lire le code! Cela reste quand même quelque chose à ne pas faire dans une pratique du code conventionnelle…!
3.Ouvrir le fichier avec un navigateur
4.(optionnel mais quand même bien utile) Il est possible de téléchargement un éditeur de texte, conçut spécialement
dans l’objectif de faire de la programmation. Les balises sont donc mises en couleurs et en formes pour faciliter la lecture d’un humain :^)
Pour télécharger l’éditeur Atom.
Pour télécharger VsCodium.
Pour vous éviter de l'écrire a la main, je vous propose ce gabarit à copier-coller, qui est basé sur la dernière version du langage (HTML5).
<!DOCTYPE html> <!-- Indique que le document est en html -->
<html>
<head> <!-- La "tête" du document -->
<title>Gabarit HTML</title> <!-- Balise du titre de la page -->
<meta charset="utf-8" /> <!-- balise spécifiant l’encodage des caractères -->
<style></style> <!-- C'est ici qu'on va faire le graphisme! -->
<script></script> <!-- balise contenant un script javascript (optionnel)! -->
</head><!-- La fin de notre balise "tête" -->
<!-- Le corps du document -->
<body><!-- Balise ouvrante du corps de la page -->
<p id="Titre"> Je suis le contenu!</p> <!-- Balise paragraphe avec identifiant -->
</body><!-- Balise fermante du corps de la page -->
</html><!-- Balise de fin html -->
Prenez le temps de lire ce code HTML et de le comprendre. Lorsque vous rencontrez une balise ou un mot que vous ne comprenez pas, prenez le temps d'aller faire une recherche sur le web.
Coller ce gabarit dans votre éditeur de texte, et essayez d'insérer des balises <p></p> ou du texte à l'intérieur du corps de votre document. Utilisez la balise <br> pour sauter des lignes. Puis, enregistrez votre fichier et ouvrez le dans un navigateur!
Ici, vous pouvez trouver de nombreux symboles à copier-coller, c'est cadeau.★✿♥♪⟿❖╯✶✰❉♕
/!\ Attention, ne nommez pas vos fichiers avec des caractères spéciaux /!\
Quelques exemples de balises. Chaque balise dans le tableau est un lien vers la page de w3schools qui la présente en détail.
texte : Les balises suivantes servent à préciser la qualité sémantique d’un passage textuel. Le texte est alors affecté d’un style visuel par défaut (modifiable en CSS). passage important : <strong></strong> (gras par défaut…) emphase : <em></em> (italique…) insertion : <ins></ins> (souligné…) préformaté : <pre></pre> (monospace…) texte barré : <del></del> texte cité : <blockquote></blockquote> texte en mode exposant : <sup></sup> texte en mode indice : <sub></sub> saut de ligne : <br> (balise unique, non fermée) page : titres d’importance décroissante : <h1></h1>, <h2></h2>, etc. jusqu’à <h6></h6> paragraphe : <p></p> séparateur horizontal (filet) : <hr> (balise unique, non fermée) division de la page (bloc) : <div></div> identifier un passage : <span></span> medias : insérer un lien : <a href="adresse_URL_du_lien"></a> insérer une image : <img src="adresse_URL_de_l'image"> (balise unique) insérer du son : <audio></audio> insérer une vidéo : <video></video> création : zone de dessin bitmap : <canvas></canvas> zone de dessin vectoriel : <svg></svg> zone dans laquelle charger une autre page html : <iframe></iframe> listes : liste non ordonnée : <ul></ul> liste ordonnée : <ol></ol> élément d’une liste : <li></li> tableaux : création d’un tableau : <table></table> ajout d’une ligne dans un tableau : <tr></tr> ajout d’une case dans une ligne : <td></td>Ressources trouvés sur le support en ligne d'Alexis Chazard.
Une balise peut posseder plusieurs attributs, qui vont être utile par exemple pour l'identifier, comme le fait l'attribut ID, qui permet de donner un nom à la balise pour ensuite lui donner un style! Tous les attributs sont trouvables ici. Ce n'est pas forcément utile comme ça en tant que tel, mais ça vous donne une idée...
Comment est organisée la structure d'un fichier HTML?
La structure d'un fichier HTML est celle de boites contenues dans d'autres boites. On dit des éléments qu'ils sont indentés, c'est à dire qu'il y'a une ou plusieurs tabulation devant les balises, pour permettre la lisibilité.
