Remerciez-le!

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

La programmation WEB 2005/2006 © 28 TABLE DES MATIERES PARTIE 2 Chapitre 1 : Le

La programmation WEB 2005/2006 © 28 TABLE DES MATIERES PARTIE 2 Chapitre 1 : Le HTML 1.1 Introduction 1.2 Structure de base d’un document HTML 1.3 Balises de structure 1.4 Balises de formatage et mise en page 1.5 Balises de listes 1.6 Balises d’hyperliens 1.6.1 Les liens 1.6.2 Les ancres 1.7 Les images 1.8 Les tableaux 1.8.1 Balises de tableaux 1.8.2 Légende 1.8.3 Fusion des cellules 1.9 Les cadres : Frames 1.10 Les formulaires 1.10.1 Création de formulaire 1.10.2 Composants des formulaires 1.10.2.1 Zones de texte 1.10.2.2 Cases à cocher 1.10.2.3 Boutons d’option 1.10.2.4 Zones de liste 1.10.2.5 Boutons de commande 1.11 Microsoft FrontPage Chapitre 2 : Javascript 2.1 Introduction 2.2 Javascript le langage 2.2.1 Variables 2.2.2 Données 2.2.3 Opérateurs 2.2.4 Déclaration et appel des fonctions 2.2.5 L’expression de conditions if…else 2.2.6 L’expression For 2.2.7 L’expression While 2.3 Javascript et les objets 2.3.1 Définition d’objet 2.3.2 Objets dans Javascript 2.3.3 Objet document (objet de base) 2.4 Javascript et le HTML 2.4.1 Insertion d’une fonction dans un document HTML 2.4.2 Insertion du code de Javascript dans un fichier externe 2.4.3 Insertion d’un événement dans une balise HTML La programmation WEB 2005/2006 © 29 2.5 Javascript et les formulaires 2.5.1 Le contrôle ligne de texte 2.5.2 Le contrôle textarea 2.5.3 Les boutons radio 2.5.4 Les boutons case à cocher 2.5.5 Liste de sélection 2.5.6 Les contrôles Reset et Submit La programmation WEB 2005/2006 © 30 Elément 2 : La programmation WEB Chapitre 1 : Le HTML 1.1. Introduction Le fonctionnement du Web consiste en un échange d’informations entre un ordinateur demandant des informations, appelé client, et un autre ordinateur qui les lui fournit, appelé serveur. Le logiciel client ou navigateur, demande des pages HTML à un serveur situé sur un intranet ou sur Internet. 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. 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. 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 de Windows ou tout autre éditeur équivalent. La programmation WEB 2005/2006 © 31 Un navigateur: Microsoft Internet Explorer, Netscape navigator 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. Enregistrer le fichier. Utiliser la commande Actualiser (Recharger ou Reload) du navigateur. 1.2. 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> 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 : L'en-tête du document La programmation WEB 2005/2006 © 32 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>. 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 < ! Commentaires>. 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.3. 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 Lettres et Sciences Humaines, 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" La programmation WEB 2005/2006 © 33 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> 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.4. 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. Exemple: <B> Sommaire </B> • <I>…</I>: Affiche le texte en italique. Exemple: Avez-vous vu <I>La planète des Singes </I>? • <U>…</U>: Affiche le texte en souligné. Exemple: Il est <U>strictement interdit</U> de manger ou de boire dans cette salle. • <STRIKE>…</STRIKE>: Affiche le texte en barré (barré). Exemple: Les éléments rejetés sont présentés sous le forme: . • <SUB>…</SUB>: Affiche le texte en indice. Exemple: soient a<SUB>1</SUB>, a<SUB>2</SUB> et a<SUB>3</SUB> trois entiers. Résultat: soient a1, a2 et a3 trois entiers. • <SUP>…</SUP>: Affiche le texte en exposant. Exemple: Les 1<SUP>ers</SUP> jours du XXI<SUP>ème</SUP> siècle. Résultat: Les 1ers jours du XXIème siècle. La programmation WEB 2005/2006 © 34 • <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. Exemple: <H1 ALIGN = "CENTER"> Tables des matières </H1> <H2>Introduction</H2><BR> <H2>Chapitre 1</H2><BR> ….. • <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>. Exemple: <H2> Les 10 meilleurs films </H2><BR> Hanibal<BR> Nés pour danser<BR> … • <CENTER>…<CENTER>: Centre tous les textes et les éléments contenus dans la balise Exemple: <CENTER> <B> Les meilleurs films de la semaine</B></CENTER> • <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. Exemple: <DIV ALIGN = "RIGHT"> Cette section est entièrement alignée à droite. ……. </DIV> • <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> La programmation WEB 2005/2006 © 35 - 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 pixels ou en pourcentage de la largeur de la page. Il est recommandé d'utiliser une valeur en pourcentage car on ne peut jamais connaître d'avance la taille d'écran du visiteur. Exemple: <HR WIDTH=80% SIZE=4> • <BASEFONT>: Définit les propriétés de référence du texte uploads/s1/ html-1 1 .pdf