AccueilAccueil  Dernières imagesDernières images  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  


 
Le deal à ne pas rater :
Coffret dresseur d’élite ETB Pokémon EV06 Mascarade Crépusculaire
56.90 €
Voir le deal

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

Nerone Jelkins
Citoyen


Messages : 299
Date d'inscription : 14/01/2014
Fiche : NERO — boisson, amour et chocolat

Infos
Points de vie:
Le HTML pour les nuls Left_bar_bleue8/10Le HTML pour les nuls Empty_bar_bleue  (8/10)

Le HTML pour les nuls Empty
Nerone Jelkins - Le HTML pour les nuls
Message Sujet: Le HTML pour les nuls   Le HTML pour les nuls 1450534713-ug-03-iconshorloge Jeu 22 Mai - 14:19

Salut !
Alors, je vais donc parler des bases du html,et uniquement du html. Donc le css, les pages html et le reste ne sera pas présent ici!

I. LE HTML
Pour commencer, du html, pour aller vite, c'est une balise, un bloc, nommé div. Ca s'ouvre, et ça se ferme. On l'écrit de cette façon :
Code:
<div style="propriétés;"></div>
On peut parfois également voir la balise span qui est utilisée pour les textes. De même, ça s'ouvre et ça se ferme.
Code:
<span style="propriétés;">le texte</span>
Personnellement, j'utilise peu les span, parce que c'est capricieux et que les div marchent souvent aussi bien. Enfin bon, revenons-en à nos moutons.

Dans une div, on ajoute des propriétés. Comme noté plus haut, on fait ça comme ça:
Code:
<div style="propriétés; propriétés;">

Des propriétés, on peut en mettre autant qu'on veut. Elles sont séparées par un point virgule ( ; ). Après avoir mis style, on met des guillements (") et après avoir mit toutes nos propriétés, on ferme ces guillemets.

Pour commencer, nous allons créer un bloc, donc une div. Nous allons lui donner une largeur (width) et une hauteur (height).  Par exemple, je vais faire un bloc de 200*320. Pour ces deux propriétés, il faut noter un nombre suivit (généralement) de px (pixels).
Code:
<div style="height: 320px; width: 200px;"></div>
Si vous essayez ... Eh bah on voit rien. Normal, on a juste défini une hauteur et une largeur. Mais si  on met du texte dans la div, le texte ne dépassera pas les 200px de largeur (mais il dépassera en hauteur si vous en mettez trop, c'est comme ça).
Maintenant, on va mettre un fond (background). La propriété background est suivie du nom d'une couleur, d'un code couleur hexadecimal, ou d'un code en rgba. Les noms de couleurs s'écrivent en anglais, et les codes héxadécimaux sont composé d'un dièse et de cinq nombres. Exemple : #FFFFF (qui est du blanc.) ; #00000  (qui est du noir.) Je ne parlerai pas du rgb parce qu'on en a pas besoin dans notre cas.
Code:
<div style="height: 320px; width: 200px; background: #9FFF8C;"></div>
ah bah là, ça se voit. J'ai maintenant une boite très moche. Et maintenant, si je veux mettre beaucoup de texte, je fais comment ?


Si je veux mettre beaucoup de texte, on peut soit agrandir la boîte, soit la laisser s'ajuster seule (il suffit de retirer le height), soit d'ajouter une scrollbar. J'ai pas d'exemple en  image, donc vous verrez.
Pour ça, on utilise la propriété overflow. Voici quelques exemples :
Spoiler:
Nous allons donc utiliser overflow: auto;.
Code:
<div style="height: 320px; width: 200px; background: #9FFF8C; overflow: auto;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
Vous voyez, c'était pas compliqué !

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Bon, maintenant, on sait faire une boite basique avec du texte dedans. Après, on peut ajouter de multiples propriétés supplémentaires pour que ce soit plus esthétique, on peut empiler des boîtes dans des boîtes, mais ça, c'est votre imagination qui vous le dira.
Maintenant, je vais parler un peu des polices.

II. LES POLICES
Pour ma part, même avec les polices, j'utilise des div. Vous pouvez utiliser des span si vous voulez, après c'est chacun son truc. Les span fonctionnent de la même façon que les div. Étant donné que vous devriez savoir utiliser des div, je vais simplement vous lister les propriétés basiques.
Spoiler:
Voilà, vous connaissez à présent la base de la base des polices en html.

III. BRIC À BRAC
Oui, maintenant je vais lister des propriétés un peu en vrac, histoire que vous vous débrouillez.
les bordures:
les arrondis:
défilement:
Les images:
UC:

Ce topic pourra être mis à jour dès l'ajout de propriétés.

rodrakaset product


Le tuto sur le CSS/HTML est en cours de rédaction!

Revenir en haut Aller en bas
 

Le HTML pour les nuls

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

 Sujets similaires

-
» Le Français pour les Nuls
» Les jets de dés pour les Nuls
» Les catégories d'armes pour les Nuls
» Les titres c'est pour les faibles
» On est la pour boire un coup ? } OZ

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
-