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 -

 [ 1 ]
 •   Plan du site 
Avec des cours et des conseils.
  Notre Blog :  La ligne papyrus 
 MENU XHTML   info xhtml  - cours 1  - cours 2  - cours 3  - cours 4  - cours 5  - cours 6  - cours 7  - cours 8  - cours 9 
 Menu cours 1 XHTML  - introduction  - balises  - html  - head  - body / title  - meta - link  - script - Commentaires 
- DOCTYPE  - Doctype html 5  / code  - ACCENTS - caractères spéciaux html 4 / ISO8859-1  - Logique de construction 



Cours 1 XHTML : les zones     [ 3 ]



 © LigneWeb  ... /zones et balises.
© design : LigneWeb
© : alain jean deligne - LigneWeb
Le logo de LigneWeb

Une première approche


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.

Généralités : les zones et les balises ...


... en regardant le site web que vous avez devant les yeux, vous constatez qu'il y a différentes zones ...
... bien apparentes ici, ... ( provisoirement ... blocs pour les grandes zones, et plages pour celles plus petites ) ... grâce aux différentes couleurs ...

... ce qui permet de bien visualiser ces différentes plages petites ou grandes ...
... et aussi de montrer différents styles applicables à chacune d'elles ...

... chaque ... bloc ... que nous allons voir est défini par des ... balises, ... une ... entrante … et une … sortante ...
... chaque bloc est donc ... entouré ... par une balise, ... ce qui permet de donner à cette partie encadrée ... un style ...
... nous verrons au cours sur le CSS 2 comment réaliser le style ...

... Tout site web est constitué de pages ... plus ou moins nombreuses ...
... Celles-ci ont différentes structures ... mais attachons nous à une structure simple ... avec un language de base ...
... voir le  menu spécial  dans l'en-tête ...

La structure est simple :
... un en-tête ... avec le titre du site et aussi souvent un logo ou une image ...  [ 1 ] 
... un menu horizontal, ... ou vertical ... à gauche ou à droite ...  [ 2 ] 
... un espace central appelé corps de la page ... parfois subdivisé en différents blocs ...  [ 3 ] 
... et un bas de page ... appelé pied de page ...  [ 4 ] 
La page que vous avez devant les yeux est un bon exemple, ...
... nos modèles sont :
menu horizontal menu vertical gauche
comme notre site
menu vertical droit

... Nous constatons qu'une page est constituée de quatres zones ...
... chacune d'elles peut être constituée de textes, de musiques, d'images, de vidéos, etc ...
... dans des plages rectangulaires ... ayant une largeur et une hauteur ...
... dans une page ayant elle aussi ... une largeur et une hauteur ...
... Ces grandeurs, ... ainsi que la couleur de fond, les polices, les marges ... etc ...
... seront définies par le style ... dans les feuilles de style en cascade (fichier extérieur) ...
et parfois par une précision de style dans la page html elle-même ...
... ceci fera l'objet d'un autre cours sur les ...  CSS 2.0  ...

… chaque … zone … est un … bloc



Logique de construction d'un site web : ...


... la ...  construction d'une page web  ... se réalise de ...  haut en bas  ...
... pour définir les blocs ...
... et de ...  gauche à droite  ...

... c'est avec le ...  style en CSS 2.0 dans un fichier externe  ...
... que nous pourrons définir la place de chacun d'eux ...
... ( voir le cours sur  la création d'un site web  et les pages suivantes ) ...

... pour toute aide complémentaire, n'ayez pas peur de contacter le ...
...  webmaster 
...

... de ...  gauche à droite sauf  ... pour ... l'élément flottant ...
...  qui sera toujours placé en premier,  ... qu'il soit à gauche ou à droite ...

... toujours suivre la  logique  de lecture / placement / construction ...

... un exemple qui est ...  l'image flottante à droite  ... placée en premier …
… avec le titre … “Une première approche“ … sur la même ligne …

... sauf  ... pour ... l'élément  flottant  ... :

... on utilise le mot flottant ( float ) ... parce qu'il est placé sur la même ligne ...
... avec un autre élément, ... une image et un titre, par exemple ...

...  l'image flottante à droite  ... placée en premier ...

... autre exemple : le menu vertical que j'écris en premier par rapport au corps ...
... et qui ici est flottant à gauche ... comme il pourrait l'être à droite ...
... l'ordre d'écriture est : ...
... l'en-tête, le menu, le corps, le pied de page ...

... on écrit aussi de gauche à droite ...
... sauf pour l'Arabe par exemple où nous pouvons indiquer le sens inverse ...
... pour l'écriture uniquement ...

... toute mesure de base dans ... body ... a comme référence de départ ...
...  le coin supérieur gauche  ...
... et toute mesure dans un bloc particulier ... son coin supérieur gauche ...
... il est également important de penser aux nombres de pages ...
... à la facilité d'utilisation ...
... à la facilité de lecture de la page ...
... et déjà, au référencement naturel du site et de la page ...
... suivre la logique permet une lecture plus rapide ...
... cela facilite le travail d'un robot pour le référencement ...
... un ensemble de contraintes de départ qui permet la relecture du code ...
... cela facilite aussi l'autonomie ... évidemment ...


... supposons ... pour la compréhension, ... qu'on n'utilise que du texte ...

... C'est dans un navigateur que le texte que vous allez écrire doit apparaître ... et non sur un traitement de texte ...
... et c'est là que le XHTML en tant que langage va nous aider ...
...  par des ... balises ... encadrant les zones ... et les différents textes  ...




Les exercices pratiques d'expérimentation :

... pour commencer des exemples concrêts, il faut faire la structure simple de base ...
... dans laquelle on écrit l'exemple que l'on veut tester, en ne s'occupant pas de la police de caractère, ni de sa grandeur ...
... en ouvrant le fichier dans son navigateur, on voit le résultat ...
ceci est un exemple de fichier réalisé avec Notepad ++ ou TextWrangler

... nous enregistrons ce fichier dans un dossier avec le nom ... "test.html" ... par exemple ...
... plus tard, nous verrons le fichier ... index.html ...
... ouvrons se fichier dans notre navigateur ... pour voir le résultat sans style ...



... le navigateur doit être en code ... utf-8 ...
... sans le style, nous avons un résultat très convainquant ...

... c'est ainsi qu'il faut apprendre si on est débutant ...
... c'est un apprentissage très rapide, mais important dans la suite logique d'apprentissage ...
... les exemples dans toutes les pages sont pour ceux qui sont déjà habitués à ces écritures ...







Les balises en XHTML

Les balises :

... les balises encadrent les éléments ... ce qui revient a dire ... :
... il y en a une balise entrante ... (devant) ...
... et une balise sortante ... (derrière) ...

... et quelques balises qui n'encadrent pas ... elles sont uniques
... ( aller à la ligne, par exemple ).

La balise HTML :

... une balise est constituée des signes ... < ... et ... > ... qui encadrent un nom de balise ...
... et la première que nous vous proposons est celle qui entoure la page complète ...
... <html> ... au début de la page html ... qui est la balise entrante ... et ...
... </html> ... en fin de page ... qui est la balise sortante ...

... html ... car c'est le langage ici utilisé évidemment ... le HTML ou XHTML ...
... et aussi avec le nouveau langage ... HTML 5 ...

La balise body :

... à l'intérieur de cette balise entrante et sortante, la balise html ...
... les balises body vont être placées ... comme ceci ...
... <body> ... pour celle entrante ... et
... </body> ... pour celle sortante ...

... c'est entre ces deux balises que va se placer toute la première page ...  visible  ... du site ...

... il y a donc une ...  partie cachée  ... qui se placera entre ...
... <head> ... balise entrante ... et
... </head> ... la balise sortante ...
...ou l'on placera des informations pour le serveur, ... les moteurs de recherche ... , votre navigateur qui doit savoir quel langage est utilisé précisément, ... le script demandé, ... la feuille de style lorsqu'elle est externe, ... etc ...
... qui se met avant la balise body ... juste après la balise entrante html ...
... et que l'on précisera plus tard ... avec plein d'exemples ...





Première structure ... html - head - body :



... très important : ... l'écriture des balises se fait en ... minuscule ...
... Le XHTML, comme le HTML 5, est à respecter ...
... c'est entre les balises body que vont se placer les balises en-tête, menu, corps et pied de page ...
... la balise sortante a comme signe supplémentaire le slash ... / ...



Un dessin :

... un premier schéma (dessin) d'abord pour fixer le cadre général ...

 Figure 1. 

 DOCTYPE     ( : XHTML 1.0 transitional. )

 <html>  : la page complète

 <head>  : partie invisible

 </head>  : sortie de la partie invisible

 <body>  : partie visible

 En-tête 

... logo ...


 Menu 

Titre


 Corps 

 Pied de page             ...Copyright ...

 </body>  : sortie de la partie visible



 </html>  : sortie de la page complète


... nous avons la page entière ... avec les quatre zones ...
... partie visible du fichier html ...





La balise title :

... dans la balise ... head ... il y a une première balise de titre ...
... <title> ... la balise entrante ...
... </title> ... la balise sortante ...
... avec entre elles-deux, le titre de la page ... donnée essentielle ...
... un site web est en général constitué de plusieurs pages ... qui ont chacune un nom ...
...  ce nom doit être une synthèse du contenu de la page  ...
... ce nom se retrouvera dans la partie supérieure de votre navigateur ...
... elle participe du référencement ( par Google, par exemple ) ...

... cette première page sera appelée ... index.html ... nom d'enregistrement ...
... qui n'est pas le nom de la page dont on a parlé avant ... qui lui doit résumer le sujet de la page ...
... index.html ... est pratiquement toujours la page d'acceuil ... nommée ainsi pour le web ...
... exemple : ... http://www.ligneweb.net/index.html ... vous amène à la page d'acceuil de ce site ...
... voir la ...  création d'un site web  ... avec la réalisations pratique de ces balises internes ...



Les balises meta :

... et dans la balise ... head ... il y a aussi des balises ... meta ... pour donner des renseignements ...
...  <meta name="...(1)..." content="...(2)..." /> ... la balise unique ...

... avec en (1) : les différents noms que sont : ... author, version, copyright, site, description, ...
... keywords, category, publisher, reply-to, robots, revisit-after, application, generator, ...

... avec en (2) : ... le contenu ... ( voir le code source de ce site ) ...

... nous aurons donc autant de balises ...meta ... que de noms à préciser ...
... ( voir l'exemple ci-dessous ) ...
... voir aussi ...  Tuto balise meta robots et référencement  ... de WebRankinfo ...
... qui donne aussi des conseils pour le référencement naturel ...
... voir aussi la ...  création d'un site web  ... avec la réalisations pratique de ces balises internes ...

Une balise meta particulière :

... la première balise meta ... essentielle pour le XHTML 1.0 ... définit le langage utilisé ...
... elle s'écrit ...
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
...ce qui permet de savoir que c'est écrit en ... utf-8 ...
... langage qui permet d'écrire le texte avec les accents ...
... voir aussi la ...  création d'un site web  ... avec la réalisations pratique de ces balises internes ...



... et la balise ...  <link rel="......" type="....." href="......" /> ...
... permettant la liaison avec la feuille de style externe ...  dont nous parlerons plus tard : ...
... rel ="....." ... avec par exemple ... stylesheet ... pour le style ...
... type="....." ... avec ... text/css ... comme type de fichier ...
... href="....." ... avec ... ligne.css ... comme adresse du fichier appelé ...

... la balise ... meta, ... comme la balise ... link, ... se termine par un ... espace ... suivi de ... /> ...
... nous avons la même chose pour la balise ... aller à la ligne ... comme vous allez le voir ... : <br /> ...



La balise script :

... nous placerons également la définition des scripts en JavaScript dans ce même espace head ...
... soit en entier, lorsqu'il est petit, ... soit pour l'appeler lorsqu'il est externe à cette page .html ...

... 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 …
… src="_____" … permet d'écrire l'adresse du script externe, …
... qui est le nom du fichier terminé par .js

... nous avons le type de script ... text/javascript ... et le fichier du script ... corners.js ... par exemple ...
... l'adresse du script est soit un fichier externe mais dans votre site ...
... soit un fichier provenant d'un autre site web …
… dans ce dernier cas, c'est l'adresse du site web … httt://www...../corners.js … etc. ...
... qui est à écrire ...


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





Nouvelle structure ... title - meta - link - script


... ligne.css ... est le fichier que l'on va chercher pour donner le style à la page html ...
... et à chacun de ces éléments ...
... cela sera abordé dans le cours sur les feuilles de style appelée ... cours CSS 2.0 ...




Les commentaires en XHTML :

... lorsque j'écris du code, pour le site, il est parfois intéressant de faire un commentaire ...
... et ce sera ...  <!--commentaire-->  ... avec
... <!-- ... la balise entrante ... et ... --> ... la balise sortante ...
... comme vous pouvez le voir dans la nouvelle structure ci-dessus ...
... ce commentaire ne sera pas affiché dans la page html ... il permet d'éclairer le programme ...
... exemple : ...  <!--(script permettant de faire les coins arrondis)--> : ... éclaire la programmation ...
... le script pour faire des arrondis était utilisé anciennement sur ce site ...
... mais avec l'introduction du CSS 3, il n'est plus utile
...
... les balises commentaires peuvent aussi être utilisées ...
... pour mettre une partie du code hors utilisation
...
... c'est surtout utilisé lors de la conception du code d'un site ...






La balise DOCTYPE en XHTML :

... il est ... essentiel ... de définir au début du document quel est le code HTML, XHTML, ... que vous utilisez pour votre page web ...
... pour définir le code du document HTML que vous utilisé, il y a la ... balise DOCTYPE ... qui est une balise unique ..qui s'écrit :
... <!DOCTYPE ................... /> ... avec tous les éléments descriptifs placés au milieux ...
... et que nous allons voir en détail pour tous les derniers cas...
... cette balise se place nécessairement ...  avant  ... la première balise ...html ...
... cette balise ne s'écrit qu'au début du fichier .html ...
... le site officiel du ...  W3C  ... ou on trouve tous les DOCTYPES ...



➀ Balise doctype du HTML 4.01 Transitional :


➁ 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 :






Nouvelle structure ... doctype :

... pour le XHTML 1.0 Transitional ...

... nous voyons ici le DOCTYPE placé avant la première balise html ...
... le navigateur voit en premier cette information et peut donc lire correctement la page html ...
... c'est le DOCTYPE de LigneWeb ...qui lui-même est précédé par une balise xml pour le flux RSS ...
... (visible sur le code source) ... fichier qui peut être appelé si on clique sur le bouton RSS ...
... encodé en ... utf-8 ... et écrit en français ...



La balise DOCTYPE en HTML 5 :

... ceci, pour information ... on peut le voir ...  au cours sur le HTML 5   ...

➃ Balise doctype du HTML 5 :

Pour le futur ... HTML 5 ...
... ou bien ...

➄ Balise doctype du XHTML 5 :

... Pour le futur ... à confirmer ...





Remarque :

La balise code :

... si je veux écrire du texte en langage HTML, il y a une balise ... code ...
... cette balise permet d'écrire du langage HTML dans une page web sans que le navigateur ne le transforme ...
... cette balise ne marche que dans du langage html strict ... donc pas ici ...
... car nous sommes en XHTML transitional ...
... ce qui permet de montrer le code html ... utilisé pour montrer les programmes ...
... <code> ... est la balise entrante ...
... </code> ... est la balise sortante ...
... il y a une manière d'écrire certains symboles ou lettres avec accent pour qu'ils soient transformé en clair ...
... en remplaçant les ... < ... et les ... > ... par des abréviations spéciales
... dont voici une liste ci-dessous :
... sur ce site, pour écrire du texte avec le code en vue de montrer un exemple, ...
... j'utilise une balise textarea ( d'un formulaire ) ... qui sert à communiquer ...
... ce qui me permet d'y écrire le texte et les balises sans que le navigateur ne l'interprête ...




Les caractères spéciaux : pour html 4

... en ... XHTML ... avec encodage texte en ... utf-8 ... nous pouvons ... écrire le texte en clair avec les accents ...

... en html 4.0 et antérieur, ... la manière d'écrire les mots était confronté à un problème ...
... les lettres avec accents devaient être écrit avec un code ... le code ISO-Latin-1 ...
... aussi nommé ... ISO8859-1 ...
... une lettre ... é s'écrira donc ...   & eacute;   ... sans espace entre & et e ...
... c'est la raison du nouveau code ... utf-8 ... qui permet d'écrire normalement le texte ...

Textes avec Accents : ISO8859-1



...ce tableau contient les entités caractères et numériques du jeu de caractères ...
... ISO-Latin-1 (ISO8859-1) ... :

Caractère Entité numérique Entité caratère Description
< & #60; & lt; inférieur à
> & #62 & gt; supérieur à
  & #160 & nbsp; espace insécable
© & #169 & copy; copyright
& & #38 & amp; et commercial
é & #233 & eacute; e accent aigu
è & #232 & egrave; e accent grave
ê & #234 & ecirc; e accent circonflexe
ë & #235 & euml; e accent tréma
à & #224 & agrave; a accent grave
... ... ... etc.

... il ne faut pas d'espace entre le & et le reste du code ...

... le e accent grave et le a accent grave ne se différencient que par la lettre e ou a ...
... donc les lettres a, u, i, o majuscules ou minuscules peuvent être codée de la même manière ...
... c'est ... l'entité caractère ... qui est habituellement utilisée pour le html ...

  ZOOM  



... un exemple de texte où les lettres avec accent sont remplacées par leur code respectif ...
... il ne faut pas de tiret entre le & et le reste du code ...

... une référence avec tous les codes dans cette norme ... :
...  le code ISO-Latin-1  - (ISO8859-1) ..

... mais ce code reste toujours fonctionnel en XHTML et en HTML 5 ...


... design 3 D ...

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





 MENU XHTML   info xhtml  - 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  - Info HTML 5  - Info 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