Download
1 / 28
280 likes | 371 Views
I – Introduction. Le World Wide Web (WWW) ou Web est un ensemble de page dite “web” liées entre elles par des liens hypertexts. Un site est en général organisé autour d’une page d’accueil.
E N D
I – Introduction Le World Wide Web (WWW) ou Web est un ensemble de page dite “web” liées entre elles par des liens hypertexts. Un site est en général organisé autour d’une page d’accueil. Les différents sites, c’est-à-dire les différents ensembles de pages sont stockés sur des machines (serveurs) reliées entre elles. Chacune des pages est repérée grâce à une adresse unique appelé URL. • Les pages web sont interprétées par des navigateurs. Les plus connus sont : • - Mozilla Firefox, • - Microsoft Internet Explorer, • - Netscape Navigator,
H.T.M.L est un système qui permet de formaliser l’écriture d’un document. • En aucun cas ce n’est un langage de programmation. • Avec des pages html nous ne pourrons avoir que des pages statiques. • Il permet la lecture de documents sur le web à partir de machines • différentes grâce au protocole HTTP. • La création officielle du web date de 1991, cependant le langage HTML est • né en 1989 de Tim Berners-Lee. et n’a été considéré comme un langage qu’a • partir de 1993. • La version HTML 1.0. (1993) - La version 2.0 ( 1995) - La version 3.2 (1997) - • La version 4.0 (1999) • Il ne faut pas perdre de vu que HTML est un standard et qu’il représente donc des recommandations. Ceci explique que la même page ne soit pas toujours interprétée de la même manière en fonction des navigateurs.
II - structure de base d’un fichier html Les fichiers HTML sont constitués de deux grandes parties : l’entête de la page et le corps de la page. Une page HTML est encadrée par les balises <HTML> et </HTML>
III – Les balises de bases A - Les balises de styles Lorsqu’on veut mettre en forme du texte, il faut utiliser les balises de style. Une balise EST une sorte de drapeau indiquant que le texte mis entre la balise de début et la balise de fin va avoir comme mise en forme celle indiquée par la balise.
Pour mettre un arrière-plan, il faut mettre des attributs à la balise <BODY>
B - Les balises de structure Les balises de structure vont avoir pour but de changer la forme de la page. Elles peuvent être classées en différentes catégories : - les balise d’en-têtes : elles s’appliquent au en-têtes de pages et sont au nombre de 6, on peut appliquer des attributs à ces balises; -les balises de listes : se sont des balises qui permettent de présenter du texte sous forme de liste (c’est-à-dire avec des tirets par exemple) ; - les balises de paragraphes : se sont des balises qui permettent de mettre le texte sous forme de paragraphe (c’est-à-dire de bloc de texte).
a) les balises d’en-têtes Elles permettent de faire des niveaux dans les titres de la page et donc de hiérarchiser une page. Les balises sont au nombre de 6. Elles permettent de mettre la police de caractère de plus en plus grand. <H6> Bonjour <\H6> permet d’écrire le mot Bonjour en tout petit <H1> Bonjour <\H1> permet d’écrire le mot Bonjour en très grand. On va pouvoir appliquer des attributs sur les balises d’en-têtes, ainsi nous aurons des mises en formes plus élaborées Pour utiliser des attributs la syntaxe est la suivante : <BALISES ATTRIBUT1=XXXXX ATTRIBUT2=XXXX> Texte </BALISE>
Les valeurs que peuvent prendre les attributs sont les suivantes : ALIGN= LEFT ou RIGHT ou CENTER ou JUSTIFY NOWRAP : Interdit de reporter des mots d'une ligne à l'autre ID : Attribue un nom au contenu de la balise (pour faire des liens) LANG : Spécifie un langage différent CLASS : Assigne une classe au contenu (pour les feuilles de style) CLEAR : Utilisé dans le cas d'un texte entourant une image. Il permet de descendre dans la page aussi loin qu'il est nécessaire pour atteindre une marge libre
b - Les balises des Listes Une liste est un paragraphe structuré contenant une suite d'articles. Il en existe trois types. Voici leur syntaxe:
c) - Les balises des paragraphes Elles vont nous permettre de faire des bloc de texte. La balise <br> permets de passer à la ligne La balise <p> texte <\p> permet de faire un paragraphe. Les balises servant à indenter le texte sont appelées des conteneurs.
C - La balise <hr /> La balise <hr /> permet de générer une ligne horizontale avec plus ou moins d’épaisseur de trait.
Caractère Codage à à â â é é è è D - Remarque Il est préférable de remplacer les caractères accentués ou autres caractères spéciaux par des codes en HTML. Bien que cela rende la feuille moins lisible, cela permet d’avoir un affichage correct de ces caractères dans d’autres pays. Les caractères les plus courants sont : La deuxième solution est de ne pas remplacer les caractères accentués par des codes mais de les écrire normalement et placer la ligne suivante dans l’entête d’une feuille html : <meta http-equiv="content-type" content="text/html; charset=ISO-8559-1" /> Cette ligne est à mettre entre </title> et <head>.
IV – Présentation en forme de tableau A – Généralités • Les tableaux sont introduits par <table> et conclu par </table>. • Pour obtenir un effet 3D dans un tableau, on utilisera l’attribut border (border="5"). • Pour afficher du texte d’un côté ou l’autre du tableau, on utilisera l’attribut align : align="left" positionne le tableau à gauche du texte. • Lorsque l’on veut imposer une taille (hauteur, largeur) de cellule, on précisera les attributs suivants height="20", width="50". • Chaque ligne du tableau (table row) commence par <tr> et se termine par </tr>. • Une cellule (table data) est définie à l’aide des balises <td> et </td>.
Pour construire le tableau de base, les balises communes à tout tableau sont : • <table> et </table> : qui marquent le début et fin du tableau, • <tr> et </tr> : qui marquent le début et la fin d’une ligne, • <td> et </td> : qui marquent le début et la fin d’une cellule, • <th> et </th> : qui marquent le début et la fin d’un entête. • <caption> et </caption> : marquent le début et la fin de la ligne de titre du table
V – Présentation des formulaires A – Généralités • Les formulaires permettent la saisies de données par les utilisateurs • De manière à simplifier la saisie, il est possible de créer des éléments visuels (case à cocher, liste déroulante…)
Un exemple de liens internes (chemin absolu et relatif) Structure d’un site exemple ! Pour créer des liens hypertextes, il suffit d’utiliser la balise d’ancre <a>, paramétrée à l’aide de l’attribut src (source). Les liens relatifs ont été utilisés pour les trois feuilles. Utiliser des liens absolus, c’est utiliser le chemin d’accès complet et exact des fichiers à restituer à l’écran.
