Concepts avancés sur le langage HTML

Documents pareils
Formation HTML / CSS. ar dionoea

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP

Bernard Lecomte. Débuter avec HTML

TD HTML AVEC CORRECTION

HTML, CSS, JS et CGI. Elanore Elessar Dimar

LES GRANDES ETAPES DE CREATION D UN WEB DESIGN

Un mini-site internet en une après-midi

Guide de réalisation d une campagne marketing

Introduction à Expression Web 2

TP JAVASCRIPT OMI4 TP5 SRC

Initiation à html et à la création d'un site web

Séance d ED n 5 : HTML et JavaScript

.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15

Utilisation de l éditeur.

Les outils de création de sites web

CREATION d UN SITE WEB (INTRODUCTION)

Creation d une page Web

Tutoriel : Feuille de style externe

TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web

// HTML, Javascript XHTML & CSS

ING & NEWSLETTER NEWSLETTER RESPONSIVE

Présentation du Framework BootstrapTwitter

Sana Sellami. Licence Professionnelle SIL

Attaques de type. Brandon Petty

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.

Normes techniques 2011

HTML. Notions générales

Les services usuels de l Internet

FORMATION / CREATION DE SITE WEB / 4 JOURNEES Sessions Octobre 2006

3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML

Introduction. PHP = Personal Home Pages ou PHP Hypertext Preprocessor. Langage de script interprété (non compilé)

Activités HTML. Code: act-html

MODULE INF112. Préparation pour le CC2

1 ère Université WEB. Courbevoie Samedi 21 octobre Votre site interactif sur internet.

Apprendre le langage Html

Pack Fifty+ Normes Techniques 2013

Formulaire pour envoyer un mail

RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado

Optimiser pour les appareils mobiles

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN ING

Formation tableur niveau 1 (Excel 2013)

Programmation Internet Cours 4

Internet. DNS World Wide Web. Divers. Mécanismes de base Exécution d'applications sur le web. Proxy, fire-wall

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org

Dans nos locaux au 98 Route de Sauve NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur

02/02/2011. test 1. Communication visuelle & web. Pao. Principes fondamentaux. Les six principes de base. La mise en page. Module sur trois journées

Autour du web. Une introduction technique Première partie : HTML. Georges-André SILBER Centre de recherche en informatique MINES ParisTech

Alors "Web" c'est le service Internet permettant de naviguer à travers des pages Web.

Module BD et sites WEB

Sage 100 CRM - Guide de la Fusion Avancée Version 8. Mise à jour : 2015 version 8

INTRODUCTION AU CMS MODX

SUPPORT DE COURS / HTML

Les réseaux informatiques, la sécurité, internet, html et le web : une introduction. Réseaux informatiques? Un bref historique des réseaux (1)

Optimiser les s marketing Les points essentiels

NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web

Prise en main rapide

LANGAGUE JAVA. Public Développeurs souhaitant étendre leur panel de langages de programmation

mon site web via WordPress

STID 2ème année : TP Web/PHP

MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4

Atelier de Création de pages Web

Malgré son aspect spartiate, Freeplane offre de nombreuses fonctionnalités en particulier dans le domaine de la diffusion des cartes sur le Web.

Installation d un serveur HTTP (Hypertext Transfer Protocol) sous Débian 6

Document Object Model (DOM)

Parcours guidé : créer des pages simples au format html avec Nvu 28/1/10

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)

RESPONSIVE WEB DESIGN

L envoi d un formulaire par courriel. Configuration requise Mail Texte Mail HTML Check-list

SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE

BUREAUTIQUE. 1 Journée. Maîtriser les fonctions de base du logiciel

Spécificités Techniques créations publicitaires

Création de site Web : Volet II concevoir et mettre un site en ligne

Travaux dirigés n 10

GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL

Création de formulaires interactifs

{less} Guide de démarrage

Comment insérer une image de fond?

CMS Modules Dynamiques - Manuel Utilisateur

Programmation Web. Madalina Croitoru IUT Montpellier

HTML/CSS - Travaux Pratiques 2

Transfert de fichiers (ftp) avec dreamweaver cs5 hébergement et nom de domaine. MC Benveniste

WORDPRESS : réaliser un site web

RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite?

Groupe Eyrolles, 2003, ISBN : X

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais :

Rapport de projet Site web pour une association

FrontPage Support d apprentissage septembre 2000

<Créer un site Web. avec/> Suzanne Harvey

Langage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv>

Notes pour l utilisation d Expression Web

Évaluation des compétences. Identification du contenu des évaluations. Septembre 2014

GUIDE D UTILISATION DU BACKOFFICE

PARAMETRAGE CONSOLE ADMINISTRATION DE MESSAGERIE "VENDOME.EU" NOTICE UTILISATION

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?

Manuel d utilisation du module Liste de cadeaux PRO par Alize Web

Gestion d identités PSL Exploitation IdP Authentic

Gestion Électronique de Documents et XML. Master 2 TSM

MAÎTRISE DE L ENVIRONNEMENT WINDOWS VISTA

Transcription:

Concepts avancés sur le langage HTML Nouvelles Technologies Thé Van LUONG the-van.luong@heig-vd.ch mistic.heig-vd.ch/luong Université de Nice-Sophia Antipolis 1/76 ()

Plan 1 Conventions HTML 2 Balises HTML élémentaires 3 Balises HTML élaborées 2/76 ()

Plan 1 Conventions HTML 2 Balises HTML élémentaires 3 Balises HTML élaborées 2/76 ()

Plan 1 Conventions HTML 2 Balises HTML élémentaires 3 Balises HTML élaborées 2/76 ()

Plan 1 Conventions HTML 2 Balises HTML élémentaires 3 Balises HTML élaborées 3/76 () Conventions HTML

Conventions HTML Rappels Programmation orientée internet Le langage HTML est un des paradigmes de la programmation web (CSS, Javascript, PHP... ). Langage HTML = Langage à balises Le langage utilise des balises qui sont interprétées par le navigateur internet (Internet Explorer, Mozilla, Safari, KDE Explorer... ). 4/76 () Conventions HTML

Conventions HTML Rappels Programmation orientée internet Le langage HTML est un des paradigmes de la programmation web (CSS, Javascript, PHP... ). Langage HTML = Langage à balises Le langage utilise des balises qui sont interprétées par le navigateur internet (Internet Explorer, Mozilla, Safari, KDE Explorer... ). 4/76 () Conventions HTML

Conventions HTML Document minimal <html> <head> </head> <body> </body> </html> 5/76 () Conventions HTML

Conventions HTML Balises de structures du document 1 La balise <html>. Tout page HTML doit débuter par <html> et se finir par </html>. Cette balise définit le type du document. 2 La balise <head>. Il s agit de l entête du document HTML. On peut y ajouter des informations diverses (exemple CSS ou Javascript). 3 La balise <body>. Il s agit du corps du document. C est ici que l on va mettre tout le contenu du document. 6/76 () Conventions HTML

Conventions HTML Balises de structures du document 1 La balise <html>. Tout page HTML doit débuter par <html> et se finir par </html>. Cette balise définit le type du document. 2 La balise <head>. Il s agit de l entête du document HTML. On peut y ajouter des informations diverses (exemple CSS ou Javascript). 3 La balise <body>. Il s agit du corps du document. C est ici que l on va mettre tout le contenu du document. 6/76 () Conventions HTML

Conventions HTML Balises de structures du document 1 La balise <html>. Tout page HTML doit débuter par <html> et se finir par </html>. Cette balise définit le type du document. 2 La balise <head>. Il s agit de l entête du document HTML. On peut y ajouter des informations diverses (exemple CSS ou Javascript). 3 La balise <body>. Il s agit du corps du document. C est ici que l on va mettre tout le contenu du document. 6/76 () Conventions HTML

Conventions HTML Caractéristique principale d une balise Règle syntaxique Toute balise s ouvre et se ferme. 7/76 () Conventions HTML

Conventions HTML Caractéristique principale d une balise Exemple de balise <b> La partie gauche marque l ouverture, la partie droite marque la fermeture </b> 8/76 () Conventions HTML

Conventions HTML Deux types de balises Deux genres de balises 1 Celles où il y a du texte entre l ouverture et la fermeture de la balise. 2 Celles où il n y a pas de texte entre l ouverture et la fermeture de la balise. 9/76 () Conventions HTML

Conventions HTML Deux types de balises Exemple de balise contenant du texte <i> Ici du texte en italique </i> Exemple de balise ne contenant pas du texte <p></p> 10/76 () Conventions HTML

Conventions HTML Interprétation du navigateur Point important Il faut bien comprendre que chaque navigateur a sa propre manière d interpréter le code HTML. Résultats différents Tout bout de code «bizarre»sera interprété différemment selon le navigateur internet. 11/76 () Conventions HTML

Conventions HTML Interprétation du navigateur Point important Il faut bien comprendre que chaque navigateur a sa propre manière d interpréter le code HTML. Résultats différents Tout bout de code «bizarre»sera interprété différemment selon le navigateur internet. 11/76 () Conventions HTML

Conventions HTML Interprétation du navigateur Point important Il faut bien comprendre que chaque navigateur a sa propre manière d interpréter le code HTML. Résultats différents Tout bout de code «bizarre»sera interprété différemment selon le navigateur internet. Exemple de code «bizarre» <br>on met du texte entre un retour à la ligne</br>. On ne sait pas ce que peut donner ce bout de code sur Internet Explorer, Mozilla, Safari, Epiphany... 11/76 () Conventions HTML

Conventions HTML Interprétation du navigateur Point important Il faut bien comprendre que chaque navigateur a sa propre manière d interpréter le code HTML. Résultats différents Tout bout de code «bizarre»sera interprété différemment selon le navigateur internet. Conventions Il est donc primordial de respecter les conventions de structure. 11/76 () Conventions HTML

Conventions HTML Convention Pour les balises ne contenant pas de texte entre l ouverture et la fermeture : Résultat imprévisible <p> du texte </p> Résultat qui marche dans la plupart des navigateurs <p> OK <p></p> Bien conventionnel <p /> 12/76 () Conventions HTML

Conventions HTML Convention Pour les balises ne contenant pas de texte entre l ouverture et la fermeture : Résultat imprévisible <p> du texte </p> Résultat qui marche dans la plupart des navigateurs <p> OK <p></p> Bien conventionnel <p /> 12/76 () Conventions HTML

Conventions HTML Convention Pour les balises ne contenant pas de texte entre l ouverture et la fermeture : Résultat imprévisible <p> du texte </p> Résultat qui marche dans la plupart des navigateurs <p> OK <p></p> Bien conventionnel <p /> 12/76 () Conventions HTML

Conventions HTML Convention Pour les balises ne contenant pas de texte entre l ouverture et la fermeture : Résultat imprévisible <p> du texte </p> Résultat qui marche dans la plupart des navigateurs <p> OK <p></p> Bien conventionnel <p /> 12/76 () Conventions HTML

Conventions HTML Convention de fermeture Convention Pour les balises ne contenant pas de texte, on devrait toujours utiliser cette convention. <p />, <hr />, <br />, <img src="image.jpg" />,.... 13/76 () Conventions HTML

Conventions HTML Attributs Notion d attributs Certaines balises possèdent des attributs. Il y a des balises qui ont des attributs obligatoires, d autres qui ont des attributs facultatifs. <balise attribut1="valeur1" attribut2="valeur2" etc...>...</balise>. Exemple d attribut facultatif <body bgcolor="red">... </body> Exemple d attributs facultatifs <body bgcolor="red" text="yellow">... </body> Exemple d attribut obligatoire <img src="mesimages/lettre.jpg" /> 14/76 () Conventions HTML

Conventions HTML Attributs Notion d attributs Certaines balises possèdent des attributs. Il y a des balises qui ont des attributs obligatoires, d autres qui ont des attributs facultatifs. <balise attribut1="valeur1" attribut2="valeur2" etc...>...</balise>. Exemple d attribut facultatif <body bgcolor="red">... </body> Exemple d attributs facultatifs <body bgcolor="red" text="yellow">... </body> Exemple d attribut obligatoire <img src="mesimages/lettre.jpg" /> 14/76 () Conventions HTML

Conventions HTML Attributs Notion d attributs Certaines balises possèdent des attributs. Il y a des balises qui ont des attributs obligatoires, d autres qui ont des attributs facultatifs. <balise attribut1="valeur1" attribut2="valeur2" etc...>...</balise>. Exemple d attribut facultatif <body bgcolor="red">... </body> Exemple d attributs facultatifs <body bgcolor="red" text="yellow">... </body> Exemple d attribut obligatoire <img src="mesimages/lettre.jpg" /> 14/76 () Conventions HTML

Conventions HTML Attributs Notion d attributs Certaines balises possèdent des attributs. Il y a des balises qui ont des attributs obligatoires, d autres qui ont des attributs facultatifs. <balise attribut1="valeur1" attribut2="valeur2" etc...>...</balise>. Exemple d attribut facultatif <body bgcolor="red">... </body> Exemple d attributs facultatifs <body bgcolor="red" text="yellow">... </body> Exemple d attribut obligatoire <img src="mesimages/lettre.jpg" /> 14/76 () Conventions HTML

Conventions HTML Attributs Respect convention Encore une fois, le fait de ne pas mettre les guillemets aux valeurs des attributs peut marcher. Mais ce n est pas conventionnel, et cela peut ne pas toujours marcher suivant le navigateur internet. 15/76 () Conventions HTML

Conventions HTML Caractères unicode Caractères Unicode dans HTML É &#0201 ; È &#0200 ; Ê &#0202 ; À &#0192 ; Ç &#0199 ; Î &#0206 ; Çà et là.< br /> À travers le voile. <br /> Énumérer les éléments. 16/76 () Conventions HTML

Conventions HTML Caractères unicode Caractères unicode Caractères Unicode dans HTML É &#0201 ; È &#0200 ; Ê &#0202 ; À &#0192 ; Ç &#0199 ; Î &#0206 ; Les caractères unicode sont universels et peuvent être utilisés dans beaucoup d applications logiciels (word, Subtitle Workshop... ), par ALT code_unicode_4_chiffres. 17/76 () Conventions HTML

Plan 1 Conventions HTML 2 Balises HTML élémentaires 3 Balises HTML élaborées 18/76 () Balises HTML élémentaires

Balises HTML élémentaires Balises de texte Gras <b>...</b> pour mettre du texte en gras. <b>du texte en gras </b> 19/76 () Balises HTML élémentaires

Balises HTML élémentaires Balises de texte Italique <i>...</i> pour mettre du texte en italique <i >Du texte en italique </i > 20/76 () Balises HTML élémentaires

Balises HTML élémentaires Balises de texte Balise <font> <font>...<font> spécifie une balise de texte. Elle doit avoir un attribut : color="..." pour spécifier une couleur. size="..." pour spécifier une taille. <font size="30">du texte en police 30</font> et du texte normal. 21/76 () Balises HTML élémentaires

Balises HTML élémentaires Balises de texte <font color="red">du texte en rouge</font> et du texte normal. 22/76 () Balises HTML élémentaires

Balises HTML élémentaires Balises de texte Dans les balises utilisant un attribut de couleurs, on peut : Soit spécifier la valeur de la couleur en anglais. Soit spécifier la valeur de la couleur en hexadécimale (]6chiffres). 23/76 () Balises HTML élémentaires

Balises HTML élémentaires Balises de texte Centrer du texte <center>...</center> pour centrer des éléments (texte, images,... ). <center> <font size="15"> du texte centré de t a i l l e 15 </ font > </ center > <font size="20" color="#0000ff"> du texte non centré de t a i l l e 20 et de couleur bleue </ font > 24/76 () Balises HTML élémentaires

Balises HTML élémentaires Balises de texte FIG.: Autres balises <big>...</big> Taille du texte plus grande <small>...</small> Taille du texte plus petite <strike>...</strike> Texte rayé <u>...</u> Texte souligné <tt>...</tt> Texte formaté genre courrier <strong>...</strong> Texte plus gras <sup>...</sup> Place le texte en exposant <sub>...</sub> Place le texte en indice 25/76 () Balises HTML élémentaires

Balises HTML élémentaires Balises de texte <big>texte un peu plus gros </big><br /> texte normal<br /> <small>texte un peu plus petit </small> <p / > 26/76 () Balises HTML élémentaires

Balises HTML élémentaires Balises de texte <strike >texte barré </strike ><br /> <u> texte souligné </u><br / > <tt >texte formaté (machine à écrire)</tt > <br /> <strong>texte plus gras </strong> <p / > 27/76 () Balises HTML élémentaires

Balises HTML élémentaires Balises de texte 1<sup>er </sup> degré<br / > C<sub >1 </ sub> + C<sub >2 </ sub> 28/76 () Balises HTML élémentaires

Balises HTML élémentaires Balises de séparation Saut de ligne <p /> pour sauter une ligne. Une première phrase <p / > La deuxième phrase après avoir sauté une ligne 29/76 () Balises HTML élémentaires

Balises HTML élémentaires Balises de séparation Retour à la ligne <br /> pour aller à la ligne. Une première phrase <br /> La deuxième phrase à la ligne 30/76 () Balises HTML élémentaires

Balises HTML élémentaires Balises de séparation Tracer une ligne <hr /> pour tracer une ligne horizontale. Attributs size="nbpixels". Epaisseur du trait où nbpixels décrit un nombre de pixels. width="nombre". Longueur du trait où nombre peut être un nombre de pixels, ou un pourcentage. color="couleurs". 31/76 () Balises HTML élémentaires

Balises HTML élémentaires Balises de séparation Une première phrase <hr size="10" width="70%" color="red" /> Une deuxième phrase 32/76 () Balises HTML élémentaires

Balises HTML élémentaires Listes d éléments Liste à puces Une liste à puce est délimitée par les balises <ul> et </ul>. Chaque élément de la liste est délimité par <li> et </li>. Attribut de <ul> type="valeur" où valeur peut prendre la valeur {disc,circle,square} 33/76 () Balises HTML élémentaires

Balises HTML élémentaires Listes d éléments <ul type="square"> <li > Elément 1 </li > <li > Elément 2 </li > <li > Elément 3 </li > </ul > 34/76 () Balises HTML élémentaires

Balises HTML élémentaires Listes d éléments Liste numérotée Une liste numérotée est délimitée par les balises <ol> et </ol>. Chaque élément de la liste est délimité par <li> et </li>. Attributs de <ol> type="valeur" où valeur peut prendre la valeur {1,a,A,i,I}. start="nombre" permet de commencer la numérotation à partir d un certain nombre. Attributs de <li> value="nombre" permet d assigner la numérotation à partir d un certain nombre. 35/76 () Balises HTML élémentaires

Balises HTML élémentaires Listes d éléments <ol type="a" start="5"> <li > Elément 1 commençant par la 5ème lettre de l alphabet </ l i > <li > Elément 2 </li > <li value="2"> Elément 3 où on réordonne la numérotation (on la fait repartir par la seconde lettre)</li > <li > Elément 4 </li > </ol > 36/76 () Balises HTML élémentaires

Balises HTML élémentaires Listes d éléments Liste de tabulations Il est possible de définir des listes spéciales, permettant de faire des glossaires. On utilise les balises <dl> et </dl> pour encadrer la liste, <dt> pour spécifier un élément et <dd> pour indiquer sa définition. <dl> <dt> HTML <dd>hypertext Markup Language</dd> </dt> <dt> HTTP <dd>hypertext Transfert Protocol </dd> </dt> </dl > 37/76 () Balises HTML élémentaires

Balises HTML élémentaires Titres Titres hn Les balises <hn>...</hn> (où n 2{1, 2,...,6}) présentent différents niveaux de titres au document. <h1> <strong>séance 1: </strong> Test de niveau </h1> <h2><u> I ntroduction au cours de Nouvelle Technologies </u></h2> <strong>support de cours </strong> <ul><a href="cours1. pdf">cours 1</a></ul> <h2>test de niveau </h2> <strong>support de travail </strong> 38/76 () Balises HTML élémentaires

Balises HTML élémentaires Titres 39/76 () Balises HTML élémentaires

Plan 1 Conventions HTML 2 Balises HTML élémentaires 3 Balises HTML élaborées 40/76 () Balises HTML élaborées

Balises HTML élaborées Notion de chemin Pour illustrer les concepts de fichiers, de répertoires et d emplacements, on va utiliser la notion d arborescence de fichiers. 41/76 () Balises HTML élaborées

Balises HTML élaborées Notion de chemin Racine :C: Répertoires : Document And Settings, Administrateur, van, Desktop, HTML Fichiers : Im.gif, UnePage.html, MonFichier.html, Image1.jpg, MonFichier2.html, Image2.jpg () Balises HTML élaborées 41/76

Balises HTML élaborées Notion de chemin Père : Desktop est le père de MonFichier.html, Image1.jpg et de HTML. Fils : MonFichier2.html est le fils de HTML Frère : MonFichier.html est le frère de Image1.jpg et de HTML. 41/76 () Balises HTML élaborées

Balises HTML élaborées Notion de chemin Notion de chemin absolu Le chemin absolu du fichier Image2.jpg serait : C :\Documents And Settings\van\Desktop\HTML\Image2.jpg 41/76 () Balises HTML élaborées

Balises HTML élaborées Notion de chemin Notion de chemin relatif Dans le cadre d arborescence de fichiers sur internet, on s interessera plutôt à la notion de chemin relatif. 41/76 () Balises HTML élaborées

Balises HTML élaborées Notion de chemin Arborescence descendante À partir de MonFichier.html, on peut atteindre Image2.jpg par : HTML/Image2.jpg 41/76 () Balises HTML élaborées

Balises HTML élaborées Notion de chemin Arborescence descendante À partir de UnePage.html, on peut atteindre MonFichier2.html par : Desktop/HTML/MonFichier2.html 41/76 () Balises HTML élaborées

Balises HTML élaborées Notion de chemin Arborescence ascendante À partir de MonFichier2.html, on peut atteindre Image1.jpg par :../Image1.jpg 41/76 () Balises HTML élaborées

Balises HTML élaborées Notion de chemin Arborescence ascendante À partir de MonFichier2.html, on peut atteindre UnePage.html par :../../UnePage.html 41/76 () Balises HTML élaborées

Balises HTML élaborées Notion de chemin Arborescence au même niveau À partir de MonFichier.html, on peut atteindre Image1.jpg par : Image1.jpg 41/76 () Balises HTML élaborées

Balises HTML élaborées Insertion d images Balise <img /> <img src="adresse de l image" /> affiche l image qui se trouve à une certaine adresse. L adresse peut être une simple adresse internet ou bien un chemin relatif. 42/76 () Balises HTML élaborées

Balises HTML élaborées Insertion d images Le logo de l u n i v e r s i t é <img src =" http :// portail.unice. fr / inc /img/logo_unice. gif " border="2" align =" left " /> de nice 43/76 () Balises HTML élaborées

Balises HTML élaborées Insertion d images <img src = ".. /www/ Taylor. jpg " width ="320" height="240" /> 44/76 () Balises HTML élaborées

Balises HTML élaborées Liens Lien <a href="adresse">...</a> définit un lien (point cliquable menant à une adresse.) <a href =" http : / /www. unice. f r "> <img src ="unsa. png " / > 45/76 () Balises HTML élaborées

Balises HTML élaborées Liens <strong>cours sur les processeurs et les périphériques </strong > <ul> <li ><a href="cours4.pdf">cours processeurs </a></li > </ul > <strong>introduction au langage HTML</strong> <ul> <li ><a href="cours5.pdf">intro HTML</a></li > </ul > 46/76 () Balises HTML élaborées

Balises HTML élaborées Ancres Ancre <a name="nom">...</a> définit un point de la page. Référence <a href="#nom">...</a> définit un lien cliquable qui mène à un point défini. <a href ="# point1 "> Section 1 </a><br / > <a href ="# point2 "> Section 2 </a><br / > <a href ="# point3 "> Section 3 </a><br / > <a href ="# point4 "> Section 4 </a><br / >... blabla... <h2><a name=" point1 "> Section 1 </a></h2>... blabla... 47/76 () Balises HTML élaborées

() Balises HTML élaborées 48/76

Balises HTML élaborées Body La balise <body>...</body> en plus d être la balise du corps du document peut contenir des attributs. Exemple d attributs text="couleur" pour choisir la couleur du texte par défaut. bgcolor="couleur" pour choisir une couleur à l arrière plan. background="adresse" pour mettre une image en arrière plan. 49/76 () Balises HTML élaborées

Balises HTML élaborées Body <body text ="red " background="top down. jpg " > <h1>du texte dedans. </ h1> </body> 50/76 () Balises HTML élaborées

Balises HTML élaborées Head La balise <head>...</head> contient toutes les informations qui apparaissent hors du document. Title <title>...</title> permet de mettre un titre à la fenêtre. <head> <title > un titre!!!!!!!!!!!!!!!!!! </title > </head> 51/76 () Balises HTML élaborées

Balises HTML élaborées Head et Javascript Javascript <script>...</script> permet d inclure du Javascript. <head> <script type="text / javascript"> function Factorielle (nombre){ var calcul = 1; while (nombre >= 1){ calcul = calcul nombre ; nombre = nombre 1; } return calcul ; } </ script > </head> 52/76 () Balises HTML élaborées

Balises HTML élaborées Head Link <link /> permet de spécifier les documents liés à celui en cours de consultation. Listing 1 Inclusion d une feuille de style CSS <head> <link href ="../www/ style.css" rel="stylesheet" type=" text / css"/ > </head> 53/76 () Balises HTML élaborées

Balises HTML élaborées Tableaux HTML permet d utiliser une structure de tableaux comme dans Word. Définition du tableau Définition d une ligne Définition d une cellule <table>...</table> <tr>...</tr> <td>...</td> 54/76 () Balises HTML élaborées

<table border="1"> <tr > <td>la cellule 1</td> <td>la cellule 2</td> </ tr > <tr > <td>la cellule 3</td> <td ></td> <td>la cellule 4</td> </ tr > </table > 55/76 () Balises HTML élaborées

Balises HTML élaborées Tableaux Cellule <td>...</td> On peut mettre ce que l on veut dans une cellule <td>...</td> (texte, image,... ) 56/76 () Balises HTML élaborées

<table border="1"> <tr > <td>la cellule 1</td> <td>la cellule 2</td> </ tr > <tr > <td>la cellule 3</td> <td><img src="rymon. jpg "/ > </td> </ tr > </table > 57/76 () Balises HTML élaborées

Balises HTML élaborées Tableaux Attribut colspan <td>...</td> <td colspan="nombre">...</td> permet de fusionner la cellule avec un nombre de colonnes. <table border="1"> <tr > <td>la cellule 1</td> <td align="center" colspan="2">la cellule 2</td> </tr > <tr > <td>la cellule 3</td> <td>la cellule 5</td> <td>la cellule 6</td> </ tr > </table > 58/76 () Balises HTML élaborées

Balises HTML élaborées Tableaux Attribut width de <td>...</td> <td width="pourcentage">...</td> permet spécifier la taille de la cellule par rapport à la largeur du tableau. <table border="1" > <tr > <td>la cellule 1</td> <td>la cellule 2</td> </ tr > <tr > <td width="75%">la cellule 3</td> <td>la cellule 4</td> </ tr > </table > 59/76 () Balises HTML élaborées

Balises HTML élaborées Tableaux Attribut d alignement de <td>...</td> <td align="left right center">...</td> permet d aligner du texte dans une cellule. Attribut d alignement de <td>...</td> <td valign="top middle bottom">...</td> permet d aligner verticalement du texte dans une cellule. 60/76 () Balises HTML élaborées

Balises HTML élaborées Tableaux <table border="1" > <tr > <td>la cellule 1</td> <td rowspan="2" valign="bottom">la cellule 2</td> <td colspan="2" align=" right">la cellule 5 </td> </tr > <tr > <td>la cellule 3</td> <td>la cellule 4</td> <td>la cellule 6</td ></tr > </table > 61/76 () Balises HTML élaborées

Balises HTML élaborées Tableaux Quelques attributs de <table>...</table> border="pixels" indique une épaisseur de bordure au tableau en pixels. cellpadding="pixels" détermine la marge de chaque cellule en pixels. cellspacing="pixels" détermine la largeur entre les cellules en pixels. 62/76 () Balises HTML élaborées

<table border="5" cellpadding="5" cellspacing="5" > <tr > <td>la cellule 1</td> <td>la cellule 2</td> </ tr > <tr ><td>la cellule 3</td> <td>la cellule 4</td ></tr > </table > 63/76 () Balises HTML élaborées

Balises HTML élaborées Tableaux D autres attributs de <table>...</table> width="pourcentage" spécifie la largeur du tableau par rapport à la largeur de la fenêtre du navigateur. height="pourcentage" spécifie la hauteur du tableau par rapport à la hauteur de la fenêtre du navigateur. 64/76 () Balises HTML élaborées

<table width="100%" height="25%" border="1"> <tr > <td>la cellule 1</td> <td>la cellule 2</td> </ tr > <tr ><td>la cellule 3</td> <td>la cellule 4</td ></tr > </table > 65/76 () Balises HTML élaborées

Balises HTML élaborées Tableaux Couleurs dans les tableaux L attribut bgcolor="couleur" est commun aux balises <table>, <tr> et <td>. <table bgcolor="blue" border="1"> <tr bgcolor="green"> <td>la cellule 1</td> <td>la cellule 2</td> </ tr > <tr ><td>la cellule 3</td> <td>la cellule 4</td></tr > <tr ><td>la cellule 5</td> <td bgcolor="red">la cellule 6</td ></tr > </table> 66/76 () Balises HTML élaborées

Balises HTML élaborées Frames 67/76 () Balises HTML élaborées

Balises HTML élaborées Frames Pour cet exemple là, on a besoin de trois fichiers html : Le fichier html correspondant à la partie gauche. Le fichier html correspondant à la partie droite. Le fichier html qui regroupe les deux fichiers précédents. 67/76 () Balises HTML élaborées

Balises HTML élaborées Frames Balise <frameset>...</frameset> <frameset>...</frameset> répartit les cadres dans la fenêtre. L attribut cols="pourcentage1,pourcentage2,..., pourcentagen" divise la fenêtre en N colonnes avec leur largeur respective. L attribut rows="pourcentage1,pourcentage2,..., pourcentagen" divise la fenêtre en N lignes avec leur hauteur respective. Balise <frame>...</frame> contenu dans <frameset>...</frameset> <frame /> est la balise qui définit un cadre. L attribut src="adresse" indique l emplacement du fichier HTML. 68/76 () Balises HTML élaborées

Balises HTML élaborées Frames Balise <frameset>...</frameset> <frameset>...</frameset> répartit les cadres dans la fenêtre. L attribut cols="pourcentage1,pourcentage2,..., pourcentagen" divise la fenêtre en N colonnes avec leur largeur respective. L attribut rows="pourcentage1,pourcentage2,..., pourcentagen" divise la fenêtre en N lignes avec leur hauteur respective. Balise <frame>...</frame> contenu dans <frameset>...</frameset> <frame /> est la balise qui définit un cadre. L attribut src="adresse" indique l emplacement du fichier HTML. 68/76 () Balises HTML élaborées

Balises HTML élaborées Frames Balise <frameset>...</frameset> <frameset>...</frameset> répartit les cadres dans la fenêtre. L attribut cols="pourcentage1,pourcentage2,..., pourcentagen" divise la fenêtre en N colonnes avec leur largeur respective. L attribut rows="pourcentage1,pourcentage2,..., pourcentagen" divise la fenêtre en N lignes avec leur hauteur respective. Balise <frame>...</frame> contenu dans <frameset>...</frameset> <frame /> est la balise qui définit un cadre. L attribut src="adresse" indique l emplacement du fichier HTML. Il y autant de balises <frame>...</frame> que de colonnes (ou de lignes). 68/76 () Balises HTML élaborées

<html> <head></head> <body> <h3> Enseignement <h3> Recherche <h3> CV </h3> <h3> L o i s i r s </h3> </body> </html> </h3> </h3> <html> <head></head> <body text ="red"> <h2>bienvenu sur ma page web! </ h2> <img src =" Apriori. jpg " /> </body> </html> 69/76 () Balises HTML élaborées

<html> <head> <title >Mon site </title > </head> <frameset cols="20%, 80%"> <frame src=" balises2. html " /> <frame src=" balises. html " /> </frameset> </html> 70/76 () Balises HTML élaborées

Balises HTML élaborées Frames <frameset cols=20%,80%"> <frame src=" balises2. html"> <frameset rows="15%,85%"> <frame src=" balises3. html " /> <frame src=" balises. html " /> </frameset> </frameset> 71/76 () Balises HTML élaborées

Balises HTML élaborées Frames Attributs dans <frameset>...</frameset> border="pixel" définit une largeur de la bordure séparatrice en pixels. bordercolor="couleur" définit la couleur de la bordure séparatrice. 72/76 () Balises HTML élaborées

<frameset bordercolor="red" border="10" cols=20%,80%"> <frame src=" balises2. html " /> <frame src=" balises. html " name=" fenetredroite " /> </frameset> 73/76 () Balises HTML élaborées

Balises HTML élaborées Frames Name et Target deux attributs coopératifs L attribut name="nom" dans la balise <frame /> spécifie une identité à un cadre. L attribut target="nom" dans la balise <a>...</a> spécifie le cadre où va être affiché le lien. 74/76 () Balises HTML élaborées

Balises HTML élaborées Frames Name et Target deux attributs coopératifs L attribut name="nom" dans la balise <frame /> spécifie une identité à un cadre. L attribut target="nom" dans la balise <a>...</a> spécifie le cadre où va être affiché le lien. 74/76 () Balises HTML élaborées

Balises HTML élaborées Frames Name et Target deux attributs coopératifs L attribut name="nom" dans la balise <frame /> spécifie une identité à un cadre. L attribut target="nom" dans la balise <a>...</a> spécifie le cadre où va être affiché le lien. 74/76 () Balises HTML élaborées

Balises HTML élaborées Frames Name et Target deux attributs coopératifs L attribut name="nom" dans la balise <frame /> spécifie une identité à un cadre. L attribut target="nom" dans la balise <a>...</a> spécifie le cadre où va être affiché le lien. 74/76 () Balises HTML élaborées

<html> <head></head> <body> <frameset bordercolor="red" border="10" cols=20%,80%"> <frame src=" balises2. html " /> <frame src=" http : / / google. fr " name=" fenetredroite " /> </frameset> </body> </html> <html> <head></head> <body> <a href =" balises3. html " target =" fenetredroite "> <h2> Accueil </h2> </a> <a href =" balises. html " target =" fenetredroite "> <h2> Dessin </h2> </a> </body> </html> () Balises HTML élaborées 75/76

Conclusion D autres balises, d autres attributs On vient d étudier les principaux concepts fondamentaux d HTML. Il existe bien sûr une multitude de balises et d attributs supplémentaires dans HTML. HTML omniprésent sur le web Le language HTML est devenu indispensable à l heure d internet, notamment pour la création de sites personnels. 76/76 () Balises HTML élaborées

Conclusion D autres balises, d autres attributs On vient d étudier les principaux concepts fondamentaux d HTML. Il existe bien sûr une multitude de balises et d attributs supplémentaires dans HTML. HTML omniprésent sur le web Le language HTML est devenu indispensable à l heure d internet, notamment pour la création de sites personnels. 76/76 () Balises HTML élaborées

Conclusion D autres balises, d autres attributs On vient d étudier les principaux concepts fondamentaux d HTML. Il existe bien sûr une multitude de balises et d attributs supplémentaires dans HTML. HTML omniprésent sur le web Le language HTML est devenu indispensable à l heure d internet, notamment pour la création de sites personnels. Editeurs web Il y a de nombreux éditeurs pour faire du HTML (FrontPage, DreamWeaver, Word... ), mais il est nécessaire de maitriser les concepts de base avant de les utiliser. 76/76 () Balises HTML élaborées

Conclusion D autres balises, d autres attributs On vient d étudier les principaux concepts fondamentaux d HTML. Il existe bien sûr une multitude de balises et d attributs supplémentaires dans HTML. HTML omniprésent sur le web Le language HTML est devenu indispensable à l heure d internet, notamment pour la création de sites personnels. CSS et Javascript dans les prochains cours CSS pour le style. Javascript pour des sites avec des interactions avec le client. 76/76 () Balises HTML élaborées