Pourquoi "vagues" balises ? Simplement parce que ce cours a pour but de vous familiariser avec quelques balises courantes afin de ne pas vous plonger dans un code html sans aucunes connaissances. Après, vous assimilerez les autres en pratique dans vos cours =).
Balises minimales
C'est-à-dire les balises qu'il faut absolument avoir dans votre page. - Code:
-
<html> </html>
<head> </head>
<title> </title>
<body> </body>
Par ailleurs, voici ce qui est généralement considéré comme une page basique et correcte html (+ ajout d'une ligne pour lier le css). Vous pouvez vous en servir comme base à chaque fois que vous créerez une page :
- Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
<head>
<title>Titre du site</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
</body>
</html>
Balises génériques Afin de créer un "bloc", on utilisera la balise div, toujours accompagnée d'un attribut class ou id. Cet attribut permet de donner un nom au bloc afin d'y ajouter des caractéristiques dans le css. La différence entre class et id ? On peut attribuer le même nom à plusieurs blocs avec class, mais à un seul avec id. De plus, dans le css, on notifiera .nom (class) et #nom (id).
- Code:
-
<div class="nom"> </div>
(à noter que chaque attribut s'écrit de la même manière nomdel'attribut="blabla", c'est-à-dire le nom de l'attribut suivi de = avec la valeur de 'lattribut entre guillemets, le tout sans espace.)
Balises de structuration de texte - Code:
-
<b> texte mis en gras </b>
<u> texte souligné </u>
<i> texte en italique </i>
<s> texte barré </s>
<h1> titre d'importance 1 </h1>
<h2> titre d'importance 2 </h2>
<a href="adresse.com> lien </a>
<img src="adressedel'image.com" alt="texte_alternatif" />
<a href="adresse.com> <img src="adressedel'image.com" alt="texte_alternatif" /> </a>
On remarquera que les balises img et br sont des balises uniques. La balise br permet d'aller à la ligne, car cela ne se fait pas automatiquement si on appuie sur enter. la dernière ligne de code est celle qu'il vous faudra utiliser si vous voulez faire un lien sur une image =).
Avec tout ça, je crois que vous ne serez pas trop perdus... Il ne nous reste plus qu'à voir les balises css =).