Marcel Bosc Introduction Web Université Paris-13Département informatiqueIUT de Villetaneuse ère année, cours - 1/5
table des matières ● présentation ● html ● mise en page / style
présentation 1ère partie
visiter une page web client machine site.org navigateur internet serveur web (logiciel) protocole http très simplifié... bonjour site.org, je voudrais la page page.html ok, voici la page, au format html 1 2
adresse d'une page web : URL protocole http: langage utilisé pour le dialogue client-serveur nom de domainechemin URL
HTML : le langage des pages web Ceci est un titre Un paragraphe de texte avec un lien vers une autre page. Les mots suivants sont importants. Ceci est un titre balise début h1 contenu balise fin h1
attributs et balises lien balise début a contenu balise fin a attribut : href valeur : page2.html
exemples de balises... : paragraphe... : titre important... : titre moins important : fin de ligne : ligne horizontale... : lien : image
clients web : navigateurs spécificités compatibilitégros travail ligne de commande: wget pratique! lynx internet explorer v.6, v.7, v.8 mozilla firefox v.2, v.3 safari chrome 41 % 27 % 7% 18 % Statistiques: 8/2011
serveur web logiciel ex: apache plusieurs machines pour un gros site plusieurs petits sites hébergés par machine machine « serveur »
exemple d'échange étape-1 l'utilisateur clique sur un lien ou saisi une URL dans le navigateur (très simplifié) étape-2 le navigateur se connecte à la machine « exemple.org » et demande la page index.html
exemple d'échange - suite étape-4 Le serveur exemple.org accepte la connexion. Le serveur cherche le fichier index.html sur son disque et répond, en envoyant le fichier. (très simplifié) étape-5 le navigateur reçoit la réponse contenant le html (index.html) et l'affiche.
HTML 2ème partie
xml : la base du xhtml Jean Durand Av. Choisy Extensible Markup Language description de données xhtml : xml avec balises spécifiques pour l'hypertexte xml : nombreuses applications sans lien avec l'hypertexte
deux syntaxes Ceci est un titre Un paragraphe de texte avec du texte en valeur Un 2eme paragraphe Ceci est un titre Un paragraphe de texte avec du texte en valeur Un 2eme paragraphe xhtml : syntaxe xmlhtml
historique xhtml xhtml html 4.01 SPECS: en: fr: grange.net/w3c/html4.01/ html 3.2, 4.0 html 5 - draft xhtml Syntaxe XML 2022 ? html 5.0
validation Langage C printf "bonjour"; gcc ! erreur! Java Systeme.out.println("a") javac ! erreur! HTML titre xyz affiche ce qu'il peut navigateur pas de message d'erreur utiliser un validateur!
arbre Ceci est un titre Un paragraphe de texte avec un lien vers une autre page. Les mots suivants sont importants body h1 p strong a Text Ceci est un titre Text Un para... avec un Text lien Text vers une... suivants Text sont importants
structure d'un document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Virtual Library Moved to example.org Ce document est du XHTML 1.0 la racine les entêtes (non affiché) le corps (ce qui s'affiche) le titre (non affiché) body title p html head a 1
erreurs courantes un titre Majuscules! un titre... Balise non fermée! fin de ligne: Balise non fermée! bonjour titre Imbrication interdite! (un titre ne peut pas être à l'intérieur d'un paragraphe) titre bonjour... Guillemets - attributs!...
mise en page - style 3ème partie
feuilles de style : exemple Ceci est un titre Un paragraphe de texte avec un lien vers une autre page. Les mots suivants sont importants h1 { font-size: 200%; } strong { color: red; } Ceci est un titre Un paragraphe de texte avec un lien vers une autre page. Les mots suivants sont importants Feuille de style:
feuilles de style : utilisation Méthode 1: fichier CSS séparé h1 { font-size: 200%; } Méthode 2: style inclus un titre Méthode 3: style inline
css : syntaxe h1 { font-size: 200%; } strong { color: red; background-color: yellow; } sélecteur propriété valeur h1 { font-size: 200%;} insensible aux espaces et fins de ligne sélecteur: sur quels éléments s'appliquent les styles SPECS:en: fr:
css : propriétés courantes font-size: 200%; font-size: 24px; color: red; color: #fa0; color: #f310a0; background-color: green; border: 8px solid red; border-top: 8px solid red; margin: 10px; margin-left: 3em; padding: 2em; font = police de caractères #fa0 = #ffaa00 rouge:255 vert:170 bleu:0 #f310a0 rouge:243 vert:16 bleu:160 background = fond border = bordure px = taille d'un pixel em = taille d'une lettre M margin = marge padding = espacement exemples:
Modèle des boîtes (box model) margin border padding conten u margin-top margin-bottom margin-leftmargin-right border-top border-bottom padding-bottom padding-top
Modèle des boîtes - exemple p { background-color: yellow; border: 2px solid red; padding: 1em; margin: 1.5em; } bonjour texte avant texte après margin padding margin
attributs id et class Un essai Titre section-1 bla bla bla bla Titre section-2 bli bli bli bli bli Titre section-3 Qu'est qu'on s'amuse! Titre section-4 abc def ghi jkl mno Titre section-5 class: nom permettant de désigner plusieurs éléments id: nom pour un élément unique
css : sélecteurs courants p {color: red;} Un essai Titre section-1 bla bla bla bla Titre section-2 bli bli bli bli bli Titre section-3 Qu'est qu'on s'amuse! Titre section-4 abc def ghi jkl mno Titre section-5.actu {color: blue;} #para1 {color: green;} # unID nombalise. uneClasse
ce document est distribué librement : sous licence GNU FDL : les originaux sont disponibles aux formats OpenOffice et powerpoint