I/ Une première très brève introduction au WEB :

Save this PDF as:
 WORD  PNG  TXT  JPG

Dimension: px
Commencer à balayer dès la page:

Download "I/ Une première très brève introduction au WEB :"

Transcription

1 TP 10 : Vendredi 31 Janvier 2014 Langage de description HTML Langages de description Présentation du langage HTML et du principe de séparation du contenu et de la mise en forme. Créer et analyser une page WEB en langage HTML. On met en valeur le double usage du langage, lisible par un humain et interprétable par une machine. I/ Une première très brève introduction au WEB : Le WEB repose sur une interconnexion entre des ordinateurs (clients) et un serveur capable de répondre à des requêtes envoyées par les clients. La communication entre un client WEB et un serveur WEB suit les règles imposées par l http : HyperText Transfer Protocol. Le principe de fonctionnement est le suivant : 1. Un client WEB ou navigateur WEB (Browser) fait sa requête http à un serveur WEB dont l adresse est connue. 2. Ce serveur recherche alors la page demandée par le client et lui envoie le message «404 NOT FOUND» si celle-ci n existe pas ou bien la page demandée si elle existe bien. 3. Le client affiche alors la page renvoyée sur son navigateur internet. La page renvoyée est un fichier texte écrit dans le langage du WEB : le langage HTML : HyperText Transfer Langage.

2 II/ Généralités : 1. Un peu de culture pour commencer : L'HyperText Markup Language, HTML en abrégé, est un langage de description destiné à représenter des pages web : à la différence d un langage algorithmique où on définit de façon détaillée les opérations qu on veut que la machine effectue, nous allons décrire le résultat que l on veut obtenir. Il permet la création de documents structurés, l'utilisation de textes enrichis (caractères gras, italiques, couleurs, ). Il facilite notamment la création d'hyperliens (liens vers une autre page web ou une autre partie de la même page web), l'insertion d'images et beaucoup d'autres choses. (1) Les pages HTML sont de simples fichiers textes avec pour extension.htm ou.html. Donc vous pouvez les créer avec un simple éditeur de textes comme Notepad++. (2) La page Web peut être alors visualisée à l aide d un navigateur internet (en anglais Browser). CE QUE VOUS VOYEZ QUAND VOUS REGARDEZ UNE PAGE SUR INTERNET EST L INTERPRETATION PAR VOTRE NAVIGATEUR DU CODE HTML DE CETTE PAGE. Pour voir le code HTML d une page, clic droit sur la page, puis «Code source de la page» (dans Firefox) ou «Afficher la source» (Internet Explorer). Tous les enrichissements sont symbolisés par un système de balisage à l'intérieur du texte. Ces balises sont interprétées par le navigateur internet qui produit à l'affichage la page web avec sa mise en forme. Les balises HTML sont toutes délimitées par les caractères < et >. La plupart des balises ont une partie ouvrante <mabalise> et une partie fermante </mabalise>. Les balises s écrivent en minuscule. Une page HTML peut théoriquement être affichée sous tout système d'exploitation et tout navigateur avec le même aspect final. Nous allons en fait travailler en XHTML. Mais quelle est la différence avec l HTML? Le HTML est un langage qui évolue. Plusieurs versions se sont succédées : de HTML 1 à HTML 5. Le XHTML (Extensible HyperText Markup Language) est apparu peu après le HTML 5. Il s'agit en fait d'une reformulation plus rigoureuse du HTML. Seule la syntaxe change, les fonctionnalités sont les mêmes. Question : De quand date le HTML et plus globalement le Web? Qui en est le principal inventeur? HTML a été inventé en 1990 par un scientifique nommé Tim Berners-Lee. Son objectif était de faciliter l accès par des scientifiques d universités différentes aux documents de recherche de chacun. Le projet a eu un succès inespéré, en inventant HTML, Berners-Lee a posé les fondations du WEB tels que nous le connaissons aujourd hui! Cf : Diaporama de la Conférence de Sara Alouf au lycée de Vence du 6 Décembre 2012 Remarque : Vous n avez pas besoin d être connecté à internet pour écrire et voir votre page (X)HTML. Une fois votre page Web créée et vérifiée, elle peut être envoyée chez un hébergeur d où elle deviendra accessible à tous les internautes de la planète (cela s appelle la «mise en ligne»). Mais nous n en sommes pas encore là! Nous allons dans un premier temps créer des pages HTML mais en local : nous ne les publierons pas sur le net pour l instant.

3 Créez un dossier HTML dans votre répertoire ISN dans lequel vous enregistrerez tous les fichiers html que vous allez créer tout au long de ce TP. 2. Structure d un fichier : Les trois lignes suivantes sont à écrire au début de chaque page XHTML. (1) <?xml version="1.0" encoding="utf-8"?> (2)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " (3)<html xmlns=" xml:lang="fr"> (1) Déclaration du type d encodage du document (norme utf-8 afin d utiliser les caractères autres que les caractères de l alphabet latin-sinon utiliser la norme ISO ) (2) Précise la syntaxe (HTML ou XHTML) et le numéro de version utilisée pour l écriture de la page. (3) Précise où sont définies les règles de nommage des balises (xmlns est l acronyme de XML Name Space, soit «espace de nom XML») et l environnement linguistique du document (ici français) Balises techniques Balise <html>..</html> <head>.</head> <title>.</title> <body> </body> Indication donnée au navigateur Elle englobe tout le contenu, précise le langage L en-tête HEAD donne des informations générales sur la page : le titre, l encodage des caractères. Ces informations ne seront pas affichées sur la page Titre de la page Tout ce que l on écrit ici sera affiché à l écran En résumé, la structure exacte d'une page Web XHTML sera toujours la suivante : <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns= xml : lang=="fr" > <head> <title> Titre de la page </title> </head> <body> Texte de la page ici </body> </html>

4 Structure de base de tout document en HTML 5 : <! DOCTYPE html> <html lang = "fr"> <head> <meta charset="utf-8"/> <title> Titre de la page </title> </head> <body> </body> </html> Texte de la page ici 3. Les commentaires : Il est conseillé de mettre des commentaires dans son code HTML afin de faciliter sa compréhension. Ceci sera très appréciable lorsque l'on aura besoin de modifier sa page Web plusieurs mois après son élaboration. Un commentaire sera donc un texte libre, qui sera lisible dans le code source, mais pas affiché par le navigateur. Un commentaire débute pars les caractères <!-- et se termine par > 4. S'assurer de la validité de son code : Les règles (ou normes) du HTML et du XHTML sont rédigées par le World Wide Web Consortium plus souvent appelé W3C. Le W3C propose un outil pour vérifier la validité de son code. Il listera vos erreurs jusqu'à temps que vous ayez une page valide : Choisir l'onglet "Validate by Direct Input" puis copier/coller le code. III/ Présentation du texte : 1. Les attributs - Des indications complémentaires sur les balises : Un attribut permet de donner des précisions sur une balise. Si les balises disent au navigateur quelle action effectuer, les attributs lui disent comment l'effectuer. Une balise peut avoir un ou plusieurs attributs. Un attribut se compose le plus souvent d'un mot-clé auquel on donne une valeur. Pour cela on utilise le caractère «=» et on met la valeur entre 2 guillemets («"»). Ce qui donne : <ma_balise nom_attribut="valeur_attribut" > contenu </ma_balise>

5 Exemple : Balise Attribut Paramètre Action <body> </body> background = "nom fichier" Image de fond bgcolor = "couleur" Couleur de fond text = "couleur" Couleur du texte (red, blue, yellow ) 2. Premiers éléments de type bloc : Ils permettent de structurer un document. Tout document (X)HTML contiendra en majorité du texte. Voici les balises élémentaires pour présenter votre texte : Balise <p>... </p> <br /> Indication donnée au navigateur Début et fin d'un paragraphe. Ajout d'un saut de ligne. Un saut de ligne ne peut avoir de contenu, on considère donc que cette balise est à la fois ouvrante et fermante. Cela se traduit par l'ajout d'un «/» (slash) la fin de la balise. <hr /> Ajout d'une ligne horizontale de séparation comme suit : Attributs possibles : Balise Attribut Paramètre Action <p> </p> align = left = right permet de modifier l'alignement horizontal du texte aligné à gauche (par défaut) aligné à droite = center centré = justify : justifié (aligné à droite et à gauche) très peu utilisé sur le web <hr/> width = nombre largeur en pixel size = nombre épaisseur align =.. alignement noshade sans ombre

6 3. Premiers éléments de type in-line : Style du texte Balise Indication donnée au navigateur <strong>... </strong> Balises pour mettre un texte en gras. Les balises <b>... </b> donne le même résultat mais elle a été dépréciée, c'est à dire que son utilisation est déconseillée. <em>... </em> <u>... </u> <font> </font> Balises pour mettre un texte en italique. Les balises <i>... </i> donne le même résultat mais elle a été dépréciée. Balises pour mettre un texte souligné. Permet de spécifier la police de caractère, la couleur et la taille du texte. <blockquote>... </blockquote> <sup>... </sup> <sub>... </sub> Insère une tabulation à gauche Pour mettre un mot en exposant Pour mettre un mot en indice La balise <font> </font> possède plusieurs attributs : Balise Attribut Paramètre Action <font> </font> face = "nom police" Type de police (times, verdana ) size = "taille" Taille de police color = "couleur" Couleur de police (red, blue, yellow ) Les éléments de type bloc peuvent contenir des éléments de type bloc ou inline. Les éléments de type inline ne contiennent que des éléments de type inline. 4. De nouvelles balises bloc pour organiser son texte : titres et listes Pour une meilleure lisibilité de votre texte sur votre page web, vous aurez sûrement besoin de créer des titres ou des listes comme par exemple lors de la création d une table des matières ou les différents niveaux d un exposé. Voici les balises principales dont vous pouvez disposer :

7 Balise Indication donnée au navigateur <hn>... </hn> avec n = 1 à 6 Permet d afficher un en-tête de niveau n et de sauter une ligne De n=1 très grand à n=6 très petit <ul>... </ul> <ol>... </ol> <li>... </li> Début et fin d'une liste non-ordonnée Début et fin d'une liste ordonnée Début et fin d un élément de la liste (une puce sera ajoutée) On écrira donc : <ul> </ul> <li> 1 ère ligne d une liste non-ordonnée < /li> <li> 2 ème ligne non ordonnée </li> Les balises h1, h2(...) supportent un attribut align qui permet de modifier l'alignement horizontal du texte. Pour les listes, il est possible de choisir le type de puce que nous souhaitons grâce à l'attribut type. Pour une liste ordonnée (ol), l'attribut type peut avoir les valeurs suivantes : "1" => pour une suite numérique "a" => pour une suite alphabétique "A" => pour une suite alphabétique en majuscule "I" => pour une suite numérique en chiffres romains Pour une liste non-ordonnée (ul), l'attribut type peut avoir les valeurs suivantes : "disc" => pour un rond plein "circle" => pour un rond vide "square" => pour un carré 5. Les caractères spéciaux : Les caractères <, > et & étant interprétés, ils doivent être remplacés par les entités prédéfinies, suivies d un ; caractère Entité prédéfinie < &lt > &gt & &amp «&quot &nbsp

8 IV/ Insérer une image : A savoir pour insérer une image sur sa page web : Il est important de garder à l'esprit que les pages que nous mettons sur Internet sont vues à distance par nos visiteurs. Leurs navigateurs téléchargent un à un tous les fichiers composants notre page. Des fichiers images trop volumineux ralentissent les temps de chargement de notre site Web ce qui peut décourager les visiteurs. Par conséquent, avant de mettre une photo en ligne, nous veillerons à l'enregistrer dans l'un des 3 formats d'optimisations vus lors du TP sur le traitement de l image (JPEG, GIF ou PNG). Une fois votre image optimisée, il faut la placer dans votre site. Vous pouvez choisir de la mettre dans le même répertoire que votre page Web, ou dans un répertoire de votre choix. La balise img est à la fois ouvrante et fermante comme la balise <br/> : <img /> Elle possède 2 attributs : src qui doit être égal au nom du fichier image (ou au chemin si le fichier image se trouve dans un autre dossier). alt qui doit être égal à une description de votre image (cet attribut est utilisé notamment par les systèmes de description des pages web utilisés par les non voyants), il faut donc systématiquement renseigner cet attribut. On écrira donc : Autres attributs de la balise <img /> : <img src="mon_image.jpg" alt="texte "/ > Attribut Valeur Description src = "adresse d une image" Le chemin complet vers l image alt ="texte à afficher pendant le chargement" Définit un commentaire de l image, affiché pendant le téléchargement de l image. width ="nombre" Définit la largeur de l image en pixels height ="nombre" Définit la hauteur de l image en pixels align vspace hspace ="left" pour aligner l image à gauche, le texte étant à droite (standard) ; ="right" pour aligner l image à droite, le texte étant à gauche ; ="top" pour aligner le haut de l image sur la ligne courante ; ="middle" pour aligner le milieu de l image sur la ligne courante ; ="bottom" pour aligner le bas de l image sur la ligne courante ; ="nombre" en pixels LEFT et RIHGT définissent l alignement de l image à l écran. TOP, MIDDLE et BOTTOM définissent l emplacement du texte par rapport à l image. Définissent les marges verticale et horizontale de l image par rapport au texte border ="nombre" (0 supprime la bordure) Affiche un cadre standard autour de l image (valeur exprimée en pixel)

9 Mise en application : Demain, dès l aube Demain, dès l aube, à l heure où blanchit la campagne, Je partirai. Vois-tu, je sais que tu m attends. J irai par la forêt, j irai par la montagne. Je ne puis demeurer loin de toi plus longtemps. Victor HUGO 1 ) Avec Notepad++, éditer ce texte, enregistrer ce fichier sous le nom poeme.html et l ouvrir dans votre navigateur. Que pouvez-vous constater sur la mise en page? Réponse : Aucune mise en page 2 ) Créer une page d accueil qui propose plusieurs liens hypertextes qui permettent : RAPPEL : 1. D avoir sur Victor Hugo le poème Demain dès l aube sur une page. 2. D avoir sa biographie sur une autre page. 3. D avoir sa photo sur une autre page.

10 Suite du TP 10 : Vendredi 7 Février HTML & CSS I/ Compléments sur HTML : 1 ) Le DOCTYPE : <! DOCTYPE HTML > : cette première ligne s appelle le doctype, elle est indispensable, c est elle qui indique qu il s agit bien d une page WEB HTML. Elle permet de décrire au navigateur la version de HTML utilisée. Pour XHTML 1.0, il faut écrire : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " (Ou XHTML 1.0 Strict ) Dans le cadre de HTML5, il a été décidé de simplifier la doctype, ainsi, quand vous voyez la doctype <! DOCTYPE HTML >, cela signifie que la page est écrite en HTML5. Allez récupérer le dossier intitulé «TP10ISNSite1survictorhugo» contenant le corrigé de l exercice de fin du TP 10. Allez vérifier la validation par le W3C! Site listant les balises : 2 ) Les liens, les ancres : 1/ Insérer un lien vers un autre site : < a href = >Site</a> 2/ Lien vers une autre page de son site : On crée une 2 ème page et pour faire le lien : <a href = page2.html >la page 2</a> 3/ Lien vers une ancre : On utilise une ancre si la page est trop longue. Cela permet de sauter directement à l endroit indiqué. Allez ouvrir site2avecancre.html.

11 RESUME : La balise <a> permet de créer des liens hypertextes, ce sont ces liens hypertextes qui vous permettent de voyager entre les pages d un site ou vers un autre site. La balise <a> avec son attribut href permet de créer un lien vers une autre page. Remarque : Combiner les balises <img> et <a> : On peut placer une balise image à la place du texte : <a href =. ><img = src = alt = Voici la photo /></a> II/ Structuration de la page ; découverte des balises span et div : Nous avons formé des paragraphes, des titres, des listes mais on peut avoir besoin de rassembler certains paragraphes entre eux dans le but de leur donner un style particulier. MISE EN PRATIQUE : 1 ) Ouvrir le fichier HTML intitulé «Site2avecancre.html» et complétez-le afin d avoir les 3 strophes du poème. 2 ) On désire mettre en évidence les strophes et les rimes de la manière suivante : Pour les strophes, elles doivent être écrites en bleu et centrée sur la page. Pour les rimes, elles doivent être repassées au fluo rouge (dernier mot). Nous allons baliser chaque strophe par la balise <div>, on choisira de l appeler <div class = strophe > </div> On parlera de classe CSS. Pour les rimes, on va les baliser par la balise <span> : <span class = surligner > </span> RESUME : span sert à baliser des mots ou des groupes de mots, voire des syllabes. div sert à baliser des blocs, des paragraphes. 3 ) Après ces modifications, ouvrir le fichier avec le navigateur. Que se passe-t-il? 4 ) Création du fichier CSS : Nous allons définir la décoration que nous avons balisée dans le fichier HTML. Nous allons créé un fichier CSS appelé «styleperso.css» que nous allons lier à notre fichier HTML en rajoutant dans le head la ligne : <link rel="stylesheet" href = styleperso.css type="text/css" media="all"/> Le fichier «styleperso.css» est disponible dans le dossier. a. Ouvrir la page HTML après cette modification. Qu obtenez-vous?.

12 h1{ b. Compléter le fichier «styleperso.css» par une définition de la balise <h1></h1> afin que le texte des très gros titres apparaissent alignés à droite, de couleur blanche sur fond gris : color :.. ; background-color :.. ; text-align :.. ; } RESUME Attention, les noms des classes utilisées dans les span et div sont précédées d un point. On voit que le fait de modifier le fichier CSS modifie instantanément la page HTML. La balise <div> dans le fichier HTML permet de créer des structures, des divisions. Une division sera associée soit à un identifiant (id), soit à un nom de classe (class) qui lui ne sera pas unique. Exemple de situation où j ai un identifiant : <div id = entete > </div> <h1> Bienvenue! </h1> <h2> Qui sommes-nous? </h2> <p> Notre boutique bla bla bla </p> ** Attributs de la police de caractère :

13 5 ) On veut maintenant encadrer le poème : Baliser le poème par <div class = poeme > </div> Modifier votre fichier CSS Observer! III/ De la nécessité du langage CSS : On veut que dans toutes les pages HTML de notre site, les titres aient la même mise en page : cela nous oblige à répéter le code dans toutes les pages. Le langage CSS (Cascading Style Sheets : feuilles de style en cascades) va nous éviter ce problème en regroupant la mise en page voulue dans un fichier à part. Ce langage est venu compléter le HTML en Pour ajouter un style à la page, vous devez ajouter une ligne au code HTML : <link href ="mafeuilledestyle.css" rel="stylesheet" type="text/css" media="all"/> Ligne à ajouter dans la balise head. Le fichier CSS doit s appeler mafeuilledestyle.css et être situé dans le même dossier que votre fichier html. BILAN : Le HTML définit le contenu ; le CSS permet d arranger ce contenu et de définir la présentation. Il existe des patrons de CSS dits templates tout faits et libres d utilisation et de modification. Site internet : Par exemple, SIMPLE BEAUTY : Téléchargement : TOUCHING DESIGN : Téléchargement : Il a au moins 2 fichiers séparés : index.html et style.css, dans le fichier HTML, on fait remarquer la nécessaire liaison avec la feuille de style CSS dans l en tête.

HTML. HyperText Markup Language. Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises qui permettent :

HTML. HyperText Markup Language. Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises qui permettent : HTML HyperText Markup Language Objectifs : - s'initier au langage HTML - savoir lire un code source html simple Le HTML est un langage informatique qui permet de créer des pages WEB. Il utilise des balises

Plus en détail

MODULE HTML CSS.

MODULE HTML CSS. MODULE HTML CSS David Tourel david.tourel@iut-tlse3.fr HTML : HyperText Markup Language Langage de description Interprété par les navigateurs Associé au CSS et JavaScript Métiers: développeur front end,

Plus en détail

Fiche TD n 1 Le langage HTML

Fiche TD n 1 Le langage HTML Fiche TD n 1 Le langage HTML 1 Introduction Le HTML est le langage utilisé pour formaliser l information échangée sur internet. Il est constitué de balises qui indiquent de quelle manière les informations

Plus en détail

Création de sites Web ~ Module 1 Introduction HTML - CSS

Création de sites Web ~ Module 1 Introduction HTML - CSS Création de sites Web ~ Module 1 Introduction HTML - CSS 1 Introduction : HTML, pour HyperText Markup Language, est le langage conçu pour représenter les pages Internet. C est un langage de balises permettant

Plus en détail

CSS 3. Julien David. A101 - Julien David (A / 27

CSS 3. Julien David. A101 - Julien David (A / 27 CSS 3 Julien David A101 - david@lipn.univ-paris13.fr 2016 Julien David (A101 - david@lipn.univ-paris13.fr) 2016 1 / 27 Feuilles de styles Cascading Style Sheets CSS est un langage de feuilles de styles.

Plus en détail

Test Test Test Test Test

Test Test Test Test Test Mise en forme d un document HTML Niveaux de titre Le langage HTML définit 6 niveaux de titre (en anglais heading), afin de définir une structuration hiérarchique des paragraphes dans un texte : Balise

Plus en détail

Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours :

Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours : COURS PROGRAMMATION WEB ASCADING STYLE SHEETS CSS CASCADING Responsable : F. CHAKER-KHARRAT Niveau : 3 ème ESSAI Notes du cours : http://essai.rnu.tn/enseignants/fatmachaker2.htm Année Universitaire :

Plus en détail

Dossier ISN : Tracés de fonctions mathématiques :

Dossier ISN : Tracés de fonctions mathématiques : Dossier ISN : Tracés de fonctions mathématiques : Par Crosetti Pauline et Depoers Quentin. Lycée Colbert Tourcoing. Année scolaire 2012/2013. Sommaire : - Recherches et étude du projet - Html - Css - Javascript

Plus en détail

Cours de I21 SOMMAIRE

Cours de I21 SOMMAIRE Cours de I21 Voir le chap 2 : cours de Javascript SOMMAIRE I. Introduction sur le langage HTML II. Balises primaires a. mise en forme b. hyperliens c. insérer une image III. Création de listes IV. Création

Plus en détail

Partie HTML TD 1 : Les bases du HTML

Partie HTML TD 1 : Les bases du HTML Partie HTML TD 1 : Les bases du HTML 1 Introduction HTML = HyperText Marked Language HTML est un langage permettant de décrire des données affichables sous forme de page par un navigateur Web. HTML peut

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 06 Réussir son site web avec XHTML et CSS CSS, le langage de mise en page du Web 1. Insérer du code CSS...1 Dans un fichier.css...1 Dans l en-tête du fichier XHTML...3 2. Appliquer un style à des

Plus en détail

Programmation Web HTML5

Programmation Web HTML5 Programmation Web HTML5 Julien David A101 - david@lipn.univ-paris13.fr 2016 Julien David (A101 - david@lipn.univ-paris13.fr) 2016 1 / 1 Organisation Cours 5 séances pour 5 langages : HTML5, CSS3, PHP5,

Plus en détail

CREATION WEB DYNAMIQUE

CREATION WEB DYNAMIQUE CREATION WEB DYNAMIQUE II ) xhtml ET CSS II-1 ) Introduction Le xhtml, extensible HyperText Markup Language, est un langage identique au langage HTML mais respectant la syntaxe définie par XML Quant vous

Plus en détail

ISN - HTML : Apprendre HTML5. M. Lagrave HTML5. Code source Site classique CSS Bluefish. M. Lagrave. Lycée Beaussier

ISN - HTML : Apprendre HTML5. M. Lagrave HTML5. Code source Site classique CSS Bluefish. M. Lagrave. Lycée Beaussier Lycée Beaussier 2012 2013 Sommaire Le HTML «HyperText Markup Language» est un langage de balisage pour la création de site internet, il sert à structurer votre document. D autres langages peuvent s ajouter

Plus en détail

HTML. Damien Nouvel. Damien Nouvel (Inalco) HTML 1 / 23

HTML. Damien Nouvel. Damien Nouvel (Inalco) HTML 1 / 23 HTML Damien Nouvel Damien Nouvel (Inalco) HTML 1 / 23 Langage, calcul, télécommunications Plan 1. Langage, calcul, télécommunications 2. Web et documents HTML 3. Balises 4. Attributs Damien Nouvel (Inalco)

Plus en détail

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2015/2016)

Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2015/2016) Université Bordeaux, UF Mathématiques et Interactions Licence 2 MIASHS (2015/2016) Conception de Sites Web Dynamiques : TD 1 HTML5 statique, balises, liens relatifs/absolus, images, validateur W3C http://www.labri.fr/perso/preuter/cswd2016

Plus en détail

/* basic elements */ html { <!DOCTYPE html> font: 75% georgia, sans- serif; Design</title>

/* basic elements */ html { <!DOCTYPE html> font: 75% georgia, sans- serif; Design</title> tp HTML But : être capable d écrire une page en HTML et de lui associer une mise en page en CSS Moyen : Pc avec Notepad++ et navigateurs Chrome et Firefox 1 Introduction Lorsque vous allez sur

Plus en détail

Classes : PREMIERES A-C-D

Classes : PREMIERES A-C-D LYCEE SECOND CYCLE DEPARTEMENT D'INFORMATIQUE Année scolaire 2011-2012 Classes : PREMIERES A-C-D Horaire hebdomadaire : 2 heures PRÉ REQUIS Connaissances de la Classe de 2 nde Savoir lire le français ou

Plus en détail

Création d'un site Web avec KompoZer

Création d'un site Web avec KompoZer Création d'un site Web avec KompoZer Table des matières 1Rudiments sur le langage HTML.1 1.1Structure d'une page web :.1 1.2Le langage des pages Web.2 2Préparation du site web..2 3Utilisation d'une feuille

Plus en détail

Les bases du HTML5/CSS3

Les bases du HTML5/CSS3 1 Les bases du HTML5/CSS3 Ce premier chapitre rappelle tout ce qu il est bon de connaître lorsqu on se lance dans le développement HTML5/CSS3, depuis la déclaration de type de document jusqu au regroupement

Plus en détail

CHARGÉE DE COURS : N. VANASSCHE

CHARGÉE DE COURS : N. VANASSCHE CHARGÉE DE COURS : N. VANASSCHE WWW.NATHALIEVANASSCHE.BE DE NOMBREUSES PERSONNES CONFONDENT (À TORT) INTERNET ET LE WEB. le Web fait partie d'internet. Internet est donc un grand ensemble qui comprend,

Plus en détail

Créer une page HTML avec l'éditeur Notepad++

Créer une page HTML avec l'éditeur Notepad++ Page Html Créer une page HTML avec l'éditeur Notepad++ Ouvrir Notepad++ Ecrivez un court texte. Enregistrer ce fichier dans un dossier que vous avez préalablement créé dans vos documents ou sur votre bureau

Plus en détail

CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise { Propriété : valeur ;

CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise { Propriété : valeur ; CSS CSS : Cascading Style Sheets (feuilles de styles en cascade ) Cas générale : La structure du code : Nom_balise Pour les commentaires : /* un commentaire */ Classe : La construction d une classe :.ma_classe

Plus en détail

Université de Nice-Sophia Antipolis Jeudi 15 mars Création et Manipulation de documents

Université de Nice-Sophia Antipolis Jeudi 15 mars Création et Manipulation de documents Université de Nice-Sophia Antipolis Jeudi 15 mars 2007 Polytech CiP1 Durée: 1h30 Création et Manipulation de documents (Hélène Renard / Sylvain Schmitz) Travaux Dirigés Séance n o 6 1 Objectifs du TD Utiliser

Plus en détail

Les balises XHTML. Balises de structure. Balises de mise en forme. Balises de liens Balises de liste Balises d image Balises de tableau

Les balises XHTML. Balises de structure. Balises de mise en forme. Balises de liens Balises de liste Balises d image Balises de tableau Les balises XHTML Balises de structure Balises de liens Balises de liste Balises d image Balises de tableau Balises de cadre Balises de mise en forme Balises de formulaire 1 Balises de structure Un document

Plus en détail

Conception d'interfaces Web

Conception d'interfaces Web Conception d'interfaces Web Licence 1 2. Créer un site Web avec HTML5 et CSS3 Bruno Jobard I. Introduction Les langages HTML et CSS décrivent la structure et la présentation d'une page Web. HTML est un

Plus en détail

T.P. OUTILS DE L INTERNET

T.P. OUTILS DE L INTERNET T.P. OUTILS DE L INTERNET Le HTML (HyperText Markup Language) est un langage informatique utilisé pour la création de pages Web. Une page HTML est un simple fichier texte contenant des balises (parfois

Plus en détail

Réussir. avec XHTML et CSS. 3e édition. son site web. Nebra. Mathieu. Préface de Laurent Denis

Réussir. avec XHTML et CSS. 3e édition. son site web. Nebra. Mathieu. Préface de Laurent Denis Mathieu Nebra Réussir son site web avec XHTML et CSS 3e édition Préface de Laurent Denis Groupe Eyrolles, 2006, 2008, 2010, ISBN : 978-2-212-12485-9 Table des matières 1. UN SITE WEB, COMMENT ÇA MARCHE?...

Plus en détail

Cours de XHTML. <balise attribut="valeur" attribut2="valeur2" >chaîne de caractères</balise>

Cours de XHTML. <balise attribut=valeur attribut2=valeur2 >chaîne de caractères</balise> Cours de XHTML Introduction XHTML n'est pas un langage de programmation proprement dit, il s'agit simplement d'un langage de balisage dont le rôle est de formaliser l'écriture d'un document web avec des

Plus en détail

Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le <head> de la page :

Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le <head> de la page : CSS La présentation Objectif : séparer le contenu de la présentation. Tout ce qui sera de la présentation sera géré par du CSS. Code dédié dans le de la page : body { background: orange;

Plus en détail

Chapitre 3 : Le langage HTML

Chapitre 3 : Le langage HTML Chapitre 3 : Le langage HTML 4 ème SI (TIC) I. Introduction : Le langage HTML (HyperText Markup Language) n'est pas un langage de programmation proprement dit. Il permet tout simplement de spécifier la

Plus en détail

Exemples! !Mise en forme du texte!!les tableaux!!utilisation d images!!la navigation!!les Cadres!!Paramètres d une page!

Exemples! !Mise en forme du texte!!les tableaux!!utilisation d images!!la navigation!!les Cadres!!Paramètres d une page! Le langage Html : Chapitres HTML!!Mise en forme du texte!!les tableaux!!utilisation d images!!la navigation!!les Cadres!!Paramètres d une page! L1-STS-Internet et Programmation! 47! Le langage Html : Mise

Plus en détail

HTML5 et CSS3 Maîtrisez les standards de la création de sites Web (3e édition)

HTML5 et CSS3 Maîtrisez les standards de la création de sites Web (3e édition) Le HTML5 et les CSS 1. L'évolution de HTML 15 2. L'évolution des CSS 16 2.1 La notion de module 16 2.2 L'évolution des statuts 16 2.3 Les préfixes vendeurs 17 2.4 Utiliser les préfixes vendeurs 18 3. La

Plus en détail

Les CSS et la gestion des différentes polices La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS.

Les CSS et la gestion des différentes polices La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS. La police, la taille du texte, gras ou pas, tous ces paramètres sont réglables en CSS. font-family: Famille de police font-size: Taille de votre police de caratère font-style: Le style de police. Gras,

Plus en détail

TP 4 : IMAGES ET ARRIERE-PLANS

TP 4 : IMAGES ET ARRIERE-PLANS TP 4 : IMAGES ET ARRIERE-PLANS Les images dans le texte La balise img du langage Html permet d'insérer des images dans une page Html. Exemple : où fichier_image est le nom et

Plus en détail

- WEB / HTML - Annexe 1 : Définition des balises HTML

- WEB / HTML - Annexe 1 : Définition des balises HTML Balises d encadrement - WEB / HTML - Annexe 1 : Définition des balises HTML Encadre le code source. Encadre la zone d entête de la page Web dans laquelle

Plus en détail

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML, CSS Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML Pour le fond -> HTML Pour la forme ->CSS Les balises Les balises orphelines Attributs de balise LES BALISES PRINCIPALES HTML

Plus en détail

<div id="nom_id" class="ma_classe">texte affiché</div>

<div id=nom_id class=ma_classe>texte affiché</div> Rappel - Les sélecteurs de base La syntaxe de CSS est simple, elle est composée de 3 éléments: un sélecteur des propriétés des valeurs sélecteur { Il existe 3 sélecteurs de base: le sélecteur de balise

Plus en détail

Le (X)HTML 5. LPCEL promotion 2016/2017 Vincent Peigné

Le (X)HTML 5. LPCEL promotion 2016/2017 Vincent Peigné Le (X)HTML 5 LPCEL promotion 2016/2017 Vincent Peigné Sommaire 1. HTML 5 2. L entête HTML 3. Le corps ou 4. L encodage et les accents 1. HTML 5 1. HTML 5 1.1. Définition et historique 1.2. Définition

Plus en détail

Écriture de pages Web

Écriture de pages Web Écriture de pages Web Le langage CSS Laurent Tichit Janvier 2011 Copyright 2005-2009 Laurent Tichit 1 Les feuilles de styles CSS Elles permettent de changer la mise en forme d'une page HTML ou XHTML sans

Plus en détail

Mémento des balises HTML 5

Mémento des balises HTML 5 Mémento des balises HTML 5 s de premier niveau Les balises de premier niveau sont les principales balises qui structurent une page HTML. Elles sont indispensables pour réaliser le «code minimal» d'une

Plus en détail

TP n 1 : Initiation au langage HTML

TP n 1 : Initiation au langage HTML Atelier informatique-langage HTML TP n 1 : Initiation au langage HTML 1. Rappels de quelques généralités - Un fichier HTML est un fichier texte simple, parfaitement lisible, respectant un ensemble de convention

Plus en détail

Développement Web (NFA0016)

Développement Web (NFA0016) Développement Web (NFA0016) première session Février 2013 Durée : 3h Modalités : Tous documents autorisés. Calculatrices, ordinateurs, téléphones portables interdits. Barème donné à titre indicatif. Exercice

Plus en détail

Un document HTML est un hypertexte décrit à l'aide du langage HTML. Un hypertexte est un texte contenant des hyperliens.

Un document HTML est un hypertexte décrit à l'aide du langage HTML. Un hypertexte est un texte contenant des hyperliens. Le langage HTML Document HTML («Hyper-Text Markup Language») Un document HTML est un hypertexte décrit à l'aide du langage HTML. Un hypertexte est un texte contenant des hyperliens. Un hyperlien est un

Plus en détail

Arbres Mathématiques Informatique et Navigateurs Internet

Arbres Mathématiques Informatique et Navigateurs Internet Arbres Mathématiques Informatique et Navigateurs Internet Jacques Duma Présentation de la structure d arbre sur des exemples qui montrent où elle intervient en mathématique et en informatique. Application

Plus en détail

Web Statique Base de la création de sites web

Web Statique Base de la création de sites web Web Statique Base de la création de sites web Lilian BAZILLE Version 1.0 Février 2015 Table des matières WEB 01 Introduction... 2 1 - Outils du développeur... 2 1.1 - Environnement de travail... 2 1.2

Plus en détail

Les CSS un menu vertical Nous allons créer un dossier menu_vertical. Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes

Les CSS un menu vertical Nous allons créer un dossier menu_vertical. Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes Les CSS un menu vertical Nous allons créer un dossier menu_vertical Comprenant les sous dossiers style, images, multi_niveaux, un niveau et _notes A l'intérieur du dossier un_niveau Nous créons les fichiers

Plus en détail

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML, CSS Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML Pour le fond -> HTML Pour la forme -> CSS Les balises Les balises orphelines Attributs de balise LES BALISES PRINCIPALES HTML

Plus en détail

HTML5 et CSS3. Table des matières : CE qu'est l'html5 Déclaration De Page page 3 Ossature D'une Page Les Balises. Les Nouvelles Balises CSS3

HTML5 et CSS3. Table des matières : CE qu'est l'html5 Déclaration De Page page 3 Ossature D'une Page Les Balises. Les Nouvelles Balises CSS3 HTML5 et CSS3. Table des matières : CE qu'est l'html5 page 2 Déclaration De Page page 3 Ossature D'une Page page 3 Les Balises...page 4-6 Les Nouvelles Balises...page 4-6 CSS3 page 7-9 Page 1/9 HTML5 Le

Plus en détail

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez Mohammed REZGUI m.rezgui06@gmail.com Basé sur le cours de Guillaume Perez Contenu, Organisation Objectif principal: Base pour la création d un site Notions de client-serveur Notions de programmations Option

Plus en détail

TP Informatique. Personnalisation de page web HTML avec le langage CSS. Objectifs :

TP Informatique. Personnalisation de page web HTML avec le langage CSS. Objectifs : TP Informatique Personnalisation de page web HTML avec le langage CSS Objectifs : - Approfondir ses connaissances au langage HTML - Changer le style et la présentation d une page HTML grâce au langage

Plus en détail

TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class

TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class TP4 Feuille de style Class, ID, Pseudo-element &pseudo-class Création et mise en forme d'une page Web avec une feuille de style Ouvrez la page index.htm qui envoyer par email. Insérez une feuille de style

Plus en détail

TD n 5 : Feuilles de styles

TD n 5 : Feuilles de styles TD n 5 : Feuilles de styles 1. Préparation du site a. Récupérez le site avec liens internes et tableaux du TD4 et assurez vous qu il soit dans un dossier aide-memoire sous D:\et-l2. 2. Joindre une feuille

Plus en détail

HEI3 : TD HTML. Objectif : construction d un document hypertexte sur Internet. Moyens :

HEI3 : TD HTML. Objectif : construction d un document hypertexte sur Internet. Moyens : 3 : TD HTML Objectif : Moyens : construction d un document hypertexte sur Internet - Internet : notions d échanges sur le réseau - Langage : présentation d HTML - Mise en œuvre d HTML : TD_3_HTML_CV.html

Plus en détail

MODULE HTML CSS. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr

MODULE HTML CSS. Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr MODULE HTML CSS Elisabeth Pecatte elisabeth.pecatte@iut-tlse3.fr ORGANISATION DU MODULE 13 séances de 2 heures une partie cours une partie exercices sur machine. Modalités de contrôle : partiel en fin

Plus en détail

Mémento des balises HTML

Mémento des balises HTML Chapitre 21 Mémento des balises HTML Diculté : C ette page est une liste non exhaustive des balises HTML qui existent. Vous trouverez ici un grand nombre de balises HTML. Nous en avons déjà vu certaines

Plus en détail

Introduction à HTML. 27 Février Damien DURVILLE HTML 1

Introduction à HTML. 27 Février Damien DURVILLE HTML 1 Introduction à 27 Février 2004 Damien DURVILLE 1 Qu'est-ce que c'est? : Hypertext Markup Language hypertext : texte avec liens dynamique markup : marquage, codage, délimitation language : une manière de

Plus en détail

protocole utilisé (autre exemple ftp)! nom du serveur!

protocole utilisé (autre exemple ftp)!  nom du serveur! Le Langage HTML! Finalité:! Définir un langage permettant d élaborer des sites Web, c est à dire un ensemble de pages web (ou pages Html) organisées (de façon logique) sous forme de graphe.! La transition

Plus en détail

COURS DE PROGRAMMATION DE SITE WEB 1

COURS DE PROGRAMMATION DE SITE WEB 1 COURS DE PROGRAMMATION DE SITE WEB 1 Chapitre 1 Les bases PLAN DU COURS 1.1 L histoire du WEB 1.2 Du HTML au XHTML et le CSS 1.3 Définition (HTML, XTML, CSS, ASP, PHP, FLASH, CGI, PEARL) 1.4 Les éditeurs

Plus en détail

Manuel SPIP. SPIP vous donne la possibilité de changer votre mot de passe très simplement.

Manuel SPIP. SPIP vous donne la possibilité de changer votre mot de passe très simplement. Manuel SPIP Se connecter à la partie Administration Pour créer un article, il faut entrer dans la partie administration du site en cliquant sur «Administration» en bas de la page d accueil du site, et

Plus en détail

I ) L environnement de programmation HTML :

I ) L environnement de programmation HTML : HTML5 COURS ET EXERCICES I ) L environnement de programmation HTML : - Ouvrir Notepad++ (http://notepad-plus-plus.org/fr/)et taper les trois lignes suivantes : Voici mon premier SITE Conception d une page

Plus en détail

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

Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web 1. 2. Pour naviguer sur le Web, il faut : Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des machines Protocoles de communication Plusieurs niveau (couche) : Internet, protocole

Plus en détail

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 08 Réussir son site web avec XHTML et CSS Couleur et fond 1. La couleur du texte...1 Indiquer la couleur du texte avec un nom...1 Indiquer la couleur du texte en hexadécimal...2 Indiquer la couleur

Plus en détail

On le retrouve dans plusieurs modules tels que le courrier, le forum, l agenda, les tâches, les communiqués et plus particulièrement dans Édu-Notes.

On le retrouve dans plusieurs modules tels que le courrier, le forum, l agenda, les tâches, les communiqués et plus particulièrement dans Édu-Notes. 154 L éditeur de texte L ÉDITEUR DE TEXTE L éditeur de texte du portail est une application destinée à créer et modifier des textes pour créer des documents HTML. L éditeur de texte possède certaines fonctions

Plus en détail

H T M L. Hyper Text Markup Language II Structure (ou squelette) d un fichier HTML

H T M L. Hyper Text Markup Language II Structure (ou squelette) d un fichier HTML Page Web statique «Le langage HTML» Activité 1 : 1. Créer un répertoire sous le nom TPHTML dans le dossier 4TIC HTML de la racine D:\. 2. Dans le dossier HTML créer un nouveau fichier Document texte. a.

Plus en détail

Contrôle final Développement Web

Contrôle final Développement Web Université de Batna 3 ème année Licence Pro IIM Faculté des sciences Département d informatique 2015/2016 Durée : 1h30 Le 30/05/2016 Question de cours (4.5 pts) Contrôle final Développement Web 1. Le cycle

Plus en détail

Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices

Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices Dreamweaver CSS Plan Généralités Syntaxe CSS Appliquer un style Ressources CSS : Définir les couleurs Texte Arrière plan Exercices CSS CSS - Cascading Style Sheets Servent à mettre en forme les éléments

Plus en détail

Introduction au langage HTML L1S Un fichier HTML est un fichier contenant du texte, «lisible» dans un éditeur de texte

Introduction au langage HTML L1S Un fichier HTML est un fichier contenant du texte, «lisible» dans un éditeur de texte Introduction au langage HTML L1S1 2012-2013 I Quelques généralités Un fichier HTML est un fichier contenant du texte, «lisible» dans un éditeur de texte Lorsque vous consultez un site, les fichiers HTML

Plus en détail

> RETOUR A LA LIGNE. Pour forcer un retour à la ligne, insérez la balise <BR>. [BR comme BReak (rupture) en anglais]

> RETOUR A LA LIGNE. Pour forcer un retour à la ligne, insérez la balise <BR>. [BR comme BReak (rupture) en anglais] GUIDE HTML ADMINIS TRATIO N DE VO TRE SITE Ce document présente les principales balises HTML pour vous permettre d enrichir la présentation des textes gérés par formulaire d administration. > L usage de

Plus en détail

Aide à la rédaction & Charte Graphique

Aide à la rédaction & Charte Graphique Aide à la rédaction & Charte Graphique v.0 06/05 Table des matières Comment écrire un article?... Conseils pour la rédaction... o Les menus... o Les caractères (police, couleur, typographie)... 4 o Les

Plus en détail

Web HTML. Arnaud Sallaberry arnaud.sallaberry@univ- montp3.fr

Web HTML. Arnaud Sallaberry arnaud.sallaberry@univ- montp3.fr Web HTML Arnaud Sallaberry arnaud.sallaberry@univ- montp3.fr 1 Plan Fonc-onnement du web Le langage HTML 2 Web : Introduc;on Réseau : mise en commun de ressources (données, imprimantes, ) Internet : Interconnexion

Plus en détail

HTML et page Web diaporama

HTML et page Web diaporama but du diaporama principe général le titre ainsi qu une section contenant un paragraphe le titre ainsi qu un paragraphe dont le texte est centré une section dont le texte est coloré en rouge (couleur définie

Plus en détail

HTML CSS Fiche numéro 14

HTML CSS Fiche numéro 14 HTML CSS Fiche numéro 14 Sources : https://openclassrooms.com/ L'ancien site 2minuteslearning.fr qui à malheureusement disparu https://www.vectorskin.com/balises-html5/ Positionnement en CSS Avant de nous

Plus en détail

Formation HTML / CSS. ar dionoea

Formation HTML / CSS. ar dionoea Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations

Plus en détail

Viatique. pour la création. de site. avec Kompozer. à l usage des. débutants

Viatique. pour la création. de site. avec Kompozer. à l usage des. débutants Viatique pour la création de site avec Kompozer à l usage des débutants Avant de commencer... 3 Création d une page simple... 3 Informations sur la page... 3 Apparence... 3 Sauvegarde... 3 Saisie du contenu...

Plus en détail

Initiation aux technologies de l information

Initiation aux technologies de l information Initiation aux technologies de l information Frédéric Gava (MCF) gava@univ-paris12.fr LACL, bâtiment P2 du CMC, bureau 221 Université de Paris XII Val-de-Marne 61 avenue du Général de Gaulle 94010 Créteil

Plus en détail

TP 8 : Créer son site web de D à Z...

TP 8 : Créer son site web de D à Z... TP 8 : Créer son site web de D à Z... Présentation Nous allons tenter de créer en 2 ou trois séances un site WEB de toute pièce. Vous devrez choisir un thème (ce que vous voulez, ou presque...). Vous établirez

Plus en détail

Introduction au Web. Andrea G. B. Tettamanzi. Université de Nice Sophia Antipolis Département Informatique

Introduction au Web. Andrea G. B. Tettamanzi. Université de Nice Sophia Antipolis Département Informatique Introduction au Web Andrea G. B. Tettamanzi Université de Nice Sophia Antipolis Département Informatique andrea.tettamanzi@unice.fr Andrea G. B. Tettamanzi, 2013 1 CM - Séance 2 HTML Andrea G. B. Tettamanzi,

Plus en détail

Développement Web (NFA0016)

Développement Web (NFA0016) Développement Web (NFA0016) seconde session Avril 2011 Durée : 3h Modalités : Tous documents autorisés. Calculatrices, ordinateurs, téléphones portables interdits. Remarque : Pour ne pas surcharger, on

Plus en détail

LISTE DES BALISES EN HTML5

LISTE DES BALISES EN HTML5 LISTE DES BALISES EN HTML5 AIDE-MÉMOIRE HTML&CSS www.multiforme.eu BALISE DEFINITION DES BALISES DESCRIPTION Pour un commentaire L inclusion du DOCTYPE dans un document HTML assure

Plus en détail

Les CSS un menu horizontal Nous créons deux dossiers un_niveau et multi_niveaux comprenant :

Les CSS un menu horizontal Nous créons deux dossiers un_niveau et multi_niveaux comprenant : Les CSS un menu horizontal Nous créons deux dossiers un_niveau et multi_niveaux comprenant : style_div.css : contiendra toutes les informations relatives au positionnement de nos différents blocs. positionnement.php

Plus en détail

Mémo CSS 3. Exemple : h1 concerne toutes les éléments titres de niveau 1 <h1> de la page.

Mémo CSS 3. Exemple : h1 concerne toutes les éléments titres de niveau 1 <h1> de la page. Mémo CSS 3 Les sélecteurs simples balise permet de viser tous les éléments d un certain type de balise. Exemple : h1 concerne toutes les éléments titres de niveau 1 de la page..maclasse permet de

Plus en détail

Guide du rédacteur. La mise en page d un contenu sur Internet est une opération qui doit avoir une certaine discipline et une réflexion.

Guide du rédacteur. La mise en page d un contenu sur Internet est une opération qui doit avoir une certaine discipline et une réflexion. Guide du rédacteur A Mise en page : La mise en page d un contenu sur Internet est une opération qui doit avoir une certaine discipline et une réflexion. En effet, un internaute ne lit pas le contenu d

Plus en détail

Introduction au langage HTML

Introduction au langage HTML Introduction au langage HTML Thibault MARZAIS, Mathieu LACROIX, Antoine VACAVANT marzais@llaic3.u-clermont1.fr mathieu.lacroix@isima.fr antoine.vacavant@liris.cnrs.fr 24 et 25 Avril 2006 /80 Thibault MARZAIS,

Plus en détail

Les raccourcis typographiques de SPIP

Les raccourcis typographiques de SPIP Les raccourcis typographiques de SPIP Depuis la version 1.7, il y a des contributions pour augmenter les possibilités de raccourcis typographiques de SPIP. 1- Les raccourcis "natifs" SPIP est basé sur

Plus en détail

Contenu Word 2003, Base et intermédiaire

Contenu Word 2003, Base et intermédiaire Contenu Word 2003, Base et intermédiaire Module 1 Notions élémentaires de Windows XP Découvrir Windows XP Copie de disquettes avec Windows XP Configuration de Windows XP Définir les paramètres régionaux

Plus en détail

Développement web avec XHTML et CSS

Développement web avec XHTML et CSS Déveloement web avec XHTML et CSS Pierre Dorbais Table des matières I Fond avec XHTML 3 1 Une age minimale 3 2 Les commentaires 3 3 Paragrahes 3 4 Titres 3 5 Saut de ligne et ligne horizontale 4 6 Mise

Plus en détail

1 - travail en pleine page du navigateur

1 - travail en pleine page du navigateur Utilisation du bandeau Fckeditor «TEXTE ENRICHI» dans les pages du site internet Version 1 du 7 avril 2009 Bandeau de l éditeur Fckeditor 1 - travail en pleine page du navigateur Pour faciliter le travail

Plus en détail

Introduction aux technologies du Web. Mercredi 12 décembre 2007 Patrice Pillot

Introduction aux technologies du Web. Mercredi 12 décembre 2007 Patrice Pillot Introduction aux technologies du Web Mercredi 12 décembre 2007 Patrice Pillot http://www.toulibre.org Plan Définitions Les fondements du Web Problèmes et solutions Le Web tendance Définitions Le World

Plus en détail

TP 10/03/2015. LIEN UTILE : 1. Que signifie XHTML?

TP 10/03/2015. LIEN UTILE :  1. Que signifie XHTML? TP 10/03/2015 LIEN UTILE : http://xhtml.le-developpeur-web.com/ne_plus_utiliser-xhtml.php 1. Que signifie XHTML? extensible HyperText Markup Language 2. XHTML 1.0 est devenu une recommandation officielle

Plus en détail

HTML 5 CSS 3 Responsive

HTML 5 CSS 3 Responsive HTML 5 CSS 3 Responsive Programme de formation Microsoft Partner France Belgique Suisse - Canada Formez vos salariés pour optimiser la productivité de votre entreprise Dernière mise à jour : Avril 2014

Plus en détail

Écrire des maths sur internet. I Comparaison de méthodes. 1 Les images. a Avantage. b Inconvénients

Écrire des maths sur internet. I Comparaison de méthodes. 1 Les images. a Avantage. b Inconvénients Écrire des maths sur internet Note de style : les noms des applications sont en italiques, les codes sont en police à chasse fixe et les copies d écran sur fond gris. Les liens [en] sont en anglais, les

Plus en détail

Université Paris Dauphine Outils de l Internet 2011-2012 TP 5 : LES CADRES

Université Paris Dauphine Outils de l Internet 2011-2012 TP 5 : LES CADRES TP 5 : LES CADRES Le contenu de la page d'accueil d'un site ne constitue que la subdivision en plusieurs frames. Les codes sources de chacune des frames seront contenus dans d'autres fichiers HTML. La

Plus en détail

Bac Professionnel Systèmes Electroniques Numériques

Bac Professionnel Systèmes Electroniques Numériques DR - Création d un site WEB TP Le HTML Pour créer un site web, on doit indiquer des informations à l'ordinateur. Il ne suffit pas de taper simplement le texte qu'il y aura dans son site, il faut aussi

Plus en détail

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet

Création de sites web. INF0326 Outils bureautiques, logiciels et Internet Création de sites web INF0326 Outils bureautiques, logiciels et Internet Plan Création de pages web HTML et CSS Création de sites web avec WordPress Créer des pages web Partie 1 Système hypertexte Un système

Plus en détail

Table des matières 1. Editions ENI - Toute reproduction interdite

Table des matières 1. Editions ENI - Toute reproduction interdite Table des matières 1 Introduction L'Internet aujourd'hui...7 Le World Wide Web Consortium et les standards...7 Les logiciels de conception de sites web...7 L'objectif du livre...8 Interface de conception

Plus en détail

Mettre en forme des caractères et des paragraphes. WORD Mettre en forme du texte

Mettre en forme des caractères et des paragraphes. WORD Mettre en forme du texte Mettre en forme des caractères et des paragraphes WORD Mettre en forme du texte Mettre en forme du texte SOMMAIRE : I METTRE EN FORME DES CARACTÈRES... 3 1.1 - Modifier la police de caractère... 3 1.2

Plus en détail

TD2 : XHTML/CSS. Université Bordeaux 1 Licence 3 Informatique

TD2 : XHTML/CSS. Université Bordeaux 1 Licence 3 Informatique Université Bordeaux 1 T.D. Licence 3 Informatique 2007 2008 TD2 : XHTML/CSS Le but de ce TP est d apprendre les bases du langage XHTML. Voici deux sites de référence pour le XHTML et le HTML : http://www.w3.org/tr/xhtml1

Plus en détail

HTML : Mini tutoriel

HTML : Mini tutoriel HTML : Mini tutoriel I. Introduction HTML est un langage de formatage de texte adapté à la conception de pages web. Le HTML est un langage balisé, fondé en particulier sur la notion de lien hypertexte,

Plus en détail

Introduction. Introduction et HTML. A l issue de ce module vous devriez... Ce cours n est pas...

Introduction. Introduction et HTML. A l issue de ce module vous devriez... Ce cours n est pas... Introduction et HTML Technologies du Web 1 Jean-Christophe Routier Licence 1 SESI Université Lille 1 Introduction Objectifs : Présentation des bases de la création de documents web par la découverte des

Plus en détail