Dans le précédent article, nous avons pu observer qu’une page web etait constituée de 2 grandes parties : le head et le body.
Nous allons a présent (continuer notre descente aux enfers) découvrir le concept de balises html
La notion de balise
Observant le corps de la page (ce qui ce situe en
et ) on s’aperçoit que le texte qu’on affiche est positionné entre les deux.- Ceci est une page web !
est ce qu’on appelle la balise « ouvrante » du corps de la page
est la balise « fermante ».
les balises vont généralement par deux (qui a dit au fond de la salle comme les témoins de Jéhovah et les paires de c….? dehors !)
elles sont de la forme
- le texte auquel la balise se rapporte!
bon vous êtes ravi de le savoir mais ça sert à quoi ?
Les balise peuvent agir :
- Sur la l’aspect du texte (mise en gras, en italique, en couleurs, etc.)
- Sur l’organisation du texte (titres sous-titre, paragraphe, listes, tableaux, etc)
- Soit apporter des enrichissement au texte (liens, images, etc.)
Des balises pour modifier l’aspect du texte
Revenons à notre page et modifions la ainsi
- Ceci est une page web !
- Elle présente des balises qui modifient l’aspect du texte :
- avec du texte en gras,
- du texte en italique,
- du texte souligné,
et même un texte barré !
affichons la page dans le navigateur, vous devriez obtenir quelque chose ressemblant à çà, si c’est le cas : bravo !
Vous connaissez maintenant vos 4 premières balises :
- pour mettre un texte en gras (bold)
- pour mettre un texte en italique (italic)
- pour souligner un texte (underline)
pour barrer un texte (strike)
Cependant, votre extrême perspicacité vous aura fait remarquer que les textes s’affichent à la suite, alors que nous aurions sans doute préféré les voir s’afficher sur des lignes différente. Vous allez être exaucés dans la suite de cet article …
Des balises pour organiser les textes
Regardons un peu le contenu (hautement informatif) de notre page
« Ceci est une page web ! » est le titre
Elle présente des balises qui modifient l’aspect du texte : est un paragraphe qui précise ce titre
avec du texte en gras,
du texte en italique,
du texte souligné,
et même un texte barré ! Est une liste de ce qu’on peut trouver dans la page
Nous allons donc modifier notre page. De la manière suivante
Ceci est une page web !
-
Elle présente des balises qui modifient l’aspect du texte :
-
- avec du texte en gras,
- du texte en italique,
- du texte souligné,
et même un texte barré !- </ul>
et à l’affichage nous devrions obtenir ceci :
La balise
est une balise de titre (header) de niveau 1, les balises header servent à hiérarchiser le contenu de votre document le nombre qui suit le H peur prendre une valeur de 1 à 6, (1 étant la plus grande taille)
Balise H1
Balise H2
Balise H1
Balise H1
Balise H1
Balise H1
La balise
défini un paragraphe
Ensuite nous avons affiché no
tre liste sous forme d’une liste à puce (unsorted list)
une liste a puce est définie entre les balises
et a l’intérieur de ces balises, chaque élément de la liste est entouré par des ballise
supposons un instant que vous souhaitiez que votre liste soit numérotée, il vous suffit de remplacer la balise
par une balise
(ordoned list), et vous obtenez ceci :
Ajouter un lien
Il est quand même très sympa de faire des liens sur internet (j’aurais même tendance à dire que c’est le seul intérêt…)
il existe une balise faite (surtout) pour ça : la balise
et nous allons tout de suite ajouter un lien sur notre page, ce qui va nous permettre de parler des attributs , en effet la balise possède un attributs « href »qui permet d’indiquer ce sur quoi on fait un lien.
Par exemple pour faire un lien sur ce blog on insérera la balise suivante
Pour envoyer un mail on fera :
Ajouter une image
Il y a quelques paragraphes, je t’ai dit que les balises allaient généralement par deux…
Sauf…
(ben oui il y a un sauf, sinon se serait trop simple)
Sauf quand elle se suffisent à elle même, par exemple la balise , qui sert a insérer une image, n’a pas de balise fermante.
Par contre elle a (au minimum) deux attributs :
l’attribut « src » : qui prend comme valeur le nom de l’image à afficher.
Et l’attribut « Alt » qui a pour valeur une description de l’image
Ainsi si on veut ajouter une (magnifique) photo d’abeille a notre page on ajoutera le code suivant
-
Et pour finir une image :
abeille.jpg » alt= »Une abeille au jardin« />
Ainsi notre page ressemble présent à ceci :
Comme tu peux le voir la balise image n’a pas de balise « fermante », par contre elle se fini par />
Je pense que ton œil de lynx aura aussi remarqué une nouvelle balise : la balise
> il s’agit d’un saut de ligne elle se différencie d’un paragraphe par le fait qu’elle ne laisse pas d’espace entre les deux ligne qu’elle sépare.
Bon, j’ai une super nouvelle pour toi : C’est bientôt la récré
mais on va d’abord faire un récapitulatif de ce qu’on a dit, et discuter de ce qu’on fera demain…
Récapitulatif :
- Les pages internet sont ecrite en HTML, c’est un langage de définition de page qui s’articule autour de balises.
- Une pages HTML est constitué de deux parties : le Head et le body
- La plus part des balises vont par paire : une ouvrante et une fermante
- Les balises qui n’ont pas de balise fermantes se finissent par />
- je ne l’ai pas dit avant mais les textes des balises s’écrivent en minuscules (du moins en XHTML qui est la norme qu’on a utilisé dans cet article.
Et après ?
Ben oui et après ?
- Après, il faut quand même que je vous avoue qu’on a pas traité toutes les balises xhtml (loin s’en faut)
- tu trouvera la liste des balise sur le site de la w3scool
- tu ira aussi jeter un coup d’oeuil sur ce chouette article du site du zero ) qui regroupe les balises xhtml les plus couramment utilisées
Enfin comme vous avez pu le remarquer, tout cela n’est pas super trancendant au niveau de la mise en forme, alors dans le prochain article on parlera (un peu) de style histoire de voir comment améliorer (un peu) le rendu.
