Cours_01_HTML.pdf

 Inventé par Tim Berners-Lee en 1989 qui préside aujourd'hui le World Wide Web Consortium (W3C).  « 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 ! »  Un des services offerts par le réseau Internet pour naviguer (grâce à un navigateur) et consulter des pages mises en lignes et reliées par des liens hypertextes (système hypertexte). Caractérisé par des pages Web statiques, rarement mises à jour Considéré principalement comme un outil de diffusion et de visualisation de données. Evolution progressive vers un Web dynamique Web 1.5 (2000): Evolution du web statique vers le dynamique (migration progressive des applications coté serveur). Le contenu du site est dans une base de données, totalement administrable par un webmaster. Les sites s’appuient sur les outils de gestion de contenu. fonctionnement général identique au web 1.0  Web 2.0: Une évolution et révolution ◦ Un nouvelle interactivité et un travail collaboratif: L’ internaute= ‘créateur de contenu’ et ‘consommateur de contenu’ : Diffusion de l’expérience de l’internaute et consulter celle des autres (e.g au travers des blogs). ◦ Nouveaux concepts liés à l’ergonomie: moins de clics, plus d’informations affichées à l’écran, moins de temps de chargement ◦ Nouvelles technologies: langage AJAX pout rendre les pages interactives et fluides, Flux RSS, pour être informé des actualités d'une interface Web, les mashups pour interconnecter des applications Web 2.0. ◦ Les réseaux sociaux: échange réalisé par des techniques synchrones comme les messageries instantanées, la téléphonie sur internet ,... ou des méthodes asynchrones comme les forums, les wikis, les messageries en ligne,…. (Facebook, MySpace, Twitter, Viadeo, LinkedIn, etc) Source: http://www.webchercheurs.com/16/643-fr-l_evolution- de-l_internet-du-web-10-au-web-20.html  Web sémantique (le web intelligent) ◦ Les informations ne seraient plus stockées mais "comprises" par les ordinateurs afin d'apporter à l'utilisateur ce qu'il cherche vraiment. ◦ Objectif: Transformer la masse ingérable des pages Web en un gigantesque index hiérarchisé ◦ Projet ambitieux et au cœur de la recherche actuelle  Web 3.0: Web sémantique + Mobilité (applications disponibles sur tout type de support et notamment les mobiles devices)  en cours….. Source: http://fr.wikipedia.org/wiki/Web_s%C3%A9mantique Partie du web accessible en ligne, mais non indexée (accès à travers des requêtes et non des liens URL) par des moteurs de recherche classiques généralistes. Le web invisible comprend des bases et des banques de données et bibliothèques en ligne gratuites ou payantes... Cars.com Amazon.com Biography.com Apartments.com 411localte.com 401carfinder.com  Modèleclient/serveur: Communication entre un serveur (HTTP) et un client (navigateur) Requête HTTP Demande utilisateur: Affichage de la page index.html HTTP (HyperText Transfer Protocol): Le serveur renvoie la protocole du web : protocole de page index.html au client communication client serveur: web But: permettre un transfert de fichiers (essentiellement au format HTML) Réponse HTTP localisés grâce à une chaîne de caractères appelée URL entre un navigateur (le client) et un serveur Web Source: http://nicolas.dandrea.free.fr/SPIP/article.php3?id_artic2le0=2  Logiciel permettant à des clients d'accéder à des pages web, à partir d'un navigateur installé sur leur ordinateur distant.  Un serveur Web peut être : ◦ un ordinateur tenant le rôle de serveur informatique sur lequel fonctionne un logiciel serveur HTTP ; ◦ le serveur HTTP lui-même ; ◦ un ensemble de serveurs permettant le fonctionnement d'applications Web.  Plusieurs serveurs Web: ◦ Apache Windows/ UNIX (gratuit) (www.apache.org) ◦ Microsoft IIS (Internet Information Services) :le serveur Web payant de Microsoft ◦ Microsoft PWS (Personal Web Server) ◦ Iplanet Web Server : serveur payant de Netscape ◦ Etc,…  Le serveur le plus répandu sur Internet.  S’appuie sur les protocoles HTTP ou HTTPS (mode sécurisé de HTTP)  Une application fonctionnant sur les systèmes d'exploitation de type Microsoft, Unix.  Fonctionnalités ◦ Configuration assez simple ◦ Accès sécurisé en fonction des adresses IP ◦ Chargement de modules pour ajouter de nouvelles fonctionnalités (php, mysql, ssl,... ) ◦ Etc,… Adresse web – URL URL : Uniform Resource Locator http://serveur.domaine.fr/chemin/page.extension Ressource Chemin du fichier sur le serveur adresse du serveur Protocole de communication Exemples : http://www.ratp.fr/informer/trafic/trafic.php file:///users/lipade2/mahe/tmp/test_html5.html http://123.87.54.251/index.html Concepts fondamentaux du HTML HTML : HyperText Markup Language Langage de description de pages web Hypertexte : façon de relier des documents multimédias Mise en forme décrite par des fichiers de style CSS Un document HTML est: Un fichier texte, construit suivant une syntaxe précise Structuré par des balises Interprété (visualisé) par un navigateur Éléments, balises et attributs Trois termes à connaître en HTML : Élément Balise Attribut Éléments Un élément permet de définir un type d'objet dans une page. Quelques exemples : Élément title = Titre de la page Élément p = Paragraphe Élément h1 = Titre de niveau 1 Élément h2 = Titre de niveau 2 Élément a = Lien vers un autre emplacement (interne ou externe) Élément img = Image Balises (1) Les balises permettent de placer les éléments dans une page. Ici se trouve un paragraphe Les balises sont définies entre deux chevrons Le contenu d'un élément se place entre une balise ouvrante et une balise fermante : Contenu d'un élément Il existe également des balises orphelines : Par exemple : Élément br (break) : retour à la ligne. Élément input (break) : contrôle interactif. Balises (2) La plupart des éléments peuvent être imbriqués selon des règles bien définies : Mon titre Mon titre Les minuscules/majuscules n’interviennent pas dans la définition des balises Pas sensible à la casse Attributs Un attribut permet de donner des paramètres ou des indications à un élément. Un attribut se situe toujours dans une balise ouvrante : Contenu de l'élément Un élément peut contenir plusieurs attributs. Format d’un document HTML – DOCTYPE N'est pas une balise html Document Type Declaration Indication au navigateur sur la version de la page html Indique les règles d'écritures utilisées dans le fichier En HTML 4.01 En XHTML 1.0 Format d’un document HTML – html, head, body Tout document HTML commence par la balise et finit par la balise Tout document HTML contient 1. Un en-tête: et 2. Un corps: et En-tête Délimité par les balises et Pas d’affichage dans le contenu du navigateur Contient des informations générales sur le document, toujours chargées avant le corps Titre du document Informations sur le contenu du document Variables et fonctions des scripts JavaScript Les références aux feuilles de style Etc. Titre de la page web Contenue dans l’en-tête du document Définit le titre du document, terminé par la balise Le titre doit être court et explicite car : Il apparaît en tant que titre de la fenêtre du navigateur ; Il apparaît dans la liste des bookmarks ; Il est utilisé par les moteurs de recherche. Corps de la page web Délimité par les balises et Contient les informations affichables du document Texte du document Image Vidé o Etc... Titres hiérarchiques Les balises h1, h2, …h6 permettent de baliser un paragraphe comme étant un titre d’un certain niveau affectent la taille des caractères (taille décroissante) Titre suivi d'un saut de ligne ne doit pas être placé dans … Paragraphe Un paragraphe est délimité par les balises Un début de paragraphe provoque : Un passage à la ligne Un décalage d’une hauteur d’environ une ligne Balise Retour à la ligne Sans la balise le retour à la ligne n’est pas pris en compte. Il est simplement remplacé par un espace. Commentaires Tout texte commençant par « < ! - - » et se terminant par « --> » est un commentaire pour l’interpréteur HTML. Structurer / Baliser un texte (1) HTML permet de structurer sémantiquement le contenu d’une page web à l’aide de balises. Chacune de ces balises possède une mise en forme par défaut qui peut être modifiée par les styles CSS. L’ajout d’une balise dans un texte ne doit pas se faire en fonction de la mise en forme, mais en fonction de la sémantique du texte. HTML seul permet la mise en forme d’un texte, mais cela doit être éviter à tout prix. La mise en forme doit se faire à l’aide de styles CSS. Structurer / Baliser un texte (2) Les principales balises de structuration sémantique sont données dans les slides suivantes. Ces balises seront accompagnées d’un texte d’exemple. Dans un souci pédagogique, les balises seront affichées en rouge, mais il est évident que dans un fonctionnement normal du navigateur les balises n’apparaissent pas. La mise en forme sera celle d’un navigateur par défaut, elle peut varier légèrement d’un navigateur à l’autre. Structurer / Baliser un texte (3) Structurer / Baliser un texte (4) Structurer / Baliser un texte (5) Structurer / Baliser un texte (6) Utiliser l’élément pre pour préserver les espaces et les retours à la ligne. Fichier HTML Jeux de caractères Charset Jeux de caractères ; « Ã© » ou « Ã§ »: problème d'encodage des caractères ; le navigateur ne sait pas quel encodage utiliser pour afficher la page ; ISO-8859-1 (parfois appelé latin1) : tous les caractères du français ; ISO-8859-15 (parfois appelé latin9) : ajoute le symbole « euro » et le « o dans l’e » ; UTF-8 : toutes les langues, du français au japonais en passant par l'arabe ; Vérifier dans les paramètres de configuration de votre éditeur (Dreamweaver, Notepad++, Bluefish, etc.). HTML5 Les caractères spéciaux http://www.w3.org/TR/html5/syntax.html#named-character-references http://dev.w3.org/html5/html-author/charref Listes non ordonnées Les balises : liste à puces (unordered list) : élément de liste La forme des puces peut être modifiée à l’aide de styles CSS. (Cercles, carrés, couleurs, images, etc.) Listes ordonnées Les balises : liste ordonnée (ordered list) : élément de liste L’apparence des numéros peut être modifiée à l’aide de styles CSS. (Chiffres romains, lettres, majuscules, minuscules, etc.) Listes de définitions Les balises : liste de définition : terme à définir : définition du terme Hyperliens (1) Tout l'intérêt du HTML Balise Attribut principal : href Hyperliens (2) Ouverture du lien dans une nouvelle fenêtre : Attribut : target="_blank" Affichage d’une infobulle lors du survol du lien : Attribut : title="Texte de l’infobulle." Cibles d’un hyperlien Il existe plusieurs cibles possibles pour un hyperlien :  Lien absolu vers un autre site ;  Lien relatif vers une page du même site ;  Lien vers une adresse e-mail ;  Lien vers un fichier à télécharger ;  Lien vers une ancre. Ancres Une ancre s'utilise en plaçant un attribut id (identifiant) sur une balise. Page_01.html Page_02.html Toute balise peut posséder un identifiant (attribut global). Il peut exister plusieurs identifiants au sein d'une même page HTML, mais chaque identifiant doit être unique. Images (1) La balise permet de placer une image sur le document. Attributs : src : URL de l'image (relative ou absolue) width : largeur (facultatif) height : hauteur (facultatif) title : infobulle (facultatif) alt : texte alternatif (obligatoire) Images (2) Une image peut également être transformée en lien. Il faut pour cela l’insérer dans un élément a. Images (3) SVG = Scalable Vector Graphics (recommandation du W3C) SVG décrit un graphique dans un format XML Chaque élément d'un graphique SVG peut être animé Pas de perte de qualité si changement de taille Format bitmap (jpg, png, etc.) Zoom 8x Format vectoriel (SVG, PS, etc.) Programmer proprement HTML est très tolérant : Il est possible d’écrire une page HTML avec des erreurs Balise ouverte sans fermeture, etc. Ce n'est pas une raison pour en profiter ! Écrire des pages conformes aux règles du W3C permet : de retravailler ses programmes ultérieurement ; de faciliter l'écriture collaborative des programmes ; d’améliorer le recensement de son site. HTML5 vs XHTML5 XHTML5 est du HTML5 respectant la syntaxe XML. La syntaxe XML est beaucoup plus stricte : Balises toujours en minuscule. Les balises orphelines se terminent par un slash (). Etc. Utile si l’on veut traiter son fichier XML. (Par exemple pour le transformer en fichier PDF, etc.) Validation d’une page HTML

Document Details

Related

Full Transcript

Upgrade to continue