La structuration de données en HTML

La mise en forme du texte

BR

nous allons découvrir ici quelles balises il faut utiliser
pour mettre en forme du texte dans un document HTML

P

ceci est mon premier paragraphe, j'utilise la balise spécialement prévue pour mettre en forme ce genre de contenu et automatiquement sauter les lignes adéquates en début et en fin de paragraphe. Une balise pratique ! Elle se distingue de la balise br par le fait qu'elle ne sert pas à aller à la ligne, mais bien à changer de paragraphe. C'est sémantiquement différent.

ABBR

HTML

DL/DT/DD

HTTP
Hyper Text Transfer Protocol. En français : protocole de transfert de l'hyper texte. C'est ce qui définit le format de communication (échanges) entre le client et le serveur.

DEL

Internet et le web, c'est pareil !

INS

Internet c'est le réseau, le web c'est les sites !

EM/STRONG/MARK

En HTML5, de nouvelles balises sont apparues, comme mark par exemple. Elles ne servent qu'à définir la sémantique du contenu (mise en valeur, importance, surlignage). L'apparence change par défaut, mais on pourra la modifier en CSS.

OL/UL/LI

  1. HTML c'est bien
    • mais HTML5 c'est mieux !
  2. CSS c'est encore mieux !
    • mais c'est beaucoup plus compliqué !

SUB/SUP

c'est incroyable, H2O et Mlle sont correctement affichés en HTML.

CITE

Parce qu'il n'y a pas d'apostrophe à Polytech, la brigade de l'apostrophe sanctionne !

La gestion des liens

vers une section de la page

Retour au début

vers une page du site

Redécouvrez ma première page !

vers un autre site

Accès au W3C validator

vers une ancre d'une autre page

Lien vers une ancre dans une page d'un sous dossier

vers un envoi de mail !

Spammez-moi !

vers un téléchargement !

Téléchargez mon .zip !

Les images

  Le logo de Université Nice Sophia-Antipolis

Les tableaux

L'age de certaines personnes
Nom Prénom Age
Bob L'éponge 8
McQueen Flash 21

Les boites

Les propriétés CSS de base : les marges et bordures

Ceci est le premier paragraphe de la page de test de la notion de boite. Il est entouré d'une bordure rouge continue de 2 pixels, avec une marge intérieure de 1em et une marge extérieure de 2em.
Le texte est centré dans ce paragraphe qui n'occupe que la moitié de la taille de la page.

Ceci est le deuxième paragraphe de cette page. Il est là pour nous apprendre à maitriser les bordures intérieures et extérieures, ainsi que les propriétés détaillés sur chacun des cotés. On voit notamment des bordures bicolores et de styles différents, avec une couleur de fond.

Ceci est le troisième paragraphe de notre magnifique page (ou pas !). On sait que cela va être difficilement lisible, car il s'agit de placer le logo de l'université sur le fond de ce paragraphe, et en général, c'est pas ce qui est le plus élégant.

Les styles de bordures

solide

double ligne

pointillé (dots)

tirets (dash)

3D inset

3D outset

groove

ridge

Les différents positionnements

le logo de polytech
le logo de l'UNS

ici un titre qui va se retrouver à coté de l'image

ceci est un texte qui doit se retrouver à coté de l'image flottante du logo de l'UNS et l'entourer (si la largeur est suffisamment petite).

Par contre, ce texte ci doit se retrouver en dessous l'image flottante du logo de l'UNS.