Đang tải... (xem toàn văn)
Học lap trình Web với các ngôn ngữ CSS3, HTML 5 và Javascript. Dành cho các bạn sinh viên, người muốn tìm hiểu để làm các trang web đẹp, các design thiết kế frontend một ứng dụng web. Sách bằng tiếng anh Cách tóm tắt các nội dung chính của HTML5
HTML5 mộmento Rod ol p he R im e lộ Syntaxe dHTML HTML (HyperText Markup Language) est spộcifiộ par le W3C (World Wide Web Consortium, http://www.w3.org/), linitiative du WhatWG (http://www.whatwg.org/html), en tant que living standard en ộvolution constante, sans numộro de version La syntaxe dHTML est plus permissive quen XHTML : les ộlộments vides ne nộcessitent pas dờtre fermộs (ex : ), la casse est variable et les guillemets facultatifs (), et certaines balises fermantes sont optionnelles Les commentaires prộsents dans le code source ne sont pas affichộs ni interprộtộs par le navigateur ( Ceci est un commentaire >) Gardez les bonnes habitudes XHTML Les conventions dộcriture XHTML sont plus constantes et claires En cas de nombreux ộlộments rộpộtộs (surtout des blocs ), prenez soin dindiquer par un commentaire la fin de chaque bloc important BONNE PRATIQUE HTML5 dộfinit des familles dộlộments plus variộes que les simples types bloc et en ligne : les mộta-informations, les ộlộments de flux, les ộlộments de phrasộ, le contenu embarquộ et le contenu interactif Document avec en-tờte complet : des balises allộgộes manifest Ma page La racine Contient un ộlộment suivi dun ộlộment Prộcisez la langue du document avec lattribut lang En-tờte du document Contient les mộta-informations interprộtộes par le navigateur sans apparaợtre dans le corps du document : , , , , Corps du document Contient toutes les balises HTML de contenu : texte, blocs, images, titres, mộdias, formulaires, etc Titre du document Affichộ par le navigateur et indexộ par les moteurs de recherche Contenu par Les kiwis travers les õges name, value, charset, http-equiv type, media, scoped type, src, defer, async, async charset Mộta-informations Apporte des informations (mots-clộs, description, auteur) dans len-tờte que les agents utilisateurs vont pouvoir exploiter Autres valeurs possibles de name : author, generator, application-name Styles embarquộs dans le document Dộclarations CSS appliquer au document HTML h1 { color:red; } Lattribut scoped indique que les styles ne sappliquent quau parent qui contient cette balise (peu pris en charge en pratique, mieux vaut toujours placer dans ) Script Contient un script (JavaScript) ou fait rộfộrence un fichier externe avec lattribut src Lattribut async indique une exộcution asynchrone, dốs que le script a ộtộ chargộ Texte alternatif aux scripts Lorsque les scripts sont dộsactivộs sur le navigateur Ignorộ par les navigateurs dont les scripts sont activộs Votre navigateur ne supporte pas les scripts href, target Adresse de base Lattribut href indique une URL absolue de base partir de laquelle calculer les liens du document, et target un contexte de navigation (nom, _blank, _self, _parent ou _top) Syntaxe dHTML AVERTISSEMENT Le niveau de prise en charge de HTML, en ộvolution constante, varie dun navigateur lautre Consultez des tableaux de prise en charge jour, tels que sur www.caniuse.com, lun des plus complets Outre ses balises, HTML5 offre de nombreuses API pilotables avec JavaScript pour crộer des fonctionnalitộs avancộes : Gộolocalisation, Audio et Vidộo, Web Storage, Canvas, Microdata, Offline, Server-Sent Events, Web Workers, Web Sockets, IndexedDB, Drag&Drop, FullScreen, etc CONVENTIONS le pictogramme Les nouveaux ộlộments apparus avec HTML5 sont signalộs par ; les nouveaux attributs sont signalộs en noir Des sections pour structurer le document Le choix du balisage de section est laissộ la libre apprộciation du dộveloppeur web Texte id="dessin" alternatif var canvas = document.getElementById('dessin'); var ctx = canvas.getContext('2d'); ctx.fillRect(0,0,50,50); src, srcdoc, name, width, height, sandbox, sandbox seamless Cadre (contexte) de navigation imbriquộ Embarque dans le document une navigation sur un autre document externe, ladresse src, en allouant des dimensions dộfinies par width (largeur) et height (hauteur) Lattribut seamless dit au navigateur de rendre le contenu comme si le fichier faisait partie intộgrante du document dans lequel il est appelộ (par exemple, pour lapplication des styles CSS) Lattribut sandbox prộcise les rốgles de sộcuritộ autoriser : allow-sameorigin, allow-forms, allow-scripts, allow-top-navigation Sa seule prộsence sans valeur dộsactive toutes les autorisations data, type, name, width, height, form, usemap Objet externe Permet de faire appel un objet externe, souvent interprộtộ via une extension (plug-in), par exemple pour Flash ou Java Le type MIME de lobjet est prộcisộ par lattribut type et les dimensions par width (largeur) et height (hauteur) Texte alternatif : Java nest pas installộ. Paramốtre dobjet Dộfinit les paramốtres dexộcution pour src, type, height, width Intộgration de contenu externe Officialisộ, cet ộlộment (vide) est proche d pour embarquer du contenu exộcuter avec des extensions ; tous ses paramốtres sont dộfinis cependant par des attributs ô libres ằ et non par des enfants Menus et commandes href, rel, hreflang, media, media type, sizes Les relations existant en complộment de sont bookmark, nofollow, noreferrer, tag Relation externe Dộclare un lien vers des ressources externes, couramment employộ pour lier une feuille de style CSS au document HTML avec le type stylesheet ou une icụne avec le type icon Dautres types de relations : alternate, author, help, license, next, prefetch, prev, search Les types MIME Les types MIME prộcisent, sous forme dun type et dun sous-type, les formats de fichiers rencontrộs sur le Web Ils sont envoyộs par le serveur web au navigateur pour lui indiquer comment interprộter le contenu qui lui est dộlivrộ Exemples : text/html, text/ javascript, image/png, application/xml, video/mp4 RAPPEL Formulaires action, method, enctype, novalidate, autocomplete Formulaire Regroupe un ensemble de champs interactifs permettant de recueillir des informations auprốs de lutilisateur Le formulaire est gộnộralement validộ laide dun ộlộment ne peut contenir directement que des ộlộments de type bloc et ne peut pas contenir dautres ộlộments Nom Lattribut novalidate indique que le contenu du formulaire ne doit pas ờtre validộ (avec pattern, required, et types email, url, etc.) avant la soumission Groupe de champs Regroupe des informations de mờme thộmatique dans un formulaire pour en faciliter la comprộhension, et doit contenir directement un ộlộment Informations personnelles Nom Prộnom Lộgende dun regroupement de champs Ajoute une lộgende un groupe , auquel elle est obligatoirement associộe La lộgende amộliore laccessibilitộ quand lộlộment est restituộ de maniốre non visuelle Champs de formulaires ẫtiquette Associe une ộtiquette un champ de formulaire, oự lattribut for se rapportera lattribut id du champ en question Lộlộment est utile pour aider la comprộhension du formulaire et accroợt laccessibilitộ Votre nom id="nom nom" name="nom_utilisateur"> [...]... http:/ /html5 . blup.fr/">Dộcouvrir HTML5 Les ộlộments contenus deviennent cliquables (par exemple, des images) Avec HTML5 , il est autorisộ dy placer des ộlộments de type bloc href, rel, hreflang, media, media type, sizes Les relations existant en... naviguer au sein de la page ou vers une autre page HTML Ses attributs courants sont href (destination du lien), id (pour crộer une ancre) et hreflang (langue de la destination) On peut prộciser media (type de mộdia pour lequel le lien est prộvu) et type (type MIME de la ressource destination) Dộcouvrir HTML5 Les ộlộments contenus deviennent... ộlộments prộsents dans HTML4 et dans les prộcộdentes versions sont dộsormais obsolốtes, car remplacộs avantageusement par les feuilles de style CSS ou par dautres fonctionnalitộs mieux pensộes Il sagit de , , , , , , , , , , , , , , Attributs globaux applicables tout ộlộment HTML5 contenteditable... daccốs direct au clavier (par combinaison de touches variộes selon le systốme) aux ộlộments recevant le focus HTML CSS accesskey= class id dir lang style Classe Confốre une classe un ou plusieurs ộlộments HTML, qui peut ờtre utilisộe dans la feuille de style CSS pour attribuer des propriộtộs communes plusieurs de ces ộlộments,... informations propos dun ộlộment, souvent affichộes par le navigateur sous forme dinfobulle lorsque le curseur survole cet ộlộment HTML 5 Une rộfộrence pour le dộveloppeur web, R RIMELẫ CSS avancộes : vers HTML 5 et CSS 3, R GOETTER CSS 2 : pratique du design web, 3e ộd., R GOETTER Mộmento XHTML, 2e ộd., R GOETTER Mộmento Ergonomie web, 2e ộd., A BOUCHER Mộmento Sites web : les bonnes pratiques, 3e ộd., ẫ SLOẽM... hidden (champ masquộ), image (soumission avec une image), button (bouton gộnộrique) Avec HTML5 , les nouveaux types : datetime (date et heure), datetimelocal (localisộes avec fuseau horaire), date (date), month (mois), time (heure), week (semaine), number (valeur numộrique), range (intervalle),... Vous pouvez le retrouver ainsi que toute la collection en version papier dans toutes les bonnes librairies ! XHTML mộmento mộmento Dộcouvrez toute la collection mộmento sur : www.eyrolles.com Ergonomie web 2e ộ d i t i o n Raphaởl Goetter 2e ộdition Amộlie Boucher Raphaởl Goetter Mộmento XHTML 978-2-212-12541-2 Amộlie Boucher Mộmento - Ergonomie web 978-2-212-12698-3 mộmento mộmento Sites web Les bonnes... Opquast Mộmento Sites web Les bonnes pratiques 978-2-212-12802-4 Rodolphe Rimelộ Mộmento MySQL 5 978-2-212-13419-3 Chez le mờme ộditeur : Raphaởl Goetter CSS avancộes 978-2-212-13405-6 Rodolphe Rimelộ HTML5 978-2-212-12982-3 Tous les livres informatiques sont sur www.editions-eyrolles.com Et pour toutes les nouveautộs numộriques, retrouvez-nous sur Twitter et Facebook @ebookEyrolles EbooksEyrolles ... type et dun sous-type, les formats de fichiers rencontrộs sur le Web Ils sont envoyộs par le serveur web au navigateur pour lui indiquer comment interprộter le contenu qui lui est dộlivrộ Exemples : text /html, text/ javascript, image/png, application/xml, video/mp4 RAPPEL Formulaires action, method, enctype, novalidate, autocomplete Formulaire Regroupe un ensemble de champs interactifs... existant en complộment de sont bookmark, nofollow, noreferrer, tag Relation externe Dộclare un lien vers des ressources externes, couramment employộ pour lier une feuille de style CSS au document HTML avec le type stylesheet ou une icụne avec le type icon Dautres ... destination) Dộcouvrir HTML5 < /a> Les ộlộments contenus deviennent cliquables (par exemple, des images) Avec HTML5 , il est autorisộ dy... autorisộ dy placer des ộlộments de type bloc href,... des balises allộgộes manifest Ma page < /html> La racine Contient