Chapitre1

407 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
407
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
9
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Chapitre1

  1. 1. GRICHI HanenHajjem manelBarbata sana 1
  2. 2. 1. C’est quoi l’internet?2. Historique3. Connexions grand public4. L’Hypertext Markup Language5. Notion de Base du langage HTML6. Exemple de page à réaliser 2
  3. 3. Internet est le réseau informatique mondial qui rendaccessibles au public des services variés comme: • le courrier électronique, Internet ayant été popularisé par lapparition du • la messagerie instantanée etdeux sont parfois confondus World Wide Web, les • le World par le Web, non averti. Wide publicen utilisant  Le World Wide Web nest pourtant que IP (Internet le protocole de communication lune desProtocol). applications dInternet.Son architecture technique qui repose sur unehiérarchie de réseaux, ce qui implique une non-centralisation d’ou la nomination de réseau desréseaux. 3
  4. 4.  Laccès à Internet peut être obtenu grâce à un fournisseur daccès à Internet via divers moyens de communications électroniques: – filaire: réseau téléphonique commuté (bas débit), ADSL, fibre optique jusquau domicile... – sans fil: WiMAX, Internet par satellite, 3G+…Un utilisateur dInternet est désigné en français par lenéologisme « internaute ». 4
  5. 5.  En juillet 1962 (Licklider du Massachusetts Institute of Technology ): textes décrivant les interactions sociales qui seraient possibles avec un réseau dordinateurs.  Faciliter les communications entre chercheurs de la Defense Advanced Research Projects Agency (DARPA). En octobre 1962, Licklider fut le premier chef du programme de recherche en informatique de la DARPA  de lintérêt des réseaux informatiques. En 1965, Roberts testa avec Thomas Merrill la première connexion informatique à longue distance, entre le Massachusetts et la Californie. 5
  6. 6.  Entre 1962 et 1965, le groupe de la RAND avait étudié la transmission par paquets pour larmée américaine(réseau non centralisé). Le Network Working Group (NWG) conduit par Steve Crocker finit le protocole de communication poste-à-poste en décembre 1970. En 1972, Ray Tomlinson mit au point la première application importante : le courrier électronique. 6
  7. 7.  Le concept dInternet est né (Advanced Research Projectsle nom de ARPANET dARPANET (en 1972 sous Agency Internetting) Network) est le premier réseau à transfert de paquets développé aux États-Unis par la DARPA. Le protocole NCP dARPANET ne permettait pas  dadresser des hôtes hors dARPANET ni  de corriger déventuelles erreurs de transmission.  Kahn décida donc de développer un nouveau protocole, qui devint finalement TCP/IP. Le début des années 1990 : la naissance dInternet . L’année 1993 voit l’apparition du premier navigateur Web ou (browser), supportant le texte et les images.  La National Science Foundation (NSF) mandate une compagnie pour enregistrer les noms de domaine. 7
  8. 8. Un canal de communication vers le fournisseur daccès : Fibre optique, Ligne téléphonique fixe : ligne analogique, xDSL, Ligne téléphonique mobile : 3G+, 3G, Edge, GPRS, GSM (CSD), Internet par satellite, Wi-Fi…Un ordinateurpersonnel,Assistantpersonnel,Console de jeuxvidéo, Téléphonemobile … 8
  9. 9. du texte, des liens,des images, 9
  10. 10.  L’Hypertext Markup Language, généralement abrégé HTML, est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom.  Un système hypertexte est un système contenant des nœuds liés entre eux par des hyperliens permettant de passer automatiquement dun nœud à un autre. HTML est initialement dérivé du Standard Generalized Markup Language (SGML). 10
  11. 11.  HTML permet également de structurer sémantiquement et de mettre en forme le contenu des pages, d’inclure des ressources multimédias  des images,  des formulaires de saisie,  des éléments programmables (applets) Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade). 11
  12. 12. Le langage HTML a été mis au point par Tim Berners-Lee,à partir de 1989.À partir de 1993 on considère létat du HTML suffisammentavancé pour parler de langage (HTML 1.0). Le navigateur internet utilisé à lépoque était nommé NCSA Mosaïc.Novembre 1995 : la première version officielle de HTML(HTML 2.0). 12
  13. 13. Après le HTML 3.0, le HTML 3.2 devint le standardofficiel le 14 janvier 1997.Les apports les plus marquants du HTML 3.2 étaient lastandardisation des tableaux ainsi que dun grand nombredéléments de présentation.Le 18 décembre 1997, le HTML 4.0 a été publié. Laversion 4.0 du langage HTML standardise notamment lesfeuilles de style et les cadres (frames).La version HTML 4.01, apparue le 24 décembre 1999apporte quelques modifications mineures au HTML 4.0. 13
  14. 14. Cadre Générale (1) Vos besoins Logiciels:  Un éditeur du texte simple pour écrire du HTML: Bloc note, Notepad,…  Un éditeur du texte évolué, dit "WYSIWYG": Dreamweaver, FrontPageé, …  Un navigateur web pour interpréter la langage HTML et afficher le résultat: Netscape, Internet Explorer,… 14
  15. 15. Cadre Générale (2) 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 … <marqueur attribut= « argument»>Texte Ici</marqueur> Les balises peuvent posséder un ou plusieurs attributs qui permettent de spécifier laction de la balise. Toujours mettre la valeur de lattribut entre guillemets. 15
  16. 16. Structure d’un fichier HTML (1) Type de document: <html></html> ( au début et à la fin du document) Titre:<title></title> (nom du fichier; doit être dans lentête) <BODY bgcolor="blue" > En-tête: <head></head> (l’entête du document) <BODY bgcolor="#000099" > Corps: <body></body> (corps du document) <BODY bgcolor= rgb (240, 245, 128) > HTML n’est pas sensible à la casse 16
  17. 17. Structure d’un fichier HTML (2)Faisons ensemble notre premier document Html: Ouvrir léditeur de texte. Ecrire les codes Html suivants:<html><head> <title>Premier Document Html </title> </head><body> Bienvenue à ma page personnelle </body></html> Enregistrer le document avec lextension .html ou .htm17
  18. 18. Contenu d’un document Html Tout document Html peut contenir:  Texte  Image  Lien Hypertexte: C’est un lien qui permet la liaison entre différents documents Html 18
  19. 19. Mise en forme du texte Le texte du document Html est écrit entre les balises: <body> et </body> La langage Html permet la mise en forme du texte en l’argument avec des balises spécifiques Si différentes formes sont appliqués sur un texte, on doit respecter l’ordre des balises. <gras><italique> Le cours HTML</gras></italique> <gras><italique> Le cours HTML </italique></gras> 19
  20. 20. Mise en forme du texteGras [Bold]: <B>...</B> ou <STRONG>...</STRONG>Italique [Italic]: <I>...</I> ou <EM>...</EM>Taille de caractère [Font size]: <FONT SIZE=?>...</FONT>Couleur de caractère[Font color]: <FONT COLOR="#$$$$$$"> …</FONT>A la ligne [Line break]: <BR>Commentaires [Comments]: <!-- *** -->Centrage [Center]: <CENTER> </CENTER>Fond d’écran <BODY BGCOLOR="#000088« >Alignement <p align=left>...</p> <p align=center>...</p> <p align=right>...</p> 20
  21. 21. Mise en forme du texte: code couleur 21
  22. 22. Les Titres et les listesTitres [Heading] <Hn></Hn> avec n=1 à 6 Afficher un titre de niveau nListe non-ordonnée [Bullet list] <UL></UL>Liste ordonnée [Numbered list] <OL></OL>Elément de liste [List items] <LI> </LI>A la ligne [Line break]: <BR>Paragraphe [Paragraph] <P></P> Saut de ligne, insérer une ligne vierge et commencer un paragraphe 22
  23. 23. Insertion: image et séparateurs Insertion d’image <IMG SRC="Adresse de limage"> La balise image possède de nombreux attributs: Dimensions: width=? height=? border=? (en pixels) Alignement: align=top||middle||botton||left||right Insertion de ligne horizontale <HR> Ligne horizontale [Horizontal Rule] <HR size=?> Epaisseur en pixels <HR width=?> Largeur en pixels <HR width="%"> Largeur en % de la fenêtre <HR align=left> Alignement par apport à la fenêtre 23
  24. 24. Insertion des liens• Lien ExterneUn lien vers un autre document Html sur la même machine ou une machine distante <A HREF="URL" Name= " lien " ></A>• Lien InterneC’est un pointeur vers un endroit précis du même document ou dun autre fichier. Cest ce quon appelle les ancres, ancrages ou pointeurs<A NAME="***">...</A> Ceci est une cible<A HREF="#***">...</A> Lien vers la cible *** dans la même page 24
  25. 25. Insertion des tableaux En Html, les tableaux servent non seulement à aligner des chiffres mais surtout à placer des éléments à lemplacement que vous souhaitez.  Définition du tableau [Table] <TABLE></TABLE>  Définition dune ligne [Table Row] <TR></TR>  Définition dune cellule [Table Data] <TD></TD> 25
  26. 26. Insertion des tableaux Exemples<TABLE border=1 ><TR><TD>1</TD><TD>2</TD></TR> 1 2<TR> 3 4<TD>3</TD><TD>4</TD></TR></TABLE> 26
  27. 27. Titre de la page En-tête 1 Ma page perso: Nom et prénomArrière Plan Lien de l’université En-tête 3 @mail Votre image Lien courrier Cursus Annés Niveau Etablisement Tableau invisible En-tête 2 Centré Liste des matières préférées: a Liste à puces abc b Liste des loisirs 1 Liste à puces 123 2 27

×