Code HTML – Page 6 – <HTML> #CSS

 comme mark | marqué
Représente un texte surligné

Code

Aperçu dans le navigateur

 utilise les attributs globaux

mark {
  background-color: yellow;
  color: black;
}

 comme italic | italique

Accentue le texte en italique

A n'utiliser qu'en dernier recours, il est préférable d'utiliser du style Css ou la balise  à la place

Code

<!DOCTYPE html> <html> <head> <title>Mon premier site web</title> <link rel='icon' type='image/png' href='image/logo.png'> </head> <body> Une phrase avec le dernier mot en italique </body> </html>

Aperçu dans le navigateur

 utilise les attributs globaux

i { font-style: italic; }

 comme emphasized | emphase

Accentue le texte en italique

Code

<!DOCTYPE html> <html> <head> <title>Mon premier site web</title> <link rel='icon' type='image/png' href='image/logo.png'> </head> <body> Une phrase avec le dernier mot accentué </body> </html>

Aperçu dans le navigateur

 utilise les attributs globaux

em { font-style: italic; }



 comme fort

Accentue le texte en gras, le rend important

Code

<!DOCTYPE html> <html> <head> <title>Mon premier site web</title> <link rel='icon' type='image/png' href='image/logo.png'> </head> <body> Une phrase avec le dernier mot en gras car il est important </body> </html>

Aperçu dans le navigateur

 utilise les attributs globaux

strong { font-weight: bold; }



 comme bold | gras

Accentue le texte en gras

A n'utiliser qu'en dernier recours, il est préférable d'utiliser du style Css ou la balise  à la place

Code

<!DOCTYPE html> <html> <head> <title>Mon premier site web</title> <link rel='icon' type='image/png' href='image/logo.png'> </head> <body> Une phrase avec le dernier mot en gras </body> </html>

Aperçu dans le navigateur

 utilise les attributs globaux

b { font-weight: bold; }

<hr>

<hr> comme horizontal rule | règle horizontale

Ajoute une ligne horizontale

Cette balise sert à séparer visuellement deux zones de contenu

Code

<!DOCTYPE html> <html> <head> <title>Mon premier site web</title> <link rel='icon' type='image/png' href='image/logo.png'> </head> <body> Une première ligne Un paragraphe Encore un paragraphe <hr> Une dernière ligne Un dernier paragraphe </body> </html>

Aperçu dans le navigateur

<hr> utilise les attributs globaux

hr { display: block; margin-top: 0.5em; margin-bottom: 0.5em; margin-left: auto; margin-right: auto; border-style: inset; border-width: 1px; }

<pre>

<pre> comme preformated text | texte préformaté

Représente du texte préformaté, il est affiché dans le navigateur de la même manière qu’il est saisie (espace et saut de ligne compris)

Une balise saisie à l'intérieur de <pre> est interprétée tel quelle et non affichée comme saisie

Code

<!DOCTYPE html> <html> <head> <title>Mon premier site web</title> <link rel='icon' type='image/png' href='image/logo.png'> </head> <body> <pre>plusieurs espaces sont possible</pre> <pre>Attention une balise comme ou est interprétée, la conversion en caractères spéciaux permet de l'afficher correctement devient ainsi et pour </pre> </body> </html>

Aperçu dans le navigateur

<pre> utilise les attributs globaux

pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0; }

 

  comme break

Ajoute un saut de ligne

Même si possible, évitez d'appliquer un style Css à cette balise

Code

<!DOCTYPE html> <html> <head> <title>Mon premier site web</title> <link rel='icon' type='image/png' href='image/logo.png'> </head> <body> Une première ligne la deuxième ligne se situe en dessous de la première </body> </html>

Aperçu dans le navigateur

  utilise les attributs globaux



 comme paragraphe

Ajoute un paragraphe

Cette balise se caractérise par l’ajout d’une marge de 1em avant  et après 

Code

<!DOCTYPE html> <html> <head> <title>Mon premier site web</title> <link rel='icon' type='image/png' href='image/logo.png'> </head> <body> Une première ligne Ceci est un paragraphe Une ligne de ce paragraphe Une ligne en dehors du paragraphe Un dernier paragraphe </body> </html>

Aperçu dans le navigateur

 utilise les attributs globaux

p { display: block; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; }

Les paragraphes

Les paragraphes

 comme paragraphe

Ajoute un paragraphe

Cette balise se caractérise par l’ajout d’une marge de 1em avant  et après 

Navigation des articles

Articles plus anciens
Articles plus récents

Catégorie : Code HTML

<mark>

<i>

<em>

<strong>

<b>

<hr>

<pre>

<br>

<p>

Les paragraphes

Les paragraphes