Remerciez-le!

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

1 Université Ibn-Tofail Faculté des Sciences Département d’Informatique Kenitra

1 Université Ibn-Tofail Faculté des Sciences Département d’Informatique Kenitra Cours d’informatique 4 SMP/SMC - Semestre 4 HTML et Réseaux Informatique Pr. Moulay Youssef HADI hadi-moulay-youssef@univ-ibntofail.ac.ma Année universitaire 2011/2012 2 Chapitre I: Programmation HTML 1 Introduction Internet est un système mondial d'interconnexion de réseaux informatiques, utilisant un ensemble standardisé de protocoles de transfert de données. C'est donc un réseau de réseaux, composé de millions de réseaux aussi bien publics, privés, universitaires, commerciaux et gouvernementaux. Internet transporte un large spectre d'information et permet l'élaboration d'applications et de services variés comme le courrier électronique, la messagerie instantanée et le World Wide Web (le Web). Le Web est donc un service offert par Internet basé sur une un architecture client-serveur dont le fonctionnement s’apparente à des relations client-fournisseur. L'ordinateur personnel, doté de son logiciel de navigation ou navigateur (Internet Explorer, Firefox, Google Chrome, ...), joue le rôle du client. Les ordinateurs distants sur lesquels sont hébergés les sites web sont des serveurs. Clients et serveurs, connectés au réseau Internet, communiquent entre eux à travers des protocoles. Lorsque l'on saisit l'adresse d'un site web - appelée URL - dans son navigateur ou que l'on clique sur un lien hypertexte, le navigateur envoie une requête au serveur qui va la traiter et lui renvoyer via Internet les données demandées (page web, image, vidéo...). Le navigateur interprète les données reçues et les affiche à l'écran. 3 Un site web est un ensemble de pages (documents) organisées en structure hiérarchique, disponible sur un serveur. Il peut être construit avec des pages statiques, des pages dynamiques ou un assemblage des deux : - les pages statiques sont adéquates pour présenter une information pérenne. - les pages dynamiques se justifient quand des modifications fréquentes doivent être effectuées, typiquement mensuelles, hebdomadaires ou quotidiennes. Pour des modifications annuelles ou semestrielles, les pages statiques sont préférables car, étant plus durables, elles peuvent être mieux positionnées en référencement naturel sur les moteurs de recherche (Google, Yahoo, Bing, …). Exemple de pages statiques : présentation d'une société ou d'un organisme, page de contact, présentation d'un produit ou d'un service, conditions générales de vente... Exemple de pages dynamiques : les news, les annonces de recrutement, la liste des points de vente, un blog, les pages produits d'un site marchand. Les pages statiques requièrent des compétences de spécialiste car elles sont "traduites" en langage web. Elles sont écrites en HTML ou XHTML et mises en forme à l'aide de feuilles de style CSS pour la disposition des contenus (titres, blocs de texte, images...). De plus, elles doivent être conformes aux normes de référence, par exemple XHTML 1.0, CSS 2, et validées. 2 Le langage HTML Les documents disponibles sur le Web sont écrits en langage HTML (Hyper-text Markup Language). 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. 4 Le navigateur (ou browser) est un logiciel qui permet d’afficher les pages écrites en langage HTML. Si vous êtes connectés à Internet, il vous permettra de naviguer sur le Web. Les logiciels navigateurs les plus utilisés sont : Microsoft Internet Explorer et Netscape Navigator, FireFox, Google Chrome. Une page HTML est un fichier Ascii (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. Ces balises se distinguent du contenu de la page par les signes < et >, par exemple <html>. Quand on écrit les balises d'une page HTML, Il faudra toujours garder à l'esprit qu'une balise marque une action pour le navigateur: ce qu'il doit faire. 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++ ou tout autre éditeur équivalent.  Un navigateur : Microsoft Internet Explorer et Netscape Navigator, FireFox, Google Chrome ou autre. Les fichiers HTML doivent être enregistrés avec l'extension .html ou .htm. Pour écrire, visualiser et mettre à jour une page HTML, on procédera comme suit:  Utiliser un éditeur de texte pour créer le fichier HTML  Sauvegarder ce fichier avec l'extension .html ou .htm (ne pas fermer l'éditeur)  Ouvrir le navigateur.  Afficher le document via le menu Fichier/Ouvrir… (ou File/Open file...) Pour d’éventuelles modifications, il n'est pas nécessaire d’ouvrir à chaque fois le navigateur:  Retourner dans l'éditeur de texte (sans fermer le navigateur).  Modifier les codes Html. 5  Enregistrer le fichier.  Utiliser la commande Actualiser (Recharger ou Reload) du navigateur. 1.1 Structure de base d’un document HTML La structure de base d'un document HTML est: <HTML> <HEAD> <TITLE> Titre du document </TITLE> </HEAD> <BODY> Le corps du document </BODY> </HTML> L’ouverture du document dans un navigateur donne le résultat suivant : Le langage HTML est un langage utilisant des balises (délimiteurs) : Pour apporter une modification à une portion de texte, vous devez encadrer ce texte entre deux balises. Par exemple, pour souligner le texte « La faculté des sciences », il faut délimiter ce texte par : <U> La faculté des sciences </U> HTML utilise deux types de balises :  Autonome: il s'agit des balises monolithiques entre < et > comme <br> (retour à la ligne).  Conteneur: ce sont les balises possédant un début entre < et >, et une fin entre </ et > comme <U>...</U>. 6 Les identifiants de balises ne sont pas sensibles à la casse. Certaines balises sont associées à un ou plusieurs attributs. Ces derniers précisent une autre action à exécuter par le navigateur. Chaque attribut à un identifiant et une valeur (entre "" et après =), par exemple : <IMG SRC= "photo.gif">. Vous pouvez insérer des commentaires dans vos pages HTML (ceux-ci seront invisibles lors de l’affichage de la page), en utilisant la balise . Remarque : Si vous voulez insérer deux balises dans une page HTML, il ne faut jamais écrire : <BALISE1> texte1 <BALISE2> texte2 </BALISE1> texte3 </BALISE2>. 1.1.1 Balises de structure - <HTML>...</HTML> : indique qu'il s'agit d'un document HTML. Tout le contenu et le code HTML doivent être inclus entre <HTML> et </HTML>. - <HEAD>...</HEAD> : Contient les balises qui composent l'en-tête du document (titre,…). - <TITLE>...</TITLE> : Donne un titre descriptif du document. Ce titre s'affiche sur la barre de titre des navigateurs. Exemple: <TITLE> Faculté des Sciences, Kénitra </TITLE> - <BODY>...</BODY> : Contient l'ensemble du contenu et des balises qui constituent le corps du document. Syntaxe: <BODY Bgcolor="couleur d'arrière-plan" Background="URL de l'image d'arrière-plan" Link="couleur des liens non visités" VLink="couleur des liens visités" ALink="couleur des liens activés" Text="couleur du texte" > Corps du document </BODY> 7 Chaque attribut de couleur peut prendre pour valeur l'un des 16 noms de couleurs réservés: Black, White, Aqua, Silver, Gray, Maroon, Red, Purple, Fuschia, Green, Lime, Olive, Yellow, Navy, Blue et Teal, ou un nombre de six chiffres hexadécimaux codant les intensité de RVB (exemple : Blue=#0000FF). Exemple : <BODY Bgcolor="fuschia" Text="Maroon"> Contenu et code HTML du corps de document… </BODY> Il existe d'autres balises de structure particulières qu'on verra par la suite. 1.1.2 Balises de formatage et mise en page Ces balises permettent d'utiliser divers attributs de police, de style et de mise en forme. - <B>...</B> : Affiche le texte en gras. - <I>...</I> : Affiche le texte en italique. - <U>...</U> : Affiche le texte en souligné. - <S>...</S>, <STRIKE>...</STRIKE> : Affiche le texte en barré (barré). - <SUB>...</SUB> : Affiche le texte en indice. - <SUP>...</SUP> : Affiche le texte en exposant. - <Hn>...</Hn> où 1  n 6 : Etablit une hiérarchie entre les niveaux de titre du document. La taille du caractère décroît pour chaque niveau de titre, <H1> étant le plus élevé. Les titres s'affichent en gras. Syntaxe: <Hn ALIGN = "LEFT/RIGHT/CENTER/JUSTIFY"> texte </Hn> Où n=1, 2, 3, 4, 5 ou 6. - <BR> : Insère un saut de ligne dans le document. Les retours chariot dans le code HTML n'étant pas interprétés par le navigateur, les sauts de lignes doivent être alors exprimés explicitement par la balise <BR>. 8 - <CENTER>...</CENTER> : Centre tous les textes et les éléments contenus dans la balise - <DIV>...</DIV> : Applique un alignement spécial à une partie du document. Syntaxe: <DIV ALIGN = "LEFT/RIGHT/CENTER/JUSTIFY">….</DIV> L'attribut ALIGN détermine l'alignement du texte ou des éléments inclus entre <DIV> et </DIV>. Il peut prendre les valeurs LEFT, RIGHT, CENTER ou JUSTIFY.  <HR>: Insère une ligne horizontale. Les lignes horizontales permettent de scinder la page en plusieurs sections. Syntaxe: <HR ALIGN="alignement" NOSHADE SIZE= épaisseur WIDTH=longueur> - ALIGN: spécifie l'alignement de la ligne. Il prend les valeurs LEFT, RIGHT ou CENTER qui est la valeur par défaut. Il n'a d'effet que lorsque la longueur de la ligne est inférieure à la largeur de la page. - NOSHADE: Supprime l'ombrage 3D et n'affiche qu'une ligne simple. - SIZE: Spécifie l'épaisseur (en pixels) de la ligne. - WIDTH: spécifie la largeur de la ligne. Il peut prendre une valeur en uploads/s1/ cours-info-4.pdf