Mohammed REZGUI Basé sur le cours de Guillaume Perez

Dimension: px

Commencer à balayer dès la page:

Download "Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez"

Samuel Coutu
il y a 8 ans
Total affichages :

1 Mohammed REZGUI Basé sur le cours de Guillaume Perez

2 Contenu, Organisation

3 Objectif principal: Base pour la création d un site Notions de client-serveur Notions de programmations

4 Option 1: Une note de TP Un partiel intermédiaire (court) Un partiel final Option 2: Une note de TP Un projet Un partiel final

5 Client-Serveur, HTML, CSS

7 Pour l internaute (client) Un navigateur Un URL Un document (fournit par le serveur) Pour le «fournisseur» (serveur) Une adresse Un serveur (Ordinateur / Logiciel) Des documents

8 URL Un URL représente une identification d un endroit où est stockée une ressource sur le réseau Internet Format d un URL: (note le symbole [xxx] signifie que xx est facultatif) Protocole:// Hôte [:Port] Chemin Nom [#Ancre] [?Paramètres] Exemple 1 : une ressource statique Exemple 2 : une ressource dynamique (générée avec des paramètres)

9 Codage d un URL: space %20! %21 «%22 # %23 $ %24 % %25

10 Langage des documents web

11 Balise : instruction de mise en forme Balise : contient du texte et/ou des autres balises autorisées Balise : structure le texte

12 Différence de visualisation Vue pour l ordinateur: Balise, code PHP, espace en tout genre Vue pour le client: Le contenue organisé visuellement

13 Navigateur : recherche des balises et interprétation <BALISE_A> </BALISE_A> Caractères spéciaux: «&#code ascii;» EX: & => & < => < > => > é => é

14 Navigateur : recherche des balises et interprétation Tout les caractères spéciaux: &+lettre+accent; accent : acute, grave, circ, cedil, tilde Outils de validation:

15 Format général des balises Balises conteneurs Contiennent du texte, des autres balises. Peut être utilisé pour présenter ou structurer le contenu Exemple : <h1> Mon document </h1>  Balises vides Insérer un élément hors du texte, image, séparateur, saut de ligne Exemple : <hr><! ajouter un séparateur horizontal -- >

16 Balises Conteneurs <nombalise {attribut=«val»}> Contenu de la balise </nombalise> Balises vides <nombalise {attribut=«val»} /> {attribut=«val»} : liste des couples attribut = val séparés par des espaces

17 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>...</title> </head> <body> </body> </html> Exemple

18 Balises structurelle Balises de titres Balises de paragraphes et citations Balise lien hypertext Balises de listes Balise de block Balises de table (tableaux) Balises de formulaire Basiles HTML5... Balises de Frame Balises Meta (ente tes)

19 <html> </html> Définition d un document Contient une balise head suivie d une balise body <head> </head> Contient les entêtes et meta-données du document Contient obligatoirement un <title> </title> Peut contenir les balises : meta, script, style ect <title> le titre </title> Titre du document, en haut dans le navigateur Contient du texte <body> <body> Contient tout le corp du document Partie central du navigateur Exemple

20 <h1> Titre de niveau 1 très important </h1> <h2> Titre de niveau 2 important </h2> <h6> titre de niveau 6 </h6> Bien ordonner ses titres permet Avoir un document organisé Plus tard avec CSS de donner un style personnalisé en fonction de l importance du titre Exemple

21 <p>le contenue du paragraphe</p> Le navigateur ajouter automatiquement un saut de ligne avant et après le paragraphe <br /> insert un saut de ligne a l intérieur de votre paragraphe Le navigateur va retirer tout les espaces en trop et les sauts de ligne de votre texte brut avant de l afficher Le code : <p> a b c e</p> Affichera : a b c d e d <pre>contenue</pre> Affichera le texte brut Exemple

22 <a>élément cliquable</a> L élément peut être un mot, une phrase, une image Attribut important: href= destination <a href= >Site de l université de nice</a> Attribut target (optionnelle) <a href= target= blank >université de nice</a> Ouvrira la page dans un nouvelle onglet ou une nouvelle fenêtre Exemple

23 Liste ordonnée <ol> <! debut de la list--> <li>premier élément</li> <li>deuxième élément</li> </ol> <! fin de la list --> Liste non-ordonnée <ul> <! debut de la list--> <li>premier élément</li> <li>deuxième élément</li> </ul> <! fin de la list --> Donne 1. premier élément 2. deuxième élément Donne premier élément deuxième élément Exemple

24 Les élément du langage HTML peuvent être regroupé Deux type de balise Balise block Peut générer des sauts de ligne <p>, <h1>, <ol> Balise inline Ne génère pas de saut de ligne <img>, <b>, <a> Exemple

25 <div> contenu du block </div> Le navigateur ajoute une ligne avant et après Quand il est utilisé avec CSS, il servira a assigner soit un style special a un block ou à le placer dans la page <span>contenue inline</span> Balise inline donc pas de saut de ligne Utilisé avec CSS pour ajouter un style spécial à du texte Exemple

26 Les tableaux sont un moyen d afficher des données de façon ordonnée et souvent automatique <table> structure du tableau </table> Attribut border= 1 (optionnelle) pour afficher une bordure Structure du tableau <tr> structure de la ligne </tr> Structure de la ligne <td> contenu de la colonne </td> Exemple

27 Structure du tableau <caption> titre du tableau </caption> Doit être placé directement après la balise <table> Ne doit contenir que du inline structure de la ligne <th> titre de colonne </th> Attribut des lignes / colonnes rowspan = nombre de ligne colspan = nombre de colonne Exemple

28 Structure du tableau <thead> {<tr>}+ </thead> <tfoot> {<tr>}+ </tfoot> <tbody> {<tr>}+ </tbody> Même nombre de colonne tbody obligatoire sauf si unique et pas de thead ni tfoot Exemple

29 Structure du tableau <colgroup> Contient les balise <col/> <col> Regroupement d attribut pour des colonnes Attribut span (nom de colonne) <colgroup> <col span= 2 style="background-color:red" > <col style="background-color:blue" > </colgroup> Les deux premières colonnes sur fond rouge et la 3eme sur fond bleu Exemple

30 <img/> Attribut src= adresse de l image Adresse relative ou absolue Attribut alt= texte alternatif Description de l image Exemple

Documents pareils

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,