Les balises en HTML
Html ne fonctionne qu’à partir de balise écrite comme suis ; <balise> </balise>,
ainsi toutes les balises de ce langage prennent cette forme, avec le contenu du
code écris entre <balise> et </balise> le premier représentant l’ouverture du
bloc et le suivant la fermeture, des blocs peuvent être contenu dans d’autre.
Cela crée des blocs faciles à structurer et à manipuler par le bien d’intervention
d’autres langages comme CSS.
Dans le cas ou des balises se trouvent à l’intérieur d’une autre balise alors ont
dit que celle-ci est l’enfant de l’autre.
<!DOCTYPE html> : est à indiquer au début d’une page de code html, c’est la
seule qui ne se ferme pas !
<html></html> : est la balise qui englobera l’entièreté du code, elle se situe
directement après DOCTYPE.
<head></head> : premier enfant balise de <html> obligatoire, dedans nous y
écrirons toutes les méta donné (typologie, texte...etc)
<body></body> : deuxième enfant balise de <html> obligatoire, se situe après
la balise <head> mais pas en dessous ! (pas de tab). Ce n’est pas son enfant !
Dans cette balise nous indiquerons le contenu les pages, ce qui remplis
l’espace.
>Favicon : est un Icone qui apparait sur la fenetre du site internet à coté de son
nom (rechercher sur mdm web doc)<
>La page d’acceuil d’un site s’appel toujours index.html , les autres pages du
site pourrons s’appeler autrement<
<header></header> : une des balises systématique , contient l’entête de la
page par exemple le bandeau de navigation du site. S'insère dans <body>
<main></main> : une des balises systématique, contient l’ensemble du code
du site qui n’est pas le header et le footer (le contenu de la page web), s’insère
dans <body>
<footer></footer> : une des balises systématique, contient le bas de la page,
comme par exemple le bandeau de fin avec les remerciements, contact etc.
S'insère dans <body
Ainsi, la base d’une page web html avant même de commencer le code doit
ressembler à ceci :
<title></title> : cette balise sert à afficher le titre/phrase qui apparaitras dans
la fenetre/onglet internet en haut du navigateur à ne pas confondre avec la
balise qui donne un titre DANS la page web. Elle s’insère dans <head>.
<nav></nav>: cette balise s’utilise pour la creation d’un bandeau de navigation
sur un site internet, on y intègre souvent en balise enfant <ul></ul>.
<ul></ul>: ceci est une balise qui permet de créer une liste, en l’occurrence
dans le cadre d’un bandeau de navigation une suite de lien de navigations. Elle
est dite non ordonnée.
<ol></ol>: c’est une balise de liste comme la précédente sauf que cette fois ci
elle est ordonnée, utilisable sous forme de sommaire, un tutoriel ou une
recette. Ce qui necessite une suite précise et numéroté.
<li></li>: cette balise s’utilise pour chaque élément de la liste des balises <ul>
ou <ol>, on doit la réécrire à chaque ligne/élement. Si on n'utilise pas cette
balise, le navigateur ne comprends pas qu’il faut faire un listing et écris
simplement à la suite le contenu des <ul> <ol>.
<div></div>: est une balise contener neutre, c’est à dire qu’on peut y mettre
tout comme contenu/balise, cela créer donc des blocs. Cependant lorsqu’l
existe une balise précise pour le role prévu de la div (comme la navigation par
exemple) et bien elle est absolument à privilégier ! La div doit être évité le plus
possible. En effet , une balise avec un role précis est moins lourd qu’un <div> à
role attribué.
<img > : cette balise s’ecrie différemment des autres, en effet on n’écris pas
</img> pour la fermer. Elle s’utilise en associant avec ; attribut=”ma valeur”.
Attribut prenant la nature de src= par exemple, on écriras donc ;
<img src=”ma valeur”>
<h1></h1> : est la balise qui représente le titre premier de la page , donc le
premier qu’on va voir sur la page. On peux aller jusqu’a <h6> , l’importance
que prendra les différents texte contenu dans ces balises dépendra de la
hiérarchie d’importance respectant l’ordre coissant de 1 à 6. >>UN SEULE h1
est autorisé par page html.<<
<p></p> : cette balise sert simplement à insérer du texte, on la placera
logiquement sous les balises <h1-6>.
Un attribut : s’écrie dans les balises comme <img > sans fermante /> à la fin.
Ces attributs ont un type comme ; href , class , src, alt ... il en existe d’autres.
Ainsi
Src : un attribut qui permet de connaitre le chemin d’accès pour trouver
l’mage, comme dans le cadre d’une image, src=”source ou trouver l’image à
afficher” . Sans ça , le navigateur ne peut afficher d’image puisqu’il ne sait pas
où la trouver sans qu’on lui indique dans cet attribut.
Alt : permet d’afficher un texte lorsqu’une image ne s’affiche pas, s’utilise
après l’attribut src. Ainsi cela doit ressembler à cela en combinant les deux
attributs ;
<img src=”images/logo.png” alt=”logo”>
A savoir que l’on peut écrire également ;
<img src=”../projet stationF/images/logo.png” alt=”logo”>
Si on veut que le navigateur aille chercher dans des documents plus haut dans
l’arborescence ou dans un dossier autre que celui où se trouve le index.html .
Sans préciser le “../” même en écrivant le parcours correctement, il n’y
parviendra pas et alors l’image ne s’affichera pas laissant place à l’alternative
textuel indiqué dans alt=””. On ne peut se passer des “../” que si le fichier se
trouve dans un dossier enfant.
> Ce genre de précisions dans le code, permet un meilleur référencement, en
effet plus un site est bien construit et permet une lecture simple par le
navigateur tout en étant attrayant au visiteur, plus il sera mis en avant lors
d’une recherche utilisateur.
<a></a> : est une balise prévue pour y introduire du texte, on l’utilise à chaque
fois, comme dans les balises <il> des listes. On peut y introduire également des
liens, on s’en sert donc pour la navigation sur le site en lui faisant prendre la
forme suivante, “start up” qui s’affichera en texte deviens alors un lien ;
<a href=”https://www.stationF.co”>Start up</a>
Target : est un attribut qui s’ajoute après un lien pour que celui-ci s’ouvre de la
manière dont on a décidé ;
_blank : ouvre dans un nouvel onglet
_self : ouvre dans l’onglet actuel (ouverture par defaut)
En combinant les différentes balises vu plus tôt nous arrivons au résultat
suivant:
<link /> : c’est une balise importante du html qui permet par exemple
d’associer votre fichier CSS, contrairement aux autres elle ne possède pas de
contenu donc rien entre <link> et </link>, mais des attributs, cela s’écrie donc
de cette façon : <link attribut /> elle ressemble à la balise <a><a/> à la
différence que celle-ci contient du contenu et pas uniquement des attributs, on
l’utilise donc plutot pour les images / liens visibles etc. Contrairement au
<link /> qui va plutot apporter des éléments qui ne peuvent pas interagir avec
l’utilisateur comme le fichier CSS.
Rel= : est un attribut qui s’utilise dans la balise <link /> pour associer le CSS. Il
permet d’expliquer à la lecture du code du navigateur quel relation ce lien à
avec notre code html.
Href= : L'URL vers laquelle pointe l'hyperlien. Les liens ne sont pas limités aux
URL basées sur HTTP - ils peuvent utiliser n'importe quel schéma d'URL pris en
charge par les navigateurs : comme par exemple un numéro de téléphone, un
mail etc, on peux donc écrire de ces façons suivantes :
Comme on le constate, cela permet de donner un lien directe fonctionelle à
différents types d’informations à l’utilisateur. S'il utilise email, le lien l’enverras
sur sa boite mail, s’il utilise le lien télépone, celui ci l’enverra directement sur
son appel. Il faut seulement bien préciser “mailto:” ou “tel:” avant écriture des
liens/numéros.
LE CSS :
Le CSS à pour but de styliser les éléments du code , il s’associe au html. Il
s’écrie donc différemment et sur une autre page que nous introduirons dans le
code html. Voici le shéma d’ecriture du CSS :
Qui (balise) {
Quoi (propriété CSS) : valeur;
}
Cela donne donc par exemple si on veut un fond rouge sur une balise :
Balise {
Background-color : red ;
}
Pour les couleurs d’ailleurs on utilise régulièrement les codes hexadécimaux,
comme : #000000. Cela peut être composé de chiffre ou de caractère lettres.
Cela permet d’avoir accès à l’entièreté de la palette de couleur. Voici quelle
forme cela prend, taper seulement sélecteur couleur sur le moteur de
recherche pour obtenir tous les codes :
On utilise jamais les noms de couleur comme “red” tout simplement car les
designer qui partage leur maquette utilise uniquement des couleurs bien
spécifique identifiable par les codes HEX ou rgb.
Dans la syntaxe CSS il faut toujours terminer par un “;” sinon l’ordinateur ne
parviendra pas à lire la commande. On mettras un espace après les “:” de la
propriété. Par exemple la propriété ici est background-color :
De manière conventionnel le fichier CSS s’appellera toujours style.css.
Pour lier le fichier CSS avec mon fichier html, il faut écrire la ligne suivante en
utilisant le nom de fichier CSS:
Souvent on va écrire les lignes de liens vers les CSS en bas de la balise <head>
car on en accumule la plupart du temps un certain nombre. Cela facilite la
lecture.
Dans la syntaxe on peut appliquer une même propriété CSS à plusieurs
éléments différents en séparant simplement chaque balise concernée par une
“,” afin de réduire les lignes, comme on peut le voir ici :
Background-color : permet d’établir un fond qui prendra l’ensemble de la
balise, si c’est un bloc, tout le bloc prendra le fond , s'il s’agit d’une balise
texte, uniquement le texte prendra le fond.
Color : permet de choisir une couleur pour les caractères.
Opacity : propriété qui permet de changer l’instensité de la couleur du texte.
Font-weight :
Font-style :
Text-align :
Class=”” : est un attribut qui s’écrie dans la balise directement, elle permet de
catégoriser les balises en leur donnant un nom. Ainsi on peut choisir que la
couleur blanche du CSS ne s’appliquera qu’à la balise ayant l’attribut
class=”blanc”. On attribuer plusieurs class à une même balise en ajoutant
simplement après un espace un deuxieme nom dans la classe, comme par
exemple class=”blanc italic”, cela fonctionnera meme si une autre balise n’a
que la class=”italic”.
Pour l’ordinateur chaque mot dans class=”” corresponds à une class à part
entière, sinon il faut ajouter un “-”. Ici class=”blanc-italic” ne correpondras qu’a
une seule class tandis que class=”blanc italic” correspondra à deux class
distinctes.
> Pour associer une class à une propriété CSS il faut ajouter un “.” devant !
< --HTML
<-- CSS
On peux insérer plusieurs propriétés au sein d’une même modification de
class/balise, par exemple la couleur mais aussi la taille.
ID : est une identification personnalisée d’une balise, c’est à dire qu’on peux
attribuer à une balise un nom/identité propre qui permet de modifier dans le
CSS uniquement cette balise, en effet elle ne peux etre attribuer qu’a un seul
élément, on peux utiliser plusieurs ID mais chacun doit être différent pour
chaque balise concerné, sinon le navigateur ne parviens pas à l’afficher.
Pour que CSS l’identifie dans l’application de sa propriété il faut écrire “#”
devant le nom de l’ID
A savoir que les ID sont de moins en moins utilisé ! Favorisez les class=
LE SASS est bien plus utilisé que le CSS !
FLEXBOX :
C'est une propriété très importante à utiliser pour positionner les blocs de
textes / images sur la page web. Il s’attribue à une class englobant la <section>
que l’on souhaite manipuler :
Une fois appliqué à la <section> on peut attribuer différentes propriétés
influent les emplacements qui se montrerons bien plus efficace grâce au flex.
Dans cet exemple, la propriété display flex s’applique à la class “cover” ,
permettant ainsi de diviser les blocs <div> de manière intelligente en
complément des propriétés donné à la class bloc.
Les blocs ci dessus sont disposé ainsi grace à la propriété flex et au autres
propriété qu’on peux appliquer par dessus :
Le display Flex se mettras toujours sur la section parent, ainsi toutes les balises
enfants appliquerons les instructions de positionnement donné par le display
flex positionné dans la balise parent.
Les propriétés display : Flex :
Flex-direction : propriété qui gère la direction de l’alignement
Flex-wrap : propriété qui gère la compression des blocs ou à la ligne
Align-items :
Justify-content:
Justify-items:
Justify-self :
Gap : propriété qui gère les espacements entre les blocs, si une seule valeur px
est indiqué, celle-ci s’applique tout autour, sinon il faut en écrire deux à la
suite avec un espace entre les deux valeurs.
