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 HTMLPour 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:
- visible, c'est à dire qu'on verra tout ce qui dépasse.
- hidden, si ça dépasse, ça sera caché.
- scroll, dans tous les cas, on aura une barre de défilement horizontale et verticale.
- auto, on aura une barre de défilement horizontale ou verticale si besoin.
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:
font-family sert à déterminer la police utilisée.
font-size sert à modifier la taille du texte.
color sert à modifier la couleur du texte.
text-shadow ajoute une ombre au texte. on l'écrit : text-shadow: NOMBREpx NOMBREpx NOMBREpx COULEUR; - décallage de hauteur en px, décallage en vertical de px, taille de l'ombre en px, couleur de l'ombre.
Voilà, vous connaissez à présent la base de la base des polices en html.
III. BRIC À BRACOui, maintenant je vais lister des propriétés un peu en vrac, histoire que vous vous débrouillez.
- les bordures:
Utilisées sur des blocs, on l'écrit border: NOMBREpx STYLE COULEUR;
Les styles existants :
- dotted (pointillé)
- dashed (tirets)
- solid (solide)
- double (double)
- groove (rainurée)
- ridge (relief)
- inset (relief intérieur)
- outset (relief extérieur)
On peut ne mettre qu'une seule bordure en mettant, par exemple, border-left:
- les arrondis:
Pour arrondir des coins d'une boite par exemple, on utilise la balise border-radius. On peut l'écrire de deux façons différentes :
- border-radius: 20px; <-- tous les coins seront arrondis
- border-radius: 0px 20px 10px 5px; <-- La 1ère valeur correspond au coin haut gauche, puis on tourne dans le sens des aiguilles d'une montre.
- défilement:
Je ne m'y connait pas plus que ça, mais on utilise la balise
MARQUEE. exemple :
- Code:
-
<MARQUEE direction="left"> mon texte laala</maquee>
- Les images:
Pour ajouter une image en html, on utilise ce code :
- Code:
-
<img src="URLDEL'IMAGE">
On peut ajouter des propriétés à l'image (coins arrondis, bordures, etc) en ajoutant style.[code]
- UC:
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!