• Les paragraphes

Lorsqu’on écrit du texte, il est bien plus pratique de le scindé en paragraphe. Le langage HTML met à votre disposition une balise pour ça : la balise <p> pour déliter un paragraphe.
 
 

• Le saut à la ligne.

En HTML, si vous appuyez sur la touche Entrée, cela ne crée pas une nouvelle ligne comme vous en avez l'habitude. Ainsi taper entrer à chaque fois depuis l’éditeur de texte ne sert à rien. Pour aller à la ligne, la balise <br/> est mise à votre disposition.

Code html :

• Les titres

HTML propose six niveaux de titres différents :

• <h1> </h1> : signifie « titre très important ». En général, on s'en sert pour afficher le titre de la page au début de celle-ci.
• <h2> </h2> : signifie « titre important ».
• <h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un « sous-titre » si vous voulez).
• <h4> </h4> : titre encore moins important.
• <h5> </h5> : titre pas important.
• <h6> </h6> : titre vraiment, mais alors là vraiment pas important du tout.

•  
•  
•  
• La mise en valeur du texte

Au sein de vos paragraphes, certains mots sont parfois plus importants que d'autres et vous aimeriez les faire ressortir. HTML vous propose différents moyens de mettre en valeur le texte de votre page.

• La balise <em><em/> elle permet de mettre un peu en valeur. Elle à pour conséquence de mettre le texte en italique.
• La balise <strong><strong/> elle de mettre bien en valeur. Elle a pour conséquence de mettre le texte en gras
• La balise <mark><mark/> permet de faire ressortir visuellement une portion de texte. L'extrait n'est pas forcément considéré comme important mais on veut qu'il se distingue bien du reste du texte. Cela peut être utile pour faire ressortir un texte pertinent après une recherche sur votre site par exemple. Il a pour effet de surligner le texte mais il est possible de changer ce mode d’affichage grâce au CSS.

N.B : Ces balises ne sont pas utilisées pour la mise en forme car rappelez-la-vous misse en forme est réservée au CSS (que nous verrons plus tard) le HTML ne permet que la présentation du texte et non la mise en forme.
Ces balises sont utiles dans le référencement (ceci fera l’objet d’un autre chapitre).

• Les listes.

Les listes nous permettent souvent de mieux structurer notre texte et d'ordonner nos informations. Nous allons découvrir ici deux types de listes :

• Les listes non ordonnées ou listes à puces ;
• Les listes ordonnées ou listes numérotées ou encore énumérations.
  • Liste non ordonnée

C’est un système qui nous permet de créer une liste d’éléments sans notion d’ordre (il n’y a pas de premier élément ni de dernier)
Une liste non ordonnée ressemble à ceci :

• Tata
• Toto
• Titi

Pour créer une liste non ordonnée, il suffit d’encadrer la balise <ul> avec la balise <li>. <li> indique un élément de la liste.
Code : html
 

Ainsi on a le résultat suivant :

En résumé :

• <ul></ul> : délimite toute la liste
• <li></li> : délimite un élément de la liste.

5.2. la liste ordonnée
Une liste ordonnée fonctionne de la même façon, seule une balise change : il faut remplacer <ul></ul> par <ol></ol>. À l'intérieur de la liste, on ne change rien : on utilise toujours des balises <li></li> pour délimiter les éléments.
L’ordre dans lequel vous placez les éléments est important. Me premier <li></li> correspond au premier élément, le second au deuxième et ainsi de suite.

On a le résultat suivant :

• Les liens

Un lien est un mot ou un texte qui fait référence à :

• Un autre mot ou texte situé sur la même page on parle d’ancre
• Une page web du même site
• Une page web d’un site différent

C’est grâce à ces liens que la navigation entre les sites est possible.
Pour créer un lien on utilise la balise <a></a>. Syntaxe :
 

Exemple de lien entre deux pages d’un même site
            1. créer vos deux page web

Code html : test.html

Code html : page2

2. testez les codes
Ouvrer le fichier ‘test’ puis cliquer sur « je mange et je bois ».
Ehhhhhhhhh !!!!!!!! oui vous venez de naviguer entre deux pages web.
N.B : l’attribut href prend comme valeur le chemin vers la page web. Donc si vous mettez votre fichier dans un répertoire, vous devriez entre le nom du répertoire avant d’entrer le nom du fichier. On met un slash ‘‘ / ’’ entre les deux pour les séparer. Si le nom du fichier ou du répertoire est composé, il faudra le mettre dans les accolades.
Exemple 1 : page2 est contenu dans le répertoire
Supposons que le fichier page2.html soit contenu dans le répertoire maPage. Pour faire le lien on utilisera le code ci-dessus.
 

Exemple 2 : page2 est contenu dans un dossier parent
Si vous voulez accédez à une page située dans un répertoire parent il suffit de de mettre ‘‘..’’ suivi du nom du fichier comme le montre le code suivant :

Lien entre les ancres :
Une ancre est une sorte de point de repère que vous pouvez mettre dans vos pages HTML lorsqu'elles sont très longues. En effet, il peut alors être utile de faire un lien amenant plus bas dans la même page pour que le visiteur puisse sauter directement à la partie qui l'intéresse.
Pour créer une ancre, il suffit de rajouter l'attribut id à une balise qui va alors servir de repère. Ce peut être n'importe quelle balise, un titre par exemple.
Utilisez l'attribut id pour donner un nom à l'ancre. Cela nous servira ensuite pour faire un lien vers cette ancre. Par exemple :
 

Ensuite, il suffit de créer un lien comme d'habitude, mais cette fois l'attribut href contiendra un dièse (#) suivi du nom de l'ancre. Exemple :
 

• Les images

Le langage html offre la possibilité d’insérer les images dans les pages web. On distingue plusieurs formats d’image à savoir : le .png, le .jpeg, .jpg et les images animées les .GIF.
Pour insérer une image, on utilise la balise <img />. C’est une balise orpheline. Elle doit être accompagné de deux attributs obligatoires.

• src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez soit mettre un chemin absolu (ex. : http://www.site.com/fleur.png), soit mettre le chemin en relatif (ce qu'on fait le plus souvent). Ainsi, si votre image est dans un sous-dossier images, vous devrez taper : src="images/fleur.png"

• alt : cela signifie « texte alternatif ». On doit toujours indiquer un texte alternatif à l'image, c'est-à-dire un court texte qui décrit ce que contient l'image. Ce texte sera affiché à la place de l'image si celle-ci ne peut pas être téléchargée (cela arrive), ou dans les navigateurs de personnes handicapées (non-voyants) qui ne peuvent malheureusement pas « voir » l'image. Cela aide aussi les robots des moteurs de recherche pour les recherches d'images. Pour la fleur, on mettrait par

Exemple : alt="Une fleur".
Les images doivent se trouver obligatoirement à l’intérieur d’un paragraphe.
Code source :

Résultat :

Bref, l'insertion d'image est quelque chose de très facile pour peu qu'on sache indiquer où se trouve l'image, comme on avait appris à le faire avec les liens.
La plus grosse « difficulté » (si on peut appeler cela une difficulté) consiste à choisir le bon format d'image. Il faut donc bien choisir le format avant de mettre votre image sur une page web.