Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Technologies Web Pr : Ilham Oumaira Mail: oumaira@gmail.com 1 Descriptif du Mod

Technologies Web Pr : Ilham Oumaira Mail: oumaira@gmail.com 1 Descriptif du Module Elément(s) du module Volume horaire (VH) Cours TD TP Evaluation VH global HTML5/CSS3/JAVASCRIPT 10 12 4 26 Langage PHP 12 12 4 28 VH global du module 22 24 8 54 Partie 1: HTML HTML: le plan 1. Introduction 2. Les balises de structure 3. Les textes 4. Les tableaux 5. Les images 6. Les cadres 7. les formulaires 8. les feuilles de styles Css2 9. les bases du HTML5 10. les feuilles de styles CSS3 Introduction Internet et le Web  Internet : C'est un réseau de réseaux, sans centre névralgique, composé de millions de réseaux aussi bien publics que privés, universitaires, commerciaux et gouvernementaux  Différentes applications : – Courrier électronique – Web – Échange de fichiers (FTP, peer-to-peer) – Vidéoconférence, forum, chat, collecticiel,…  Le World Wide Web (WWW), littéralement la « toile d’araignée mondiale », communément appelé le Web, et parfois la Toile, est un système hypertexte public fonctionnant sur Internet permettant de consulter, avec un navigateur, des pages accessibles sur des sites.  Internet ayant été popularisé par l'apparition du World Wide Web, les deux sont parfois confondus par le public non averti. Le World Wide Web n'est pourtant que l'une des applications d'Internet Historique du Web (1)  1960 : Projet de création du réseau ARPANET par DARPA (Defense Advanced Reseach Projects Agency des Etats Unis). Le but était de concevoir un réseau résistant à des attaques militaires.  1969 : Production d’un réseau expérimentale de quatre nœud reliant ainsi les universités américaines travaillant sur ce projet.  1973 : – 1973, Création du protocole TCP/IP ,Langage utilisé pour communiquer entre machines – La première connexion internationale est réalisée entre l' University College de Londres et le Royal Radar Establishment (Norway).  1980:Tim Berners-Lee, un chercheur au laboratoire CERN de Genève, mit au point un système de navigation hypertexte baptisé Enquire permettant de naviguer entre plusieurs sites. Historique du Web (2)  1990: – Tim Berners-Lee met au point le protocole HTTP (Hyper Text Tranfer Protocol), ainsi que le langage HTML (HyperText Markup Language) permettant de naviguer à l’aide de liens hypertextes, à travers les réseaux. – Le nom ARPANET est abandonné au profit d' INTERNET – Le World Wide Web est né.  1994 : Création du W3C (World Wide Web Consortium) – un organisme de normalisation à but non lucratif – but : standardisation et développement du Web – président : Tim Berners-Lee  1994 : Création de Yahoo!  1995 : Microsoft lance la « guerre des navigateurs » : Apparition d’Internet Explorer pour Windows 95  1995 : Altavista : premier « gros » moteur de recherche  1996 : Navigateur Opera Historique du Web (3)  1998 : Apparition de Google  2003 : Apple lance Safari  2004 : Première version de Mozilla Firefox  2004 : première conférence « Web 2.0 »  2008 : Google lance Google Chrome  Actuellement : explosion du Web mobile Web 1.0  Web 2.0 Protocole de communication  Un protocole est un ensemble de règles qui définissent un langage afin de faire communiquer plusieurs ordinateurs.  Les plus utilisés aujourd’hui : HTTP, FTP, SMTP, POP.  La plupart des ces protocoles sont bâtis autour de TCP/IP : Transmission Control Protocol/Internet Protocol. Protocole de communication (TCP/IP)  TCP/IP (Transmission Control Protocol / Internet Protocol) définit les règles que les ordinateurs doivent respecter pour communiquer entre eux sur le réseau Internet. Il se base sur la notion d’adressage IP  L’adresse IP est une adresse unique attribuée à chaque ordinateur sur Internet (c’est-à-dire qu’il n’existe pas sur Internet deux ordinateurs ayant la même adresse IP). Versions des adresses IP : Adresse IP version 4 (IPv4) : – les adresses sont codées sur 32 bits. (232 = 4 294 967 296 ) – les adresses sont généralement notées avec quatre champs numériques compris entre 0 et 255, séparés par des points. La version IPv4 est encore actuellement la plus utilisée Versions des adresses IP :  Adresse IP version 6 (IPv6) : – les adresses sont codées sur 128 bits. 2128 – Elle comprend 8 groupes de 4 chiffres hexadécimaux séparés avec : – Exemple 8000:0000:0000:0000:0123:4567:89AB:CDEF Le protocole HTTP(1) Le protocole HTTP (HyperText Transfer Protocol) est le protocole le plus utilisé sur Internet . Il permet un transfert de fichiers hypertextes(essentiellement au format HTML) localisés entre un client et un serveur Web Utilise les adresses URL (Uniform Ressource Locator) La forme d’une adresse URL : http:\\www.serveur.suffixe Le protocole HTTP(2) Correspondance Adresse IP - Url : Les serveurs DNS Chaque serveur directement connecté à internet possède une adresse IP propre. Cependant, les utilisateurs ne veulent pas utiliser des adresses numériques du genre 64.64.7.202 mais avec un nom de domaine plus explicites du type http://www.univ-ibntofail.ac.ma/ensak/ Ainsi, il est possible d’associer des noms en langage courant aux adresses numériques grâce à un système appelé DNS (Domain Name System). Un serveur DNS est un ordinateur faisant la liaison entre un nom de domaine et son adresse IP. Un serveur DNS contient donc une table de correspondance entre un nom de domaine et adresses IP. Correspondance Adresse IP - Url : Les serveurs DNS Correspondance Adresse IP - Url : Les serveurs DNS Interroger un serveur DNS On peut interroger le serveur DNS pour connaître l’adresse IP correspondant à un nom de domaine. Pour cela deux commandes : nslookup ou ping. Sous une invite de commandes DOS tapez la commande : nslookup www.univ-ibntofail.ac.ma Ou ping www.univ-ibntofail.ac.ma Correspondance Adresse IP - Url : Les serveurs DNS Langage HTML : Définition HTML : Hyper Text Markup Language est né en 1989 par Tim Berners Lee C'est un langage de balisage qui permet de mettre en forme des pages html : apparence et présentation Les documents disponibles sur le Web sont écrits en langage HTML. Un document est dit hypertexte lorsqu’il permet d’accéder à d’autres documents au moyen d’un simple clic de souris sur une partie de son texte. Un document HTML peut incorporer du texte, des images, de l'animation et du son. Un exemple avant d’aller plus loin  Lancer bloc note  Tapez le code • Enregistrer le fichier avec le nom: page1. html • Exécuter la page Résultat Historique de HTML (1) – Conçu par Tim Berners-Lee au CERN en 1990 – Dérivé de SGML- Standard Generalized Markup Language : • SGML est un langage de description de document pour échange entre systèmes hétérogènes. – Rendu populaire en 1993 par Mosaic – Suivi de nombreuses extensions diverses • Novembre 1995: HTML 2.0 défini par IETF • Janvier 1997: HTML 3.2 défini par W3C • Décembre 1997: HTML 4.0 défini par W3C • HTML+ (1993) et HTML 3.0 (1995) sont non standards HTML : Evolution  HTML 1.0 – Texte de base, images, liens hypertextes  HTML 2.0 – Formulaires de saisie  HTML 3.2 – Justification (gauche, centre, droite) – Tableaux – Équations mathématiques  HTML 4.0 – Feuilles de style De quoi on a besoin pour créer des pages HTML?  Une page HTML est un fichier du texte qui est composé par: – Le contenu de la page à visualiser par le navigateur. – Un certain nombre de commandes appelées balises ou tags interprétés par le navigateur.  Pour créer et visualiser de pages HTML on a besoin d'au moins : – Un éditeur de texte tout simple comme par exemple le Bloc-notes ou Notepad de Windows ou tout autre éditeur équivalent. – Un navigateur: Microsoft Internet Explorer, Google chrome, Mozilla Firefox ,Opera. Les éditeurs HTML 1- Le mode graphique: repose sur le principe de WYSIWYG (What you see is what you get) (ce que vous voyez est ce que vous obtenez) c.à.d. la création se fait d’une façon visuelle. 2 – Le mode texte ( ou code ) : l’éditeur HTML est considéré comme un simple éditeur de texte où la génération de code se fait ligne par ligne. Exemples des éditeurs HTML WYSIWYG :  Dreamweaver: Adobe (Macromedia),complet, payant!!!  Amaya: développé par W3C, gratuit et open-source  NVU / KompoZer: l'éditeur HTML de Mozilla Exemples des éditeurs HTML texte  Brackets: léger, rapide et très complet  Komodo : Komodo edit est gratuit contrairement à Komodo IDE  Notepad++: un éditeur HTML simple, mais très rapide, pour éditer les fichiers. Il permet de faire des recherches par mots clés dans les fichiers et bien paramétré, vous aurez aussi accès à l'auto-complétion etc. Il offre de nombreuses possibilités et peut être une solution simple pour de nombreux langages.  NetBeans est un éditeur de code généraliste particulièrement adapté à HTML, CSS, PHP et Java. Il offre des outils puissants comme l'autocomplétion et tout un tas d'aide à la création de code. Pour les gros projets, Netbeans semble mieux convenir alors que notepad++ est peut- être plus adapté au petit projets.  Eclipse HTML Editor: pour les habitués de cet IDE Les Navigateurs Web  Le but principal d'un navigateur est de présenter uploads/s3/ se-ance-1-2.pdf