Chez moi

Pour revenir à l'Accueil du blog

mercredi 3 octobre 2007

[I] - html 4 - Les tableaux

4ème petite leçon de html - Les tableaux :

Alors là, nous attaquons une partie délicate, un peu plus complexe (qui marche jamais du premier coup !) mais néanmoins importante et fort utile parfois (puisqu'ils peuvent permettre par exemple une meilleure mise en page  !)

Structure simple d'un tableau  :

<TABLE>
<TR><TD>1ère ligne </TD><TD> 2ème cellule </TD></TR>
<TR><TD>2ème ligne </TD><TD>2/2</TD></TR>
<TR><TD>3ème ligne</TD><TD>2/3</TD></TR>
</TABLE>

explications : lecture de haut en bas et de gauche à droite... logique !

* <TABLE> balise qui annonce l'ouverture d'un tableau.
* <TR> (de "table row" = ligne de tableau) annonce l'ouverture d'une ligne dans le tableau
* et donc </TR> sera la fermeture de la ligne
* <TD> (de "table data" = données de tableau) annonce que nous ouvrons une cellule qui sera du coup une colonne du tableau
* et donc </TD> sera la fermeture de la cellule (après y avoir insérer du texte !)
* après il suffit de recopier ce meme schéma pour avoir autant de ligne et de colonne voulues !
* </TABLE> indique bien évidement que le tableau est fini !

Et voilà ce que ça donne en vrai !

1ère ligne	2ème cellule
2ème ligne	2/2
3ème ligne	2/3

Mise en forme du tableau :

Biensur, les balises de texte (cf leçon html 1) pour metre en gras, italique, pour centrer, aligner à droite etc, s'appliquent au tableaux, il ne faut pas oublier de les spécifier, et de les appliquer aux bon endroit ! (à <table> si vous voulez que tout le tableau soit centrer par exemple, à <td><center> si vous voulez que seulement le texte d'une cellule soit centrer etc...)

Il exite une balise particulière <TH> (de "Table Header" = "En tête de tableau") qui peut etre utilisée à la place de la balise <TD>. Cette balise <TH> a exactement la même propriété que <TD> (créer une nouvelle cellule) mais, en plus de cela, elle passe automatiquement le texte contenu entre les balises <TH> et </TH> en gras et centré !

Ainsi, au lieu d'avoir à écrire : <TD><CENTER><B>votre texte</B></CENTER></TD>, on n'écris plus que <TH> votre texte</TH>

Mettre des bordures au tableau :

Le tableau ci-dessus, n'a pas de bordure, ni aucune mise en forme pour se faire, il faut le préciser par de nouvelles balises ! Logique !

<TABLE BORDER="x"> (à la place de <TABLE> tout court) qui permet de définir une bordure en nombre défini de pixels (épaisseur de la bordure).

Fusionner des colonnes : <TD COLSPAN="x"> x étant le chiffre correspondant au nombre de colonne sur lesquelles fusionnent les cellules.

Fusionner des lignes : <TD ROWSPAN="x" > x étant le chiffre correspondant au nombre de lignesur lesquelles fusionnent les cellules. Attention néanmoins ici. Les cellules des lignes suivantes n'ont plus lieu d'être, ne pas oublier donc de les supprimer dans les lignes suivantes de votre code html !

Pour notre exemple ci dessus, ça nous donne :

code :

<TABLE BORDER="2" >	-->(ma bordure fait ici 2 pixels d'épaisseur)
<TR><TD COLSPAN="2">1ère ligne</TD></TR>	--> ma cellule est fusionner sur 2 colonnes, comme il n'y a pas d'autre colonne dans le tableau, on peut fermer le tableau (</TR>) après cette cellule fusionner.
<TR><TD>2ème ligne </TD> <TD ROWSPAN="2">2/2</TD></TR>	--> ma 2ème cellule de cette ligne va fusionner sur 2 lignes
<TR><TD>3ème ligne</TD></TR>	-> sur cette 3ème ligne, la 2ème cellule ayant fusionner avec celle du dessus, ne pas oublier d'enlever son ouverture et fermeture sur cette ligne.
</TABLE>                                                        résultat :

1ère ligne
2ème ligne	2/2
3ème ligne

Donner une dimension au tableau :

<TABLE WIDTH="x" HEIGHT="y"> définit repectivement la largeur et la hauteur du tableau.

2 solutions :
* définir x et y en pixels ex : <table width="600"> signifie que mon tableau fera une largeur de 600 pixels.
* définir x et y en % ex : <table width="80%"> signifie que mon tableau occupera 80 % de la largeur de la fenêtre (ce qui peut etre plus interessant pour s'adapter à toutes les résolutions d'écran !)

Donner une taille aux cellules :

Les options WIDTH et HEIGHT marchent pour les cellules comme pour le tableau. (à mettre après <TD width...). Attention toutefois, si vous donnez une largeur à votre tableau, l'ensemble des largeurs de vos cellules d'une ligne (et donc l'ensemble des colonnes) doivent être égale à la largeur totale du tableau...

Deux options supplémentaire pour la présentation des tableaux :

CELLSPACING ("espace de cellule" en anglais) et CELLPADDING ("remplissage de cellule")

* <TABLE CELLSPACING="x"> où x représnte l'espace entre les cellules.
* <TABLE  CELLPADDING="y"> où y repréente l'espace entre la bordure de la cellule et son contenu.

Mettre de la couleur dans son tableau :

Définir la couleur des bordures :

<TABLE BORDERCOLOR="#0000FF" BORDER="1"> définit la couleur de la bordure. A noter au passage, l'ajout de BORDER="1" (sinon le tableau n'aura pas de bordure !)

On peut aller encore plus loin, en ajoutant un effet de relief :

<TABLE BORDERCOLORLIGHT="#FFFFFF" BORDERCOLORDARK="#0000FF" BORDER="5">

En reprenant notre exemple, cela donne :

code :

<table bordercolorlight="#FFFFFF" bordercolordark="#0000FF" border="5">
<tr><td>1ère ligne </td><td> 2ème cellule </td></tr>
<tr><td>2ème ligne </td><td><center>2/2</center></td></tr>
<tr><td>3ème ligne</td><td><center>2/3</center></td></tr>
</tbody></table>

résultat :

1ère ligne	2ème cellule
2ème ligne	2/2
3ème ligne	2/3

Définir la couleur des cellules :

Ici on utilise le code suivant : BGCOLOR="#0000FF" (BG est la contraction de "Background" = arrière plan)
* <TABLE BGCOLOR="#0000FF"> définir la couleur de fond de tout le tableau
* <TR BGCOLOR="#0000FF"> définit la couleur de fond d'une ligne
* <TD BGCOLOR="#0000FF"> définit la couleur de fond d'une cellule

Ce qui donne dans notre exemple :

code :

<table border="5" bordercolordark="#0000FF" bordercolorlight="#FFFFFF">
<tr><td>1ère ligne </td><td> 2ème cellule </td></tr>
<tr bgcolor="#ff0000><td>2ème ligne </td><td><center>2/2</center></td></tr>
<tr><td>3ème ligne</td><td bgcolor="#0000ff"><center>2/3</center></td></tr>
</tbody></table>

résultat :

1ère ligne	2ème cellule
2ème ligne	2/2
3ème ligne	2/3

Voilà ! tout est là pour faire de jolis tableaux !!!!........
Il faut avant tout beaucoup de patience pour y arriver... Je ne vous dis pas combien de temps j'ai mis pour écrire rien que cette note, puisque toutes les balises mises ici ont été vérifiées au fur et à mesure, et comme je l'ai dis au début de cette note, RIEN NE MARCHE DU PREMIER COUP !!!!.....
Si lorsqu'on pratique le html, tout est important, il ne faut rien oublier, ici pour les tableaux c'est plus vrai que jamais ! Faire attention au moindre signe sinon, tout peut etre décalé ou dans tous les sens !..... pour résumer... il faut être trés RIGOUREUX !
Patient et rigoureux ! Ouais ! ça résume bien !!!!.....
A vos tableaux maintenant !! ^^

-Ce post sera mis à jour au fur et à mesure si besoin... -

jeudi 27 septembre 2007

[I] - html 3 - Les liens

3ème petite leçon de html - Comment insérer un lien :

D'une manière générale, le code pour insérer un lien est :

<A HREF="Adresse du lien"> Aller à ma page</A>

* <A HREF= correspond à l'ouverture d'un ordre concernant un lien.
* "Adresse du lien"> : on recopie toute l'adresse de la page sur laquelle on veut aboutir et on referme la balise d'ouverture.
* Aller à ma page : ici on écrit ce qu'on veut, c'est l'endroit où on va cliquer pour aboutir à la page voulue
* </A> : pour spécifier que le texte de lien est terminé.

Rappel... ne rien oublier, ni guillemet, ni "="... rien... tout est important !!....

Où va s'ouvrir le lien ?

Si rien n'est spécifié, la page sur laquelle vous étiez est remplacée par la nouvelle page du lien.
Pour éviter cela, on utilise la propriété TARGET ("cible" en français), ce qui donne :

<A HREF="adresse du lien" TARGET="_blank">Aller à ma page</A>

Le simple ajout de TARGET="_blank" ("blank" = "page vierge" en français) indique que le navigateur devra ouvrir sa page dans une nouvelle fenêtre (ce qui vous permet de garder votre liste de lien en arrière plan).

(N.B. le signe _ est un underscore et ne doit pas être confondu avec le signe - tiret) et... il est obligatoire !)
(Il existe d'autres TARGET possible, mais inutiles pour l'instant !)

Qu'est ce que l'adresse d'un lien ?

Il existe

* des liens externes c'est à dire vers un autre site que le sien qui correspond à l'adresse du site : "http://www.nomdusite.com". Dans ce cas, ne pas oublier le http devant l'url du site.
* des liens internes qui correspondent à des liens internes à un site pour passer d'une page à une autre, dans ce cas, l'adresse est plus courte et du style : "nommapage.html" (ne pas oublier l'extension de la page !!)

En ce qui me concerne, dans tous les cas, j'ouvre la page sur laquelle je veux aboutir, et je fais un copie/coller de l'adresse qui s'affiche sur la barre d'adresse du haut de l'écran.

Les liens sur les images :

Il suffit d'encadrer la balise image par la balise lien (voir leçon 2 sur les images) :

<A HREF="url de la page où on veut aller"><IMG SRC="url de l'image" BORDER="0" WIDTH="100" HEIGHT="150"></A>

Le rajout de la propriété BORDER="0" permet d'enlever la bordure qui se met automatiquement et qui sert à repérer une image qui sert de lien mais qui n'est pas forcément trés esthétique.

Donner un nom au lien d'image :

il est possible de rajouter une bulle d'information (visible lorsqu'on laisse qq secondes le curseur de la souris sur le lien). Pour cela il faut rajouter l'attribut ALT dans la balise image :

<A HREF="url de la page où on veut aller"><IMG SRC="url de l'image" BORDER="0" WIDTH="100" HEIGHT="150" ALT="votre texte pour l'info" ></A>

Les liens mail :

<A HREF="mailto:votrepseudo@votredomaine.com">cliquez ici pour m'envoyer un mail</A>

Code sensiblement identique à l'insertion des autres liens avec toutefois, la seule différence est la variation se trouvant entre les guillemet avec l'ajout de : mailto: (ne pas oublier les ":" !!!)

 Il est également possible de définir, à l'avance, le sujet du mail que la personne va vous envoyer... Pour cela                   utiliser l'attribut suivant :

<A HREF="mailto:votrepseudo@votredomaine.com?subject=ici votre sujet">cliquez ici pour m'envoyer un mail</A>

-Ce post sera mis à jour au fur et à mesure si besoin... -

 

[I] - Html 2 - Les images

2ème petite leçon de html - Les balises pour une image :

Pour insérer une image :

<IMG SRC="url de l'image" alt="texte ici" width="150" height="100">

Explications :

* IMG SRC="url de l'image" --> pour insérer une image
* alt="texte ici" --> pour nommer l'image, en passant le curseur de la souris sur l'image, le texte apparaitra.  Ceci n'est pas une balise obligatoire, et pour moi inutile, mais ça peut servir un jour !
* width="150" --> largeur de l'image (mettre la taille désirée...)
* height="100" --> hauteur de l'image

L'image peut ensuite être centrée en rajoutant les balises <center> avant et </center> après, ce qui donne :

<center><IMG SRC="url de l'image" alt="texte ici" width="150" height="100"></center>

Pour aligner l'image à droite, rajouter ALIGN="right" (avant la fermeture du crochet ) ce qui donne (et biensur, left pour la gauche ! :p):

<IMG SRC="url de l'image" alt="texte ici" width="150" height="100" ALIGN="right">

Pour faire bouger l'image :

à gauche --> <marquee direction=left><img src="url de l'image"></marquee><a>
à droite --> <marquee direction=right><img src="url de l'image"></marquee><a>

Et ça marche !!!!! bien sur, dans cette dernière balise ne pas oublier de préciser les tailles de l'image !!!

Pour mettre un lien sur une image :

<A HREF="url de la page où on veut aller"><IMG SRC="url de l'image" BORDER="0" WIDTH="100" HEIGHT="150"></A>

le border="0" est là pour éviter que l'image se retrouve avec un petit cadre bleu qui n'est pas forcément esthétique !...

-Ce post sera mis à jour au fur et à mesure si besoin... -

[I] - html 1 - Les balises de base

1ère petite leçon - Les balises de bases :

Balises de textes :

Mise en forme du texte :

* <B> gras </B>
* <I> italique </I>  (rmq : parfois on peut trouver <strong> gras </strong> et <em> italique </em>)
* <U> souligné </U>
* <S> rayé </S>

et biensur <B><I> gras italique </B></I> etc.... On peut tous les cumuler, ne pas oublier de refermer chacune l'une après l'autre !...

* texte ^Exposant
* texte _Indice
* <small> taille plus petite</small>
* <big> taille plus grande </big>
* <blink> clignotant </blink>

Taille et police du texte :

* <Font Size="6"> corps du texte </Font>  (de 1 à 7)
* <Font Face="Time"> police du texte </Font>
 

Balises de mise en page :

* <Br> passer à la ligne : effet cumulable (2 <br> saute une ligne)
* <P> saut de ligne : effet non cumulable

Pour <Br> jamais de balise de fermeture, pour <P> parfois nécessaire... personnellement j'utilise plus les <Br>(quitte à en mettre plusieurs) que les <P> que je n'arrive pas toujours à gérer ! à vous d'essayer et d'adopter !....

* <CENTER> texte </CENTER> pour centrer un texte
* <P align="Left"> texte à gauche </P>
* <P align="right"> texte à droite </P>
* <P align="center"> texte au centre </P>

bé oui ! en plus plusieurs balises ont le même sens !!!..... pourquoi faire simple ?!

Retrait à droite sur un paragraphe (ou bloc) :

* <blockquote> permet de mettre en retrait à droite </blockquote>

Pour mettre un texte en couleur :

* <Font color="#FF0000"> une partie du texte sera en couleur </font>

trouver le code hexadecimal de la couleur voulue

Insérer une barre de séparation :

---

<HR WIDTH=50% SIZE="5"  ALIGN=CENTER>

* HR permet la création de cette barre ;  Par défaut la ligne prend toute la largeur   de la page et possède une petite épaisseur...
* width=xx% défini la largeur de la ligne (ici 25% de la fenêtre). Si vous oubliez le "%", cela signifiera que vous voulez une ligne d'une largeur de 25 pixels :

---

        Ce qui n'est pas tout à fait pareil, vous en conviendrez !...

* Size="5" spécifie l'épaisseur de la ligne (mettre entre les ", la valeur qui vous convient.
* Align : sert à placer la ligne sur la page : center, right ou left.

On peut encore rajouter de la couleur à sa barre en rajoutant dans le code : <color="#000FFF">
(Biensur, le code hexadecimal est à choisir !) :

<HR WIDTH=50% SIZE="5"  ALIGN=CENTER color="#000FFF">

---

Pour info :

Les premières balises d'une pages html :

<HTML> --> défini le début de la page HTML
<HEAD> --> la partie définie par head est en fait le haut du navigateur (barre bleue en haut)
<TITLE> --> titre de la page </TITLE>
</HEAD> --> fin du contenu de la barre bleue !

<BODY> --> défini le corps de la page. C'est le contenu proprement dit du site, c'est la partie sur laquelle on travaille
</BODY>
<HTML> -- défini la fin de la page

On remarque toujours les balises de fermeture ! à ne pas oublier sinon, rien ne marche !!!!

-Ce post sera mis à jour au fur et à mesure si besoin... -

vendredi 21 septembre 2007

[I] - Le HTML

Le HTML C'est quoi ?
c'est tout simple, et pourtant ça parait si compliqué, et .... c'est tellement prise de tête !!!

Le html (Hyper Text Markup Language) n'est pas un langage de programmation mais un simple balisage de texte ! car l'ordinateur a besoin d'un code pour afficher ce que vous voyez à l'écran.
hé ! oui ! le html ce n'est qu'une suite de balises...
Les balises ne sont autres que les signes < et >, avec du texte à l'intérieur des crochets.

Tout ce qui est retranscrit à l'écran est donc codé.
Chaque code a sa signification et chaque chose a son code !
C'est simple non ?!

Il existe donc des balises de textes, des balises d'images, des balises de mise en pages, des balises pour les tableaux, pour les listes, etc etc etc....

Oui, mais voilà ! chaque code est stricte, on ne peut bien entendu pas écrire n'importe quoi, et chaque "virgule", "paranthèse", "point virgule" et autres signes ont leur importance et c'est là que c'est prise de tête... mais alors vraiment prise de tête !!!....... On cherche parfois pendant des heures et des heures l'erreur qu'il pourrait y avoir, et finalement, paf ! manquait juste une virgule, et oh ! miracle, ça marche !!......

Dans la majorité des cas, il y a une balise d'ouverture et une balise de fermeture défini par le signe / , afin de préciser le début et la fin de l'ordre. Exemple : <B> le texte entre ces deux balises sera en gras !</B>

Un guide trés pratique et trés facile pour aller plus loin : ICI

Je suis incapable de mémoriser toutes ses balises ! faut être ouf pour retenir tout ça ! alors j'ai toujours mon petit papier où tout y est écrit scrupuleusement à la virgule près... mais voilà, je perds souvent mon petit papier !!!..... alors je vais ranger ici tout ça, et puis.... pratique, y'aura plus à se prendre la tête parce que j'ai oublié en recopiant d'insérer un espace ou autre, je n'aurais qu'un copie coller à faire.....
et donc biensur, toutes les balises qui seront ici auront été (autant que possible) vérifiées au préalable de leur efficacité !.....

Vous n'avez plus qu'à vous servir !!.....

Tout ça pour quoi ? bé parce que pour faire un joli blog, en mettant les mains dans le cambouis, bé faut connaitre un minimum de Html... sinon, on s'en sort pas du tout !......

Bon courage si vous voulez vous y mettre !! ^^