HTML et CSS
HTML:
Définition: Langage descriptif du contenu de page, tout simplement le langage de
balisage.
Éléments et propriétés du HTML:
Un élément: permet de différencier le contenu, ex: l’élément <p>, l’élément <a>,...
Une balise: unité syntaxique délimitant une séquence de caractères. On distingue trois
(03) types de balises :
Balise ouverte(ouvrante, d’ouverture,…):<h1>,<p>,…
Balise fermée(fermante, de fermeture,…):</h1>,</p>,…
Balise vide(orpheline):<br> ou possible <br/> en XHTML.
Attribut: compléte les éléments en les définissant plus précisément. Ex: href, style,
charset,…
Structure de base minimale :
<!DOCTYPE html>
<html>
<head>
<title>bases</title>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
Doctype: sert à préciser le type de document, commence toujours par un point
d’exclamation(!) et précise le langage utilisé, ex:<!DOCTYPE html>
<html>: représente toute la page Web, la partie où réside tout le code HTML de notre
page. Cet élément imbrique deux (02) autres éléments à savoir : <head> et <body>
<head>: contient les meta informations relatives à la page, titre, type et même les liens.
Ex: <head>
<title>bases</title> Titre de page, affiché comme onglet.
<meta charset="utf-8"> l’encodage de la page, permet de mieux afficher
les caractères d’une langue. Ex: “UTF8”,UTF16, ASCII,…
<title> et <meta> sont imbriqués dans <head>, tout comme head et body dans l’élément
<html>.
NB: penser toujours à bien fermer les balises dans le bon ordre.
</head>
<body>: contient des contenus visibles de la page, ex: images , textes ,liens, vidéos,…
L’élément <body> peut contenir d’autres éléments, parmi les plus indispensables sont:
<h>: heading utiliser pour définir les titres, une page peut contenir jusqu’à six(06) h6
dans l’orde d’importance;ex: h1,h2,h3 à h6
<p>:paragraph, pour définir les paragraphes.
Conseil: CRÉATION D’UNE PAGE HTML
-Ouvrir son éditeur de texte
-créer un nouveau fichier
-enregistrer l’extension du fichier(.html)
-definir ou gérer l’encodage
-ouvrir la page dans un navigateur
-remplir toute la structure et ajouter selon la complexité.
Indentation et Commentaire en HTML:
Indentation:
Indenter: créer des retraits en début de ligne de façon cohérente et logique selon l’orde
parent.
Le but de l’indentation nous permet d’identifier les éléments ou parties du code.
NB: à chaque fois que vous ouvrez un nouveau élément, il faut indenter sauf s’ils sont de
même élément; ex: <head>et<body>
Commentaires :<!………>
Les lignes de commentaires sont des lignes écrites au milieu de notre code afin de
donner les indications de ce que fait le code, les commentaires sont invisibles pour les
lecteurs et permettent aux codeurs de mieux comprendre le code. Ils sont placés
n’importe où selon l’indication.
Ex:
<body>
<! Ci-dessous, notre titre>
<h1>Grand titre</h1>
<! Ci-dessous,
Un paragraphe>
<p>Je suis un paragraphe</p>