Mes statistiques
  • 1 connecté(s)
    25 commentaires
    Total de 2629 visiteurs
    Depuis le 08/04/2008
    Mise à jour le 05/07/2008
Articles de la rubrique "Aller plus loin"
 Accès direct à :
 
Le (x)HTML : les secrets d'une page Web

Samedi 12 Avril 2008 à 14:53

Publié par xenon77 dans Aller plus loin

Une relecture du cours doit être faite ! Je suis désolé pour les certaines fautes qui court un peu par tout...

Envie d'en connaître un peu plus sur le (x)HTML ? Un article complet est disponible ci-dessous ! Bonne lecture !


Qu'est-ce le (x)HTML ?
XHTML est un langage de balisage servant à l'écriture de pages du World Wide Web (WWW). Conçu à l'origine comme le successeur de HTML, XHTML se fonde sur la syntaxe définie par XML, plus récente et plus simple que la syntaxe définie par SGML sur laquelle repose HTML.

Source : Wikipédia.

Le (x)HTML est cependant un langage simple d'utilisation et est très facile de l'utiliser pour quelque petites choses simple ! Le (x)HTML est utiliser par pratiquement tous les sites maintenant car offre énormément d'avantages par rapport au HTML simple ! En effet on peut y modifier la présentation de la page facilement grâce aux feuille de style les fichiers .css) !

I. La balise div et comment appliquer des effets de style ?
Qu'est-ce que la balise div ? Qu'est-ce qu'un argument ? Comment appliquer un style via l'argument style ?

Pour pouvoir appliquer facilement un style il faut utiliser les blocs ! Voici une balise typique pour les blocs. En effet la balise div permet de créé un bloc facilement (il est possible d'utiliser d'autre balise par exemple la balise p), voici un exemple :

<div>
<p>Voici un bloc qui contient un paragraphe (x)HTML !</p>
</div>

Vous voyez ? C'est simple... la balise div commence toujours par le tag <div> et la balise est fermée par le tag </div> !

Il faut savoir : a propos des balises
Une balises n'est en général rien d'autre que deux tags. Un d'ouverture du type <nom_de_la_balise> et un tag de fermeture du type </nom_de_la_balise> !

Je ne suis plus... je veut modifier le style du bloc moi...

Mais vu que vous voulez modifier cela pour que cela soit plus jolie vous devez mettre en peu de style ou nommé votre bloc. Pour cela il y a deux arguments simple pour faire cela :

  • L'argument id : permet de donner un nom à votre bloc,
  • L'argument style : qui vous permet de modifier directement dans le document (x)HTML son style sans touché aux fichiers fichiers CSS (par exemple dans le cas des blogs KaZeo ou les membres n'ont pas accès aux fichier .css).
   Mais comment utiliser les argument ? Parce que la je patauge...

Je ne peut rien faire à part vous montrer un exemple simple :

<div style="border : solid 1px #fF1F1F1; padding : 5px;">
   <p>Voici un exemple simple de bloc avec un effet de style CSS</p>
</div>

Comme vous le voyez il est assez simple d'ajouter un attribut avec sa valeur il suffit d'ajouter entre les signe "<" et ">" et après le nom de la balise votre argument suivit du signe égal (=) suivit de guillemet suivit de la valeur puis en ferme la valeur avec une guillemet :-P (voir exemple, gras)

Il existe beaucoup de valeurs pour l'argument style (se sont tous les argument CSS avec leurs valeur). Voici une liste simple de valeur pour l'argument style :

  • background-color :
  1. (color) Votre couleur au format HTML (ex: #F1F1F1),
  • border (ou : border-bottom, border-top, border-left et border-right) :
  1. (type) Type de bordure : solid (pour solide), dotted (pour des petits points) et dashed (pour des tirets),
  2. (taille) Taille de la bordure (ex : 1px),
  3. (color) Couleur HTML de la bordure (ex: #F1F1F1),

Ce sont donc les valeurs que vous pourrez le plus utiliser, mais, il y en à d'autre ! Pensez donc à faire un tour sur le Site Du Zéro dans la partie "Liste des propriétés CSS" du cours "Le (x)HTML / CSS" ou vous trouverez tous les arguments disponible ainsi que leurs valeurs !

II. La balise p
Qu'est-ce que la balise p ? Comme le div, la balise p un bloc ?

La balise p est la balise de paragraphe utiliser beaucoup via l'éditeur HTML de KaZeo. En effet à chaque saut de ligne vous utiliser la balise p pour le code HTML final !

Mais qu'est-ce que c'est la balise p ?
La balise p est simplement la balise pour les paragraphe qui n'est simplement la pour donner un style à une partie de votre contenue grace à l'argument style (voir en haut) !

Faut savoir aussi que comme la balise div, p est aussi un bloc ;-)

Exemple simple d'un paragraphe :

<p>Un exemple de paragraphe simple !</p>

III. Marre des blocs, je veut donner du style à un morceaux de texte
Utiliser la balise span. Les valeurs de style supporté par la balise span...

Vous en avez peut-être un peu marre ? Je vous parle que de bloc depuis toutes à l'heure mais j'ai oublier de vous parler de quelque chose ! La balise span, cette balise permet d'appliquer un effet sur un morceau de texte ! Vous pouvez comme les blocs utiliser les arguments mais faut savoir que pour l'argument style certaines valeurs ne sont pas disponible ;-)

Exemple simple de la balise span :

<span style="color : red;">Comment ça va ?</span>

Ce tutoriel n'est pas fini il reste beaucoups de chose à faire ! Revenez plus tard !

Horloge
Rechercher
Partenaires