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

Save this PDF as:
 WORD  PNG  TXT  JPG

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

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

Transcription

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

2 Sommaire 1. HTML 5 2. L entête HTML 3. Le corps ou <body> 4. L encodage et les accents

3 1. HTML 5

4 1. HTML Définition et historique 1.2. Définition d une balise 1.3. Structure d un document 1.4. Doctype et box model 1.5. Les commentaires HTML

5 1.1. Définition et historique Hyper Text Markup Language Langage client Langage à balisage Possibilité de mise en forme basique Version 4.01 répandue, v5 en cours HTML 5, l avenir du web

6 1.1. Définition et historique HTML 1.0 Tim-Berners Lee au CERN Pas de réelles spécifications Vers 1993 : peu de fonctionnalités Liens hypertextes et images déjà présents HTML Apparition des tableaux HTML 3.0 / 3.2 Début 1997 Nouvelles balises Introduction à la version qui suit

7 1.1. Définition et historique HTML 4.0 Fin 1997 Version majeure du langage Gestion des scripts, des CSS et des frames 3 variantes (DTD : Document Type Documentation) Strict => DTD allégée Transitional => DTD étendue avec la version 3.2 Frameset => Support des frames Version 4.01 : corrections mineures Version la plus utilisée

8 1.1. Définition et historique XHTML 1.0 et 1.1 extensible HTML 2000/2006 Notion d XML Reformulation de HTML 4 Seule la syntaxe change : plus rigide Code plus propre et normalisé

9 1.1. Définition et historique HTML 5.0 et XHTML /2012 : Pas encore terminée Modifications majeures Doctype et encodage Nouvelles balises Suppression de balises et des frames A suivre de très près!

10 1. HTML 5 c est quoi? 1.1. Définition et historique 1.2. Définition d une balise

11 1.2. Définition d une balise La balise Délimitée par < et > <html> Elément ajouté au texte brut Interprétation par le navigateur Peut être vue comme une boite Les attributs Couple : nom="valeur" Informations complémentaires Certains sont génériques, d autres spécifiques selon les balises Deux syntaxes de balises Balises normales Balises auto fermantes

12 1.2. Définition d une balise Types de balises Contenu : «bloc», «en ligne» Metadonnées HTML 5 : Content Models Balises normales Balises ouvrantes/fermantes Raisonnement par couple Différenciation par le «/» Balises auto fermantes Balises dites «vides» Fermées par />

13 1.2. Définition d une balise Balise «bloc» Boite pouvant contenir du texte ou d autres boites Sauf exception (<p>) Format naturel (par défaut) Positionnement : les unes en dessous des autres Taille : largeur de la balise «parent» Petite phrase Autre phrase Encore une phrase

14 1.2. Définition d une balise Balise «en ligne» ou «inline» Boite devant contenir du texte ou balises «inline» Format naturel (par défaut) Positionnement : les unes à coté des autres Taille : largeur de leur contenu Petite phrase Autre phrase Encore une phrase

15 1.2. Définition d une balise Imbrication des balises Notion d arbre Balise «parent», balise «enfant» Respect de la hiérarchie Première ouverte, dernière fermée Non respect problème (affichage, css etc.) Indentation!

16 1.2. Définition d une balise Exemple HTML

17 1.2. Définition d une balise Catégorisation HTML 5 : Content Models Metadata : informatif Sectioning : grandes zones d un document Heading : hiérarchie des titres Phrasing : flux de textes Embedded : contenu embarqué (vidéo, audio ) Interactive : interaction utilisateur (bouton, contrôle formulaire )

18 1.2. Définition d une balise Metadata <title>, <link>, <script>, <style> Sectioning <article>, <aside>, <nav>, <section> Heading <h1> à <h6> et <hgroup> Phrasing <img>, <strong>, <input> Embedded <audio>, <canvas>, <embed>,<iframe>, <object>, <video> Interactive <a>, <button>

19 1.2. Définition d une balise Notion importante Différence entre le fond et la forme HTML définit le fond «Bloc», «en ligne» liaison avec le CSS Notion d appartenance CSS définit la forme Possède des règles et des positionnements par défaut Un «bloc» peut avoir un rendu visuel «en ligne» Et inversement Notion d apparence ou de comportement

20 1. HTML 5 c est quoi? 1.1. Définition et historique 1.2. Définition d une balise 1.3. Structure d un document

21 1.3. Structure d un document (X)HTML 5 Garde l esprit et la structure de base Nouvelle organisation du corps Les éléments obligatoires Balise <html> DOCTYPE Balise <head> : entête du document Balise <body> : corps du document

22 1.3. Structure d un document Balise <html> Unique dans la page Nœud de base Arbre du document DOM : Document Object Model Création d une arborescence Standardisation pour le XML Utilisé en Javascript

23 1.3. Structure d un document Code de base HTML 5

24 1.3. Structure d un document Code de base XHTML 5

25 1. HTML 5 c est quoi? 1.1. Définition et historique 1.2. Définition d une balise 1.3. Structure d un document 1.4. Doctype et box model 1.5.

26 1.4. Doctype et box model Doctype Définition de la sémantique utilisée Essentielle pour le navigateur Insensible à la casse Ne jamais l oublier! Mode Quirks Box Model Version de compatibilité Soucis de CSS et de mise en forme (historique)

27 1.4. Doctype et box model Illustration du mode Quirks Possibilité de le gérer en CSS Propriété : box-sizing De plus en plus utilisé Loin d être idiot comportement plus naturel

28 1.4. Doctype et box model

29 1. HTML Définition et historique 1.2. Définition d une balise 1.3. Structure d un document 1.4. Doctype et box model 1.5. Les commentaires HTML

30 1.5. Les commentaires HTML Les commentaires Zone dans le code ne s affichant pas à l écran Non interprétés par les robots Donnent des informations sur le code Balises spéciales : <!-- --> Développeur/intégrateur Bon code code commenté En théorie En pratique rarement commenté Manque de temps HTML facilement compréhensible si bien codé

31 1.5. Les commentaires HTML Code HTML Attention! Commentaires différents CSS / HTML / Javascript

32 2. L entête HTML

33 2. L entête HTML 2.1. Utilité du <head> 2.2. La balise <title> 2.3. Les balises «meta» 2.4. Les styles CSS 2.5. Les scripts 2.6. Exemple de <head>

34 2.1. Utilité du <head> Balise essentielle et obligatoire Titre de la page Gestion des «meta» Balises informatives Equivalents de l entête HTTP SEO : description, robots etc. Scripts Feuilles de styles CSS Javascript

35 2. L entête HTML 2.1. Utilité du <head> 2.2. La balise <title>

36 2.2. La balise <title> Balise essentielle et obligatoire Titre de la page Lisible, informatif et moins de 70 caractères Référencement Titre des résultats de recherche Importance des mots clés Navigateur Titre de la barre de titre, les favoris, les onglets

37 2.2. La balise <title>

38 2. L entête HTML 2.1. Utilité du <head> 2.2. La balise <title> 2.3. Les balises «meta»

39 2.3. Les balises «meta» Obligatoirement dans le <head> Nombre très important de meta Beaucoup sont inutiles Validation W3C : meta pour l encodage

40 2.3. Les balises «meta» Types de meta Meta «name» : informations clients Document, auteur, robots Meta «http-equiv» : informations serveurs Notion de référencement Règles changent souvent Meta «keywords», «description» Baisse d importance

41 2.3. Les balises «meta» Les meta «name» Balises informatives Donnent des détails sur le document Donnent des détails sur l auteur, les outils etc. Deux attributs «name» : nom de la balise «content» : valeur de la balise Très peu sont réellement utiles Exception : Meta description Référencement, Facebook

42 2.3. Les balises «meta» Les meta «http-equiv» Reprise des informations serveurs Pas obligatoire de les spécifier Deux attributs «http-equiv» : paramètre HTTP «content» : valeur de la balise Quelle est l utilité? Pour l encodage navigateur Absence d information sur la configuration serveur Pas forcement utile

43 2.3. Les balises «meta» Equivalent HTML Entête HTTP

44 2.3. Les balises «meta» Meta name «robots» Pour les robots d indexation : Google, Yahoo, Bing Valeurs possibles all, index, follow, archive none, noindex, nofollow, noarchive Remplaçable par un fichier Robots.txt À la racine du site

45 2.3. Les balises «meta» Les meta spécifiques Meta name non générique ou propriétaire Facebook => Open Graph Google Webmaster Tools Outil très utile pour le suivi Lien avec le référencement (encore!)

46 2. L entête HTML 2.1. Utilité du <head> 2.2. La balise <title> 2.3. Les balises «meta» 2.4. Les styles CSS

47 2.4. Les styles CSS Cascading Style Sheets Langage client Mise en forme visuelle Modes d intégration dans le <head> Avec la balise <style> Avec la balise <link> Avec la

48 2.4. Les styles CSS La balise <style> Définition du code CSS dans la page Duplication du code à éviter Attribut «type» : déprécié en HTML5 Exemple HTML

49 2.4. Les styles CSS La balise <link> Liaison avec un document (CSS, RSS etc.) CSS externe Attributs : type, rel, href et media Exemple HTML

50 2.4. Les styles CSS La Liaison avec un document CSS externe Utilisation de la base <style> Exemple HTML

51 2.4. Les styles CSS <link> Vieux débat Fonctionnement identique même rendu Meilleur interopérabilité avec les vieux navigateurs Perte de performance possible au chargement <link> Chargement en parallèle Méthode à utiliser

52 2. L entête HTML 2.1. Utilité du <head> 2.2. La balise <title> 2.3. Les balises «meta» 2.4. Les styles CSS 2.5. Les scripts 2.6.

53 2.5. Les scripts Contrôler les éléments HTML Les formulaires Parcours du DOM Dynamisation du contenu Javascript, VBScript Mode d intégration dans le <head> Avec la balise <script>

54 2.5. Les scripts La balise <script> Liaison avec un document javascript Code interne Attribut «type» : déprécié en HTML5 Exemple HTML

55 2. L entête HTML 2.1. Utilité du <head> 2.2. La balise <title> 2.3. Les balises «meta» 2.4. Les styles CSS 2.5. Les scripts 2.6. Exemple de <head>

56 2.6. Exemple de <head>

57 3. Le corps ou <body>

58 3. Le corps ou <body> 3.1. Les balises structurantes 3.2. Les titres, les textes et la mise en forme 3.3. Les images 3.4. Les liens 3.5. Les tableaux 3.6. Les listes 3.7. Les formulaires 3.8. Les frames et iframe

59 3.1. Les balises structurantes Objectifs : organiser le contenu Merci HTML 5! Meilleur logique de codage HTML 4 <div> Balise à tout faire HTML 5 <div> : sera toujours utile! <header>, <footer>, <article>, <aside>, <nav>, <section> Sortes de <div> améliorées

60 3.1. Les balises structurantes <header> Entête d une section ou d une page <footer> Pied d une section ou d un page <article> Texte, portion de contenu <aside> Contenu annexe qui appuie le contenu principal <nav> Ensemble de liens de navigation <section> Section du document

61 3.1. Les balises structurantes Exemple de structure HTML 5

62 3.1. Les balises structurantes Equivalent HTML 5

63 3. Le corps ou <body> 3.1. Les balises structurantes 3.2. Les titres, les textes et la mise en forme

64 3. Le corps ou <body> Les titres <h1> à <h6> HTML 5 : <hgroup> <h1> à <h6> Définition des titres de la page <hgroup> Plus complexe Permet d associer des sous-titres à des titres Ne casse pas l arbre des titres

65 3. Le corps ou <body> Exemple HTML

66 3. Le corps ou <body> Les textes <p>, <span>, <br /> Possibilité de mettre du texte dans les autres balises <p> Paragraphe de textes Contient du texte et/ou des balises «inline» <span> Permet de cibler un morceau de texte <br /> Saut de ligne (break)

67 3. Le corps ou <body> La mise en forme Ne pas trop l utiliser Dédiée au CSS <i>, <u>, <b>, <em>, <strong> Les navigateurs appliquent un style CSS par défaut Remplacement possible par <span> et du CSS Souplesse sur le graphisme <em>, <strong> Mettre en avant certains éléments Utilité en référencement?

68 3. Le corps ou <body> Exemple HTML Rappel <p> est de type «bloc» Pas de <p> dans un autre <p>

69 3. Le corps ou <body> 3.1. Les balises structurantes 3.2. Les titres, les textes et la mise en forme 3.3. Les images

70 3.3. Les images Les images Afficher une image dans la page Attributs src : chemin vers le fichier image (gif, png, jpeg ) Alt : Texte alternatif référencement et navigation title : titre de l image info-bulle, référencement width/height : dimension de l image Exemple HTML

71 3. Le corps ou <body> 3.1. Les balises structurantes 3.2. Les titres, les textes et la mise en forme 3.3. Les images 3.4. Les liens

72 3.4. Les liens Les liens Rendre un texte cliquable Envoyer vers une page Envoyer dans la page ancre Peuvent contenir HTML 4 : que des éléments inline et du texte HTML 5 : tout Attributs : href : URL de la page OU cible de l ancre (#) title : titre du lien info-bulle, référencement Exemple HTML

73 3. Le corps ou <body> 3.1. Les balises structurantes 3.2. Les titres, les textes et la mise en forme 3.3. Les images 3.4. Les liens 3.5. Les tableaux

74 3.5. Les tableaux Les tableaux Organiser du contenu en lignes et en colonnes Trois balises de structure facultative thead : Entête du tableau tbody : corps du tableau tfoot : Pied du tableau Balises <table> : le tableau <tr> : ligne <td> : cellule <th> : cellule d entête Possibilité de fusion de cellules attributs (rowspan, colspan)

75 3.5. Les tableaux Mois CA Janvier 750 Février 250 Total 1000

76 3.5. Les tableaux Mois CA Janvier 750 Février 250 Total 1000

77 3.5. Les tableaux Attention! A utiliser uniquement pour les données tabulaires Tableaux de stats, chiffres etc. Tableau comme structure de page Fausse bonne idée Particulier au niveau CSS Structure HTML en tableau peu souple pour la mise en forme Utilisation ponctuelle et ciblée

78 3. Le corps ou <body> 3.1. Les balises structurantes 3.2. Les titres, les textes et la mise en forme 3.3. Les images 3.4. Les liens 3.5. Les tableaux 3.6. Les listes

79 3.6. Les listes Les listes Regrouper des items de même nature Ordonnancer ou non les éléments Notion de hiérarchie Types de listes Liste à puces : <ul> Liste ordonnées : <ol> Liste de définition : <dl><dt><dd> Liste de répertoires : <dir> Liste de menus : <menu> Eléments des listes sauf liste de définitions : Balise <li> </li>

80 3.6. Les listes Liste à puces ou liste non ordonnées La plus courante Utile pour créer des menus de navigation Possibilité de changer la forme de la puce En CSS Disc, circle, square ou image spécifique

81 3.6. Les listes Type DISC Type CIRCLE Type SQUARE

82 3.6. Les listes Liste ordonnées Puces remplacées par des lettres/chiffres Utile pour les sommaires Possibilité de changer la forme de la puce En CSS decimal chiffres arabes upper-roman lower-roman upper-alpha lower-alpha chiffres romains majuscules chiffres romains minuscules lettres alphabet majuscules lettres alphabet minuscules

83 3.6. Les listes Type décimal Type Romain Type Alphabet

84 3.6. Les listes Liste de définitions Ensemble de termes Une ou plusieurs définitions Trois balises <dl> : groupement de définitions <dt> : terme à définir <dd> : définition

85 3.6. Les listes

86 3.6. Les listes Liste de menus / liste de répertoires Très peu utilisées Même fonctionnement que les autres Puces identique à <ul>

87 3. Le corps ou <body> 3.1. Les balises structurantes 3.2. Les titres, les textes et la mise en forme 3.3. Les images 3.4. Les liens 3.5. Les tableaux 3.6. Les listes 3.7. Les formulaires 3.8.

88 3.7. Les formulaires Les formulaires Envoyer des données au serveur Type d envoi : GET, POST Différents champs de saisies possibles text, checkbox, radio, select, textarea, password HTML 5 : de nouveaux champs Date, datetime, color, range Essentiels dans un site web Gérer par les développeurs

89 3.7. Les formulaires Code HTML Possibilité d avoir plusieurs formulaires Imbrication impossible! Conflit lors des envois Non respect de la norme

90 3.7. Les formulaires

91 3.7. Les formulaires

92 3.7. Les formulaires

93 3. Le corps ou <body> 3.1. Les balises structurantes 3.2. Les titres, les textes et la mise en forme 3.3. Les images 3.4. Les liens 3.5. Les tableaux 3.6. Les listes 3.7. Les formulaires 3.8. Les frames et iframe

94 3.8. Les frames et iframe Les frames Découpage de la fenêtre en plusieurs sous cadres <frame>, <frameset> A ne pas utiliser Sortie de la norme HTML 5 Incompatible avec le référencement Incompatible avec de bonnes méthodes Iframe Inline frame : dans le flux de la page Intègre une page externe dans la page courante Dans la norme HTML 5 Utile pour données externes : Youtube, Dailymotion

95 4. Encodage et accents

96 4. Encodage et accents 4.1. L encodage 4.2. Les caractères spéciaux

97 4.1. L encodage Problème récurrent Mauvais affichage Texte sans les bons accents Utilité de la balise «charset» Vérifier l encodage des pages dynamiques Base de données Fichiers php : Voir avec les développeurs

98 4.1. L encodage Exemple n 1 Fichier encodé en ISO Charset spécifié en UTF-8

99 4.1. L encodage Exemple n 2 Fichier encodé en UTF-8 Charset spécifié en ISO

100 4. Encodage et accents 4.1. L encodage 4.2. Les caractères spéciaux

101 4.2. Les caractères spéciaux Entité HTML Diminue les problèmes d encodage Interprétée par le navigateurs Adaptation en fonction du charset Gestion des accents et des lettres spécifiques Entité HTML : é é Numéro Unicode : é è Gestion des caractères spéciaux Parenthèses, guillemets etc.

102 4.2. Les caractères spéciaux

103 4.2. Les caractères spéciaux

104 Conclusion

105 Conclusion Quatre éléments principaux Doctype, <html>,<head>, <body> Les types de balises Ouvrantes/fermantes, auto-fermantes Balises «bloc», «inline» Content Model HTML 5 Lié au CSS Balises <title>, les «meta» Pensez référencement Respect des règles de codage et d encodage Documentez vous, codez, essayez!

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

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

Mémento. Balises de premier niveau

Mémento. Balises de premier niveau Mémento 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 page web. principale

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

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

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

Principales balises HTML5

Principales balises HTML5 Principales balises HTML5 RAPPEL : Tout document HTML commence par le DOCTYPE suivi de la balise , et s achève avec la balise . DOCTYPE et HTML : Le DOCTYPE : La déclaration

Plus en détail

Introduction à HTML: HyperText Markup Language

Introduction à HTML: HyperText Markup Language CREATION WEB HTML ET CSS Introduction à HTML: Le HTML, HyperText Markup Language, est un langage de balisage qui définit la structure logique d un document WWW diffusé sur le Web. La mise en forme de la

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

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

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

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

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

Chapitre 7. extended HyperText Markup Language (XHTML)

Chapitre 7. extended HyperText Markup Language (XHTML) Chapitre 7 extended HyperText Markup Language (XHTML) Objectifs Le Web statique : Du HTML au XHTML Apprendre à manipuler les éléments XHTML Attention : projet évalué plutôt sur la «qualité» du code XHTML

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

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

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

Conception de Sites Web dynamiques HTML HTML XHTML 23/09/2008. Conception de Site Webs Interactifs. Cours 3. Patrick Reuter

Conception de Sites Web dynamiques HTML HTML XHTML 23/09/2008. Conception de Site Webs Interactifs. Cours 3. Patrick Reuter Conception de Site Webs Interactifs Conception de Sites Web dynamiques Cours 3 Patrick Reuter Déroulement Pages web statiques (HTML/XHTML) Mise en forme avec feuilles de styles (CSS) Programmationcôté

Plus en détail

Introduction aux technologies WEB. Pr. Hajar IGUER

Introduction aux technologies WEB. Pr. Hajar IGUER Introduction aux technologies WEB Pr. Hajar IGUER hajar.iguer@uic.ac.ma Fonctionnement du WEB 1. Le navigateur effectue une requête spécifiée à travers l URL 2. Le serveur retourne un flot de données 3.

Plus en détail

Développement d Applications Web

Développement d Applications Web Développement d Applications Web HTML : HyperText Markup Language Mehdi BENZINE benzinemehdi@gmailcom Département d Informatique Faculté des Sciences Université FERHAT ABBAS Sétif I 2015/2016 M BENZINE

Plus en détail

Programmation PHP Septembre 2010

Programmation PHP Septembre 2010 IFT1147 Programmation Serveur Web avec PHP Un bref survol de HTML et CSS HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,

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

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

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

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

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

IAE - Web Marketing. Créer un site internet «simple» Publier un site internet Référencer un site internet. Olivier Toscano Gérant WebCMS Sàrl

IAE - Web Marketing. Créer un site internet «simple» Publier un site internet Référencer un site internet. Olivier Toscano Gérant WebCMS Sàrl IAE - Web Marketing Créer un site internet «simple» Publier un site internet Référencer un site internet Olivier Toscano Gérant WebCMS Sàrl HTML HTML est un langage à balisage Les balises permettent de

Plus en détail

Les Fiches pratiques Coin-Web

Les Fiches pratiques Coin-Web Le langage HTML Sommaire 1. Définitions...1 2. Remarque liminaire : l organisation du site...2 3. La page...3 4. L entête...3 5. Le corps de la page...3 a. Le texte...3 i. Titres et paragraphes...3 ii.

Plus en détail

Séance 1. Bases et HTML

Séance 1. Bases et HTML Séance 1 Bases et HTML Nils Schaefer (nils.schaefer@sn-i.fr) Serveur Web Hébergement des sites Web Utilisation du port 80 Réception des requêtes HTTP des navigateurs Traitement des requêtes HTTP Exemples

Plus en détail

DAW Développement Applications Web. Ouadfel Salima Site du cours:

DAW Développement Applications Web. Ouadfel Salima Site du cours: DAW Développement Applications Web Ouadfel Salima Site du cours: http://salimaouadfel.e-monsite.com/ Développement d Applications Web L'objectif de ce module est: 1. S'initier à la programmation Web en

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

HIVER 2017 COURS INF2005 : PROGRAMMATION WEB. Exercices de Programmation Web, Laboratoires et TP

HIVER 2017 COURS INF2005 : PROGRAMMATION WEB. Exercices de Programmation Web, Laboratoires et TP HIVER 2017 COURS INF2005 : PROGRAMMATION WEB Exercices de Programmation Web, Laboratoires et TP Professeur : Abdel OBAID Ateliers : Ruben Chambilla Février 2017 TABLEAU DES MATIÈRES 1. Introduction...1

Plus en détail

Écriture textuelle de documents structurés Structure notée grâce à des balises <section>... </section> SGML : Standard Generalized Markup Language

Écriture textuelle de documents structurés Structure notée grâce à des balises <section>... </section> SGML : Standard Generalized Markup Language HTML Langages à balises Écriture textuelle de documents structurés Structure notée grâce à des balises ... SGML : Standard Generalized Markup Language méta-langage applications : documentation

Plus en détail

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd">

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/tr/xhtml1/dtd/xhtml1- transitional.dtd> IUT Nice Côte d Azur Prog. Web Département informatique 2007-2008 TP1 HTML ET XHTML 1. Le document xhtml minimal Le langage xhtml est la dernière évolution du html. C est une version plus stricte du html,

Plus en détail

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

I/ Une première très brève introduction au WEB : 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

Plus en détail

Introduction au Web. Par Elena CABRIO. Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi

Introduction au Web. Par Elena CABRIO. Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi Introduction au Web Le langage HTML Par Elena CABRIO Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi 27/09/2017 Introduction au Web Architecture du Web ELENA CABRIO 1 Le

Plus en détail

Guide Utilisation HTML et Microsoft FrontPage

Guide Utilisation HTML et Microsoft FrontPage Guide Utilisation HTML et Microsoft FrontPage 4 4me Année Sciences Informatique Année scolaire : 2016-2017 I. Introduction au langage HTML HTML est un langage de description. Il permet d'enrichir un texte

Plus en détail

INTRODUCTION AU LANGAGE HTML ET CSS

INTRODUCTION AU LANGAGE HTML ET CSS INTRODUCTION AU LANGAGE HTML ET CSS Sur le Web il est d usage de séparer structure et contenu d une page (html) de son style (css) Quelques liens : http://validator.w3.org/:pour vérifier que le est conforme

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

Francis Draillard. Premiers pas HTML 5 CSS 3 & 6 e édition. Mise à jour. Groupe Eyrolles, 2006, 2008, 2010, 2012, 2013, 2015, ISBN :

Francis Draillard. Premiers pas HTML 5 CSS 3 & 6 e édition. Mise à jour. Groupe Eyrolles, 2006, 2008, 2010, 2012, 2013, 2015, ISBN : Francis Draillard Premiers pas en CSS 3 & HTML 5 6 e édition Mise à jour Groupe Eyrolles, 2006, 2008, 2010, 2012, 2013, 2015, ISBN : 978-2-212-13944-0 Table des matières 1. INTRODUCTION AU HTML ET AUX

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

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

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

BDW1 - Programmation web - HTML

BDW1 - Programmation web - HTML BDW1 - Programmation web - HTML Fabien Duchateau fabien.duchateau [at] univ-lyon1.fr Université Claude Bernard Lyon 1 2017-2018 http://liris.cnrs.fr/fabien.duchateau/bdw1/ Positionnement dans BDW1 BDW1

Plus en détail

Introduction à HTML et CSS

Introduction à HTML et CSS ENS de Cachan Introduction à HTML et CSS Françoise Tort Chargement d'une page Web h"p://site.chemin./page.html navigateur requête.html.css.jpg.mp3 serveur web fichiers Le navigateur web traduit les pages,

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

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

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

Ecrire des pages web = pages XHTML = le contenu et sa structure. feuilles de style = page CSS = la forme (couleur fonte cadre... ) (cours prochain)

Ecrire des pages web = pages XHTML = le contenu et sa structure. feuilles de style = page CSS = la forme (couleur fonte cadre... ) (cours prochain) introduction Ecrire des pages web = pages XHTML = le contenu et sa structure (ce cours) feuilles de style = page CSS = la forme (couleur fonte cadre... ) (cours prochain) Xhtml = Successeur de HTML compatible

Plus en détail

LE RECAP ಠ_ಠ. C est trop facile!

LE RECAP ಠ_ಠ. C est trop facile! LE RECAP ಠ_ಠ C est trop facile! POUR COMMENCER... Quand on commence un fichier HTML (HyperText Markup Language), on écrit en premier le DOCTYPE!! sans oublier les balises

Plus en détail

Introduction aux technologies WEB. Pr. Hajar IGUER

Introduction aux technologies WEB. Pr. Hajar IGUER Introduction aux technologies WEB Pr. Hajar IGUER hajar.iguer@uic.ac.ma LES BALISES Les attributs Les balises HTML peuvent avoir des attributs. Chaque balise accepte uniquement les attributs qui la concerne.

Plus en détail

GTI525 Technologies de développement Internet

GTI525 Technologies de développement Internet GTI525 Technologies de développement Internet Langage de balisage hypertexte (HTML) GTI525, Été 2013 HTML de base Contenu Basé sur tutoriel http://www.w3schools.com/html/default.asp Bonnes pratiques GTI525,

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 Faites évoluer le design de vos sites web (3e édition)

HTML5 et CSS3 Faites évoluer le design de vos sites web (3e édition) Introduction A. La création de sites web 18 B. Les langages 18 C. Le livre 18 1. Pour les designers web 18 2. Le contenu 18 Chapitre 1 : L évolution du HTML et des CSS A. Rapide historique de l Internet

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

L1 - Informatique et internet

L1 - Informatique et internet L1 - Informatique et internet Hervé Le Crosnier laboratoire GREYC - Université de Caen! herve.lecrosnier@unicaen.fr http://ensweb.users.info.unicaen.fr HTML + CSS Listes, images et liens Page HTML

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

LANGAGE HTML : STRUCTURE GENERALE, FORMATAGE DU TEXTE ET INSERTION D IMAGE

LANGAGE HTML : STRUCTURE GENERALE, FORMATAGE DU TEXTE ET INSERTION D IMAGE ICN ICN Informatique et Création Numérique LANGAGE HTML : STRUCTURE GENERALE, FORMATAGE DU TEXTE ET INSERTION D IMAGE 1 MISE EN SITUATION 1.1 Page Web «Une page Web est une ressource du World Wide Web

Plus en détail

Maria Georgescul ETI, Université de Genève. Documents Structurés Multilingues (XML) XML = méta-langage. Plan du cours n 2.

Maria Georgescul ETI, Université de Genève. Documents Structurés Multilingues (XML) XML = méta-langage. Plan du cours n 2. Documents structurés multilingues () Création de documents bien formés Cours n 2 Rappel cours n 1 Plan du cours n 2 Structure et forme en concepts fondamentaux TIM, Comment créer un set de balises? La

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

Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés :

Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés : CSS positionnement POSITIONNEMENT Rappel balises de type bloc Les éléments se placent les uns en dessous des autres. Par défaut, ils utilisent toute la largeur. Propriétés : width, height, min-width, ou

Plus en détail

Organisation d un site web

Organisation d un site web Organisation d un site web Un site web est un ensemble de pages web hébergées par un serveur et identifié par une adresse internet ( URL). Les pages web sont écrites en langage html, puis transférées sur

Plus en détail

Les tableaux. La mise en forme des tableaux (bordures, alignement horizontal et vertical, marges, ) se fait à l aide des styles CSS.

Les tableaux. La mise en forme des tableaux (bordures, alignement horizontal et vertical, marges, ) se fait à l aide des styles CSS. Les tableaux Les balises de tableau sont les suivantes : balise explication attributs titre du tableau tableau ligne d un tableau (table row) cellule d un tableau (table data) colspan(="nb

Plus en détail

Introduction au Web. Fabien Givors. Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr

Introduction au Web. Fabien Givors. Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr Introduction au Web D'après les cours de Andrea G. B. Tettamanzi Fabien Givors Université de Nice Sophia Antipolis Département Informatique fabien.givors@unice.fr Fabien Givors, 2014 1 Planning des cours

Plus en détail

Check list du référencement

Check list du référencement Check list du référencement La check-list d optimisation du référencement du site propose une liste de points à vérifier pour mieux positionner votre site dans les moteurs de recherche. Avant de rentrer

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

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

Rapport d'analyse performance et qualité

Rapport d'analyse performance et qualité Rapport d'analyse performance et qualité https://www.isterresdenvol.fr Ce rapport a été généré sur DareBoost.com, service en ligne d'analyse et de surveillance de la performance et de la qualité des sites

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

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

Table des matières. Introduction 1

Table des matières. Introduction 1 Table des matières Introduction 1 1 Les bases de JavaScript 5 Compréhension de JavaScript (et de son histoire) 5 Établissement d un système de test 8 Configuration de navigateurs Web 9 Inclusion du code

Plus en détail

Rappel : Qu est-ce que XML? XML: Documents bien formés et documents valides. Rappel: court exemple en XML. La documentation XML

Rappel : Qu est-ce que XML? XML: Documents bien formés et documents valides. Rappel: court exemple en XML. La documentation XML Rappel : Qu est-ce que XML? XML: Documents bien formés et documents valides Andrei Popescu-Belis TIM / ETI, Université de Genève Cours n 2 17.3.2005 http://www.issco.unige.ch/staff/andrei/xml «extended

Plus en détail

Université d Angers

Université d Angers pascal.nicolas@univ-angers.fr 1 préambule cette présentation, basée sur la norme HTML3.2, n a pas vocation à être exhaustive la notation X Y signifie que l on peut mettre l élément X ou l élément Y dans

Plus en détail

En-tête d'un document HTML : l'élément <head> Balises dans. <head> Balise "meta" Balise "meta" Balise "meta" Balise "meta" Exemple :

En-tête d'un document HTML : l'élément <head> Balises dans. <head> Balise meta Balise meta Balise meta Balise meta Exemple : Balises dans En-tête d'un document HTML : l'élément L'en-tête, head, d'un document HTML peut contenir 5 balises : title - titre du document link - pour importer un fichier script - pour insérer

Plus en détail

Charte graphique pour la réalisation de sites thématiques sur Internet

Charte graphique pour la réalisation de sites thématiques sur Internet Charte graphique pour la réalisation de sites thématiques sur Internet Sommaire Conventions... < 3 > Navigation... < 4 > Pages... < 5 > La page d accueil La page des liens La page des contacts Les pages

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

Qu est-ce que XML? XML ET LE TRAITEMENT INFORMATIQUE MULTILINGUE. Second exemple en XML. Premier exemple en XML. Explications (1) Explications (2)

Qu est-ce que XML? XML ET LE TRAITEMENT INFORMATIQUE MULTILINGUE. Second exemple en XML. Premier exemple en XML. Explications (1) Explications (2) Qu est-ce que XML? XML ET LE TRAITEMENT INFORMATIQUE MULTILINGUE Andrei Popescu-Belis TIM / ETI, Université de Genève Cours n 1 10.3.2005 «extended Markup Language» Langage de balises permettant de marquer

Plus en détail

HTML. IFOSUP 36, av du Général de Gaulle Bagnolet IFOSUP UN NOUVEAU REGARD SUR LA FORMATION PUBLIC ET PRE REQUIS

HTML. IFOSUP 36, av du Général de Gaulle Bagnolet IFOSUP UN NOUVEAU REGARD SUR LA FORMATION PUBLIC ET PRE REQUIS HTML PUBLIC ET PRE REQUIS Public : Informaticiens Concepteurs Chefs de Projet Utilisateurs Pré-requis : Connaissance générale de l'environnement Web OBJECTIFS PROGRAMME La formation Python va vous apprendre

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

OP4. BD & Web. Résumé de cours. Partie II : HTML 4.0

OP4. BD & Web. Résumé de cours. Partie II : HTML 4.0 Univ.Montpellier II 2005 M. Hascoët OP4 BD & Web Résumé de cours Partie II : HTML 4.0 M. Hascoët mountaz@lirmm.fr Université Montpellier II Place Eugène Bataillon 34095 Montpellier Cedex 05 2/5 1. Introduction

Plus en détail

INSA - ASI TechnoWeb : CSS 1/23. Technologie Web CSS. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18,

INSA - ASI TechnoWeb : CSS 1/23. Technologie Web CSS. Alexandre Pauchet. INSA Rouen - Département ASI. BO.B.RC.18, INSA - ASI TechnoWeb : CSS 1/23 Technologie Web CSS Alexandre Pauchet INSA Rouen - Département ASI BO.B.RC.18, pauchet@insa-rouen.fr INSA - ASI TechnoWeb : CSS 2/23 Plan 1 Les CSS 2 XML et CSS INSA - ASI

Plus en détail

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

I/ Une première très brève introduction au WEB : 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

Plus en détail

CRÉE TA PAGE WEB POUR IPHONE!

CRÉE TA PAGE WEB POUR IPHONE! CRÉE TA PAGE WEB POUR IPHONE! Programme du matin QR Code Définition Création de votre T-Shirt avec QR Code Pause «Application» pour iphone Base du HTML Création de votre CV QR CODE? QR CODE? Le QR Code

Plus en détail

PROGRAMME DE FORMATION HTML5, CSS3, PHP5

PROGRAMME DE FORMATION HTML5, CSS3, PHP5 Organisme de formation professionnelle Formation Informatique Paca & Rhône-Alpes FORMANOSQUE 130 ch. du clos supérieur 04100 Manosque Tél. 04 92 77 10 58 contact@formanosque.fr Google formanosque PROGRAMME

Plus en détail

LE CODE HTML 1- INTRODUCTION. Page 1 sur 5

LE CODE HTML 1- INTRODUCTION. Page 1 sur 5 Page 1 sur 5 LE CODE HTML 1- INTRODUCTION Une page web est écrite nécessairement en code. Il en existe beaucoup, aux utilités diverses et variées. Le code le plus basique est toutefois le HTML ( HyperText

Plus en détail

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

HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,

Plus en détail

Initiation au développement web Jeudi 27 octobre 2016

Initiation au développement web Jeudi 27 octobre 2016 Initiation au développement web Jeudi 27 octobre 2016 Merci de vous installer par binôme de niveau différent Des volontaires pour les e-profs? Présentation Thibault Vinchent tvinchent@gmail.com Développeur

Plus en détail

Sommaire. 1 Créer un premier site Élaborer un contenu...69

Sommaire. 1 Créer un premier site Élaborer un contenu...69 Partie 1 Votre site web personnel...25 1 Créer un premier site...27 1.1 Installer le serveur web personnel de Microsoft...29 1.2 Créer un nouveau site web...31 1.3 Découvrir et personnaliser l environnement

Plus en détail

Une introduction à HTML5

Une introduction à HTML5 Une introduction à HTML5 Rémi Gilleron Université Lille & INRIA Lille & Cristal UMR CNRS Source principale : Cours de Fabien Torre émi Gilleron (Université Lille & INRIA Lille & Cristal UMR CNRS) Bases.

Plus en détail

HTML sémantique 1/20

HTML sémantique 1/20 HTML sémantique 1/20 Rappels Rôles HTML - CSS Microformats Microdonnées RDFa Rich Snippets Conclusion Sommaire 2/20 Rappels 2 types de web : Web des documents Web des données (web sémantique) (X)HTML sémantique

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

Introduction au HTML 5

Introduction au HTML 5 Introduction au HTML 5 Les balises structurantes de HTML5 Plusieurs balises ont été introduites avec HTML5 pour délimiter les différentes zones qui constituent la page web : : en-tête;

Plus en détail

Génération dynamique de pages web

Génération dynamique de pages web Génération dynamique de pages web Cet article décrit quelques techniques de programmation web permettant de générer des pages web dynamiquement à partir d une base de données. STRUCTURE DE LA BASE DE DONNÉES

Plus en détail

HTML. Michel Gagnon École Polytechnique de Montréal

HTML. Michel Gagnon École Polytechnique de Montréal HTML Michel Gagnon École Polytechnique de Montréal 1 Historique HTML 5 HTML 1.0 (1991) HTML 2.0 (1995) HTML 3.0 HTML 3.2 (1997) HTML 4.01 (1999) XHTML 1.0 (2000) XHTML 2.0 2 Historique HTML 5 HTML 1.0

Plus en détail

Dreamweaver CS6 pour PC/Mac

Dreamweaver CS6 pour PC/Mac ENVIRONNEMENT. Généralités 1 A- La page de démarrage 1 B- L écran principal 2 C- La barre d état 3 D- Utiliser les règles 4 E- Utiliser la grille 4 F- Utiliser les repères 5 G- Modifier le zoom 6 1.2 Les

Plus en détail

Les CSS! Additif au HTML" Les Formulaires" L1 - STS - Mention Informatique - Internet et Programmation! Ph Moreau! 1!

Les CSS! Additif au HTML Les Formulaires L1 - STS - Mention Informatique - Internet et Programmation! Ph Moreau! 1! Les CSS! Avant d introduire quelques fonctionnalités du langage Javascript, nous allons compléter le langage Html avec la possibilité d afficher des objets pré-dessiné à savoir:! LES FORMULAIRES! Additif

Plus en détail

WEB BALISES. Lorem Ipsum : texte en latin (qui ne veut même rien dire en latin) qui permet de mettre du texte quand il en faut.

WEB BALISES. Lorem Ipsum : texte en latin (qui ne veut même rien dire en latin) qui permet de mettre du texte quand il en faut. WEB 27/09 Chaque élément est une balise : HTML -> visible HEAD -> invisible BODY -> DOCTYPE: c est le type de document qu on va utiliser, XHTML 1.1=> le plus strict (qu on va bosser) N importe quel première

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

Le HTML (N 2) FASCICULE N 14 OBJECTIF DE FORMATION 1 OBJECTIF DE FORMATION 2 OBJECTIF DE FORMATION 3

Le HTML (N 2) FASCICULE N 14 OBJECTIF DE FORMATION 1 OBJECTIF DE FORMATION 2 OBJECTIF DE FORMATION 3 FASCICULE N 14 Le HTML (N 2) OBJECTIF DE FORMATION 1 A l issue de cet objectif de formation, l apprenant comprendra ce que sont les balises HTML. OBJECTIF DE FORMATION 2 A l issue de cet objectif de formation,

Plus en détail

1/31 COURS N 2. La structuration des pages web avec HTML

1/31 COURS N 2. La structuration des pages web avec HTML 1/31 COURS N 2 La structuration des pages web avec HTML 2/31 Plan 1. Introduction à la programmation web 2. La structuration des pages web avec le langage HTML 3. Le style et le positionnement avec le

Plus en détail