SHAPING THE PAGE II
Hello Friday readers! Bonjour lecteurs du vendredi!
It is now time to see what else we can do to shape and style your page. Today is all about the <style> attribute. We have seven elements to review plus a little bonus or maybe two...
Il est maintenant l'heure de voir ce que nous pouvons faire de plus pour styliser votre page. Aujourd'hui est entièrement consacré à ce que l'on appelle l'attribut <style>. Nous avons sept éléments à étudier ainsi qu'un petit bonus ou peut-être deux...
1. What is the style attribute? Qu'est-ce que l'attribut style?
The 'style' attribute is the key word you need to write between other tags in order to activate it and style the page: <p style="blablabla">
L'attribut 'style' est le mot clef que vous devez écrire à l'intérieur d'autres balises pour pouvoir l'activer et styliser la page: <p style="blablabla">
2. Font size - Taille de police
Very simple combination: <p style="font-size:12px">
p: paragraph
style: indicates an attribute change
font-size: font size change
12: size of the font
px: unit of the size, the pixel
Combinaison assez simple: <p style="font-size:12px">
p: paragraphe
style: indique un changement d'attribut
font-size: changement de la taille de police
12: taille de la police
px: unité de la taille de police, le pixel
3. Colour - La couleur
You can also change the colour. To do so, just replace 'size' by 'color' (US written): <title><h2 style="font-color:red"></title>
You cannot invent the color you want but a list exists so you can refer to it: click here to access
Vous pouvez aussi changer la couleur. Pour se faire, vous n'avez qu'à remplacer 'size' par 'color' (écriture en anglais US): <title><h2 style="font-color:red"></title>
Vous ne pouvez pas inventer la couleur que vous souhaitez mais devez vous référer à une liste qui existe: cliquez ici pour y avoir accès
4. Font family - Type de police
Fancy an original font type? What you need is 'font-family' and the name of the font you want to use: <p style="font-family:arial">
Vous avez envie d'une police originale? Vous aurez besoin de 'font-family' et du nom de la police que vous voudrez utiliser: <p style="font-family:arial">
5. Background - Le fonds
You can change the background as well if you think white is too boring: <style="background-color:green">
The same list of font colours apply to background.
Vous pouvez aussi changer le fonds si vous trouvez que le blanc est vraiment trop ennuyeux: <style="background-color:green">
La liste de couleurs disponibles est la même que pour les polices d'écriture.
6. Text alignment - Justification de texte
You can align your text as you would do in any of the Office pack programs: left, right, centre. Here is the combination: <style="text-align:center">
Vous pouvez aussi aligner votre texte comme dans les programmes du Pack Office: gauche, droite, centre. Voici la combinaison: <style="text-align:center">
7. Your font in bold or italic - Votre police en gras ou italique
Now that we used different attributes to style the font, we can highlight words by putting them in bold and/or italic.
- Bold: <strong></strong>
- Italic: <emphasize></emphasize>
Maintenant que nous avons utilisé différents attributs pour styliser la police, nous pouvons aussi mettre en évidence certains mots en les mettant en gras et/ou italique.
- Gras: <strong></strong>
- Italique: <emphasize></emphasize>
8. What about multiple attributes at the same time? - Et si l'on veut mettre plusieurs attributs en même temps?
Now that you know what style you want to give your page you can write it in one simple tag.
Let's say I want to write in courier - 22 pixels - black - yellow background and one word in bold: <style="font-family:courier;font-size:22px;font-color:black;background-color:yellow>
The only thing you need to do is add a semi colon between each attribute.
Maintenant que vous savez quel style vous souhaitez donner à votre page, vous pouvez l'écrire en un seul tag très simple.
Disons que nous souhaitons écrire en courier - 22 pixels - noir - fonds jaune et un mot en gras: <style="font-family:courier;font-size:22px;font-color:black;background-color:yellow>
La seule chose à faire est d'ajouter des points-virgules entre chaque attribut.
2 commentaires: