Durant l’année de seconde, nous avons étudié le HTML et le CSS mais comment ça fonctionne ?
Durant l’année de 2nde SN, nous avons eu en projet qui était de créer un site pour présenter un sujet au choix. Par exemple, un de nous deux a décidé de créer un petit site parlant de moto ! Pour ce sujet, nous allons prendre comme exemple un petit site créé pour un projet de cours d’années précédentes, n’ayant plus celui de la seconde SN.
Le HTML permettra plutôt de montrer le contenu d’une page, le CSS le mettra en forme et fera tout le design. Par exemple voici de menu de notre site avec HTML et CSS :
Et ce même menu, sans CSS avec uniquement du HTML :
Effectivement, le site est beaucoup plus joli avec le CSS. Cependant, dans les deux cas, si je clique sur une catégorie, cela me redirigera bien sur la page indiquée dans le HTML !
Comment est-ce que cliquer sur un mot peut engendrer un changement de page interne au site ? C’est ce que nous allons voir maintenant.
<ul>
<li> </li>
</ul>Ces morceaux de code délimitent une liste à puces. Ce n’est donc pas ce qui va nous intéresser pour changer de page. Pour cela, il faut utiliser le href.
<a href="nomdepage.html">Dans notre exemple, il était mis par exemple “page4.html” car le fichier de la page sur laquelle on voulait amener était nommé “page4”. Le “.html” indique le format du fichier. Pour une vidéo, on aurait par exemple pu avoir un .mp4 ou .mov.
Nous pouvons également voir cette balise, qui est seule, contrairement à la plupart des balises en html qu’on ouvre et qu’on ferme. Le HTML est effectivement un langage de balisage.
<br/>Elle sert tout simplement à sauter une ligne.
Pour diriger vers un site externe, comme ici, nous allons utiliser une méthode similaire à celle pour amener sur un fichier du même dossier. Cette ligne de HTML est exactement celle qui sert pour vous rediriger sur la page YouTube en cliquant sur le “ici” si dessus
<a href="https://youtu.be/dQw4w9WgXcQ" target="_blank">ici</a>Il est également possible de mettre un texte en gras grâce à ces balises :
<b>texte</b>Comment fonctionne le CSS ? Le CSS fonctionne grâce à un système d’id et de class. Par exemple, voyons sur notre site la couleur des citations et la manière dont elle sont disposées.
On ajoute une deux class à notre phrase : La class “lines1” et la class “rouge”. Voyons à quoi elles correspondent. Les class sont plus utilisées pour un élément spécifique. Les id que nous verrons après servent pour plusieurs éléments.
On remarque que la class rouge, qu’on appellera en utilisant “.rouge”, correspond à utiliser une couleur qui est la couleur #B32837 en hexadécimal. Tous les endroits où on inclura la class rouge mettra le texte de la couleur indiquée par le code hexa.
Notre phrase utilise également la class lines1, regardons ce qu’elle signifie dans le CSS :
“lines1” nous donne la taille de la marge du bas, qui a été fixée à 0.
Comme ici pour le menu, on va favoriser l’utilisation des “id” quand il s’agit de plusieurs éléments dans une page qui sont concernés.
Comme ici ou nous utiliserons l’id “Menu” pour le menu. Pour un id, on utilise un “#” pour créer le CSS associé. Ici on voit de nombreuses information servant à structurer le menu.
Comment créer mon premier site ?
Pour créer votre premier site, vous pouvez suivre le cours de OpenClassrooms sur le HTML et le CSS. Vous serez guidés de A à Z dans votre apprentissage. Il existe évidemment de nombreuses autres ressources disponibles sur internet pour apprendre et progresser !
Vous avez des questions ? Vous voulez nous rencontrer ? Rejoignez nous sur Discord !
https://discord.gg/wMPMP8HJPr
