Bases HTML EN 24 COURS

Assistance à ces langages

Modérateur: Guardian

Bases HTML EN 24 COURS

Messagede FLORIAN le Jeu 24 Mar 2005 - 22:21

Je pense que tout début en html demande de connaitre quelques bases indispensables a la conception d'un site WEB

afin d'aider le plus de personnes qui souhaiteraient monter leur site voici les fonction de bases a la création

Les textes VISIBLES

Ces éléments fonctionnent par paire en encadrant la portion de texte sur laquelle ils s'appliquent, il s'agit alors de conteneurs.

<BODY> ' conteneur de début
< / BODY> ' conteneur de fin

Le signe / qui distingue le conteneur de fin est appelé slash.

Si l'élément de début est employé seul, il s'agit alors d'un marqueur ( ou conteneur vide )

Différents conteneurs ou marqueurs peuvent être imbriqués les uns dans les autres.


Le conteneur <HTML>


L'en-tête de document n'apparaîtra pas à l'affichage de la page, mais il vaut mieux le créer.
Cet en-tête contient des renseignements comme le type de document, le titre ainsi que des mots-clés utilisés par les moteurs d'indexation.
Le conteneur <HTML> a pour rôle d'informer IE4 qu'il s'agit d'un document HTML. Il doit donc être le premier élément d'une page HTML.
La balise </HTML> en sera donc obligatoirement le dernier élément.
Pour simplifier :

<HTML> ' début du document
</HTML> ' fin du document

Les conteneurs <HEAD> et <TITLE>

Le conteneur <HEAD> sert à définir la section d'en-tête. Cette section contient le titre du document ainsi que les relations avec d'autres documents. Cette section, encadrée par les balises <HEAD> et </HEAD> est obligatoirement insérée entre les balises <HTML>. Elle contient, elle-même, le conteneur <TITLE>.
Le titre est un libellé quelconque encadré par les balises <TITLE> et </TITLE>
Ce titre ne sera pas affiché dans la fenêtre mais dans la barre de titre d'IE6 ou autres navigateurs quoi que . Il sera aussi utilisé pour référencer un document lors de l'ajout dans la liste des favoris d'IE6.
La longueur du titre n'est pas limitée, mais il est préférable de se limiter à 50 caractères afin qu'il ne soit pas tronqué dans la barre de titre.

Le conteneur <BODY>

A la suite de la section d'en-tête, débute le corps de la page, encadré par les balises <BODY> et </BODY>. C'est dans cette partie qu'on placera tous les éléments constituant la page HTML qui seront affichés par IE6 ou autres navigateurs.
Tout texte écrit entre ces deux balises sera donc visible avec IE6.

Il est possible d'introduire des commentaires dans la section d'en-tête ou dans le corps du document en les encadrant avec les balises < !- texte du commentaire -> Ces commentaires ne seront visibles que lors de l'édition du code HTML dans
Notepad.




LA MISE EN FORME DU TEXTE

1) Le texte :

Un texte s'insère entre les balises <BODY> et </BODY>. En principe, seuls les 128 premiers caractères ASCII sont, pour l'instant, utilisables. Heureusement, pour nous, IE6 semble accepter également les caractères spéciaux et les caractères accentués ( é, è, à, Ç, ?, etc....)
Ce texte peut être saisi au clavier ou coller à partir du presse-papiers.


IE6 affichera le texte selon les préférences fixées par le créateur du document HTML. Ces préférences incluent le type et la taille de la police de caractères.

[Remarque :] la taille de la fenêtre du navigateur peut être plus ou moins large et varier de 768 pixels à 1024 pixels. Cela signifie qu'un texte donné n'aura pas la même apparence selon le pc sur lequel il sera visualisé.
Conséquence directe : les sauts de lignes peuvent ne pas intervenir au même endroit.
Actuellement, la majorité des concepteurs de site WEB prévoit leur page pour une résolution de 800 x 600 pixels. Si un utilisateur visualise ces pages en 640 x 480 pixels, elles n'auront plus la même apparence.

A savoir :
De multiples espaces consécutifs sont interprétés comme un seul espace.
Il en est de même pour les tabulations.
Les marques de paragraphe et les sauts de ligne insérés dans le texte ASCII sont aussi ignorés lors de l'affichage avec IE6.
On pourrait croire qu'il soit alors impossible de créer de grandes zones de blanc.
Heureusement, des balises de contrôle permettent d'agir sur un texte.
<BR> permet de couper une ligne comme un retour Il est possible d'en insérer plusieurs afin de sauter plusieurs lignes.
A l'inverse, le conteneur <NOBR> </NOBR> interdit toute coupure - à condition que la fenêtre d'IE6 ou des autres navigateurs utilisés soientt assez large ! -

Le marqueur <P> permet de créer un paragraphe en produisant un espace plus important qu'un saut de ligne. Attention : les multiples marqueurs <P> sont ignorés !



2) Les caractères spéciaux :
Les caractères < et > , utilisés pour repérer les marqueurs ne seront jamais affichés.
Les tabulations, les sauts de lignes ou de paragraphes insérés dans le bloc-notes, seront ignorés lors de l'affichage.

Même si IE6 reconnaît directement les caractères accentués, il peut être utile de savoir les coder à l'ancienne pour rester compatible avec les autres navigateurs.
é -> &eacute;
à -> &agrave;
même -> m&ecirc;me
< -> &LT;
> -> &GT;
& -> &amp;

3) Les titres et les intertitres :


L'utilisation de titres et d'intertitres améliore la présentation d'un document...
Six conteneurs permettent de créer six niveaux de titres :
<H1> <H2>... jusqu'à <H6>
Les titres sont affichés en gras avec une importance décroissante de 1 à 6.

EXPLICATION EN IMAGE

Image


Le marqueur <HR> permet d'insérer une ligne dans un document.

Attention de ne pas confondre les balises <Hx> </Hx> x représente un numéro de niveau avec le conteneur <TITLE> </TITLE>

4) Alignement:

Par défaut les titres sont alignés à gauche. Il est cependant possible de les aligner à droite, au centre ou de les justifier avec l'attribut Align qui peut prendre les valeurs left, right, center ou justify

Cet attribut se rajoute après le conteneur <Hx> quelque soit le niveau de ce dernier.


EXEMPLE <H1 Align = right >
Le même principe est applicable aux paragraphes :

<P Align = center>


Mise en forme simple du texte

<BR> provoque un saut de ligne
<P> provoque un saut de ligne suivi de l'insertion d'une ligne vierge.
Les multiples marqueurs <BR> sont pris en compte. Les multiples marqueurs <P> sont ignorés.

--------------------------------------------------------------------------------

<Hx> ...... </Hx> spécifie des titres ou des inter-titres de tailles différentes
x peut prendre des valeurs de 1 ( la plus grande taille) à 6 (la plus petite taille)

--------------------------------------------------------------------------------

<HR Attribut1... Attribut 2... Attribut3...>
ex: <HR Width="50%" Size=8 Align="Center" >
Valeurs de Size en pixels, valeurs de Width en pourcentage (70%) ou en valeur absolue (200), Valeurs d'Align : left, right, center
<HR> est une balise modifiable par modification de la valeur de ses trois attributs.

--------------------------------------------------------------------------------


<B>....... </B> pour afficher des caractères en gras (bold)
<STRONG> ..... </STRONG> pour afficher des caractères renforcés (forts)
Ces deux balises ont le même effet.

--------------------------------------------------------------------------------

<I> ..... </I> pour afficher des caractères italiques
<EM> ..... </EM> pour afficher des caractères "emphatics"
Ces deux balises ont le même effet.

--------------------------------------------------------------------------------

<PRE> ..... </PRE>
IE4 affiche le texte en police proportionnelle. Sans la présence de cette balise, tous les élément du petit logo (train) de mon message précédent seraient affichées sur une seule ligne.

--------------------------------------------------------------------------------

< !- .............................. -> pour insérer des commentaires qui seront ignorer par la navigateur.
Autre intérêt : ils peuvent contenir des balises qui seront ainsi ignorées. (pour faire des tests par exemple)


Mise a jour du 15/04

Liste de quelques caractères spéciaux affichables

La langue française utilise abondamment les caractères accentués. Mais dans le World Wide Web, réseau international, les accents ne sont pas prévus.
Aussi, avec les premiers navigateurs, les accents n'étaient pas affichés s'ils n'étaient pas codés par des chaînes de caractères spéciales ou par leur code ASCII.
Heureusement, aujourd'hui, l'ensemble des navigateurs reconnaît directement les caractères accentués.
Mais il reste le cas des caractères spéciaux qui ne sont pas tous saisissables au clavier - à moins de passer par leur code ASCII. -
Ainsi ? est obtenu au clavier par la combinaison ( ALT + 0 + 1 + 5 + 6 ), pour le coder en HTML on écrira & # 1 5 6 ; (sans espaces).

Codage des caractères spéciaux
Image

MISE EN FORME DU TEXTE (Suite et fin)
5) Enrichissement du texte :


On utilise les conteneurs de formatage du texte.
<B> </B> ' gras
<I> </I> ' italique
<TT> </TT> ' police fixe
Ils peuvent être imbriqués pour obtenir des styles combinés, par exemple du gras et de l'italique.
<U> </U> ' texte souligné
<S> </S> ' texte barré
<BIG> </BIG> ' grosses polices
<SMALL> </SMALL> ' petites polices
<SUB> </SUB> 'indices
<SUP> </SUP> ' exposant

Un document (l'ensemble du texte) peut être affiché en couleur avec l'attribut text qui peut prendre une valeur hexadécimale ou plus simplement les valeurs "blue", "green", etc...

Une partie du texte peut être colorée avec le conteneur <FONT> </FONT> et l'attribut color
<FONT color = "#FF0000"> </FONT> ' La valeur hexa représente la couleur

La couleur d'arrière-plan est modifiable avec l'attribut Bgcolor
<BODY text = "blue" Bgcolor = "Yellow" >


6) Marqueurs et conteneurs divers
Nous avons déjà vu les principaux. Il en existe de nombreux autres plus ou moins usités. En voici quelques-uns :
<CITE> </CITE> indique la présence d'une citation, généralement affichée en italique

<CODE> </CODE> sert à afficher une partie de texte avec une police à espacement fixe (Courrier, par exemple)

<BLOCKQUOTE> </BLOCKQUOTE> permet d'indiquer une longue portion de texte qui n'est pas de l'auteur mais empruntée.
Ce texte sera affiché avec une légère indentation.

<ADDRESS> </ADDRESS>
sert à indiquer le nom et les coordonnées de l'auteur de la page.
On peut aussi y placer la dernière date de mise à jour.
Se place habituellement en bas de la première page, affiché en italique.


LA GESTION DES IMAGES


Une page illustrée est certes plus attrayante, mais les images doivent avant tout en faciliter la consultation et la compréhension.
1) Images GIF ou JPeg ?
Le langage HTML accepte actuellement trois formats : GIF et JPeg ( uniquement des fichiers graphiques en mode point)puis png.
Le GIF, créé le premier, est plus restrictif sur le plan technique : il ne gère que 256 couleurs contre 16,7 millions pour le JPeg.
(Généralement, 256 couleurs sont largement suffisantes)
Les fichiers de ces deux formats sont compressés et se chargent sensiblement à la même vitesse. Le choix est donc une affaire d'opportunité.
A noter qu'avec le GIF, on peut créer des images dont une partie est transparente (GIF transparent)
Le GIF permet aussi d'obtenir des images animées en superposant plusieurs images GIF les unes sur les autres et en réglant le temps d'affichage de chacun des plans.

2) Comment récupérer des images ?

Pour disposer d'images GIF ou JPeg, ou png trois méthodes sont possibles :

Créer les images de toute pièce avec un logiciel approprié (Paint Shop Pro, par exemple)
Numériser une image existante sur papier à l'aide d'un scanner.
Télécharger des images sur Internet, les News... ou en copier sur des CD-ROM... en ayant toujours à l'esprit que la majorité des images ainsi obtenues sont soumises aux règles du droit d'auteur, pour une utilisation à des fins commerciales ou publiques.
Attention : Plus l'image est grande, plus la taille de son fichier est importante.Dans l'idéal, une page HTML ne doit jamais dépasser le poids de 50 Ko.

3) Insérer des images :
Le marqueur <IMG> sert à insérer une image dans un document HTML.
L'attribut SRC sert à préciser le chemin d'accès et le nom de l'image.
L'attribut Align (facultatif) permet d'aligner le texte se trouvant vis à vis d'une image, en haut, en bas ou au milieu de celle-ci.
(Ne pas confondre cet attribut, avec le même attribut du marqueur <P> qui aligne le paragraphe qui contient l'image.)Par défaut, l'image est affichée avec sa taille d'origine, mais les attributs Height et Width peuvent spécifier une taille plus petite.
L'attribut Background du marqueur <BODY> permet de positionner une image en fond d'écran. Elle sera alors appliquée à l'ensemble de la page HTML et ce quelle que soit sa taille. En cas de besoin, elle est répétée afin de remplir toute la page.
L'attribut Alt sert à indiquer une représentation alternée à une image. cet attribut est suivi d'un texte qui est affiché lorsque l'utilisateur survole l'image avec la souris et surtout lorsque IE6 ne peut afficher l'image.


A suivre prochainement les tableaux
Dernière édition par FLORIAN le Ven 15 Avr 2005 - 13:49, édité 5 fois.
FLORIAN
 

Messagede JB2Lyon le Jeu 24 Mar 2005 - 22:51

Bonsoir Florian,
Je te sent motivé ca fait plaisir .
smiles_33 smiley_1243 smiley_1279 smiley_848 Florian.
A+
JB
Avatar de l’utilisateur
JB2Lyon
Modérateur
 
Messages: 755
Inscription: Jeu 5 Aoû 2004 - 17:17
Localisation: Ya un indice sur mon pseudo :-)

Messagede AgnesD le Ven 25 Mar 2005 - 14:42

Clair et précis....
comment vous faites ...
j'arriverais jamais a expliquer comme cela...
:cry:
Avatar de l’utilisateur
AgnesD
Co-Admin
 
Messages: 3737
Inscription: Mar 15 Mar 2005 - 21:17

Messagede FLORIAN le Ven 25 Mar 2005 - 14:49

AgnesD a écrit:Clair et précis....
comment vous faites ...
j'arriverais jamais a expliquer comme cela...
:cry:


Bonjour Agnes

Dis comment qu'on fait ??
a expliquer comme cela bin avec de la patience et de l'habitude

mais bon reste encore 22 cours a suivres la suite ce soir apres ce que j'ai mis hier
FLORIAN
 

Messagede AgnesD le Ven 25 Mar 2005 - 14:58

Il est vraiment mignon....
ton bebe...
:wink:
Avatar de l’utilisateur
AgnesD
Co-Admin
 
Messages: 3737
Inscription: Mar 15 Mar 2005 - 21:17

Messagede FLORIAN le Ven 25 Mar 2005 - 15:09

AgnesD a écrit:Il est vraiment mignon....
ton bebe...
:wink:



c'est moi qui prie le bon dieu pour qu'il me donne chaques jours du taff
FLORIAN
 

Messagede AgnesD le Ven 25 Mar 2005 - 15:15

Et naif en plus....
:lol:
Avatar de l’utilisateur
AgnesD
Co-Admin
 
Messages: 3737
Inscription: Mar 15 Mar 2005 - 21:17

Messagede FLORIAN le Ven 25 Mar 2005 - 18:11

JB2Lyon a écrit:Bonsoir Florian,
Je te sent motivé ca fait plaisir .
smiles_33 smiley_1243 smiley_1279 smiley_848 Florian.



Salut JB et toi l'es tu MOTIVE ????? depeche toi parce que quand j'aurai terminé je ne sais plus ce que je pourrai mettre
FLORIAN
 


Retourner vers Html / Javascript / XML / XHTML

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 1 invité

cron