Invité Bienvenu(e) à toi parmi nous !!!
 
AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Partagez | 
 

 [HTML] Les bases du HTML - partie 2 : la span

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage

Invité
avatar

MessageSujet: [HTML] Les bases du HTML - partie 2 : la span   Lun 8 Juil - 19:49

Bonjour les gentils petites quiches ! :3

Vous étiez nombreux à m'applaudir pour mon premier spectacle, voici le deuxième intitulé, la span ! Very Happy*s'y croit trooop !* ^^
(attention, ce chapitre est plus court ! ^^)

Bon, vous avez appris à faire de jolie petits carrés autour du texte, mais maintenant il faut faire beau le texte.
On se sert des span pour faire un formatage DANS une div. Attadez pas si vite, je vais vous expliquer...

je reprends l'exemple du précédant tuto :

je crois que c'était comme ça. Enfin je sais plus. Off' pis c'est pas grave ça ira très bien comme ça ! Very Happy


Je veux mettre le "je sais plus" en cyan, pour bien le faire ressortir. Et bien on va caler une span dans le texte en utilisant "color" comme pour la div (certaines propriétés sont identiques.)

Code:
<div style="background:red;color:white;width:400px;height:50px;border:solid 5px green;">je crois que c'était comme ça. Enfin <span style="color:cyan">je sais plus</span>. Off' pis c'est pas grave ça ira très bien comme ça ! :D</div>
ce qui donne :
je crois que c'était comme ça. Enfin je sais plus. Off' pis c'est pas grave ça ira très bien comme ça ! Very Happy


Pas mal non ?
Donc, maintenent je veux surligner le "pas grave" car, il faut le dire, c'est le plus important dans la phrase. Pour cela, on va utiliser comme pour la div, la propriété "background" suivit de la couleur en anglais.

je crois que c'était comme ça. Enfin je sais plus. Off' pis c'est pas grave ça ira très bien comme ça.

Code:
<div style="background:red;color:white;width:400px;height:50px:border:gren 5px solid;">je crois que c'était comme ça. Enfin <span style="color:cyan">je sais plus.</span> Off' pis c'est<span style="background:yellow">pas grave</span> ça ira très bien comme ça.</div>
compris ?
On ne voit plus rien du coup... On va mettre le texte en bleu. Comme la div, on peux superposer les propriétés :

je crois que c'était comme ça. Enfin je sais plus. Off' pis c'est pas grave ça ira très bien comme ça.

Code:
<div style="background:red;color:white;width:400px;height:50px:border:gren 5px solid;">je crois que c'était comme ça. Enfin <span style="color:cyan">je sais plus.</span> Off' pis c'est<span style="background:yellow;color:blue">pas grave</span> ça ira très bien comme ça.</div>
Aahh, on voit plus clair comme ça !! Wink

Je voudrais la dernière pharse en tout petit, et dans une police différente. C'est simple, on utilise "font-size" pour la taille et "font-family" pour la forme. En règle général, "font" est pour la police d'écriture.

je crois que c'était comme ça. Enfin je sais plus. Off' pis c'est pas grave ça ira très bien comme ça.

Code:
<div style="background:red;color:white;width:400px;height:50px:border:gren 5px solid;">je crois que c'était comme ça. Enfin <span style="color:cyan">je sais plus</span>. <span style="font-size:10px;font-family:Courier New">Off' pis c'est<span style="background:yellow;color:blue">pas grave</span> ça ira très bien comme ça.</span></div>
Voili voiluu !! ^^
N'hésitez pas à me demander quelque chose, si vous n'avez rien compris ou si vous voulez plus d'infos... :flower:

Et merci à Alouqua pour m'avoir appris toutes ces belles choses !! <3 Allez jeter un coup d'oeil sur son site alouqua-world.forumactif.com !! Like a Star @ heaven 


Dernière édition par Rumas le Sam 14 Sep - 19:10, édité 8 fois
Revenir en haut Aller en bas
Messages Messages : 1809
Liberty'Point Liberty'Point : 5022
Localisation : Moselle

MessageSujet: Re: [HTML] Les bases du HTML - partie 2 : la span   Mar 9 Juil - 8:10

Encore un très bon tutoriel qui permet dans apprendre plus sur le codage. Merci !




Mon Smiley:
 


Ma Signature:
 
Revenir en haut Aller en bas
Voir le profil de l'utilisateur

Invité
avatar

MessageSujet: Re: [HTML] Les bases du HTML - partie 2 : la span   Mar 9 Juil - 9:01

Mais je n'ai pas terminé ! ^^
Revenir en haut Aller en bas
Messages Messages : 2041
Liberty'Point Liberty'Point : 6066
Age : 18

MessageSujet: Re: [HTML] Les bases du HTML - partie 2 : la span   Mar 9 Juil - 9:51

Rumas si ta pas terminé j'attend de voir tout moi ^^


Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://libertypub.topsujet.com

Invité
avatar

MessageSujet: Re: [HTML] Les bases du HTML - partie 2 : la span   Mar 9 Juil - 11:46

J'avais pas eu le temps !! :p Mais ça y est, c'est fini !! :p
Revenir en haut Aller en bas
Messages Messages : 109
Liberty'Point Liberty'Point : 3189

MessageSujet: Re: [HTML] Les bases du HTML - partie 2 : la span   Mer 10 Juil - 14:48

Oh, c'est bien!
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Messages Messages : 2041
Liberty'Point Liberty'Point : 6066
Age : 18

MessageSujet: Re: [HTML] Les bases du HTML - partie 2 : la span   Mer 10 Juil - 18:38

je veux la suite ^^


Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://libertypub.topsujet.com

Invité
avatar

MessageSujet: Re: [HTML] Les bases du HTML - partie 2 : la span   Lun 15 Juil - 0:24

Bonsoir,

Pas mal aussi cette explication Rumas je vois que tu apprends vite cependant pour bien préciser les choses  la balise span est inline, elle s'inscrit dans le flux du contenu, peut être répartie sur plusieurs lignes.
On ne peut lui spécifier une hauteur ni une largeur ni l'entourer d'une marge.
Elle peut être placée à l'intérieur d'un paragraphe pour délimiter une partie de celui-ci sans affecter en soi l'apparence du texte.

Cordialement
Idiscut
Revenir en haut Aller en bas

Contenu sponsorisé


MessageSujet: Re: [HTML] Les bases du HTML - partie 2 : la span   

Revenir en haut Aller en bas
 

[HTML] Les bases du HTML - partie 2 : la span

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» Afficher un code HTML sur une page html créé.
» centrer mon contenu (html)
» Supprimer les erreurs HTML
» Html ne marche pas
» validation de mon forum avec un fichier html

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: AIDES AUX FORUMS :: Tutos Codages-