Comment créer la structure d’une page web ? Comment gérer l’apparence des différents éléments de cette même page web ? Deux questions importantes à se poser quand on veut se lancer dans la création d’un site/blog/forum sur internet. Pour y répondre, nous allons nous intéresser aux langages HTML et CSS. Tu vas voir, ce n’est pas bien compliqué, une fois que l’on a compris le fonctionnement des pages.
Les bases du HTML
Qu’est-ce que le HTML ? Pour faire simple, le HTML est le langage utilisé pour créer la structure d’une page web. Prenons comme exemple une pièce de la maison : le salon. Tout ce qui est lié à la structure de la pièce (murs, canapé, table-basse… ) représenterait le HTML. Tout ce qui est lié à la décoration (couleurs, grandeur, type de revêtements… ) représenterait les CSS. Concrètement, le HTML va nous servir à dire que nous voulons créer un type de contenu : paragraphe, liste, tableau, image etc.
Comment fonctionne le HTML
Le langage HTML est composé de balises ouvrantes et fermantes. Il existe cependant quelques balises uniques.
Prenons un exemple simple : la création d’un paragraphe
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Ici, le paragraphe est matérialisé grâce aux balises <p> et </p>. J’indique donc au navigateur que le contenu compris entre ces balises est un paragraphe.
La structure d’une page web
Maintenant que tu as compris le fonctionnement des balises, voici la structure d’une page. Cette structure est celle de base, et est toujours utilisée pour créer une page web.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
Quelques explications sur le code :
- <html></html> : ces balises limitent le code de la page
- <head></head> : indiquent les informations relatives à la page, mais qui ne s’afficheront pas
- <title></title> : c’est ici que se place le titre affiché dans l’onglet de ton navigateur
- <body></body> : délimitent l’endroit où se trouve le contenu à afficher sur la page
Les balises les plus courantes
Titres
<h1></h1>: titre 1er niveau<h2></h2>: titre 2ème niveau<h3></h3>: titre 3ème niveau
Éléments de texte
<p></p>: paragraphe<ul></ul>: liste à puce<ol></ol>: liste numérotée<li></li>: élément d’une liste<a href="lien"></a>: lien hypertexte<blockquote></blockquote>: bloc de citation
<strong></strong>: met en gras
Tableau
<table></table>: tableau<tr></tr>: ligne du tableau<th></th>: cellule de légende de ligne ou de colonne<td></td>: cellule du tableau (colonne)
Structure et habillage
<div></div>: définition de bloc<span></span>: habillage d’élément
Pour aller plus loin, je te propose de te rendre sur le site de Mozilla pour les développeurs. En effet, tu y trouveras des informations complètes sur les bases du HTML.
Les bases des CSS
Qu’est-ce qu’une feuille CSS ? Il existe une différence fondamentale entre HTML et CSS : le HTML défini le type de contenu, et le CSS indique l’apparence de ce dernier. Si le HTML se place directement dans la page web, la feuille CSS est très souvent séparée de cette dernière. Il est très simple de créer une pareille feuille : on peut passer par un éditeur, ou bien utiliser le bloc note de Windows et enregistrer son fichier en .css.
Comment fonctionne une feuille CSS
Comme pour le HTML, il est assez simple de comprendre ce langage. En effet, ce que l’on a appris avec le précédent, va nous servir pour créer notre feuille de styles. Voici un exemple de code :
p {
color: blue;
}
Reprenons l’exemple d’un paragraphe. Ici, j’indique dans mon code que tous les paragraphes de la page devront être en bleu.
- P est le sélecteur. Il détermine le contenu impacté par le code que l’on met en place.
- Color est la propriété. Elle indique ce qui va changer dans le contenu que l’on a choisi.
- Blue est la valeur. Elle sélectionne un des changements possibles dans la propriété.
Les propriétés et valeurs les plus courantes
Le fonctionnement est toujours plus ou moins le même. Tout d’abord, on sélectionne le type de contenu que l’on veut modifier. Puis, on choisi sa propriété. Enfin, on détermine la valeur de la propriété que l’on a choisie.
width : longueur d’un élément (s’écrit en pourcentages ou pixels)
height : hauteur d’un élément (s’écrit en pourcentages ou pixels)
color : couleur du texte (peut s’écrire en toutes lettres (exemples : red, blue, yellow… ), en hexadécimale (#000000), en RVB)
background : apparence du fond d’un élément (image, couleur, position, répétition)
border : bordure d’un élément (grosseur en pixels, type de bordure (solid, dotted etc), couleur)
font-size : taille de la police d’écriture (en em ou en pixels)
font-family : nom de la police d’écriture
text-align : alignement du texte (center, left (par défaut), justify, right)
line-height : interligne (nombre de pixels)
letter-spacing : espacement entre les lettres d’un mot
Bien sûr, il y en a beaucoup d’autres ! Cependant, celles-ci sont les plus utilisées. Si tu veux en apprendre un peu plus sur les bases des CSS, je t’invite à te rendre sur le lien que je viens de te mettre.
Voilà, c’est tout pour cette fois. J’espère que ce petit article t’aura aidé à comprendre comment fonctionne ces deux langages indispensables sur le Net. N’hésite pas si tu as des questions, j’y répondrais avec plaisir ! Sinon, dis-moi si tu connais et/ou maîtrise un peu le HTML et le CSS, et comment tu les as appris, si tu le souhaites. A très vite !
10 Comments
Je « bidouille » avec mon blog mais je ne suis pas une pro du html…
En tout cas, c’est intéressant comme post. Cela permet de se rafraîchir la mémoire hihi !
Bises, bonne soirée et caresses à « pinpin » de ma part 😉
Hey coucou Gagaie 🙂 Tu sais le plus important c’est justement réussir à bidouiller 🙂 Il y a tellement de possibilités avec ces codes ! J’ai énormément travaillé dessus quand j’ai créé mes forums. Merci à toi, je vais lui faire des papouilles de ta part <3 Bises
Je me suis servie de deux trois choses citées dans ton post pour améliorer le visuel de mon blog.
Encore merci pour le partage.
Bises et bon réveillon de la Saint Sylvestre. ☺
Hey coucou Gagaie 🙂 Oh c’est vrai ? Génial, je suis heureuse que ça t’ai servi ! C’est le but, que tout le monde puisse glaner quelques infos utiles 🙂 Je t’en prie du coup. Bon réveillon à toi aussi 🙂 Bises
moi j ai appris facilement grâce au site openclassrooms des exercices en direct qui permet pas a pas de faire son site comme les grands
Hey coucou Magsi 🙂 J’ai aussi commencé avec eux, mais du temps où c’était encore le Site du Zéro 😀 C’est comme ça que j’ai créé mes premières lignes de codes, puis j’ai décortiqué les codes que je trouvais en libre-service pour comprendre leur fonctionnement, et créer les miens. Bonne soirée et merci pour ton passage ma belle 🙂
Merci pour tes explications très claires, je n’ai jamais voulu me plonger dans ces codes, mais là tu m’en donnerais presque envie !
Hey bonsoir Bernie 🙂 Ah ? C’est pourtant pratique, mais bon après utiliser les codes peut faire peur au début :/ Ça me touche en tout cas ce que tu me dis, c’est très gentil, merci ! Bonne soirée 🙂
Coucou ! 🙂
Merci pour ton article éclairant !
Pour répondre à ta question, je sais me débrouiller avec le HTML et css grâce au blog. Quand j’ai téléchargé un nouveau template j’ai voulu le modifier donc j’ai un peu tâtonné et, à l’aide de tutos (et de logique) j’ai réussi à modifier ce que je voulais. Mais de là à créer une page entière… J’en serais totalement incapable ! Mais je connais les « bases » comme on dit, plus qu’il y a cinq mois 😊
Hey coucou Nymeria 🙂 Merci beaucoup pour ton commentaire 😀 Oui, je trouve ça important de s’y intéresser, car si on veut personnaliser certaines choses, c’est indispensable 🙂 Pour ma part, j’aime bien bidouiller comme on dit ^^ J’essayerai de proposer des petits codes tout faits pour aider ceux qui veulent personnaliser leur blog/site/forum 🙂 Bises