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

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

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

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

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

- 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

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

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

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

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

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

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

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

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

> 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Test Test Test Test Test

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

Plus en détail

Créer 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

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

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

TD1 Manipulation d un document long

TD1 Manipulation d un document long TD1 Manipulation d un document long ENREGISTREZ VOS DOCUMENTS REGULIEREMENT UTILISEZ LES UTILITAIRES D'AIDE A Rappel sur les modèles de documents A.1 Définition Un modèle est un objet destiné à être imité.

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

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

Dreamweaver 2.0. GUIDE D UTILISATION POUR Dreamweaver 2.0. Logiciel de création de pages HTML. Page 1

Dreamweaver 2.0. GUIDE D UTILISATION POUR Dreamweaver 2.0. Logiciel de création de pages HTML. Page 1 1 GUIDE D UTILISATION POUR Dreamweaver 2.0 Logiciel de création de pages HTML SOMMAIRE Sommaire 1 Démarrer avec Dreamweaver 2.0 2 Le texte avec Dreamweaver 2.0 4 Insérer un lien hypertexte 4 Choisir les

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

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

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

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

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

GUIDE Word (version intermédiaire) Version 2010 Table des matières

GUIDE Word (version intermédiaire) Version 2010 Table des matières GUIDE Word (version intermédiaire) Version 2010 Table des matières 1. Les rubans... 2 2. Pagination... 4 3. En-tête et pied de page... 5 4. Note de bas de page ou des notes de fin de document... 7 5. Table

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

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

Formation sur Word. Formation sur Word

Formation sur Word. Formation sur Word Formation sur Word Microsoft office Word est un logiciel de traitement de texte permettant la rédaction de documents, de rapports, de notes de service, etc. Il permet de faciliter l envoie de lettre par

Plus en détail

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

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

Plus en détail

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

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

Starter Kit. KompoZer. Apprenez, pratiquez, créez

Starter Kit. KompoZer. Apprenez, pratiquez, créez Starter Kit KompoZer Apprenez, pratiquez, créez PARTIE 1 Découvrir Kompozer CHAPITRE 4 Mes premières pages web La publication sur le Web possède ses propres techniques. Une page d un site n est pas une

Plus en détail

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

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

Plus en détail

Les formulaires types

Les formulaires types Les formulaires types Les formulaires types Formulaires interactifs Permettant de saisir des informations en remplissant des champs ou en cliquant sur des boutons Les formulaires De quoi avez vous besoin

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

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

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

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

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

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

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

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 11 v2 Réussir son site web avec XHTML et CSS TD de révision : le design d un site web 1. La structure générale... 2 2. Primo, le XHTML... 3 Découpage des pages en blocks... 3 Création du modèle de

Plus en détail

Ajouter des éléments spéciaux à un document

Ajouter des éléments spéciaux à un document Module F Ajouter des éléments spéciaux à un document CAS Valérie Milou, directrice commerciale chez Concept plein air, vous demande de compléter un rapport recommandant la mise en œuvre de mesures écologiques

Plus en détail

Éditeur Moodle. L'éditeur de Moodle se présente de la façon suivante : Vous y retrouverez les icônes traditionnelles d'un éditeur de texte.

Éditeur Moodle. L'éditeur de Moodle se présente de la façon suivante : Vous y retrouverez les icônes traditionnelles d'un éditeur de texte. Éditeur Moodle Ce tutoriel décrit comment utiliser l'éditeur de Moodle, que vous allez retrouver dans la plupart des activités et des ressources de la plateforme. L'éditeur de Moodle se présente de la

Plus en détail

1. Conseils pour bien débuter

1. Conseils pour bien débuter Sommaire 1. Conseils pour bien débuter 2. Présentation du logiciel 3. Les modes d affichage 4. Créer des présentations 5. Créer une nouvelle présentation 6. Ajouter du texte 7. Mettre en forme votre texte

Plus en détail

CinéPack. Création et hébergement de site internet

CinéPack. Création et hébergement de site internet CinéPack Création et hébergement de site internet mise à jour du 24/12/2013 Sommaire Sommaire...2 Bienvenue sur votre espace d administration CinePack...3 Accueil de votre administration :...4 Gestion

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

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

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

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

Activités Traitement de textes. Contenu du document. Activité 1 : Environnement Word Page 2

Activités Traitement de textes. Contenu du document. Activité 1 : Environnement Word Page 2 Contenu du document Activité 1 : Environnement Word 2003. ------------------------------ Page 2 Activité 2 : Création, édition et gestion d'un document. --------- Page 3 Activité 3 : Déplacement et copie

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

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

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

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

F r a n c k V i d a l C N R S C R É E R S A P A G E W E B A V E C K O M P O Z E R. KompoZer

F r a n c k V i d a l C N R S C R É E R S A P A G E W E B A V E C K O M P O Z E R. KompoZer KompoZer Ordinateur de l ENIAC (Electronic Numerical Integrator And Computer) - 1948 F r a n c k V i d a l C N R S - 2 0 1 2 Avant? 1948 : Premier ordinateur 1972 : ARPANET 40 machines militaires 1977

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

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

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

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

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

Plus en détail

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

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

Interface de Word. Règle. Volet office. Barre d outils de mise en forme Elle permet d exécuter rapidement des commandes de mise en forme du texte.

Interface de Word. Règle. Volet office. Barre d outils de mise en forme Elle permet d exécuter rapidement des commandes de mise en forme du texte. Interface de Word L écran de Word est constitué de différents éléments qui sont les suivants : Barre de titre Barre de menu Point d insertion Barre d outils de mise en forme Règle Marge Barre d outils

Plus en détail

Manuel pour la mise à jour du site de l EnsapL Document réalisé par Aurélie Cabrol, Septembre 2007

Manuel pour la mise à jour du site de l EnsapL Document réalisé par Aurélie Cabrol, Septembre 2007 Manuel pour la mise à jour du site de l EnsapL Document réalisé par Aurélie Cabrol, Septembre 2007 Egalement disponible sur A-mongy/mongy.adm/ensaplsite07/manuel0709 SOMMAIRE I-Retouche d éléments existants

Plus en détail

2E Révision introduction au Tableur > 2) La cellule

2E Révision introduction au Tableur > 2) La cellule Objectifs de ce module Je serai capable... de changer les polices et la taille des caractères dans les cellules ou plages de cellules d utiliser des styles différents d aligner les cellules (gauche, centré,

Plus en détail

PRESENTATION DE WORD 2007 A Présentation générale 2 B L écran de Word 3 C Barres d outils et rubans de fonctions 4

PRESENTATION DE WORD 2007 A Présentation générale 2 B L écran de Word 3 C Barres d outils et rubans de fonctions 4 S ommaire PRESENTATION DE WORD 2007 A Présentation générale 2 B L écran de Word 3 C Barres d outils et rubans de fonctions 4 MODES OPERATOIRES 1 Gestion de Word et de l écran 9 2 Gestion des fichiers (documents)

Plus en détail

Rédacteur Comment ajouter / modifier du texte

Rédacteur Comment ajouter / modifier du texte Rédacteur Comment ajouter / modifier du texte Etape 1 : Authentifier sur le site Cliquez sur Privé puis saisissez votre «Nom d'utilisateur» et «Mot de passe» Une fois authentifier, cliquer sur le bouton

Plus en détail

1. Rappels divers. Il est également important de faire les choses dans l ordre.

1. Rappels divers. Il est également important de faire les choses dans l ordre. Table des matières 1. Rappels divers... 1 2. Page de titre... 2 3. Marges... 3 4. Préparation des différents chapitres... 4 5. Numérotation... 5 6. Paramétrage de la hiérarchisation des titres et des styles...

Plus en détail

Manuel de Formation. Complément - Windows 10. Sandrine LABRUYERE

Manuel de Formation. Complément - Windows 10. Sandrine LABRUYERE Manuel de Formation Complément - Windows 10 Sandrine LABRUYERE TABLE DES MATIERES TABLE DES MATIERES 1 WINDOWS 10 2 L environnement graphique 2 Le bureau 2 Le menu démarrer 3 Les fenêtres de Windows 10

Plus en détail

Initiation WORD. Module 8 : Mise en forme d un document (2).

Initiation WORD. Module 8 : Mise en forme d un document (2). Initiation WORD. Module 8 : Mise en forme d un document (2). Système d exploitation utilisé : Windows XP Service Pack 2 Créé par Xavier CABANAT Version 1.0 Document créé par Xavier CABANAT Page 1 sur 10

Plus en détail

Test d évaluation des connaissances Word

Test d évaluation des connaissances Word Test d évaluation des connaissances Word 1 /9 Conception d un document Ouvrez le fichier «Word Exercice 1 évaluation» et enregistrez-le sur le bureau. Sélectionnez le texte en bleu et supprimez-le. Assurez-vous

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

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

Microsoft Excel. Leçon 1 Présentation T.EL AZZAOUI 1

Microsoft Excel. Leçon 1 Présentation T.EL AZZAOUI 1 Microsoft Excel Leçon 1 Présentation T.EL AZZAOUI 1 Objectifs - Créer des classeurs vierges - Personnaliser la barre d outils accès rapide - Fractionner la fenêtre - Modifier les affichages classeurs -

Plus en détail

Table des matières iii. Table des matières

Table des matières iii. Table des matières Table des matières iii Table des matières Chapitre 1 Apprendre la méthode de doigté Introduction 4 Clavier 4 Ergonomie 6 Position du corps 6 Position devant l écran 6 Soins des yeux 6 Position des mains

Plus en détail

Créer un BD sur ordinateur grâce à Comic Book Créateur.

Créer un BD sur ordinateur grâce à Comic Book Créateur. Créer un BD sur ordinateur grâce à Comic Book Créateur. Comic Book Créateur est un logiciel de création de bande dessinée ou de roman photographique. Présentation...2 Comment lancer le logiciel?...2 La

Plus en détail

INSERTION ET GESTION D IMAGES DANS UN DOCUMENT WORD

INSERTION ET GESTION D IMAGES DANS UN DOCUMENT WORD INSERTION ET GESTION D IMAGES DANS UN DOCUMENT WORD On peut insérer deux types d images dans un document : 1) des images de la bibliothèque du logiciel (appelées «cliparts») et 2) des fichiers image (par

Plus en détail

Epicerie sociale de Wissembourg

Epicerie sociale de Wissembourg Epicerie sociale de Wissembourg Initiation à l'utilisation: Ordinateur Internet Logiciels courants Le jeudi de 14h à 15h30 Sauf information contraire Avant de commencer AVAST Installation d'un antivirus.

Plus en détail

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

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

Plus en détail

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