Formation au langage html

100 %
0 %
Information about Formation au langage html
Science-Technology

Published on June 7, 2007

Author: rocachristophe

Source: authorstream.com

Le langage « HTML »:  Le langage « HTML » Pour le réseau Point Cyb/PEL Animateur : Ludovic R. et Christophe R. Coordinateur : F.LAMBERT http://peldoc.oise-picarde.com/ Introduction:  Introduction Définition : Le langage HTML (HyperText Markup Language) est un langage permettant d’écrire des documents hypertexte pour le web. C’est un langage très simple, basé sur des balises (tag). Les balises servent à mettre en forme le texte, à réaliser des liens vers d’autres pages, à insérer des images, etc… Comment s’exécute l’HTML ? Les pages HTML et tous les documents diffusés sur Internet sont stockés sur des serveurs web (hébergeur) puis affichés par les navigateurs (IE, Firefox…). Les serveurs web les plus connus sont Apache et IIS Structure d’une page HTML:  Structure d’une page HTML Les Balises : Le HTML est un langage utilisant des balises pour structurer et mettre en forme une page web. Une balise représente une commande HTML, à réaliser le plus souvent sur du texte. Une balise est entourée des caractères &lt; et &gt;. Les balises sont invisibles à l’affichage de la page, mais elles permettent de modifier l’apparence du texte, ou de réaliser une action. La plupart des balises doivent êtres ouvertes et fermées (sauf pour &lt;br&gt;). Exemple : &lt;b&gt;un petit mot en gras&lt;/b&gt; : B comme Bold qui veut dire gras Les commandes HTML peuvent être écrites en minuscules ou en majuscules. Pour voir le code HTML d’un document : Menu Affichage – Code Source Structure d’une page HTML:  Structure d’une page HTML La structure de base : Un document HTML doit commencer par la balise &lt;HTML&gt; et se terminer par la balise fermante &lt;/HTML&gt;. Un document HTML est composé d’une en-tête (HEAD) et d’un corps (BODY). Dans le corps, on trouve tout simplement le contenu de la page. Dans l’en-tête, on trouve le titre (TITLE), les METATAGS, les scripts… L’extension d’un fichier rédigé en HTML doit être : .html ou .htm &lt;META NAME="DESCRIPTION" CONTENT=“blabla“&gt; Exemple de page HTML:  Exemple de page HTML &lt;html&gt; &lt;head&gt; &lt;title&gt;Ma premiere page web&lt;/title&gt; &lt;/head&gt; &lt;body&gt; Voila ma page avec du texte en &lt;b&gt;gras&lt;/b&gt; Voila un retour à la ligne &lt;/body&gt; &lt;/html&gt; Pour mettre en commentaires du texte : &lt;!--texte--&gt; Quiz n°1 Quelques balises de mise en forme:  Quelques balises de mise en forme Il est possible d’utiliser plusieurs balises pour un même élément. Les balises de la POLICE:  Les balises de la POLICE Il est possible d’utiliser une seul fois la balise FONT et de lui attribuer plusieurs ATTRIBUTS. Exemple : &lt;font size=2 face= “arial“ color= “blue“&gt; &lt;/font&gt; Alignement du texte:  Alignement du texte Le tag &lt;BLOCKQUOTE&gt;...&lt;/BLOCKQUOTE&gt; introduit une citation. Correspond « un peu » à la touche Tabulation (retrait vers la droite) Les tags &lt;SUB&gt;...&lt;/SUB&gt; et &lt;SUP&gt;...&lt;/SUP&gt; placent le texte respectivement en indice et en exposant. Pour aligner du texte, on peut utiliser l'attribut ALIGN ou le tag &lt;CENTER&gt;. Il existe une balise permettant d'aligner différents éléments. c'est le tag : &lt;DIV align=left&gt;...&lt;/DIV&gt; &lt;DIV align=center&gt;...&lt;/DIV&gt; &lt;DIV align=right&gt;...&lt;/DIV&gt; &lt;marquee&gt;…&lt;/marquee&gt; texte défilant &lt;blink&gt;…&lt;/blink&gt; texte clignotant (Firefox seulement) Quiz n°2 Les titres et les listes:  Les titres et les listes Entêtes [Titres] &lt;Hn&gt;&lt;/Hn&gt; avec n=1 à 6 Afficher une entête de niveau n et sauter une ligne Liste à puces &lt;UL&gt;&lt;/UL&gt;Afficher le texte sous forme d'une liste à puces. Avec comme attributs (circle : o, square : ▪, ou disc : •) Liste numérotée &lt;OL&gt;&lt;/OL&gt;Afficher le texte sous forme d'une liste ordonnée. Avec comme attributs (1, A, a, I, i) Elément de liste &lt;LI&gt;Voici un élément de la liste Attribut d’une liste à puces : &lt;ul type= “circle”&gt; ou &lt;ul circle&gt; Attribut d’une liste numérotée : &lt;ul type=A&gt; Les caractères spéciaux:  Les caractères spéciaux Selon la version du système d’exploitation et du navigateur, il faut utiliser un langage spécifique pour les accents, caractères spéciaux… Ils sont facilement repérable car ils commencent par le signe &amp; et se termine par un point virgule. Exemple : &amp;agrave; pour à Les tableaux:  Les tableaux La définition de la structure d’un tableau est tout à fait comparable à celle des listes. On définit une balise de début de tableau, puis on décrit le tableau ligne par ligne, et enfin on indique la balise de fin du tableau. Une cellule peut contenir toute sorte d’élément : texte, liste, image, liens hypertexte, formulaires… Les balises : &lt;table&gt; début du tableau &lt;tr&gt; une ligne du tableau &lt;/tr&gt; &lt;td&gt; une colonne &lt;/td&gt; &lt;/table&gt; fin du tableau Attributs de la balise <table>:  Attributs de la balise &lt;table&gt; Bordures et espacements : Border : épaisseur en pixels du cadre extérieur Cellpadding : espace autour du texte Cellspacing : espace entre les cellules Bordercolor : couleur des bordures Bgcolor : couleur de fond du tableau Alignements des cellules : Dans les balises &lt;tr&gt; et &lt;td&gt; on peut trouver les attributs : - VALIGN qui permet d’obtenir un alignement du texte dans le sens vertical (valeurs : TOP, BOTTOM, MIDDLE) - ALIGN qui permet d’obtenir un alignement horizontal (valeurs : RIGHT, LEFT, CENTER) PS : Chaque cellule peut avoir une couleur/bordure différente Exemple de tableau:  Exemple de tableau &lt;table border=“10” cellpading=“3” cellspadding=“20” bordercolor=blue bgcolor=“#00CCFF”&gt; &lt;tr&gt; &lt;td valign=“top” align=“center”&gt;coucou&lt;/td&gt; &lt;td&gt;Admirez le résultat&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Voila une deuxieme ligne&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; Quiz n°3 Les images:  Les images Pour insérer une image on utilise la balise IMG, en définissant le chemin de l’image avec l’attribut SRC=“…” Exemple : &lt;img src=“images/bienvenue.gif”&gt; ALIGN = définit la position (top, middle, bottom, left, right) La source de l’image : SRC = définit le chemin de l’image à insérer. Ce chemin peut être : - relatif (par rapport à la page), - absolu par rapport à la racine du site. - ou alors ce peut être son adresse internet (URL) Les images de fond avec l’attribut background dans la balise BODY : &lt;body background=“image de fond”&gt; … &lt;/body&gt; L’image de fond se répète pour remplir la page Les liens:  Les liens Les liens vers un autre site : &lt;a href=“http://unautresite.fr”&gt;texte ou image&lt;/a&gt; Les liens vers un document complet local (relatif ou absolu): &lt;a href= “accueil.html”&gt;texte ou image&lt;/a&gt; Les liens vers une partie du document : &lt;a name=“partie3”&gt;Texte&lt;/a&gt; = le point de branchement (non visible) &lt;a href=“#partie3&gt;texte du lien&lt;/a&gt; = le “#” renvoi au point On définit la cible d’un lien avec l’attribut TARGET : _blank : affichage dans une nouvelle fenêtre _self : dans la même fenêtre (par défault) _top : dans tout le navigateur &lt;a href="pel.jpg" target=_top&gt;&lt;img src="pelmini.jpg"&gt;&lt;/a&gt; Adresse e-mail : &lt;a href=mailto:email@fai.fr&gt;email&lt;/a&gt; (&amp;:pour plusieurs destinataires) Quiz n°4 et 5 Les frames:  Les frames Pour diviser l’écran on utilise les balises : &lt;Frameset&gt;&lt;/frameset&gt; remplace &lt;body&gt;&lt;/body&gt; Avec les attributs : rows = horizontales ou cols = verticales Ainsi que leurs pourcentages respectifs Puis on indique les pages vers lesquelles renvoit chaque frame : &lt;frame src="nom de la page.html"&gt; Les frames , l’attribut target:  Les frames , l’attribut target L'utilisation de l'attribut target permet de diriger l'ouverture d'un document cible vers une fenêtre déterminée du navigateur. L'attribut : target="Cadre cible" définit la fenêtre dans laquelle la page cible doit s'afficher. Valeurs possibles : Description _blank : Ouverture de la page cible dans une nouvelle fenêtre _self : Ouverture de la page cible dans le cadre hôte _top : Ouverture de la page cible dans la fenêtre hôte Nom du cadre : Ouverture de la page cible dans le cadre portant le nom cité Exemple : &lt;a href="adresse de la page cible" target="cadre cible"&gt;lien&lt;/a&gt; Exemple:  Exemple &lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;frameset rows="30%,70%"&gt; &lt;frame src="nom de la page1.html" "name=" haut"&gt; &lt;frame src="nom de la page2.html" "name=" bas"&gt; &lt;/frameset&gt; &lt;/html&gt;

Add a comment

Related presentations

Related pages

HTML formation - tutorial de formation a la programmation ...

HTML formation tutorial de formation au langage html. Comprenant d'abord une initiation facile a la programmation en html a destination du vrai debutant.
Read more

Html - Apprendre le langage Html - lehtml.com ...

Le langage Html utilisé pour la publication de sites Web expliqué pour les débutants
Read more

Le langage HTML : niveau débutant - Formation Ville de ...

Cours d'initiation au langage HTML - page 3 ... Cette partie non visible pour le visiteur contient des informations dont celles permettant aux moteurs de ...
Read more

Apprendre le langage Html - lehtml.com -- Publication Html ...

Apprendre le langage Html ... Notre objectif dans l'élaboration de cette formation consacrée à la création de pages Web et donc au langage Html a ...
Read more

Initiation au langage HTML - Initiation au langage HTML ...

Formation Ville de Bruxelles "Création d'un site internet en HTML et édition d'un site à l'aide d'un générateur blog" - Cours complet sur le langage ...
Read more

Hyper Text Markup Language - Cours HTML - SCSI - UNS

COURS LANGAGE HTML Hyper Text Markup Language Ce "Cours" est une aide à la création et à la modification de documents HTML. Ce n'est qu'un catalogue des ...
Read more

Europe Code Week - Formation au langage HTML/CSS (France)

Formation au langage HTML/CSS Organized by: voyageurs du Code. Contact email: voyageursducode@bibliosansfrontieres.org. Happening at: Montreuil, France
Read more

Accueil du site de formation en langage de programmation ...

Formation programmation propose des tutoriaux dans les principaux langage de programmation allant de l'html au php / mysql en passant par le javascript.
Read more

Cours HTML, Formation En XHTML Gratuit

Vous consultez la page Cours HTML, Formation En XHTML Gratuit. Voici 16 cours pour apprendre et se former au langage HTML. Apprenez simplement comment ...
Read more

Formation au langage SQL - Mistra - formation pour les ...

A la fin de cette formation, vous saurez comment construire et interroger efficacement une base de données SQL. Mistra est un organisme de formation pour ...
Read more