Le HTML 5 : introduction.
© LigneWeb ... Optimisé pour Safari, Chrome. ... © : alain jean deligne ... /introduction au HTML 5.
Introduction au HTML 5.
... qu'est ce que le HTML 5 ?
... le ... HTML 5 ... est le ... nouveaux langage du web ... avec , pour le style, le ... CSS 3.0 ...
... il est en plein développement ... et va devenir le premier langage du web ...
... parce qu'il intègre de ... nouvelles fonctionalités ... ainsi que ... le JavaScript ...
... qui lui même permettra l'utilisation ... de Ajax ... et donc la création d'un ... site dynamique ... visible par l'internaute ...
... c'est une dimension qui amène à être ... maître à bord ... avec l'autonomie possible ...
... pour entrer dans ce nouveau langage, ... il est ... important ... de partir avec les connaissances soit du ... HTML 4.0 ...
... soit celles du ... XHTML 1.0 ... ce qui est d'ailleur préférable ...
... pour y accéder, il nous faut deux éléments ...
... ➀ ... la description complète du langage ... ce qui se prépare avec le ... W3C ...
... ➁ ... et des navigateurs capables de le lire évidemment ... ce qui commence à se réaliser ...
... les webmasters ont toujours été confrontés à des évolutions de langages ...
... mais aussi à des différences parfois très importantes entre les navigateurs ...
... ce dernier point semble se dissiper actuellement ... et c'est très bien ainsi ...
... dans ce contexte, la mise en oeuvre du ...
HTML 5 ... demande encore de la patience ...
... il suffit de voir les positions du ...
W3C et des ingénieurs chez ...
Facebook ...
... qui expriment ...
leurs points de vue ... dans ...
GNT ...
... avec cet ...
autre article également dans GNT ...
Le HTML 5 en formation : ...
...Quelques règles pour HTML5 ont été établies et elles s'affinent de jours en jours : ...
... de nouvelles fonctionnalités fondées sur le langage HTML, CSS, DOM et JavaScript ...
... avec l'utilisation d'Ajax pour des applications web qui permettent de faire un site web dynamique ...
... la réduction du besoin de plugins externes (comme Flash par exemple) ...
... une meilleure gestion des erreurs ...
... plus de balisage pour remplacer les scripts ...
... le processus de développement devraient être visibles pour tous ...
... ce qui débouche sur la possibilité d'une autonomie évidente ...
Quelques exemples : ...
... la nouvelle balise ... canvas ... pour dessiner...
... les balises ... audio ... et ... vidéo ... pour la lecture des médias ...
... le contenu spécifique de nouveaux éléments, comme l'article, le pied de page, l'en-tête, des éléments de navigation, etc ...
... des contrôles de formulaire nouveau, comme un calendrier, la date, l'heure, l'E-mail, l'url, la recherche ... etc ...
|
... le logo du ... HTML 5 ... et ...
... son style ... CSS 3.0 ...
|
... certaines anciennes balises disparaissent, ... mais de nouvelles apparaissent donnant beaucoup de potentialité ...
... nous allons étudier tout cela progressivement ...
Les balises d'encadrement :
La balise doctype : ...
... il faut d'abord commencer par préciser le langage utilisé qui est le HTML 5 ...
... pour ce faire, nous utilisons la balise ... DOCTYPE ... bien connue ...
... elle s'écrit comme suit : ... <!DOCTYPE html> ...
... avec un ... point d'exclamation ... avant le mot ... DOCTYPE ... et les lettres html ...
... mais il peut aussi s'écrire ... <!doctype html> ... en minuscule ...
Balise doctype du HTML 5 :
Pour le futur ... HTML 5 ...
... ou bien ...
Balise doctype du XHTML 5 :
... Pour le futur ... à confirmer …
... le XHTML 5 demande le CSS en fichier extérieur avec le CSS 3.0 ...
La balise html : ...
... La deuxième balise qui reste inchangée est la balise ... html ...
... avec la balise entrante ... <html> ... et la balise sortante ... </html> ...
... dans la page html ... il y a deux balises, ... une partie invisible et une partie visible ...
La balise head : ...
... la partie ... invisible ... de la page html s'écrit dans la balise ... head ...
... la balise entrante ... <head> ... et la balise sortante ... </head> ...
La balise body : ...
... la partie ... visible ... de la page html s'écrit dans la balise ... body ...
... la balise entrante ... <body> ... et la balise sortante ... </body> ...
Première structure ... html - head - body :
... il n'y a pas de changements ... à part celui du ... doctype ...
Les balises internes à head :
La balise title : ...
... la première balise est la balise ... title ...
... avec la balise entrante ... <title> ... et la balise sortante ... </title> ...
... comme sur toute page web, il faut un nom donnant un aperçu suffisant du contenu de la page ...
... ce nom va se mettre tout en haut de votre navigateur ... et permet aux moteurs de recherche de mieux vous cataloguer ...
... la première balise meta est celle concernant le ... codage ...
... cette balise s'écrit : ... <meta charset="utf-8" /> …
… la balise essentielle … pour le HTML 5 …
... la deuxième balise meta interne à head est la ... description, ... cette balise s'écrit :
... <meta name="description" content="la description de votre page et de votre site" /> ...
... la troisième balise meta dans head est ... keywords, ... cette balise s'écrit :
... <meta name="keywords" content="HTML 5, CSS 3.0, XML, JavaScript" /> ...
... la quatrième balise meta dans head est ... author ...
... cette balise s'écrit : ... <meta name="author" content="mathalan" /> ...
... la balise suivante est celle du ... language ... et elle s'écrit : ...
... <meta name="language" content="fr" /> ...
... la balise exprimant la version de l'encodage ... version ... et qui s'écrit : ...
... <meta name="version" content="3.0" /> ...
... la balise ... robots ...qui indique ce qu'il peut faire ... et qui s'écrit : ...
... <meta name="robots" content="index, follow" /> ...
... l'autre balise pour les robots ... revisited ... et qui s'écrit: ...
... <meta name="revisit-after" content="10 days" /> ...
... la balise pour le ... copyright ... et qui s'écrit : ...
... <meta name="copyright" content="mathalan" /> ...
... la balise qui précise le ... publisher ... et qui s'écrit : ...
... <meta name="publisher" content="mathalan" /> ...
... la balise qui donne l'E-Mail ... reply-to ... et qui s'écrit : ...
... <meta name="reply-to" content="mathalan@ligneweb.net" /> ...
... la balise qui donne les ... application" ... et qui s'écrit : ...
... <meta name="application" content="Gimp 2.6, Scribus 1.3.8, Audacity 1.3.12" /> ...
... la balise qui nomme le ... generator ... et qui s'écrit : ...
... <meta name="generator" content="Smultron 3.1.2" /> ...
La nouvelle balise " base " : ...
... La balise ... base ... spécifie une URL par défaut, et / ou une cible par défaut ...
... pour tous les éléments d'une URL (hyperliens, images, formes, etc) ..
... elle n'est pas nécessaire ... c'est une balise unique ... elle s'écrit : ...
... <base href="http://www.ligneweb.net/liens#copyright" target="_blank" /> ...
La balise link : ...
... la balise ... link ... est celle qui appelle une feuille de style, ... un script ... et s'écrit : ...
... <link rel="stylesheet" type="text/css" href="style.css" /> ...
... certains attributs de link ne sont pas repris du XHTML 1.0 ... et des nouveaux existent avec le HTML 5 ...
... nous allons les voir ici ...
... href="..." ... l'URL cible de la ressource ...
... hreflang="..." ... le langage-code de l'URL cible ... (exemple ... utf-8) ...
... type="..." ... le type-mime comme : ... text/css ... text/javascript ... image/gif ...
... rel="..." ... comme stylesheet ... alternate, archives, author, first, help, ...
... icon, index, last, license, next, pingback, prefetch, prev, search, sidebar, tag, up, ...
... media="..." ... comme screen, tv, projection, print, braille, aural, all ...
La balise script : ...
... la balise ... script ... reste pratiquement inchangée et s'écrit : ...
... <script type="text/javascript" language="JavaScript" src="date.js"> ...
... et se ferme par ... </script> ... comme dans le XHTML 1.0 ...
Deuxième structure ... html - head - body :
... les commentaires s'écrivent de la même façon que dans le XHTML 1.0 ...
... <!--ceci est un commentaire--> ...
-
Plan du site -
Actualiser votre site. 
![[Valid RSS]](valid-rss-rogers.png "Validate my RSS feed")
... Création de site web : ... masterligne .
