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.
 |
Credits: codecademy.comBonus 1
Nothing explains better a product, system than a video right? So let's see how we can add one! Difficult one to do (but not too much) ;)
You need to use all the different attributes below to add the video onto your page:
- width/height: sets the size of the screen that displays the video
- controls: adds play, pause, volume
- source src: sets the URL of the video to play
- type: specifies the video format
<video width="320" height="240" controls><source src="video-url.mp4" type="video/mp4"></video>
Rien de mieux qu'une vidéo pour expliquer votre produit, système n'est-ce pas? Regardons maintenant comment pouvons-nous en ajouter une! Difficile à faire (mais pas trop quand même) :)
Vous devez utiliser les différents attributs ci-dessous pour ajouter la vidéo à votre page:
- width/height: la largeur et la hauteur de la vidéo
- controls: ajoute les boutons play, pause, volume
- source src: indique l'URL source de la vidéo
- type: indique le format de la vidéo
<video width="320" height="240" controls><source src="video-url.mp4" type="video/mp4"></video>
Bonus 2 #FAIL
Here I come with my first big fail in blogging/HTML!
You may have spotted very weird styles in my articles (you cannot anymore as I changed everything now). Different fonts, sizes, styles... Nothing consistent at all. For those who know me, I am sure you can already picture me very annoyed by this! I like to have the same shape in all the articles (who would not?).
After I spoke with my friend Beth (who knows how to code and way better than me) and explained her the situation with at least 20 texts (big SMS lover here) and a lot of angry emojis, she told me I made a huge mistake: writing my articles on Word and copy/paste them onto blogger to publish them.
Word does not use a raw text format. What is raw text? It is text in the most simple version, no style and attributes at all. When you copy/paste the text from Word, you will also copy some hidden attributes that will pretty much messes everything up in your HTML code if you are a beginner like me.
End of the story? Not that much. I had to spend 2.5 hours (luckily the Bee Gees were kind to me and played some good music in the background) copying, pasting the articles onto TextEdit-Mac (WordPad-Windows) and put 'Default' in the Style tab so everything went back to normal. Then, pasted the articles back to Blogger and restyled them again.
I hope this made you laugh because I did not!
I am just happy I could solve the problems myself!
I am a big believer that you can make mistakes as long as you quickly learn from them and find a solution to solve the problem ;)
Me voilà avec mon premier bel échec en blog/HTML!
Vous avez certainement du voir des styles très bizarres dans mes articles (enfin vous ne pouvez plus maintenant car j'ai déjà tout changé). Des polices, tailles et styles différents... Rien de consistant. Pour ceux qui me connaissent, je suis sûre que vous me voyez déjà très ennuyée par ce problème! J'aime avoir le même style dans tous mes articles (qui ne voudrait pas d'ailleurs?).
Après avoir discuté avec mon amie Beth (qui sait coder et beaucoup mieux que moi) et lui avoir expliqué la situation avec au moins 20 messages (je voue une passion à l'envoi multiple de SMS) et pas mal d'emojis pas très contents, elle m'a indiqué que j'avais fait une erreur assez grossière: écrire mes articles sur Word et les copier/coller sur Blogger pour ensuite les publier.
Word n'utilise pas de texte brut. Qu'est-ce que tu le texte brut me direz-vous? Ce sont des mots dans leur version la plus simpliste avec aucun style et sans aucun attribut. Lorsque vous copiez/collez le texte de Word, vous copierez aussi des attributs cachés qui mettront le bazar partout dans votre code HTML si vous êtes un débutant comme moi.
Fin de l'histoire? Pas vraiment. J'ai passé 2.5 heures (heureusement que les Bee Gees étaient là à jouer de la bonne musique dans le fonds) à copier, coller les articles sur TextEdit-Mac (WordPad-Windows) et mettre 'Défault' dans l'onglet Style afin que tout redevienne normal. Et ensuite, j'ai recollé les articles dans Blogger et les ai restylisés.
J'espère que cette petite histoire vous aura fait rire car moi pas!
Je suis juste contente d'avoir pu résoudre le problème moi-même!
Je suis plutôt partie prenante de faire des erreurs du moment qu'on apprend rapidement d'elles et que l'on trouve des solutions au problème ;)
Here you are for today! Come back next week for new discoveries on trends and how to code in HTML. Have a lovely weekend!
Et voilà pour aujourd'hui! Revenez la semaine prochaine pour de nouvelles découvertes sur les tendances et comment coder en HTML. Passez un excellent week-end!
To be continued in the next episode, Amélie X
La suite au prochain épisode, Amélie X |
Accroche toi Amélie!! C'est super!! Je vais parler de ton expérience à mon speech chez Publics le vendredi 2 septembre... attends toi à avoir une montée significative de followers ;-)
RépondreSupprimerYou rock!!!!!
Merciiiii Aurélie! Je continue sur ma lancée :) x
RépondreSupprimer