C2i : Création de pages web

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "C2i : Création de pages web"

Transcription

1 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

2 Introduction Sommaire 1 Introduction 2 Structure d une page web 3 Le HEADER 4 Le BODY Afficher du texte Afficher des images Hyperliens 5 Style d une page web Introduction Classe d une balise Mise en forme avec CSS Les hyperliens et le CSS Redimenssioner une image Matthieu Giraud C2i : Création de pages web 2 / 33

3 Introduction Comment créer une page web? Nous avons besoin : D un simple éditeur de texte tel le bloc-notes de Windows ; Du langage à balises HTML (HyperText Markup Language). Matthieu Giraud C2i : Création de pages web 3 / 33

4 Introduction Le langage HTML Le langage HTML a été inventé en 1991 par Tim Berners-Lee. C est un langage à balises, il permet d enrichir du texte et de maîtriser la structure de celui-ci. Exemple Début d une balise : <balise> ; Fin d une balise : </balise>. Code HTML <i>ce texte sera en italique</i> Aperçu Ce texte sera en italique Matthieu Giraud C2i : Création de pages web 4 / 33

5 Introduction Le langage HTML Une page web est donc un fichier texte que nous appelons le fichier source contenant le code HTML de la page web. L extension de ce fichier sera.html. Exemple Fichier source : index.html Matthieu Giraud C2i : Création de pages web 5 / 33

6 Structure d une page web Sommaire 1 Introduction 2 Structure d une page web 3 Le HEADER 4 Le BODY Afficher du texte Afficher des images Hyperliens 5 Style d une page web Introduction Classe d une balise Mise en forme avec CSS Les hyperliens et le CSS Redimenssioner une image Matthieu Giraud C2i : Création de pages web 6 / 33

7 Structure d une page web Premier élément : le DOCTYPE Le DOCTYPE (type de document) permet de définir les règles de syntaxe utilisées par le document afin que celui-ci soit correctement interprété par le navigateur web. Nous définissons le DOCTYPE au tout début du fichier source index.html via la balise <!DOCTYPE html>. Nous plaçons ensuite les balises <html> et </html>. Remarque Tout ce que nous écrirons par la suite se placera entre les balises <html> et </html>. Matthieu Giraud C2i : Création de pages web 7 / 33

8 Structure d une page web Deuxième élément : le HEADER Le HEADER (l en-tête) permet de définir diverses informations sur la page web, par exemple : le titre de la page, l auteur, les mots-clefs associés à la page web, la langue utilisée par la page, etc. Ces informations sont situées à la suite du DOCTYPE entre les balises <head> et </head>. Matthieu Giraud C2i : Création de pages web 8 / 33

9 Structure d une page web Troisième élément : le BODY Le BODY (le corps de la page web) regroupe tout le contenu qui sera affiché sur la page web, il s agit de texte, d images voire de vidéos. Ces informations seront situées dans le fichier source à la suite du header, entre les balises <body> et </body>. Matthieu Giraud C2i : Création de pages web 9 / 33

10 Structure d une page web Structure générale d une page web En résumé <!DOCTYPE html> <html> <head> (Informations sur la page) </head> <body> (Contenu de la page) </body> </html> Matthieu Giraud C2i : Création de pages web 10 / 33

11 Le HEADER Sommaire 1 Introduction 2 Structure d une page web 3 Le HEADER 4 Le BODY Afficher du texte Afficher des images Hyperliens 5 Style d une page web Introduction Classe d une balise Mise en forme avec CSS Les hyperliens et le CSS Redimenssioner une image Matthieu Giraud C2i : Création de pages web 11 / 33

12 Le HEADER Le HEADER Quelques informations à mettre dans le HEADER : Titre <title>titre de votre page web</title> Auteur <meta name="author" content="dark Vador"> Description <meta name="description" content="mon super site!"> Mots-clefs <meta name="keywords" content="mot-clef1, Mot-clef2"> Matthieu Giraud C2i : Création de pages web 12 / 33

13 Le HEADER Le HEADER Exemple <!DOCTYPE html> <html> <head> <title>introduction à l ergothérapie</title> <meta name="author" content="promo "> </head>... </html> Matthieu Giraud C2i : Création de pages web 13 / 33

14 Le BODY Sommaire 1 Introduction 2 Structure d une page web 3 Le HEADER 4 Le BODY Afficher du texte Afficher des images Hyperliens 5 Style d une page web Introduction Classe d une balise Mise en forme avec CSS Les hyperliens et le CSS Redimenssioner une image Matthieu Giraud C2i : Création de pages web 14 / 33

15 Le BODY Afficher du texte Afficher du texte Plusieurs balises existent pour afficher du texte en HTML : <h1> Pour écrire de gros titres ; <h6> Pour écrire de petits titres ; <p> Pour écrire des paragraphes. Remarque Il faut bien penser à fermer les balises! Matthieu Giraud C2i : Création de pages web 15 / 33

16 Le BODY Afficher du texte Afficher du texte Exemple <body> <h4>titre de taille moyenne</h4> <p> Un paragraphe sur l ergothérapie... </p> </body> Matthieu Giraud C2i : Création de pages web 16 / 33

17 Le BODY Afficher du texte Mise en forme En plus de la taille, le langage HTML permet également de mettre du texte en italique et en gras. <b> Texte en gras ; <i> Texte en italique. Le langage permet aussi de centrer du texte via la balise <center>. Remarque N oubliez pas de bien fermer les balises ;-) Matthieu Giraud C2i : Création de pages web 17 / 33

18 Le BODY Afficher des images Afficher des images Pour illustrer un texte, le langage HTML permet d afficher des images. Cette opération se fait dans un environnement délimité par les balises <figure> et </figure>. Exemple Pour placer une image nommée image.jpg, nous écrivons les lignes suivantes à l endroit désiré du BODY : <figure> <img src="image.jpg" /> </figure> Remarque Si l image est dans un sous-dossier, il est alors nécessaire de préciser le chemin vers cette image (par exemple : sous-dossier/image.jpg. Matthieu Giraud C2i : Création de pages web 18 / 33

19 Le BODY Afficher des images Options pour l affichage des images Pour les personnes malvoyantes, nous devons ajouter l attribut alt. Cet attribut permet au logiciel adéquat de décrire oralement l image affichée. Exemple <figure> <img src="image.jpg" alt="bateau sur l eau" /> </figure> Matthieu Giraud C2i : Création de pages web 19 / 33

20 Le BODY Afficher des images Ajouter une légende Pour ajouter une légende à une image, il suffit d utiliser la balise <figcaption>. Exemple <figure> <img src="image.jpg" alt="bateau sur l eau" /> <figcaption> Photo prise en </figcaption> </figure> Matthieu Giraud C2i : Création de pages web 20 / 33

21 Le BODY Hyperliens Hyperliens Les hyperliens permettent aux pages web d aller d une page web à une autre grâce à simple clic. Exemple Pour créer un hyperlien, il suffit d écrire la ligne suivante à l endroit désiré du BODY : <a href="http://fr.wikipedia.org/" alt="lien vers Wikipedia">Nom du lien qui sera affiché</a> Exemple <p>veuillez cliquez <a href="http://www.google.fr">ici</a>.</p> Matthieu Giraud C2i : Création de pages web 21 / 33

22 Style d une page web Introduction Le langage CSS Le langage CSS (Cascading Style Sheets) permet de définir la présentation des documents HTML. Il a été inventé dans les années 90 mais n est couramment utilisé qu à partir des années Matthieu Giraud C2i : Création de pages web 22 / 33

23 Style d une page web Introduction Le langage CSS Contrairement au langage HTML, le langage CSS n est pas un langage à balises. Il utilise des blocs de règles délimités par les accolades {} spécifiques à chaque balise ou à chaque classe d une balise. Matthieu Giraud C2i : Création de pages web 23 / 33

24 Style d une page web Introduction Exemple Exemple p { color: blue; } Matthieu Giraud C2i : Création de pages web 24 / 33

25 Style d une page web Introduction Où placer le code CSS? Où placer le code CSS? Il existe deux solutions : Dans chaque page HTML ; Dans un fichier style.css que chaque page utilisera. Nous obterons pour la seconde solution. Matthieu Giraud C2i : Création de pages web 25 / 33

26 Style d une page web Introduction Où placer le code CSS? Comment appeler notre fichier style.css dans la page HTML? Nous ajoutons dans le HEADER la ligne suivante : <link rel="stylesheet" href="style.css"> Matthieu Giraud C2i : Création de pages web 26 / 33

27 Style d une page web Introduction Style d une balise Balise Nous l avons vu précédemment, une balise est de la forme : <p>la balise pour les paragraphes</p> Style de la balise <p> p { color: green; background-color: black; } Matthieu Giraud C2i : Création de pages web 27 / 33

28 Style d une page web Classe d une balise Classe d une balise Problème Comment faire si nous voulons appliquer deux styles différents pour deux paragraphes? Matthieu Giraud C2i : Création de pages web 28 / 33

29 Style d une page web Classe d une balise Classe d une balise Classe d une balise Nous pouvons définir différentes classes pour une même balise et ainsi maîtriser différentes mises en forme. Exemple <p class="intro">un paragraphe de classe "intro".</p> <p class="conclusion">un paragraphe de classe "conclusion".</p> Matthieu Giraud C2i : Création de pages web 29 / 33

30 Style d une page web Classe d une balise Classe d une balise Exemple p.intro { color: blue; } p.conclusion { color: red; } Matthieu Giraud C2i : Création de pages web 30 / 33

31 Style d une page web Mise en forme avec CSS Les couleurs en CSS Quelles sont les couleurs disponibles avec le CSS? Exemple blue, red, yellow, green, orange, etc. #1E90FF? Regardez sur ce lien : p { color: #1E90FF; } Matthieu Giraud C2i : Création de pages web 31 / 33

32 Style d une page web Les hyperliens et le CSS Les hyperliens et le CSS Pour colorer les liens a:link { color: red; } Et quand la souris passe dessus... a:hover { color: hotpink; } Matthieu Giraud C2i : Création de pages web 32 / 33

33 Style d une page web Redimenssioner une image Redimenssioner une image Si nous avons une image de classe Exemple (class= Exemple ) que nous souhaitons réduire de 50% en largeur, nous utiliserons le code suivant : Exemple img.exemple { max-width: 50%; height: auto; } Matthieu Giraud C2i : Création de pages web 33 / 33

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

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

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

Plus en détail

HTML CSS Fiche numéro 6

HTML CSS Fiche numéro 6 HTML CSS Fiche numéro 6 Sources : https://openclassrooms.com/ L'ancien site 2minuteslearning.fr qui à malheureusement disparu https://www.vectorskin.com/balises-html5/ Mettre en place le CSS Dans un premier

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

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

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

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

Plus en détail

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

Réussir son site web avec XHTML et CSS

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

Plus en détail

Partie HTML TD 1 : Les bases du HTML

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

Plus en détail

HTML et page Web diaporama

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

Plus en détail

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

Apprendre les bases du HTML5 et du CSS3. Objectif : Dans cette série d'activités vous apprendrez à utiliser HTML5 et CSS3 pour créer des pages web

Apprendre les bases du HTML5 et du CSS3. Objectif : Dans cette série d'activités vous apprendrez à utiliser HTML5 et CSS3 pour créer des pages web Apprendre les bases du HTML5 et du CSS3 Objectif : Dans cette série d'activités vous apprendrez à utiliser pour créer des pages web Durée : 4h Chapitre 2 Nom : Prénom : Classe : Table des matières Activité

Plus en détail

page web et html 1 principe général 2

page web et html 1 principe général 2 page web et html Table des matières 1 principe général 2 2 écrire et lire un document en HTML 3 2.1 Les références internationales................................. 3 2.2 Pour tester le code source et voir

Plus en détail

Le langage HTML. HTML est la «langue maternelle» de votre navigateur web

Le langage HTML. HTML est la «langue maternelle» de votre navigateur web Qu'est-ce que le HTML? HTML est la «langue maternelle» de votre navigateur web L HyperText Markup Language, en abrégé HTML, est le format de données conçu pour représenter les pages web. HTML permet de

Plus en détail

M1 / VP8 CREATION DE FEUILLES DE STYLE

M1 / VP8 CREATION DE FEUILLES DE STYLE M1 / VP8 CREATION DE FEUILLES DE STYLE Master 1 [Tribet Hervé] 2012 Styles sous DW8 Les styles HTML sont des mises en forme complexes regroupées sous une appelation ; on peut créer des styles HTML avec

Plus en détail

Arbres Mathématiques Informatique et Navigateurs Internet

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

Plus en détail

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

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

Plus en détail

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

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

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

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

Plus en détail

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

Contrôle final Développement Web

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

Plus en détail

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

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

Plus en détail

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

CHARGÉE DE COURS : N. VANASSCHE

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

Plus en détail

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

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

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

Plus en détail

Mon Mondrian. Compétences visées. Les bases du HTML, du CSS, la balise

Mon Mondrian. Compétences visées. Les bases du HTML, du CSS, la balise <div>, le positionnement, les mesures. Description Mon Mondrian Compétences visées Les bases du HTML, du CSS, la balise , le positionnement, les mesures. Description Peindre, c'est salissant. Le code, c'est plus propre. À travers ce projet, recréez

Plus en détail

Isn, Loud Jouhar Projet Projet ISN : Création d un site pour l apprentissage de l alphabet.

Isn, Loud Jouhar Projet Projet ISN : Création d un site pour l apprentissage de l alphabet. Projet ISN : Création d un site pour l apprentissage de l alphabet. 1 Sommaire I) Création du site internet II) Mise en forme du site III) Intégration du JavaScript 2 I) Création d un site internet. 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

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

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

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

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

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

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

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

Plus en détail

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

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

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

Plus en détail

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

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

Plus en détail

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

Introduction à la Simulation

Introduction à la Simulation ou comment créer votre premier jeu vidéo Jacques Duma http://math.et.info.free.fr/ http://ateliermathematique.free.fr/ Aspect visuel souhaité Aspect visuel souhaité Code source de la page HTML Feuille

Plus en détail

/* basic elements */ html { font: 75% georgia, sans- serif; Design

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

Plus en détail

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

HTML : exercices. 2. Enregistrez le fichier sous le nom «test.html» 3. A l aide d un navigateur, ouvrez le fichier que vous venez d écrire

HTML : exercices. 2. Enregistrez le fichier sous le nom «test.html» 3. A l aide d un navigateur, ouvrez le fichier que vous venez d écrire HTML : exercices Exercice 1 : Affichage de document HTML 1. Ouvrez le bloc-note, copiez-y le document suivant : mon premier document Il fait beau .

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

Le World Wide Web. Les origines. Tim Berners-Lee en 2010

Le World Wide Web. Les origines. Tim Berners-Lee en 2010 Le World Wide Web En 1989, Tim Berners-Lee travaille comme informaticien au CERN 1. Il propose à sa hiérarchie de travailler sur un système informatique qui permettrait aux chercheurs du centre de partager

Plus en détail

STUDIO - TI6 TABLE DES MATIÈRES NOUVELLE MATIÈRE. 1. Donner une «class» à une

<div></div> STUDIO - TI6 TABLE DES MATIÈRES NOUVELLE MATIÈRE. 1. Donner une «class» à une <div> Sujet STUDIO - TI6 PASCAL PLACEMAN Sujet HTML - CSS révisions TABLE DES MATIÈRES Nouvelle matière: 1. Donner une «class» à une 2. Créer une div en plein-écran 3. Gérer des colonnes 4. Mettre une video

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

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

Cours de XHTML. chaîne de caractères

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

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

texte affiché

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

Plus en détail

En-tête d'un document HTML : l'élément Balises dans. 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

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

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

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

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

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

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

Plus en détail

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

Editeur HTML. Mozilla

Editeur HTML. Mozilla Editeur HTML Mozilla Présentation Mozilla est un navigateur Web, il permet également de gérer la messagerie (Email) et d'éditer des pages au format HTML (Hyper Text Markup Language). Mozilla est basé à

Plus en détail

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

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

Plus en détail

TP n 1 : Initiation au langage HTML

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

Plus en détail

Une (petite) initiation au langage HTML

Une (petite) initiation au langage HTML Une (petite) initiation au langage HTML Julien Coulié Partie 1 : Les bases Le langage HTML (HyperText Markup Language) est un langage de description de documents qui est le standard utilisé pour les pages

Plus en détail

Proposition de méthode pour créer un document web de recherche à l aide de OpenOffice Writer.

Proposition de méthode pour créer un document web de recherche à l aide de OpenOffice Writer. Proposition de méthode pour créer un document web de recherche à l aide de OpenOffice Writer. Les deux seules techniques logicielles qui seront sollicitées dans ce document sont le l enregistrement d images

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

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

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

Plus en détail

Mise en Forme avec CSS

Mise en Forme avec CSS Mise en Forme avec CSS Une feuille de style permet de définir la police, la taille, le style (gras, italique, souligné) la couleur du texte, des liens etc. A peu près tout ce qui concerne la présentation

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

GL/ITEC 2915F Automne 2011 L utilisation de l ordinateur et des logiciels d applications I DEVOIR # 2 A soumettre le 12 décembre 2011 avant minuit

GL/ITEC 2915F Automne 2011 L utilisation de l ordinateur et des logiciels d applications I DEVOIR # 2 A soumettre le 12 décembre 2011 avant minuit Glendon Campus Information Technology (ITEC) Objectifs GL/ITEC 2915F Automne 2011 L utilisation de l ordinateur et des logiciels d applications I DEVOIR # 2 A soumettre le 12 décembre 2011 avant minuit

Plus en détail

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

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

Plus en détail

Initiation aux technologies de l information

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

Plus en détail

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

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

Plus en détail

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

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

Plus en détail

Les standards du web

Les standards du web COURS - Partie 1 Le HTML5 et le CSS3, petits frères du HTML (ou XHTML) et du CSS viennent, alors que l ère actuelle est à l interconnexion et aux média multiples. Dans le but de satisfaire la demande grandissante

Plus en détail

Langage HTML (suite).

Langage HTML (suite). Langage HTML (suite). Walid Belkhir Université de Provence belkhir@cmi.univ-mrs.fr http://www.lif.univ-mrs.fr/ belkhir/ 1 / 36 Plan de la partie 1 (2 séances) Internet et le Web (cours 1) Un outil pour

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

Les CSS pour la mise en page

Les CSS pour la mise en page Les CSS pour la mise en page Nous allons créer deux fichier style_div.css contiendra toutes les informations relatives au positionnement de nos différents blocs. positionnement.htm contiendra tout notre

Plus en détail

Guide d utilisation pour utilisateur «userpsa»

Guide d utilisation pour utilisateur «userpsa» Guide d utilisation pour utilisateur «userpsa» Site Internet du comité d entreprise http://cepcacharleville.fr Page 1 sur 13 SOMMAIRE 1 VERSION DU DOCUMENT... 3 2 COMMENT BIEN UTILISER CE GUIDE... 4 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

Introduction à la conception de sites web

Introduction à la conception de sites web Introduction à la conception de sites web Yannick Prié UFR Informatique Université Claude Bernard Lyon 1 9-16 janvier 2006 1- Les grands principes du web (1) Client / serveur réseau programmes communicants

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

Balises obsolètes.

texte

p { font-size: 20px; color: red; text-transform: uppercase; }

Balises obsolètes. <p>texte</p> p { font-size: 20px; color: red; text-transform: uppercase; } Balises obsolètes De nombreuses balises et propriétés sont obsolètes : font, basefont, center, s, u, b, i, align, width, height, size, color, border, background, bgcolor, border, face, name, target, En

Plus en détail

Utilisation du Web. Sommaire. Notions de base 1

Utilisation du Web. Sommaire. Notions de base 1 Utilisation du Web Sommaire Notions de base 1 Navigation Saisie d une URL (adresse http) dans la barre d adresse 2 Cliquer sur un lien hypertexte (ou hyperlien) 2 Définition 2 Utilisation 2 Utilisation

Plus en détail

Technologies du Web. CONDITIONS DE DEROULEMENT DE L ACTIVITE Phases de travail Objectifs Activités

Technologies du Web. CONDITIONS DE DEROULEMENT DE L ACTIVITE Phases de travail Objectifs Activités Technologies du Web Tutoriel 2 : «Présenter une page Web» Problématique Présenter une page web avec une feuille de style. CONDITIONS DE DEROULEMENT DE L ACTIVITE Phases de travail Objectifs Activités 1

Plus en détail

PAGE 1. L écran du logiciel NVU. Barre de menu: Les commandes du logiciel

PAGE 1. L écran du logiciel NVU. Barre de menu: Les commandes du logiciel PAGE L écran du logiciel NVU Nom du document : Nom d enregistrement Barre de mise forme: Texte, couleurs, fond,... Barre de menu: Les commandes du logiciel Barre d outils: Les boutons de commande Gestionnaire

Plus en détail

HTML CSS Fiche numéro 14

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

Plus en détail

Développement web avec XHTML et CSS

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

Plus en détail

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

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

Les fonctions de base pour utiliser «Le pagicien»

Les fonctions de base pour utiliser «Le pagicien» Les fonctions de base pour utiliser «Le pagicien» Le Pagicien permet la création d hyperdocument diffusable sur cédérom ou sur Internet avec la version 3. Ce document se propose de vous proposer les fonctions

Plus en détail

Powerpoint Atelier Cyber-Base Emploi Pays Beaujolais

Powerpoint Atelier Cyber-Base Emploi Pays Beaujolais Powerpoint Atelier Cyber-Base Emploi Pays Beaujolais Apprendre à utiliser le logiciel Powerpoint 2010, dans le but de réaliser une présentation auprès d un public. Les animateurs Cyber-base Emploi Pays

Plus en détail

Dossier PPE LE PORTALP

Dossier PPE LE PORTALP Dossier PPE LE PORTALP Crosetti Pauline TSSI Lycée Colbert Tourcoing Année scolaire 2012/2013 Sommaire : - I) Recherches sur le Portalp - II) Recherches sur la supervision - III) Plusieurs choix possibles

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

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

de la page.

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

Plus en détail

Classes : PREMIERES A-C-D

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

Plus en détail

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

Introduction au langage HTML

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

Plus en détail

Les Fiches pratiques Coin-Web

Les Fiches pratiques Coin-Web Créer / modifier son site web à l aide d un logiciel Open Source Pré-requis : Sommaire Avant de consulter cette fiche pratique, il est bon d avoir assimilé les notions d HTML et CSS. 1. Définitions...

Plus en détail

1 - travail en pleine page du navigateur

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

Plus en détail

Le B.A-BA du HTML. Que contient une page web? Rédaction d'une petite page web. - du texte. - des images. - des liens

Le B.A-BA du HTML. Que contient une page web? Rédaction d'une petite page web. - du texte. - des images. - des liens Le B.A-BA du HTML Que contient une page web? Une page Web, tout comme une page de texte rédigée avec n'importe quel traitement de texte contient principalement du texte, des images et des liens. - du texte

Plus en détail