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

Save this PDF as:
 WORD  PNG  TXT  JPG

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

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

Transcription

1 Balises dans <head> En-tête d'un document HTML : l'élément <head> 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 un programme JavaScript style - pour définir de styles meta - pour définir des méta-données associées au document : encodage, auteur, date, etc. 1 2 Plusieurs formes de meta : <meta charset="utf-8" /> <meta http-equiv="nom" content="contenu" /> <meta http-equiv="refresh" content="20" /> signifie que la page sera rafraîchit toutes les 20 secondes. <meta name="nom" content="contenu" /> Le contenu des attributs name, http-equiv et content sont libres. Ils ne sont pas fixés par la DTD. Certaines valeurs répandues sont définies par l'usage. <meta http-equiv="refresh" content="10; url=a2.html" /> 3 4 /meta/meta0_5.html <meta name="nom" content="contenu" /> Les attributs name et content de la balise meta fonctionnent en binôme : name nomme la méta-information et content fixe le contenu. On trouve par exemple : name="keywords" : fixe des mots-clés pour la page. name="description" : associe la page à une description. Essentiellement utilisé par les moteurs de recherche pour enrichir leur liste de résultats. name="robots" : indique au moteur de recherche s'il doit indexer les mots de la page et suivre les liens. Valeurs de content : "all" ou "none". 5 6 name="author" : indique l'auteur de la page. name="expires". Valeurs de content : "never" ou "date d'expiration"

2 favicon Un favicon est une icône pour enjoliver un document dans les navigateurs web. Code : 7 8 Le mode d'utilisation de ces balises évolue. 9 Balises structurantes HTML5 10 Structure sémantique d'une page : header, footer, nav, section, article, aside. <body> <header> <!-- en-tête --> <h1>document minimal </h1> </header> <nav> <!-- menu principal --> </nav> <section> <!-- partie principale --> </section> <footer> <!-- pied de page --> <p>copyright Jean Dupont</p> </footer> </body> 11 Exemple concret : <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>zozor - Le Site Web</title> </head> <body> <header> <h1>zozor</h1> <h2>carnets de voyage</h2> </header> <nav> <ul><li><a href="#">accueil</a></li> <li><a href="#">blog</a></li> <li><a href="#">cv</a></li> </ul> </nav> <section> <aside> <h1>à propos de l'auteur</h1> <p>je suis né un 23 novembre 2005.</p> </aside> <article> <h1>je suis un grand voyageur</h1> <p>bla bla bla bla (texte de l'article)</p> </article> </section> <footer> <p>copyright Zozor - Tous droits réservés</p> </footer> </body> </html> exempleconcret.html 12 Positionnement avec CSS. Importation du fichier "mon_style.css" : <link rel="stylesheet" href="mon_style.css" /> fichier "mon_style.css" : body { width:90%; margin-left:5%; border:1px solid gray; line-height:150%; header {text-size:150%; padding:0.5cm; color:white; background-color:gray;

3 suite fichier "mon_style.css" : footer { padding:0.2cm; color:white; background-color:gray; clear:left; nav { float:left; width:140px; margin:0px; padding:1em; /* marge interne : taille d'un caractère */ font-size:80%; section {margin-left:160px; border-left:1px solid gray; padding:1em; aside { float:right; width:200px; background-color:#ffdada; border:1px solid gray; 13 exempleconcret2.htm 14 3ème positionnement Nouveautés Glisser-déposer. L'attribut draggable permet de rendre un élément déplaçable. Autres nouvelles balises de html5 contenteditable. Cet attribut indique qu'une zone est éditable. L'utilisateur peut en changer le contenu. Médias et applications web <audio> et <video>. Ces balises sont utilisés pour les contenus multimédia. Source : Canvas (zone dessin). <canvas> permet de créer des éléments graphiques 2D en Javascript à la volée Balise <audio> de HTML5. Exemple de code : audio <audio controls="controls"> <source src="audio/horse.ogg" type="audio/ogg"> <source src="audio/horse.mp3" type="audio/mpeg"> Votre navigateur ne supporte pas le format audio. </audio> audio.html video La balise <video> (cousine de <audio>) offre en HTML5 une solution simple, pour l'intégration d'une vidéo. Exemple de code : <video width="400" height="220" controls="controls"> <source src="ter.mp4" type="video/mp4" /> <source src="ter.webm" type="video/webm" /> <source src="ter.theora.ogv" type="video/ogg" /> Alternative en cas de pb </video> video.html 17 18

4 HTTP: hypertext transfert protocol Formulaires Source pour html5 : Formulaires Exemple formulaire Balise form Création de formulaire <form action="url" method="post">... </form> Balise input : Balise de type Bloc précédée et suivie d'un saut de ligne. Attributs de form : <form action="traitement.php" method="post"> Votre pseudo <input type="text" name="pseudo" /> <input type="submit" value="envoyer" /> </form>

5 HTML5 apporte de nombreuses fonctionnalités nouvelles permettant de contraindre les valeurs saisis dans un input. Tous les navigateurs n'acceptent pas toutes ces fonctionnalités. Exemple "date" et "time" 25 Possibles valeurs de type : text : Texte submit : Pour envoyer le formulaire date : Calendrier perpétuel. time : Saisir une heure. number : Saisir un nombre. range : Slider. color : Saisir une couleur. Saisir une adresse mail. url : Saisir une URL. file : Fichier. 26 <form action="testdate.php" method="post"> <input type="date" name="madate" value=" " /> <input type="time" name="monheure" value="08:16" /> <input type="submit" value="envoyer" /> </form> inputdate.html 27 Exemple "date" et "time" <form action="testnumero.php" method="post"> <input type="number" name="n1" value="10" min="8" max="12" step="2" /> 0 <input type="range" name="n2" value="0" min="0" max="10" step="2"/> 10 <input type="submit" value="envoyer" /> </form> inputnumber.html 28 Autres possibles valeurs de type : Pour saisir un mot de passe : type="password" Pour avoir un bouton : type="button" Pour effacer : type="reset" Pour avoir un bouton à cocher : type="checkbox" Pour les boutons multiples : type="radio" <button>...</button> La balise button c'est une alternative à <input type="button" /> Les autres balises Texte libre sur plusieurs lignes : <textarea> </textarea> Menu déroulant : <select> <option> </option> </select> Exemples : form5.html 29 valeurs possibles : button, submit, reset form3_1.html 30

6 Exploitation des formulaires Un formulaire sert à saisir des données pour être exploitées par : 1) Un programme JavaScript exécuté par le navigateur, 2) Un programme externe exécuté par un serveur http. 31 1) Programme JavaScript : Le navigateur comporte un interpréteur de JavaScript. Vous pouvez faire appel à un programme défini dans la même page pour un traitement local des informations saisies dans le formulaire.

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

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/ Les formulaires Permettent aux auteurs de pages Web de doter leur page web d'éléments interactifs permettant

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

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

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

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

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 Partie 5 : Annexes 230/246 Mémento des balises HTML Cette 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

Le langage HTML. Université KASDI Merbah Ouargla Département des mathématiques & Informatique.

Le langage HTML. Université KASDI Merbah Ouargla Département des mathématiques & Informatique. Université KASDI Merbah Ouargla Département des mathématiques & Informatique Le langage HTML BELOUAAR Houcine Belouar_hocine@yahoo.fr Les formulaires L'élément permet de créer des

Plus en détail

Fiche référence HTML

Fiche référence HTML 20 janvier 2015 Table des matières 1 Introduction 2 2 Structure de document 2 3 Eléments 3 3.1 Entête, pied de page, section, titres................. 3 3.2 Eléments simples........................... 3

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

Technique Internet de Base HTML avancé

Technique Internet de Base HTML avancé Objectifs Technique Internet de Base HTML avancé morge@di.unipi.it Licence 2 Université Jean Monnet Création de tableau complexe Mise en forme de tableau Création de formulaire 2008-2009 Tableau= élément

Plus en détail

Programmation Web TD6- HTML- Formulaires

Programmation Web TD6- HTML- Formulaires Université de la Manouba Ecole Supérieure d'economie Numérique Programmation Web TD6- HTML- Formulaires Objectifs - Développer des pages Web HTML5 validées - Mettre en place des formulaires en HTML5 Consignes:

Plus en détail

Exemple pour un formulaire classique sans l'aide de script CGI :

Exemple pour un formulaire classique sans l'aide de script CGI : <form method=post enctype=text/plain> Formulaires 1. Introduction La création des formulaires se réalise grâce à plusieurs champs, dans lesquels le visiteur entre une information ou opte pour un choix. L'information est ensuite envoyée, à

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

Web dynamique. approche client/serveur

Web dynamique. approche client/serveur Web dynamique approche client/serveur Client/serveur Serveur requête (url) réponse (fichiers) Client url = adresse IP + /chemin/vers/fichier réponse = fichier (lu sur le DD du serveur) Le client gère la

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 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

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

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

En HTML un formulaire recueille des informations de l'utilisateur, puis les transfère au serveur, qui à son tour doit les traiter

En HTML un formulaire recueille des informations de l'utilisateur, puis les transfère au serveur, qui à son tour doit les traiter Rappel Formulaires HTML http://www.w3.org/tr/html4/interact/forms.html http://www.la-grange.net/w3c/html4.01/interact/forms.html http://www.w3schools.com/html/html_forms.asp En HTML un formulaire recueille

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

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

Classe de première SI CSS

Classe de première SI CSS CSS Table des matières 1. La petite histoire du CSS...2 2. Déclaration du CSS...2 2.1. Fichier.css...2 2.2. En-tête du fichier HTML...3 2.3. Directement dans les balises...3 3. Appliquer un style...3

Plus en détail

3. Les formulaires. en HTML (première partie) Programmation La définition du formulaire

3. Les formulaires. en HTML (première partie) Programmation La définition du formulaire 420-183 Programmation 1 3. Les formulaires en HTML (première partie) Une page web ne sert pas qu'à afficher du texte et des éléments multimédia. Elle peut aussi servir d'outil interactif permettant l'entrée

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

Formulaire HTML 1. Introduction. 2. Définition de formulaire. ligne de texte 4. Mot de passe 5. Bouton radio 6. Cases à Cocher»

Formulaire HTML 1. Introduction. 2. Définition de formulaire. ligne de texte 4. Mot de passe 5. Bouton radio 6. Cases à Cocher» Formulaire HTML 1. Introduction. 2. Définition de formulaire. 3. Entrée e d une d ligne de texte 4. Mot de passe 5. Bouton radio 6. Cases à Cocher 7. Bouton «Envoyer» 8. Bouton «Reset» 9. Bouton «Général»

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

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

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

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

Programmation Web TD8- CSS

Programmation Web TD8- CSS ²Université de la Manouba Ecole Supérieure d'economie Numérique Programmation Web TD8- CSS Objectifs - Développer des pages Web HTML5 validées - Mettre en place des fichiers CSS pour une meilleure présentation

Plus en détail

MISE EN FORME CSS D'UN FORMULAIRE

MISE EN FORME CSS D'UN FORMULAIRE Par défaut, les formulaires ne sont pas folichons. Pourtant, quel site n'a pas son formulaire? (euh... mammouthland?!!) Dès lors, la tentation est grande de mettre les champs dans des tableaux pour les

Plus en détail

IUT TC - N. Rodriguez-Destruel BALISES HTML 4.01

IUT TC - N. Rodriguez-Destruel BALISES HTML 4.01 BALISES HTML 4.01 (Référence rapide non exhaustive!) Bibliographie : Le museau numérique, http://www.laurent-bernat.com/html-balises.php3?quoi=recap_attributs HTML code tutorial, http://www.htmlcodetutorial.com

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

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

Traitement des Formulaires

Traitement des Formulaires Traitement des Formulaires 1 Requetês et réponses Exemple de requête: demande d une page GET / HTTP/1.1 Host: exemple.org Exemple de réponse HTTP/1.1 200 OK Content Type: text/html Content Length: 419

Plus en détail

CSS. Karima Boudaoud IUT- R&T

CSS. Karima Boudaoud IUT- R&T CSS Karima Boudaoud IUT- R&T Plan Plan Références bibliographiques Introduction à CSS Sélecteurs Propriétés et valeurs Responsive design Conclusion Karima Boudaoud IUT R&T - Sophia Antipolis 3 Références

Plus en détail

Module M1106 Langages HTML/XHTML. IUT de Béziers, dépt. R&T

Module M1106 Langages HTML/XHTML. IUT de Béziers, dépt. R&T Module M1106 Langages HTML/XHTML IUT de Béziers, dépt. R&T 2005-2016 http://www.borelly.net/ cb@iutbeziers.fr Généralités HTML : HyperText Markup Language Basé sur SGML (Standard Generalized Markup Language

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

Couleurs, polices et autres attributs. Les feuilles de styles CSS. Les feuilles de style CSS. Page HTML avec fichier CSS

Couleurs, polices et autres attributs. Les feuilles de styles CSS. Les feuilles de style CSS. Page HTML avec fichier CSS Couleurs, polices et autres attributs Les feuilles de styles CSS Jusqu à HTML 3.2 : on utilise les attributs des balises. Exemples : ... ...

Plus en détail

Série JavaScript. Exercice n 1 : Ecrire le code d'un fichier HTML qui permet de saisir trois notes (DC1, DC2, DS) puis calcule et affiche la moyenne.

Série JavaScript. Exercice n 1 : Ecrire le code d'un fichier HTML qui permet de saisir trois notes (DC1, DC2, DS) puis calcule et affiche la moyenne. Série JavaScript Exercice n 1 : Ecrire le code d'un fichier HTML qui permet de saisir trois notes (DC1, DC2, DS) puis calcule et affiche la moyenne. Exercice n 2 : Ecrire le code d'un fichier HTML qui

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

Notion de formulaire (form)

Notion de formulaire (form) Notion de formulaire (form) Une des utilisation majeures du Web est d'échanger des informations structurées : en effet l'interprétation automatique d'un texte libre n'est pas pour demain, et aujourd'hui

Plus en détail

TD n 3 - Notion de langage CSS. Table des matières

TD n 3 - Notion de langage CSS. Table des matières TD n 3 - Notion de langage CSS Table des matières 1-Mettre en forme un page en utilisant la balise ...2 2-Mettre en forme un page en utilisant une feuille de style externe...4 3-Conseils pratiques

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

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

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

STUDIO - TI6 TABLE DES MATIÈRES. NOUVELLE MATIÈRE (suite) 9. Intégration du logo. Sujet. HTML - CSS révisions - suite.

STUDIO - TI6 TABLE DES MATIÈRES. NOUVELLE MATIÈRE (suite) 9. Intégration du logo. Sujet. HTML - CSS révisions - suite. STUDIO - TI6 PASCAL PLACEMAN Sujet HTML - CSS révisions - suite TABLE DES MATIÈRES Nouvelle matière: 9. Intégration du logo 10. Un titre devant la vidéo 11. Utiliser des polices typographiques grâce à

Plus en détail

C2i : Création de pages web

C2i : Création de pages web C2i : Création de pages web IUFE 2016/2017 Matthieu Giraud LIMOS, Université Clermont Auvergne Matthieu Giraud C2i : Création de pages web 1 / 33 Introduction Sommaire 1 Introduction 2 Structure d une

Plus en détail

Cours réalisé par : Ilahi Néjib TP TIC (HTML) Matière : Technologie de l information et de la communication Classe : 4 SI Enseignant : Ilahi Néjib

Cours réalisé par : Ilahi Néjib TP TIC (HTML) Matière : Technologie de l information et de la communication Classe : 4 SI Enseignant : Ilahi Néjib TP TIC (HTML) Matière : Technologie de l information et de la communication Classe : 4 SI Enseignant : Ilahi Néjib Durée : 2 heures Date : Octobre 07 A.S :2007/2008 TP N 1 : Objectifs : Savoir écrire le

Plus en détail

Principe. Formulaire verticaux : Structure générale d'un formulaire : Regroupement des contrôles. Div pour 1 élément du formulaire Label de l'élément

Principe. Formulaire verticaux : Structure générale d'un formulaire : Regroupement des contrôles. Div pour 1 élément du formulaire Label de l'élément Les formulaires Principe La librairie Bootstrap est fournie avec deux types de formulaires : Formulaire horizontaux : Les éléments sont disposés sur la même ligne Par exemple : barre de recherche h dans

Plus en détail

Formulaire HTML et PHP

Formulaire HTML et PHP Formulaire HTML et PHP Partie 1 Les langages du Web Vincent Bouvier vincent.bouvier@kware.fr HTML - Les formulaires Un formulaire permet à l'utilisateur d'envoyer des données au serveur Un formulaire commence

Plus en détail

Introduction aux feuilles de style CSS

Introduction aux feuilles de style CSS Introduction aux feuilles de style CSS Jean-Philippe PERNIN Université Stendhal Département Informatique Pédagogique Bureau I 113 Mél. : Jean-Philippe.Pernin@u-grenoble3.fr Jean-Philippe Pernin - DIP -

Plus en détail

Exercice 1 : Structuration de document avec HTML

Exercice 1 : Structuration de document avec HTML Université Lumière Lyon 2 Université Nationale d Économie de Kharkiv Master 1 IDSM Année 2016-2017 Programmation Web Exercices pratiques (1) : HTML et CSS Jérôme Darmont (http://eric.univ-lyon2.fr/~jdarmont/),

Plus en détail

TP6 : Les formulaires. Technologies du web Elodie Bisson

TP6 : Les formulaires. Technologies du web Elodie Bisson TP6 : Les formulaires Technologies du web Elodie Bisson 1. L'utilité d'un formulaire Un formulaire permet de recueillir des informations saisies par un utilisateur et de les envoyer via une URL à une adresse

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

DOSSIER D'ACTIVITES SUR LE HTML N 12 Appliquer des feuilles de style aux formulaires

DOSSIER D'ACTIVITES SUR LE HTML N 12 Appliquer des feuilles de style aux formulaires DOSSIER D'ACTIVITES SUR LE HTML N 12 Appliquer des feuilles de style aux formulaires Objectifs : Apprendre à l apprenant à se créer un espace de travail sous Linux Apprendre à l apprenant à ouvrir un éditeur

Plus en détail

webdesigner.cepegra-labs.be

webdesigner.cepegra-labs.be Bruxelles Formation CEPEGRA Olivier Céréssia 2013 webdesigner.cepegra-labs.be PRÉAMBULE Faisons une petite incursion de l autre côté du miroir de CSS, dans le langage de structure HTML. La version 5 nous

Plus en détail

Balises de formulaire

Balises de formulaire Les formulaires XHTML permettent de recueillir les informations saisies par un utilisateur, puis de les transmettre à un programme serveur. Nous verrons : - la structure d un formulaire - les éléments

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

Javascript. Interaction. A. Belaïd 1

Javascript. Interaction. A. Belaïd 1 Javascript Interaction A. Belaïd 1 Présentation Les événements sont l intérêt du JS en matière de programmation Web Ils donnent une interactivité à la page que vous consultez, ce qui n existe pas avec

Plus en détail

TP 3 : Formulaires. M1106 Initiation au développement Web. Exercice 1 : Mon premier formulaire HTML5

TP 3 : Formulaires. M1106 Initiation au développement Web. Exercice 1 : Mon premier formulaire HTML5 IUT de Villetaneuse, Université Paris 13, Sorbonne Paris Cité DUT R&T 1 re année M1106 Initiation au développement Web 20162017 TP 3 : Formulaires Étienne André Version du sujet : 7 octobre 2016 Ce TP

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

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

Les balises meta (meta tags en anglais) peuvent avoir plusieurs rôles :

Les balises meta (meta tags en anglais) peuvent avoir plusieurs rôles : Les balises meta (meta tags en anglais) peuvent avoir plusieurs rôles : Indiquer le titre de la page et fournir un résumé de son contenu. Renseigner les navigateurs de vos visiteurs et/ou les moteurs de

Plus en détail

HTML 1/81 HTML 5. Nils Schaefer

HTML 1/81 HTML 5. Nils Schaefer HTML 1/81 HTML 5 nils.schaefer@sn-i.fr HTML 2/81 Internet Réseau mondial Nombreux services Adresse IP : identification sur Internet 4 octets avec notation pointée (233.78.45.225) pour IPv4 Port logique

Plus en détail

Les formulaires. Contexte d'information Titre du document Nom de fichier. html11.pdf. Objectifs :

Les formulaires. Contexte d'information Titre du document Nom de fichier. html11.pdf. Objectifs : Contexte d'information Titre du document cours HTML Nom de fichier html11.pdf Les formulaires Objectifs : Collecter des informations (texte, choix, fichiers...) auprès d'un utilisateur dans un document

Plus en détail

1 HTTP (2 points) LOG Examen final - Automne 2013

1 HTTP (2 points) LOG Examen final - Automne 2013 1 HTTP (2 points) a) (1 point) Ligia, qui a suivi avec succès le cours LOG4420, se trouve dans une fête familiale. Rigoberta, sa cousine, est suprise qu un commerce ait pu savoir quels sites elle a visités

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

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 :

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

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

Chapitre 4 : Les formulaires en JavaScript

Chapitre 4 : Les formulaires en JavaScript Chapitre 4 : Les formulaires en JavaScript I. Généralités 1. Présentation Sans les formulaires, les pages HTML ne proposent aucune interactivité avec l utilisateur. En effet, la page appelée est envoyée

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

Écriture textuelle de documents structurés Structure notée grâce à des balises
...
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

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

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

Page web modèle :

Page web modèle : Université Lumière Lyon 2 Université Nationale d Économie de Kharkiv Master 1 IDSM Année 2016-2017 Programmation Web Exercices pratiques (5) : PHP, MySQL, formul. Jérôme Darmont (http://eric.univ-lyon2.fr/~jdarmont/),

Plus en détail

PHP - Initiation. Formulaires et transmission de données. VIII) Formulaires et transmission de données

PHP - Initiation. Formulaires et transmission de données. VIII) Formulaires et transmission de données VIII) Formulaires et transmission de données VIII.1) Formulaires Les formulaires sont un outil primordial lors du développement d'un applicatif Web. C'est grace à eux que l'utilisateur va pouvoir transmettre

Plus en détail

Programmation Web IUT Villetaneuse 1. Bases de Javascript. Formation continue 2012

Programmation Web IUT Villetaneuse 1. Bases de Javascript. Formation continue 2012 Programmation Web IUT Villetaneuse 1 Bases de Javascript Formation continue 2012 Les sources associées à ce TD sont dans http://www-iutv.univ-paris13.fr/~khafif/progweb. 1 Exercices Démarrage 1. Prenez

Plus en détail

Principe. 501_bouton.html. Classe.btn classe secondaire.btn-default : Un bouton peut servir à : Valider un formulaire

Principe. 501_bouton.html. Classe.btn classe secondaire.btn-default : Un bouton peut servir à : Valider un formulaire Les boutons Principe Classe.btn classe secondaire.btn-default : Un bouton peut servir à : Valider un formulaire Lancer un script tajax Pointer vers un lien hypertexte Exemples :

Plus en détail

Les formulaires. Les formulaires

Les formulaires. Les formulaires Les formulaires Les balises: form : début de fomulaire input : différents types de bouton et zone de saise textarea : une zone de saisie texte longue select et option : liste à choix multiple Les formulaires

Plus en détail

CM3-1 : HTML5 Mickaël Martin Nevot

CM3-1 : HTML5 Mickaël Martin Nevot CM3-1 : HTML5 01/10/2016 21:39 Cette œuvre de est mise à disposition selon les termes de la licence Creative Commons Attribution - Pas d'utilisation Commerciale - Partage à l'identique 3.0 non transposé.

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

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

PHP et formulaires TP N 5. Découvrir les formulaires HTML pour saisir des valeurs dans les scripts PHP (HTML). Utiliser des boucles et des conditions.

PHP et formulaires TP N 5. Découvrir les formulaires HTML pour saisir des valeurs dans les scripts PHP (HTML). Utiliser des boucles et des conditions. 1 OBJECTIF Découvrir les formulaires HTML pour saisir des valeurs dans les scripts PHP (HTML). Utiliser des boucles et des conditions. 1.1 CRÉATION D UN FORMULAIRE Afin de pouvoir interagir avec PHP, il

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

M3206. multimedia web Flash? ;-)

M3206. multimedia web Flash? ;-) M3206 multimedia web Flash? ;-) FLASH AUJOURD HUI... pourquoi tant de haine? ;-) Les alternatives Où ne trouve t on plus de flash? Où trouve t on encore du flash? FLASH? où ne trouve t on plus de flash?

Plus en détail

FORMULAIRES EN XHTML

FORMULAIRES EN XHTML FORMULAIRES EN XHTML Objectifs Etre capable de réaliser un formulaire dans une page Web Compléments nécessaires Un éditeur pour XHTML (HTML-Kit, etc.) Niveau de compétences en pré-requis Connaissance des

Plus en détail

Bases de données et Internet

Bases de données et Internet Bases de données et Internet Faculté des Sciences et Techniques Fès Département de Génie Industriel Master Sciences et Techniques en Génie Industriel Professeur : F. Kaghat 2 Feuilles de style en cascade

Plus en détail

DU-GL. L3 alternance Conception de sites WEB. Examen de février 2011 (corrigé) DU-GL L3 alternance Examen WEB Février 2011

DU-GL. L3 alternance Conception de sites WEB. Examen de février 2011 (corrigé) DU-GL L3 alternance Examen WEB Février 2011 DU-GL L3 alternance Conception de sites WEB Examen de février 2011 (corrigé) Durée : 2 heures Etape N 1 : HTML + CSS (5 points) Documents autorisés etape1.html

Plus en détail

TP11 : flux rss, manipulations d'objet

TP11 : flux rss, manipulations d'objet TP11 : flux rss, manipulations d'objet Ce tp poursuit les tps précédents. Les 4 premières étapes sont indépendantes des autres, seule la dernière concerne l'intégration dans les tps précédents. Pour cela,

Plus en détail

Introduction au Web. Bruno BEAUFILS 2017/2018. Introduction au Web 1 / 15

Introduction au Web. Bruno BEAUFILS 2017/2018. Introduction au Web 1 / 15 Introduction au Web Bruno BEAUFILS 2017/2018 Introduction au Web 1 / 15 1. Retours 2. CSS CSS Introduction au Web Retours 2 / 15 Retours Syntaxe Syntaxe HTML pas respectée indenter votre texte (pour voir

Plus en détail

CSS. Alexandre Benoit TS10. D après openclassrooms

CSS. Alexandre Benoit TS10. D après openclassrooms CSS D après openclassrooms Alexandre Benoit TS10 I Les bases du CSS 2 / 31 Introduction Où écrit t on le CSS? : 3 / 31 Introduction Où écrit t on le CSS? : Dans un nouveau fichier par exemple, nous l écrirons

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

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

D autres balises HTML Exercice récapitulatif

D autres balises HTML Exercice récapitulatif D autres balises HTML Exercice récapitulatif Le titre de la page Apparait dans la partie Est affiché dans la barre de titre du navigateur Décrit ou résume le contenu de la page (10 mots maximum)

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

Objectif. Taches proposées pour atteindre l objectif

Objectif. Taches proposées pour atteindre l objectif 5 ICN : Réalisation d un site internet dynamique Nom de l'élève : Classe : Table des matières 5 ICN : Réalisation d un site internet dynamique...1 5.1Le langage php...2 5.2Déplacement de votre site dans

Plus en détail

liens W3C:

liens W3C: 1 HTML5 liens Validation en ligne https://validator.w3.org/ https://jigsaw.w3.org/css-validator/ https://validator.w3.org/unicorn/ IDE en ligne https://codepen.io/ http://jsbin.com/ OWP https://docs.webplatform.org/

Plus en détail