Cookies acceptés.
bouton pour découvrir notre choix
bouton de redirection: haut
bouton de redirection: home
bouton de redirection: bas
bouton de redirection: explication des cookies
Création de sites web 3 D.   Webmaster, webdesign - Conseil.

Votre site web 3D, ... pour une autonomie.

Un espace francophone artisanal et pédagogique.
Logo de LigneWeb

Titre du site ligneweb.net
... JavaScript indispensable ... code utf-8 ... -  © design : LigneWeb

- Site expérimental en XHTML 1.0 et CSS 2.0 avec CSS 3.0 -


 •   Plan du site 
Avec des cours et des conseils.
  Notre Blog :  La ligne papyrus 
 Menu HTML 5  - Cours 1  - Cours 2  - Cours 3  - Cours 4  - Cours 5  - Cours 6  - Cours 7  - Cours 8  - cours 9 
 Menu cours 1 HTML 5  - introduction   - doctype  - html  - head  - body  - title  - meta  - link 
- base  - script  - Commentaires  ➽ ➽ ➽ - notre choix proposé 



Cours 1 HTML 5 avec LigneWeb
les balises dans head.



 © LigneWeb  ... /introduction au HTML 5.
© design : LigneWeb
© : alain jean deligne              ... Coins arrondis, ... ombrages, ... couleur de fond en dégradé : ...
... avec la propriété box-shadow ... avec inside (l'ombrage interne) ... donnant l'effet 3 D ... en CSS 3 ...
... avec la propriété box-shadow ... l'ombrage externe ... donnant l'effet 3 D ... en CSS 3 ...



Cette page est réalisée en XHTML 1.0 transitionnel avec du CSS 2 et du CSS 3 ...
Cette page va être réalisée en parallèlle en HTML 5 et CSS 3 prochainement ...






Introduction au HTML 5.

Suivez-nous.








Remarque : ... en CSS2 et CSS3 ... :

pour cette page et non visible ... :
le fichier ...  ligne21.css  ... qui mélange du CSS 2 avec du CSS 3 ...
... et ceci grâce aux sélecteurs spécifiques ... expliqués au ...  Cours CSS 3 





Ce n'est pas de l'enseignement, c'est du partage de connaissances.



Cliquez ici pour le détail

Notre choix proposé ...

... c'est un site pédagogique ...
... il est construit avec ce qu'il enseigne : ...
... le XHTML/CSS 2 vers et pour le HTML 5/CSS 3 ...

Notre choix permet ceci :

... la page construite en HTML 5 / CSS 3 est celle que vous avez construite vous-même ...
... vous avez écris vous même le texte en suivant la logique simple d'écriture ...
... en utilisant les balises encadrantes définies par ce HTML 5 / CSS 3 tout simplement ...

... vous êtes maître à bord et pouvez toujours changer, transformer ou recréer votre page ...
... votre autonomie qui en découle est la garantie de votre individualité ...
... elle participe de votre liberté, de votre créativité, ...
... de votre dimension humaine ...

... un retour à l'essentiel, ... qui n'enlève rien au partage ...
... partage d'une compétence, d'une connaissance, d'une aide aussi ...
... vous pouvez commencer par le XHTML / CSS 2 qui est la base du HTML 5 / CSS 3 ...

... l'accès à ce site est gratuit, ...
... même si nous proposons aussi de réaliser avec vous un site web ...
... cette dimension existe pour tous ceux qui en ont besoin ...
... un besoin d'autonomie avec une aide ... à prix modique ...
... je peux aussi le réaliser complètement avec des explications ...


... la balise  details  ne fonctionne pas avec certains navigateurs ... (c'est le résultat final qui apparait) ...



... qu'est ce que le HTML 5 ?


... le HTML 5 est enfin officiel ... nous apprend le W3C ... ( 28 Octobre 2014 ) ...

...  le W3C fait du HTML5 une recommandation officielle.  ...



... le ... HTML 5 ... est le ... nouveaux langage du web ... avec , pour le style, le ... CSS 3.0 ...
...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 ...
... c'est une dimension qui amène à être ... maître à bord ... avec l'autonomie possible ...


... c'est le html 5 avec de nouvelles fonctionalité qui apporte une dynamique au site web ...
... en association avec ce qui existe déjà comme JavaScript, jQuery, ... mais aussi ...
... la fonction XMLHTTPREQUEST permettant des applications en AJAX de se concrétiser ...


Les navigateurs ne sont pas encore près. Mais avec Amaya, Gecko, KHTML, Presto, Tasman, Trident, WebKit, etc. on peut déjà commencer.
En PHP, c'est le serveur qui travaille. En HTML5,c'est mon ordinateur qui travaille.
Ce qui libère les Datacenter pour d'autres fonctions.

... 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 ...
... nous verrons progressivement ce qui change et ce qui reste du XHTML ...

... 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 ...
... leW3C ... a finalisé les spécifications du « langage » HTML 5 ...
... il reste à terminer les implémentations pour les navigateurs, qui seront terminées au courant de 2014 ...
... voir l'article ...  le HTML 5 est finalisé !  ...
... voir aussi les informations données par GNT ...  la position du W3C  ...

... le HTML 5 est enfin officiel ... nous apprend le W3C ...


... pour aller vers le nouveau HTML 5 ... et surtout vers le XHTML 5 ...
... il existe actuellement une librairie comme le Framework jQuery.js ...
... pour aider à l'utilisation d'AJAX entre autre... avec le XHTML 1.0 ...
... en attendant le développement de nouvelles applications ...
... mais qui s'utilise aussi avec le HTML 5 ...
...  pour information  ... nous avons un exemple de ...  bandeau d'actualité défillant  ...
... nous les étudierons plus tard ... c'est en travail dans le monde ...
...la difficulté reste l'adaptation aux anciens navigateurs comme vous pouvez le voir ...





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 ...

... information sur le ... HTML 5.0 ...  pour les navigateurs sur Wikipedia  ... et leurs plugins ... :
...  Amaya, Gecko, KHTML, Presto, Tasman, Trident, WebKit  ...
... avec, pour l'essentiel : -moz-, -webkit-, -o-, -ms-, ... comme sélecteurs spécifiques ...

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 ...

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage  ... 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 ...

... un blog très intéressant donnant un avant goût du nouveau HTML 5 ...  clicmag.blogspot.be  ...
... il est important de préciser que les divrerses anciennes balises meta sont toujours importantes ...

... Le W3C a finalisé les spécifications du « langage » HTML 5 ...
... reste à terminer les implémentations pour les navigateurs :  information frandroid  ...




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 ...
... cette balise est unique ... et ne s'écrit qu'au début du fichier .html ...
... 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 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 référencer ...


Les balises meta : ...

... 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 ...
... avec ensuite la balise de la langue ... (vue plus loin) ...
... fenêtre sur l'univers ...          © design : LigneWeb

... la deuxième balise meta interne à head est la ... description, ... cette balise s'écrit :
...  <meta name="description" content="la description précise de votre page" />  ...
... c'est également une balise essentielle pour les moteurs de recherche tels que Google ...
... fenêtre sur l'univers ...          © design : LigneWeb

... 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-fr" />  ...
... ou ...  <meta http-equiv="content-language" content="fr-fr" />  ...
... le deuxième fr de ... fr-fr ... précisant le français de France ...
... le distinguant de celui du Canada, de la Suisse, etc ...

... 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" />  ...
... voir aussi ...  Tuto balise meta robots et référencement  ... de WebRankinfo ...
... qui donne aussi des conseils pour le référencement naturel ...
... 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" />  ...

... des balises supplémentaires recommandées précisant le propriétaire du site ...
... la balise property qui donne l'adresse du site web ... et qui s'écrit : ...
...  <meta property="og:url" content="http://www.ligneweb.net" />  ...

... la balise property qui donne l'adresse du propriétaire ... et qui s'écrit : ...
...  <meta property="og:street-address" content="rue Georges Thone -13" />  ...

... la balise property qui donne la localité du propriétaire ... et qui s'écrit : ...
...  <meta property="og:locality" content="Liège" />  ...

... la balise property qui donne la région du propriétaire ... et qui s'écrit : ...
...  <meta property="og:region" content="Wallonie" />  ...

... la balise property qui donne le code postal du propriétaire ... et qui s'écrit : ...
...  <meta property="og:postal-code" content="B 4020" />  ...

... la balise property qui donne le pays du propriétaire ... et qui s'écrit : ...
...  <meta property="og:country-name" content="Belgium" />  ...

... la balise property qui donne le n° de FAX du propriétaire ... et qui s'écrit : ...
...  <meta property="og:fax_number" content="32 42720232" />  ...

... la balise property qui donne le n° de téléphone du propriétaire ... et qui s'écrit : ...
...  <meta property="og:phone_number" content="32 498764330" />  ...




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" />  ...
... fenêtre sur l'univers ...          © design : LigneWeb


... la balise ... link ... est celle qui appelle une feuille de style, ... un flux RSS, ... un favicon, ... un type de média,
... et s'écrit : ...
...  <link rel="stylesheet" type="text/css" href="style.css" />  ...
... pour l'appel du flux RSS, on écrit par exemple ...
...  <link rel="alternate" type="application/rss+xml" title="Quoi de neuf \?" 
 href="http://www.ligneweb.net/fluxligne.xml" /> 
...


... 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 ...

... on utilise l'anti-slash ... \ ... à mettre devant le ... ? ...
... il sera aussi utilisé devant ... l'apostrophe ... l\'ombrage ...
... et ceci pour ... éviter la confusion de lecture ... du navigateur ...
... ce sont ce qu'on appelle des signes spéciaux réservés pour l'écriture des codes ...

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 ...
... un exemple d'appel d'un script fort utilisé en HTML 5 ...
...  <script type="text/javascript" 
 src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> 


... et se ferme par ...  </script>  ...



Deuxième structure ... html - head - body :




Les commentaires : ...

... les commentaires s'écrivent de la même façon que dans le XHTML 1.0 ...
...  <!-- ceci est un commentaire -->  ...
... mais pour écrire cette phrase, je dois utiliser les signes spéciaux, ...
... car sinon, c'est illisible dans body, donc sur cette page. ...

... J'ai donc écris le < avec & lt; et > avec & gt; ...
... sans l'espace pour les montrer sur une page web ...
... voir :  les caractères spéciaux : html 4 / ISO8859-1  ...
... valables aussi en XHTML et en HTML 5 ... pour certains d'entre eux ...


... design 3 D ...

...  fenêtre sur l'univers  ...             © design : LigneWeb - © Apple





 Menu HTML 5  - Cours 1  - Cours 2  - Cours 3  - Cours 4  - Cours 5  - Cours 6  - Cours 7  - Cours 8  - cours 9 
  Essentiel :   - Accueil  - Offres  - Site photo  - Projet  - Historique  - Historique RSS  - Réalisations  - Création 
- Cours XHTML  - Cours CSS 2  - Création site  - Cours HTML 5  - Cours CSS 3  - Cours jQuery 
- Programmes JS  - Liens - © - cookies  - Contact  - Plan du site 

Chaque enfant compte. Plan Belgique     Valid XHTML 1.0 Transitional     [Valid RSS]     CSS Valide !     Le logo de LigneWeb

... tout ne respecte pas le W3C ... site d'expérimentation ...

le titre du site web
©  Copyright :  "LigneWeb" (2008-2017) Tous droits réservés.  Légal  Design, Artisan web: mathalan 
 LigneWeb :   BE 0843 356 602. (2012-2017)   Conditions d'utilisation  Création: masterligne  • Qui sommes nous? 

Réinstaller le Bien en soi ... pour réinstaller le Bien sur terre ... et changer le monde.
© LigneWeb  Utilisation de cookies