Demandez à Notepad++ de concevoir vos Sites Web (8/350): Atelier 2

23 Août 2014 , Rédigé par Zamba Synkin Publié dans #Tech' Net & Code, #e-Learning

HTML5 & CSS3: Atelier 2
HTML5 & CSS3: Atelier 2

Puisque nous avons déjà répondu aux 5 questions précédentes, eh bien, il ne nous reste plus qu'à traiter la sixième et dernière. A savoir, écrire: Bonjour à vous tous ! en HTML 5, de sorte que l'on puisse le lire avec n'importe quel navigateur (Firefox, Internet Explorer, Google Chrome, Opera, Safari, etc.).

HTML5 & CSS3: Atelier2
HTML5 & CSS3: Atelier2

Pour ce faire, il suffit de lancer Notepad++ depuis votre bureau. Ou depuis l'emplacement où vous avez rangé le raccourci du logiciel. Cette interface d'accueil n'est plus un étrange objet inconnu.

Pour rappel, la configuration de la coloration syntaxique relève du goût de chacun. Pour ma part, je remets en selle le thème khaki (que j'avais déjà configuré dans le billet précédent) juste pour gagner un peu de temps.

HTML 5 & CSS3: Atelier 2
HTML 5 & CSS3: Atelier 2

Et voilà nos premières lignes de code en HTML5. Une remarque d'importance s'impose ici. J'ai écrit HTML5 en omettant délibérément le mot CSS3 (Cascading Style sheets ou feuille de styles en français) alors qu'au début de l'Atelier j'écrivais toujours le couple HTML5 & CSS3.

Pour faire simple, nous dirons que le HTML est un langage qui permet de présenter des informations, groupées en page, sur Internet, via les navigateurs. Alors que le CSS sert à gérer l'apparence de ces informations. Dans ces lignes de code, nous n'avons utilisé que les balises HTML.

A noter que l'on peut concevoir des sites Web sans recourir au CSS, mais cela serait pour le moins couteux notamment en termes de maintenance (cela reviendrait à chasser des mouches avec un marteau piqueur), comme nous le verrons à travers une panoplie d'exemples, plus loin.

Demandez à Notepad++ de concevoir vos Sites Web (8/350): Atelier 2

Pour éviter de perdre le travail que nous venons d'accomplir en cas d'une microcoupure de courant, nous avons intérêt à le sauvegarder tout de suite.

Pour ce faire, cliquez tour à tour, sur Fichier et sur Enregistrer sous, comme dans la capture d'écran ci-contre.

Si jamais vous rencontrez le moindre problème, je vous conseille vivement de refaire, toutes les étapes, décrites dans ce tutoriel, autant de fois que nécessaire, jusqu'à parvenir aux mêmes résultats que ceux mis en ligne.

HTML5 & CSS: Atelier 2
HTML5 & CSS: Atelier 2

A l'apparition de cette boite de dialogue, d'abord, donnez un nom à votre travail. Pour ma part, je nomme le mien, Atelier_2.html. N'oubliez surtout pas de rajouter l'extension .html au nom de votre fichier. Ensuite pour l'enregistrer effectivement, cliquez sur l'onglet Enregistrer.

D'après vous, sommes-nous au bout de nos peines ? Que remarquez-vous en passant à la loupe nos premières lignes de code, notamment la ligne 7 ?

Je vous propose de traiter ces questions dans le prochain tutoriel et dans la foulée nous expliquerons la signification des balises utilisées depuis les lignes 1 à 9.

Partager cet article

Commenter cet article