top
logo

Images

Aucune image

Les bases du www - Condensé des contenus de formation

 

·         CONDENSE DU CONTENU DES FORMATIONS OFFERTES DANS LE CADRE DU DEVELOPPEMENT WEB :

Pour partir d’un site dit statique à un site dynamique, vous aurez besoin de savoir ceci :

ARCHITECTURE D'UNE PAGE WEB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

   <head>

       <title>Bienvenue sur mon site !</title>

       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

   </head>

   <body>

   </body>

</html>

 

Pour créer une page web,

  - ouvrir un editeur de texte notepad++, bloc note,...

  - enregistrer sous l'extention .HTML ou .HTM

  Attention : le nom du fichier doit avoir la meme extention

--------------------------------------------------------------

PARAGRAPHE

 

Chaque paragraphe se trouve entre les balises <p> et </p>

 (qui signifient "paragraphe").

    * <p> signifie "Début du paragraphe"

    * </p> signifie "Fin du paragraphe"

En fait, si vous voulez écrire un deuxième paragraphe, il vous suffit d'utiliser une deuxième balise <p>.

Votre code XHTML devrait donc être au final plein de balises de paragraphe !

-------------------------------------------------------------

Sauter une ligne

 

 

En XHTML, si vous appuyez sur la touche "Entrée", ça ne va pas créer

 une nouvelle ligne comme vous avez l'habitude.Oui, mais si je veux

juste aller à la ligne dans un paragraphe, et non pas sauter une ligne ?

C'est une balise seule qui sert juste à indiquer qu'on doit aller à la ligne : <br />

--------------------------------------------------------------

TITRE du texte et non de la barre de titre

    les balises sont:

    * <h1> </h1> : signifie "titre très important". En général, on s'en sert pour afficher le titre de la page en haut.

    * <h2> </h2> : signifie "titre important". Utilisez-les par exemple pour organiser vos paragraphes et leur donner un titre.

    * <h3> </h3> : pareil, c'est un titre un peu moins important (on peut dire un "sous-titre" si vous voulez)

    * <h4> </h4> : titre encore moins important.

    * <h5> </h5> : titre pas important.

    * <h6> </h6> : titre vraiment pas important du tout.

-----------------------------------------------------------------

Mettre un peu en valeur

 

 

Pour mettre "un peu" en valeur votre texte, vous devez utiliser la

 balise <em> </em>Son utilisation est très simple : entourez les mots à mettre en valeur

par ces balises, et c'est bon !

 

Mettre bien en valeur

 

 

Pour mettre un texte bien en valeur, on utilise la balise <strong> qui signifie "fort", ou "important" si vous préférez.Elle s'utilise

exactement de la même manière que <em>

----------------------------------------------------------

LIEN

 

Pour faire un lien, on utilise la balise <a> (facile à retenir hein ;))

 

On doit ajouter l'attribut "href" pour indiquer l'adresse de la page

cible (la page vers laquelle le lien amène)

 

Lien vers une ancre située dans une autre page

<a href="cible.html#rollers">

... vous amènera sur la page cible.html, directement au niveau de l'ancre appelé "rollers".

--------------------------------------------------------------------

LES IMAGES

Si on résume, voici quel format adopter en fonction de l'image que vous avez :

 

    * Une photo (ou une image avec beaucoup de couleurs) : utilisez un JPEG.

    * Un graphique avec peu de couleurs (moins de 256) : utilisez un PNG 8 bits

si possible carle format est meilleur, sinon utilisez un GIF.

    * Une image animée : utilisez un GIF animé.

Pour insérer une image, on doit utiliser la balise <img />.

C'est une balise de type seule (comme <br />).

Elle peut prendre plusieurs attributs, et 2 d'entre eux sont indispensables :

 

         - src : il permet d'indiquer où se trouve l'image que l'on veut insérer. Vous pouvez soit mettre un chemin

 en absolu (ex. : "http://www.site.com/fleur.png")

         -alt : cela signifie "texte alternatif". On doit toujours indiquer

un texte alternatif à l'image,

-------------------------------------------------------------------------------

l'attribut CLASS

 

Comme je viens de vous le dire, class est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image que etc...

<h1 class=""> </h1>

<p class=""></p>

<img class="" />

-----------------------------------------------------------------------------

<span></span> et <div> </div>

 

    *  <span> </span> : c'est une balise de type inline. Vous vous souvenez ce

qu'est une balise inline ? C'est une balise qui se met à l'intérieur d'un paragraphe,

 comme <strong>, <em>, <q>. Cette balise s'utilise donc au milieu d'un paragraphe,

 et c'est celle dont nous allons nous servir pour colorer Neil Armstrong.

    * <div> </div> : c'est une balise de type block. Comme <p>, <h1> etc... Elle

crée un nouveau "bloc" dans la page, et provoque donc obligatoirement un retour à

 la ligne. C'est une balise très très utilisée pour faire un design. Nous lui dédierons

 d'ailleurs 2 chapitres entiers dans la partie III du cours pour vous aider à construire

le design de votre site web.

Pour le moment donc, nous allons utiliser plutôt la balise <span>.On la met autour

 de Neil Armstrong,on lui rajoute une class, on crée le CSS

----------------------------------------------------------------------------

LA TAILLE DU TEXTE

En donnant une valeur relative : c'est-à-dire en écrivant carrément "gros", "très gros", "petit", "minuscule". Mais bien sûr, comme tout c'est en anglais :p. Voici la liste des différentes valeurs que vous pouvez mettre ainsi que leur signification :

 

    * xx-small : minuscule

    * x-small : très petit

    * small : petit

    * medium : moyen

    * large : grand

    * x-large : très grand

    * xx-large : euh... gigantesque :D

------------------------------------------------------------------------------

ALIGNEMENT

 

Vous ne pouvez pas modifier l'alignement du texte d'une balise inline

(comme span, a, em, strong...). L'alignement ne fonctionne que sur des balises

 de type block (p, div, blockquote, h1, h2, ...), et c'est un peu logique quand

on y pense : on ne peut pas modifier l'alignement de quelques mots au milieu d'un

 paragraphe !. C'est donc en général le paragraphe entier qu'il vous faudra aligner.

 

 

------------------------------------------------------------------------------

STYLE DE TEXTE

font-style est l'attribut indiqué et admet 3 valeurs:

# italic : le texte sera mis en italique.

# oblique : le texte sera mis en italique. Quoi là aussi ? o_O Euh, pour tout vous

dire je n'en sais rien moi-même, mais tout ce que je constate c'est que "italic"

et "oblique"

reviennent au même. Choisissez donc l'un des deux ^^

# normal : le texte sera normal (par défaut). Cela vous permet d'annuler une mise en italique. Par exemple, si vous voulez que les textes entre <em> ne soient plus en italique, vous devrez écrire :

 La propriété CSS pour mettre en gras est:

 font-weight, et prend les valeurs suivantes :

 

    * bold : le texte sera en gras.

    * normal : le texte sera écrit normalement (par défaut).

 

propriété font-variant prend uniquement 2 valeurs différentes :

 

    * small-caps : le texte sera écrit en petites capitales.

    * normal : le texte sera écrit normalement (par défaut).

propriété text-transform. Elle peut prendre ces valeurs :

 

    * uppercase : tout le texte sera écrit en majuscules.

    * lowercase : tout le texte sera en minuscules.

    * capitalize : la première lettre de chaque mot sera en majuscules.

    * none : pas de transformation (par défaut).

propriété text-decoration

    * underline : souligné.

    * line-through : barré.

    * overline : ligne au-dessus.

    * blink : clignotant. Attention, cette propriété ne marche pas sous Internet Explorer. Elle fonctionne en revanche bien sur tous les autres navigateurs, dont Mozilla Firefox.

    * none : normal (par défaut).

 

 

 

-----------------------------------------------------------------------------

LISTE A PUCE

<ul></ul> indique le début d'une liste à puce

<li></li> indique un nouvel élément de la liste à puce

--------------------------------------------------

"a:hover" signifie donc : "Quand la souris est sur le lien" (quand on pointe dessus).

a

{

   text-decoration: none; /* Les liens ne seront plus soulignés */

   color: red; /* Les liens seront en rouge au lieu de bleu */

   font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */

}

a:hover /* Quand le visiteur pointe sur le lien */

{

   text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */

   color: green; /* Le lien sera écrit en vert quand on pointera dessus */

}

-------------------------------------------------------------------

 

p:first-letter /* La première lettre de chaque paragraphe */

 

p:first-line /* La première ligne de chaque paragraphe */

 

Nos partenaires

 

 

 

 

 

 

 

 

Login

Connectés

Nous avons 29 invités et aucun membre en ligne


bottom

(C) 2014 - DG TECHNOLOGIES SARL - Tous droits réservés