HTML TD 9

1
HTML TD 9

• Utilisation dInternet
• Création dune page Web

2
Internet Concepts generaux

• World Wide Web (www ou W3) ou Web réseau
  dordinateurs à léchelle mondiale créé dans les
  années 60 formant Internet
• Navigateurs (Internet Explorer, Netscape)
  applications pour simplifier lutilisation du
  Web.
• HTML (HyperText Markup Langage) le langage
  universel utilisé pour concevoir des pages Web
• Pages Web des pages pouvant être transportées
  sur le réseau Internet et lues par des navigateurs

3
Internet Concepts generaux

• Protocoles de communication
• TCP/IP (Transmission Control Protocol/Internet
  Protocol) est un ensemble des protocoles de
  communication utilisés dans Internet, permettant
  de gérer la circulation des données dans le
  réseau tout en assurant le bon échange des
  données entre un point et un autre du réseau
• POP3 ( Post Office Protocol ) permet à un
  utilisateur d'interroger son courrier situé dans
  la boîte aux lettres de son serveur ou
  fournisseur
• SMTP (Simple Mail Transfert Protocol ) est
  employé pour les envois de courrier électronique
• PPP (Point to Point Protocol) permet d'utiliser
  une ligne téléphonique et un modem en TCP/IP
• FTP (File Transfer Protocol) permet le transfert
  de fichiers entre le serveur FTP et votre
  ordinateur.
• HTTP ( HyperText Transfert Protocol ) est un
  protocole de transfert indispensable pour que
  deux ordinateurs connectés à Internet se
  comprennent. Comme la plupart des protocoles
  Internet, c'est un protocole texte basé sur TCP.
  Il suffit donc d'ouvrir une connexion TCP sur le
  port 80 du serveur, et d'envoyer une requête
  texte vers le serveur

4
HTML - 1

• HTML (HyperText Markup Language) est un langage
  de balises qui permet aux navigateurs Web
  (Netscape, Internet Explorer) de visualiser des
  fichiers. Pour éditer un fichier HTML, un éditeur
  de texte simple suffit (NotePad (Bloc-notes) sur
  PC, SimpleText sur MAC).

5
HTML - 2

• Le principe général est davoir une balise
  ouvrante et une balise fermante encadrant le
  texte sur lequel sapplique cette balise.
  Certaines balises peuvent être complexifiées par
  différents paramètres permettant dagir, par
  exemple, sur la mise en page
• Les balises respectent la syntaxe suivante
• ltbalise ouvrantegt le texte entre la balise
  ouvrante et la balise fermante lt/balise fermantegt

6
HTML Exercice 1 (1)

• Créez (avec un editeur de texte) un document
  PageWeb.htm en utilisant les balises sur les
  pages suivantes et affichez ensuite le document
  dans un navigateur Web.
• Comme thème du document, sélectionnez un film sur
  le site WEB allo-ciné  http//www.allocine.fr
  Vous pouvez rechercher à laide de moteurs de
  recherche Yahoo, Altavista, Google, Voilà, des
  documents en rapport avec votre choix (les
  acteurs, les réalisateurs, les thèmes abordés par
  le film,)
• http//www.yahoo.fr
• http//fr.altavista.com
• http//www.google.fr
• http//www.voila.fr/

7
HTML Exercice 1 (2)

• lthtmlgt lt/htmlgt encadre le document
• ltheadgtlt/headgtencadre len-tête du document
• lttitlegt lt/titlegt encadre le titre du document
• ltbody bgcolor"FFFFFF" text"000000"gt lt/bodygt
  encadre le corps du document. Le paramètre
  bgcolor permet de spécifier la couleur du fond de
  la page, le paramètre text permet de spécifier la
  couleur du texte. Ces deux paramètres ne sont pas
  obligatoires.

8
HTML Exercice 1 (3)

• ltpgtlt/pgt
• ltp align"center"gtlt/pgt
• ltp align"right"gtlt/pgt encadre chaque paragraphe
  Le paramètre align permet de spécifier
  lalignement. Par défaut, le texte est aligné à
  gauche.
• ltbgtlt/bgt le texte compris entre ces deux balises
  est mis en gras
• ltigtlt/igt le texte compris entre ces deux balises
  est mis en italique
• ltfont color"0000FF"gtlt/fontgt
• ltfont face"Comic Sans MS"gtlt/fontgt
• ltfont size"1"gtlt/fontgtpermet de spécifier la
  couleur color, la police face ou la taille size
  du texte situé entre les balises. Les paramètres
  peuvent être cumulés. Il suffit décrire, à
  lintérieur de la balise font les différents
  paramètres avec leur valeurs en les séparant dun
  blanc.
• lth1gtlt/h1gt lth2gtlt/h2gt lth3gtlt/h3gt lth4gtlt/h4gt
  lth5gtlt/h5gt lth6gtlt/h6gtencadre les titres dont les
  styles sont différents

9
HTML Exercice 1 (4)

• lta href"mailtoadresse_at_mail.fr"gtE-maillt/agt le
  texte situé entre les balises est un lien
  hypertexte vers ladresse mail spécifiée
• lta href"http//www.univ-lyon2.fr/"gtUniversité
  Lyon 2lt/agt
• lta href"http//www.univ-lyon2.fr/"
  target"_blank"gt Université Lyon 2 lt/agtle texte
  ou limage situé entre les balises est un lien
  hypertexte vers la page web spécifiée elle
  saffiche dans la page courante ou dans une
  nouvelle page (target"_blank")
• ltimg src "NomImage.jpg" width"150"
  height"100"gt affiche limage de largeur 150
  pixels et de hauteur 100 pixels dont le chemin
  est spécifié entre guillemet

10
HTML Exercice 1 (5)

• ltulgtlt/ulgt encadre une série de puces
• ltolgtlt/olgt encadre une série énumérative
• ltligtlt/ligt encadre un puce ou une numération
• Les caractères spéciaux
• eacute accent aigu sur la e
• agrave accent grave sur le a
• ucirc accent circonflexe sur le u
• iuml tréma sur le i
• ccedil ç
• nbsp ligne vide

11
HTML Exercice 2

• Construisez le même fichier à laide de Microsoft
  Word et sauvegardez-le en format .html.