Sciences numériques et technologie

Activité 1 : créer une première page web

Le but de cette première activité sera de vous faire prendre en main la base des bases du développement en HTML/CSS. Ensuite, vous pourrez vous lancer dans la création d'un site web.

Démarrage

Avant de commencer à développer, quelques obligations et conseils :

Créer un dossier dans "mes documents", qui s'appelle "SNT_HTMLCSS".
Pour coder, nous utiliserons le logiciel Notepad++. Lorsque vous ouvrirez un fichier HTML, pour pouvoir l'éditer, il faudra faire un click droit dessus et sélectionner l'option "ouvrir avec notepad++", sinon il s'ouvrira dans le navigateur (pratique pour voir le résultat, pas pour modifier la page.
Sauvegardez souvent. Très souvent. Si vous ne sauvegardez pas, vous ne verrez pas les modifications de votre page.
Visualisez votre travail. Débugger rapidement plutôt qu'avoir des bugs en cascade vous fera gagner du temps.

Maintenant, vous êtes prêt à faire votre première page web. Ouvre notepad++, enregistrez votre document vierge sous le nom "page.html", dans votre dossier "SNT_HTMLCSS". Si vous allez dans ce dossier et que vous double cliquez sur votre document, que se passe-t-il ?

Commencer à coder - partie HTML

1-Le squelette de la page

Toute les pages codées en HTML ont obligatoirement une structure identique : recopiez ces premières lignes :

Nous devons preciser que le document est de type html. Pour cela, nous utilisons la balise
<!DOCTYPE html>
Pour définir la zone où nous allons travailler, il faut écrire entre les balises
<html> </html>
Passons à présent au header (en-tête), où plusieurs informations importantes seront notées :
<head> <meta charset="utf-8"> <title>Titre</title> </head>
Cela permet : de ne pas avoir de souci d'encodage et que l'onglet de la page ait un titre (exemple, cette page s'appelle "SNT - 2026 - 2027").
Apres le header, nous avons besoin d’un body. Rajoutons donc les balises
<body> Contenu </body>
Le reste du travail se fera entre ces deux balises (<body> ... </body> indique le "corps" de la page).

Après avoir enregistré, que voyez-vous à présent lorsque vous ouvrez votre page avec votre navigateur ?

Nous allons maintenant commencer à remplir le HTML. Pour l'instant, avec notepad++, vous devez avoir quelque chose qui ressemble à :

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Titre</title> </head> <body> Contenu </body> </html>

2-Rajouter un titre

Les titres vont de <h1>titre </h1> à h6, qui est la plus petite taille (plus de détails ici). Par exemple, sur cette page, le titre "Activité 1 : créer une première page web" est en taille h1, et le titre "Rajouter un titre" est en taille h3.

Rajoutez un grand titre et un sous-titre.

3-Ecrire un paragraphe

Pour écrire du texte, il faut utiliser les balises <p>blablabla </p>. Rajoutez-en un. Nous verrons comment ajouter une image, une vidéo et autres au cours de l'activité 2. Assurez-vous d'avoir quatre paragraphes.

4-Ajouter une classe à un élément

Une classe permet de se référer à plusieurs éléments qui partagent la même classe. C'est particulièrement pratique lorsque l'on veut rajouter une mise en page particulière pour plusieurs éléments, sans répéter plusieurs fois les mêmes lignes de code.

Rajoutez une classe à deux de vos paragraphes en modifiant les balises : au lieu d'avoir <p>blablabla </p>, vous devriez avoir à présent : <p class="pouet">blablabla </p>.

Même si votre enseignante utilise "pouet" dans son exemple, prenez un nom parlant qui facilitera l'utilisation de celui-ci.

5-Identifier précisément un paragraphe

Rajouter un identifiant à une balise HTML permet de s'y référer spécifiquement. Les identifiants doivent être uniques au sein d'une même page (par exemple, toutes les activités 1 de ce site ont l'identifiant "A1", mais comme elles ne sont pas sur la même page, ce n'est pas gênant).

Modifiez l'une de vos balises de titres : au lieu d'avoir <h1>titre </h1>, ayez par exemple : <h1 id="plop">titre </h1>. Cela permettra plus tard de s'y référer, car seul cet élément HTML aura comme identifiant "plop".

Même si votre enseignante utilise "plop" dans son exemple, prenez un nom parlant qui facilitera l'utilisation de celui-ci.

Pour l'instant, rajouter une classe ou un identifiant n'a rien changé : page s'affiche toujours de la même manière. Comment pourrions-nous modifier ça ?

6-Modifier la mise en page avec des balises HTML directement

Il existe plusieurs balises HTML qui modifient directement le texte. Par exemple, on peut citer la balise <b> qui permet d'avoir un texte en gras, ou <i> pour avoir un texte en italique, <u> qui permet de souligner, etc. Cependant, nous sommes vite limités. Et pour aller plus loin, on utilise du CSS !

Le CSS entre en scène

Les règles du CSS vont s'appliquer à une balise, une classe ou un identifiant.

1-Lancement

Dans notepad++, créez un nouveau document. Vous l'enregistrerez dans votre dossier SNT_HTMLCSS, sous le nom "css.css"

Dans votre document HTML, rajoutez dans l'en-tête : <link href="css.css" rel="stylesheet" />. C'est ce qui permet de dire au fichier HTML où chercher ses règles CSS.

A présent, votre en-tête devrait être :
<head> <meta charset="utf-8"> <title>Titre</title> <link href="css.css" rel="stylesheet" /> </head>

1-Changer la couleur de fond de la page (appliquer une règle CSS à une balise)

L'hexadécimal

L'hexadécimal est une manière de compter en base 16. Au lieu d'utiliser des chiffres de 0 à 9 pour composer les nombres, on utilisera des chiffres et des lettres, de 0 à 9 puis de A à F.

En général, en HTML/CSS, la couleur est notée en hexadécimal : le nombre composé des 2 premiers chiffres représente la valeur du rouge, le suivant celle du vert, et enfin celle du bleu. La couleur est donc composée d'une quantité de rouge, de vert, de bleu. Vous pouvez choisir les couleurs en utilisant par exemple un site tel que : celui-ci, ou encore utiliser une palette toute faite telle que celles trouvées ici.

Le corps du site, comme nous avons vu, est entre les balises <body/>.....</body>. Pour toutes les modifications concernant l'intégralité du site, on peut écrire une règle CSS qui concernera l'intégralité du corps du site.

Une règle CSS est systématiquement composée d'un format :

element { property : value ; }
Avec :

element : l'élément sur lequel on souhaite appliquer la règle
property : la propriété à changer
value : la nouvelle valeur de la propriété.

On peut modifier autant de propriétés que l'on veut par élément, dans la même règle CSS.

On note que tout est en anglais : c'est la langue universelle des développeurs.

Dans le fichier css.css, on va ajouter une règle s'appliquant sur la balise body. On va donc écrire :

body{ }

Ensuite on va chercher la ou les propriétés que l'on veut changer. Ici, c'est la couleur de fond, soit "background-color". Après avoir choisi une couleur, on va l'intégrer à la règle, qui deviendra (changez la couleur, ne mettez pas celle écrite au hasard !) :

body{ background-color: 12345A; }

Vérifiez le résultat avant de continuer ! Vous pouvez appliquer d'autres modifications : la police (font), la couleur de la police (color), etc.

2-Changer le style des titres

Pour changer le style des titres, on va applier une règle sur plusieurs éléments à la fois. On va chercher à changer la couleur des titres (color) et à les souligner (text-decoration).

Pour appliquer la même règle à plusieurs éléments, on écrira :

h1,h2,h3,h4{ ... }

Après avoir modifié tous les titres, sauvegardez le document et vérifiez sur votre page que tout a bien été modifié.

3-Décorer un élément en fonction de sa classe

Deux de vos paragraphes ont une classe spécifiée. Créez une règle qui s'applique aux éléments ayant cette classe (par exemple, passer le texte en italique). Pour cela, votre règle devra concerner :

.nomclasse{...}

Le "." montre que la règle s'applique à une classe et non une balise ou un identifiant.

Vérifiez que les modifications s'appliquent bien aux éléments visés et uniquement à ceux-ci.

4-Rajouter une bordure à un élément spécifique

Un de vos titre a un identifiant. On peut utiliser cet identifiant pour créer une règle CSS spécifique à ce titre. Par exemple, si l'on veut que ce titre en particulier soit d'une couleur différente des autres, il faudra créer une règle qui s'applique uniquement à lui. Pour cela :

#id{...}

Après avoir modifié la couleur de votre titre, vérifiez que les modifications sont visibles sur la page.

A ce niveau là, appelle ton enseignante pour vérifier que tout a été bien fait.

En résumé !

Une règle CSS peut s'appliquer :

Au contenu d'une balise. Pour cela, on rentre directement le nom de la balise (body, p, h1...)
A une classe. Pour cela, on commence la règle CSS par .nomclasse (en mettant le nom de classe utilisé dans le documents HTML)
A un élément via son identifiant. Pour cela, on commence la règle par #id (en mettant l'identifiant utilisé dans le documents HTML)

Activité 2 : créer un site web

WIP