ct

Chapitre 2 - Liens, images et texte

Le texte

Voici différentes balises que l’on peut utiliser pour insérer tu texte, elle doivent être écrites entre les balises <body> et </body> :

Balise : A quoi sert t-il
<p> Votre texte </p> Sert à écrire un paragraphe
<b> Votre texte </b> Sert à écrire du texte en gras.
<i> Votre texte </i> Sert à écrire du texte en italique
<u> Votre texte </u> Sert à écrire du texte souligné
<center> Votre texte </center> Sert à écrire du texte centré

 page-web-texte.pngVous pouvez donner un style à votre texte :

schema-personaliser-texte.png

 

 

 

 

 

Quand on veut faire un entête, un titre, on utilise des balises différentes selon la taille de l’entête, de <h1> à <h6> : <h1> votre titre </h1>,  <h2> votre titre </h2>, …, <h6> votre titre </h6>.

Une bonne façon de bien connaître toute ces balises et attributs, c’est de s’entraîner.

Les listes à puces

Elles vous permettent d’établir de courtes listes et d’organiser vos pages web.
On peut faire  deux types de listes, les listes non-ordonnées (avec des puces) et les listes ordonnées (avec des numéros).

Liste non-ordonnée :
<ul>
    <li>HTML </li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>PHP</li>
</ul>

Ce qui affichera une liste comme ceci :
   • HTML
   • CSS
   • JavaScript
   • PHP

Donc, on annonce que c’est une liste à puce non-ordonnée avec  la balise <ul> puis on indique les objets à lister avec la balise <li>
Dans cet exemple, on a listé quelques langages de programmation permettant de créer des sites web.


Liste ordonnée :
Cette la même chose que pour les non-ordonnée sauf que l’on change la balise <ul> par la balise <ol>
Exemple :
<ol>
    <li>HTML </li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>PHP</li>
</ol>
 
Ce qui rend ceci :
   1. HTML
   2. CSS
   3. JavaScript
   4. PHP

Dans ce cas-là, on établit un ordre.
Les listes à puces sont utiles, car ont à souvent besoin de faire des listes.

Les liens

On utilise la balise <a href= " ">  </a> pour faire un lien vers une autre page, mais on peut faire deux types de liens en html :

Un lien externe en html : un lien vers un site qui se situe sur internet.

schema-lien.png

*Attributs : Dans une balise, on peut indiquer des précisions sur le contenu de cette balise, une balise peut contenir plusieurs attributs. On indique les attributs après le nom de la balise.

Exemple :   <nom de la balise attribut="  ">schema-lien-interne.png

 

 

 

Un lien interne en html : vers une page qui se situe sur votre ordinateur.

Pour cela il faut déjà que vous ayez deux pages html que vous avez faîtes.

  1. Créez une page html qui sera votre page d’accueil. Appelez la accueil.html
  2. Créez une autre page qui sera la page ou vous naviguerez avec votre lien. Appelez la page.html
  3. Ajoutez  ce code, puis sauvegardez regardez ce que cela donne.

En fait, on fait la même chose qu’avec les liens externe sauf qu’au lieu de mettre une URL on met le nom de l’autre page que vous avez créé.

Les ancres : Elles ne servent que si vous avez une très longue page web, vous pouvez faire des liens qui vous  permettrons non pas d’arriver sur une autre page mais de vous amener dans une certaine partie de votre site.
Alors, il faut faire deux choses :

  • En premier, vous choisissez la balise vers laquelle vous allez vouloir faire une ancre et ajouter un nouvel attribut : id. Ce qui pourrait ressembler à ceci : <b id= "Ancre">Bonjour!</b>
  • Puis on va allez dans la balise qui va vous servir de liens vers votre ancre, ça va beaucoup ressembler aux liens mais sauf que l’on va entrer pour l’attribut « href » : <a href="#id de votre ancre#">

Donc si l’on reprend l’exemple précédent, on aurait : <a href="#Ancre#">Allez vers la partie Bonjour! Du site</a>
Vous pouvez aussi faire des ancres dans d’autres pages web :
Mettons que vous ayez un autre page nommée "ancrepage.html" et que l’on ait dedans une partie avec pour id : ancre
Alors on mettra dans notre page :
<a href= "ancrepage.html#ancre">Ancre vers un autre page</a>

Les images

Pour afficher des images en html, on va utiliser la balise <img/>.

Dans cette balise on va devoir intégrer quatre attributs au minimum,

  1. L’URL de l’image ou le nom de l’image (si l’image se trouve sur votre ordinateur) : src
  2. La hauteur de l’image : height
  3. La largeur de l’image : width
  4. Le nom affiché si l’image ne se charge pas : alt

Exemple :

schema-inserer-image.png

3 votes. Moyenne 4.67 sur 5.