FIRST STEPS IN HTML
Hello readers, Bonjour chers lecteurs,
I have worked well on learning the basics of HTML and I can share with you where I am at and also my first feedback on Codecademy.
I am currently tracking at 33% from the ‘Make a Website’ module and 22% from ‘HTML & CSS’.
J’ai pas mal avancé sur l’apprentissage des basiques du HTML et je peux dores et déjà partager avec vous où j’en suis ainsi que mes premières impressions sur Codecademy.
J'en suis à 33% du module 'Créer un Site Web' et 22% du 'HTML & CSS'.
1. Codecademy website structure - La structure du site Codecademy
So far so good. The website is very ergonomic which means it is easy to navigate through. On the screen shot below, you can see how the course’s interface is built:
- Left column: consists in explanations (theory) and instructions (exercise you need to do)
- Centre: is the screen where you code
- White right screen: results of your coding
Je n’ai pas été déçu du site jusqu’à présent. Celui-ci est très ergonomique et facile d’utilisation. Sur la capture d’écran ci-dessous, vous pouvez voir comment l’interface des leçons est créée :
- Colonne de gauche : il s’agit des explications (la théorie) et des instructions (les exercices que vous devez faire)
- Au centre : l’écran où vous codez
- L’écran blanc de droite : les résultats de votre code
 |
| Credits: codecademy.com |
When you do everything right you will have a green banner at the bottom saying you succeeded. If not, it will appear red and mention what mistakes you have done. After few tries you can check for the solution.
Once you have achieved certain levels you get badges as shown below.
If you wish to go back to previous exercises, just click to the home page and find what part you want to see again.
Quand vous exécutez tout correctement, une bannière verte indiquant votre succès apparaitra en bas de page. Si ce n’est pas le cas, celle-ci sera rouge et vous indiquera quelles sont les erreurs qui ont été commises. Après plusieurs essais vous pouvez consulter la solution.
Une fois que vous avez achevé certains niveaux vous cumulez des badges comme celui ci-dessous.
Si vous souhaitez retourner faire certains exercices, vous pouvez retourner sur la page d’accueil et cliquer sur ceux que vous souhaitez refaire.
 |
| Credits: codecademy.com |
The HTML course is built around seven units:
- Introduction to HTML
- Structure of HTML: using lists
- Structure of HTML: tables, ‘divs’ and ‘spans’
- Introduction to CSS
- CSS and IDS classes
- Positioning of CSS elements
- HTML & CSS Projects
As long as you continue to complete modules, you will receive motivating emails to keep you on the go and to discover bits and bobs of other languages.
Tip: prepare a notepad and a set of pens alongside your computer. It will help you to take notes as you may not remember everything from the first time.
Le module d’HTML est construit autour de sept unités :
- Introduction au HTML
- Structure du HTML : utiliser des listes
- Structure du HTML : tableaux, ‘divs’ et ‘spans
- Introduction au CSS
- Classes CSS et IDS
- Le positionnement des éléments CSS
- Projets HTML & CSS
Au fur et à mesure que vous complèterez les modules, vous recevrez des emails pour vous motivez mais aussi vous faire découvrir des petits aperçus d’autres langages.
Conseil : ayez un cahier et quelques stylos à côté de vous et de votre ordinateur. Cela vous aidera à prendre des notes car vous ne retiendrez pas tout du premier coup.
For now, let’s see what HTML and CSS are about.
Voyons maintenant ce que nous pouvons dire à propos du HTML et du CSS.
2. ABC of HTML & a bit of CSS - Le B.A.-BA du HTML & un peu de CSS
What is HTML?
We can explain it in two parts: what it is exactly and what it is being used for:
- First of all, HTML means HyperText Markup Language. Let’s say the web page is a human body. HTML will represent the skeleton which is the main structure of person, so of the web page
- Secondly, HTML is used as a programming language when you want the text on a web page not only to be constituted of frozen words
And CSS? It stands for Cascading Style Sheet. It is the skin and makeup of you HTML skeleton. This part will be reviewed a bit later but from now, you must be more familiar with the construction of a web page.
Qu’est-ce que le HTML?
Nous pouvons l’expliquer en deux parties : qu’est-ce qu’est le HTML et quel en est son usage :
- Premièrement, HTML signifie HyperText Markup Language. Disons que la page internet est un corps humain. Le HTML sera son squelette et lui donnera donc sa structure comme il le ferait pour un Homme
- Deuxièmement, le HTML est utilisé comme un langage de programmation pour éviter que le texte sur une page ne soit uniquement constitué de mots figés
Et le CSS ? Cela correspond à Cascading Style Sheet, qui veut lui-même dire Feuille de Style en Cascade. Cela correspond à la peau et au maquillage du squelette HTML. Je reverrai cette partie plus en détails un peu plus tard. Mais pour maintenant, vous devez être plus familier avec la construction d’une page web.
 |
| Credits: dessinemoiunsite.com |
3. First steps of the module - Premiers pas du module
I do not pretend to be a professional or Code/Programming teacher. My aim with this blog is to give you tips to learn code on your own and to share my experience. This could be happy stories of successes or struggles (luckily, I have not tested this one so far).
Je ne prétends pas être une professionnelle ni un professeur de Programmage/Codage. Le but de ce blog est de partager des conseils pour apprendre vous-même le code et pour partager mon expérience. Qu’il s’agisse de joies et succès ou de difficultés et d’échecs (jusqu’à présent pas expérimentés).
If you know a bit of websites and digital you may have heard about SEO, which stands for Search Engine Optimization. Basically, it is the engine that web browsers (Google, Yahoo, Bing…) will use to find your website/blog and reference it throughout the entire web world. These engines work based on algorithms and you can use HTML to increase your presence and be on top of the list.
Si vous connaissez un peu les sites Internet et le monde du digital, vous avez sûrement entendu parler du SEO qui veut dire Search Engine Optimization (Optimisation du Moteur de Recherche). Pour faire court, il s’agit du robot que les moteurs de recherche (Google, Yahoo, Bing…) utiliseront pour trouver votre site/blog et le référencer parmi la toile. Ces robots fonctionnent sur la base d’algorithmes et vous pouvez utiliser le HTML pour augmenter votre présence et être en haut de la liste.
To do this, you need to follow a particular structure that you would use for an essay: head, title, main parts, subtitles, subparts…
Indeed, the robot who is in charge of your page scan will pay attention to these details. Showing the robot the right information will help you to get to the best spot.
Pour faire cela, vous devrez suivre une structure particulière comme celle que vous utiliseriez pour écrire une dissertation: en-tête, titre, parties, sous-titres, sous-parties…
En effet, le robot en charge du scan de votre page fera attention à ces détails. Lui montrer la bonne information vous aidera à atteindre la bonne place.
HTML is a very strict language and does not tolerate any mistake.
Here are the basic rules you need to follow:
1. HTML uses tags: one to open < and one to close > ; if you are already familiar with Excel, it is the same system that applies to brackets. This means: if you forget one tag it won’t work.
For more clarity when you read the coding page you need to go to the next line every time you want to open a new tag. It may be laborious but trust me, if a mistake happens it will be faster to spot it.
a. When you start to code, you will always have to put this:
1st line: <!DOCTYPE html>
This is compulsory and will indicate the web browser what language it needs to use to read the page (HTML of course!)
b. 2nd line: <html>
Will show where the HTML doc starts from
Last line: </html>
Will end the HTML doc
2. 1 document = 1 head (1 title) + 1 body (paragraphs). If you think about a typical press article, here you are, same disposition.
<!DOCTYPE html>
<html>
<head>
<title>Hello everyone</title>
</head>
<body>
<p>I hope everyone is alright today</p>
<p>Let’s start an introduction to HTML</p>
</body>
</html>
As much as I would like to go a bit deeper and getting into links, font size, font type, lists… I will continue this part this week in an upcoming post.
You will have a reason to come back ;)
 |
| Credits: codecademy.com |
Le HTML est un langage très strict et ne tolère aucune erreur. Voici les règles de base que vous devrez suivre:
1. Le HTML utilise des crochets appelés ‘tags’: un pour ouvrir < et un pour fermer > ; si vous êtes déjà familier avec Excel, il s’agit du même système qui s’applique aux parenthèses. Ce qui veut dire que si vous en oubliez un tout sera faux.
Pour plus de clarté lorsque vous lisez la fenêtre de codage vous devez aller à la ligne à chaque fois que vous voulez ouvrir un nouveau crochet. Cela peut paraître laborieux de prime abord mais croyez-moi, si une erreur apparaît elle sera plus facile à repérer.
a. Quand vous commencez à coder vous devrez toujours faire ceci :
1ère ligne: <!DOCTYPE html>
C’est une étape obligatoire et cela indique au moteur de recherche quel langage il doit utiliser pour lire la page (le HTML bien sûr !)
b. 2ème ligne: <html>
Montrera où le document HTML commence
Dernière ligne: </html>
Terminera le document HTML
2. 1 document = 1 en-tête (1 titre) + 1 corps (paragraphes). Si vous pensez à un article de presse classique, vous y êtes ! C’est la même disposition.
<!DOCTYPE html>
<html>
<head>
<title>Bonjour tout le monde</title>
</head>
<body>
<p>J’espère que tout le monde va bien aujourd’hui</p>
<p>Commençons une introduction au HTML</p>
</body>
</html>
J’aimerai allez plus loin et vous montrer les liens, tailles de police, type de police, listes… Je continuerai cette partie dans un prochain post à paraître cette semaine.
Vous aurez une raison pour revenir ;)
To be continued in the next episode, Amélie X
La suite au prochain épisode, Amélie X
