Remerciez-le!

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

Lasfar Langage HTLM ("Hyper Text Markup Language") lasfar@fsr.ac.ma Université

Lasfar Langage HTLM ("Hyper Text Markup Language") lasfar@fsr.ac.ma Université Mohammed V Faculté des Sciences Rabat – Agdal UFR SYSCOM 2 Lasfar Langage HTLM Langage HTLM Est le langage universel utilisé pour communiquer sur le Web. Lasfar Plan 1. Approche introductive au langage HTML 2. Réalisation d’un document HTML 3. Mise en page du document HTML Texte Paragraphe Tableau Liste Lien Image Frames 4. Résumé Lasfar 4 Historique Ce langage, créé par Berners Lee (créateur du Web), Ce langage est né dans sa première version en 1992, de manière concomitante avec d’autres techniques telles que le protocole HTTP, l’adresse URL, et les navigateurs. IL est issu d’un langage déjà existant : le langage SGML (Standard General Markup Language). Ce dernier permet(tait) d’effectuer des échanges de données informatiques (EDI) de manière structurée et complexe. Lasfar Grâce à HTML votre information sera transportée sur cette gigantesque toile de réseaux interconnectés qu'est Internet, pour aboutir sur l'ordinateur de votre lecteur grâce à un programme appelé navigateur ou browser. Lasfar Vous avez donc deux interlocuteurs : 1. éditeur de texte tout simple comme par exemple le Bloc-notes ou Notepad de Windows ou tout autre équivalent dans votre système d'exploitation tel que Vi ou Emacs sous UNIX . 2. browser soit Netscape Navigator , Microsoft Explorer , Claris Home Page, Frontpage de Microsoft, Hotdog, Hotmetal, WebExpert… Lasfar Les principes Les Balises Le HTML n'est pas un langage de programmation, c'est un simple fichier texte contenant des balises permettant de mettre en forme le texte, les images ... Une balise est une commande (un nom) encadrée par le caractère inférieur (<) et le caractère supérieur (>) par exemple ‘<H1>’. Lasfar Les principes Les Balises Lasfar 9 Les balises HTML peuvent disposer d'un certain nombre d'attributs paramétrables dans un format spécifique. Ces attributs sont insérés juste après le nom de la balise de début de style, et avant le signe ">" de fin de balise. Chaque attribut est suivi du caractère “=” et d’une valeur. Les principes Les attributs Lasfar 10 Les principes Les attributs Lasfar 1 Réalisation d’un document HTML Lasfar 1 La page HTML minimum Une page HTML est un simple fichier texte commençant par <HTML> et finissant par </HTML>. Il contient un en-tête décrivant le titre de la page, puis un corps dans lequel on place le contenu de la page L'en-tête est délimité par les balises <HEAD> et </HEAD> Le corps est délimité par les balises <BODY> et </BODY> Ainsi la page minimum sera: Lasfar 1 Exemple <HTML> <HEAD> <TITLE> Le titre </TITLE> </HEAD> <BODY> Contenu de votre page </BODY> </HTML> La page HTML minimum Lasfar 14 Voici vos premières balises ou tags <HTML> Ceci est le début d'un document de type HTML. </HTML> Ceci est la fin d'un document de type HTML. <HEAD> Ceci est le début de la zone d'en-tête(prologue au document proprement dit contenant des informations destinées au browser). </HEAD> Ceci est la fin de la zone d'en-tête. <TITLE> Ceci est le début du titre de la page. </TITLE> Ceci est la fin du titre de la page. <BODY> Ceci est le début du document proprement dit. </ BODY> Ceci est la fin du document proprement dit.l,m<,,l Lasfar 1 Premier document HTML Ouvrir l'éditeur de texte. Ecrire les codes Html suivants: Lasfar 1 Premier document HTML Enregistrer le document avec l'extension .html ou .htm. Lasfar 1 Ouvrir le navigateur. Afficher le document via le menu File/Open file... Admirer votre premier document Html. Premier document HTML Lasfar 1 Plan 1. Approche introductive au langage HTML 2. Réalisation d ’un document HTML 3. Mise en page du document HTML Texte Paragraphe Liste Lien Image Tableau Frames 4. Résumé Lasfar 19 Les Paragraphes (break rule) spécifie au navigateur un saut de ligne. est facultative. définit un paragraphe. Le navigateur interprète cette balise en effectuant un saut de ligne et un retour à la ligne. est obligatoire dans la mesure où le paragraphe court sur plus d'une ligne. <hr> (horizontal rule). Celle ci dessine une ligne de séparation horizontale et retourne à la ligne. La largeur du trait horizontal peut être fixée grâce à l'attribut width. </hr> est facultative. Lasfar 20 Voici un exemple avec deux paragraphes insérés après une ligne couvrant 75% de la largeur de la page: Les Paragraphes Lasfar 2 Voici le résultat : Hello world ! Premier paragraphe Second paragraphe Les Paragraphes Lasfar 2 Alignement des paragraphes On utilise la balise avec l’attribut align et l’une des trois valeurs suivantes left, center ou right. La valeur left est utilisée par défaut si l’attribut align est inutilisée. Lasfar 2 Exemple: Ce paragraphe est aligné sur le bord droit de la page Donne le résultat: Alignement des paragraphes Lasfar 24 Plan 1. Approche introductive au langage HTML 2. Réalisation d ’un document HTML 3. Mise en page du document HTML Texte Paragraphe Liste Lien Image Tableau Frames 4. Résumé Lasfar 2 Les textes quelques Balises élémentaires : Début et fin de zone en couleur [ Font color] Couleur de caractère Début et fin de zone avec cette taille … [Font size] Taille de caractère Début et fin de zone en italique … … [ Italic] Italique Début et fin de zone en gras … … [BOLD] Gras Lasfar 2 Centrer <CENTER></CENTER> [Center] Centrage Ne pas afficher  [ Comments] Commentaires Aller à la ligne [ line break] A la ligne Les textes quelques Balises élémentaires : Lasfar 2 Le texte Ouvrir l’éditeur texte : Lasfar 2 Ouvrir le Browser : Le texte Lasfar 29 Quelques commentaires s’ imposent Le texte tout simple s'écrit sans balises. Il sera repris par le browser avec la police et taille de caractères choisies dans sa configuration par défaut. Lasfar 0 Le browser ne tient compte que d'un seul espace entre les mots. Ainsi pour lui : texte en bleu est équivalent à: texte en bleu Quelques commentaires s’ imposent Lasfar Il n'est pas rare d'utiliser plusieurs balises pour un même élément de texte. Il faut veiller à bien les imbriquer. Ainsi ... est correct et ... risque de vous créer des ennuis. Quelques commentaires s’ imposent Lasfar La taille dans peut être indiquée de deux façons : 1. avec un nombre de 1 à 7. La valeur par défaut étant 3 2. de façon relative par rapport à la valeur par défaut (ici 0). Soit -3 -2 -1 0 +1 +2 +3. Quelques commentaires s’ imposent Lasfar Plan 1. Approche introductive au langage HTML 2. Réalisation d ’un document HTML 3. Mise en page du document HTML Texte Paragraphe Liste Lien Image Tableau Frames 4. Résumé Lasfar 4 Les listes Une liste est un paragraphe structuré contenant une suite d'articles. Il en existe trois types: Ordonnée Non ordonnée De définition Lasfar ●article1 ●article2 ●article3 Non ordonnée <ul> <li> article1 </li> <li> article2 </li> </ul> 1. article1 2. article2 3. article3 Ordonnée <ol> <li> article1 </li> <li> article2 </li> <li> article3 </li> </ol> Effet visuels Type de liste Contenue Les listes Lasfar 1.article1 définition1 2. article2 définition2 De définition <di> <dt>terme</dt> <dd>definition</dd> </di> Les listes Lasfar Lasfar Lasfar 9 Plan 1. Approche introductive au langage HTML 2. Réalisation d ’un document HTML 3. Mise en page du document HTML Texte Paragraphe Liste Lien Image Tableau Frames 4. Résumé Lasfar 40 Les Liens Html est un langage hypertexte (et hypergraphique) qui vous permet en cliquant sur un mot, généralement souligné (ou une image) de vous transporter : vers un autre endroit du document. vers un autre fichier html situé sur votre ordinateur. vers un autre ordinateur situé sur le Web. Lasfar 4 La syntaxe de ces liens entre plusieurs pages, est simple : <A HREF="URL ou adresse">...</A> Les Liens Lasfar 4 Exemple - Dans l'éditeur de texte, nous allons créer deux fichiers Htlm. le fichier 1.htm: <A HREF="2.HTM">Aller vers le document 2</A> le fichier 2.htm: <A HREF="1.HTM">Retour au document 1</A> Lasfar 4 Exemple - On sauve ces deux fichiers dans un même répertoire. Lasfar 44 Exemple Le browser vous affichera : Lasfar 4 Les ancres Des liens peuvent aussi pointer vers un endroit précis du même document ou d'un autre fichier. C'est ce qu'on appelle les ancres, ancrages ou pointeurs Lasfar 4 Point <A NAME="***">...</A> Ceci est une d'ancrage cible Lien vers une <A HREF="#***">...</A> Lien vers la ancre dans la cible *** dans la même page même page Lien vers une ancre <A HREF="URL#***">...</A> Lien vers la dans une autre page cible *** dans une page Les ancres Lasfar 4 Plan 1. Approche introductive au langage HTML 2. Réalisation d ’un document HTML 3. Mise en page du document HTML Texte Paragraphe uploads/Litterature/ html-5-methode.pdf