Introduction HTML/CSS
L’apprentissage du HTML et du CSS est difficile, mais il ne doit pas nécessairement l’être. Dans ce cours je vais vous guider dans tout, à partir de la sélection d’un bon éditeur de texte (ce qui est étonnamment important) pour créer des pages Web à part entière et de qualité professionnelle à partir de rien.
Si vous faisez l’effort de suivre chaque section et d’écrire chaque extrait de code, ce cours vous permettra d’être autonome quand à la création d’un site Web.
L’objectif de ce cours est de partir de zéro et de vous amener à un niveau nécessaire pour créer un site web de façon autonome même si vous n’avez jamais écrit une ligne de HTML ou CSS.
Au travail !
HTML, CSS, & JavaScript
HyperText Markup Language (HTML), les feuilles de style en cascade (CSS) et JavaScript sont des languages qui s’exécutent sur le Web. Ils sont très étroitement liés, mais ils sont également conçus pour des tâches très spécifiques. Comprendre la façon dont ils interagissent vous permettra de devenir un développeur web. Nous allons appronfondir ces notions tout au long de ce cours, mais l’essentiel est:
– HTML est pour ajouter du sens au contenu brut en le balisant.
– CSS est destiné à la stylisation de ce contenu balisé.
– JavaScript nous aide à rendre interactif le contenu et le style de nos page web.
Pensez à HTML comme le texte brut et les images derrière une page Web, CSS comme la page qui s’affiche réellement, et JavaScript comme le moyen de manipuler HTML et CSS.
Par exemple on peut définir un paragraphe de texte avec le code HTML suivant
<p id="some-paragraph">Ceci est un paragraphe</p>Puis on peut définir la taille et la couleur du texte de ce paragraphe avec du CSS :
p {
font-size: 20px;
color: blue;
}Si on veut être taquin, on peut réécrire le paragraphe quand l’utilisateur clic dessus avec le language javascript :
var p = document.getElementById('some-paragraph');
p.addEventListener('click', function(event) {
p.innerHTML = 'Vous avez cliquez !';
});Comme vous pouvez le voir, HTML, CSS et JavaScript sont des langages totalement différents, mais ils travaillent de concert. La plupart des sites Web reposent sur les trois, mais l’apparence de chaque site Web est déterminée par HTML et CSS. Cela fait de ce cours un excellent point de départ pour votre parcours de développeur Web.
La maitrise des languages HTML et CSS n’est que la base de la fabrication d’un site Web.
D’autres cours avec d’autres professeurs élargiront vont compétences dans les différents domaines nécessaire à la fabrication d’un site web :
– Organiser le HTML au sein de différent template
– Installer un serveur web
– Déplacer vos fichier de votre serveur local à votre serveur web
– Revenir à une version précédente quand on s’est trompé (git)
– Faire pointer un nom de domaine vers un serveur
– Etc ….
Publication Web
À l’époque de la presse à imprimer originale, les imprimeurs créaient des documents en disposant des caractères métalliques, en les plongeant dans l’encre et en les pressant sur un morceau de papier.
À bien des égards, c’est exactement ce que font les développeurs Web, sauf qu’au lieu d’organiser des caractères mobiles, ils écrivent du HTML et du CSS. Nous sommes concernés par la même tâche qu’eux: transmettre du contenu de manière significative. Nous traitons même les mêmes problèmes de présentation qu’eux, comme la sélection de la police à utiliser, la définition de la taille des en-têtes et la détermination de l’espace entre les lignes de texte.
Les imprimeurs avaient l’habitude d’imprimer un tas de pages et de les relier dans un livre. De nos jours, nous créons un tas de fichiers HTML et les lions ensemble dans un site Web. L’apprentissage du HTML et du CSS consiste à comprendre le balisage HTML et les règles CSS disponibles pour qu’un navigateur affiche ces fichiers exactement comme ils sont censés être.
Nous allons apprendre les fondamentaux du HTML et du CSS. Une fois que nous aurons c’est fondamentaux nous pourrons nous orienter vers un framework nous permettant de coder plus vite nos pages. Il en existe de nombreux, entre autres Boostrap, ZURB foundation, Pure CSS pour n’en nommer que quelques uns.
Editeur de code et Navigateur
Pour ce cours, un éditeur de texte et un navigateur Web décents sont tout ce dont vous avez besoin. Votre flux de travail de base consiste à écrire du code dans votre éditeur de texte, puis à l’ouvrir dans un navigateur Web pour voir à quoi il ressemble. Au fur et à mesure que vous commencez à créer vos propres sites Web, vous finirez par ajouter d’autres outils à votre boîte à outils, mais il est important de commencer avec un minimum et de bien apprendre les principes de base du HTML et du CSS.
Vous pouvez choisir parmi plusieurs éditeur de code. Les bons sont livrés avec des fonctionnalités qui vous permettent d’écrire du code plus rapidement que vous ne le pourriez normalement, comme les balises à saisie automatique, le saut dans votre texte et la navigation dans votre système de fichiers. Pour ma part je vous conseille visual studio code mais vous pouvez utiliser un autre éditeur comme Atom, Sublime Text, ou Brackets par exemple.
Il vous faut utiliser un navigateur Web à jour et utilisé par le grand public. Chrome et Firefox sont les favoris des développeurs Web. Safari fonctionne également si vous utilisez OS X. Nous vous suggérons fortement de ne pas créer de sites Web avec Internet Explorer.
Nous allons donc installer visual studio code et chrome si cela n’est pas déjà fait.