Leçon 3 : Les éléments et les balises

Vous êtes maintenant prêt à apprendre l'essence de HTML : les éléments.

Les éléments donnent la structure d'un document HTML et indiquent comment vous voulez que le navigateur présente votre site Web. En général, les éléments se composent d'une balise ouvrante, d'un contenu et d'une balise fermante.

Les balises ?

Les balises sont les étiquettes que vous utilisez pour marquer le début et la fin d'un élément.

Toutes les balises ont le même format : elles commencent par un signe inférieur à « < » et finissent par un signe supérieur à « > ».

Généralement parlant, il y a deux types de balises : les balises ouvrantes (<html>) et les balises fermantes (</html>). La seule différence entre les deux est la barre oblique « / ». Vous étiquetez le contenu en le plaçant entre une balise ouvrante et une balise fermante.

HTML n'est qu'une question d'éléments. Apprendre HTML c'est connaître et utiliser des balises différentes.

Montrez-moi des exemples ?

D'accord, l'élément b sert pour marquer des lettres en caractères gras. Tout le texte entre la balise ouvrante <b> et la balise fermante </b>s'inscrit en caractères gras dans le navigateur. La lettre « b » est l'abréviation de « bold » (N.d.T. gras).

Exemple 1 :

	
	<b>Ce texte doit être en caractères gras.</b>
	
	

Voici ce que ça donne dans le navigateur :

Ce texte doit être en caractères gras.

Les éléments h1h2h3h4h5 et h6 servent à marquer des titres, « h » tient pour « heading » (N.d.T. titre), où h1 est le premier niveau et avec normalement le corps le plus grand, h2 est le deuxième niveau et normalement un texte légèrement plus petit, et h6 est le sixième et dernier niveau dans la hiérarchie des titres et normalement le plus petit texte.

Exemple 2 :

	
	<h1>Voici un titre</h1>
	<h2>Voici un sous-titre</h2>
	
	

Dans le navigateur, cela donnera :

Voici un titre

Voici un sous-titre

Donc, j'ai toujours besoin d'une balise ouvrante et d'une balise fermante ?

À ce qu'on dit, il y a une exception à chaque règle, et en HTML, quelques éléments font exception, avec une ouverture et une fermeture concentrée dans une seule balise. Ces éléments appelés éléments vides ne sont pas associés à un passage particulier dans le texte mais sont plutôt des étiquettes isolées, par exemple, un saut de ligne qui se présente comme ceci : <br />.

Les balises s'écrivent-elles en majuscules ou en minuscules ?

La plupart des navigateurs ne se soucient guère que vous tapiez vos balises en majuscules, en minuscules, ou dans un mélange des deux. <HTML>, <html> ou <HtMl> donneront normalement le même résultat. Quoi qu'il en soit, la méthode correcte est de taper les balises en minuscules. Donc, prenez l'habitude d'écrire vos balises en minuscules.

Où dois-je placer toutes ces balises ?

Vous tapez les balises dans un document HTML. Un site Web contient un ou plusieurs documents HTML. Lorsque vous surfez sur le Web, vous ouvrez simplement des documents HTML différents.

Si vous poursuivez jusqu'à la prochaine leçon, vous aurez fait votre premier site Web dans 10 minutes.

Leçon 2 : Qu'est-ce que HTML?

Cette leçon vous présente brièvement votre nouvel ami : HTML.

Qu'est-ce que HTML?

HTML est la « langue maternelle » de votre navigateur.

Pour faire court, HTML a été inventé en 1990 par un scientifique nommé Tim Berners-Lee. L'objectif était de faciliter l'accès par des scientifiques d'universités différentes aux documents de recherche de chacun. Le projet eut un succès inespéré, plus grand que tout ce que Tim Berners-Lee avait pu imaginer. En inventant HTML, il posa les fondations du Web tel que nous le connaissons aujourd'hui.

HTML est un langage qui permet de présenter des informations (par exemple, des recherches scientifiques) sur Internet. Ce que vous voyez quand vous regardez une page sur Internet est l'interprétation par votre navigateur du code HTML. Pour voir le code HTML d'une page sur Internet, cliquez simplement sur la rubrique « Vue » dans le menu supérieur de votre navigateur et sélectionnez « Source ».

Voir la source

Pour un œil non entraîné, le code HTML semble compliqué mais ce tutoriel vous aidera à en déterminer tout le sens.

À quoi puis-je utiliser HTML ?

Si vous voulez faire des sites Web, il n'y a pas d'autre voie que HTML. Même si vous vous servez d'un programme pour créer des sites Web, tel que Dreamweaver, une connaissance élémentaire de HTML peut vous rendre les choses plus faciles et beaucoup améliorer votre site Web. La bonne nouvelle c'est que HTML est facile à apprendre et à utiliser. D'ici deux leçons tout juste, vous aurez appris comment faire votre premier site Web.

HTML sert à faire des sites Web. C'est aussi simple que ça !

Bon, mais à quoi correspondent les lettres « H T M L » ?

HTML est l'abréviation de « HyperText Mark-up Language », et c'est tout ce qu'il faut savoir pour le moment. Toutefois, pour bien situer les choses, voici une explication plus précise.

  • « Hyper » s'oppose à linéaire. Au bon vieux temps, quand les souris n'étaient encore que ce que les chats attrapaient, les programmes informatiques s'exécutaient de façon linéaire : lorsque le programme avait terminé une action, il allait à la ligne suivante, puis encore à la suivante, et ainsi de suite. Mais HTML est différent : vous pouvez aller n'importe où et quand vous le voulez. Par exemple, il n'est pas nécessare de visiter MSN.com avant de visiter HTML.net.
  • « Text » s'explique tout seul.
  • « Mark-up » (N.d.T. balisage) est ce que vous faites avec le texte. Vous marquez le texte de la même façon que vous le feriez dans un logiciel de traitement de texte avec des titres, des puces et des caractères gras, etc.
  • « Language » (N.d.T. langage) est ce qu'est HTML. Il utilise plusieurs mots anglais.

Dans ce tutoriel, vous apprendrez le dénommé XHTML (Extensible HyperText Mark-up Language), qui est en bref une nouvelle façon mieux structurée d'écrire du HTML.

Maintenant que vous savez à quoi correspond HTML (et XHTML), allons-y pour ce qui nous concerne : fabriquer des sites Web.

http://www.phpascal.com/programmation-web/javascript/cree-element-avec-js.html

Créer une balise lien (<a>) en javascript :

var maClass = document.getElementsByClassName("dropdown-menu");

for (i=0;i< maClass.length ;i++){

var monObjet = document.createElement("a");
monObjet.onclick = lienExterne;
monObjet.style.background = 'url(images/googleplus.png) no-repeat';
monObjet.href = '#';
monObjet.style.height = '30px';
monObjet.style.width = '30px';
monObjet.style.overflow = 'hidden';
monObjet.style.display = 'inline-block';
monObjet.title = 'Google +';
//var leTexte = document.createTextNode("Afficher texte");
//monObjet.appendChild(leTexte);
maClass[i].appendChild(monObjet);


Logo Lycée Paul Sérusier

J'enseigne au
Lycée Paul SERUSIER
Avenue de Waldkappel
29270 CARHAIX PLOUGUER
Tél : 02 98 99 29 29
Site : www.lycee-serusier.fr

footer2

Richard GAUTHIER
Professeur de Physique Appliquée
Certification ISN
Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.

 

 


Mentions légales


Plan du site

  Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.