• S'inscrire
  • Affichage des résultats 1 à 3 sur 3
    1. #1
      simo423
      Guest

      Par défaut cours HTML pour les debutants trooopp interessant

      Bon je suis nouveaux sur ce forum j'espere que mon sujet vous plairez voici un petit cour pour les debutants du langage html .

      Cours Html


      Cette page se veut une aide pour ceux qui veulent s'initier aux outils HTML, elle n'est donc pas exhaustive, vous y trouverez les principales commandes et quelques astuces.

      Le HTML (Hypertext Markup Language) est le langage utilisé pour construire des documents hypertextes pouvant être visualisés sur le Web. Un document HTML peut incorporer du texte, des images, de l'animation et du son.

      Le langage HTML fonctionne selon le principe suivant :

      des commandes HTML entourent des blocs de texte dans un document pour décrire l'apparence de celui-ci
      Lorsqu'un navigateur traite le document en question, il formate le texte suivant la signification des commandes HTML.

      Il y a donc des commandes qui indiquent qu'il s'agit d'un titre, d'une liste d'éléments ou d'un simple paragraphe. Il est également possible d'inclure des objets de nature autre que du texte, tels des images, de l'animation et du son.

      Un document HTML peut être créé à l'aide d'un simple éditeur de texte ou encore en employant un éditeur spécialisé qui vous offre une gamme complète d'outils, vous rendant ainsi la tâche beaucoup plus facile.


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



      REGLES DE BASE POUR L'ةCRITURE EN LANGAGE HTML



      Un document html "standard" doit impérativement commencer par <HTML> et finir par </HTML>.

      Les commandes HTML ont une marque de début et une marque de fin. Certaines marques de fin sont facultatives.

      Les commandes HTML utilisent les caractères < et > comme délimiteurs.

      Les commandes HTML peuvent être écrites en minuscules ou en majuscules.

      Tout ce qui n'est pas compris entre "<" et ">" est tout simplement considéré comme du texte à afficher.


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



      STRUCTURE D'UN DOCUMENT HTML



      <HTML> <HTML/> : Commandes de début et de fin de document

      <HEAD> </HEAD> : Informations non affichées concernant le document (Date et auteur par exemple)

      <TITLE> </TITLE> : Titre du document. Cette information apparaît dans la barre de titre du client WWW.

      <BODY> </BODY> : Corps du document. Toutes les informations affichées par le client WWW y sont contenues.



      Exemple d'une structure de document HTML :

      <HTML>
      <HEAD>
      <TITLE>Exemple de structure de document HTML</TITLE>
      </HEAD>
      <BODY>
      Les données propres au document HTML
      </BODY>
      </HTML>


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

      TITRE DE LA PAGE



      Ce texte apparaîtra dans la barre de titre du navigateur lorsqu'un utilisateur affichera votre page sur son écran.

      Exemple : pour cette page il s'agit de Guide HTML.

      <HEAD><TITLE>Guide HTML</TITLE>
      </HEAD>


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

      BODY



      Tout ce qui est contenu entre <BODY> et </BODY> sera affiché à l'écran, c'est la partie intégrante de votre document, c'est là que vous saisirez votre texte, insérerez vos images et établirez vos liens.



      OPTIONS DE BODY

      BACKGROUND

      Permet de mettre une image dans le fond de la page.
      Attention à la couleur d'écriture et celle des liens, en fonction de la couleur du fond. On peut également choisir une couleur de fond proche de celle de l'image.

      <BODY BACKGROUND="nom_de_fichier.ext">

      Exemple :

      <BODY BACKGROUND="cahier.gif">


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


      BGCOLOR

      Permet de changer la couleur de l'arrière plan sans avoir à charger une image, là aussi, il faudra veiller à ce que le texte et les liens soient visibles dans tous les cas.

      Par défaut, le fond de page est en blanc, le texte en noir, les liens en bleu souligné, les liens activés en rouge et les liens visités en violet.

      TEXT
      Permet de changer la couleur du texte, par défaut cette couleur est en principe le noir, mais elle peut-être changée dans les préférences du browser.

      LINK
      Permet de changer la couleur des liens.

      ALINK
      Permet de changer la couleur des liens sélectionnés.

      VLINK
      Permet de changer la couleur des liens déjà visités.



      <BODY BGCOLOR="couleur" TEXT="couleur" LINK="couleur" ALINK="couleur"> VLINK="couleur">


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



      COULEUR

      La couleur que vous voulez obtenir peut être décrite de deux façons:

      avec le nom anglais de la couleur,
      ou beaucoup plus précisément au moyen d'un symbole # et de 6 chiffres (en hexadécimal - base16).
      Tout d'abord le format de la commande de couleur est: "#RRVVBB"
      # est le symbole qui permet de différencier une valeur d'un nom de couleur.
      RR la quantité de rouge contenue dans la couleur.
      VV la quantité de vert contenu dans la couleur.
      BB la quantité de bleu contenu dans la couleur.

      La couleur: #000000 correspond au noir (00 de rouge, 00 de vert et 00 de bleu).
      La couleur: #FFFFFF au blanc (le chiffre FF est le maximum possible)

      La séquence de numérotation hexadécimale est (de min. à max.): 0 1 2 3 4 5 6 7 8 9 A B C D E F.

      Exemple:

      <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#FF00FF">

      Le fond sera noir, le texte blanc et les liens en rose.


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



      SON



      Insérer un son en fond de page



      <EMBED SRC="son.wav" AUTOSTART="true" LOOP="-1">
      <BG SOUND="son.wav" AUTOSTART="true" LOOP="-1">

      AUTOSTART="True or False" : permet de déclarer le lancement du son à l'ouverture de la page.

      LOOP=" " permet de déterminer le nombre de fois où le son va être joué. La valeur -1 signifie que le son sera répété à l'infini.


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



      MISE ENFORME



      Le texte peut avoir plusieurs polices et attributs.



      Mise en forme de caractères



      Option Style B (gras), I (italique), U (souligné), S (barré)...

      Option FONT SIZE pour gérer la taille de la police

      Exemple :

      Bienvenue sur ma page

      <FONT SIZE=+1>Bienvenue….</FONT>

      Le texte est centré, en gras avec une police d'une taille supérieure à la taille standard.

      Aucune police n'est spécifié ce qui signifie que c'est la police choisie par défaut dans le menu Préférences qui sera affichée.



      <FONT> Ce marqueur permet de changer la fonte, et aussi d'autres paramètres, comme la taille et la couleur.

      Exemple :

      <FONT FACE="arial" SIZE="3"> : type et taille de police

      <FONT COLOR="YELLOW">ou COLOR="#RRVVBB" </FONT> : couleur de police

      <FONT SIZE="-1">Ou +2, +3, -2, -3, ou encore 3, 4, 5</FONT> : La taille des caractères en pixels

      <FONT SIZE="x">) : taille de police


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

      Mise en forme de paragraphes



      Le texte peut être positionné à gauche, au centre, ou à droite de l'écran.

      Option ALIGN avec RIGHT (droit), CENTER (centre) et LEFT (gauche).



      Bienvenue sur ma Page.

      <ALIGN=right><FONT SIZE=+1>Bienvenue….</FONT></CENTER></ALIGN>

      Le texte est aligné à droite avec une police d'1 taille supérieure et en gras.


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

      Insérer une image



      IMG SRC : insertion d'image







      <CENTER>[img]abeille.gif[/img]</CENTER>

      Marqueur CENTER , RIGHT ou LEFT pour positionner l'image horizontalement.

      On peut modifier la taille initiale d'une image :

      HEIGHT ="valeur" pour modifier la hauteur

      WIDTH="valeur" pour modifier la largeur





      Pour plusieurs images et texte



      Bienvenue



      <CENTER>[img]tv.gif[/img] <ALIGN=ABSCENTER>Bienvenue [img]tv.gif[/img] ALIGN=ABSCENTER </CENTER>

      On peut contrôler l'alignement vertical grâce aux valeurs TOP (haut), MIDDLE (centre) et BOTTOM (bas) de l'option ALIGN.


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



      LE RESTE DU DOCUMENT



      Le texte se saisit comme sur un traitement de texte le passage à la ligne est automatique.

      Marqueur
      : Pour créer un nouveau paragraphe

      Marqueur

      : Changer l'alignement du paragraphe avec les options d'alignement:

      <P ALIGN="RIGHT"> (ou LEFT CENTER JUSTIFY) gauche/centre/aligné.



      MARQUEURS DIVERS

      et : Caractères gras ( aussi).

      et : Italiques ( aussi).

      <U> et </U> : Souligné

      <S> et </S> : Barré (ne fonctionne pas avec tous browsers).

      <SUB> et </SUB> : indice.

      <SUP> et </SUP> : exposant.

      <CENTER> et </CENTER> : Centrage horizontal (texte et images).

      <DIV ALIGN=""> et </DIV> : Positionnement horizontal,

      ALIGN peut valoir LEFT/CENTER/RIGHT/JUSTIFY (gauche/centre/droite/aligné).

      <BLINK> et </BLINK> Clignotant

      <IMG ALIGN="position">

      SRC="fichier"

      ALT="nom de l'image"

      HEIGHT="hauteur">

      WIDTH="largeur">




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



      LES LIENS



      Un lien vers une autre partie du document ou vers un autre document peut être de plusieurs nature, du texte, de l'image, une partie d'une image voire même le document tout entier...

      <A HREF="xxx">
      Début de lien qui finit par </A>

      Tout ce qui se trouve entre les deux est considéré comme zone sensible, et un click sur les objets situé entre ces deux bornes provoquera l'action contenue dans "xxx" (ou la lecture du fichier "xxx" comme nouvelle page)



      Lien vers une page en local



      Exemples : Pour retourner au sommaire de ce site

      Sommaire


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

      Lien vers un site extérieur



      Exemple : Pour aller sur le site Netscape

      Allez voir ce site


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

      Lien vers un e-mail



      Exemple : Pour m'envoyer un courrier électronique

      ةcrivez-moi



      Pour faire un lien à partir d'une image remplacez le texte par le marqueur IMG SRC="image.gif".



      [img]mail.gif[/img]

      Petite astuce, si vous ne voulez pas qu'un lien image ait une bande de couleur autour de lui, mettez l'option border du marqueur image à zéro.


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



      Lien dans la même page



      Il faut utiliser les cibles ou ancrages.

      Positionnez vous à l'endroit que vous souhaitez atteindre, dans cet exemple le haut de cette page.

      Identifier la cible avec <A NAME="titre">Texte ou image</A>

      et utiliser le marqueur: pour y aller



      Pour sauter dans une section particulière d'une autre page Web, il suffit tout simplement de rajouter le nom de la section après le nom de la page dans le lien, exemple:

      Texte

      Modifier l'apparence des liens

      Il est possible de modifier l'apparence des liens de façon à ne pas les faire apparaître en bleu souligné et modifier la couleur au survol.

      Vous devez incorporer les lignes de commande suivante dans la partie <HEAD> de votre page :

      <STYLE>

      A:LINK { color: #000000; text-decoration: none }

      A:VISITED { color: #000000; text-decoration: none }

      A:HOVER { color: #ffffff; text-decoration: none }

      </STYLE>

      Dans cet exemple les liens apparaissent en noir non souligné, au survol ils se transforment en blanc et ils restent en noir après avoir été visités.


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



      LES LISTES



      Il est possible de créer des listes d'objets numérotées ou non avec quelques marqueurs.



      Liste non numérotée :

      <UL>

      <LH>Entête en option</LH>

      <LI>Point numéro1

      <LI>Point numéro2

      <LI>Point numéro3

      <LI>Point numéro4
      [/list]


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



      Liste numérotée

      1. <LH>Entête en option</LH>

        <LI>texte

        <LI>texte


      Le type de numérotation peut être changé avec: [list=1] avec a et A, la numérotation est alphabétique, avec i et I, elle est romaine (majuscules ou minuscules dans les deux cas).

      Pour continuer ou changer la numérotation:

      1. <LH>Entête en option</LH>

        <LI>texte

        <LI VALUE="y">texte>



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



      TABLEAUX



      C'est la seule façon de gérer convenablement la présentation.

      Les tableaux permettent de diviser la page en zones d'espace et de remplir ces zones avec des objets (textes, images, couleurs), permettant un contrôle amélioré de la position des objets.

      Ces tables peuvent avoir un fond et des bords visibles ou non.



      Insérer un tableau

      <TABLE> et </TABLE> : pour définir un tableau

      <TR> et </TR> : pour définir une rangée

      <TH> et </TH> : pour les cellules de haut de colonne (facultatif)

      <TD> et </TD> : pour une cellule



      Exemples :

      Bienvenue



      <TABLE WIDTH=50%><TR><TD>[img]tv.gif[/img]</TD><TD>Bienvenue</TD>
      </TR></TABLE></CENTER>

      Le tableau occupe 50% de la largeur totale de la page sur une ligne avec dans la première cellule l'image et dans la seconde le texte, le tout étant centré.




      Bienvenue




      <TABLE BORDER COLS=2 WIDTH="100%" >
      <TR>
      <TD>
      <CENTER>[img]tv.gif[/img]</CENTER>
      <TD>
      <CENTER>Bienvenue</CENTER>
      </TD>
      </TR>
      </TABLE>

      Mise en forme d'un tableau

      A l'intérieur d'une cellule (entre <TD> et </TD>) tout est bien sûr possible, comme mettre plusieurs lignes de texte (avec
      ,

      ou autre), changer la couleur des caractères, celle du fond de la cellule, de mettre des liens, des images, modifier les couleurs et les épaisseurs de bordure, etc...



      <TABLE BORDER="2" CELLPADING="2" cellspacing="3" width="50%" bordercolor="#000080">

      <tr>

      <td width="50%" align="left" bgcolor="#008080" bordercolor="#FF0000"></td>

      <td width="50%" align="left" background="fonkraft.jpg"></td>

      </tr>

      </table>



      <table bgcolor="#008080"> : mettre un fond de couleur

      <table width="50%"> : Occupation en % de la page

      <table border="1"> Taille des bords (0=pas de bords)

      border color="#FF0000" couleur des bordures

      cellpadding="2" Marge intérieure des cellules

      cellspacing="3" Espacement entre les cellules

      Il est aussi possible de définir le nombre de rangées et de colonnes d'une table et d'attribuer à une cellule plusieurs rangées (rowspan="") ou colonnes (colspan=""), ou les deux.


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

      CADRES



      Il est possible de scinder verticalement ou horizontalement une fenêtre en 2 ou plusieurs parties.

      Dans chacune de ces parties viendra s'insérer un fichier html.



      Création d'un fichier Cadre à division verticale



      <HEAD>

      <TITLE>Guide HTML de base</TITLE>

      </HEAD>

      <FRAMESET COLS="20%,80%">

      <NOFRAMES>

      <FRAME SRC="sommhtm.htm">

      <FRAME SRC="guidehtml.htm" NAME="droite">

      </FRAMESET>

      </HTML>



      <FRAME SRC="fichier.htm"> permet d'insérer un fichier dans les cadres créés précédemment.



      Création d'un fichier Cadre à division horizontale



      L'attribut COLS peut être remplacé par ROWS pour avoir une séparation horizontale. La valeur attribuée correspond à la taille du cadre par rapport à la largeur de la page.



      <FRAMESET ROWS="20%,80%">

      <NOFRAMES>

      <FRAME SRC="fichier1.htm">

      <FRAME SRC="fichier2.htm" NAME="bas">

      </FRAMESET>

      </HTML>



      Création d'un cadre avec bannière et sommaire



      <FRAMESET ROWS="64,*">

      <FRAME NAME="banniere" SCROLLING="no" NORESIZE TARGET="sommaire">

      <FRAMESET COLS="150,*">

      <FRAME NAME="sommaire" TARGET="principal">

      <FRAME NAME="principal">

      </FRAMESET>

      La commande Scrolling avec l'attribut Yes ou No permet d'autoriser ou non une barre de défilement.

      Création d'un cadre avec hiérarchie imbriquée



      <FRAMESET COLS="150,*">

      <FRAME NAME="gauche" SCROLLING="no" NORESIZE TARGET="haut_droite" SRC="fichier.htm">

      <FRAMESET ROWS="20%,*">

      <FRAME NAME="haut_droite" TARGET="bas_droite" SRC="fichier.htm">

      <FRAME NAME="bas_droite" SRC="fichier.htm">

      </FRAMESET>




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

      Attribuer un nom à un cadre



      Pour pouvoir faire des liens d'un cadre vers un autre, il faut leur donner des noms. Il est conseillé d'attrbuer un nom significatif (haut, bas, gauche, droite...).

      <FRAME SRC="fichier.htm" NAME="droite">


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

      Liens entre cadres



      Par défaut un navigateur ouvrira la page correspondant au lien dans la même fenêtre que celle du lien.

      Pour forcer cette commande il faut utiliser l'attribut TARGET dans le tag du lien.

      Exemple : <A HREF="fichier.htm" TARGET="droite">

      TARGET indique le nom du cadre cible où devra s'afficher le fichier html.

      _blank : ouvre une nouvelle fenêtre pour afficher la page

      _self : affiche dans la même fenêtre (par défaut)

      _parent : affiche dans le cadre supérieur.


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

      ASTUCES





      Afficher un message d'alerte



      Pour afficher un message d'alerte en cliquant sur l'image qui sert de lien.



      Exemple :



      <A HREF ="fichier.htm" TARGET=""
      ONCLICK="window.alert('Encore un peu de patience!')">
      [img]image.gif[/img]
      </A>



      Créer une image à zone sensible

      Cette image s'appelle également une image mappée c'est à dire que chacune des zones est sensible et permet d'accéder par un lien vers d'autres pages.



      <MAP NAME="FPMap0">

      <AREA HREF="unlien.htm" SHAPE="rect" COORDS="133, 261, 199, 320">

      <AREA HREF="unlien.htm" SHAPE="rect" COORDS="27, 261, 89, 319">

      <AREA HREF="unlien.htm" SHAPE="rect" COORDS="256, 172, 334, 240">

      <AREA HREF="unlien.htm" SHAPE="rect" COORDS="125, 168, 217, 241">

      <AREA HREF="unlien.htm" SHAPE="rect" COORDS="17, 170, 91, 237">

      <AREA HREF="unlien.htm" SHAPE="rect" COORDS="351, 87, 434, 145">

      <AREA HREF="unlien.htm" SHAPE="rect" COORDS="255, 88, 317, 149">

      <AREA HREF="unlien.htm" SHAPE="rect" COORDS="129, 89, 218, 154">

      <AREA HREF="unlien.htm" SHAPE="rect" COORDS="20, 89, 99, 155">

      </MAP>[img]menuv.gif[/img]</P>



      <AREA HREF="unlien.htm" permet de désigner vers quel fichier doit pointer le lien de cette zone

      SHAPE permet de définir la forme de la sélection (rect

      COORD précise les coordonnées géographiques de la zone

    2. #2
      AZKRI
      Guest

      Par défaut

      <center> :hyju Merci Pour Votre Participation :hyju

      :hyju :hyju

      **** Et On éspére D'autres Sujets de Votre Part ****

      :hyju www.ista4all.com :hyju

      *** Copyright © 2006 ***

      *** Tous droits réservés pour Issam ***

      *** ISTA AL MAJD, RABAT ***

      *** Et tous les membres de ista4all.com ***

      *** mon msn ***

      *** Webmaster@ista4all.com ***
      <center>

      <center></center>

    3. #3
      nabilocs
      Guest

      Par défaut

      merci :NHYN :NHYN :NHYN

    Discussions similaires

    1. Comment creer un site web pour les débutants
      By jamalnet in forum Forum HTML & XML & ASP
      Réponses: 37
      Dernier message: 09/10/2009, 16h51
    2. Cours Java - Lecture d'un flux XML via SAX
      By x_octet in forum Forum JAVA & Algorithmique
      Réponses: 2
      Dernier message: 01/05/2006, 15h17
    3. cours de base de donnees bien detaille : )
      By safae in forum Forum Base De données & Analyse
      Réponses: 5
      Dernier message: 07/03/2006, 23h29
    4. Cours algorithme pour les debutants
      By Xxx anouhack xxX in forum Forum JAVA & Algorithmique
      Réponses: 1
      Dernier message: 22/02/2006, 13h29

    Règles de messages

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •