SHAPING THE PAGE I
Hello everyone,
Long time no speak right? Well, I am back now!
If you remember last time, I introduced you to how to shape the page with <head>, <title>, <body> and <p>. You can obviously do more than this simple distinction between each section and add a little twist to it!
Today, I wanted to show you four elements that will help you shape and style your page: title size, text link, image link, lists.
Today, I wanted to show you four elements that will help you shape and style your page: title size, text link, image link, lists.
Bonjour tout le monde,
Cela faisait longtemps que l'on ne s'était pas vu n'est-ce pas? Et bien je suis de retour maintenant!
Si vous vous souvenez de la dernière fois, je vous avais introduits sur la mise en page avec <head>, <title>, <body> et <p>. Vous pouvez bien sûr faire plus que cette simple distinction entre chaque section et y ajouter un peu plus de cachet!
Aujourd'hui, je voulais vous montrer quatre éléments qui vous aideront à donner forme et style à votre page: taille du titre, lien de texte, lien d'image, listes.
Title Size - Taille du Titre
You can give your title six different sizes: 1 is the biggest and 6 the smallest.
To do so, you need to insert the size it in your title’s tags as shown below:
<title><h1>Hello</title>
<title><h6>Hello</title>
Vous pouvez donner six tailles différentes à votre titre: 1 étant la plus grande et 6 la plus petite.
Pour faire ceci, vous devez ajouter la taille que vous désirez à l'intérieur des crochets du titre. Je vous montre ci-dessous comment procéder:
<title><h1>Hello</title>
<title><h6>Hello</title>
 |
| Credits: codecademy.com |
Text Link - Lien de Texte
What about creating links in your page?
When you surf on a website you always click on something that redirects you to something else on another page. This is called a link. Again, if you are a good user of the Office pack, you must know the little trick ctrl+k or cmd+k. When highlighting a word/piece of text you can nest an URL in it in order to avoid the ugly look of a long URL link in an email for example.
It is a bit complicated as you need to use two tags that are nested into each other:
<a></a> are the link tags that will enable you to redirect the clicker to somewhere else. It is the piece of text that will appear on the screen and contain the link. It is when clicking on that text that you will be redirected to the web page that has been given as a target/destination to href
<href> is the destination's URL where you want to send that person to
Sounds like a bit complicated? Follow the steps below to better understand the concept:
Text: I am French
URL: http://www.nytimes.com/2014/11/11/opinion/how-to-be-french.html?_r=0
HTML: I am <a href=”http://www.nytimes.com/2014/11/11/opinion/how-to-be-french.html?_r=0">French</a>
> Do not forget to add the equal sign at the beginning and the inverted commas at the beginning and at the end of the URL
Et si l'on créait des liens sur votre page?
Quand vous naviguez sur un site internet vous cliquez toujours sur quelque chose qui vous redirigera vers un autre endroit sur une autre page. Cela s'appelle un lien. Encore une fois, si vous êtes un bon utilisateur du pack Office vous devez être familier avec l'astuce du raccourci de lien ctrl+k ou cmd+k. En effet, quand vous surlignez un mot ou un morceau de texte vous pouvez y intégrer un lien URL pour éviter l'horrible vision d'un long lien URL dans un email par exemple.
<a></a> sont les balises de lien qui vous permettront de rediriger la personne qui clique vers un autre endroit. C'est le texte qui apparaitra sur votre écran et qui contiendra le lien. C'est lorsque vous cliquer sur ce texte que vous serez redirigé sur la page internet qui a été donnée comme cible/destination à href
<href> l'URL de destination où vous désirez renvoyer la personne
Texte: I am French
URL: http://www.nytimes.com/2014/11/11/opinion/how-to-be-french.html?_r=0
HTML: I am <a href=”http://www.nytimes.com/2014/11/11/opinion/how-to-be-french.html?_r=0">French</a>
> N'oubliez pas de mettre le signe égal au début et les guillemets au début et à la fin de l'URL
 |
| Credits: codecademy.com |
Image Link - Lien d'Image
You can also create a link through a picture.
A typical case of execution is when you are shopping online. I see something I fancy (those New Balance shoes spotted on Asos) and decide to click on the picture to know more about it. It redirects me to the product description.
Let’s see how we do this one. Beware! It adds a little bit of difficulty to the previous combination.
Vous pouvez aussi créer un lien sur une image.
Let’s see how we do this one. Beware! It adds a little bit of difficulty to the previous combination.
Vous pouvez aussi créer un lien sur une image.
Un cas typique d'exécution est lorsque vous achetez en ligne. Je vois quelque chose qui me plait (ces New Balance que j'ai repérées sur Asos) et décide de cliquer sur l'image pour en savoir un peu plus. Cela me redirige sur la description produit.
Regardons comment faire pour le lien d'image. Attention! Cette combinaison est un peu plus difficile que la précédente.
Destination: my LinkedIn profile
Vous trouvez votre page un peu en désordre et voulez créer des listes pour que cela soit plus clair.
Première option: Je veux que ma liste soit organisée et chiffrée
Regardons comment faire pour le lien d'image. Attention! Cette combinaison est un peu plus difficile que la précédente.
 |
Credits: asos.com |
You need the elements below:
<img> is the image tag as for <a>, a text tag
<src> source is equivalent to <href> which will indicate where to find the picture
Image: my picture on my LinkedIn profile
Image's URL: https://media.licdn.com/mpr/mpr/shrink_100_100/AAEAAQAAAAAAAActAAAAJDEwY2M5MDZkLThmNDYtNDhhNy1hYjFmLTlkYTQxMzlkN2FhYg.jpg
LinkedIn profile URL: Public Profilehttps://fr.linkedin.com/in/amelielefebvre
<a href=“link to where I want the person to land on”<img src=”image’s URL”></a>
<a href=“Public Profilehttps://fr.linkedin.com/in/amelielefebvre”<img src=”https://media.licdn.com/mpr/mpr/shrink_100_100/AAEAAQAAAAAAAActAAAAJDEwY2M5MDZkLThmNDYtNDhhNy1hYjFmLTlkYTQxMzlkN2FhYg.jpg”></a>
Vous avez besoin des informations suivantes:
<img> la balise de l'image comme la balise <a> pour le texte
<src> correspond à source qui équivaut à la balise <href> qui indiquera où trouver l'image
Image: la photo de mon profil LinkedIn
URL de l'image:
https://media.licdn.com/mpr/mpr/shrink_100_100/AAEAAQAAAAAAAActAAAAJDEwY2M5
MDZkLThmNDYtNDhhNy1hYjFmLTlkYTQxMzlkN2FhYg.jpg
Destination: mon profil LinkedIn
URL de mon profil LinkedIn: Public Profilehttps://fr.linkedin.com/in/amelielefebvre
<a href=“link to where I want the person to land on”<img src=”image’s URL”></a>
<a href=“Public Profilehttps://fr.linkedin.com/in/amelielefebvre”<img src=”https://media.licdn.com/mpr/mpr/shrink_100_100/AAEAAQAAAAAAAActAAAAJDEwY2M5MDZkLThmNDYtNDhhNy1hYjFmLTlkYTQxMzlkN2FhYg.jpg”></a>
 |
| Credits: codecademy.com |
Lists - Listes
You find your page a bit messy and would like to create lists in order to make it clearer. What would you use for that? Bullet points of course!
A bit easier than the two previous ones, the tags are shown below:
Première option: Je veux que ma liste soit organisée et chiffrée
Que pouvez-vous utiliser pour y arriver? Des puces bien sûr!
Plus facile que les deux combinaisons précédentes, les balises sont ci-dessous:
First option: I want my list to be organized and have numbers in front of each line
<ol></ol> stands for Organized List
<li></li> tags that enable to mark out each point of the list
Let’s create a list of the steps I follow to write my posts:
<ol>
<li>Write what I want to share in English</li>
<li>Find the pictures I want to share</li>
<li>Translate in French</li>
<li>Read again to spot mistakes</li>
<li>Publish the post</li>
</ol>
Première option: Je veux que ma liste soit organisée et chiffrée
<ol></ol> correspond à Organized List (Liste Organisée)
<li></li> balises qui permettront de repérer chaque ligne de la liste
Créons une liste qui permet de suivre les étapes d'écriture de mes articles:
<ol>
<li>Ecrire ce que je veux partager en anglais</li>
<li>Trouver les images que je veux partager</li>
<li>Traduire en français</li>
<li>Relire pour repérer des erreurs</li>
<li>Publier l'article</li>
</ol>
 |
| Credits: codecademy.com |
 |
| Credits: codecademy.com |
Second option: I just want to draw a random list with bullet points
<ul></ul> stand for Unorganized List
<li></li> tags that enable to mark out each point of the list
What you need to learn how to code:
<ul>
<li>A computer or a laptop</li>
<li>A notepad and a pen</li>
<li>Motivation</li>
<li>Patience</li>
</ul>
Deuxième option: Je veux juste créer une liste avec des puces
<ul></ul> correspond à Unorganized List (Liste Non Organisée)
<li></li> balises qui permettront de repérer chaque ligne de la liste
Ce dont vous avez besoin pour apprendre à coder:
<ul>
<li>Un ordinateur</li>
<li>Un cahier et un stylo</li>
<li>De la motivation</li>
<li>De la patience</li>
</ul>
 |
| Credits: codecademy.com |
 |
| Credits: codecademy.com |
To be continued in the next episode, Amélie X
La suite au prochain épisode, Amélie X
0 commentaires: