Différences

Ci-dessous, les différences entre deux révisions de la page.

--- cours:cix_page_web [2023/06/23 08:06]
mrcjl
+++ cours:cix_page_web [2023/06/24 09:06] (Version actuelle)
mrcjl [La page WEB]
@@ Ligne 1: / Ligne 1: @@
-======Les page web======
+~~NOTOC~~
+======Les pages web======
+Pour échanger des informations, nous avons appris à réaliser des documents (textuels, multimédia ...) à partir de différentes applications bureautiques (LibreOffice Writer, Draw, Impress ...). Ces documents sont surtout destinés à une utilisation personnelle ou une impression.
-=====But et travail à faire=====
+Aujourd'hui, beaucoup d'informations sont partagées à partir de pages Web disponible sur Internet. En plus de savoir utiliser les applications bureautiques, des connaissances sur les pages Web deviennent nécessaires.
-Réaliser un document numérique sous une autre forme qu'une page réalisée grâce à un traitement de texte. \\
-Choisir une femme célèbre et rechercher des informations sur elle. \\
-Le résultat des recherches sera présenté sous la forme d'une page WEB à laquelle sera associé une page de style pour sa mise en forme à l'écran.
-===Les informations recherchées sont : ===
+<WRAP center round box 90%>
-  * Son nom complet ( et surnom ou nom d'artiste)
+**Compétence(s)**
-  * Sa nationalité et ses dates et lieux de naissance
+  * D 2.4 : Outils numériques pour échanger et communiquer
-  * Une photo libre de droit
+  * D 1 - Éducation aux médias et à l’information - Produire, communiquer, partager des informations
-  * Une description des faits importants relatifs à sa célébrité
+  * PIX 3.2 : Développer des documents multimédia
-  * Un avis personnel sur la personne (le votre)
-===Sites ressources===
+**J’ai acquis la(les) compétence(s) si :**
-Voici une liste non exhaustive pour choisir la personne dont vous allez parler. D'autres sites tel [[wpfr>Wikipédia]] vous permettront d'avoir des informations supplémentaires à son sujet.
+  * Je sais expliquer ce qu'est une page Web et une feuille de style
+  * J'ai compris le principe des balises et de leurs attributs
+  * Je connais les principales balises d'une page Web
+</WRAP>
-  * [[https://fr.wikipedia.org/wiki/Cat%C3%A9gorie:Liste_de_femmes|Femmes diverses]]
+Dans cette séquence, nous allons découvrir ce que sont les pages Web, leur composition et nous produirons une page pour l'afficher dans un navigateur.
-  * [[https://fr.wikipedia.org/wiki/Cat%C3%A9gorie:Liste_de_scientifiques|Scientifiques hommes ou femmes]]
-  * {{https://10ca8303-b3dc-4a91-9dcc-2d2b91792b47.usrfiles.com/ugd/10ca83_47b7d8cc74a54778817c92a1b941ec79.pdf|40 femmes scientifiques remarquables}}
-  * [[http://www.univ-tlse3.fr/medias/fichier/biblio-f-s-scd-avec-edito_1561457671208-pdf?ID_FICHE=305606&INLINE=FALSE|catalogue bibliographique sur les femmes scientifiques]]
-  * [[https://mrmondialisation.org/20-femmes-de-science-qui-ont-change-le-cours-de-notre-histoire|20 femmes de science qui ont changé le cours de notre Histoire]]
+=====Prérequis=====
+{{ https://upload.wikimedia.org/wikipedia/commons/2/25/WWWlogo.png?100|}}
+Dans les applications bureautiques déjà utilisées, toutes les informations (textes, images ...) sont regroupées dans un seul fichier qui ne peut être visualisé qu'avec l'application qui l'a créé (application propriétaire).
-=====Description sommaire=====
+Le web a lui été conçu pour le partage d'information. Chaque texte, photo ... sont enregistrés dans des fichiers séparés, en format ouvert (lisible par toutes les applications Web) et reliés entre eux grâce à des liens hypertextes. Les différents fichiers sont placées sur le même, ou plusieurs serveur(s) Web.
+<WRAP round tip>
+  * **Internet** est un réseau informatique mondial accessible au public. Il est composé de câbles, routeurs, serveurs reliés entre eux et fonctionnant grâce à des protocoles. Il est composé de matériel et de logiciel, pas de contenue.
+  * **World Wide Web (la « toile (d’araignée) mondiale »), abrégé www ou Web** : C'est un système hypertexte public fonctionnant sur des serveurs spécifiques (serveurs Web) reliées à Internet et pouvant être parcourus grâce à un navigateur. Il regroupe une grande partie des contenus disponibles sur Internet.
+  * **Navigateur** : Application permettant de consulter et afficher les différentes ressources du Web (documents texte, image, vidéo ...) grâce aux liens hypertexte (adresses URL).
+  * **Lien hypertexte** : Système de renvois cliquable (qui prennent la plupart du temps la forme d'un texte souligné en bleu, parfois d'image de bouton ...) ou automatique placé à l’intérieur des pages Web afin de fusionner ou naviguer entre plusieurs documents.
+</WRAP>
+Au début d'Internet, l’accès aux différentes ressources était compliqué et nécessitaient une application spécifique en fonction de leur type de contenu. Le Web a facilité leur utilisation et provoqué le succès d'Internet.
+<WRAP round info>
+Le Web a été [[https://home.cern/fr/science/computing/birth-web|inventé au CERN (Conseil Européen pour la Recherche Nucléaire) en 1989-1990]] par :
+  * **Tim Berners-Lee** inventeur des trois technologies fondatrices : les adresses Web sous forme d'URL, le protocole de communication HTTP, et le langage informatique HTML.
+  * **Robert Cailliau** inventeur du premier navigateur et à l'origine du passage du Web pans le domaine public.
+</WRAP>
 ====La page WEB====
+La page Web est un document textuel qui s'affiche dans un navigateur en fusionnant toutes les ressources indiquées par des liens hypertextes et en prenant la forme définie dans la feuille de style liée.
 <WRAP round tip>
-Une **page web <html>** est un document textuel dont le contenu est décrit à travers des **balises**. Elle contient des informations générales, l'**entête <head>**, destinées au navigateur qui l'affiche et un contenu, le **corps <body>**, qui comprend le texte et sa description pour le lecteur.
+Une **page web <html>** est un document textuel dont le contenu est décrit à travers des **balises**. Elle contient :
+  * l'**entête <head>**, destinées au navigateur pour afficher correctement le contenu,
+  * le **corps <body>**, qui comprend le contenu pour le lecteur et sa description pour le navigateur.
-Chaque partie du contenu est placé entre **une balise ouvrante et une balise fermante** (ex. <balise>Contenu</balise>) décrivant le type de contenue (titre, texte, image, lien ..). La balise fermante est la même que l'ouvrante avec une barre oblique au début. Il existe des balises sans contenu (ex. <balise />). Chaque balise et généralement écrite sur une **ligne séparée en utilisant des indentations** (espaces en début de ligne pour faciliter la lecture).
+Il existe **une balise ouvrante et une balise fermante** (ex. <balise>Contenu</balise>) décrivant chaque type de contenue (titre, texte, image, lien ..). La balise fermante est la même que l'ouvrante avec une barre oblique au début. Il existe des balises sans contenu (ex. <balise />). Chaque balise et généralement écrite sur une **ligne séparée en utilisant des indentations** (espaces en début de ligne pour faciliter la lecture).
 </WRAP>
+<WRAP round info>
+{{ https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/240px-HTML5_logo_and_wordmark.svg.png?100|}}
+Le **HyperText Markup Language, généralement abrégé HTML** ou, dans sa dernière version, HTML5, est le langage de balisage conçu pour représenter les pages web.
+Ce langage permet d’écrire de l’hypertexte (d’où son nom), de structurer sémantiquement une page web, de mettre en forme du contenu.
+Il est souvent utilisé conjointement avec des **feuilles de style en cascade (CSS)** pour la mise en forme des pages. HTML est inspiré du Standard Generalized Markup Language (SGML). Il s'agit d'un format ouvert.
+</WRAP>
+Une balise spéciale permet d'insérer des commentaires qui ne s'affichent pas dans le navigateur. \\
+Une balise peut contenir un ou plusieurs attributs permettant de donner des précisions sur son utilisation.
 En HTML5 (version actuelle des pages web) cela donne :
@@ Ligne 38: / Ligne 69: @@
 <html lang="fr">
   <head>
-    ...
+    ... <!-- Contenu entête -->
   </head>
   <body>
-    ...
+    ... <!-- Contenu corps -->
   </body>
 </html>
@@ Ligne 47: / Ligne 78: @@
 </WRAP><WRAP column>
 La 1ere ligne indique un document en HTML5 \\
-La 2ème indique le début de la page web dont le contenue est en langue française \\
+La 2ème indique le début de la page web et l'attribut //lang// qu'elle est en langue française \\
 Début de l'entête pour le navigateur \\
-Contenu de l'entête \\
+Contenu de l'entête (avec balise commentaire) \\
 Fin de l'entête \\
 Début du corps \\
-Contenu du corps \\
+Contenu du corps (avec balise commentaire) \\
 Fin du corps \\
 Fin de la page
@@ Ligne 68: / Ligne 99: @@
   * //title// : indique le titre affiché dans l'onglet du navigateur
-  * //meta// : indique le codage des caractères, généralement __"UTF-8"__ en HTML5 (voir le cours sur la numérisation des informations)
+  * //meta// : donne des indications sur la page. l'attribut //charset// indique le codage des caractères (généralement __"UTF-8"__ en HTML5) [voir le cours sur la [[cours:numinf4#Pour_les_textes|numérisation des informations]] ]
-  * //link// : indique l'URL de la page de style __"style.css"__ utilisée pour la mise en forme à l'écran. En son absence, une mise en forme par défaut est utilisée.
+  * //link// : indique un lien vers un autre document. L'attribut //rel// indique qu'il s'agit d'une feuille de style pour la mise en forme et l'attribut //href// son adresse URL. En l'absence de cette balise, une mise en forme par défaut est utilisée.
 Les balises //meta// et //link// n'ont pas un contenu affichable tel le titre de la page et n'utilisent pas de balise fermante mais la barre oblique de fin.
 ====Le corps====
+Nous allons ici aussi nous en tenir aux balises principales :
+^  Balises  ^  Description  ^
+|  <h1>Titre</h1>  | Indique un titre de niveau 1 (titre principal). On peut utiliser les niveaux 2 à 6 pour les sous titres |
+|  <p>Texte du paragraphe</p>  | Contenu d'un paragraphe. Les espaces sont réduits et il n'y a pas de saut de ligne automatique |
+|  <br />  | Saut de ligne forcé |
+|  <span class="mef">partie de texte</span>  | Permet de modifier la mise en forme d'une partie du texte dans un paragraphe |
+|  <img src="URL" />  | Permet d'afficher l'image d'adresse URL (locale au dossier de la page ou distante protocole http) |
+|  <cite>Source</cite>  | Permet d'indiquer une source documentaire ou un commentaire à afficher dans le navigateur |
+|  <a href="URL">Nom du lien</a>  | Place un lien Internet cliquable vers la ressource d'adresse URL |
+|  < div >...< /div >  | Permet de découper une page WEB en plusieurs parties |
+====exemple====
+<WRAP group><WRAP half column centeralign>
+Code HTML
+<code html>
+<!doctype html>
+<html lang="fr">
+  <head>
+    <title>Page sur les capteurs</title>
+    <meta content='text/html; charset=UTF-8' http-equiv='content-type' />
+    <link rel='stylesheet' type='text/css' href='./style.css' />
+  <body>
+  <h1>Les capteurs</h1>
+  <p>Pour plus d'informations, voir <a href="https://fr.wikipedia.org/wiki/Capteur">la page sur les capteurs</a> de <cite>Wikipédia</cite>.</p>
+  <div class="mf1">
+    <h2>Le bouton</h2>
+    <img src="./bp.jpg" />
+    <p>Fourni une <span class="mf2">information logique</span> enclanché ou pas</p>
+  </div>
+   <div class="mf3">
+    <h2>Le potentiomètre</h2>
+    <img src="./pot.jpg" />
+    <p>Fourni une <span class="mf2">information analogique</span> (valeur électrique de 0 à 10 volts par exemple)</p>
+  </div>
+</body>
+</html>
+</code>
+</WRAP><WRAP half column centeralign>
+Rendu dans navigateur avec feuille de style \\
+{{ :cours:exemplehtml.jpg?400 |}}
+</WRAP></WRAP>
+=====Pour aller plus loin=====
+<WRAP round tip>
+Les **principales balises** utilisées sont :
+  * **<html>**...</html> : la page web
+    * **<head>**...</head> : son entête
+      * **<title>**...</title> : son titre
+      * **<link** rel='stylesheet' ... /> : sa feuille de style pour son affichage
+    * **<body>**...</body> : son contenu
+      * **<h1>**...</h1> : les titres et sous-titre (h1 à h6) du contenu
+      * **<p>**...</p> : les paragraphes
+      * **<img** src='...' /> : les images
+      * **<a** href='...'>...</a> : les liens hypertextes cliquables
+      * **< div >**...</div> : les blocs de regroupement
+Les balises peuvent avoir un contenu ou/et des attributs (ex. class='unstyle'). \\
+Elles sont généralement imbriqué en utilisant des **indentations** comme en programmation.
+</WRAP>
+<WRAP round download>
+  * [[https://www.w3schools.com/html/default.asp|Apprendre le HTML sur le site w3schools]]
+  * [[https://openclassrooms.com/fr/courses/1603881-creez-votre-site-web-avec-html5-et-css3|Cours pour apprendre le HTML5 et CSS3 sur openclassrooms]]
+</WRAP>

WikiTechno.morceau.fr (amen.fr)

Outils pour utilisateurs

Outils du site

Différences

Outils de la page