OUTILLES PERFORMANTS POUR WEBMASTER

devenir webmaster cours html

Afin de débuter dans le HTML, vous trouverez ci-dessous les balises de bases à retenir.

GRAS : <b> </b> ou <strong> </strong> Exemple

ITALIQUE : <i> </i> Exemple

SOULIGNE : <u> </u> Exemple

RAYE : <strike> </strike> Exemple

CENTRER : <center> </center>

PARAGRAPHE : <p> </p>

SAUT DE LIGNE : <br>

TRAIT HORIZONTAL : <hr>

TAILLE DE POLICE : <FONT SIZE=?></FONT>

COULEUR DE POLICE : <FONT COLOR="#$$$$$$"></FONT>

PARAGRAPHE : <P></P>

ALIGNEMENT DU TEXTE : <P ALIGN=LEFT|CENTER|RIGHT></P>

REGROUPEMENT DE BALISE <span></span>

Pour ce tutoriel nous allons apprendre à déterminer la taille d'un texte. Les balises nécessaires pour exécuter cet exercice sont les balises <span> </span>
Nous verrons par la suite que grâce à la balise span on peut regrouper plusieurs mises en formes telles que la couleur, la police etc..

Pour l'heure nous allons nous baser uniquement sur la taille de la police. Pour débuter ce tutoriel voici en exemple une phrase avec la taille de police modifiée :
C’est un chat au corps moyen à petit, modérément trapu et musclé, solide et élégant.

Voici comment se présente les balises html pour arriver à faire ceci :
<span style="font-size: 20px;">C’est un chat au corps moyen à petit, modérément trapu et musclé, solide et élégant.</span>

Quelques petites explications sur ces balises :
- La balise <span> est la balise d'ouverture.
- La balise style est celle qui permet de donner le style d'écriture désirée.
- La balise font-size détermine la taille de la police.
- 20px est la taille de police que nous avons choisi. px voulant dire pixel
- Le ; est à placer dans le cas où il y aurait d'autres informations à donner sur la mise en forme du texte.
- La balise </span> est la balise de fermerture.

Exercice 1 : Pour ce premier exercice je vous demande de mettre en taille 22px le mot suivant : chat

Exercice 2 : Pour le deuxième devoir, nous allons un peu compliquer les choses. Copiez-collez le texte ci-dessous :

Citation:

Le Singapura n’est pas un chat très loquace. Il est plein d’affection avec toute sa famille et demande en retour beaucoup de preuves d’amour.Le Singapura est très sociable avec les autres chats qu’il initie à ses jeux particuliers.

Pour cet exercice je vous demande de mettre les noms d'animaux en tailles 20px et les noms Singapoura en taille 22px.

Merci de séparer vos deux exercices afin de les départager en mettant exercice 1 et exercice 2.
Pour ce cours nous allons apprendre à rendre une adresse mail cliquable. Très pratique pour les formulaires contact afin de permettre à vos visiteurs de vous contacter au plus vite.

Pour faire ceci il vous suffit d'utiliser les mêmes balises pour rendre un lien cliquable en ajoutant la mention mailto. Les balises seront donc à placer ainsi :
<a href="mailto:>sanguie-112@hotmail.com>C<sanguie-112@hotmail.com>C/a>

Visuellement cela vous donnera ceci :

sanguie-112@hotmail.com>C conseil en passant. Si vous utilisez des adresses mail tel que hotmail, évitez d'afficher directement l'adresse et placez plutot un texte du genre contactez le webmaster. Cela vous évitera des ajouts intempestifs sur votre liste de contact.

En exemple mettez votre code plutôt ainsi:
<a href=mailto:sanguie-112@hotmail.com>Contactez le webmaster</a>

Exercice:

Pour cet exercice vous allez faire en sorte de rendre une adresse mail cliquable. Merci de ne pas utiliser votre propre adresse afin d'éviter de vous retrouver avec du courrier non voulu.
Pour ceux qui n'aurait pas d'idée voici une adresse mail à titre d'exemple:
>CPetit

Pour ce cours nous allons tracer un trait horizontal en html. Cette méthode s'avère très pratique pour séparer deux paragraphes ou plusieurs informations sur une page web.

La balise utilisée pour faire ceci est la suivante : <hr>
Voici ci-dessous ce que cela donne :

---

Ce tutoriel très simple est déjà fini mais avant de le quitter faisons un petit exercice :

Faites un copier-coller du texte ci-dessous en réponse pour faire votre exercice.

Citation:

Chasse à l’ours en Sibérie En août 2008, une vingtaine d’ours bruns affamés, à la recherche de nourriture dans les zones habitées, ont été abattus dans la région sibérienne de Krasnoïarski. (source : l’agence de presse Itar-Tass). un cas qui n’est pas isolé. En 2007, j’avais écrit un article sur la situation des ours au Kamtchatka : http://www.aves.asso.fr/article514.html Face à l’explosion de la chasse aux trophées, protéger les noyaux d’ours bruns en Europe demeure donc primordial... Sylvie CARDONA

Les indications pour faire ce devoir

Informations : Ne changez pas la mise en forme du texte ni les espaces entre les paragraphes

- Centrez le titre ainsi que le nom de l'auteur en fin de texte
- Mettez en gras le nom de l'auteur
- Mettez en couleur verte le titre et soulignez-le. Code couleur verte #079516
- Mettez en couleur rouge les dates contenues dans ce texte (mois et année). Code couleur rouge #ff0000
- Repérez l'adresse url contenue dans ce texte et faites un lien vers ce site, en l'ouvrant dans une nouvelle fenêtre. Il ne devra être visible que l'indication AVES FRANCE
- Mettez en gras tous les animaux cités dans le texte titre y compris
- Mettez en italique tous les nom de lieu contenu dans ce texte titre y compris (pays, ville etc.)
- Séparez chaque paragraphe par un trait horizontal
_________________
Bon courage!!!
Pour ce cours nous allons apprendre à insérer un lien dans une image.
Les balises employées pour ce tutoriel sont :

- <a href="adresse url de la page"> est utilisé pour l'insertion d'un lien et sera obligatoirement fermé par la balise </a>

- <img src="url de l'image"> est la partie utilisée pour afficher l'image.
- N'oublions pas la balise border="0" qui servira à éviter un encadrement autour de l'image affichée.

Comme pour le cours précédent nous pouvons utiliser deux méthodes différentes :

1ère méthode : Image avec lien s'ouvrant dans une nouvelle fenêtre.

Pour insérer un lien dans une image qui s'ouvrira dans une nouvelle fenêtre nous allons utiliser les balises suivantes:
<a href="adresse url de la page"target="blank"><img src="url de l'image"border="0"></a>

target="blank" est la balise employée afin d'ouvrir une nouvelle fenêtre vers le lien que vous aurez choisi.

Voici un exemple pour insérer un lien dans une image:

Lien utilisé: http://www.pc-design-67.com
Lien de l'image:
http://www.e-monsite.com/s/2008/10/18/pc-design/83325716banniere-pc-design-468x60-gif.gif

<a href="http://www.pc-design-67.com"target="blank"><img src="http://www.e-monsite.com/s/2008/10/18/pc-design/83325716banniere-pc-design-468x60-gif.gif"border="0"></a>

Ce qui donne en visuel:


En cliquant sur la bannière vous accédez au site pc-design en ouvrant une nouvelle fenêtre.

2ème méthode : Image avec lien s'ouvrant sur la même fenêtre.

Cette solution est parfaite si vous dirigez vos visiteurs sur les pages de votre site ou forum. Par contre si le lien dirige vers un lien externe votre visiteur quittera votre site.

Pour insérer un lien dans une image qui s'ouvrira sur la même fenêtre nous allons utiliser les balises suivantes:
<a href="adresse url de la page"><img src="url de l'image"border="0"></a>

Seule différence entre ce code et le précédent c'est que la balise target="blank" n'existe plus.

Voici un exemple pour insérer un lien sur une image:

Lien utilisé: http://www.pc-design-67.com
Lien de l'image:
http://www.e-monsite.com/s/2008/10/18/pc-design/83325716banniere-pc-design-468x60-gif.gif

<a href="http://www.pc-design-67.com"><img src="http://www.e-monsite.com/s/2008/10/18/pc-design/83325716banniere-pc-design-468x60-gif.gif"border="0"></a>

Je ne peux malheureusement vous montrer ce que cela donne en visuel étant donné que j'ai désactivé le html de mon message afin de vous permettre de visualiser les codes.

Information : Il existe une nuance sur le net du code pour ouvrir le lien sur la même fenêtre que vous pourrez rencontrer lors d'échanges de lien entre vous et un top site ou encore pour les annuaires. En effet nous pouvons également voir le code affiché ainsi :
<a href="adresse url de la page"target="new"><img src="url de l'image"border="0"></a>

Exercice 1 :

Pour ce premier exercice je vous demanderai d'utiliser l'image que je vous donne ci dessous et d'insérer un lien s'ouvrant dans une autre fenêtre vers le site que je vous fourni :

Lien de l'image: http://s1.e-monsite.com/2008/07/05/6460126boutonannuaire-gif.gif

Lien vers le site: http://www.manimalworld.net/annuaire.html


Exercice 2 :

Pour ce deuxième devoir je ne vous donne aucun exemple. Prenez une image de votre choix (taille maximale 550*400) et insérez un lien vers le site ou forum de votre choix, en restant dans la même fenêtre.

Merci de respecter la taille maximale indiquée de votre image. Une simple petite banniere ou bouton suffira pour l'affichage. Les images trop grandes seront refusées et le devoir sera bien entendu à refaire.
Pour ce cours nous allons apprendre à aligner un texte. L'alignement est important pour une bonne cohérence de vos pages ainsi qu'une bonne lecture de celui-ci.

Pour faire un alignement il faut utiliser les balises suivantes :
<P ALIGN=LEFT|CENTER|RIGHT></P>

Information :

L'appelation left signifie gauche, right=>droite et center=>centrer.

Remarque : par défaut, quand vous tapez un texte en utilisant n'importe quel traitement de texte, ce que vous tapez est habituellement aligné à gauche par défaut.


Pour démarrer, voici les trois exemples en application :

1) Texte aligné à gauche : C'est sans aucun doute la méthode la plus utilisée sur le net car il est prouvé que le lecteur lit et retient mieux les textes alignés à gauche. En pratique cela donne ceci :

<p align="left">J'aligne mon texte à gauche</p>

En visuel :

2) Texte aligné à droite : Le texte aligné à droite est moins courant mais utile si vous désirez placer vos images sur la gauche donc les rendre plus visibles. En pratique cela donne ceci :

<p align="right">J'aligne mon texte à droite</p>

En visuel:

3) Texte centré :

Pour centrer votre texte il y a la balise <center> que vous connaissez déjà. La deuxième méthode est d"appliquer la balise <p align="center">. Cette méthode permet de faire un espace entre deux paragraphes tandis que la balise <center> réduira l'espace entre deux paragraphes. Voici donc la deuxième méthode en pratique :

<p align="center">Pour centrer un texte cette balise est tout aussi bien que l'autre</center></p>

En visuel :

Vous remarquerez que contrairement aux balises right et left, la balise center devra être obligatoirement fermée si vous ne désirez pas que le reste de votre texte soit centré.

4) Justifier son texte :

Cette méthode d'alignement est moins courante que les autres. Elle consiste à aligner votre texte de façon à ce que les marges pour chaque ligne soit égales à droite et à gauche de votre texte.

En pratique voilà ce que cela donne :

<p align="justify">A l’instant du basculement des chiffres, je songe au temps qui passe</p>

Pour cette méthode vous n'aurez besoin que de mettre la balise </p> pour refermer. En titre d'exemple et pour ne pas allonger inutilement le tutoriel, voici le lien d'un site utilisant ce système d'alignement pour justifier ses textes. Cliquez sur le mot ci-dessous pour accéder au site en question et d'avoir un exemple de texte justifié :

Passons maintenant au devoir.

Exercice 1 : Nous allons vous demander d'utiliser le mot chat et de le placer dans un premier temps à gauche puis ensuite à droite et enfin de le centrer (en utilisant la balise <p align="center"></center>)

Exercice 2 : Pour ce deuxième devoir vous devez choisir un mot que vous allez utiliser pour :

- le mettre à gauche en italique souligné
- le mettre à droite en gras et en couleur bleu (#0000ff)
- Le centrer en italique souligné en gras et en couleur bleu (#0000ff).

Pour exemple voici ce qui vous est demandé dans ce deuxième exercice :