Formation SNT Thème : LE WEB

02 - LE WEB : Initiation HTML-CSSSommaire :

1 - Activité d'introduction : l’interprétation du navigateur

2 - Premiers pas en HTML : comment coder un hyperlien ?

3 - Créer une première page HTML basique

4 - Utilisation du CSS

5 - Modification d'une page Web

Complément 1 : Quelques informations sur l'encodage

Complément 2 : Créer son propre lien vers Trinket

Complément 3 : Travailler sans connexion Internet

Complément 4 : Créer intégralement une page – Savoir se documenter

Complément 5: Un site pour tout tester et valider

1

Formation SNT Thème : LE WEB

Activité 1 : activité préalable : « Comprendre l’interprétation du navigateur »

Avant même de toucher à un ordinateur…

Situation : Classe complète ou groupe (2 élèves sont appelés au tableau)

Problème à résoudre : Imaginons que vous vouliez dicter, à un de vos camarades, du texte mais également la mise en forme de ce texte.

Le texte à dicter : (1élève dicte et l’autre écrit au tableau) Début de paragraphe Ceci est ma toute première page Web. Je viens de passer à la ligne. Fin deparagraphe Début de paragraphe Maintenant je vais faire un autre paragraphe. Fin de paragrapheDébut de paragraphe Je vais maintenant écrire bleu en bleu fin bleu puis revenir en couleur pardéfaut . Fin de paragraphe

Le constat : Difficile à interpréter ! On ne peut pas différencier facilement les instructions de mise en forme et le texte que l’on veut voir écrit.

Une solution possible : Reprenons maintenant le même texte mais cette fois-ci en balisant (marquant) les instructions en les mettant entre deux caractères facilement repérables < et > :

<Début de paragraphe>Ceci est ma toute première page Web. <Passer à la ligne> Je viens depasser à la ligne. <Fin de paragraphe> <Début de paragraphe> Maintenant je vais faire un autreparagraphe. <Fin de paragraphe><Début de paragraphe> Je vais maintenant écrire <bleu> en bleu<Fin bleu> puis revenir en couleur par défaut. <Fin de paragraphe>

Ceci est ma toute première page Web. Je viens de passer à la ligne. Maintenant je vais faire un paragraphe. Je vais maintenant écrire en bleu puis revenir en couleur par défaut.

Vous venez de comprendre qu’en « balisant », on peut organiser facilement le texte. C’est un peu la même chose avec le langage H.T.M.L. qui permettra à un texte de devenir interprétable par les navigateurs.

2

Formation SNT Thème : LE WEB

Activité 2 : Premiers pas en HTML : comment coder un hyperlien ?

0101 – Aller sur wikipédia et chercher la page présentant le html. Sélectionner avec la souris uniquement le texte langage de balisage .

0202 – En utilisant un clic droit et en sélectionnant Code Source de la sélection ou Inspecter, vous devriez obtenir ceci :

<a href="/wiki/Langage_de_balisage" title="Langage de balisage">langage de balisage</a>

On voit clairement que le code ne comporte pas uniquement le texte sélectionné (langagede balisage) mais également d'autres indications. Le navigateur fournit un visuel en fonctionde ce code source qu'il interprète : c'est un bout de ce code source que vous avez sous les yeux.

On voit qu'on parvient à séparer

• le texte ( langage de balisage ) à afficher de

• l'utilité qu'on lui donne ( un lien vers /wiki/Langage_de_balisage )Le HTML est un langage descriptif : c'est le langage qu'on doit utiliser pour faire comprendre aunavigateur ce qu'on veut précisément qu'il fasse. On explicite les éléments à afficher en utilisantdes balises (tags en anglais). Les balises sont en rouge dans ce document.

On entoure le texte : <a>langage de balisage</a>

• d'une balise ouvrante ( <a> ) puis

• de la balise fermante ( </a> ) correspondante, qui comporte un / en plus .On utilise les chevrons < et > pour indiquer au navigateur qu'il a affaire à une balise.

La balise a permetpermet d'indiquer qu'il faut créer un lien. La lettre . La lettre a signifie anchor ou ancre.

La balise d'ouverture peut contenir des éléments descriptifs supplémentaires. Dans le cas des balises a, on peut fournir la destination du lien à l'aide de

• l'attribut href , suivi • du caractère = , suivi• de l'URL de la destination (entre deux guillemets, c'est une chaîne de caractères).

<a href="/wiki/Langage_de_balisage">langage de balisage</a>

L'URL est visiblement /wiki/Langage_de_balisage

3

Formation SNT Thème : LE WEB

Cette URL est clairement incomplète : il n'y a pas de nom de site !

La présence de / indique qu'il s'agit d'une adresse absolue : cela veut dire qu'on donne le chemin àsuivre en partant de la source située à gauche. Or, comme on n'indique pas de site, c'est qu'il s'agit dusite qui a fourni la page : fr.wikipedia.org.

Remarque : title="Langage de balisage" n'a rien à voir non plus avec l'affichage direct, onvoit qu'il y a une majuscule. Cet attribut permet de rajouter un texte au survol du lien par la souris.

0303 – Sur quelle page va-t-on aboutir en cliquant sur langage de balisage ? Vérifiez en l'utilisant.

L'URL est /wiki/Langage_de_balisageNous sommes sur fr.wikipedia.org.En l'utilisant, on obtient ceci dans la barre d'adresse :https://fr.wikipedia.org/wiki/Langage_de_balisage

0404 – Sélectionner le texte d'un des liens. En utilisantun clic droit, sélectionner Examinerl'Elément ou Inspecter.

0505 – Faire un double-clic sur le mot Informatique dans l'inspecteur. Modifier l'adresse fournie derrière href. Par exemple, href="/wiki/Chat".

Attention, nous ne venons pas de modifier la page de Wikipédia, ce serait de la dégradation !

La page HTML originelle est toujours fournie à l'identique.

Le code que vous venez de modifier est simplement le code local que votre navigateur est entrain d'analyser et qui est stocké sur votre ordinateur après son envoi par le serveur de Wikipédia.

Le code que vous voyez apparaître est donc le code html stocké sur votre ordinateur.

Maintenant que nous avons vu l'intérêt des balises, il nous reste à créer une page simple.

4

Formation SNT Thème : LE WEB

Activité 3 : Créer une première page HTML basique

0101 – Utiliser le lien suivant pour vous connecter sur trinket : https://trinket.io/html/fc2c81f15esolution via iframe : https://formation.infoforall.fr/structure.html

Dans le cadre de cette formation, trinket va vous permettre de taper des lignes de code ou les modifier etvoir le résultat sans avoir à installer d'éditeur de texte. Une fois à l'aise avec le HTML et le CSS, vouspourrez choisir d'installer un éditeur de texte. Nodepad++ ou SublimText sont des choix potentiels.

Une page vide à l'affichage pourrait contenir ceci :

<!DOCTYPE html><html>

<head></head>

<body></body>

</html>

0202 – Dans index.html, utilisez les petits signes au niveau des lignes 3 et 8 pour cacher le contenu de cesdeux balises. Quelles sont les balises contenues entre la balise <html> d'ouverture et la balisede fermeture </html> ?

On voit que <html> contient deux balises :

• une balise <head>

• une balise <body>

La première ligne <!DOCTYPE html> permet de signaler que le document est réalisé en HTML. Ils'agit d'une balise particulière : elle est dite orpheline car elle ne comporte pas de balise defermeture.

La balise <html> contient l'intégralité du document.

La balise <head> va contenir des données qu'on veut transmettre au navigateur mais qui ne seront pas affichées sur la page : la langue utilisée, le titre à mettre sur l'onglet du navigateur, l'encodage (lafaçon dont on associe caractère à afficher et nombre placé en mémoire) …

La balise <body> va contenir ce qu'on désire voir s'afficher sur la page.

Remarque : la notion de balises contenues intégralement dans d'autres balises est extrêmementimportante. Pour visualiser facilement ce qui est contenu dans quoi, on utilise le système de tabulation.Ainsi, on voit bien que <head> est contenue dans <html> car <head> est tabulée vers la droite parrapport à <head>.

On remarquera également que la balise de fermeture </head> est au même niveau que la balised'ouverture.

Regardons maintenant un peu le code fourni dans index.html

5

Formation SNT Thème : LE WEB

0303 – Dans l'onglet du fichier index.thml, supprimer les balises <p> d'ouverture et de fermeture </p>tout en laissant le contenu des lignes 10 et 11.

Vous devriez obtenir ceci :Vers les liens <a href="liens_html.html">HTML</a>Vers les liens <a href="liens_perso.html">SNT</a>

Actualisez le code si aucune modification ne survient à l'écran.

0404 – Que constate-t-on au niveau des passages à la lignes ?

La lettre p veut dire paragraphe.Les balises p provoquent un passage à la ligne avant le texte et après le texte contenu entre <p> et </p>.On dit que c'est une balise block : son utilisation provoque un passage à la ligne.

Un deuxième type de balise est le type inline : ces balises ne provoquent pas de passage à la ligne.

0505 – Dire si les balises de titre (header) <h1> et les balises d'ancre <a> sont de type block ou inline.

La balise <h1> provoque un passage à la ligne. Il s'agit d'une balise block.La balise <a> ne provoque pas de passage à la ligne. Il s'agit d'une balise inline.

0606 – Tester les liens présents sur le document hypertexte. Comme il s'agit d'une exécution via trinket, ilest possible que certains sites ne puissent pas s'afficher dans l'iframe. Il faudra alors cliquer surAutorun ou Click ton Run pour revenir en arrière et faire un clic-droit sur le lien de façon à utiliserOuvrir dans une nouvelle fenêtre.

Sur le code des deux autres pages, vous pourrez voir la présence de la balise (orpheline) image : <img />

Cette balise attend un attribut src pour source : on doit fournir l'adresse de l'image voulue.

0707 – Les adresses des images sont-elles des adresses relatives ou absolues ?

src="python.jpg" est donné sans / : il s'agit donc de l'adresse relative au fichier html lui-même sur le serveur. L'image est dans le même répertoire que le fichier html.

0808 – Modifier l'une des adresses d'image en lui fournissant une adresse absolue d'images obtenues surun autre site. N'utilisez pas cette façon de faire sur votre futur site : utiliser les ressources duserveur d'un autre site n'est pas très poli...

Remarque:Trinket a l'avantage de la facilité. Rajouter des images sur leur serveur nécessite simplement d'avoir un compte. Il faut un simple email pour le créer.

Pour en apprendre plus sur les balises HTML, une simple recherche sur un moteur de recherche vous permettra certainement de trouver une réponse.

Les sites proposés dans le fichier liens_html.html sont de bonnes sources par exemple.

6

Formation SNT Thème : LE WEB

Activité 4 : Utilisation du CSS

0101 – Utiliser le lien suivant pour vous connecter sur trinket : https://trinket.io/html/fc2c81f15esolution via iframe : https://formation.infoforall.fr/structure.html

0202 – Vérifier la présence d'un fichier nommé mesgouts.css

Ce fichier comporte du code CSS : il s'agit d'instructions destinées au navigateur pour qu'il sache commenton désire afficher les différents éléments.

Pour l'instant, il n'est absolument pas utilisé par le navigateur car on lui a pas indiqué d'aller le lire. Pourcela, il va falloir lui en donner l'ordre dans la balise <head> de la même façon que la balise <title> parexemple.

Nous allons lui dire de faire le lien entre notre fichier html et le fichier css à l'aide d'une balise qui se nomme <link> :

<head><meta charset="utf-8" /> <title>HTML</title><link rel="stylesheet" href="mesgouts.css" />

</head>

Comme vous constatez, on donne l'adresse du fichier avec l'attribut href. On donne la nature du fichier àl'aide de l'attribut rel. Stylesheet se traduit bien entendu par feuille de style.

0303 – Rajouter la ligne <link rel="stylesheet" href="mesgouts.css" /> au bon endroit dans le fichier liens_perso.html. Constat sur l'affichage ?

0404 – Faire de même sur les deux autres pages HTML dont vous avez le code.

Moralité : nous avons réussi à créer une unité de ton sur nos trois pages en utilisant un seul fichiercommun de configuration graphique : le fichier CSS(Cascading Style Sheets ).

0505 – Notre ensemble de fichiers forme un site dit statique. Faire bouger la souris sur la page. Statique veut-il dire que le site ne possède pas d'éléments mouvants ?

Statique fait référence au fait que le codes HTML et CSS sont toujours fournis à l'identique par le serveurHTTP qui les transmet. Sur un site dynamique, le serveur peut recevoir des données, lire des donnéesdans sa propre base de données et renvoyer un code HTML ou CSS différents en fonction de la façon dontil a été programmé. L'une des activités fournies traite du cas du PHP par exemple.

Comment utiliser le CSS ? C'est relativement simple à comprendre lorsqu'on a le code sous les yeux.

0606 – Ouvrir l'onglet mesgouts.css. Observer le code pour tenter d'en voir la structure.

En voici un extrait :

a {color:yellow;font-size:x-large; /* ou small, x-small, x-large, medium, ... */

}

7

Formation SNT Thème : LE WEB

On donne d'abord le nom d'une balise html. Ici a.Cela veut dire que nous allons changer certaines des propriétés d'affichage de ces balises.Lesquelles ? Celles fournies entre l'accolade d'ouverture { et l'accolade de fermeture }.

Les propriétés à modifier seront placées dans ce bloc {-} et indentées de façon à rendre le code plus clair.

Chaque modification est codifiée de la même façon :• on donne le nom de la propriété• on place un double-point pour indiquer la nouvelle valeur de la propriété (et pas =)• on donne la nouvelle valeur de la propriété• on place un point-virgule pour indiquer la fin de la modification sur cette propriété

a {color:yellow;font-size:x-large; /* ou small, x-small, x-large, medium, ... */

}

Ici, on utilise donc des balises a dont • le texte sera en jaune : color:yellow;• les caractères sont de taille x-large : font-size:x-large;

Dernière remarque : on peut placer des commentaires en utilisant /* puis */. Le texte situé entre les deux sera alors uniquement destiné au lecteur humain du code.

0707 – Modifier le code pour que les liens apparaissent en orange et en encore plus grand.

a {color:orange;font-size:xx-large; /* ou small, x-small, x-large, medium, ... */

}

Le CSS permet également de gérer des conditions. Par exemple, nous voulons modifier les apparenceslorsqu'on survole une balise. On utilise alors : et on utilise le mot-clé hover qui veut dire flotter (au dessus).

a:hover {background-color:yellow;color:black;

}

0808 – A votre avis, à quoi correspond l'attribut background-color ? Arrangez-vous pour créer une unité decouleur avec le lien lorsqu'il n'est pas survolé.

Il correspond à la couleur de fond.a:hover {

background-color:orange;color:black;

}

Remarque : vous pouvez voir qu'il existe une autre façon de fournir les couleurs en donnant trois composants : le rouge, le vert et le bleu. Cette méthode sera vue dans la partie photographie.Ici dans h1, on a : color:#333333;Cela veut dire qu'on a une intensité rouge de 33 (valeur comprise entre 00 et FF en hexadécimal)

8

Formation SNT Thème : LE WEB

Idem pour le vert et le bleu.On obtient ainsi du gris foncé.Le noir est codé par #000000 ou #000 de façon simplifiée.Le blanc est codé par #FFFFFF ou #FFF de façon simplifiée.

De nombreux sites proposent de visualiser les couleurs obtenues par une association RGB en hexadécimal. Un exemple parmi d'autres : https://htmlcolorcodes.com/fr/

Imaginons maintenant qu'on veuille reproduire sur la page d'accueil lebloc bleu regroupant plusieurs paragraphes :

0909 – Modifier la balise p pour que le fond soit bleu (par exemple #0000FF). Regarder la page d'accueil.Ca fonctionne ?

Et ça ne fonctionne pas. Il reste du gris entre les paragraphes !

Pour parvenir à englober tout à la fois, nous allons utiliser une balise générique de type block : la balisediv. Cette balise n'a aucun sens sémantique, elle n'a pour but que de regrouper certaines balises en vu deleur appliquer un CSS commun.

Ici, l'effet obtenu à gauche et l'effet voulu à droite :

1010 – Supprimer la couleur de fond de la balise p. Observer le code de liens_html.html. Modifier le codeHTML de index.html de façon à obtenir l'affichage de droite.

<body><h1>Accueil</h1><div>

<p>Vers les liens <a href="liens_html.html">HTML</a></p> <p>Vers les liens <a href="liens_perso.html">SNT</a></p></div>

</body>

Pour en apprendre plus sur le CSS et tester les modifications en direct, vous pouvez utiliser le site de W3Schools par exemple.

1111 – Pour montrer la puissance du CSS aux élèves, vous pouvez aller sur ce site : http://www.csszengarden.com/

Les onglets permettent de changer le fichier CSS utilisé. Vous pouvez leur montrer que le code entre<body> et </body> ne change absolument pas alors que le site change radicalementd'apparence.

9

Formation SNT Thème : LE WEBActivité d'introduction possible devant les élèves ? : observation avec les DEBOGUEURS des navigateurs du CSS pour faire la différence entre HTML (HyperText Markup Langage) et CSS (Cascading Style Sheet)

On observera ici que le contenu (le texte) des pages reste identique. L’organisation et l’apparence de ce contenu changent. Pour cela , tester les différents menus (marge de droite) de ce site http://www.csszengarden.com/tr/francais

Constat :Le contenu encadré par des balises HTMLne change pas.La mise en forme change, c’est le rôle du CSS (Cascading Style Sheets).

- Utiliser le Débogueur des navigateurs web pour voir l’organisation de cette page Web :

Sous Chrome : Clic droit sur la page puis InspecterSous Firefox : Clic droit sur la page puis Code source

- Observer les balises qui encadrent les contenus : Structure de la feuille HTML :

L’en-tête : <head>…(métadonnées)... <\head>

Le corps de page : <body> (le contenu à publier) <\body>

Une balise « conteneur » : <div class= “….” id=”.…” > ……….. <\div>

- Modifier un élément de la page :

Changer le titre de cette page directementà partir de la console (double clic sur CSS Zen Garden)et observer l’effet immédiat sur la page Web

Mise en forme du contenu de la page :

- Cliquer sur

Puis passer la souris sur les différents textes de la page WEB et observer les différentes « boites » CSS et leur organisation.

- Modifier la couleur d’un écrit (ou sa taille) (double clic sur la valeur)

Plus d’infos sur les débogueurs des navigateurs :https://openclassrooms.com/fr/courses/1916641-dynamisez-vos-sites-web-avec-javascript/2724891-deboguer-votre-code-partie-1-3

10

Zone instructions HTML

Zone instructions CSS

Formation SNT Thème : LE WEB

Activité 5 : Modification d'une page Web

En utilisant les fonctionnalités de développement Web de Firefox (menu-développement Web) ou Chrome (menu-plus d'outils-outils de développement), vous pouvez inspecter le HTML et le CSS des pages que vous visitez. Vous pouvez donc adapter l'activité à la page de votre choix.

Le travail consiste à modifier une page dont on dispose du code en langage HTML5-CSS3.

Principe et consigne unique : L'élève dispose du code HTML et du code CSS. Il doit maintenantcompléter et adapter le texte et les photos à ses besoins et modifier le CSS pour placer des couleursdifférentes par exemple. Le code HTML et le code CSS sont trouvables à l'adresse suivante :

https://formation.infoforall.fr/cv.html

Cette activité pourra être réalisée en autonomie avec une aide en ligne :

https://www.w3schools.com/html/default.asp

11

Formation SNT Thème : LE WEB

Complément 1 : Quelques informations sur l'encodage

Vous pourriez croire que votre fichier HTML est constitué de texte.Mais ce texte est en réalité stocké en mémoire sous forme d'une succession d'octets. Un texte est donc uniquement constitué d'un ensemble de nombres variant de 0 à 255.

Lorsque vous tapez du texte, l'éditeur de texte utilise donc une méthode particulière pour transformerchaque caractère en nombre. Cette opération s'appelle l'encodage.

En ASCII, le texte ABCabc est en réalité stocké sous la suite d'octets suivante : 65 66 67 97 98 99 Pour plus d'informations sur cette table de conversion, faire une recherche sur ASCII.

L'ASCII était l'une première façon d'encoder les caractères. Mais il en existe bien d'autres depuis.L'un des standards actuels est l'UTF-8. L'ancien standard sur Windows était le windows-1252.

Lorsque vous écrivez un texte sur un ordinateur, il est donc transformé en suite de nombres en utilisantun encodage particulier. Si vous ne choisissez pas, l'application utilisera un encodage par défaut.Parfois UTF-8, mais parfois un autre ...

Le problème vient des caractères spéciaux, notamment les caractères accentués.Avec windows-1252, le caractère é est encodé avec un octet valant 233.Avec UTF-8, le caractère é est encodé avec deux octets valant 195 169

Imaginons que votre éditeur de texte travaille en UTF-8. Vous voulez afficher« écrit »

é c r i t

195.169 99 114 105 116

Quel est le problème pour ce client HTTP ?

Il reçoit uniquement des octets : 195 169 99 114 105 116

Il va tenter de décoder. Comme vous ne lui donnez pas plus d'indication que cela, ilva choisir son encodage par défaut, qui pourrait être windows-1252 !

Mais avec windows-1252 : 195 correspond à Ã et 169 à © .

Et vous allez vous retrouver avec cet affichage sur l'écran du navigateur :

195 169 99 114 105 116 → écrit

Pour éviter ce problème, il faut donner au navigateur une information sur la façon dont le fichier HTMLqu'il reçoit a été encodé. Pour cela, on utilise simplement une balise orpheline meta qu'on place dansla balise head :

<head> <meta charset="utf-8" /> <title>Accueil HTML</title></head>

De cette façon, votre navigateur va savoir qu'il faut décoder la suite en utilisant UTF-8. Et voilà.195 169 99 114 105 116 → écrit

Référence CC de l'image by Cali Rezo is licensed under CC by-nc-nd 4.0 : https://ccsearch.creativecommons.org/photos/582d1b53-1c9c-4989-83c0-979730a941c9

12

C'est écrit en UTF-8 ?…

C'est pas faux !

Formation SNT Thème : LE WEB

Complément 2 : Créer vos propres trinkets

Le site trinket est vraiment pratique. Voici comment créer les vôtres.

1 – Créez-vous un compte.

2 – Créez un nouveau Trinket :

3 – Créez vos fichiers dans ce trinket et sauvegardez.

4 – Placez votre trinket dans un Folder (en le créant si besoin) :

5 – Rajoutez vos images éventuelles avec l'icône indiqué :

6 – Partagez votre dossier en utilisant simplement Share puis Link :

Et voilà : vous venez d'obtenir le lien vers votre page personnelle sur trinket.

Remarque : Vous pouvez utiliser également une iframe (en utilisant </> Embed) si vous savez stocker votre site sur un serveur. Cela permet d'obtenir un écran un peu plus grand.

13

Formation SNT Thème : LE WEB

Complément 3 : Travailler sans connexion Internet

Le site trinket est vraiment pratique mais encorefaut-il que la liaison Internet fonctionne.

Si vous avez un projet réalisé sur trinket, vous pouvezle télécharger en utilisant l'icône Share.

Il vous reste alors à dézipper le fichier et vousobtiendrez vos fichiers en local.

Vous pouvez ainsi cliquer sur votre fichier html, cela lancera le navigateur et ouvrira votre page. Elle n'est pas en ligne, uniquement sur votre disque dur.

Si vous voulez créer intégralement la page en local ou travailler en local en cas de panne d'Internet, il faudrait utiliser un éditeur de texte. N'importe lequel, même le bloc note.

Certains logiciels sont néanmoins plus adaptés car il possède une coloration syntaxique et différents outils bien pratiques pour les projets informatiques.

Vous pouvez ainsi télécharger et installer Notepad++ ( https://notepad-plus-plus.org/fr/ ) au préalable.

Ouvrir l’éditeur Notepad++.Sélectionner le menu Langage puis HTML : si vous

oubliez cette étape, le logiciel risque d'enregistrervotre travail en simple .txt. La tentative d'ouverturepar le navigateur va donc aboutir à l'affichage ducode car le navigateur n'interprète qu'un .html ou.htm par exemple.

Sélectionner Encodage et choisir UTF-8 (sans BOM).

Entrer le code html voulu.Enregistrer le fichier sous le nom voulu, par exemple

index.html s'il s'agit de l'accueil. Sélectionner le menu Exécution puis Firefox ou Chrome

Si vous obtenez des caractèresétranges, c'est que l'encodage choisipour le fichier HTML ne correspondpas à l'encodage indiqué dans labalise meta du fichier HTML.Exemple :

Le navigateur utilise ici uneméthode de décodage qui necorrespond pas à la méthodeutilisée pour encodé le texte.

14

Formation SNT Thème : LE WEB

Complément 4 : Créer intégralement une page

A - HTML - CRÉER LE CONTENU DES PAGES HTML . EXEMPLE DU CV

Vous pouvez tenter de recréer ceci en utilisant la documentation qui se trouve dans les pages suivantes :

15

Formation SNT Thème : LE WEB

De nombreuses balises permettent de spécifier dans quelle « catégorie » se trouve un texte.

1 - Créer un code HTML de base : voir page 5 .2 - Principe de l'activité : vous allez insérer progressivement dans body tous les éléments imposés sur la page précédente, sans positionnement et sans coloration pour l’instant… Chaque vignette est cliquable et apportera un exemple en ligne qu’il faudra adapter…

Pour vous aidez, vous pourrez utiliser l'aide en ligne W3Schools : https://www.w3schools.com/html/html_elements.asp

Voici l'ordre des choses à intégrer :

3 paragraphes ou « blocs » :

ou

Votre photo :

1 titre :

Ma scolarité au collège : 1 photo de votre collège :

Le détail de votre scolarité organisé ave une liste type puces :

6ème en 2011 5ème en 2012 4ème en 2013 3ème en 2014

Le lien hypertexte vers le site de votre collège : http://...............................

1 titre :

Ma scolarité au lycée :1 photo du lycée:

Le détail de votre scolarité organisé en tableau : Seconde En 2015Première S SVT ou SI En 2016Terminale S En 2017

Le lien hypertexte vers le site du lycée : http://...............................

1 titre :

Mes compétences informatiques : (libre)

16

Nom Prénom

Date de Naissance

Adresse mail perso

Vignettes cliquables !

Formation SNT Thème : LE WEBB - LA MISE EN FORME DE l’HTML LES FEUILLES DE STYLE CSS

Préambule : Exemple à revoir éventuellement :Nous avons vu que le langage à balises HTML permettait de créer des contenus de documents interprétables par les navigateurs Internet. La mise en forme de ces pages va se faire en CSS.

Aide à utiliser pour la suite : https://www.w3schools.com/css/css_intro.asp

Comment obliger le contenu d’une page HTML à suivre une mise en forme CSS ?

3 possibilités :

Créer un fichier CSS séparé du fichier HTML :

Insérer le CSS en en-tête de fichier HTML :

Intégrer le CSS dans les balises du fichier HTML :

3 - Créer un fichier CSS : projet.css puis ajouter dans le fichier HTML du mini projet le lien correspondant : <link ………………………………….>

4 - Consulter les explications et exemples donnés sur le site W3schools : https://www.w3schools.com/css/css_syntax.asp

5 - Observer les différents sélecteurs utilisés : de balises, d’ id (#) ou de class (.)

6 - Faire les 4 exercices proposés en fin de page :

17

Formation SNT Thème : LE WEB

LE POSITIONNEMENT DES ELEMENTS HTML GRACE AU CSS

Il est important de comprendre que le codage CSS n’aura pas les mêmes effets sur les balises HTML selon qu’elles seront du type :

« BLOCK » (<div>, <p>, toutes les balises de type <h>,…)ou

« INLINE » (<a>, <img/>, <em>,...)

Tout contenu d'une balise HTML se représente à l'écran sous forme d'une boite.

Cette boite est composée de 3 éléments : un conteneur,

une marge intérieure (padding) et une bordure (border).

Il existe aussi une bordure externe (margin) qui ne fait pas

partie de la boite, mais qui a son importance lorsque l'on

cherche à placer les boites les unes par rapport aux autres.

Exemple de paramétrage sur W3C : (à consulter)

7 - Consulter les explications et exemples donnés sur le site W3C :

https://www.w3schools.com/html/html_basic.asp

A consulter et tester

Puis faire les 2 exercices en bas de page

A consulter uniquement et analyser !

Permet de convertir des balises de type Inline vers Block …

Et pour aller plus loin…

18

Conteneur occupé

par

Formation SNT Thème : LE WEB

« FICHE DE RENSEIGNEMENTS » MISES EN FORME CSS

Vous en savez suffisamment pour mettre en forme votre fiche de renseignements créée précédemment en HTML.

La position des différents éléments est IMPOSEE et devra être respectée.

Il sera important d’utiliser le DEBOGUEUR de Chrome ou Firefox pour visualiserles différentes boites CSS que vous allez créer et comprendre leur positionnementsur votre page WEB…

Complément 5: Un site pour tout tester et valider (pour informations)

W3C (pas W3Schools) propose des outils de validation et correction des pages ou sites Web créés.Le but est de rendre son site Web conforme aux spécifications du W3C pour en contrôler la qualité, la compatibilité avec les navigateurs et les logiciels éventuels utilisés par les personnes handicapées ( WCAG ).

Tester le code HTML : validator.w3.org/Tester le code CSS : jigsaw.w3.org/css/

Le World Wide Web Consortium, abrégé par le sigle W3C, est un organisme de standardisation à but non lucratif, fondé en octobre 1994 chargé de promouvoir la compatibilité des technologies du World Wide Web..

19