WikiTechno.morceau.fr (amen.fr)

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
~~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. 

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. 

<WRAP center round box 90%>
**Compétence(s)**
  * D 2.4 : Outils numériques pour échanger et communiquer
  * D 1 - Éducation aux médias et à l’information - Produire, communiquer, partager des informations
  * PIX 3.2 : Développer des documents multimédia

**J’ai acquis la(les) compétence(s) si :**
  * 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>

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.

=====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).

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 :
  * 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. 

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 :
<WRAP group><WRAP quarter column>
<code html>
<!doctype html>
<html lang="fr">
  <head>
    ... <!-- Contenu entête -->
  </head>
  <body>
    ... <!-- Contenu corps -->
  </body>
</html>
</code>
</WRAP><WRAP column>
La 1ere ligne indique un document en HTML5 \\
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 (avec balise commentaire) \\
Fin de l'entête \\
Début du corps \\
Contenu du corps (avec balise commentaire) \\
Fin du corps \\
Fin de la page 
</WRAP></WRAP>

====L'entête====
Un entête peut contenir beaucoup d'informations mais ici nous allons nous limiter à 3 balises principales :
<code html>
  <head>
    <title>Titre de la page dans l'onglet du navigateur</title>
    <meta content='text/html; charset=UTF-8' http-equiv='content-type' />
    <link rel='stylesheet' type='text/css' href='style.css' />
  </head>
</code>

  * //title// : indique le titre affiché dans l'onglet du navigateur
  * //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 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

Outils de la page
