Technologies Web 1

Florian Boudin

Révision 3 du 2 septembre 2014

HTTP, HTML5 et CSS3

Préambule

  • Notions abordées dans cette partie du module
    • Protocole HTTP
    • Langage de balisage HTML, nouveautés HTML5
    • Feuilles de style CSS, nouveautés CSS3
  • Volume horaire (10h40)
    • 7 séances TD/TP + 1 séance de projet partagée avec Javascript

Le protocole HTTP

Sources

precis_concis_http.jpg

et Web protocols de Chua Hock-Chuan

Le web

TheWeb.png

Le web (cont.)

  • De nombreuses applications sont exécutées simultanément
    • e.g. nagivation web, email, transfert de fichiers, streaming
  • Pour que les clients et les serveurs communiquent, les applications doivent utiliser un protocole
    • e.g. HTTP, FTP, SMTP, POP

Qu’est ce que HTTP?

  • HTTP signifie HyperText Transfert Protocol.
  • Protocole de communication client-serveur développé pour le World Wide Web, e.g. http://www.univ-nantes.fr.
  • Moyen de communication standardisé, HTTP spécifie comment les clients demandent des données et comment les serveurs répondent.

Qu’est ce que HTTP? (cont.)

  • En comprenant comment HTTP fonctionne, on peut :
    • Comprendre les interactions entre les clients et les serveurs web.
    • Interroger manuellement des serveurs et recevoir des informations que les navigateurs cachent.
    • Comprendre la configuration et les capacités d’un serveur.

Transaction HTTP

HTTP.png

Les requêtes

Requête envoyée au serveur


(1) GET / HTTP/1.1
(2) Host: www.univ-nantes.fr
(3) User-Agent: Mozilla/5.0 (Macintosh; ...
(4) Accept: text/html,application/xhtml+xml, ...
(5) Accept-Language: fr,fr-fr;q=0.8,en-us; ...
(6) Accept-Encoding: gzip, deflate
(7) Connection: keep-alive
            
  1. Commande
  2. Nom d’hôte du serveur
  3. Client utilisé
  4. Types MIME acceptés
  5. Langues des documents acceptées
  6. Méthodes de compression des documents acceptées
  7. Gestion de la persistance de la connexion

Réponse du serveur


(1) HTTP/1.1 200 OK
(2) Date: Fri, 14 Sep 2012 11:32:14 GMT
(3) Server: Koala Web Server/2.4.0 (FreeBSD 6.2)
(4) Vary: Accept-Encoding
(5) Content-Encoding: gzip
(6) Content-Type: text/html;charset=ISO-8859-1
(7) Connection: close
(8) Transfer-Encoding: chunked
(9)
(10) <!DOCTYPE html ...
            
  1. Code de statut HTTP
  2. Date
  3. Informations sur le serveur
  4. Cache pour le proxy
  5. Méthode de compression
  1. Type MIME
  2. Fermeture de la connexion
  3. Encodage de transfert
  4. Ligne vide
  5. Corps de la réponse

Détails d'une transaction HTTP

HTTP_Steps.png

Structure d’une requête client

Ligne de commande GET /index.html HTTP/1.1
En-tête de requête Host: www.univ-nantes.fr
User-Agent: Mozilla/5.0
Accept: text/html ...
Ligne vide
Corps de requête

Les méthodes des clients

  • GET : récupérer un document
  • HEAD : récupérer les informations véhiculées par les en-têtes
  • POST : envoi de données au serveur
  • PUT/DELETE : ajouter/supprimer un document
  • TRACE : récupérer le chemin parcouru par le message du client
  • OPTIONS : récupérer les options disponibles pour l'URL
  • CONNECT : accès à des serveurs web sécurisés par l'intermédiaire d'un serveur d'authentification

Structure d’une réponse

Ligne de statut HTTP/1.1 200 OK
En-tête de réponse Server: Koala Web Server/2.4.0
Vary: Accept-Encoding
Content-Encoding: gzip ...
Ligne vide
Corps de réponse <!DOCTYPE html> ...

Codes de réponses des serveurs

  • 100-199 : message informatif
  • 200-299 : requête accomplie avec succès
  • 300-399 : requête redirigée
  • 400-499 : requête incomplète
  • 500-599 : erreurs du serveur

Exemple de requête GET


GET / HTTP/1.1
Host: imgur.com
Connection: keep-alive
Accept: text/html,application/xml;q=0.9,image/webp,*/*;q=0.8 ...
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) ...
Accept-Encoding: gzip,deflate,sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
            

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 17104
Accept-Ranges: bytes
Date: Mon, 01 Sep 2014 08:39:39 GMT
Age: 91
Connection: keep-alive
Vary: Accept-Encoding
Server: cat factory 1.0

HTTP et les formulaires HTML

  • Les méthodes GET et POST sont les plus utilisées
  • Envoyer des données via un formulaire
    
    <form action="test.php" method="GET"> ← POST
      <input type="text" name="nom1">
      <input type="text" name="nom2">
      <input type="submit" value="Envoyer">
    </form> 
                    
    
    GET /test.php?nom1=value1&nom2=value2 HTTP/1.1
    Host: www.univ-nantes.fr
    User-Agent: Mozilla/5.0 (Macintosh; ...
    ...
                    
    
    POST /test.php HTTP/1.1
    Host: www.univ-nantes.fr
    ...
    nom1=value1&nom2=value2
                    

Requête HTTP avec telnet

telnet.png

Visualiser les transactions HTTP

  • Firefox
    • Outils → Développement web → outil de développement
    • Installer firebug
  • Safari
    • Activer le menu développement (Préférences → Avancées)
  • Chrome
    • Afficher → Options pour les développeurs → Outils de développement
Logo HTML5

Introduction

  • HTML signifie (HyperText Markup Language)
  • Conçu pour représenter les pages Web
  • Le HTML est un langage de balisage
  • Les fichiers HTML portent l’extention .html ou .htm
  • Visualisation sur un navigateur Web (e.g. Firefox)
  • Edition avec un éditeur de texte/Web (e.g. Dreamweaver)

Un document HTML


<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <h1>Un document HTML</h1>
    <p>Créer une page web, 
       c'est facile!</p>
    <img src="html5.jpg" alt="meme" />
  </body>
</html>
document

Les balises HTML

  • Les balises sont des mots-clés entourés de chevrons
  • Elles vont normalement par paires (e.g. <p>...</p>)
  • La première est appelée ouvrante, la seconde fermante
  • Attention de ne pas oublier la balise fermante !
  • Utiliser des minuscules pour les balises (<p>, pas <P>)
  • Les commentaires s’écrivent <!-- commentaire -->

Les balises principales

  • Sections : <h1>, <h2>, <h3>, etc.
  • Paragraphes : <p>
  • Hyperliens : <a href="https://goo.gl">...</a>
  • Images : <img src="pic.jpg" alt="text"/>
  • Marqueurs sémantiques : <b>, <i>, <em>, <strong>
  • Retour à la ligne : <br>
  • Listes : <ul>, <ol>, <li>
  • Tableaux : <table>, <tr>, <td>, <th>
  • Formulaires : <form>, <input>

Les éléments

  • Le contenu entre deux balises est un élément HTML
  • Certains éléments peuvent être vides
  • Les éléments vides sont fermés à la 1ère balise <img />
    • → n’est plus obligatoire en HTML5
  • La plupart des éléments peuvent avoir des attributs
Balise ouvrante Élément Balise fermante
<p> Ceci est un texte </p>
<a href="page.html"> Ceci est un lien </a>
<img src="pic.jpg"/>

Les attributs

  • La plupart des éléments peuvent avoir un ou plusieurs attributs
  • Ils donnent une information additionnelle au sujet d’un élément
  • Les attributs sont toujours spécifiés dans la balise ouvrante
  • Les attributs sont représentés par des paires nom / valeur
    • <balise nom="">
  • Les valeurs des attributs doivent être entourés de " ou '
  • Liste complète des attributs possibles pour chaque élément

Quelques nouveautés de HTML5

  • Nouveaux éléments de structuration : <section>, <header>, <footer>, <nav>, etc.
  • Insertion de vidéos/sons : <video>, <audio>
  • Barre de progression : <progress>
  • Nouveaux attributs de la balise <input> : placeholder, required, pattern, etc.
  • Elément de dessin 2D/3D <canvas>
Logo CSS3
HTML
HTML + CSS

Introduction

  • CSS signifie Cascading Style Sheets
  • Un style définit comment les éléments HTML sont affichés
  • Les styles ont été ajoutés pour résoudre un problème
    • HTML a été créé pour définir le contenu d’un document
    • Les balises <font color="..."> (HTML 3.2) sont devenues un cauchemar pour les développeurs web
    • Séparer le contenu (HTML) de la mise en forme (CSS)
  • La mise en forme peut être stockée dans un fichier séparé
  • Les feuilles de style externes permettent de gagner du temps
    • Modifier le .css → changer l’apparence de toutes les pages

La syntaxe CSS

  • Une règle CSS est composée de deux parties selecteur CSS
  • Exemples
    
    p { // Sélecteur des paragraphes
      color: red; // Couleur du texte en rouge
      text-align: center; // Alignement du texte centré
    }
    
    h1 { // Sélecteur des titres de section de niveau 1
      font-style: italic; // Style du texte en italique
    }
                    

Ajouter du CSS à un document

  1. A l’aide d’une feuille de style externe (fichier .css)
    • Pour un site multi-page, le css est mis en cache
    
    <head>
      <link rel="stylesheet" href="fichier.css" />
    </head>
                    
  2. A l’aide d’une feuille de style interne
    • Pour un site statique mono-page
    
    <head>
      <style> p { color:red; } </style>
    </head>
                    
  3. Dans l’attribut style des éléments HTML (à proscrire)
    
    <p style="color:red;">Blah blah blah</p>
                    

Nommer les éléments

  • Il peut être nécessaire de nommer un élément en particulier
    • L’attribut id permet de spécifier un identifiant unique
    
    <p id="intro">Blah blah blah</p>
                    
    
    #intro { // sélecteur de l’élément "intro"
      font-size: 16pt;
    }
                    
  • Les identifiants sont sensibles à la casse, introIntro
  • Nommer les éléments en fonction de ce qu’ils sont
    
    <p id="rouge">Attention, une erreur est survenue</p>
    
    <p id="erreur">Attention, une erreur est survenue</p>
                    

Nommer les éléments (cont.)

  • Il peut être nécessaire de nommer un ensemble d’éléments
    • L’attribut class permet de spécifier un groupe d’éléments
    
    <h1 class="important">blih blih blih bluh</h1>
    <p class="important">blah blah blah</p>
    <p>blah bluh blah blih bloh</p>
                    
    
    .important {// éléments de classe "important"
      font-size: 120%;
    }
    
    p.important {// paragraphes de classe "important"
      background-color: yellow;
    }
                    

Regrouper les règles

  • Il possible de regrouper un ensemble de règles identiques
    • Mettre les sélecteurs à la suite, séparés par des virgules

h1 {
font-size: 130%;
color: red;
}

h2 {
font-size: 110%;
color: red;
}

h3 {
color: red;
}

h1, h2, h3 {
color: red;
}

h1 {
font-size: 130%;
}

h2 {
font-size: 110%;
}

Sélecteurs CSS

Selecteur Exemple Description
.class .intro Selects all elements with class="intro"
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element,element div, p Selects all <div> and all <p> elements
element element div p Selects all <p> inside <div> elements
element+element div + p Selects all <p> elements that are placed immediately after <div> elements
[attribute] [target] Selects all elements with a target attribute
:hover a:hover Selects links on mouse over
::first-letter p::first-letter Selects the first letter of every <p> element

Liste complète des sélecteurs CSS3

Modèle de boîte CSS

  • Chaque élément dans la page est considéré comme une boîte
    • Chaque boîte est un rectangle composé du contenu de l’élément, d’un remplissage, d’une bordure et de marges
Marge (margin)
Bordure (border)
Remplissage (padding)
Zone de contenu

Modèle de boîte CSS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.

Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam.

  • Premier paragraphe : margin:0px; padding:0px; border:1px;
  • Second paragraphe : margin:30px; padding:20px; border:10px;

Showcase HTML5+CSS3

Récapitulatif

  • HTTP
    • Protocole de communication client-serveur
  • HTML
    • Langage de balisage conçu pour représenter les pages Web
  • CSS
    • Sert à décrire la présentation des documents HTML
  • Séparation entre le contenu (HTML) et la forme (CSS)