Séance 1. Bases et HTML

Dimension: px

Commencer à balayer dès la page:

Download "Séance 1. Bases et HTML"

Constance Ringuette
il y a 7 ans
Total affichages :

1 Séance 1 Bases et HTML Nils Schaefer (nils.schaefer@sn-i.fr)

2 Serveur Web Hébergement des sites Web Utilisation du port 80 Réception des requêtes HTTP des navigateurs Traitement des requêtes HTTP Exemples Microsoft IIS (Windows) Apache (Windows et Linux) Xitami (Windows)

3 Hébergement mutualisé Plusieurs sites sur un serveur physique Partage du processeur Partage de la mémoire Partage de l'espace de stockage Nombreuses offres Faible coût Utilisation simple FTP pour l'envoi des fichiers Exemple : Hosteur, Online...

4 Serveurs dédiés Mise à disposition d'un serveur complet Ressources disponibles à 100% Configuration illimitée Optimisation Coût élevé Fortes connaissances nécessaires Exemple : Dédibox (Free)...

5 Critères de choix d'un hébergement Mutualisé / Dédié Puissance du serveur (processeur, mémoire...) Espace disque Bande passante (qualité et quantité) Disponibilité (généralement supérieur à 99 %) Services Fonctionnalités et droits sur le serveur Sauvegardes (et fréquence des sauvegardes!) Interface d'administration (Cpanel)

6 Composition d'une page HTML Dans un fichier d'extension.html ou.htm Balises <HTML>... </HTML> Deux parties En-tête <HEAD>... </HEAD> Informations sur le document HTML Corps du document <BODY>... </BODY> Contenu du document Casse non prise en compte pour les balises

7 En-tête Informations sur la page HTML Important pour les moteurs de recherche Titre de la page HTML <TITLE>Voici le titre</title> Barre de titre de la fenêtre Visible dans les moteurs de recherche Balises META Informations de haut-niveau Informations HTTP

8 Bonnes habitudes Indentation des balises Meilleure lisibilité Insertion de commentaires Meilleure compréhension  Cohérence dans l'écriture Ne pas avoir : <HTML> <body> </Body> </html> Très important lorsqu'on travaille à plusieurs sur un projet identique

9 Couleurs Nom de la couleur Black, white, red, blue, maroon, purple, darkblue... Composantes RVB Exprimées en hexadécimal 256 valeurs par composante (de 00 à FF) Exemples #00ff55 #aa0010 #225577

10 Caractères spéciaux Compatibilité avec tous les systèmes é : é è : è ê : ê à : à ô : ô < : < > : > Espace insécable : Plus obligatoire à l'heure actuelle!

11 Jeux de caractères Représentation des caractères en informatique ASCII, Unicode, UTF-8 Possible d'indiquer l'encodage utilisé sur une page Web Exemple Balise META <META Http-equiv="content-type" Content="text/html; charset=iso ">

12 Types MIME Définition du type de contenu text/html, text/plain, image/png, image/jpeg... Sur une machine locale c'est l'extension qui permet d'identifier a priori le contenu Pour un navigateur, souvent, l'extension ne permet pas de deviner le contenu Page retournée par un script PHP Besoin d'indiquer le type de contenu retourné Type MIME inclus aussi dans la requête HTTP

13 Formulaires Récupération de données en provenance de l'utilisateur Envoi par (solution presque abandonnée) Traitement par un programme Balises <FORM>... </FORM> Name : nom du formulaire Method : méthode d'envoi des différentes champs GET : directement dans l'url POST : dans un fichier Action : où sont envoyées les données mailto:contact@sninformatique.net script.php

14 Méthode GET Données visibles dans l'url du navigateur Données peu nombreuses Données non confidentielles Exemple

15 Méthode POST Données non visible dans l'url Stockage dans un fichier côté serveur Données nombreuses et lourdes Données confidentielles Exemple

16 Différents champs Balise <INPUT> Name : nom du champ Type : type de champ Value : valeur par défaut du champ Size : largeur du champ Autres paramètres en fonction du type de champ

17 Types Text et Password Type Text : champ text Type Password : champ texte caché Paramètres Size : largeur du champ Maxlength : nombre maximum de caractères Readonly : champ en lecture seul Exemple <INPUT Type=text Name=ville Value=Reims>

Types Checkbox et Radio Type Checkbox : case à cocher Checked : case cochée par défaut Affiche uniquement la case à cocher Type Radio : boutons radio Plusieurs

18 Types Checkbox et Radio Type Checkbox : case à cocher Checked : case cochée par défaut Affiche uniquement la case à cocher Type Radio : boutons radio Plusieurs balises <INPUT> avec le même nom mais des valeurs différentes Un choix parmi n possibles Checked : bouton sélectionné par défaut Affiche uniquement les boutons radio

19 Types Hidden, Button et File Type Hidden : champ caché Juste une valeur affectée à un nom Type Button : bouton Value : Texte du bouton Utile avec Javascript Type File : envoi d'un fichier Affichage d'un bouton parcourir Balise <FORM Enctype=multipart/form-data>

20 Bouton avancé Balises <BUTTON>... </BUTTON> Permet de créer des boutons avec du contenu HTML Exemple <BUTTON><FONT Size=5>Voici</FONT> <I>un <FONT Color=red>bouton</FONT></I> avec du <B><U>HTML</U></B></BUTTON>

21 Champ de texte multi-lignes Balises <TEXTAREA>... </TEXTAREA> Cols : nombre de colonnes Rows : nombre de lignes Exemple <TEXTAREA Cols=40 Rows=6> Texte par défaut... </TEXTAREA>

22 Listes Balises <SELECT>... </SELECT> Size : nombre d'éléments visibles 1 : liste déroulante >1 : liste normale Multiple : active la sélection multiple Balise <OPTION> Value : valeur de l'option

23 Types Reset et Submit Type Reset : réinitialisation du formulaire Affichage sous forme d'un bouton Value : texte du bouton Type Submit : validation du formulaire Affichage sous forme d'un bouton Value : texte du bouton Utilisation du champ Action de la balise <FORM>

24 XHTML Normalisation XML du HTML Règles d'écriture plus strictes Toute balise ouvrante doit être fermée Balises et paramètres en minuscules Valeurs des paramètres entre guillemets Chaque paramètre doit avoir une valeur Les balises doivent être correctement imbriquées Meilleure structure pour les pages Pas d'une importance fondamentale

25 DTD Déclaration de Type de Document Règles respectées par la page Web HTML 4.01 / XHTML 1.0 transitional / strict / frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Pas vraiment utile pour les navigateurs Utile pour les validateurs W3C

26 HTML 5 Nouvelle structuration interne des pages Nouvelles balises <header> <footer> <nav> <article> <audio> <video> <canvas>...

Documents pareils

Langage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv>

Langage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv> Langage HTML (2 partie) «Je n'ai fait que prendre le principe d - hypertexte et le relier au principe du TCP et du DNS et alors boum! ce fut le World Wide Web!» Tim Berners-Lee