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

la communication web
... 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  - Création site  -  créer 1  - créer 2  - créer 3  - créer 4  - créer 5  - créer 6  - créer 7  - créer 8  - créer 9 
 Menu création site 3  - DOCTYPE  / head  - title  - meta  - link  - script 



La Création d'un site web.
Cours 3 : la partie invisible :
dans la balise head.



 © LigneWeb  ... /création site: DOCTYPE-head:balises title, meta, link, script..
© design : LigneWeb
© : alain jean deligne - LigneWeb
Le logo de LigneWeb

Partie invisible
d'une page web


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 




La place du DOCTYPE.

La partie invisible

... avant d'ouvrir la première balise d'un fichier XHTML, ... qui est la balise ...
...<html> ...la balise entrante et ... </html> ... la balise sortante ...
... qui englobe toute la page, ... partie invisible et partie visible ...
... il est important d'informer le navigateur ... du lagage que l'on va utiliser ...
... pour ce faire, nous allons utiliser ... DOCTYPE ... la balise unique ...
... nous allons choisir la balise qui indique le XHTML 1.0 Transitional pour avoir le html le plus récent ...
... mais en transitional, parce qu'il permet une écriture moins rigide ...

... nous complétons notre fichier html comme suit ...

... le voila complété …

... le DOCTYPE se place comme vous pouvez le voir avant la balise d'entrée ... html ...




➀ Balise doctype du HTML 4.01 :


➁ Balise doctype du XHTML 1.0 Transitional :


... la différence ... entre ... transitioinal ... et ... strict ... est :
... que le transitional ... admet des anciennes écritures ou ... des nouvelles écritures ...
... ce qui est exclus par le strict ... obligeant le navigateur à ne lire que ce qui est juste du langage affiché ...

... nous choisissons le ... transitional ... pour intégrer des éléments du html 5 ... et d'autres anciens (comme écrit à certains endroits du site) ...

➂ Balise doctype du XHTML 1.0 Strict :





La partie invisible : head.

... nous savons que la partie invisible de la page se place dans la balise ... head ...
... immédiatement après la balise ... <html> ...
... nous pouvons le voir sur la structure ci-dessus ...
... voir le ... cours XHTML ... où les balises internes à ... head ... sont enseignées ...



La balise title :

... cette balise ... head ... englobe en premier lieu la balise ... title ...
... dans laquelle il sera écrit le titre de la page d'une manière claire, ...
... car ce titre va apparaître dans la partie supérieure de la fenêtre du navigateur ...
... il y a ... <title> ... la balise entrante ...
... et ... </title> ... la balise sortante ...
... cette balise se trouve déjà inscrite dans la structure ci-dessus ...
... un moteur de recherche a besoin de ces éléments pour pouvoir référencer le site avec précision ...



Les balises meta :

... c'est une balise unique mais ayant des attributs différents ...
... pour ... chaque attribut, ... il y a ... une balise ... meta ...

... la première balise est celle qui permet de préciser le code du texte utilisé ...
... les codes les plus utilisés sont :
... ISO-8859-1 ... qui demande d'écrire les lettres avec accent avec un code spécial ...
... (voir  le cours XHTML ) ... et
... utf-8 ... qui permet d'écrire tout les mots sans code ... (c'est celui utilisé ici) ...

... les deux premières balises ... meta ...


... nous avons l'auteur ... author ... et le propriétaire du site ... property ... (2 balises) ...

Les balises meta : property :

... nous avons l'url ... og:url ... et l'adresse du propriétaire du site ... og:street-address ... (2 balises) ...



... nous avons la localité ... og:locality ... et la région du propriétaire du site ... og:region ... (2 balises) ...



... nous avons le code postal ... og:postal-code ... et le pays ... og:country-name ... (2 balises) ...



... nous avons le n° de Fax ... og:fax_number ... et le n° de téléphone ... og:phone_number ... (2 balises) ...

D'autres balises meta :

... nous avons la langue ... language ... et la version du site ... version ... (2 balises) ...



... nous avons le copyright ... copyright ... et le nom du site ... site ... (2 balises) ...



... nous avons la description ... description ... et les mots cléfs du site ... keywords ... (2 balises) ...


... ces deux balises sont très importantes pour les moteurs de recherche ...
... bien réaliser la description d'une part ... et trouver les bons mots clefs ... participent au bon référencement ...
... c'est l'endroit permettant le ... référencement naturel ... avec le titre, ... les titres des chapitres, ... les liens hypertextes, ... etc. ...


... nous avons la catégorie ... category ... , l'éditeur du site ... publisher ... et son Mail ... reply-to ... (3 balises) ...



... nous avons la visite des robots ... robots ...
...et quand il peut revisiter le site ... revisit-after ... (2 balises) ...

... voir aussi ...  Tuto balise meta robots et référencement  ... de WebRankinfo ...



... nous avons les applications ... application ... et le générateur ... generator ... (2 balises) ...





Les balises link :

... c'est une balise unique mais ayant des liens différents ...
... pour ... chaque lien, ... il y a ... une balise ... link ...

... nous avons le favicon.ico ... shortcut icon ... et le fichier css ... stylesheet ... (2 balises) ...





Les balises script :

... c'est une balise servant à appeler le script ...
... ou pour y placer le script dans son entièreté ...
... pour ... chaque lien, ... il y a ... une balise ... script ...

... nous avons la balise entrante ...
... <script type="text-javascript" language="JavaScript" src="_______"> ...
... et la balise sortante ... </script> ...
... entre lesquelles peut s'écrire le script lui-même ... sans l'adresse avec src ... évidemment ...

... nous avons le type de script ... text/javascript ... et le fichier du script ... recherche.js ...
... et le deuxième dont le script est donné ... (2 balises) ...
... l'adresse du script est soit un fichier externe mais dans votre site ...
... soit un fichier provenant d'un autre site web ...


... ici les scripts sont en langage JavaScript ... mais ils peuvent être en d'autres langages ...
... pour le futur HTML 5 ... c'est le JavaScript qui sera fort utilisé car lié à Ajax, langage de programmation ...
... et qui participeront à la réalisation d'un site dynamique ... qui aura l'avantage de la rapidité d"exécution ...
... par le fait qu'il ne sera pas demandé de recharger toute la page ...

... comme ont fait appel au fichier extérieur ... recherche.js ...
... dans l'exemple ci-dessus ... dans le premier script ...
... montrons le tel qu'il se présente ... avec la source et le copyright en commentaire ...

... pour que ce script puisse fonctionner, il faut encore un appel de la fonction ...
... «onClick=cherch(this.form)» ... à l'endroit de la recherche dans la page ...
... mais ceci n'est pas notre sujet ... [utilisé sur la page ...  liens et ©  ... ]

L'écriture d'un script interne à la page :

... cela ne concerne que les petits scripts, qui ne seront donc pas appelés par ... src ...

Les différentes écriture possibles :

... le script simplement ... :

... pour éviter les conflits avec certains caractères de balisage du html ...
... le script sera encadré par : en entrée ... <!-- ...
... et en sortie de l'écriture du script par ... //--> ...

... lorsque le script comprend certains caractères de balisage du XHTML strict ...
... tels que <,>, & et ", ...
... le script sera encadré par : en entrée ... //<![CDATA[ ...
... et en sortie de l'écriture du script par ... //]]< ...



... design 3 D ...

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






 MENU  - Création site  -  créer 1  - créer 2  - créer 3  - créer 4  - créer 5  - créer 6  - créer 7  - créer 8  - créer 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