Salut a tous
On se retrouve aujord'hui pour la 3eme partie du tutoriel : Apprenez le html
J'ai décidé de faire passer ce tutoriel en zone prenium, tout simplement parce que je veux que la zone prenium, car j'ai vraiment envie d'apporter ma contribution a cette zone.
Bref rentrons dans le vif du sujet
Dans la partie 2, nous avions vu comment entrer du texte, la mise en valeur et les titres
Si vous n'avez pas compris cette partie, je vous invite vivement à aller relire et surtout comprendre cette partie
Nous allons donc voir, aujourd'hui, quelques "notions" importante du html
Les images
Le html nous offre la possibilité d'inclure des images (heureusement
)
On va tout de suite voir comment sa marche
Voici la balise qui va permettre d’insérer des images : <img/>
Comme vous le voyez, il s'agit d'une balise de type orpheline
Mais ce n'est pas tout, il faut rajouter 2 attributs :
src : Cet attribut sert a indiquer ou est l'image
alt : C'est un tout petit texte indiquant la description de l'image
Comment marchent t'ils ?
C'est tres simple :
src : Il suffit de mettre mettre "l'adresse de l'image"
Il faut toujours mettre l'image dans le meme dossier que votre site web, sinon cela ne marchera pas
Il y a une autre facon de faire, mais celle la est plus pratique
alt : Il suffit simplement de rentrer votre texte descriptif
ATTENTION
Toujours mettre des guillemets quand vous rentrer le texte descriptif du alt, et l'adresse de l'image du src
Voila comment se presente en gros une balise <img/>
Imaginons que veuille insérer une image ou il y a un paysage, je l'ai donc enregistré sous le nom de paysage.jpg
Ma balise ressemblera donc a sa :
On se retrouve aujord'hui pour la 3eme partie du tutoriel : Apprenez le html
J'ai décidé de faire passer ce tutoriel en zone prenium, tout simplement parce que je veux que la zone prenium, car j'ai vraiment envie d'apporter ma contribution a cette zone.
Bref rentrons dans le vif du sujet
Dans la partie 2, nous avions vu comment entrer du texte, la mise en valeur et les titres
Si vous n'avez pas compris cette partie, je vous invite vivement à aller relire et surtout comprendre cette partie
Nous allons donc voir, aujourd'hui, quelques "notions" importante du html
Les images
Le html nous offre la possibilité d'inclure des images (heureusement
)On va tout de suite voir comment sa marche
Voici la balise qui va permettre d’insérer des images : <img/>
Comme vous le voyez, il s'agit d'une balise de type orpheline
Mais ce n'est pas tout, il faut rajouter 2 attributs :
src : Cet attribut sert a indiquer ou est l'image
alt : C'est un tout petit texte indiquant la description de l'image
Comment marchent t'ils ?
C'est tres simple :
src : Il suffit de mettre mettre "l'adresse de l'image"
Il faut toujours mettre l'image dans le meme dossier que votre site web, sinon cela ne marchera pas
Il y a une autre facon de faire, mais celle la est plus pratique
alt : Il suffit simplement de rentrer votre texte descriptif
ATTENTION
Toujours mettre des guillemets quand vous rentrer le texte descriptif du alt, et l'adresse de l'image du src
Voila comment se presente en gros une balise <img/>
Imaginons que veuille insérer une image ou il y a un paysage, je l'ai donc enregistré sous le nom de paysage.jpg
Ma balise ressemblera donc a sa :
HTML:
<img src="paysage.jpg" alt="quel beau paysage :o"/>Comme un exemple vaut mieux que du bla bla, voici un code
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Titre</title>
</head>
<body>
<h1> Bienvenue sur mon site web </h1>
<p> Voila comment inserer une image</p>
<img src="paysage.jpg" alt="quel beau paysage :o"/>
</body>
</html>Ce qui donne comme resultat :
Les liens
On va donc maintenant apprendre a insérer des liens
Un lien, qu'est ce que c'est ?
C'est tout simplement un lien vers une autre page
Pas compris ?
Voila qu'est ce qu'un lien :
Voila, si je clique sur eurosport, cela me rédigera vers le site eurosport
Comment faire ? Tres facile
Il faudra utiliser la balise paire : <a> </a>
Ce n'est pas tout : il faudra rajouter l'attribut : href , et de mettre entre guillemets l'url du site, fermer la balise ouvrante, et mettre le texte que vous voulez. Pour mon cas, cela a été eurosport. Il suffira de fermer la balise fermante. Compris ??
Pour mon cas, avec eurosport, le code a donc été :
Code:
<a href="http://www.eurosport.fr/">Europort</a>Il y a d'autre possibilté avec cette balise :
Lien vers une autre page de son site
Il suffira d'avoir vos 2 pages de votre site dans le meme dossier (on peut faire autrement, mais pourquoi se compliquer la tache
)Supposons que m'a première page s'appelle page1.html et ma 2nd s'appelle page2.html
Donc il suffit d'aller sur page1.html mettre a coté de l'attribut href, = page2.html
Pas compris ?
Voila un code qui devrait vous éclaircir :
Code:
<p>Voulez vous visiter la <a href="page2.html">la page 2</a> ?</p>C'est simple comme bonjour
Les ancres
Les ancres qu'est ce que c'est ?
C'est tout simplement un lien vers une partie de notre site
Exemple :
Si je clique sur équitation, cela m’amènera directement sur la partie equitation
Comment faire ?
Il suffit de, à l'attribut href, de mettre un #ancre par exemple, et de par exemple a la balise titre, de mettre en attribut id="ancre"
Bon, j'avoue que mon explication est un peu tiré par les cheveux donc voila un exemple :
Les ancres
Les ancres qu'est ce que c'est ?
C'est tout simplement un lien vers une partie de notre site
Exemple :
Si je clique sur équitation, cela m’amènera directement sur la partie equitation
Comment faire ?
Il suffit de, à l'attribut href, de mettre un #ancre par exemple, et de par exemple a la balise titre, de mettre en attribut id="ancre"
Bon, j'avoue que mon explication est un peu tiré par les cheveux donc voila un exemple :
Code:
<body>
<h1>Le Sport</h1>
<p>
<a href="#foot">Le foot</a><br />
</p>
<h2 id="foot">La foot</h2>
<p>blablablablablabla</p>
</body>Compris ?
Si vous cliquez sur "le foot", cela vous amènera a la rubrique foot (même si la, on n'en voit pas l'utilité, on en voit plus l'utilité dans l'image ci dessus)
Voila
Je pense avoir tout dis sur cette 3eme partie
J'ai essayé tant bien que mal de soigner la présentation et l'orthographe
J’espère que mon tutoriel vous plaira
Si il y a un point sur lequelle vous galérer, n’hésité pas a poser une question
Temps de rédaction : 1h30 Si vous cliquez sur "le foot", cela vous amènera a la rubrique foot (même si la, on n'en voit pas l'utilité, on en voit plus l'utilité dans l'image ci dessus)
Voila
Je pense avoir tout dis sur cette 3eme partie
J'ai essayé tant bien que mal de soigner la présentation et l'orthographe
J’espère que mon tutoriel vous plaira
Si il y a un point sur lequelle vous galérer, n’hésité pas a poser une question
YV
Dernière édition:
