Réseau informatique TIC TC - IUT Montpellier Internet et le Web Ensemble d'ordinateurs reliés entre eux et échangeant des informations sous forme de données numériques But : Rendre disponible l information Partager des fichiers, applications Communiquer 2 Historique - 1 Historique - 2 Projet ARPANET du DOD en 1969 : Advanced Research Projects Agency NETwork réseau d ordinateurs militaires robuste aux attaques sécuriser les accès au réseau en envoyant des datagrammes 1971 : premier courrier électronique, utilisation de @ 1974 : TCP / IP Transfert Control Protocol/Internet Protocol Fournit une adresse *unique* à chaque ordinateur afin de pouvoir acheminer les *datagrammes* Exemple adresse IP :193.50.234.15 1983: DNS (Domain Name System) Noms associés aux adresses IP pour faciliter leur utilisation 3 4 1
Adresse DNS Internet Trois parties : 1) le nom du serveur (ordinateur) 2) l organisme ou société à qui appartient le serveur (domaine) Ensemble des réseaux qui communiquent entre eux via le protocole TCP/IP Adresse IP Adresse IP 3) le domaine général (TLD : Top Level Domain) Type : com, edu, gov, mil, org, net Pays : fr, be, uk, ca, Autres : biz, info, eu IP : 195.202.0.36 www.framasoft.net Celle par défaut du serveur / achetée 5 6 Internet Services principaux Le World Wide Web Courrier électronique Transfert de fichiers (ftp) Connexion à distance (telnet/ssh) Les newsgroups World Wide Web Né en 1989 au CERN en Suisse : système efficace de consultation et de stockage des publications Modèle client-serveur Les ressources sont placées sur des *serveurs* Les clients ont accès via des *navigateurs* Chaque ressource possède un identifiant unique, l URL http://www.framasoft.net/logiciels/rubrique2.html 7 8 2
Requête WWW Requête WWW http://smithsonian.yahoo.com/www1a.html http://smithsonian.yahoo.com/www1a.html 9 10 Être présent sur le Web Construction d un site Agrégateurs de contenu (netvibes) Communautés (forums, facebook, twitter) Blogs Wiki, CMS Technologies du web (HTML,css, php, flash, ) -Connaissances techniques - " Engagement" Un site est constitué de plusieurs pages Définir la structure du site (arborescence) Éviter les majuscules, les accents, les espaces dans les noms de fichiers / dossiers Contrôler la profondeur («3 clics») Définir la charte graphique Créer les pages Hébergement et nom de domaine Transfert des fichiers (FTP) Validation (technologies utilisées, temps de chargement, compatibilité) 11 12 3
Langage HTML La page Web HyperText Markup Language Langage de description (utilisation de *balises*) Format texte : rapide lors de la communication et très accessible Le code voyage sur Internet et est ensuite interprété par un navigateur (le rendu peut varier!) Permet l intégration de nouvelles technologies (liens et plugins) Une «page» = un fichier texte Extension : html (ou htm) Contient uniquement du texte (contenu et balises) Possibilité d utilisation des feuilles de style (CSS) Deux outils : Outil de composition Outil d affichage 13 14 Les balises Balises fondamentales Une balise Indique une action pour le navigateur et ses modalités Principe Les balises vont par paires encadrant un texte à mettre en forme Balise début : <xxx attribut1=valeur1 attribut2=valeur2> Balise fin : </xxx> Faire attention à les imbriquer correctement Sans ces balises le document ne peut être lu par le navigateur le début et la fin d un document html : <html> </html> l en-tête (décrit le document html): <head> </head> le corps du document (l information affichée) : <body> </body> 15 16 4
Document HTML Les listes Copier le document pagevide.html Ouvrir Notepad++ Titre de la page Type MIME Jeu de caractères Liste à puces <ul></ul> Liste numérotée <ol></ol> Élément de liste <li></li> 17 18 Mise en forme Les liens Arrière-plan <body background="texture.gif" bgcolor= "#90EE90"> Couleur du texte <font color="#xxxxxx"> </font> Images dans le texte <img src="image.jpg" attribut=valeur>*dans le même répertoire que la page <a href="adresse">texte/image</a> Lien externe : URL (adressage absolu) Lien local (adressage relatif) Attribut target ("_blank ) Ancres :endroit précis (sur le même document ou sur un autre fichier) <a name="cible">...</a> Plus <a href="#cible">...</a> <a href="url#cible">...</a> 19 20 5
Balises de présentation A vous! Titres <h1> Texte du titre 1 </h1> <h2> Texte du titre 2 </h2> Paragraphe <p> texte d un paragraphe</p> <br /> : retour à la ligne <hr /> : trait horizontal TP HTML.pdf 21 22 6