Remerciez-le!

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

Programmation Web Prof. Hafida ZROURI e-mail : h.zrouri@ump.ac.ma 26/11/2020 Pr

Programmation Web Prof. Hafida ZROURI e-mail : h.zrouri@ump.ac.ma 26/11/2020 Prof. Hafida ZROURI 2 Plan du cours ♦Partie 1 : HTML - CSS ♦Partie 2 : JavaScript ♦Partie 3 : PHP Programmation Web Partie 1 : HTML-CSS 26/11/2020 Prof. Hafida ZROURI 4 Qu'est-ce que HTML ? ♦HTML (Hyper Text Markup Language) est un langage de description de pages Web. Il permet de présenter les documents hypertextes destinés à être affichés sur le navigateur. [Un document hypertexte est un document qui contient des liens vers d’autres documents (texte, sons, images, …)] ♦Il peut être enrichi à l'aide de langages de programmation (Java, Javascript, …). ♦Un document HTML est  un fichier texte, construit suivant une syntaxe précise  structuré par des balises, insensibles à la casse  interprété (visualisé) dans un navigateur (Mozilla Firefox, Internet Explorer, Opera,…)  créé dans un éditeur de pages web (NVU, Dreamweaver, …) ou tout éditeur de texte (bloc-notes, wordpad, …) et enregistrer avec le suffixe .html ou .htm ♦La page d'accueil d'un site web (la page principale) est en général appelée index.html. Cela permet d'atteindre le site en tapant juste l'URL (sans taper le nom de la page à la suite) 26/11/2020 Prof. Hafida ZROURI 5 Les balises ▪HTML se compose d'unités fondamentales appelées balises. ▪Les balises sont des commandes à l’intention du navigateur et saisies entre les signes < et >. Ainsi une balise s’écrit <balise>. ▪La plupart des balises HTML fonctionnent par paires : une balise d'ouverture et une de fermeture encadrant les informations du document. Les balises de fermeture se reconnaissent à la barre oblique (/). Ainsi à la balise d’ouverture <balise> correspondrait la balise de fermeture </balise>. Certaines balises fonctionnent seules, comme qui crée un saut de ligne. ▪Les balises HTML sont insensibles à la casse. Dans ce cours, les balises sont écrites en majuscules pour les différencier du texte normal. ▪Une balise pourra contenir des attributs : <balise attribut1="val1" attribut2="val2" …> … </balise> 26/11/2020 Prof. Hafida ZROURI 6 Structure d’un document HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE> … </TITLE> … </HEAD> <BODY> … </BODY> </HTML> 26/11/2020 Prof. Hafida ZROURI 7 Le doctype d’un document HTML ▪<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd"> est le doctype, aussi appelé DTD. Il sert à indiquer au navigateur à quelles règles d’écriture obéit le code source de la page html. Tous les navigateurs appliquant la même règle, vous êtes ainsi assuré d’un rendu identique entre les différents navigateurs. ▪L'absence de doctype autorise les navigateurs à interpréter la page qu'ils affichent selon l'idée qu'ils s'en font, eux. Autrement dit : on leur laisse la main libre. Rien ne garantit qu'ils le feront correctement. ▪Avec HTML5 le doctype a été simplifié au maximum. En effet le HTML5 propose un doctype unique et simplifié : <!DOCTYPE html> 26/11/2020 Prof. Hafida ZROURI 8 Premier exemple HTML <!DOCTYPE html> <HTML> <HEAD> <TITLE> Mon premier exemple HTML </TITLE> </HEAD> <BODY> Bonjour tout le monde ! </BODY> </HTML> 26/11/2020 Prof. Hafida ZROURI 9 Analyse des balises ▪<HTML>…</HTML> délimite le début et la fin du document html. Cette balise peut prendre comme attribut lang qui spécifie la langue utilisée. Par exemple <HTML lang="fr"> spécifie que le document est en langue française. Cette information est fort prisée par les moteurs de recherche comme Google. ▪<HEAD>…</HEAD> : Entête du document. Elle contient des informations au sujet du document, indépendamment du contenu de celui-ci : » Titre de la fenêtre dans laquelle la page s'affiche (balise <TITLE>…</TITLE>). » Différentes informations sur le document ou pour la gestion de celui-ci : les balises <META>. » Des déclarations ou des appels de feuilles de style CSS. » Des fonctions ou des liens vers des fichiers JavaScript. ▪<BODY>…</BODY> : Corps du document. Elle détermine la partie du document html qui sera affichée dans la fenêtre du navigateur et donc visible par l’internaute. La balise peut s'employer seule ou avec des attributs [BGCOLOR="nom|code hex" : Couleur de fond de la page « la valeur de cet attribut peut être le nom de la couleur en anglais ou son code hexadécimal », TEXT="nom|code hex" : Couleur du texte, BACKGROUND="nom du fichier" : Image de fond, …]. En HTML5, ces attributs dédiés à la présentation du corps du document sont maintenant abandonnés pour laisser place à l’utilisation des feuilles de style. 26/11/2020 Prof. Hafida ZROURI 10 <META NAME="author" CONTENT="auteur1[,auteur2,…]"> permet de rechercher la page dans certains moteurs de recherche en se basant sur les noms des auteurs indiqués. <META NAME="keywords" CONTENT="mot-clé1[,mot-clé2,…]"> permet de rechercher la page dans certains moteurs de recherche en se basant sur les mots- clés indiqués. <META NAME="description" CONTENT="Une description de la page…"> permet de rechercher la page dans certains moteurs de recherche en se basant sur la description indiquée. <META HTTP-EQUIV="refresh" CONTENT="n;url=adresse de page"> permet de passer automatiquement à une autre page après un certain délai. ►n = délai en seconde avant l'appel de la deuxième page. ►adresse de page = adresse (absolue ou relative) de la deuxième page web à afficher. <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=UTF-8"> précise l’encodage utilisé pour la page web. Avec HTML5 cette déclaration d’encodage est simplifiée : <META charset="UTF-8"> Quelques balises META 26/11/2020 Prof. Hafida ZROURI 11 <!DOCTYPE html> <HTML> <HEAD> <META charset="UTF-8"> <TITLE> Cours de Programmation Web </TITLE> <META name="keywords" content="web, HTML"> <META name="author" content="Zrouri"> <META http-equiv="refresh" content="5; URL=http://wwwesto.ump.ma"> </HEAD> <BODY> Dans quelques instants vous allez passez automatiquement au site de l’EST d’Oujda. </BODY> </HTML> Exemple : 26/11/2020 Prof. Hafida ZROURI 12 Les commentaires ♦Il est parfois utile de commenter le code html pour en faciliter la compréhension lors d’une mise à jour. ♦Les commentaires doivent être précédés par . ♦Tout ce qui sera écrit entre  ne sera pas affiché à l’écran par le navigateur. Notons cependant que ces commentaires restent visibles lorsqu’on consulte le code source de la page. ♦Les commentaires peuvent occuper plusieurs lignes et peuvent être placés indifféremment dans l’en-tête ou dans le corps du document. ♦Ils ne peuvent jamais apparaître à l'intérieur d'une balise ouvrante ou fermante. 26/11/2020 Prof. Hafida ZROURI 13 ♦Il existe une foule de caractères spéciaux qu’il faut parfois encoder de façon particulière. Par exemple les caractères utilisés par le code html comme <, >, " et &. Ces différents signes doivent être encodés en utilisant les entités suivantes : < : < > : > & : & " : " ♦Accents : soit # une lettre ▪Accent grave : &#grave; ▪Accent aigu : &#acute; ▪Accent circonflexe : &#circ; ▪Cédille : &#cedil; Exemple : ça va Jérôme ? ça va Jérôme ? Remarque : En principe, si le caractère existe dans le jeu de caractères (charset) déclaré dans le document, il n’est pas nécessaire d’écrire les caractères spéciaux au moyen des entités. Ainsi, dans l’encodage iso-8859-15, le é existe et il n’est donc pas nécessaire d’avoir recours à l’entité é. Les caractères accentués et spéciaux 26/11/2020 Prof. Hafida ZROURI 14 Mise en forme des caractères ■Texte en italique : … ■Texte en gras : … ■Texte en indice : … ■Texte en exposant : … ■Texte pré-formaté : <PRE> …</PRE> ■Texte barré : <DEL> … </DEL> ■Mise en valeur (italique) : … ■Mise en valeur forte (gras) : … ■Citation courte (italique) : <CITE> …</CITE> ■Citation courte (entre guillemet) : <Q> …</Q> ■Citation longue : <BLOCKQUOTE>…</BLOCKQUOTE> Cette citation s’affiche avec un saut de ligne avant et après celle-ci. Elle s’affiche également avec un léger retrait par rapport à la marge gauche. ■Espace blanc : (L’espace blanc est considéré comme un séparateur de 2 mots) Pour ajouter un espace blanc, utiliser le code spécial suivant : Exemple : ajoute 2 espaces blancs ■Retour à la ligne : 26/11/2020 Prof. Hafida ZROURI 15 Mise en forme des paragraphes ■Titres : <Hn>…</Hn> avec n varie de 1 à 6 ▪Par défaut, cette balise ajoute une ligne vide entre le contenu de la balise qui est mis en gras et la suite du document. ▪Exemple : <H1> Titre de niveau 1 </H1> ■Paragraphes : … ▪Par défaut, chaque paragraphe est précédé et suivi d’un espace correspondant à un saut de ligne. ▪Exemple : Ceci est un paragraphe. ■Séparation de contenu : <HR> ▪La balise <HR> définit une pause thématique dans une page HTML (par exemple un changement de sujet). Elle est affichée comme un trait horizontale par les navigateurs . ▪Remarque : <HR> seul (sans application de style CSS) affiche une ligne grise ombrée de 1 pixel d'épaisseur faisant toute la largeur de la fenêtre. 26/11/2020 Prof. Hafida ZROURI 16 Listes : listes ordonnées/non ordonnées ■Listes non ordonnées : ▪Listes à puces, sans numérotation ▪Éléments : - <UL>…</UL> (unordered list) - <LI>…</LI> (list item) : élément de la liste - Il est possible d'indiquer des titres, soit à la liste entière, soit à un élément en particulier avec la balise <LH>…</LH>. Le texte associé apparaît de façon identique aux items mais n’est pas précédé de puce. ■Listes ordonnées : ▪Numérotation incrémentale suivi d'un point uploads/s1/ html-css-1.pdf