Balises et feuille de style

Des balises sans fermeture

Certaines balises ne se ferment pas :

La balise <br> permet de passer à la ligne dans un texte
Essayez avec ces deux paragraphes:

 
<p>
If you can keep your head when all about you
Are losing theirs and blaming it on you,
If you can trust yourself when all men doubt you,
</p>

et

<p>
If you can keep your head when all about you<br>
Are losing theirs and blaming it on you,<br>
If you can trust yourself when all men doubt you,<br>
</p>

La balise <hr> permet de tracer une ligne de séparation
Faites un essai
Cette balise possède des attributs : C'est à dire que l'on peut lui imposer une longueur(width), une couleur(color), un alignement(align="center" ou "left" ou "right") et une épaisseur(size)

Les attributs se mettent dans la balise séparés par un espace

Essayez avec :
<hr color="red" size="10" width="500" align="center" >
Pour les couleurs en html je conseille d'utiliser leurs noms (en anglais) ou leurs codes en hexadécimal voir

Les balises et la feuille de style

Dans la feuille de style, on définit pour chaque balise que l'on utilise souvent, les attributs que l'on souhaite. Ainsi, chaque fois que vous utiliserez une balise déclarée dans la feuille de style, les attributs seront appliqués. C'est très utile, surtout lorsque l'on veut modifier quelque-chose, il suffit de le faire dans la feuille de style.

Observons la feuille de style proposée

Les deux premières lignes importent des polices

Les attibuts de la balise "body" : la couleur de fond est "white", la police(font en anglais) utilisée est l'une de celle importée, modifiez les padding pour en voir l'effet, la taille de la police est de 18px, pas de marge et la couleur de la police est #444

Les balises ("h1", "h2",..,"h6") sont utilisées pour faire des titres. Ici la balise "h1" a comme attributs : la police utilisée et la taille de la police.
- Rajoutez la ligne : color : blueviolet; et observez le changement
- Fabriquez vous-même le style pour une balise "h2", "h3", "h4".

Un style pour la balise <p>

Rajoutez ceci dans la feuille de style:

Un style pour la balise <section>

La balise section est un peu différente de la balise "p": Cela met le texte dans un cadre, c'est ce que j'ai utilisé sur ce site:
Rajoutez ceci dans la feuille de style et écrivez un texte en utilisant la balise "section" dans index.html(bien sûr!)

Ce qui donne :

Les incontournables

Mettre en gras ou en italique

<strong>....</strong> pour mettre en gras
<i>....</i> pour mettre en italique

Mettre en couleur une partie du texte

Une liste non numérotée


    <ul>
      <li> texte </li>
      <li> texte </li> 
      <li> texte </li> 
    </ul>

Donne

texte
texte
texte

Une liste numérotée


    <ol>
      <li> texte </li>
      <li> texte </li> 
      <li> texte </li> 
    </ol>

Donne

texte
texte
texte

Insérer une image

Il faut au préalable charger l'image dans le dossier images.

- Glissez-déposez l'image dans le dossier "images" (ou utilisez l'icone et "Envoyer un fichier")

- Le code pour insérer l'image est :

<img src="images/img4.jpg" width="320" height="175" >

- images/img4.jpg : Est le chemin complet de l'image (Dossier/nom _complet_de_l'image)
- width(largeur), height(hauteur) sont des attributs qui règlent la taille de l'affichage de l'image

Pour afficher l'image à gauche(left), au centre(center) ou à droite(right) de la page, on met le code de l'insertion d'image dans une balise "p" avec l'attribut "align":


   <p align="center">
      <img src="images/img4.jpg" width="320" height="175">  
   </p>

Faire un lien vers une page web: la balise <a href=...>

Par exemple, si on souhaite faire un lien vers YouTube, on écrira le code suivant:


            <a href="https://www.youtube.com/?gl=FR" target="_blank"> Lien vers YouTube </a>

Il faut l'adresse complète du site
target="blank" est l'attribut qui fera afficher le site dans un nouvel onglet
"Lien vers YouTube" est le texte du lien qui sera affiché dans la page web

Les tableaux

Un tableau est constitué de lignes et de colonnes, le code pour, par exemple, créer un tableau de deux lignes et trois colonnes est:


<table border="5">
  <tr>
    <td>Valeur1-1</td>
    <td>Valeur1-2</td>
    <td>Valeur1-3</td>
  </tr>
  <tr>
    <td>Valeur2-1</td>
    <td>Valeur2-2</td>
    <td>Valeur2-3</td>
  </tr>
</table>

La balise <table border="5"> ouvre un tableau avec une bordure de 5px
Les balises "tr" ouvrent des lignes
Les balises "td" ouvrent des colonnes

Cela donne :

Valeur1-1	Valeur1-2	Valeur1-3
Valeur2-1	Valeur2-2	Valeur2-3

Un tableau d'une ligne et de plusieurs colonnes est très utile pour aligner des images ou du texte et des images.

Voilà un tableau sans bordure d'une ligne et quatre colonnes avec quatre images :

La balise <table> possède d'autres attributs que vous pouvez chercher sur internet.

Insérer une vidéo depuis YouTube

Sous la vidéo dans YouTube, cliquez sur "intégrer" puis copier le code que l'on vous propose et coller le dans votre page html

Voici une vidéo faite pour vous :

Il existe bien d'autres balises, que vous découvrirez si le besoin s'en fait sentir. Pour réaliser une page web avec un "beau" design vous avez l'essentiel.

Ce qu'il faut absolument avoir en tête :

La feuille de style permet de mettre en forme le contenant c'est à dire : titres, paragraphes, sections, articles etc...

La page index.html permet d'afficher du contenu

Et enfin, à part pour quelques-unes : toute balise ouverte doit être fermée

N'oublions pas que le plus important c'est le contenu d'une page web...

Travail à faire en groupe de 2 ou 3

Réaliser une page web sur un sujet original. On bannit les sujets du type : Sportifs, stars et starlettes, chanteurs, people, jeux vidéos...
On préférera présenter un événement de votre quartier(commune, ville), ou bien sur les sujets suivants:

Qu'est-ce qu'un ami sur un réseau social?
Le teen-marketing
Les Spam(s)
L'école et la vie privée

En vous aidant d'internet et de ces fiches.