Cette exercice a pour but de vous faire appréhender le langage HTML et le rôle du CSS

Cette page Web que vous créerez ne pourra être vue que sur votre poste, car pour qu'elle soit visible sur le Web, il faut souscrire un abonnement chez un hébergeur de sites Web.

INTRODUCTION :

Pour créer un véritable site Web, il y a en fait 3 façons :

- Les éditeurs de site web en ligne. C'est un pack tout compris, en ligne. Les plus connus sont Wix, Site123, Jimbo et Weebly....

Il est aussi possible de faire un petit site simple avec Google Sites (sans abonnement, juste avec un compte Gmail)

- Les CMS, ou systèmes de gestion de contenu (Content Management System en anglais) : le principal est Wordpress qui fait tourner environ le tiers des sites en lignes, il existe aussi Joomla! et Drupal. Ils sont plus complexes à mettre en oeuvre.

- Faire soi-même son site en écrivant les pages en HTML, CSS, JavaScript (un éditeur libre existe : Brackets http://brackets.io/) et souscrire un abonnement auprès d'un hébergeur de site Web.

Vous allez tester la troisième méthode (sans abonnement à un hébergeur!), avec des exemples simples, pour comprendre le langage HTML et le rôle du CSS.

--------------------------------------------------------------

HTML (Hypertext Markup Language) n'est pas un langage de programmation comme Python, c'est un langage de description de page Web que votre navigateur (Firefox, Chrome, Explorer/Edge, Opera, Safari...) va interpréter pour afficher la page.

Quand vous voulez afficher une page web (activité 2), votre navigateur (client) va envoyer une requête (de type HTTP) au serveur hébergeant le site voulu. Le serveur va répondre en transmettant la page web sous format HTML.

HTML peut mettre votre texte sous des formats basiques (couleur, gras, paragraphe, taille des caractères...), mais pour faire des pages plus belles visuellement, on utilise le langage CSS (dans un fichier séparé) qui permet beaucoup plus de possibilités de styles et de graphismes. (Si on veut faire une page dynamique, il faut Javascript ou PHP)

Dans un éditeur de texte, vous allez écrire le texte que vous voulez afficher sur la page Web et y ajouter des instructions encadrées par ce qu'on appelle des balises. Il y a les balises ouvrantes et les balises fermantes pour faire comprendre au navigateur comment afficher le texte.

ACTIVITÉ :

D'abord pour tester et visualiser nos expériences, nous allons utiliser le site JSFIDDLE.

Cliquez sur le lien https://jsfiddle.net/ (ne pas traduire en français )

Vous avez 4 grandes zones : HTML, CSS, Javascript et Result et en haut à gauche à côté du nuage bleu la touche RUN.

Quand vous écrivez (ou copier-coller) ou modifier dans chaque zone les lignes de langages, il faut cliquer sur RUN pour voir dans la zone RESULT ce qui s'afficherait sur votre vraie page.

Nous allons d'abord utiliser la zone HTML puis HTML et CSS (nous n'utiliserons pas Javascript )

Pour ne pas tout écrire, je vous ai joint ci-dessous un fichier avec des exemples et la retranscription des exemples du livre (activité 3) que vous pourrez copier-coller (Ctrl C et Ctrl V) dans les zones adéquates puis vous pourrez personnaliser vos pages. Changer le texte, les couleurs...

Une fois la page terminée, vous créer un fichier nommé index.html pour la partie HTML de jsfiddle et un fichier style.css pour la partie CSS de jsfiddle (des tutos sont ci-dessus)

Dans le texte de la page index.html , on fait le lien avec la feuille de style CSS en écrivant la balise

<link rel="stylesheet" href="style.css">

--oOo--

A la fin des exemples, je vous ai mis deux pages simples liées avec une feuille de style CSS

Si dans le même dossier que le fichier HTML et CSS, vous mettez un fichier image format JPEG avec le nom : mon_image.jpg , vous aurez deux pages liées dont la deuxième comporte une photo.

Il est préférable que tous les fichiers soient dans le même dossier.