travaux-pratiques

TpIntroductionAuHtml

Internet et la composition de pages Web


Début du texte !!!.
Introduction : Historique
• 1967 : Arpanet : réseau militaire Américain robuste aux pannes
• 1973 : Apparition du TCP/IP
• 1983 : Internet : Interconnexion d’Arpanet et d’autres réseaux
- 1989 : Tim Berners-Lee invente le Web avec le langage HTML comme langage de publication. Le World Wide Web a vu le jour là où on l'attendait le moins : au CERN, le laboratoire européen de physique des particules à Genève, en Suisse . Popularisé par le navigateur Mosaic, développé au NCSA.

- Tim Berners-Lee, né le 8 juin 1955 à Londres, est un physicien et informaticien britannique, principal inventeur du World Wide Web (WWW, le Web) alors qu'il travaillait à l'Organisation européenne pour la recherche nucléaire (CERN) au tournant des années 1990. Depuis 1994, il préside le World Wide Web Consortium (W3C), organisme qu'il a fondé. En juillet 2004, il est fait chevalier par la reine Élisabeth II. Il est lauréat du prix Turing 2016.

(Source google.fr et wikipedia)
Interview France Culture - 3'37






Principe d'Internet :
• Le réseau Internet met en contact les utilisateurs par le biais de leur matériel informatique respectif.


Principe d'Internet : modèle OSI et TCP/IP.




Protocoles des couches OSI et TCP/IP
Les modèles OSI et TCP/IP | Administration Réseau | IT-Connect
https://www.it-connect.fr/les-modeles-osi-et-tcpip/
Les modèles réseaux OSI et TCP/IP expliqués - Pierre Giraud
https://www.pierre-giraud.com/http-reseau-securite-cours/modele-reseau-osi-tcp-ip/
Les modèles OSI et TCP/IP sont des cadres conceptuels qui définissent comment les données sont transmises entre systèmes informatiques. 
Ils organisent les protocoles en couches pour simplifier la communication et permettre une modularité.

Modèle OSI (7 couches)
Le modèle OSI est un modèle théorique composé de 7 couches, chacune ayant un rôle spécifique :
    Physique : Transmission des bits via des supports physiques (câbles, signaux électriques).
    Liaison de données : Gestion des trames, détection et correction des erreurs (Ethernet, Wi-Fi).
    Réseau : Routage et adressage des paquets (IP, ICMP, OSPF).
    Transport : Communication de bout en bout, fiabilité des données (TCP, UDP).
    Session : Gestion des connexions entre applications.
    Présentation : Formatage des données (cryptage, compression).
    Application : Interaction avec l'utilisateur via des protocoles comme HTTP, FTP, SMTP.
Chaque couche interagit uniquement avec la couche adjacente, facilitant l'évolution des technologies.

Modèle TCP/IP (4 couches)
Le modèle TCP/IP, plus pratique et utilisé pour Internet, regroupe certaines couches du modèle OSI :
    Accès réseau : Combine les couches physique et liaison de données (Ethernet, Wi-Fi).
    Internet : Correspond à la couche réseau du modèle OSI, avec des protocoles comme IP pour le routage.
    Transport : Identique à la couche transport du modèle OSI, utilisant TCP (fiable) ou UDP (rapide).
    Application : Regroupe les couches application, présentation et session du modèle OSI, avec des protocoles comme HTTP, DNS, SMTP.
Différences clés
Le modèle OSI est théorique et normatif, tandis que le modèle TCP/IP est une implémentation pratique. 
TCP/IP est plus simple avec 4 couches, tandis qu'OSI en compte 7 pour une granularité plus fine.
Ces modèles sont essentiels pour comprendre les communications réseau et les interactions entre protocoles.


Les couches applicatives :
  • • HTTP : web
  • • NNTP : newsgroup
  • • POP / SMTP : mail
  • • FTP : transfert de fichiers
  • • DNS : correspondance entre noms et adresses IP
  • • SSH : connexion à distance sécurisée

Principe d’Internet : Le web
  • • Système hypertexte public fonctionnant sur Internet et qui permet de consulter, avec un navigateur, des pages mises en ligne dans des sites.
  • L'image de la toile vient des hyperliens qui lient les pages Web entre elles.
  • • Communication entre un serveur (HTTP) et un client (navigateur)

Principe d'Internet : HTTP
telnet btsio.net 80
GET / HTTP/1.0
2 retours à la ligne.

Principe D'Internet : URL
Une URL est une chaine de caractères utilisée pour adresser les ressources dans le Web
  • • Exemple : http://www.example.com/chemin/page.html?q=req
  • – http : protocole
  • – www.example.com : hôte
  • – /chemin/ : chemin absolu sur le service
  • – page.html : nom de la page Web
  • – q=req : chaine de requête, transmise à la page

Comment fonctionne le Web :
  • C'est un mécanisme client-serveur.
  • Le client demande un fichier, le serveur lui donne tel qu'il est stocké
    • processus statique
  • Le serveur peut aussi générer un fichier en fonction de la demande du client
    • – processus dynamique


Écrire pour le Web :
Ce n'est pas uniquement écrire des pages en HTML, il faut penser en terme de projet:
  • Définir le contenu.
  • Trouver une arborescence ergonomique.
  • Appliquer / Respecter la charte graphique.
  • Produire les pages.
  • Installer le site sur le serveur.
  • respecter le RGPD et les droits des auteurs.
  • Maintenance, politique de mise à jour.

HTML, l'origine
  • HTML Hyper Text Markup Language est né en 1989 sous l'impulsion de Tim Berners Lee, " inventeur " du Web (voir plus haut dans cette page).
  • HTML est basé sur SGML (Structured Generalized Markup Language), qui est une vieille norme utilisée pour la description de documents. Elle est conçue pour les grosses documentations techniques.
  • HTML est une instance de SGML.
  • S.G.M.L. (Standard Generalized Markup Language).


HTML, les principes
  • Il contient des commandes, implémentées par des balises pour marquer les différents types de texte (titres, paragraphe, listes …) , pour inclure des images, des formulaires, des liens …
  • C'est un langage à balisage qui décrit la structure logique d'un document hypertexte. Il a volontairement été conçu pour être simple.
  • Il a évolué vers un langage de description de pages offrant des possibilités plus proches de la P.A.O.

L'hypertexte
  • Le langage HTML permet de créer des documents interactifs grâce à des liens hypertextes, qui relient votre document à d'autres documents.
  • En cliquant sur une zone de texte (ou une image, un logo) mise en évidence, on peut accéder a un nouveau document situé sur un autre ordinateur en n'importe quel point du globe.


Introduction au marquage :
Pour décrire un fichier hypertexte, le langage HTML insère des balises dans le texte du document

Le code HTML


Structure de base d'un fichier HTML
<html>
  • <head>
    • … <title>Mon premier document html</title>
  • </head>
  • <body>
    • … Bonjour tout le monde
  • </body>
</html>

Analyse des balises
  • <html> .. </html> Délimite le début et la fin du document
  • <head> .. </head> Entête du document, contient des méta- informations
  • <body> . . </body> Corps du document

Eléments de niveau bloc
<hn> . . </hn> Titre de niveau n, de 1 à 6
<p> . . </p> Paragraphe

Exemple --> <H1>Titre en H1</H1>

Titre en H1



Eléments de listes
  • <ul> . . </ul> Liste non triée, liste à puces
  • <ol> . . </ol> Liste triée, liste à numéros
  • <li> . . </li> Elément de la liste

  • 1 artichaut
  • Les trucs pour le gateau
    • 3 oeufs
    • La génoise
      • 100g de sucre
      • 1 oeuf
      • 150g de farine
    • 200g de chocolat
  • De l'essuie-tout


Source liste imbriquée.

Les balises<BLOCKQUOTE> et </BLOCKQUOTE> permettent de décaler le texte vers la droite (Tabulation).
Une TABULATION


Les caractères accentués :
Ajouter dans la partie head (en tête) : <meta charset="utf8">

  • é s'écrit & eacute;

Diacritiques d'ISO 8859-1
caractère référence d'entité remarque
Á &Aacute; acute pour l'accent aigu
 &Acirc; circ pour l'accent circonflexe
À &Agrave; grave pour l'accent grave
Å &Aring; ring pour le rond en chef
à &Atilde; tilde pour le tilde
Ä &Auml; uml (Umlaute) pour le tréma
Ç &Ccedil; cedil pour la cédille
Ø &Oslash; slash pour la barre oblique

Source de ce tableau
Utilisation de l'inspecteur.


Les liens intra-pages : <A href="#Debut">Revenir au début de ce document</A>
Revenir au début de ce document.

Les adresses URL
Les adresses du Web ou URL ( Uniform Resource Locator ) sont du type : http://depinfo.u-cergy.fr/licence/l1/introinfo.html#cours
  • Le protocole: http
  • Le serveur (sous domaine + nom de domaine): depinfo.u-cergy.fr
  • Le fichier avec son chemin: licence/l1/introinfo.html
  • Un ancrage: #cours

L'adresse indiquée dans le lien ( URL) peut être absolue, elle inclut tout le chemin en commençant par le protocole:
Ou relative, elle n'inclut qu'une partie du chemin:
  • Pages_chats/monfichier.html

Quelques tags supplémentaires du langage de description de pages HTML :
  • sub : Ai
  • sup : Xj
  • big (gros) : Texte gros !
  • b (bold) : Texte en gras
  • small (petit) : Texte en petit
  • i (italique) : Texte en italique
  • u (underligne) : la partie entre balises est soulignée.
  • s (strike) : la partie entre les balises est barrée exemple.
  • p : les balises marquent le début et la fin d'un paragraphe.
  • br : permet un saut de ligne.
  • hr : crée une ligne de séparation visuelle qui apparaît entre deux contenus différents.
  • &nb sp; : espace insécable exemple un texte avec plusieurs           espaces
  • code : ceci est du code et encore du code
    • L'élément HTML <code> représente un court fragment de code machine. Par défaut, on utilise une police à chasse fixe (monospace) afin d'afficher le texte contenu dans cet élément.

Les tableaux :
<table border="1">
  • <tr>
    • <td>première ligne - première colonne     </td>
    • <td bgcolor="#D6792D">première ligne - seconde colonne     </td>
  • </tr>
  • <tr>
    • <td bgcolor="aqua">seconde ligne - première colonne</td>
    • <td>seconde ligne - seconde colonne</td>
  • </tr>
</table>

Ce qui donne :
première ligne - première colonne      première ligne - seconde colonne     
seconde ligne - première colonne seconde ligne - seconde colonne


  • L'attribut Align de la balise <TD> permet d'aligner horizontalement le texte ou l'image dans un tableau (à droite, au centre et à gauche). L'attribut Valign de la balise <TD> permet d'aligner verticalement le texte ou l'image (en haut, au milieu et en bas).

Le cours html


Source --> https://perso.univ-rennes1.fr/virginie.sans/l2pw/UElibre_Internet.pdf

Ressources :