HTML & CSS font partie des langages du web, c'est à dire qu'ils peuvent être lu et compris par un navigateur web. En terme technique, un navigateur web est un logiciel qui est capable de parser et d'interpréter de l'HTML, du CSS, et d'exécuter du JavaScript (on verra ca plus tard).
Donc, quand on envoie un fichier HTML à a un navigateur (ou quand on ouvre un fichier HTML présent sur son ordi dans un navigateur), si le fichier est bien écrit, qu'il respecte la spécification du W3C (World Wide Web Consortium), alors il va construire une interface graphique a partir du code HTML & CSS.
Du coup, HTML c'est vraiment le contenu, que l'on structure dans des tags (le plus courant est la div, pour "division"). Depuis HTML5, on a a disposition plein de nouveau tags, qui se comportent exactement comme des divs (ils sont par defaut des blocks), mais ils ont une valeur "sémantique", qui va permettre aux moteurs de recherche de mieux comprendre notre page web quand on se fera indexer. Donc c'est mieux d'utiliser les nouveau tags HTML5 pour mieux caractériser le contenu de notre page, si possible :) Dans ces nouveaus tags, on a :
<nav></nav>(pour la navigation)<section></section>(pour une section de la page)<article></article>(un article..)<aside></aside>(pour une "div" latéral)<header></header><footer></footer>
Et encore d'autres que je connais pas forcement..
Du coup, 95% des éléments sont par defaut des blocks, ce qui veut dire qu'il vont prendre 100% de la largeur du parent, et se mettre les uns en dessous des autres dans l'ordre dans lequels on les a écrit dans le fichier HTML.
Même si c'est le comportement par defaut, on peut changer ca via du CSS, en utilisant la propriété display (par default, une div est display: block)
On verra dans le prochain cours les "flexbox", un truc super pratique pour mettre des éléments sur une même ligne (on fera alors display: flex)
Pour le moment, focusez vous sur le contenu, et prenez vos aises avec CSS en pratiquant :)
On peut écrire directement du CSS dans le fichier HTML, par exemple en faisant dans un tag style dans le head :
<html>
<head>
<style>
/* On peut mettre toutes nos règles CSS ici */
body {
background: #fafafa;
}
</style>
</head>
<body>
</body>
</html>
ou encore directement en utilisant l'attribut HTML style sur n'importe quel élément (a ce moment là les règles écrite ne s'appliqueront qu'à cet élément)
<div style="display: flex;">Bonjour</div>
Mais globalement, dans un soucis d'organisation, on préfère les écrire dans un fichier à part, par exemple styles.css qu'on lie à notre fichier HTML en utilisant link
Donc, si on a un repertoire une structure comme celle la
/profile
/stylesheets
- styles.css
- index.html
Alors on va "lier" notre fichier CSS à l'HTML en ajoutant dans <head>
<link rel="stylesheet" href="stylesheets/styles.css">Balises HTML :
-
Les liens :
<a href="http://www.google.com">Ceci est un lien</a>. Le navigateur affichera un lien qui nous emenera vers google.com quand on cliquera dessus. Pourquoi un lien nous emene quelque part quand on clique dessus ? Car c'est la facon dont le W3C a définit le comportement que doivent avoir les navigateur dans la spécification. -
Les blocks (
<div></div>,<p></p>,<h1></h1>, ...<h6></h6>, etc.) -
Les listes :
<ul> <- Liste
<li>Bonjour</li> <- élement de liste
<li>Hello</li> <- élement de liste
</ul>
- Les formulaires (que vous n'avez pas trop vu dans le cours je crois) : Les formulaires servent à laisser la possibilité a l'utilisateur de saisir des données. On a pour cela plusieurs élément de formulaire que l'on peut utiliser, qui vont faciliter la facon dont l'utilisateur va intéragir avec notre formulaire.
Un formulaire se définit tout le temps par un tag ouvrant <form> et un tag fermant </form>. Entre ces 2 tags on va mettre autant d'éléments de fomulaires que l'on veut parmis (pour les principaux) :
-
<input type="text">: un champ texte libre -
<input type="password">: un champ texte mais qui n'affichera pas ce que l'utilisateur a tapé -
<input type="checkbox">: une case a cocher -
<input type="radio">: une case a cocher, mais qui va décocher la précédente cochée (un seul choix possible). Ex: Sexe : Homme | Femme (c'est soit l'un soit l'autre, le click sur l'un decochera l'autre s'il avait été coché) -
select :
<select>
<option>Choix 1</option>
<option>Choix 2</option>
<option>Choix 3</option>
</select>
Le select correspond à un "menu deroulant" ou l'on selectionne une valeur parmis celles proposées
<input type="range">pour un slider
Et encore d'autres mais moins utilisés
Du coup, le navigateur construit une interface a partir de tous ces tags HTML, et il applique des styles par defaut pour chacun de ces éléments. Par exemple un <input type="text"> va avoir une bordure d'1px, un fond blanc, etc.
Ces styles par defaut peuvent varier d'un navigateur à l'autre !
Et ensuite en CSS on va pouvoir surcharger ces styles appliqués par defaut pour amener notre propre identité !