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

1 Septembre 2014 , Rédigé par Zamba Synkin Publié dans #Tech' Net & Code, #e-Learning

HTML5 & CSS3: Atelier 2 (suite)
HTML5 & CSS3: Atelier 2 (suite)

Pour rappel, dans le billet précédent nous étions sur le point de sauvegarder les premières lignes de code HTML que nous avons écrites.

Je vous propose d'aller jusqu'au bout de notre démarche (le nom étant déjà choisi: atelier_2.html). Pour ce faire, il suffit de cliquer sur l'onglet Enregistrer, comme dans la Figure ci-contre.

HTML 5 & CSS3: Atelier 2 (suite)
HTML 5 & CSS3: Atelier 2 (suite)

Il s'ensuivra l'affichage de Notepad++ avec les codes sources. Que relevez-vous au premier coup d’œil ? Une panoplie de choses nouvelles, me répondriez-vous.

Dont acte. Dressons ensemble la liste des nouvelles choses que nous avons sous les yeux:

  • Le nom du fichier atelier_2 avant la ligne 1;
  • Des mots bizarres (tags ou balises) avec lesquels vous n'êtes pas familier (du moins pas encore) depuis la ligne 1 jusqu'à la ligne 9 !
Atelier 2 (suite). Rendu sous FireFox
Atelier 2 (suite). Rendu sous FireFox

Voyons ce que donne le rendu visuel de ces codes dont nous ignorons presque tout sous le navigateur Firefox (le principe sera identique sous les autres navigateurs). Eh bien, il faut d'abord cliquer sur Exécution de la barre de menu et puis sur Launch in Firefox.

Atelier 2 (suite): Rendu visuel sous Firefox
Atelier 2 (suite): Rendu visuel sous Firefox

La première question qui vous vient à l'esprit est, je prends le pari, celle-ci: pourquoi le à s’affiche en majuscule alors que le reste du texte est écrit correctement ?

Eh bien, ma réponse est une boutade qui tient dans un tweet: quand vous avez un conflit avec un ordinateur, sachez pour votre gouverne que l'ordinateur a toujours raison ! Autrement dit, si le texte ne s'est affiché correctement, le nœud du problème est à chercher de notre côté.

Atelier 2 (suite): Rendu visuel sous Firefox
Atelier 2 (suite): Rendu visuel sous Firefox

A preuve: si nous avions fait les bons réglages, notre n'aurions aucune mauvaise surprise et donc notre texte se serait affiché comme suit.

Je vous propose donc de procéder à ces réglages et, dans la foulée, expliquer le plus simplement du monde, les lignes 1 à 7. Ce faisant, nous allons commencer à manipuler une palette de balises (tags) HTML.

Rappel: pour lire le diaporama en gros plan, faites un simple clic gauche sur une capture d'écran.

Partager cet article

Commenter cet article