2037 views
--- tags : SNT title : Mon premier Site WEB --- <!-- Nouveau Capytale WEB--> *[HTML]: HyperText Markup Language en anglais, soit « Langage de balisage hypertexte » *[HTTP]: Hypertext Transfer Protocol *[URL]: Uniform Resource Locator, littéralement « localisateur uniforme de ressource » couramment appelée adresse web *[CERN]: Conseil européen pour la recherche nucléaire *[WWW]: World Wide Web, littéralement la « toile (d’araignée) mondiale », abrégé WWW ou le Web # Mon premier Site WEB Dans cette séance vous allez découvrir le langage **HTML** (*HyperText Markup Language en anglais, soit « Langage de balisage hypertexte »*) qui permet de définir et d'organiser la structure d’une page web. :::info :information_source: **Le début de l'histoire :** Le **premier** site internet a été publié le 6 août 1991. - Il présentait le projet World Wide Web développé au sein du CERN par Tim Berners-Lee, Robert Cailliau, Eelco van Asperen, ou encore Alain Favre. - HTML est une des trois inventions à la base du World Wide Web, avec le HTTP et les URL. - « Le projet WWW fusionne les techniques de recherche d’informations et d’hypertexte pour créer un système d’information global simple mais puissant ». - Cette page web a évolué jusqu'en 1993. On peut voir [**ici**](https://info.cern.ch/hypertext/WWW/TheProject.html), une copie de l'état d'alors de ce premier site web de l'histoire. ::: # Écrire du HTML :::danger ⚠️ Les instructions de l'activité sont données ci-dessous, mais tout est à faire dans [**Capytale**](https://capytale2.ac-paris.fr/web/c/5a23-2790460). ::: Après avoir ouvert l’activité dans Capytale, vous devez obtenir une fenêtre avec plusieurs zones : - La zone de <span style="background-color:#91b4d7;">   consigne  </span> qui contient un lien vers le présent document. :::success **Refermez** la zone de consignes en cliquant sur l'icône ![]( https://proftourreau.fr/ftp/siteweb/icone.svg =20x) au milieu du trait démarquant cette zone. ::: - ![]( https://proftourreau.fr/ftp/siteweb/edit.svg =20x) Une zone nommée <span style="color:DodgerBlue;">Éditeur de code</span>, dans laquelle le code `HTML` sera à modifier ou à écrire. - ![]( https://proftourreau.fr/ftp/siteweb/public.svg =20x) Une zone <span style="color:#dc3545;">Prévisualisation</span>, où le résultat de l'exécution du code HTML s'affichera comme dans un navigateur internet. ## Le principe de balisage d'un texte :::warning - Les balises HTML sont constituées - du caractère « **`<`** », - suivi par le **nom** de la balise, - par d'éventuels **attributs** sous la forme **`attribut=valeur`**, - et par le caractère « **`>`** ». - Ainsi, **`<head>`** est la balise qui indique le **début** de l'**entête** d'une page *html*. - Lorsque qu'une balise définit le début d'une zone, la balise qui ferme cette zone possède le **même nom**, mais commence par « **`</`** ». - Ainsi, **`</head>`** est la balise qui indique la **fin** de l'entête d'une page *html*. - Les balises **`<body>`** et **`</body>`** définissent le corps de la page **html**, c'est-à-dire ce qui sera affiché dans le navigateur. ::: Toutes les pages *html* possède la structure : ```htmlmixed <html> <!-- Ceci est un commentaire pour les humains --> <head> ⁝ <!-- L'entête, c'est-à-dire des informations utiles au navigateur --> </head> <body> ⁝ <!-- Le corps, c'est-à-dire ce qui sera affiché --> </body> </html> ``` Vous pouvez reconnaître cette structure dans l'<span style="color:DodgerBlue;">Éditeur de code</span>. ## À vous de jouer Vous allez expérimenter pour comprendre le rôle et l'intérêt de ces balises ! :::danger :warning: Dans **Capytale**, pensez à **sauvegarder régulièrement** votre travail en cliquant sur l'icône correspondante <code><i class="fa fa-floppy-o" aria-hidden="true"></i> Enregistrer</code> en haut à gauche ! ::: Dans le **corps** du HTML de l’activité sur Capytale, on constate que le navigateur affiche les textes au fur et à mesure sans tenir compte des sauts de lignes ou espaces laissés. :::warning Et pour cause, il n'y a **aucune balise** qui structure le début de la page. ::: ### 💻 Question 1 :::success - **Utilisez** le clavier pour **transformez** le code `Recette de choix` en ```htmlbars <h1>Recette de choix</h1> ``` - **Observez** l'impact sur la page. ::: :::info :information_source: **Un éditeur qui vous veut du bien** - Vous avez remarqué que l'éditeur de Capytale propose de compléter votre code. Pour accepter une proposition, il suffit d'appuyer la touche `Entrée`. - Ce sera très pratique pour **fermer** une balise sans erreur. ::: ### 💻 Question 2 - La balise `<h1>` sert à définir les titres de premier niveau. - Il existe 5 autres niveaux de titre de `<h2>` à `<h6>`. :::success Dans le texte initial, les décalages du texte par rapport à la marge créaient **implicitement** des titres, des sous-titres et des chapitres. - **Trouvez** les titres et sous-titre selon leur niveau implicite, **affectez** leur une balise `<h1>` ou `<h2>`. - **Observez** l'impact sur la page. - N'oubliez pas de **fermer** les balises ! En écrivant `</` l'éditeur vous propose ce qui convient. ::: C'est beaucoup mieux, mais l'auteur du texte initial allait parfois à la ligne avec une intention envers son lecteur et cela a disparu dans la prévisualisation. ### 💻 Question 3 HTML a prévu que la balise `<p>` indique au navigateur le début d'un **paragraphe** qui composent le texte. :::success - **Placez** des balises `<p>` et `</p>` pour retrouver les paragraphes implicites. - **Observez** l'impact sur la page. ::: ### 💻 Question 4 HTML a prévu qu'on puisse insérer des images. L'image d'illustration `LogoSNT.svg` que j'ai choisi a été copiée dan Capytale. HTML a également prévu que, parfois les images n'arrivent pas à se charger ou que l'image puisse être decryptée automatiquement pour les malvoyants. Un texte **alternatif** à l'image peut être prévu. :::success - **Placez** le code ```htmlbars <img src="LogoSNT.svg" alt="Le logo SNT du lycée de Lannemezan" style="width:50%"> ``` entre **`<h1>Une recette</h1>`** et **`<h1> Définition</h1>`** . - **Observez** l'impact sur la page. - **Modifiez** la taille de l'image pour qu'elle soit de largeur 300px. ::: ### 💻 Question 5 HTML a prévu qu'on puisse insérer des liens. On peut créer des liens **internes** à la page. :::success - On définit une cible dans la page en lui donnant un nom, une **identité** : - Pour **appeler** « top » le titre principal de notre page, - **modifiez** le titre `<h1>Une recette de choix</h1>` en ```htmlbars <h1 id="top">Une recette de choix</h1> ``` - `id` est un attribut du langage html, - `"top"` est la valeur prise par cet attribut. - Le résultat est que le navigateur sait désormais que le nom "top" est celui de ce titre `<h1>` précisemment. - Pour **créer le lien** au bas de la page, juste avant `</body>` : - **Modifiez** le code `<li>Début de cette page</li>` en ```htmlbars <li><a href="#top"> Début de cette page</a></li> ``` - **Gardez** les balises `<li>`. - N'oubliez pas de **fermer** la balises `<a>`. En écrivant `</` l'éditeur vous propose ce qui convient ! - **Observez** l'impact sur la page. - Dans l'aperçu, **cliquez** sur ce lien que vous venez de créer. - **Terminez** la table des matières de cette page avec seulement les titres de niveau 1 (`<h1>`). - **Modifiez** la balise (`<ul>`) en (`<ol>`). - **Observez** l'impact sur la page. ::: ### 💻 Question 6 On peut créer des liens vers des cibles **externes** à la page. :::success - On définit une cible externe à la page en utilisant une **URL** : - Par exemple, `https://convertio.co/fr/` est l'URL du site *convertio* qui permet de convertir des fichiers en différents formats. - **Cliquez** sur ce [**lien**](https://convertio.co/fr/) et **repérez** dans le navigateur où se trouve l'URL (`https://convertio.co/fr/`) de la page que l'on visite. - **Trouvez** l'URL directe pour accéder au convertisseur d'image au format .svg. - **Cliquez** sur le lien correspondant, puis - **Copiez** l'URL de cette page. - Pour **créer le lien** vers cette page, on utilise la même syntaxe que pour les liens internes : ```htmlbars <a href="URL cible"> Texte affiché</a> ``` - **Transformez** dans le titre « **Source :** » le texte existant "convertio" pour qu'il devienne un lien vers la page correspondante. - **Observez** l'impact sur la page. - Dans l'aperçu, **cliquez** sur ce lien. ::: ### 💻 Question 7 Vous allez réaliser un **mémento** des balises html et de leur rôle. Pour cela, j'ai préparé un tableau à **compléter** : :::success - **Copiez** l'ensemble du code *html* fourni ci-dessous - **Collez**-le juste avant la balise `</body>` ::: ```htmlbars <h1> Résumé sur les balises HTML </h1> <table> <thead> <tr> <th>Balise</th> <th>Rôle</th> </tr> </thead> <tbody> <tr> <td><code>&lt;body&gt;</code></td> <td>…</td> </tr> <tr> <td><code>&lt;…&gt;</code></td> <td>Entête de la page, non affichée</td> </tr> <tr> <td><code>&lt;h1&gt;</code></td> <td>… principal</td> </tr> <tr> <td><code>&lt;…&gt;</code></td> <td>Titre moins important</td> </tr> <tr> <td><code>&lt;…&gt;</code></td> <td>Paragraphe</td> </tr> <tr> <td><code>&lt;a&gt;</code></td> <td>…</td> </tr> <tr> <td><code>id=</code></td> <td>…</td> </tr> <tr> <td><code>…</code></td> <td> Cible du lien</td> </tr> <tr> <td><code>&lt;…&gt;</code></td> <td>Image</td> </tr> <tr> <td><code>…=</code></td> <td>Source de l'image</td> </tr> <tr> <td><code>alt=</code></td> <td>…</td> </tr> <tr> <td><code>&lt;…&gt;</code></td> <td>Liste non ordonnée d'éléments</td> </tr> <tr> <td><code>&lt;li&gt;</code></td> <td>…</td> </tr> <tr> <td><code>&lt;title&gt;</code></td> <td>Texte dans l'onglet du navigateur</td> </tr> <tr> <td><code>&lt;…&gt;</code></td> <td> Tableau</td> </tr> <tr> <td><code>&lt;td&gt;</code></td> <td>…</td> </tr> <tr> <td><code>&lt;…&gt;</code></td> <td> Nouvelle ligne du tableau</td> </tr> </tbody> </table> ``` :::success - **Remplacez** ensuite les 3 petits points « … » dans le tableau par ce qui convient. ::: ### 💻 Question 8 HTML a prévu qu'on puisse insérer des contenus WEB comme des vidéos. Il suffit de récupérer le code `iframe` ou `embed` d'un contenu et de le coller dans le code HTML de la page WEB à créer. :::success - **Cliquez** sur [**lien**](https://www.lumni.fr/video/demarrage-creer-un-site-en-html-1-5#containerType=serie&containerSlug=3-minutes-pour-coder) pour accéder à une vidéo du vidéaste web français Micode qui explique comment créer une page HTML. - **Lancer** la vidéo. - **Cliquez** sur le logo `</> intégrer`. - **Cliquez** dans le code pour le copier ```htmlbars <iframe width="560" height="315" src="//embed.francetv.fr/9b711f6d6599cdce0088ff67459ab22c" frameborder="0" scrolling="no" allowfullscreen></iframe> ``` - **Coller** le code en dessous du tableau après un titre "Pour aller plus loin". ::: # Écrire du CSS ## Le principe du CSS **Cliquez** sur le lien du [**site suivant**](https://www.csszengarden.com) et **observez** sa présentation. **Choisissez** le style `Mid Century Modern` à droite. Remarquez que le contenu n'a pas changé alors que la mise en forme oui. En fait, seul le fichier `style.CSS`a été modifié. :::warning - Pour mettre en forme un élément entre `<balise>` de la page `html`, on utilise un sélecteur d'élément comme suit : - le **nom** d'une balise du code`html`, - suivi du caractère « **`{`** », - une liste de **propriété** séparées par le caractère « **`;`** » - chacune associée à une **valeur** sous la forme **`propriété : valeur ;`**, - et par le caractère « **`}`** ». - Pour mettre en forme un élément identifié avec `id`, on utilise un sélecteur d'élément comme suit : - le caractère « **`#`** » suivi du nom d'un `id` du code`html`, - une liste de **propriété** séparées par le caractère « **`;`** » - chacune associée à une **valeur** sous la forme **`propriété : valeur ;`**, - et par le caractère « **`}`** ». - L'ordre des éléments ont une importance. Dans l'exemple ci-dessous, les titres `<h1>` bien qu'étant dans le `<body>` seront en bleus sur fond jaune car le sélecteur est placé en 2ème position et seul le titre `<h1>` avec l' `id="top"` sera encadré. ::: Toutes les pages *css* possède la structure : ```htmlmixed body { /* un sélecteur qui fait référence à une balise du code HTML */ color: black; /* des propriétés de formatage avec des valeurs associées */ } /* des accolades pour englober l'ensemble des propriétés */ h1 { color: blue; background-color: yellow; } #top { border: 1px solid black; } ``` ## À vous de jouer Vous allez expérimenter pour comprendre le rôle et l'intérêt du CSS ! Dans la zone ![]( https://proftourreau.fr/ftp/siteweb/edit.svg =20x) <span style="color:DodgerBlue;">Éditeur de code</span>, il y a 3 documents ouverts : `index.HTML` , `LogoSNT.SVG` et `style.CSS`. Cliquez sur `style.CSS` pour pouvoir saisir du code CSS et sur `index.HTML` pour saisir le code HTML Pour lier `styles.css` à `index.html` ajoutez la ligne suivante dans la section `<head>` du document HTML : ```htmlmixed <link rel="stylesheet" href="styles.css" /> ``` Cet élément `<link>` indique au navigateur la présence d'une feuille de style, grâce à l'attribut `rel` ; la valeur de l'attribut `href` donne la localisation du fichier CSS. ### 💻 Question 1 :::success - **Utilisez** le clavier pour **saisir** le code suivant `style.CSS` ```htmlbars body { background-color: white; color: #444; font-family: "Open Sans", sans-serif; padding: 4px 25px 5px 25px; font-size: 18px; margin: 0; } ``` - **Observez** l'impact sur la page WEB. ::: ### 💻 Question 2 :::success - **Ajoutez** le code nécessaire pour que : - les titres soit en écriture noire, surlignés en rouge, de taille 24px et centrés - les sous-titres en écriture rouge, en italique, de taille 20px et alignés à gauche - **Observez** l'impact sur la page WEB. ::: ### 💻 Question 3 Il est possible d'attribuer un format particulié à un élément de la page (paragraphe, titre, sous-titres, ...) qui aura été identifié en particulier. :::success - **Placez** le code à la fin du fichier `style.css` ```htmlbars #top { border: 1px solid black; } ``` - **Observez** l'impact sur la page. ::: ### 💻 Question 4 Les tableaux également peuvent être mis en forme. :::success - **Placez** le code à la fin du fichier `style.css` ```htmlbars table { width: 100%; border-collapse: collapse; margin-top: 20px; } th, td { border: 1px solid #ccc; padding: 10px; text-align: left; } ``` - **Observez** l'impact sur le tableau. ::: # Pour terminer #### Dans l'entête :::success - En **séparant** les auteurs par une virgule, **ajoutez** votre nom comme auteur de cette page *html*. ::: #### Vérification finale :::success - <i class="fa fa-download" aria-hidden="true"></i> **Téléchargez** le code *html* final en cliquant sur l'icône sous le nom du fichier `index.html` . - **Déplacez** le fichier obtenu dans votre dossier `SNT` de votre ordinateur. - **Ouvrez** ce fichier pour le vérifier. Est-il complet ? - Avec quel type de logiciel peut-on lire une page Web ? - Trouvez le moyen de **récupérer** ce qui manque, **placez**-le dans votre répertoire `SNT` et **rafraichissez** la page dans *navigateur WEB*. ::: :::danger :warning: **N'oubliez** pas d'<code><i class="fa fa-floppy-o" aria-hidden="true"></i> Enregistrer</code> dans Capytale, avant de quitter votre travail. :::