Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

Le langage HTML L'HTML (HyperText Markup Language) est un ensemble de balises q

Le langage HTML L'HTML (HyperText Markup Language) est un ensemble de balises qui permet de créer des pages webs. 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) <XYZ> et (fermeture) </XYZ>. 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 : <HTML> <HEAD> <TITLE>Ma première page en HTML</TITLE> </HEAD> <BODY> Bonjour, voici ma première page web ! </BODY> </HTML> 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 : - <html> et </html> : 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. - <head> et </head> : 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 <html>. La seconde, referme l'entête de votre page (remarquez encore une fois le / devant le mot entre crochets). - <title> et </title> : 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. - <body> et </body> : 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 (=> </head>). 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). 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. <HTML> <HEAD> <TITLE>Les liens hypertextes</TITLE> </HEAD> <BODY>  On suppose que la page vers laquelle est faite le lien se trouve dans le même répertoire que la page en cours : <A href="page2.html">Lien vers la page 2</A> Si la page de destination est dans un sous-répertoire de celui de la page courante : <A href="sous_repertoire/page2.html">Lien vers une page dans le sous-répertoire nommé "sous_repertoire"</A> Si la page de destination se trouve dans autre répertoire de même niveau que celui de la page courante : <A href="../repertoire/page2.html">Lien vers une page dans un autre répertoire nommé "repertoire"</A>  <A href="http://www.un-site-externe.com">Lien vers un site externe</A>  <A href="#ancre1">Lien vers l'ancre 1</A>  <A name="ancre1">Texte</A>  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. <A href="http://www.un-autre-site.com/repertoire/fichier.html#nom_ancre">lien vers un ancre sur une page d'un site extérieure</A> </BODY> </HTML> 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 : Liste de balises Voici une liste des balises HTML les plus courantes avec leurs attributs les plus utilisés. Légende pour les balises de fin : • V => Obligatoire • X => Interdite • ? => Optionnelle (Même si certaines balises de fin sont optionnelles, il est quand même conseillé des les utiliser...) Nom Fonction Balise de fin  Permet de placer dans le code source d'une page des commentaires qui ne seront pas affichés dans le navigateur. V Attributs : / Exemple :  A Crée un lien hypertexte vers une autre page web ou vers un ancre. V Attributs : href, name, target Exemple : <a href="http://www.editeurjavascript.com" target="_blank">L'éditeurJavaScript</a> B Pour avoir du texte en gras. V Attributs : / Exemple : Texte en gras... BIG Augmente légèrement la taille du texte. V Attributs : / Exemple : <big>Texte un peu plus grand...</big> BLOCKQUOTE Applique un retrait à un texte. V Attributs : / Exemple : <blockquote>Texte qui sera en retrait...</blockquote> BODY Définit le corps (contenu affichable) de votre page web. Il doit venir juste après l'en- tête de la page HEAD. V Attributs : bgcolor, background, alink, link, vlink, text Exemple : <body>Contenu de votre page...</body> BR Ajoute un saut de ligne. X Attributs : / Exemple : Ligne1... Ligne2... CENTER Centre le texte. V Attributs : / Exemple : <center>Voici un texte centré</center> DIV Regroupe des éléments pour en contrôller la structure avec des feuilles de styles par exemple. V Attributs : id, class Exemple : <div class="menu">Contenu de votre menu</div> FONT Permet de mettre de modifier du texte (couleur, taille, police,...). V Attributs : color, face, size Exemple : Texte en taille 2 écrit en rouge avec la police Verdana FORM Permet de créer un formulaire. V Attributs : action, method, enctype, name, target Exemple : <form action="fichier.php" method="POST">vos champs input</form> H1 -> H6 Définit 6 niveaux pour les titres. Chaque niveau possède son propre style. V Attributs : align Exemple : <h1>Titre</h1> HEAD Définit l'en-tête de votre document. Ces informations ne seront pas affichées par le navigateur. V Attributs : / Exemple : <head>en-tête de la page(titre, méta, style, script,...)</head> HR Place une séparateur horizontal. X Attributs : align, size, width, color (seulement IE) Exemple : <hr size=2 width=250 align="center"> HTML Indique que le fichier est un document HMTL. V Attributs : / Exemple : <html>tout le code de votre page</html> I Met le texte en italique. V Attributs : / Exemple : texte en italique IMG Ajoute une image dans votre page. X Attributs : src, border, width, height, alt, align, hspace, vspace Exemple : <img src="image.gif" border=0 width=88 height=31 alt="Alternative"> INPUT uploads/Litterature/ le-langage-html 3 .pdf