HTML

PRATIQUE DE HTML (HYPERTEXT MARKUP LANGUAGE)
Pour crer une page web, ouvrir un diteur de texte, crer un fichier avec l'extension .htm et combiner les balises indiques dans ce document pour obtenir une jolie page web. FORMAT GENERAL D'UN DOCUMENT HTML : <HTML> <HEAD> </HEAD> <BODY> . </BODY> </HTML> FORMAT GENERAL D'UNE BALISE HTML (OU TAG HTML) : <Nom Attribut1="Valeur_Attribut1" Attribut2="Valeur_Attribut2" Attribut3 Attribut4>Texte</Nom> Remarque : Certaines balises n'ont pas d'attributs et peuvent ne pas tre fermes DESCRIPTION DU HEAD La partie Head dfinit les caractristiques d'un document
Balise Title
Balise Meta
Pour dfinir et afficher un titre de la page dans la barre de titre de la page : <Title>Titre du document</Title> Fournit des informations que les moteurs de recherche et les serveurs HTTP pourront utiliser. "Author" Content ="Nom auteur" "Publisher" Content ="Qui a publi le site" "Reply-to" Content ="Adresse lectronique de la personne contacter" "Description" Content ="Description du site" "KeyWords" Content ="Mot1, Mot2,"(utiliss par les moteurs de recherche) <Meta Name= "Indentifier-URL" Content ="Adresse du site" "Copyrhigt" Content ="auteur, socit" "Genarator" Content ="LogicielUtilis1, Logicielutilis2" "Date" Content ="date de cration" "All" (La page et tous ces liens seront indexs par les robots) "None" (Interdire l'accs aux robots) "Robots" Content = "Index" (La page sera indexe) "Noindex" (La page ne sera pas indexe) "Revisit-after" Content = "n" (Le site sera rindex automatiquement aprs n jours) >
"Refresh" Content="n" (Le site sera recharg toutes les n Secondes) "Refresh" Content="n" URL="" (l'URL indiqu sera charg aprs n Sec) "Pragma" Content="no-cache" (Le navigateur ne conserve pas la page en cache) "Expires" Content="Date Expiration Page" (Date partir de laquelle le <Meta HTTP_Equiv= > navigateur devra aller chercher une page partir de son site d'origine et non partir du cache)
Ralis par Naoual ABDALLAH / Module Cration site web / Partie II / Pratique de HTML 1
Balise Link
Balise Script Balise Base
Dcrit les liens entre la page et d'autres documents. Elles sera utilise plus tard pour lier une page une feuille de style Cette balise permet d'insrer des scripts qui seront excuts ct client (par le navigateur). Elle sera tudie en dtail plus tard <Base href="Chemin de base /"> A chaque appel d'un lment externe dans la page Web (image, son, liens), le chemin qui apparat dans BASE est concatn au chemin spcifi avant d rechercher l'lment. Exemple : <Base href="http://www.Coucou.com/MonSite/"> Sert dclarer un style utiliser dans la page Web. Elle sera tudie plus tard.
Balise <Style>
DESCRIPTION DU BODY
Quelques attributs de la balise Body
Balises de formatage du texte et des paragraphes :
<BODY BackGround="Image de Fond" BgColor="Couleur de Fond" Text="Couleur du Texte" Link="Couleur des Liens hypertextes de la page" vLink="Couleur des Liens Visits de la page" aLink="Couleur des Liens actifs de la page" TopMargin="Marge haut de la page" LeftMargin="Marge Gauche de la page" Bgproperties="Fixed" (indique que l'image de fond ne doit pas dfiler mme si le texte dfile)>
Mettre un texte en Italique : <I>Texte mettre en forme</I> Mettre un texte en Gras : <B>Texte mettre en forme</B> ou <Strong>Texte mettre en forme</Strong> Souligner un texte : <U>Texte mettre en forme</U> Barrer un texte : <S>Texte mettre en forme</S> ou <Strike>Texte mettre en forme</Strike> Mettre un texte en indice : <SUB> Texte mettre en forme </SUB> Mettre un texte en plus petite taille : <Small> Texte mettre en forme </Small> Mettre un texte en plus grande taille : <Big> Texte mettre en forme </Big> Mettre un texte en exposant : <SUP> Texte mettre en forme </SUP> Modifier la couleur, la taille ou la police d'un texte : <Font Color="Couleur" Size="Taille du texte" Face="Police","Police_Substitution1", "Police_Substitution2"...> Texte mettre en forme </Font> Mettre en retrait un texte : <blockquote>Texte</Blockquote> Remarque : La police attribuer doit exister sur le systme client si ce n'est pas le cas il est possible de spcifier des polices de substitution qui seront utilises dans l'ordre spcifi. Si aucune des polices spcifies n'existe c'est la police par dfaut du systme qui sera utilise. 6 modles de styles de titres sont prdfinis (de 1 6, 1 ayant la taille la plus grande) et permettent d'appliquer le modle un texte donne : <Hn> Texte mettre en forme </Hn> Les retours chariot dans un fichier HTML ne sont pas reconnus. Pour retourner la ligne : Texte <Br> Pour crer un paragraphe : left <P align > Texte paragraphe </P> right
Ralis par Naoual ABDALLAH / Module Cration site web / Partie II / Pratique de HTML 2
center Justify Remarque : La balise <P> insre automatiquement des sauts de ligne avant et aprs le paragraphe Pour reproduire un texte sur le navigateur tel que vous l'avez saisi dans votre fichier .htm : <PRE>Texte pr format </PRE> Remarque : les espaces, les tabulations, les retours la ligne sont reconnus dans ce cas. Pour afficher une Barre horizontale : left <HR align right size="Valeur_Epaisseur" width="Largeur" Color="Couleur" Noshade> center Pour faire dfiler du texte : <Marquee>Texte pr format </Marquee> Remarque : NoShade permet d'afficher la barre en couleur unie
Listes puces :
Listes numrotes :
disc <UL Type= circle > square <Lh>Titre (optionnel) <LI type=...> <LI type=...> ... </UL> A a <UL Type= I Start= Valeur_Dmarrage(Nombre)> i 1 <Lh> Titre (optionnel) <LI Value=Valeur_attribuer(nombre)> Pour sauter un numro <LI Value=> ... </UL>
Liste de dfinitions
Une liste de dfinitions est une liste de termes avec la dfinition correspondante <DL compact> <DT>Terme1 <DD>Sa dfinition <DT>Terme2 <DD>Sa dfinition . </DL> Remarque : L'attribut Compact permet de crer le terme et sa dfinition sur la mme ligne
Images
Pour insrer une image dans une page <Img Src="Chemin de l'image" Alt="Texte afficher la place de l'image si celle ci n'a pas t tlcharge" Align = "Alignement de l'image par rapport au texte" Width ="Largeur" Height ="Hauteur" Border="Epaisseur bordure" VSPACE="Espacement entre texte et bord vertical de l'image" HSPACE="Espacement entre texte et bord horizontal de l'image"
3
Ralis par Naoual ABDALLAH / Module Cration site web / Partie II / Pratique de HTML
Listes puces images:

<UL>
UseMap="attacher un MAP(une carte) l'image pour la diviser en diffrentes zones ractives">
Sons
<IMG src=""> Texte <BR> <IMG src=""> Texte <BR> <IMG src=""> Texte <BR> </UL>
Pour crer un fond sonore pour une page <BGSound Src="Chemin Fichier son" Loop="Nombre de rptition de la squence" ou Infinite pour une rptition sans arrt Volume= Balance= > Remarque : BGSOUND accepte les fichiers .WAV, .AU et .MID (fichiers Midi)
Les tableaux
Les ancres et les liens hypertextes
Un tableau commence par <Table> et se termine par </Table>. Il doit contenir au moins une ligne. Chaque ligne commence par <TR> et se termine par </TR>. Une ligne contient une ou plusieurs cellules. Chaque cellule commence par <TD> et se termine par </TD>. <Table Border="Epaisseur Bordure" BorderColor="Couleur Bordure" Background="Image de Fond" BgColor="Couleur de Fond" Align="Alignement du tableau par rapport la page" Width="Largeur du tableau par rapport la page" Cellspacing="Espacement entre les cellules" Cellpading="Espace entre la bordure du tableau et le texte"> <Caption>Titre du Tableau</Caption> <TR Align="Alignement du texte dans les cellules de la ligne (Center, Left, Right)" valign="Alignement verticaldu texte dans les cellules de la ligne (Bottom, Top, Middle)" char="Caractre par rapport auquel le texte sera align (point dcimal par exemple" bgcolor="Couleur de fond des cellules de cette ligne" > <TD ColSpan="Nombre de colonnes sur lesquels la cellule sera fusionne" RowSpan="Nombre de lignes sur lesquels la cellule sera fusionne" Align = "Alignement horizontal du texte dans la cellule (Center, Left ou right)" VAlign= "Alignement vertical du texte dans la cellule (top, middle ou bottom)" Height="Hauteur" Width="Largeur" BgColor="Couleur de fond de la cellule" Nowrap (empche le retour la ligne dans une cellule) > Texte ou image mettre dans la cellule </TD> </TR> <TR...><TD...>....</TD></TR> <TR...><TD...>....</TD></TR> ... </TABLE> Poser une ancre : accder l'endroit qu'on souhaite marquer et atteindre par la suite :
4
<a Name="NomAncre">Texte</a> Crer un lien vers une ancre se trouvant sur la mme page : <a href="#NomAncre">Texte ou image du lien </a> Crer un lien vers une ancre se trouvant sur une autre page : <a href="CheminPage#NomAncre">Texte ou image du lien</a> Crer un lien vers une autre page du mme site : <a href="CheminPage">Texte ou image du lien</a> Crer un lien vers un fichier son : <a href="CheminFichierSon">Texte ou image du lien</a> (utiliser un format compatible) Crer un lien vers une squence Vido : <a href="CheminSquenceVido">Texte ou image du lien</a> (utiliser un format compatible) Crer un lien vers un autre site : <a href="http://URL" >Texte ou image du lien </a> Crer un lien vers un serveur FTP (File Transfert Protocol) : <a href="Ftp://URL" >Texte ou image du lien </a>
Crer un lien vers une adresse lectronique : <a href="MailTo:Adresse" >Texte ou image du lien </a> Remarque : Si l'lment atteindre par un lien doit tre affich dans une fentre particulire (un cadre par exemple), le nom de la zone doit tre indiqu l'aide de l'attribut Target : <a href="CheminPage" Target="Nom de la fentre cible">Texte ou image du lien </a>
Carte
Pour crer une carte : Une carte sert rpartir une seule image en diffrentes zones de manire avoir une raction diffrente selon que l'utilisateur appuie sur telle ou telle zone. Une carte commence par <Map> et se termine par </Map>. Une carte se compose de une ou plusieurs zones. Chaque zone tant dlimite par <Area> et </Area>. <Map Name="Nom de la carte"> <Area Shape="Type de la zone (Rect, Circle ou Polygon)" Coords="Coordonnes" HRef="Lien atteindre en cas de click de l'utilisateur sur cette zone" Alt="Texte afficher en cas de problme d'accs au lien" Target="Nom de la fentre cible" NoRef (indique qu'il n'y a pas de lien associ)> <Area> <Area> </Map> Pour appliquer une carte une image : <img src="Image" UseMap="#NomCarte"> Remarque : Si deux Area (zones) entrent en conflit, celle qui a t dclare en premier a la priorit dans la partie de conflit Spcifier les coordonnes d'une zone dpend du type du Shape utilis : o Pour un rectangle : Coord="A, B, C, D" B D A C o Pour un cercle : Coord="Distance entre bord gauche et le centre, Distance entre bord haut et le centre, Rayon" o Pour un polygone :
Les cadres (Frames)
Coord="Distance entre bord gauche et le premier point, Distance entre bord haut et le premier point, Distance entre bord gauche et le deuxime point, Distance entre bord haut et le deuxime point">
Le principe des cadres consiste diviser l'cran du navigateur en plusieurs zones. Chacune de ces zones tant capable d'accueillir une page HTML. La page qu'on souhaite diviser en plusieurs cadres aura la structure suivante : <HTML> <HEAD> </HEAD> Cols ="x,y,z,..." Frameborder= Permet d'afficher ou non la bordure des Rows frames. Framespacing= Dfinit un espace de sparation entre les <FrameSet frames Border= Dfinit la largeur de la bordure des frames. Bordercolor= Dfinit la couleur de la bordure de tous les frames.> <Frame Name="NomCadre" Src="Page afficher sur le cadre"> <Frame ...> ... <NoFrames> Message afficher pour les navigateurs ne supportant pas les cadres </FrameSet> </HTML> Remarque : Il faut noter l'absence de la balise Body dans ce cas Il existe autant de Frame qu'on a dfini de colonnes ou de lignes dans <FrameSet> Un cadre d'un jeu de cadres peut lui-mme contenir un jeu de cadres. Pratiquement, on remplace dans ce cas un Frame par un FrameSet : Cols <FrameSet ="x,y,z,"> Rows <Frame Name="NomCadre" Src="Page afficher sur le cadre" MarginWidth="Marge gauche" MarginHeight="MargeHaut" Scrolling="Affichage barre dfilement ou non" NoResize (interdit le redimentionnement du site) BorderColor="Couleur"> <Frame ...> ... Cols <FrameSet ="x,y,z,..."> Rows <Frame Name="NomCadre" Src="Page afficher sur le cadre"> <Frame ...> ... <NoFrames> Message afficher pour les navigateurs ne supportant pas les cadres </FrameSet> ... <NoFrames> Message afficher pour les navigateurs ne supportant pas les cadres </FrameSet> </HTML> Remarque : L'attribut Target prcdemment vu avec la balise <a> permet justement de positionner la cible d'un lien dans un Frame donn de la page en spcifiant le nom de celui dans l'attribut Target
Autres balises :
Pour mettre en italique un texte <Em>Dfinition</Em> Pour mettre en valeur une adresse : <Adress>Adresse</Adress> Pour mettre en valeur une dfinition : <DFN>Dfinition</DFN> Pour mettre en valeur une citation : <Cit>Dfinition</Cit> Pour mettre en valeur une variable : <Var>Dfinition</Var> Pour mettre en valeur un code : <Code>Dfinition</Code> Pour crer un menu : <Menu> <Li>Menu Item1 <Li>MenuItem2 </Menu>
Les styles :
Les feuilles de style (CSS-Cascading Style Sheet) permettent de sparer la prsentation d'un document (HTML ou XML) de son contenu. Il sera ainsi plus facile de modifier la prsentation d'un document (ou d'un site) et de le maintenir. Une feuille de styles dcrit des styles. Un style est un ensemble de proprits de mise en forme attaches un document HTML, une section de document ou un lment HTML. C'est un ensemble de rgles. Une rgle de style est compose d'un slecteur (gnralement une balise HTML comme Body, p, ) auquel sont rattaches un ensemble de proprits.
Implantation des feuilles de styles
Il existe trois techniques pour utiliser des feuilles de style : Les styles locaux, les styles incorpors et les styles externes. Styles locaux Le style est dfini directement dans la balise concerne. Il ne s'appliquera qu' cet lment (le style ne sera pas il ne s'appliquera pas aux autres balises mme si elles ont celle de m^me nom) <NomBalise Style="PropritStyle1:valeur ; PropritStyle2:valeur."> Styles incorpors Le style est dfini dans le head ou entre le head et le body l'aide de la balise Style <Style Type="Type langage utilis"> <!-Dscription des styles --> </Style> Remarque :  </Style> Si diffrents types de feuilles de styles sont utiliss dans un mme document (locales, incorpores et externe), le style le plus proche du contenu est prioritaire (Style local, style incorpor, style externe import puis style externe) Si plusieurs feuilles de styles externes sont appeles et que plusieurs dfinissions existent pour le mme style seul le dernier style sera conserv (cascade des styles)
Le format gnral d'une rgle de style est : Slecteur {PropritStyle1 : valeur1 ; PropritStyle2 : valeur1, valeur2} Il existe diffrents formats de slecteurs : Pour appliquer un style tous les lments d'un document *{PropritStyle1 : valeur1 ; PropritStyle2 : valeur1, valeur2} Pour appliquer un style une balise NomBalise{PropritStyle1 : valeur1 ; PropritStyle2 : valeur1, valeur2} Pour appliquer le mme styles plusieurs balises diffrentes NomBalise1, NomBalise2{PropritStyle1 : valeur1 ; PropritStyle2 : valeur1, valeur2}
Les balises Span et Div
Servent appliquer un style qui ne peut pas tre appliqu un lment du langage HTML. Span : Permet d'associer un style un texte : <Span>Texte</Span> Div : Permet de crer une section dans un document. Il sera possible d'associer cette section un style Left <Div Align= Center > paragraphes</Div> Right
Remarque : Une section peut regrouper plusieurs paragraphes dlimits par des balises <p> et </p>
Les classes
Il est possible d'associer diffrentes balises un mme style ou d'associer la mme balise des styles diffrents en utilisant l'attribut Class : <Nom BaliseClass="NomClasse"> Par la suite il est possible de dfinir le style pour une classe de la manire suivante : Pour appliquer un style toutes les balises "NomBalise" ayant pour classe "NomClasse" : NomBalise.NomClasse{PropritStyle1:valeur ; PropritStyle2:valeur} Pour appliquer un style toutes les balises ayant pour classe "NomClasse" (classe universelle): .NomClasse{PropritStyle1:valeur, PropritStyle2:valeur}
Les id :
La dfinition des rgles de style pour les classes risque de crer un conflit en JavaScript ( cause de l'appel sous la forme NomBalise.NomClasse). Cet attribut sera remplac par l'attribut Id qui fonctionne de la mme manire avec de lgres diffrences : <Nom Baliseid="NomId"> Par la suite il est possible de dfinir le style pour un Id de la manire suivante : Pour appliquer un style toutes les balises "NomBalise" ayant pour Id "NomId" : NomBalise.NomId{PropritStyle1:valeur ; PropritStyle2:valeur} Pour appliquer un style toutes les balises ayant pour Id "NomId" : .NomId{PropritStyle1:valeur, PropritStyle2:valeur} Remarque : un attribut ID sert identifier un lment de manire unique dans un document
Les Pseudo-Elments et les Pseudo-Classes :
Les formulaires :
Les pseudo-lments permettent d'appliquer un style un lment ou une classe selon un critre portant sur le texte contenu dans cette balise : First-Letter NomBalise1: First-Line {PropritStyle1 : valeur1 ; PropritStyle2 : valeur1} ... Les pseudo-classes permettent d'appliquer un style un lment selon des conditions portant sur des vnement ou sur la position relative d'une balise par rapport aux autres balises. On distingue : Les pseudo-classes de liens : Portent sur les ancres link a: visited {PropritStyle1 : valeur1 ; PropritStyle2 : valeur1} active Remarque : Le a est optionnel, il peut tre omis Les pseudo-classes descendantes : Permettent d'appliquer un style selon sa position par rapport d'autres lments : - Pour appliquer un style tout lment Y qui est un descendant de X X Y{PropritStyle1 : valeur1 ; PropritStyle2 : valeur1, valeur2} - Pour appliquer un style tout lment Y qui est un enfant de X X>Y{PropritStyle1 : valeur1 ; PropritStyle2 : valeur1, valeur2} - Pour appliquer un style au premier lment Y rencontr dans un lment X X>Y:First-Child{PropritStyle1 : valeur1 ; PropritStyle2 : valeur1, valeur2} - Pour appliquer un style tout lment Y qui vient immdiatement aprs un lment X X+Y{PropritStyle1 : valeur1 ; PropritStyle2 : valeur1, valeur2} Les pseudo-classes dynamiques : Permettent d'associer des styles des vnements sur X X:Evnement {PropritStyle1 : valeur1 ; PropritStyle2 : valeur1}
Les formulaires offrent l'utilisateur les moyens d'interagir avec une page web (Zones de textes, boutons d'options, Boutons,). Un document HTML peut contenir plusieurs formulaires si chaque formulaire doit dclencher une action diffrente.
Balise <Form>
Marque le dbut d'un formulaire <Form Name= "NomFormulaire" Action="Action dclencher" Method="Mthode de transfert des donnes vers un serveur" (Get ou Post) Target="Fentre o s'afficher> Elments formulaire </Form>
Balise <input>
<Input Name= "NomChamp" Type = "Text" (Zone de texte) "Password"(Zone de texte pour Mdp) "Hidden" (zone cache) Size="Taille de la zone" Value="Valeur par dfaut" MaxLength="Longueur maximale" Disabled (Dsactive le champ)> <Input Name= "NomChamp" "Button" (Bouton de commande) Type = "Submit" (Bouton de validation) "Reset" (Bouton de rinitialisation des autres champs)
Value="texte qui apparatra sur le bouton" Disabled (Dsactive le champ)> <Input Name= "NomChamp" Type="Image" Src="Image" Alt="Texte en cas de nom affichage de l'image" Disabled (Dsactive le champ)> Remarque : Cet lement a le mme rle que Submit <Input Name= "NomGroupe" "Radio" (Bouton radio / Un seul choix est possible sur un groupe) Type = "CheckBox" (Case cocher / Plusieurs choix sont possible sur un mme groupe) V Value="Valeur du champ" Checked (indique si un bouton d'option (ou une case cocher) est slectionn) Disabled (Dsactive le champ)> Remarque : Les boutons d'options (ou les case cocher) faisant partie du mme groupe doivent porter le mme nom
Balise <Button>
<Button Name= "NomChamp" Value="Texte qui apparatra sur le bouton" "Button" (Bouton de commande) Type = "Submit" (Bouton de validation) "Reset" (Bouton de rinitialisation des autres champs) Disabled (Dsactive le champ)> Texte <img src="Chemin image" alt ="Texte afficher en cas de problme de chargement de l'image"> Texte <img....> . </Button> <TextArea Name="NomChamp" Rows="Nombre lignes" Cols="Nombre colonnes"> Texte mettre dans cette zone Disabled (Dsactive le champ) </TextArea> <Select Name="NomChamp" Size="Nombre lments affichs en une seule fois dans la liste" Multiple (Slection multiple autorise) Disabled (Dsactive le champ)> <Option Value="Valeur Correspondante" Selected (si l'lment est slectionn ou non)> <Option > ... </Select>
10
Balise <textArea>(Champ memo)
Balise <Select> (Les menus droulants)

HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

PRATIQUE DE HTML (HYPERTEXT MARKUP LANGUAGE)

Balise Script Balise Base

Quelques attributs de la balise Body

Balises de formatage du texte et des paragraphes :

Listes puces images:

UseMap="attacher un MAP(une carte) l'image pour la diviser en diffrentes zones ractives">

Les ancres et les liens hypertextes

Les cadres (Frames)

Implantation des feuilles de styles

Description des styles incorpors et externe :

Les balises Span et Div

Les Pseudo-Elments et les Pseudo-Classes :

Balise <textArea>(Champ memo)

Balise <Select> (Les menus droulants)

Anda mungkin juga menyukai