Partie HTML TD 1 : Les bases du HTML

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

Download "Partie HTML TD 1 : Les bases du HTML"

Transcription

1 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 être édité à l'aide de n'importe quel traitement de texte HTML permet d'établir des liens de navigation entre plusieurs pages Web HTML est également un langage d'intégration. Il permet, à l'aide de commandes spécialisées, d'incorporer des éléments non purement textuels (graphismes mais également formulaires, programmes interactifs, animations, etc.) HTML est un langage riche et sa manipulation avec un simple éditeur de texte s'avère rapidement complexe. D'où la nécessité pour les développeurs d'utiliser une gamme d'outils prenant en charge la génération automatique du code HTML. Il repose sur le protocole http et est compris par tous les navigateurs. Ce n est pas un langage de programmation. Il est constitué de balises qui permettent de mettre en forme du texte et des images sur une page Web avec des possibilités de navigation (liens hypertextes) au sein de ces pages. Il suffit de posséder un simple éditeur de texte pour définir une page Web en HTML (le fichier aura l extension.html) et un navigateur pour la visualiser. 2 Un premier exemple pour commencer : la page de l Autruche 2.1 Lancer une page Web Récupérez le dossier Page web autruche sur le poste enseignant (rappel : poste 11). Dans votre navigateur, Internet Explorer ou Netscape, ouvrez index.html (Fichier/Ouvrir) : vous tombez sur une page web. Naviguez-y un peu Combien de pages comporte ce site? 2.2 Ce qui se cache derrière ces pages Pour voir le code HTML d une page Placez-vous sur la page d accueil de notre site de l autruche. Page 1 sur 6

2 Dans Internet Explorer, faites Affichage / Source. Dans Netscape, ouvrez Netscape Composer (Communicator / Composer), puis faites Affichage / Source de la page. Si aucun éditeur de texte n est choisi pour voir le code HTML, faites Parcourir, et sélectionnez C:/ Windows/ Notepad. Vous voyez ainsi le code HTML : langage composé de balises et servant à afficher des pages contenant des liens hypertextes C est quoi une balise? Deux types de balises et leurs rôles Il existe 2 types de balises : des balises de structure (ex : <P>texte du paragraphe </P> pour définir un paragraphe) des balises de mises en forme (ex : <i>texte en italique</i> pour mettre un texte en italique). Une balise sert dans une page HTML à mettre en forme le texte, c est-à-dire comme dans un traitement de texte classique, type Word, à : - mettre le texte en gras - changer sa taille - faire des tableaux - insérer des images - changer les couleurs (texte et fond d écran), etc. Mais aussi à créer des liens hypertextes pour pouvoir surfer sur le web! Construction d une balise Une balise est une "instruction" comprise entre crochets < > qui possède un nom et parfois des attributs. Elles se construisent de la façon suivante : <balise ouvrante> Texte qu on verra sur la page </balise fermante> Où la balise de fin porte le même nom que la balise de début précédé du signe /. (ex : <P>texte du paragraphe </P>) Certaines de ses balises peuvent contenir des attributs qui fournissent une précision sur la balise. Ils se rajoutent dans la balise de début et sont souvent de la forme nom=valeur. ex : <BODY text="red" bgcolor="green">..</body> : le texte sera en rouge et le fond sera vert 3 La structure d une page Web en HTML 3.1 Structure de base <HTML> <HEAD> <TITLE> Titre de la page </TITLE> <META name= «auteur» content= «Dupont»>. </HEAD> <BODY>. </BODY> </HTML> Page 2 sur 6

3 L entête comprise entre <HEAD> et </HEAD> regroupe des informations qui ne seront pas affichées dans la page par le navigateur. Elle contient le titre du document entre <TITLE> et </TITLE> qui apparaîtra sur la barre de titre de la fenêtre. Des métadonnées comme le nom de l auteur, des mots-clés, un résumé, etc. Des scripts complémentaires écrits en Javascript ou Java ou VBScripts qui complètent les fonctionnalités de base du HTML Le corps du document compris entre <BODY> et </BODY> représente ce qui apparaîtra dans la fenêtre du navigateur. 3.2 Exemple 4 Des balises repères 4.1 <HTML> </HTML> C est elle qui nous montre qu on est bien sur une page HTML. Elle débute et clôt une page. 4.2 <HEAD> </HEAD> On y retrouve des informations qui ne seront pas affichées dans la page par le navigateur : le texte qui apparaîtra dans la barre de titre du navigateur, entre les balises <TITLE> et </TITLE>, ici c est index.html. Des métadonnées comme le nom de l auteur, des mots-clés, un résumé, etc. Des scripts complémentaires éc rits en Javascript ou Java ou VBScript qui complètent les fonctionnalités de base du HTML. 4.3 <BODY> </BODY> Cette balise nous indique qu on passe au texte de la page proprement dit. Voilà pourquoi elle contient des indications de couleur : de la police : text="#000000" (texte en noir) Page 3 sur 6

4 du fond d écran : bgcolor="#ffffff" (sur fond blanc). Mais on y trouve aussi la couleur des liens : LINK : couleur des liens hypertextes de la page (LINK="#0000FF", c est bleu). VLINK : couleur des liens hypertextes visités de la page. ALINK : couleur des liens hypertextes actifs, c est-à-dire en train d être visités. 4.4 Attention à l ordre des balises Les balises peuvent être imbriquées : attention à bien les refermer dans l ordre de leur ouverture. Exemple : <B><I><CENTER>mon texte</center></i></b> Exercice : Observez bien dans quel ordre on ouvre et on ferme les balises, et remettez le texte HTML suivant dans l ordre : <li><b><center><font size=+2>joli comme tout!</font></li></center></b> 5 Quelques balises de base et leurs attributs 5.1 Balises de structure "righ"t <P> </P> Constitue un nouveau paragraphe Attributs : align= "center" ou "left" ou ex : <P align="center"> Paragraphe centre </P> <H1> </H1> définit un titre de niveau 1(possibilité de 6 niveaux de titres) Attributs : align ex : <H1 align="center">ceci est un titre de niveau 1 centré</h1> 5.2 Balises de mise en forme <HR> Place une ligne séparatrice horizontale Attributs : align, size, width, color ex : <HR size="2" width="250" align="center" color="red"> <BR>Place un saut de ligne à l intérieur d un paragraphe ex : <BR> ligne2 ligne1 <CENTER> </CENTER> Centre le texte Cet effet peut être obtenu par un attribut de la balise <P> ex : <CENTER>Voici un texte centré</center> <FONT> </FONT> Permet de modifier le texte (couleur, taille, police) Attributs : color= "nom de la couleur" (Les couleurs les plus fréquentes peuvent être nommées explicitement en anglais (red, yellow, blue,...) sinon il faut placer le code Hexadécimal de la couleur voulue) face= "nom de la police" size="taille de la police" (nombre entre 1 et 7) ex : <FONT size="2" color= "blue" face= "Verdana" >texte écrit en taille 2 en bleu avec la police Verdana</FONT> <I> </I> Met le texte en italique <B> </B> Met le texte en gras Page 4 sur 6

5 <U> </U> Souligne le texte <SUP> </SUP> Texte en exposant <!-- --> : Met des commentaires. Le texte compris entre ces balises ne sera pas pris en compte par le navigateur ( ==> pas affiché!). Le commentaire peut s'étendre sur plusieurs lignes. 6 Exercices de synthèse 6.1 Exercice 1 Vous allez créer une page, appelée Base_HTML.html, qui fera apparaître plusieurs mises en forme de paragraphes et de titres. La page comprendra 3 parties. Il est conseillé d aller vérifier dans le navigateur votre travail entre chaque partie. Pour cela, enregistrez votre fichier avec le bloc-notes et réactualisez la page dans le navigateur. Description de la page à créer : Le fond de la page sera bleu et le texte blanc. Le titre de la page sera : 1 ère partie : Mise en forme de base Un titre de niveau 1 centré : PREMIERE PARTIE Un paragraphe avec le texte suivant en rouge : Je suis le premier paragraphe, je suis rouge Une ligne séparatrice de taille 2 et de couleur rouge 2ème partie : Un titre de niveau 2 centré : DEUXIEME PARTIE Un paragraphe centré constitué des 3 lignes suivantes avec le texte jaune et de taille 5 : Je suis le 2eme paragraphe au centre en taille 5 et en jaune Une ligne séparatrice de taille 7, de 300 pixels de longueur et de couleur noire 3ème partie : Un titre de niveau 3 centré : TROISIEME PARTIE Un paragraphe, à droite comprenant le texte suivant en taille 7 et la police Arial : Je suis le dernier paragraphe, je suis en taille 7 avec la police Arial et à droite 6.2 Exercice 2 : site de l autruche Ouvrez index.html avec le logiciel Scite. Modifiez donc le texte de la barre de titre en : «Bienvenue», qui apparaîtra en haut à gauche de la barre de titre du navigateur. Après l avoir modifié, pour voir sur le navigateur ce que cela donne, faites Fichier / Enregistrer dans l éditeur de texte où se trouve le code HTML pour le mettre à jour, puis sous Internet Explorer, Affichage / Actualiser, ou F5 ou icône Actualiser dans la barre d outils. Faites en sorte que «Le must du Web» apparaisse sans italique et en taille 5. Le fond de la page sera vert et le texte blanc. A la fin du texte de cette page, vous mettrez une ligne séparatrice de taille 7, de 300 pixels de longueur et de couleur grise ou jaune. Sur autruche.html, rajoutez le titre de niveau 1 «Les avis», qui sera centré, rose et placé avant le paragraphe Liens. Page 5 sur 6

6 Créez une ligne séparatrice de taille 2 et de couleur rouge entre ce paragraphe et le précédent. Créez 2 paragraphes de niveau 2 juste après, intitulés : «Pour :» et «Contre :» Ecrivez du texte pour et contre les autruches au bon endroit, dans 2 paragraphes centrés, en police Tahoma et en gras. Transformez «Liens» en titre de niveau 2 et changez l intitulé du lien proprement dit sur la page en «Autre site sur les autruches». Pour avoir le code des couleurs (noms et codes hexadécimaux) voir les sites suivants : Page 6 sur 6

Cours N 6 Le langage HTML

Cours N 6 Le langage HTML Cours 6: Technologies web - le langage HTML Cours N 6 Le langage HTML Concepts de Base 1. Généralités HTML (pour HyperText Markup Language) est un langage de description de documents hypermédia. Un document

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

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

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

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

Technologies du Web: HTML

Technologies du Web: HTML Technologies du Web: HTML TP 2 : Structure générale et texte Objectifs : Dans ce premier TP, les balises de bases (h1,p,br...) ainsi que leurs principaux attributs sont abordés afin que nous soyons tout

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

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

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

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

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

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

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

- 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

Guide d utilisation -

Guide d utilisation - Accéder au tableau de bord Pour entrer dans l espace d administration, allez à l adresse suivante : www.physiomouvementplus.com//wp-admin Une fenêtre d identification s ouvre alors : entrez votre Identifiant

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

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

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

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

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

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. Bruno BEAUFILS 2017/2018. Web 1 / 15

Web. Bruno BEAUFILS 2017/2018. Web 1 / 15 Web Bruno BEAUFILS 2017/2018 Web 1 / 15 1. World Wide Web HTML CSS Web World Wide Web 2 / 15 1. World Wide Web HTML CSS Web World Wide Web 3 / 15 Exercice Ecrivez un document vous décrivant à la forme

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

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

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

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

Le HTML dans la page web

Le HTML dans la page web Le HTML dans la page web 1 Qu est-ce que HTML? HTML est le langage descriptif formel utilisé pour créer des pages web. C est le seul langage permettant d afficher une page web dans un navigateur. HTML

Plus en détail

Formation Grainville la teinturiere. la- teinturiere.fr

Formation Grainville la teinturiere.  la- teinturiere.fr Formation Grainville la teinturiere www.grainville- la- teinturiere.fr Propulsé par : Un CMS en Open Source Version 1 p. 1 2 [Tapez le texte] Comment fonctionne le site? Le site permet aux internautes

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

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

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

Les raccourcis typographiques de SPIP

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

Plus en détail

DISI - Département TICE. L éditeur de Moodle

DISI - Département TICE. L éditeur de Moodle DISI - Département TICE L éditeur de Moodle Janvier 2010 Présentation de l éditeur L éditeur WYSIWIG La plupart des champs de texte de Moodle (contenu des ressources, étiquette, résumé de section, message

Plus en détail

UE8.III - TD algorithmique 1/6

UE8.III - TD algorithmique 1/6 TD 12.1 HTML Construction de page Web 1- On propose de construire une nouvelle page web. Pour cela, on crée un nouveau document avec le "Bloc-notes" et on saisit les éléments suivants : un premier

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

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

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

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

T.P. OUTILS DE L INTERNET

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

Plus en détail

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

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

Technologie Projet 2 : «Site WEB sur l'évolution de l'éclairage» 3éme Séquence n 5 DES MESURES : DE PAGES HTML

Technologie Projet 2 : «Site WEB sur l'évolution de l'éclairage» 3éme Séquence n 5 DES MESURES : DE PAGES HTML PUBLICATION DES MESURES : CRÉATION DE PAGES HTML 1 ) SUITE DE L'APPRENTISSAGE SUR LE LANGAGE HTML Voir ci-dessous un fichier HTML minimum. Remarquer «l'indentation» de ce texte.

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

Module Javascript - Présentation du langage - Exercices d application

Module Javascript - Présentation du langage - Exercices d application Module Javascript - Présentation du langage - Exercices d application February 15, 2011 Module Javascript - Présentation du langage - Exercices d application ii Contents 1 Exercice 1 1.1 Les premiers programmes

Plus en détail

Rédaction d une fiche thématique Mutuelles étudiantes : Se grouper pour agir

Rédaction d une fiche thématique Mutuelles étudiantes : Se grouper pour agir Rédaction d une fiche thématique Mutuelles étudiantes : Se grouper pour agir Philippe Marcy (webmaster) Table des matières 1. QU EST-CE QU UNE FICHE THÉMATIQUE?... 2 2. FAIRE UNE PROPOSITION DE FICHE THÉMATIQUE...

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

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

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

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

Exercice 4 Manipulation des balises HTML

Exercice 4 Manipulation des balises HTML 1 Exercice 4 Manipulation des balises HTML Dans cet exercice vous allez simplement manipuler les différentes syntaxes qui constituent le langage html. Sources : Une fois l archive décompressée vous trouverez

Plus en détail

Techniques Internet de Base TD 1 HTML

Techniques Internet de Base TD 1 HTML Techniques Internet de Base TD 1 HTML 1. Ecrire une page HTML avec un titre (à afficher sur la barre du titre du navigateur), des informations concernant l auteur et les mots clés, et une phrase de texte.

Plus en détail

Première exploration de Bluefish et. création d un formulaire simple

Première exploration de Bluefish et. création d un formulaire simple Première exploration de Bluefish et création d un formulaire simple Table des matières Première exploration de Bluefish avec les fichiers déjà créés au dernier cours...2 Création d un projet incorporant

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 CSS : CASCADING STYLE SHEET I 2 Historique CSS a été introduit avec HTML 4, afin de fournir une meilleure façon de mettre en forme

Plus en détail

ISN S9: Les pages web

ISN S9: Les pages web Objectif : Mettre en forme une page HTML Lors de l'écriture de pages web, nous savons qu'il faut prendre l'habitude de toujours séparer : Le fond (le contenu) : c'est le rôle du fichier HTML. La décoration

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

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

> 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

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

FICHE 7 : INSERER UNE ZONE DE TEXTE

FICHE 7 : INSERER UNE ZONE DE TEXTE FICHE 7 : INSERER UNE ZONE DE TEXTE Dans Publisher comme dans PowerPoint, le texte d insère dans des zones de texte. 1. CREER UNE ZONE DE TEXTE 1. Cliquez sur le bouton Zone de texte. 2. Avec le bouton

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

8 Puces et indentations

8 Puces et indentations 8 Puces et indentations Une palette «liste» proposant des mises en forme est à disposition dans l espace privé, toutefois voilà le codage à faire si vous souhaitez indenter le texte différemment ou l indenter

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

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

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

3/ ATELIER WEB LANGAGE CSS

3/ ATELIER WEB LANGAGE CSS 3/ ATELIER WEB LANGAGE CSS *Cascading Style Sheets : feuilles de style en cascade. Les feuilles de style servent, comme leur nom l'indique, à contenir les styles que vont prendre les différents éléments

Plus en détail

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

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

Plus en détail

Mot. Ensemble de caractères, mots ou phrases balisé par un saut

Mot. Ensemble de caractères, mots ou phrases balisé par un saut 1 Présentation du logiciel Traitement de texte générant des fichiers avec extension.doc contenant des données : texte, tableau, graphiques, images Caractère Mot Elément unitaire saisi au clavier pouvant

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

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

Enseignant d informatique au collège Bougafer - Alnif - délégation Tinghir, et

Enseignant d informatique au collège Bougafer - Alnif - délégation Tinghir, et Réalisée par : Mohamed AGHROUD Enseignant d informatique au collège Bougafer - Alnif - délégation Tinghir, et Formateur MOS au centre de formation école Saghrou1 - Alnif- délégation Tinghir. 1. Fichier

Plus en détail

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

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

Plus en détail

Les feuilles de style

Les feuilles de style 1 Les feuilles de style 1. introduction... 1 2. déclaration de style dans le document... 1 3. définitions de style dans les fichiers externes... 5 4. Les attributs de définitions de style... 6 1. introduction

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

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 10 Réussir son site web avec XHTML et CSS Positionnement et mise en page par le CSS 1. Les 3 modes d affichage pour les éléments HTML... 1 1- Bloc / block... 1 2- En-ligne / inline... 1 3- Invisible

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

Année universitaire Examen seconde session : 18/04/2016 Responsable : Olivier PONS. Durée : 3 heures

Année universitaire Examen seconde session : 18/04/2016 Responsable : Olivier PONS. Durée : 3 heures Sujet UE NFA016 : Développement web (1) Année universitaire 2015 2016 Examen seconde session : 18/04/2016 Responsable : Olivier PONS Durée : 3 heures Tout document papier autorisé. Tout support électronique

Plus en détail

CSS. Alexandre Benoit TS 2016/2017. D après openclassrooms

CSS. Alexandre Benoit TS 2016/2017. D après openclassrooms CSS D après openclassrooms Alexandre Benoit TS 2016/2017 I Les bases du CSS 2 / 29 Introduction Où écrit t on le CSS? : Dans un nouveau fichier par exemple, nous l écrirons dans le fichier style.css Dans

Plus en détail

Technologie de web. partie pratique. Pierre Manneback Mohammed EL ADOUI Service d informatique, FPMS UMONS à Charleroi

Technologie de web. partie pratique. Pierre Manneback Mohammed EL ADOUI Service d informatique, FPMS UMONS à Charleroi Technologie de web partie pratique Pierre Manneback Mohammed EL ADOUI Service d informatique, FPMS UMONS à Charleroi Plan HTML et CSS : Exercices basiques : 1 heure JavaScript : Interaction dynamique,

Plus en détail

1 Présentation de l'interface GaïaMundi

1 Présentation de l'interface GaïaMundi Manuel de gestion de la plateforme Attlas & sites filleuls 1 Présentation de l'interface GaïaMundi...1 1.1 Ergonomie des 3 volets... 1 1.2 La barre de menus... 3 2 Création d'un nouveau site... 3 3 Mise

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

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

TD 2 Traitement de texte : fonctionnalités avancées

TD 2 Traitement de texte : fonctionnalités avancées Compétences visées TD 2 Traitement de texte : fonctionnalités avancées Consolider les notions du TD rpécédent Insertion d images, de graphiques et de tableaux dans un document. Présenter un texte sur plusieurs

Plus en détail

Espace Rédacteurs

Espace Rédacteurs Espace Rédacteurs www.aijc.info 1 Avant-propos : Architecture du site Le site est composé de deux parties : 1. Partie publique Comme son nom l indique, il s agit de la partie accessible à tous les internautes.

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

GUIDE D ADMINISTRATION DE VOTRE FICHE PERSONNELLE Avertissements : Les modifications que vous avez insérées n apparaîtront pas sur Internet avant modération par le CRL. Votre session est ouverte pour une

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

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

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

TD n 5 : Feuilles de styles

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

Plus en détail

GUIDE D UTILISATION DU LOGICIEL LIMESURVEY (Création d enquêtes en ligne)

GUIDE D UTILISATION DU LOGICIEL LIMESURVEY (Création d enquêtes en ligne) GUIDE D UTILISATION DU LOGICIEL LIMESURVEY (Création d enquêtes en ligne) http://w3.avignon.inra.fr/limesurvey/admin/admin.php Username : admin Password : Quelques liens utiles pour travailler sur Limesurvey

Plus en détail

METTRE EN FORME UN ARTICLE

METTRE EN FORME UN ARTICLE METTRE EN FORME UN ARTICLE Il y a trois méthodes pour mettre en valeur le contenu d un article : Soit avec la barre typographique. Soit avec des raccourcis clavier. Soit avec des balises html. 1 ère méthode

Plus en détail

ELEMENTS DE PRESENTATION

ELEMENTS DE PRESENTATION I - Production de présentation : 1 - Qu'est-ce qu'une présentation? ELEMENTS DE PRESENTATION C'est un moyen pour illustrer... Une présentation sera projetée sur un grand écran, le conférencier contrôle

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

SITE INTERNET LPR DU HAUT FOREZ MODE D EMPLOI

SITE INTERNET LPR DU HAUT FOREZ MODE D EMPLOI SITE INTERNET LPR DU HAUT FOREZ MODE D EMPLOI SOMMAIRE I) ECRIRE UN ARTICLE... 3 II) LE TEXTE DE L ARTICLE... 8 III) INSÉRER UN DOCUMENT... 11 IV) SE DÉCONNECTER DE L ESPACE PRIVÉ... 14 V) SE CONNECTER

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

Tutoriel d utilisation

Tutoriel d utilisation Centre Social Bordeaux Nord Tutoriel d utilisation Traitement de texte Word NOM : SOMMAIRE INTRODUCTION 2 CREATION DE PAGE / MISE EN PAGE 3 Taille, orientation et marge du document 3 Coupure de mots 4

Plus en détail

Créer un livre électronique avec Didapages.

Créer un livre électronique avec Didapages. Créer un livre électronique avec Didapages. Lancer Didapages en double-cliquant sur son icône. Lors du premier lancement, cliquer sur Démarrer un nouveau projet. Compléter les 3 cases du haut : la première

Plus en détail

2- Double-cliquez sur l icône du logiciel. 3- La fenêtre de l assistant de présentation s ouvre.

2- Double-cliquez sur l icône du logiciel. 3- La fenêtre de l assistant de présentation s ouvre. Comment créer un diaporama avec le logiciel de présentation de Open office? s 1- Préparez vos diapositives : sur des demi feuilles A4, 5- Créez les diapositives et choisissez la mise en page faites la

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

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