Remerciez-le!

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

Ce support de cours contient quelques explications sur certains concepts de HTM

Ce support de cours contient quelques explications sur certains concepts de HTML en vigueur au programme en 1ère année BTS option IDA en Côte d’Ivoire. Il a été élaboré sur la base de supports de cours existants et de sources trouvées sur Internet. 2014 Support de cours Module XHTML/CSS 1ère Année BTS Informatique Développeur d’Application M. Benjamin GOGBE Support de cours Module HTML 1ère Année BTS Informatique Développeur d’Application TABLE DES MATIÈRES 1ère PARTIE : LE LANGAGE HTML INTRODUCTION...................................................................................................................- 3 - Chapitre I – NOTION DE BALISES.........................................................................................- 5 - Chapitre II – LES BALISES EN BLOC ET LES BALISES EN LIGNE..........................................- 11 - Chapitre IV – LES BALISES DE TABLEAU............................................................................- 16 - Chapitre V – LES BALISES D’IMAGE ET D’IMAGES-MAPS....................................................- 20 - Chapitre VI – LES BALISES DE FORMULAIRE......................................................................- 23 - Chapitre VII – LES BALISES DE CADRE...............................................................................- 28 - Chapitre VIII – LA BALISE D’HYPERLIEN.............................................................................- 30 - Chapitre IX – LES BALISES DE LISTE..................................................................................- 32 - Chapitre X – LES BALISES DE CONTENU EXECUTABLE.......................................................- 34 - 2ème PARTIE : LES FEUILLES DE STYLE OU CSS Chapitre XI – LES FEUILLES DE STYLE (CSS)......................................................................- 35 - Mini-PROJET:......................................................................................................................- 48 - M. GOGBE Benjamin – Professeur Développement Web 2 Support de cours Module HTML 1ère Année BTS Informatique Développeur d’Application INTRODUCTION Historique du langage HTML HTML (Hypertext Markup Language) est un langage de balisage qui permet de structurer le contenu des pages web. Conçu par Tim Berners-Lee en 1991, HTML1 est un langage basé sur le SGML (Standard Generalized Markup Language) : il s'agit en effet de présenter un contenu affichable non seulement par les ordinateurs classiques, mais également sans trop de dégradation par des terminaux mobiles (PDA : Personnal Digital Assistant, Smartphones, etc) bien moins puissants. (Wikipedia, 2011). Les versions successives de HTML sont HTML 1 en 1991, HTML 2 en 1994, HTML 3 en 1996 et HTML 4 en 1998. En 2000, le W3C lance la version XHTML qui est une variante plus rigoureuse du langage. Les premières spécifications du XHTML ont vus le jour en 2000 sous l’appellation XHTML 1.0. Un an plus tard, elle fut remplacée par la version 1.1. En 2009, le W3C lance une étude pour la version HTML 5. Le langage de styles CSS Parallèlement au HTML, le langage de mise en page et de mise en forme des pages web fut développé. Les différentes versions sont CSS 1 en 1996. Ensuite suivies les versions CSS 2.1 en 1998 et enfin la dernière version CSS3. L ’environnement de travail Pour créer des pages web avec XHTML et CSS, il faut disposer d’un environnement de travail adapté. Si en théorie, un simple éditeur de texte (tel que le Bloc Notes de Windows ou Emacs de Linux) peut suffire, en pratique, il existe des éditeurs plus élaborés permettant de gagner du temps. Les éditeurs visuels Avec ces éditeurs vous avez la possibilité de travailler graphiquement sur la page sans taper de code qui est généré automatiquement. L’on peut citer le plus connu est Dreamweaver, FrontPage (payant ou en version d’essai) et Nvu (libre et gratuit). Leur inconvénient est qu’ils rendent le développeur trop passif et le code généré est difficilement maitrisable (souvent problème de compatibilité avec les nouvelles spécifications). Les éditeurs classiques 1 Le langage HTML, qui a maintenant évolué vers le XHTML, fut inventé en 1991 par Tim Berners-Lee lorsqu’il travaillait au CERN de Genève (Centre Européen de Recherche Nucléaire). L’objectif était alors d’afficher des pages d’information ayant les propriétés suivantes : les pages étaient reliées entre elles par des liens hypertexte (ces liens sur lesquels, aujourd’hui, nous n’arrêtons pas de cliquer !) ;  ces documents devaient être lisibles sur tous les ordinateurs, quel que soit leur système d’exploitation : Windows, Unix, Mac OS, etc. (Drailard, 2008) M. GOGBE Benjamin – Professeur Développement Web 3 Support de cours Module HTML 1ère Année BTS Informatique Développeur d’Application Ils offrent des fonctions d’aide à la saisie. Souvent gratuits en téléchargement, ils servent surtout à la phase de création de la structure de base du document. On peut citer entre autres EditPlus, NotePad ++, PSPad, JEdit et bien d’autres pour Windows ; Espresso, Smultron, T extWrangler pour Macs et gEdit, Vim, Emacs, Kate. Vous trouverez une variété d’éditeur en faisant une recherche sur Google. Les navigateurs web Les navigateurs permettent de visualiser le contenu les pages web. Ils traduisent les codes HTML et CSS et présentent le résultat visuel à l’écran. Il existe de nombreux navigateurs parmi lesquels on peut citer : - Google Chrome - Mozilla FireFox - Internet Explorer - Safari - Opera Il existe des variantes de ces navigateurs pour les appareils mobiles comme les Smartphones. On peut citer : - Safari Mobile sur iPhone d’Apple - Chrome Mobile pour les appareils sous Android - Internet Explorer Mobile pour les appareils sous Windows Mobile Il est important de noter qu’il faut disposer de plusieurs navigateurs dans leurs dernières versions sur notre ordinateur afin de tester la conformité du code HTML et CSS des pages avec les dernières spécifications du langage. Fonctionnement d’un site web Figure 1 - Fonctionnement d'un site web statique Figure 2 - Fonctionnement d'un site web dynamique M. GOGBE Benjamin – Professeur Développement Web 4 Support de cours Module HTML 1ère Année BTS Informatique Développeur d’Application CHAPITRE I – NOTION DE BALISES Les différentes parties d’une page web (la structure) sont représentées dans le code HTML sous forme d’éléments constitués de balises. On parle alors de langage de balisage. Dans un langage de balisage, tout contenu, tels que les blocs de texte, les images, les tableaux, paragraphes et autres, doivent être renfermé dans un élément. La liste des éléments utilisables est clairement définie dans la DTD (Document Type Definition) qui dépend de la version du langage. La DTD contient les spécifications du langage qui sont établies par le W3C (World Wide Web Consortium), organisme de normalisation dans le domaine du web. I- LES BALISES Les balises HTML structurent le contenu du document, en délimitant les blocs qui seront amenés à contenir des paragraphes, des titres, différents types de médias (images, sons, vidéos), des contrôles de formulaires ou encore des liens hypertextes. Une balise débute par le signe « inférieur à », et finit par le signe « supérieur à » ; on parle aussi de chevrons. Sauf exception, elles fonctionnent par paires. Et à chaque balise ouvrante correspond sa balise fermante, débutant par les caractères </. Ces paires délimitent la portion de texte à laquelle elles s’appliquent. Syntaxe : <nombalise> Portion du document </nombalise> Exemple de balises : <strong>, <p>, <h1>, </h1>, </strong> Il peut arriver qu’une balise soit refermée immédiatement. On parle alors de « balise vide » ou de « balise simple ou encore orpheline ». Dans ce cas, pour marquer la fermeture de la balise, on utilise les caractères « /> ». Voici quelques balises dans ce cas sont : area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, wbr. Syntaxe : <nombalise /> Exemple de balise simple : <img src="photo.jpg" /> Un élément est l’ensemble composé d’une balise ouvrante, d’un contenu (du texte et/ou d’autres balises), et de la balise fermante correspondante. Exemple d’élément : <strong> texte à mettre en gras </strong> === T oute cette ligne représente un élément M. GOGBE Benjamin – Professeur Développement Web 5 Support de cours Module HTML 1ère Année BTS Informatique Développeur d’Application II- LES ATTRIBUTS Les attributs ou propriétés sont des caractéristiques qui permettent de personnaliser les balises. Ils définissent des options supplémentaires pour la balise. Les attributs sont toujours placés à l’intérieur la balise ouvrante. Leur valeur est toujours entourée d’apostrophes simples (') ou doubles ("). Syntaxe : <nombalise nomattribut="valeur"> Exemple : <h1 id="monTitre">Bienvenue sur le site web de GOBIS TRAINING</h1> <img src="images/photo.jpg" /> Dans l’exemple ci-dessus, l’élément 1 représente un titre de premier niveau <h1> possédant un attribut id de valeur monTitre. L ’élément 2 représente une image dont l’attribut src indique qu’il s’agit du fichier photo.jpg dans le dossier images. NB : Certains attributs sont devenus obsolètes avec l’avènement du CSS. Ce sont pour la plupart des attributs de mise en forme tels que : align, valign, color, bgcolor, border, face, width, height. III- IMBRICATION DES ELEMENTS Les éléments peuvent être imbriqués, à condition de respecter une certaine hiérarchie, et d’éviter de faire se chevaucher des balises ouvrantes et fermantes qui ne se correspondent pas. Bon exemple : <h2>Bienvenue chez T oto <strong>et moi</strong></h2> Mauvais exemple : <h2>Bienvenue chez T oto <strong>et moi</h2></strong> Dans cet exemple, nous avons un titre de niveau 2 dans lequel la portion de texte « et moi » est renforcé (en gras). Dans le bon exemple, la balise ouvrante <strong> se ferme à l’intérieur de l’élément défini par la balise <h2>. Les possibilités d’imbrications doivent répondre à des critères stricts qui définissent quels éléments peuvent en contenir d’autres, et quelles sont les conséquences en termes d’affichage ou de sémantique. Globalement, un élément de type bloc (bloc-level) peut contenir soit d’autres blocs et du contenu texte, soit uniquement des uploads/Litterature/ support-de-cours-module-xhtml-css.pdf