enregistrer document texte en html

Question

Bonjour, Sauriez-vous comment je pourrais enregistrer un document texte (.txt) en html(.Html) avec vista ? Ma raison: je voudrai creer mon site html (je debute).je suis en train de suivre ce tuto: Préambules Avant de commencer, voici encore quelques petites recomandations. Qu'est ce que l'HTML ? Le langage HTML n'est pas un langage de programmation proprement dit ! Ce sont "simplement" des balises pour mettre en forme (avec des liens, en tableau, ...) du texte et des images ! Qu'est ce qu'une balise ? Une balise est une "instruction" comprise entre crochets < > qui possède un nom et parfois des attributs. Presque toutes les balises doivent être ouvertes puis refermées. On retrouvera donc souvent une balise de début et une balise de fin. La balise de fin porte le même nom que la balise de début à l'exception du nom du la balise qui est précédé du signe /. Nous aurons donc par exemple : (ouverture) et (fermeture) . Le nom de la balise (contenu entre les crochets) n'est pas sensible à la casse, il peut être écrit indifféremment en majuscule, en minuscule ou un mélange des 2. De quoi avez-vous besoin ? - un navigateur (Internet Explorer, Netscape, Mozilla, Opera...) - un éditeur HTML (==> Notepad, le "simple" Bloc-notes de Windows fera très bien l'affaire !) Pour commencer le Bloc-notes est très bien, vous devrez taper vous même le code et ainsi vous pourrez vous familiariser beaucoup plus vite avec les balises. A la fin du cours nous parlerons d'autres éditeurs, mais pour les utiliser il faut quand même connaître les bases du language HTML. - du temps et de la patience (Rome ne s'est pas faite en un jour....) - vous n'aurez pas besoin d'être connecté à Internet pour créer votre site ! Votre première page HTML Voici enfin le moment de créer votre première page HTML. Commencez par ouvrir le Bloc-notes (ou un autre éditeur HTML) pour pouvoir taper le code. Voici le code à taper : Ma première page en HTML Bonjour, voici ma première page web ! Enregistrez le document au format HTML (*.html ou *.htm). Pour cela, dans la case "Nom", tapez : index.html Et dans la case "Type", choisissez Tous(*.*) dans la liste déroulante. Voila votre page est enregistrée. Vous pouvez ouvrir votre navigateur et visualiser votre première page. Le seul texte qui apparaîtra sera "Bonjour, voici ...". Explications des nouvelles balises utilisées : - et : la première informe votre navigateur qu'il va afficher une page HTML. Cette balise doit être la première de votre code. La seconde est la balise de fin. Elle referme la première. (remarquez le / devant le mot contenu entre crochets). Elle doit être la dernière de votre code HTML et signifie la fin de votre code HTML. - et : la première ouvre l'entête de votre page. Cet entête comprend pour l'instant le titre de votre page. Cette balise est toujours placée juste après la balise . La seconde, referme l'entête de votre page (remarquez encore une fois le / devant le mot entre crochets). - et : la première ouvre la partie titre de votre page. Ce titre sera placé dans la barre tout au-dessus de votre navigateur. La seconde referme la première encore une fois en plaçant un / devant le mot entre crochets. La balise "title" doit être ouverte puis refermée à l'intérieur de la balise "head". C'est à dire qu'il faut que la balise "title" doit être ouverte puis refemée avant que le balise "head" ne soit refermée. - et : la première ouvre le début du corps de votre document. C'est là que vous allez placer textes, images et tout ce que contiendra votre page. Cette balise doit se situer après la balise de fermeture de l'entête (=> ). La seconde referme la première et maintenant je suppose que vous avez compris le principe pour fermer une balise... Première constatation : - Le code d'une page web est composé de 2 parties, l'en-tête de la page (HEAD) et le corps (BODY). Seul le corps de la page est affiché à l'écran (dans votre première page, il n'y a que la phrase "Bonjour,..." qui s'est affichée). Mise en forme : les couleurs Maintenant que nous savons comment créer une page très simple, nous allons pourvoir mettre le texte en forme. Commencons par mettre le texte en couleur. Texte en couleurs Rouge
Rouge
Vert
Vert
Bleu
Bleu
Jaune
Jaune
Ce qui donnera une page dont le contenu sera comme ceci : Rouge Rouge Vert Vert Bleu Bleu Jaune Jaune Vous pouvez également mettre le fond de l'écran en couleur comme sur ce site (plutôt qu'en blanc par défaut). Fond d'écran en couleur texte blanc sur fond noir Vous avez pouvez maintenant enregistrer votre page dans la Bloc-notes sous le même nom. Pas besoin de fermer votre navigateur puis de réouvrir votre page. Il suffit de réactualiser la page en cliquant sur soit Refresh, soit Rafraîchir ou encore Actualiser selon le navigateur... (ou simplement la touche F5) Explications des nouvelles balises utilisées : -
: cette balise permet de faire un saut de ligne. Lorsque vous écrivez du texte dans une page web, il y a un retour automatique à la ligne lorsque le texte atteint le bord droit de l'écran. Avec la balise
, vous pourrez faire des sauts de ligne à votre guise. Un "BR" correspond à un saut de ligne, pour laisser une ligne blanche entre 2 paragraphes par exemple il faut placer 2 "BR" (==>

). Il n'y a pas de balise de fin ! - et : elles permettent de modifier l'apparence du texte. Elle doit recevoir des informations provenant d'attribut(s) pour connaître la mise en forme à appliquer. Pour l'instant, nous avons juste vu l'attribut "color" qui permet de mettre le texte en couleur. Les couleurs les plus fréquentes peuvent être nommée explicitement en anglais (red, green, blue,...) sinon il faut placer le code Hexadécimal de la couleur voulue. Vous trouverez la liste des principaux codes couleurs sur notre page Codes couleurs. La couleur du texte est par défaut noir (#000000 ou black). - nous avons également vu l'attribut "bgcolor" dans : "bgcolor" (==>background color : couleur de fond) permet de mettre le fond de l'écran en couleur tout comme le fait "color" pour le texte. C'est le même principe pour le code des couleurs. La couleur du fond est par défaut blanc (#FFFFFF). Petites "définitions" : - Un attribut est un paramètre qui fournit des indications à une balise. Il possède un nom et très souvent une valeur à préciser (nom = "valeur"). Il se rajoute dans la balise de début, c'est à dire toujours entre les < > après le nom de la balise (par exemple : . - Le code Hexadécimal qui permet de définir une couleur est composé de 6 caractères précédés de #. Ces 6 caractères définissent la "teneur" en rouge, vert et bleu (les couleurs de bases) de la couleur a former. Il n'y a que 16 caractères possibles : 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F Vous trouverez les codes les plus courants sur cette page. Mise en forme : police et taille Nous allons maintenant faire varier la taille et la police de caractère du texte. Taille et police du textes Taille 7
Taille 6
Taille 5
Taille 4
Taille 3 (par défaut)
Taille 2
Taille 1

Taille +4
Taille +3
Taille +2
Taille +1
Taille par défaut ( => 3 )
Taille -1
Taille -2
Taille 4 en Verdana
Taille 3 en Comic sans MS
Taille normal en Arial si la police existe sinon en Times New Roman en couleur #336699
Ce qui donnera une page dont le contenu sera comme ceci : Taille 7 Taille 6 Taille 5 Taille 4 Taille 3 (par défaut) Taille 2 Taille 1 Taille +4 Taille +3 Taille +2 Taille +1 Taille par défaut ( => 3 ) Taille -1 Taille -2 Taille 4 en Verdana Taille 2 en Comic sans MS Taille normal en Arial si il existe sinon en Times New Roman en couleur #336699 Vous avez pouvez maintenant enregistrer votre page sous le même nom (ou un autre) et visualiser le résultat dans votre navigateur. Explications des nouveaux attributs utilisés : - l'attribut "size" : "size" (==> taille) permet de modifier la taille du texte compris entre et . Vous avez le choix entre donner un nombre entre 1 et 7 (par défaut => 3) ou bien donner une valeur de "décalage" par rapport à la taille par défaut du navigateur ("-2", "-1", "+1", "+2", "+3", "+4"). - l'attribut "face" : "face" (==> apparence) permet de choisir la police dans laquelle le texte sera affiché. Vous pouvez préciser plusieurs noms de police séparés par des ','. Si la navigateur ne reconnaît pas le premier nom, il essayera avec le suivant...Si il ne reconnaît aucun nom, il utilisera la police par défaut du navigateur utilisé. Petites remarques : - Vous pouvez tout à fait cumuler les attributs dans une balise (séparés par un espace) ! Dans le code ci-dessous nous combinons 3 attributs : Taille 4 en rouge en Verdana - Inutile d'utiliser des polices très spéciales car si les visiteurs ne l'ont pas sur leur ordi, le navigateur ne la reconnaîtra pas et donc ne l'utilisera pas. Mise en forme : centré, gras, ... Nous allons à présent voir comment mettre du texte en gras, italique,.... Texte en gras, italique, centré texte en gras
texte en italique
texte souligné
texte centre
texte centré en gras
texte en rouge, gras, centré de taille 2
Ce qui donnera une page dont le contenu sera comme ceci : texte en gras texte en italique texte souligné texte centre texte centré en gras texte en rouge, gras, centré de taille 2 Vous avez pouvez maintenant enregistrer votre page et la visualiser dans votre navigateur. Explications des nouvelles balises utilisées : - et : écrit le texte en gras. - et : écrit du texte en italique. en gras. - et : souligne du texte. Evitez d'utiliser trop cette balise car un texte souligné peut être confondu avec un lien et ça peut étre gênant pour le visiteur. - et : centre le texte par rapport à l'écran. - : Ces balises permettent de commenter votre code. Le texte compris entre ces balises ne sera pas pris en compte par le navigateur ( ==> pas affiché !). Le commentaire peut s'étendre sur plusieurs lignes. Faites attention à bien fermer le commentaire (==> "-->") sinon la fin de votre code ne sera pas affichée !. Remarques importantes : - Attention à bien refermer vos balises (avec la balise de fin) sinon la suite du texte aura également les propriétés de la balise non refermée. Par exemple si vous oubliez de refermer la balise pour placer des commentaires (), la fin de votre code ne s'affichera pas ! - Si vous voulez cumulez des balises, pour par exemple mettre un texte en gras, en italique et centré, il faut bien faire attention à l'ordre des balises pour les refermer ! Voici ce qu'il ne faut pas faire : mon texte Il faut les refermer dans l'ordre inverse de l'ouverture : mon texte C'est le même principe pour toutes les balises ! Les paragraphes Voici maintenant quelques traitements particuliers pour les textes. Paragraphes et retraits Paragraphes :
Vous pouvez former des paragraphes si vous le souhaitez ce qui vous permettra d'aligner du texte soit à gauche (alignement par défaut) soit à droite, au centre ou encore en justifié
texte aligné à droite

texte aligné au centre

texte aligné à gauche

texte justifié : blablablablablablablablabla blablablablablablablablablablabla blablablablablablablablabla blablablablablablablablablablabla blablablablablablablablabla blablablablablablablablablablabla blablablablablablablablabla blablablablablablablablablablabla

retrait de texte :

votre texte

Titres :

Titre en 1

Titre en 2

Titre en 3

Titre en 4

Titre en 5

Titre en 6
Ce qui donnera une page dont le contenu sera comme ceci : Paragraphes : Vous pouvez former des paragraphes si vous le souhaitez ce qui vous permetra d'aligner du texte soit à gauche (alignement par défaut soit à droite, au centre ou encore en justifié) texte aligné à droite texte aligné au centre texte aligné à gauche texte justifié : blablablablablablablablabla blablablablablablablablablablabla blablablablablablablablabla blablablablablablablablablablabla blablablablablablablablabla blablablablablablablablablablabla blablablablablablablablabla blablablablablablablablablablabla retrait de texte : votre texte Titres : Titre en 1 Titre en 2 Titre en 3 Titre en 4 Titre en 5 Titre en 6 Vous pouvez maintenant enregistrer votre page et visualiser le résultat dans votre navigateur. Explications des nouvelles balises utilisées : -
et
avec l'attribut "align" : permet de créer un paragraphe avec du texte aligné soit à gauche ("left"), à droite ("right"), au centre ("center") ou en justifié ("justify"). -
et
: permet de décaler un bloc de texte par rapport au bord gauche. -
et
: permet de définir des titres. Il existe 6 types de titres numérotés de 1 à 6. Vous pouvez utiliser le même attribut "align" que celui de
. Les listes Pour présenter une certaine arborescence dans un sommaire par exemple, il est souvent pratique d'utiliser une liste. Ces listes seront numérotées automatiquement... Listes Chapitre 1 : type disque plein (par défaut)

Page 1

Page 2

Page 3

Chapitre 2 : type disque vide

Page 4

Page 5

Page 6

Chapitre 3 : type carré

Page 7

Page 8

Page 9

Chapitre 4 : liste numérotée

Page 10

Page 11

Page 12

Chapitre 5 : liste numérotée avec les lettres de l'alphabet

Page 13

Page 14

Page 15

Ce qui donnera une page dont le contenu sera comme ceci : Chapitre 1 : type disque plein (par défaut) Page 1 Page 2 Page 3 Chapitre 2 : type disque vide Page 4 Page 5 Page 6 Chapitre 3 : type carré Page 7 Page 8 Page 9 Chapitre 4 : liste numérotée Page 10 Page 11 Page 12 Chapitre 5 : liste numérotée avec les lettres de l'alphabet Page 13 Page 14 Page 15 Vous pouvez maintenant enregistrer votre page et la visualiser dans votre navigateur. Explications des nouvelles balises utilisées : -
et
avec l'attribut "type" : indique le début et la fin d'une liste de puces (carrées, circulaires, en disque pleins). -
et
avec l'attribut "type" : indique le début et la fin d'une liste numérotées (avec des lettres ou des chiffres). -
: désigne un nouvel élément d'une liste. Les séparateurs Voici comment placer des séparateurs, ce sont des petits traits de séparation pour par exemple placer entre deux paragraphes d'un texte. Séparateurs Placons quelques séparateurs

Séparateur par défaut (largeur 100% et centré)

Largeur du séparateur : 300 pixels

Largeur du séparateur : 50% de la largeur de l'écran

Taille du séparateur : 10 pixels

Couleur du séparateur : rouge et la largeur est de 30%

Séparateur aligné à droite d'une largeur de 30 pixels

Séparateur aligné à gauche d'une largeur de 50 pixels en bleu

Ce qui donnera une page dont le contenu sera comme ceci : Placons quelques séparateurs Séparateur par défaut (largeur 100% et centré) -------------------------------------------------------------------------------- Largeur du séparateur : 300 pixels -------------------------------------------------------------------------------- Largeur du séparateur : 50% de la largeur de l'écran -------------------------------------------------------------------------------- Taille du séparateur : 10 pixels -------------------------------------------------------------------------------- Couleur du séparateur : rouge et la largeur est de 30% -------------------------------------------------------------------------------- Séparateur aligné à droite d'une largeur de 30 pixels -------------------------------------------------------------------------------- Séparateur aligné à gauche d'une largeur de 50 pixels en bleu -------------------------------------------------------------------------------- Vous pouvez maintenant enregistrer votre page et la visualiser dans votre navigateur. Explications des nouvelles balises utilisées : -
: permet de placer un trait séparateur. Nous avons vu plusieurs attributs possibles : "width" pour en préciser la largeur soit en pixels soit en pourcentage, "color" pour lui donner de la couleur (ATTENTION : cet attribut ne fonctionne que sous IE), "align" pour l'aligner soit à gauche ou à droite. Pas de balise de fin ! Il y a également moyen de placer des séparateurs "images" et non plus une simple barre (éventuellent en couleur). Mais les images c'est pour plus tard.... Les chemins d'accès Avant de continuer, un peu de "théorie" qui nous sera bien utile. Nous allons à dans les prochains chapitres avoir besoin d'autres fichiers, par exemple des fichiers images (*.gif, *.jpg), d'autres pages web (pour les liens hypertextes),... Pour accéder à ces fichiers, il y a 2 questions à se poser : dans quel répertoire se trouve le fichier et quel chemin emprunter pour accéder à ce répertoire. Pour cela, il faut utiliser les chemins d'accès. Mais qu'est ce qu'un chemin d'accès ??? C'est le "chemin" à parcourir à travers les différents répertoires pour accéder au(x) fichier(s) voulu(s). Il y a deux types de chemins d'accès : les chemins absolus et les chemins relatifs Les chemins relatifs permettent d'accéder à des fichiers qui se trouvent sur la même machine (ordi ou serveur) que le fichier (la page web) qui les appele. - Pour utiliser un fichier image qui se trouve dans le même répertoire que votre page web, il suffira simplement de préciser le nom de ce fichier : nom_du_fichier.ext (le .ext remplace l'extension du fichier dans cet exemple théorique, dans la pratique, nous aurons .gif, .html, .js,...) - Si le fichier se trouve dans un sous-répertoire du répertoire qui contient notre page web, il faudra accéder au fichier comme ceci : nom_du_sous_rep/fichier.ext (si c'est un sous-sous-répertoire => sous_rep/sous_sous_rep/fichier.ext) - Si le fichier se trouve dans un autre répertoire, voici comment procéder : ../nom_autre_rep/fichier.ext Le "../" permet de remonter d'un "étage" dans l'arborescence des répertoires. Si vous devez remonter de 2 "étages" => ../../nom_du_rep/fichier.ext Si le fichier se situe dans un sous-répertoire d'un autre répertoire : ../autre_rep/sous_rep/fichier.ext les chemins absolus utilisent l'URL du fichier, donc pour accéder à des fichiers qui se situent sur une autre machine (pour les liens hypertextes vers des sites extérieures par exemple), il faut utiliser des chemins absolus et donc des URLs (par exemple : http://www.un-site.com/un_rep/sous_rep/fichier.ext) Insérer des images Maintenant que vous savez comment placer du texte et le mettre en forme dans un page web, voici le moment d'ajouter des images. Images Voici une première image sans attribut particulier :

une image avec un bord de taille 3 :

Il est souvent utile de préciser la taille de l'image pour que le navigateur connaîsse la taille de l'emplacement à réserver :

Si l'image n'est pas trouvée par le navigateur (99% du temps à cause d'un chemin d'accès incorrect), on affichera un petit message à coté de la croix rouge qui signale que l'image est manquante. Ce texte sera également affiché si on laisse la souris sur l'image pendant quelques secondes.
Ce qui donnera une page dont le contenu sera comme ceci : Voici une première image sans attribut particulier : une image avec un bord de taille 3 : Il est souvent utile de préciser la taille de l'image pour que le navigateur connaîsse la taille de l'emplacement à réserver : Si l'image n'est pas trouvée par le navigateur (99% du temps à cause d'un chemin d'accès incorrect), on affichera un petit message à coté de la croix rouge qui signale que l'image est manquante. Ce texte sera également affiché si on laisse la souris sur l'image pendant quelques secondes. Vous pouvez maintenant enregistrer la page et visualiser le résultat dans votre navigateur. Explications des nouvelles balises utilisées : - : insère une image dans votre page. Il faut préciser le chemin (ou adresse) de l'image à ajouter au moyen de l'attribut "src" (obligatoire !). Il n'y a pas de balise de fin ! Les attributs "width" et "height" permettent respectivement de spécifier la largeur et la hauteur de l'image en nombre de pixels. L'attribut "border" désigne la taille du bord à afficher autour de l'image (par défaut : 0). Et enfin "alt" (comme alternative) permet de préciser un texte qui sera affiche si l'image n'est pas trouvée (=> croix rouge) ou bien si vous laissez votre souris dessus. Quelques remarques : - Ce dernier attribut "alt" est très important pour le référencement de votre site ! (mais nous en reparlerons plus tard...). Il vaut donc mieux ne pas le négliger et l'utiliser dans chacune de vos balises . - Si vos images ne s'affichent pas (une croix rouge les remplace), c'est certainement une erreur dans le chemin d'accès vers le fichier image. Vérifier bien le nom du fichier, le nom du répertoire,... Il arrive également que les certains édtiteurs HTML vous insèrent des chemins du style c:/mes documents/..., les images s'afficheront donc en local (chez vous) mais par sur le web. C'est normal vu que ce chemin n'existe pas sur la machine où se trouve vos pages web. Il faudrat donc modifier ces chemins par des chemins relatifs. - Pour mettre une image comme fond d'écran, il faut utiliser l'attribut "background" de la balise . Il veut toujours mieux utiliser un fond d'écran fixe (pas une image animée). Les liens hypertextes Les liens portent bien leur nom. Ils permettent de faire la liaison entre les pages web. Pour changer de page, il faut cliquer sur un lien, le navigateur chargera alors la nouvelle page. Il y a 3 types de liens : - Les liens internes à un site (=> utilisation très fréquente des chemins relatifs car plus court à taper). - Les liens internes à une page (ou ancre) (=> utilisation de chemins absolus ou relatifs). - Les liens externes (=> uniquement des chemins absolus !) Passons à présent à la fabrication de ces liens. Les liens hypertextes On suppose que la page vers laquelle est faite le lien se trouve dans le même répertoire que la page en cours :
Lien vers la page 2

Si la page de destination est dans un sous-répertoire de celui de la page courante :
Lien vers une page dans le sous-répertoire nommé "sous_repertoire"

Si la page de destination se trouve dans autre répertoire de même niveau que celui de la page courante : Lien vers une page dans un autre répertoire nommé "repertoire"

Lien vers un site externe

Lien vers l'ancre 1

Texte

Pour finir, on peut très bien accéder à un ancre d'une page située sur un autre site en utilisant donc une URL suivie d'un ancre.
lien vers un ancre sur une page d'un site extérieure Ce qui donnera une page dont le contenu sera comme ceci : Si la page vers laquelle est faite le lien se trouve dans le même répertoire que la page en cours : Lien vers la page 2 Si la page de destination est dans un sous-répertoire de celui de la page courante : Lien vers une page dans le sous-répertoire nommé "repertoire" Si la page de destination se trouve dans autre répertoire de même niveau que celui de la page courante : Lien vers une page dans un autre répertoire nommé "repertoire" Lien vers un site externe Lien vers l'ancre 1 Texte du début de l'ancre 1 Pour finir, on peut très bien accéder à un ancre d'une page située sur un autre site en utilisant donc une URL suivie d'un ancre. lien vers un ancre sur une page d'un site extérieure Vous pouvez maintenant enregistrer votre page et la visualiser dans votre navigateur. Il faudra en plus créer une autre page nommée page2.html, pour pouvoir tester vos liens. Il suffit de faire une page avec un simple texte dedans. Explications des nouvelles balises utilisées : - et : permettent de créer un lien hypertexte. Son attribut indispensable est "href". En effet, il permet de préciser l'adresse de la page de destination du lien qui sera créé. Cette adresse peut être soit absolue soit relative. Si vous souhaitez faire un lien interne à une page, il faut créer un ancre. On crée le lien vers cet ancre comme ceci : Texte1 et on crée l'ancre comme ceci : Texte2 Quelques remarques : - Si le contenu d'une page est assez long, un lien interne à la page avec un ancre pourrait être très pratique pour revenir dans le haut de la page (sans utiliser les barres de scroll). Au début de votre texte, vous créez un ancre sur le premier mot du texte (par exemple) avec XYZ et à la fin du texte, vous rajoutez un lien vers cet ancre avec Retour en haut. Vous pouvez même placer ce lien à plusieurs endroits de votre page. - Dans nos exemples, nous avons uniquement utilisé du texte entre les balises et . Mais rien ne vous empêche d'utiliser une image plutôt que du texte ! => Si vous utilisez des images, faites attention dans votre code, si il y a un retour à la ligne (retour chariot) entre le crochet de fin de la balise img et le crochet de début de la balise de fin du lien, il se peut qu'un petit trait apparaîsse dans le coin inférieur droit de l'image... (comme ci-dessous) Donc au lien d'avoir ce code : Faites comme ceci : (=> tout sur une même ligne...) - Il existe également un attribut "target" qui vous permet par exemple d'ouvrir un lien dans une nouvelle fenêtre comme ceci : lien (comme le lien "Forum" dans le menu de gauche). Par défaut, un lien s'ouvre dans la même page que la page ou se trouve le lien, hors si vous avez des liens vers des sites extérieures, si un visiteur clique sur un de ces liens, le site va s'ouvrir dans la fenêtre où se trouve votre site (il ne sera donc plus visible puisque remplacé par la nouvelle page). Il peut donc être utile d'utiliser l'attribut target pour les liens vers des sites externes pour que votre site reste visible également. Pour des liens internes à votre site, il est souvent déconseillé d'ouvrir 36 fenêtres différentes avec les pages de votre site pour ne pas troubler les visiteurs. Créer des tableaux (1) Voici le moment de créer des tableaux. Les tableaux sont très pratiques pour faire de la mise en page. En effet, ils permettent d'aligner des éléments (textes, images,...). Mais ce n'est pas leur unique fonction... Les tableaux Voici notre premier tableau avec un bord de 1 :

Celulle 1 Celulle 2

Celulle 3 Celulle 4

Taille des celulles en pixel :

100 100 100

Taille des celulles en pourcentage :

33% 34% 33%

Ce qui donnera une page dont le contenu sera comme ceci : Voici notre premier tableau avec un bord de 1 : Celulle 1 Celulle 2 Celulle 3 Celulle 4 Taille des celulles en pixel : 100 100 100 Taille des celulles en pourcentage : 33% 34% 33% Vous pouvez maintenant enregistrer votre page et la visualiser dans votre navigateur. Explications des nouvelles balises utilisées : - et
: création d'un tableau. Nous avons dans notre exemple précisé, au moyen de l'attribut "border" (0 par défaut), la taille de la bordure autour des cellules de notre tableau. (la balise de fin est obligatoire !) - : débute une nouvelle ligne dans la tableau. La balise de fin () n'est pas obligatoire. Chaque fois que le navigateur tombera sur une balise , il considérera que la ligne précédente est terminée et commencera une nouvelle. Toutes les lignes d'un même tableau doivent contenir le même nombre de celulles. - : crée une nouvelle celulle dans un tableau. Cette celulle doit être contenue dans une ligne et donc une balise "TR" doit être déjà ouverte... Vous pouvez ensuite créer autant de celulles que vous voulez dans un même ligne. Une celulle peut contenir un peu tout et n'importe quoi. On peut y mettre du texte, des images,... La celulle va s'adapter automatiquement aussi bien en largeur qu'en hauteur au contenu le plus haut et le plus large. Et pour finir, toutes les celulles d'une même colonne ont la même largeur (celle de la celulle la plus large), idem pour la hauteur des celulles d'une même ligne. Comme pour "TR", la balise de fin () est optionnelle. Remarques : - Même si les balises de fin et sont optionnelles, il veut quand même mieux les utiliser pour éviter des problèmes de compatibilité ou de mise en page avec certains vieux navigateurs. Créer des tableaux (2) Maintenant que nous savons comment créer un simple tableau, nous allons découvrir les principaux attributs que nous pouvons utiliser. Les tableaux Tableaux avec des fonds de couleurs et alignements du contenu :

#CCCCCC #FFFFFF

#FF0000 #0000FF

#FFFFCC #008000

Fusion de celulles (colonnes) :

Celulle 1 Celulle 2 Celulle 3 Celulle 4

Celulle fusionnée sur 4 colonnes

Fusion de celulles (lignes) :

Celulle 1 Celulle 2 Fusion de 2 lignes

Celulle 3 Celulle 4

Ce qui donnera une page dont le contenu sera comme ceci : Tableaux avec des fonds de couleurs et alignements du contenu : #CCCCCC #FFFFFF #FF0000 #0000FF #FFFFCC #008000 Fusion de celulles (colonnes) : Celulle 1 Celulle 2 Celulle 3 Celulle 4 Celulle fusionnée sur 4 colonnes Fusion de celulles (lignes) : Celulle 1 Celulle 2 Fusion de 2 lignes Celulle 3 Celulle 4 Vous pouvez maintenant enregistrer votre page et visualiser le résultat dans votre navigateur. Explications des nouveaux attributs utilisées : - "bgcolor" permet de donner un fond de couleur à un tableau ou à une celulle. Comme toujours la couleur peut être précisée soit par som nom (en anglais) soit par son code Hexa (le blanc soit #FFFFFF est la couleur par défaut). - "width" permet de préciser la largeur d'un tableau ou d'une celulle. La largeur peut être donnée en pixel ou en pourcentage. - "height" permet de donner la hauteur d'une celulle. Il n'est pas possible de préciser la hauteur d'un tableau. Attention, si vous donnez une certaine hauteur X à une celulle et que vous placez par exemple une image dont la hauteur est plus grande, la celulle s'adaptera à la taille de l'image en "oubliant" son attribut hauteur ! (idem en largeur). - "cellpadding" définit l'espace en pixel entre le bord d'une celulle et son contenu. (1 par défaut). - "cellspacing" définit l'espace entre les celulles du tableau. (1 par défaut). - "colspan" permet de faire fusionner des celulles d'une même ligne. Il faut y préciser le nombre de celulles à fusionner. - "rowspan" permet de faire fusionner des cellules d'un même colonne. Il faut y préciser le nombre de celulles. - "align" précise l'alignement sur un axe horizontal du tableau ou du contenu de la celulle. (valeur possible : "left" par défaut, "right", "center"). - "valign" précise l'alignement du contenu des celulles sur un axe vertical. (valeur possible : "middle", "bottom", "top"). Petits plus : - Vous pouvez mettre une image comme fond d'un tableau à la palce d'une simple couleur (comme pour la balise BODY) avec l'attribut background. Mais cet attribut ne sera accepté que par Internet Explorer, les autres n'afficheront pas l'image ! - Il est également possible ce changer la couleur de la bordure autour du tableau avec l'attribut "bordercolor" (par exemple bordercolor="#000000"). Mais encore une fois, cet attribut n'est compatible qu'avec IE ! Les formulaires (1) Les formulaires permettent de récupérer des informations auprès de vos visiteurs. Vous pouvez ainsi créer une certaine interactivité avec vos visiteurs. Ils pourront vous envoyer des messages et vous pourrez mieux les connaître. Il y a plusieurs moyens pour récupérer ces informations. Soit vous utilisez un script coté serveur (en CGI ou en PHP par exemple), ce script est interpreté sur un serveur chez votre hébergeur et pourra traiter les informations. Soit vous pouvez recevoir les infos directement sur votre adresse email au moyen d'un "mailto". Je ne m'étendrai pas plus sur les scripts CGI dans ce tutorial (ce n'est pas le but). Cependant, vous pourrez trouvez des scripts et des explications en visitant les sites sur les CGI de notre annuaire en cliquant ICI. L'envoi des données via un mailto sera expliqué dans ce cours. Formulaires Voici un premier formulaire très simple :

Entrez votre nom :

Voici une version améliorée de notre premier formulaire :

Entrez votre prénom :
Entrez votre nom :

Et pour finir cette première partie sur les formulaires, une troisième version de notre formulaire :

Entrez votre prénom :
Entrez votre nom :
Entrez l'adresse de votre site :

Entrez un mot de passe :

Ce qui donnera une page dont le contenu sera comme ceci : Voici un premier formulaire très simple : Entrez votre nom : Voici une version améliorée de notre premier formulaire : Entrez votre prénom :........................ Entrez votre nom : ......................... Et pour finir cette première partie sur les formulaires, une troisième version de notre formulaire : Entrez votre prénom : ............................... Entrez votre nom : ........................ Entrez l'adresse de votre site : ................................ Entrez un mot de passe : .............................. Vous pouvez maintenant enregistrez votre page et la visualiser dans votre navigateur. Explications des nouvelles balises utilisées : -
et
: elles délimitent un formulaire. La présence de la balise de fin est primordial ! L'attribut "enctype" permet de spécifier le type de données. Vous n'avez pas besoin d'y toucher pour le moment. L'attribut "action" désigne l'adresse du script qui va traiter les données. Par exemple avec un CGI, nous aurions quelque chose comme ceci : action="cgi-bin/mon_cgi.pl", avec un script en PHP ceci : action="mon_script.php" et enfin pour un mailto (envoi vers une mail) ceci : action="mailto:adresse_email@domaine.com". L'attribut "method" spécifie la manière dont les données remplies dans le formulaire doivent être transmises. Il peut prendre 2 valeurs : "POST" ou "GET". Avec GET, les données sont envoyées au serveur via l'URL et sont donc visibles dans celle-ci ! Avec POST, les données sont directement envoyées au serveur et ne sont pas visibles. On utilisera presque toujours la méthode POST pour les formulaires. - : cette balise permet de placer un champ dans lequel les informations peuvent être recueillies. (pas de balise de fin !) L'attribut "name" permet de désigner un champ du formulaire par un nom pour le traitement des données. Chaque nom doit être unique ! L'attribut "type" spécifie le type de champ. Il peut prendre plusieurs valeurs : - "text" pour entrer du simple texte - "hidden" pour un champ caché non visible par le visiteur (on ne peut pas y ajouter du texte !) - "password" pour entrer un mot de passe (les caractères sont remplacés par des *) - "submit" pour créer un bouton pour envoyer les données du formulaire. - "reset" pour créer un bouton qui vide le formulaire et le remet comme au chargement de la page. L'attribut "value" permet de donner une valeur à un champ avant que le visiteur ne commence à le remplir. Dans la cas d'un bouton (submit ou reset), cette valeur sera le texte affiché sur le bouton ! L'attribut "size" donne la largeur du champ (20 par défaut). L'attribut "maxlenght" quant à lui définit le nombre maximal de caractères pouvant être tapés dans un champ. Si vous essayez de taper un caractère supplémentaire, il ne sera pas pris dans le champ !. Les formulaires (2) Vous avez déjà surement vu dans des formulaires, des listes déroulantes, des cases à cocher et bien voici comment procéder. Formulaires Les boutons :

Les liste déroulantes :

Comment trouver ce tutorial jusqu'à présent :

Ou bien, on peut préciser le nombre de valeur à afficher :

Les zones de textes :

Entrez votre texte :
Texte de départ

Les cases à cocher :

Quels sont vos hobbys :
Le sport :
Internet :
Votre site :
La lecture :
La télévision :

Les boutons radio :

Quel est votre niveau en HTML :
Excellent
Moyen
Débutant
Ce qui donnera une page dont le contenu sera comme ceci : Les boutons : Les liste déroulantes : Comment trouver ce tutorial jusqu'à présent : Excellent Bon Moyen Faible Pitoyable Ou bien, on peut préciser le nombre de valeur à afficher : Excellent Bon Moyen Faible Pitoyable Les zones de textes : Entrez votre texte : Texte de départ Les cases à cocher : Quels sont vos hobbys : Le sport : Internet : Votre site : La lecture : La télévision : Les boutons radio : Quel est votre niveau en HTML : Excellent Moyen Débutant Vous avez pouvez maintenant enregistrez votre page sous le même nom et visualiser la page dans votre navigateur. Explications des nouvelles balises utilisées : - : crée une liste déroulante. On peut lui attribuer une nom avec l'attribut "name" ainsi que le le nombre d'éléments visibles de la liste avec "size" (1 par défaut). - : ajoute un élément à la liste déroulante créée avec un SELECT. On peut lui donner une valeur grâce à son attribut "value". Par défaut, c'est la première balise option qui sera celle par défaut. Si vous voulez que ce soit une autre, il faut ajouter le mot suivant dans la balise en question : 'selected'. - et : elles délimitent une zone de texte. Comme toujours on peut la nommer avec "name". On peut également en spécifier la taille avec "rows" (nombre de lignes) et "cols" (nombre de colonnes). Nous avons également vu 3 nouvelles valeurs pour l'attribut type d'un INPUT : - "button" : crée un bouton cliquable. On lui donne un nom au moyen de "name" et une valeur (qui sera le texte affiché sur ce bouton) avec "value". Les simples boutons n'ont pas un grand intérêt à première vue mais ils en auront beaucoup quand on leur affectera des actions via un JavaScript. - "checkbox" : crée une case à cocher. On peut bien entendu lui donner un nom et une valeur mais on peut aussi décider si elle doit être cochée ou non au chargement de la page. Si la case doit être cochée, il faut rajouter dans la balise le mot suivant : 'checked'. Par défaut une case n'est pas cochée. - "radio" : crée un bouton radio. Un bouton radio seul n'a pas un grand intérêt. En général, on en place plusieurs pour donner un choix aux visiteurs. Contrairement aux cases à cocher avec lesquelles on peut sélectionner plusiers valeurs, avec les boutons radio, on ne peut en choisir qu'une ! Quand on choisit une autre valeur, celle qui était sélectionnée ne l'est plus. ATTENTION : les boutons radios doivent avoir le même nom (via l'attibut "name") ! Pour sélectionner la valeur par défaut, comme pour les cases à cocher, il faut ajouter le mot 'checked' dans la balise du bouton par défaut. Les formulaires (2) Vous avez déjà surement vu dans des formulaires, des listes déroulantes, des cases à cocher et bien voici comment procéder. Formulaires Les boutons :

Les liste déroulantes :

Comment trouver ce tutorial jusqu'à présent :

Ou bien, on peut préciser le nombre de valeur à afficher :

L

votre psychiatre · Answer

il est bien ton message mais on n'a pas envie de lire c'est trop long pour répondre a ta question, avec notepad (compris dans windows) ou notepad++ téléchargeable directement sur le net tu peux enregistrer en html.

il y a un bon tuto pour la création de site : https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3

Enregistrer document texte en html

1 réponse

Votre réponse

Discussions similaires

Newsletters