Différences

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

--- cours:cix_page_web [2023/06/23 15:28]
mrcjl
+++ cours:cix_page_web [2023/06/24 09:06] (Version actuelle)
mrcjl [La page WEB]
@@ Ligne 1: / Ligne 1: @@
+~~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 :
@@ Ligne 32: / Ligne 49: @@
 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>
@@ Ligne 85: / Ligne 111: @@
 |  <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 [http://...]) |
+|  <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 |
@@ Ligne 121: / Ligne 147: @@
 </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