Mohammed REZGUI m.rezgui06@gmail.com Basé sur le cours de Guillaume Perez
Contenu, Organisation
Objectif principal: Base pour la création d un site Notions de client-serveur Notions de programmations
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
Client-Serveur, HTML, CSS
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
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 http://deptinfo.unice.fr/~renevier/l2mass/index.php Exemple 2 : une ressource dynamique (générée avec des paramètres) http://google.fr/?search=unice&safe=true
Codage d un URL: space %20! %21 «%22 # %23 $ %24 % %25
Langage des documents web
Balise : instruction de mise en forme Balise : contient du texte et/ou des autres balises autorisées Balise : structure le texte
Différence de visualisation Vue pour l ordinateur: Balise, code PHP, espace en tout genre Vue pour le client: Le contenue organisé visuellement
Navigateur : recherche des balises et interprétation <BALISE_A> </BALISE_A> Caractères spéciaux: «&#code ascii;» EX: & => & < => < > => > é => é
Navigateur : recherche des balises et interprétation Tout les caractères spéciaux: &+lettre+accent; accent : acute, grave, circ, cedil, tilde Outils de validation: http://validator.w3.org
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> <!-- titre --> Balises vides Insérer un élément hors du texte, image, séparateur, saut de ligne Exemple : <hr><! ajouter un séparateur horizontal -- >
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
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>...</title> </head> <body> </body> </html> Exemple
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)
<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
<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
<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
<a>élément cliquable</a> L élément peut être un mot, une phrase, une image Attribut important: href= destination <a href= www.unice.fr >Site de l université de nice</a> Attribut target (optionnelle) <a href= www.unice.fr target= blank >université de nice</a> Ouvrira la page dans un nouvelle onglet ou une nouvelle fenêtre Exemple
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
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
<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
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
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
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
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
<img/> Attribut src= adresse de l image Adresse relative ou absolue Attribut alt= texte alternatif Description de l image Exemple