Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Cours HTML

    Încărcat de

    Noufel Mnm
    26 vizualizări17 pagini

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    DOCX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    26 vizualizări17 pagini

    Cours HTML

    Încărcat de

    Noufel Mnm

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 17

    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 visualiss 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 : y des commandes HTML entourent des blocs de texte dans un document pour dcrire 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'lments 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 spcialis qui vous offre une gamme complte d'outils, vous rendant ainsi la tche beaucoup plus facile.

    REGLES DE BASE POUR L'CRITURE EN LANGAGE HTML

    Un document html "standard" doit imprativement commencer par <HTML> et finir par </HTML>. Les commandes HTML ont une marque de dbut et une marque de fin. Certaines marques de fin sont facultatives. Les commandes HTML utilisent les caractres < et > comme dlimiteurs. Les commandes HTML peuvent tre crites en minuscules ou en majuscules. Tout ce qui n'est pas compris entre "<" et ">" est tout simplement considr comme du texte afficher.

    STRUCTURE D'UN DOCUMENT HTML

    <HTML> <HTML/> : Commandes de dbut et de fin de document <HEAD> </HEAD>

    : Informations non affiches concernant le document (Date et auteur par exemple)

    <TITLE> </TITLE> : Titre du document. Cette information apparat dans la barre de titre du client WWW. <BODY> </BODY> contenues.

    : Corps du document. Toutes les informations affiches par le client WWW y sont

    Exemple d'une structure de document HTML :


    <HTML> <HEAD> <TITLE>Exemple de structure de document HTML</TITLE> </HEAD> <BODY>
    Les donnes propres au document HTML

    </BODY> </HTML>

    TITRE DE LA PAGE

    Ce texte apparatra 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 intgrante de votre document, c'est l que vous saisirez votre texte, insrerez 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"> y y

    BGCOLOR
    Permet de changer la couleur de l'arrire 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 dfaut, le fond de page est en blanc, le texte en noir, les liens en bleu soulign, les liens activs en rouge et les liens visits en violet. TEXT Permet de changer la couleur du texte, par dfaut cette couleur est en principe le noir, mais elle peut-tre change dans les prfrences du browser. LINK Permet de changer la couleur des liens. ALINK Permet de changer la couleur des liens slectionns. VLINK Permet de changer la couleur des liens dj visits.

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

    COULEUR
    La couleur que vous voulez obtenir peut tre dcrite de deux faons: o o avec le nom anglais de la couleur, ou beaucoup plus prcisment au moyen d'un symbole # et de 6 chiffres (en hexadcimal - base16).

    Tout d'abord le format de la commande de couleur est: "#RRVVBB" # est le symbole qui permet de diffrencier 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 squence de numrotation hexadcimale 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

    Insrer 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 dclarer le lancement du son l'ouverture de la page. LOOP=" " permet de dterminer le nombre de fois o le son va tre jou. La valeur -1 signifie que le son sera rpt l'infini.

    MISE ENFORME

    Le texte peut avoir plusieurs polices et attributs.

    Mise en forme de caractres

    Option Style B (gras), I (italique), U (soulign), S (barr)... Option FONT SIZE pour grer la taille de la police Exemple : Bienvenue sur ma page <B><FONT SIZE=+1>Bienvenue .</FONT></B> Le texte est centr, en gras avec une police d'une taille suprieure la taille standard. Aucune police n'est spcifi ce qui signifie que c'est la police choisie par dfaut dans le menu Prfrences qui sera affiche.

    <FONT> Ce marqueur permet de changer la fonte, et aussi d'autres paramtres, 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 caractres 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><B><FONT SIZE=+1>Bienvenue.</FONT></B></CENTER></ALIGN> Le texte est align droite avec une police d'1 taille suprieure et en gras.

    Insrer une image

    IM

    S C:i

    On eut modifier la taille initiale d'une image : HEI HT ="valeur" our modifier la auteur WIDTH="valeur" our modifier la largeur

    im

    <CE TER><IM SRC="tv.gif" HEI HT="39" WIDTH="50"> <ALI ABSCE TER>Bienvenue <IM SRC="tv.gif" HEI HT="39" WIDTH="50"> ABSCE TER </CE TER> ALI

    LE RESTE DU DOCUME T

    9 CBB

    On eut ontrler l'alignement verti al grce aux valeurs OP BOTTOM bas) de l'option A I N.

    A @9

    C 7 D

     

    Marqueur CE TE

    , RI HT u LE T

    ur

    iti

    er l i age

    Bienvenue

    #' &

    % $ ## " ! !  

     

    <CE TE ><IM

    
    ti i S C="abeille. if"></CE TE > ri talement.

    3 3 4

     

    534 534 3

    ) ( 6

    aut , MI

    E centre) et

    Le texte se saisit comme sur un traitement de texte le passage la ligne est automatique. Marqueur <BR> : Pour crer un nouveau paragraphe Marqueur <P> : Changer l'alignement du paragraphe avec les options d'alignement: <P ALIGN="RIGHT"> (ou LEFT CENTER JUSTIFY) gauche/centre/align.

    MARQUEURS DIVERS
    <B> et </B> : Caractres gras (<STRONG> </STRONG> aussi). <I> et </I> : Italiques (<EM> </EM> 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

    n 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 mme ledocument tout entier... <A HRE ="xxx"> Dbut de lien qui finit par </A> Tout ce qui se trouve entre les deux est considr comme one 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)

    Li

    : Pour retourner au sommaire de ce site

    <A HRE ="index.html">Sommaire</A>

    Li

    l : Pour aller sur le site Netscape

    <A HRE ="http://

    .netscape.com/index.html">Allez voir ce site</A>

    Li

    m il

    l : Pour m'envoyer un courrier lectronique

    <A HRE ="mailto:showtime@ifrance.com">crivez-moi</A>

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

    <A HRE ="mailto:showtime@ifrance.com"><IM

    SRC="mail.gif" BORDER="0"></A>

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

    F I

    aaa

    TQ SRQP

    G U i

    ` f

    W YXW V c edc b

    Lien dans la mme 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: <A HREF="#Titre">pour y aller</A>

    Pour sauter dans une section particulire d'une autre page Web, il suffit tout simplement de rajouter le nom de la section aprs le nom de la page dans le lien, exemple: <A HREF="page2.html#sectionX"> Texte</A>

    Modifier l'apparence des liens


    Il est possible de modifier l'apparence des liens de faon ne pas les faire apparatre 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 aprs avoir t visits.

    LES LISTES

    Il est possible de crer des listes d'objets numrotes ou non avec quelques marqueurs.

    Liste non numrote :


    <UL> <LH>Entte en option</LH> <LI>Point numro1 <LI>Point numro2 <LI>Point numro3 <LI>Point numro4 </UL>

    Liste numrote
    <OL> <LH>Entte en option</LH> <LI>texte <LI>texte </OL> Le type de numrotation peut tre chang avec: <OL TYPE=""> avec a et A, la numrotation est alphabtique, avec i et I, elle est romaine (majuscules ou minuscules dans les deux cas). Pour continuer ou changer la numrotation: <OL START="x"> <LH>Entte en option</LH> <LI>texte <LI VALUE="y">texte> </OL>

    TABLEAUX

    C'est la seule faon de grer convenablement la prsentation. Les tableaux permettent de diviser la page en zones d'espace et de remplir ces zones avec des objets (textes, images, couleurs), permettant un contrle amlior de la position des objets. Ces tables peuvent avoir un fond et des bords visibles ou non.

    Insrer un tableau
    <TABLE> et </TABLE> : pour dfinir un tableau <TR> et </TR> : pour dfinir une range <TH> et </TH> : pour les cellules de haut de colonne (facultatif) <TD> et </TD> : pour une cellule

    Exemples :

    Bienvenue

    <TABLE WIDTH=50%><TR><TD><IMGSRC="tv.gif"></TD><TD>Bienvenue</TD> </TR></TABLE></CENTER> Le tableau occupe 50% de la largeur totale de la page sur une ligne avec dans la premire cellule l'image et dans la seconde le texte, le tout tant centr.

    Bienvenue

    <TABLE BORDER COLS =2 WIDTH="100%" > <TR> <TD> <CENTER><IMG SRC="tv.gif" HEIGHT=39 WIDTH=50></CENTER> <TD> <CENTER>Bienvenue</CENTER>

    </TD> </TR> </TABLE>

    Mise en forme d'un tableau


    A l'intrieur d'une cellule (entre <TD> et </TD>) tout est bien sr possible, comme mettre plusieurs lignes de texte (avec <BR>, <P> ou autre), changer la couleur des caractres, 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">&nbsp;</TD> <TD WIDTH="50%" ALIGN="left" BACKGROUND="fonkraft.jpg">&nbsp;</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 intrieure des cellules cellspacing="3" Espacement entre les cellules Il est aussi possible de dfinir le nombre de ranges et de colonnes d'une table et d'attribuer une cellule plusieurs ranges (rowspan="") ou colonnes (colspan=""), ou les deux.

    CADRES

    Il est possible de scinder verticalement ou horizontalement une fentre en 2 ou plusieurs parties. Dans chacune de ces parties viendra s'insrer un fichier html.

    Cration 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'insrer un fichier dans les cadres crs prcdemment.

    Cration d'un fichier Cadre division horizontale

    L'attribut COLS peut tre remplac par ROWS pour avoir une sparation horizontale. La valeur attribue 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>

    Cration d'un cadre avec bannire 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 dfilement.

    Cration d'un cadre avec hirarchie imbrique

    <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 dfaut un navigateur ouvrira la page correspondant au lien dans la mme fentre 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.

    _bl

    _sel : affiche dans la mme fentre par dfaut) _parent : affiche dans le cadre suprieur.

    ASTUCES

    Affi

    er n message d'alerte

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

    l :

    <A HRE ="fichier.htm" TARGET="" O CLICK="window.alert 'Encore un peu de patience!')"> <IMG SRC="image.gif" BORDER=0 ALIGN= middle START="fileopen"> </A>

    Crer ne image

    ne sensible
    dire que chacune des zones est sensible

    <P><MAP NAME="FPMap0"> <AREA HRE ="unlien.htm" SHAPE="rect" COORDS="133,

    <AREA HRE ="unlien.htm" SHAPE="rect" COORDS="27, 261, 9, 319"> <AREA HRE ="unlien.htm" SHAPE="rect" COORDS="256, 172, 334, 240"> <AREA HRE ="unlien.htm" SHAPE="rect" COORDS="125, 168, 217, 241">

    Cette image s'appelle galement une image mappe c'est et permet d'accder par un lien vers d'autres pages.

    w yxw v

    t sr

    k : ouvre une nouvelle fentre pour afficher la page

    1, 199, 320">

    <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 RECTANGLE="(256,172) (334,240) unlien.htm" RECTANGLE="(125,168) (217,241) unlien.htm" RECTANGLE="(17,170) (91,237) unlien.htm" RECTANGLE="(351,87) (434,145) unlien.htm" RECTANGLE="(255,88) (317,149) unlien.htm" RECTANGLE="(129,89) (218,154) unlien.htm" RECTANGLE="(20,89) (99,155) unlien.htm" SRC="menuv.gif" X-SAS-USEIMAGEWIDTH X-SAS-USEIMAGEHEIGHT BORDER="0" ALIGN="bottom" USEMAP="#FPMap0" WIDTH="470" HEIGHT="357"></P>

    <AREA HREF="unlien.htm" permet de dsigner vers quel fichier doit pointer le lien de cette zone SHAPE permet de dfinir la forme de la slection (rect COORD prcise les coordonnes gographiques de la zone

    S-ar putea să vă placă și