La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

1 Le langage HTML Hyper Text Markup Language Langage hypertexte à balises Eric Hitti

Présentations similaires


Présentation au sujet: "1 Le langage HTML Hyper Text Markup Language Langage hypertexte à balises Eric Hitti"— Transcription de la présentation:

1 1 Le langage HTML Hyper Text Markup Language Langage hypertexte à balises Eric Hitti

2 2 L'origine de la page WEB3 Balises de documents8 Balises de mise en page11 Balises de mise en forme13 Balise de listes15 Caractères spéciaux16 Les images17 Les liens21 Les tableaux23 Les cadres (frames)28 Les formulaires36 Exemple de php44 Exemples de javascript47 Les styles51 Tables des matières

3 3 L'origine de la page WEB Transmettre des informations à l'autre bout du monde Le code ASCII=255 caractères L'éditeur de texte (Bloc-notes) Le traitement de texte (Word) Le fichier informatique E r i c Instructions de mise en forme balises

4 4 L'origine de la page WEB : éditeur simple - Je veux : Eric - Je visualise le résultat à l'aide d'un navigateur (Netscape) qui interprète le code - Je créé un fichier.HTML Et j'utilise des balises de mise en forme Eric

5 5 L'origine de la page WEB : éditeur évolué - Je veux : Eric en gras - L'éditeur modifie le code en insérant les balises au bon endroit - Je sélectionne le texte avec ma souris - J'utilise le bouton adéquat Eric -Et en même temps donne un aperçu du résultat Fichier.html Eric

6 6 L'origine de la page WEB : un fichier complet La page source en.htm ou.html Elle est créé à l'aide d'un simple éditeur de texte HTML n'est pas un langage de programmation ! Ce n'est qu'un langage de description de documents. Le navigateur (Netscape) permet de visualiser la page web en interprétant le code

7 7 Règles simples HTML est un langage à balises Les balises permettent de réaliser des actions sur un groupe de mots texte affecté par la balise Ex : HTML met HTML en gras Les balises en minuscules Les balises peuvent recevoir des attributs (options) en Ex : le font d'écran sera en rouge baliseoption

8 8 Balises de documents … début et fin de document … lentête du document commentaires Dans la section head … barre de titre et sauvegarde de signet les moteurs de recherche utilisent ces informations pour l'indexation Exemples :

9 9 Balises de documents … le corps du document Options : background="image"image de fond décran bgcolor="couleur"couleur du fond décran text="couleur"couleur du texte link ="couleur"couleur des liens non consultés alink ="couleur"couleur des liens actifs couleur=(aqua, black, fuschia, gray, green, lime, marroon, navy, olive, purple, red, silver, teal, white, yellow) Les autres couleurs sont définie en hexa (#FF0000 =rouge)

10 10 Exemple Mon super site bla bla bla et que je te raconte ma vie

11 11 Balises de mise en page saut de paragraphe align="Justify/left/right" passage à la ligne … centrage Insertion dune ligne de séparation Options : size="+n"épaisseur du trait noshadesans ombre width="n%"largeur de la ligne align="left | rigth"centré par défaut

12 12 Balises de mise en page Un paragraphe Premiere ligne Deuxieme ligne


Exemple

13 13 Balises de mise en forme … titre de niveau n (1 à 6) … afficher en gras … afficher en italique … afficher en souligné … barrer le texte … Le texte est agrandi dune unité de taille … Le texte est diminué dune unité de taille … afficher en clignotant … exposants … indices

14 14 Balises de mise en forme Cest un titre de niveau 1 Cest un titre de niveau 2 cest gras en italique souligne 1 er Exemple

15 15 Balises de listes Les listes ordonnées coucou recoucou Les liste non ordonnées coucou recoucou

16 16 Caractères spéciaux << >> && &nspb; (un blanc) <<« >>» ©© éé èè êê àà ïï çç ññ

17 17 Les images Images de types GIF ou JPEG (PNG) Conseils - Pas dimages de tailles trop importantes - Des petites images cliquables pour voir les grandes - Récupérer les icônes et images sur dautres sites - Spécifier les valeurs de width et de heigth des images (en pixels) afin d'accélérer l'affichage. Sites dicônes

18 18 Les images Pour insérer une image Options align=" attibut "(middle, top, bottom) position verticale (left, right) permettent au texte de senrouler autour de limage alt=" titre "apparaît si la souris sarrête sur limage border="n"cadre noir autour de limage dépaisseur n width="y"largeur du tableau (en pixel) height="y"hauteur du tableau (en pixel) Exemple

19 19 Les images réactives Permettent de lier des documents en fonction de la zone cliquée (une carte de France où chaque région est reliée à un document) 2 éléments indispensables: un fichier image définir les zones réactives, de 3 types : - cercle : coordonnées du centre + rayon : Xc,Yc,R coordonnées du centre et d'un point du cercle - rectangle : points supérieur gauche et inférieur droit : X1,Y1,X2,Y2 - polygone : coordonnées de chaque sommets Les coordonnées sont définies en pixels pour définir les zones on utilise Mapedit (http://www.boutell.com/mapedit) ou Dreamweaver

20 20 Les images réactives : exemple Définition des zones cliquables textepourlasouris Image associée à la partition Exemple Options: Circle poly

21 21 Les liens vers un document distant : zone cliquable option: target="_blank" ou "nomduframe" vers un document local : zone cliquable vers une partie précise du document : zone cliquable Le point à atteindre doit être marqué par : texte Image ou texte

22 22 Les liens : autres vers un courier électronique : zone cliquable exemple pour m'ecrire vers un serveur ftp : zone cliquable vers un serveur telnet : zone cliquable Image ou texte

23 23 Les tableaux Ils permettent dorganiser le texte et les images avec ou sans visualisation des cadres … border="n"contour dépaisseur n (0 pas de contour) cellpading="x"espace entre le texte et le contour de cellules cellspacing="x"épaisseur du trait entre les cellules width="y"largeur du tableau (en pixel ou en %) height="y"hauteur du tableau (en pixel ou en %) bgcolor="red"couleur de fond du tableau align="left"left, center ou right

24 24 Tableau : les éléments Titre dun tableau : caption le titre du tableau align="bottom" (ou "top")position du titre Les lignes : tr … align= "center" (right, left)alignement horizontal valign="top" (middle, bottom) alignement vertical

25 25 Tableau : les éléments Les éléments de la lignes : td … colspan="n"la cellule sétend sur n colonnes rowspan="n" la cellule sétend sur n lignes donne une cellule vide sans bordure   donne une cellule vide avec bordure Cellule titre : th … Équivalent à td mais le texte est automatiquement centré et gras

26 26 Tableau : exemple

27 27 Tableau : exemple Pour construire un tableau on raisonne par ligne. On commence par construire un tableau avec le maximum de lignes et de colonnes nécessaires, ici 4 lig 5 col Puis ligne par ligne on définit les fusions s'il y en a, et on ne redéfinit pas une cellule qui a déjà été fusionné à la ligne précédente 3c en lig2c col rien 2c col rien 1c

28 28 Comparatif modèle économique Modèle Vitesse en km/heure Consommation en litre/100 km Marque Type Numéro de serie Peugeot 106 b ,7 Citroën AX AT67B ,5 Tableau : exemple

29 29 Les cadres ou Frames permettent de diviser une page HTML en plusieurs zones (ou cadres), chacune pouvant afficher, indépendamment des autres, une pages HTML Intérêt afficher en permanence certaine informations : - boutons de navigations, - table des matières, - logos, - …

30 30 Les frames : syntaxe un fichier définit la partition de lécran il ny a plus de balise « body » la balise FRAMESET partitionne une fenêtre la balise FRAME définie le contenue dune fenêtre

31 31 Les frames : syntaxe FRAMESET 1 FRAMESET 2 FRAME 1 FRAME 2 FRAME 3

32 32 Les frames : structure … … … dautres frames ou dautres frameset pour les navigateurs ne gérant pas les frames

33 33 Les frames : attributs de FRAMESET rows = "n, n%, …,* " divise la zones en cellules horizontales nhauteur en nombre de pixels n%hauteur en % de lécran *hauteur restante cols = "n, n%, …,*" divise la zones en cellules verticales border="n" taille de la bordure en pixels frameborder =" yes" | "no" détermine si la frontière entre deux cadres doit être visible ou non (yes par défaut) bordercolor = "couleur" détermine la couleur des frontières

34 34 Les frames : attributs de FRAME name="nom"le nom du cadre src = "url"le document à afficher marginwidth="n"taille de la marge (pixels) marginheight = "n"nombre pixels entre la frontière haute/basse et le document scrolling ="yes/no/auto"barre de déroulement noresizeempêche de modifier la taille à laide de la souris

35 35 Les frames : exemple … Dommage votre Browser ne permet pas les frames

36 36 Les frames : exemple cadre1 cadre2 cadre3

37 37 Les formulaires Entre les balises on trouve les balises définissant les éléments du formulaire du texte précisant le rôle des éléments Attributs method = GET ou POST Définit la méthode de transfert des données action quel script doit être appelé pour traiter le formulaire action action="confirmation.php3" name="nom_du_formulaire" enctype="MULTIPART/FORM-DATA" (pour le php) ="text/plain" (pour le mail) target si nécessaire il précise l'endroit ou doit être renvoyé les informations

38 38 Les formulaires : les éléments définit un élément du formulaire Attribut name="Nom_Champ"nom de la variable Attribut size="nb", taille en nb de caractères Attribut value="Valeur"valeur par défaut Permet la saisie avec affichage * à la place de chaque caractère Attribut name="Nom_Champ"nom de la variable Attribut name="Nom_Champ"nom de la variable Attribut value="Texte"texte affiché sur le bouton

39 39 Les formulaires : les éléments provoque le transfert des données du formulaire vers le serveur Attribut name="Nom_Champ"nom de la variable Réinitialise le formulaire Attribut name ="Nom_Champ"nom de la variable Attribut value="Texte"texte affiché sur le bouton Attribut name ="Nom_Champ"nom de la variable Attribut value ="valeur" valeur fourni au serveur Attribut checked,il permet de sélectionner un bouton par défaut dans un ensemble de boutons portants le même nom (NAME), un seul bouton peut avoir cette valeur

40 40 Les formulaires : les éléments ensemble de cases à cocher Attributs : name="Nom_Ensemble"nom de la variable value="valeur" valeur associé à la case checked, état initial de la case, plusieurs cases peuvent être cochées … permet de créer une zone de saisie de texte de plusieurs lignes Attributs : name="Nom_Zone"nom de la variable rows="nl" nombre de lignes cols="nc" nombre de colonnes

41 41 Les formulaires : les éléments … Liste à options, menus déroulant ou ascenseur, choix définit par Attribut name="Nom_Liste" Attribut size="nb" nb d'éléments visibles simultanéments si nb>1 ascenseur, si nb=1 menu déroulant Attribut multiple autorise la sélection de plusieurs items Attribut value="valeur" valeur transmise au serveur Attribut selected valeur d'option qui apparaît en premier Exemple Bleu Blanc Rouge

42 42 Les formulaires : exemple Nom : Mot de passe Enseignant Etudiant Choisir le mois du stage septembre octobre novembre decembre Taper vos commentaires

43 43 Les formulaires : exemple

44 44 Les formulaires : résultat

45 45 Un exemple de php : confirmation.php3 Je veux que l'envoie du formulaire provoque les actions suivantes : Vérifier que le mot de passe est bon Vérifier que tous les Nom et Mois ont été rempli Donner les erreurs correspondantes Confirmer le bon déroulement de l'inscription Ajouter l'inscription dans un fichier texte Envoyer un mail spécifiant l'inscription On modifie le formulaire précédent


46 46 Un exemple de php : confirmation.php3 Prise en compte d'une inscription "toto"){echo"Le mot de passe n'est pas bon ";$erreur="1";} if ( $erreur=="0") { $STATUT, $MOIS, $COMMENTAIRES"); $F=fopen("inscrits.txt","a"); $LIGNE= "$NOM $STATUT, $MOIS, $COMMENTAIRES" ; fputs($F,"$LIGNE\n"); fclose($F); echo"Votre etes inscript pour le mois de $MOIS"; } ?>

47 47 Les formulaires : avec php

48 48 Un exemple de javascript Dans ma bibliographie je veux que lorsque l'on cherche à télécharger un de mes articles, une fenêtre s'ouvre rappelant qu'il y a un copyright sur ce document et ne lançant le téléchargement que si l'utilisateur a appuyé sur un bouton de confirmation

49 49 Un exemple de javascript : copyright.html function Autorisation (nomfichier) { var resultat=window.confirm('Il y a un copyright sur ce document blablabla'); if (resultat==true) { open(nomfichier); } CLIQUER pour avoir l'article

50 50 Un exemple de javascript : résultat

51 51 Un autre exemple de javascript

52 52 Avec les feuilles de style c'est le créateur du document qui impose sa conception de la mise en page et non plus le visiteur ou le navigateur que ce dernier utilise. Bloc style incorporé H1 {font-size:20pt; font-family:arial; color:red} H2 {font-size:15pt; text-align:right; color:maginta} Les feuilles de style

53 53 Titre de la page Ma page perso Université rennes1 adresse mail Enseignement Recherche a b Biblio 1 2 Titre Mots clés Description En-tête 1 En-tête 2 Lien site univ Lien courrier Tableau invisible Centré, réduit Liste à puces abc Liste à puces 123 Fond d'écran Exemple de page à réaliser Tableau Cellule de taille et couleurs Une photo


Télécharger ppt "1 Le langage HTML Hyper Text Markup Language Langage hypertexte à balises Eric Hitti"

Présentations similaires


Annonces Google