où fichier_image est le nom et" name="description"> où fichier_image est le nom et">

TP 4 : IMAGES ET ARRIERE-PLANS

Save this PDF as:
 WORD  PNG  TXT  JPG

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

Download "TP 4 : IMAGES ET ARRIERE-PLANS"

Transcription

1 TP 4 : IMAGES ET ARRIERE-PLANS Les images dans le texte La balise img du langage Html permet d'insérer des images dans une page Html. Exemple : <img src ="fichier_image"> où fichier_image est le nom et l extension de l image si elle est située dans le même dossier que le fichier Html. Dans le cas contraire, il faut spécifier le chemin d accès à fichier_image. Les principaux attributs de la balise img sont les suivants : Attribut Valeur Effet visuel align alt border height hspace width vspace top texttop absmiddle middle absbottom bottom baseligne Texte alternatif au cas où l'image ne s'affiche pas Aligne l image au plus haut de la ligne Aligne l image au plus haut du texte de la ligne Centre l image sur le milieu du plus grand élément Centre l image sur la ligne de base Aligne le bas de l image sur le bas du plus grand élément Aligne le bas de l image sur le plus bas du texte Aligne le bas de l image sur la ligne de base Ajoute une info bulle explicative à l image Par défaut l'attribut border vaut 1 ce qui crée un petit cadre autour de l'image. Pour ne pas avoir ce désagrément pensez à le définir comme étant égal à 0 Fixe la hauteur de l image Spécifie l espace d'ajustement horizontal (soit les côtés gauche et droit) entre l'image et le texte adjacent Fixe la largeur de l image Spécifie l espace d'ajustement vertical (soit au-dessus et en dessous) entre l'image et le texte adjacent 1

2 Attribut Balises Valeur Effet visuel bgcolor body body "#$$$$$$" la valeur hexadécimale de la couleur ou "nom" le nom de la couleur Définit la couleur d arrière-plan de la page Définit l image d arrière-plan de la page background table tr "fichier_image" Définit l image d arrière-plan d un tableau Définit l image d arrière-plan d une ligne td Définit l image d arrière-plan d une cellule Exercice 4.1 : Les images seules Reproduisez la présentation suivante : 2

3 Exercice 4.2 : Du texte et de l image Reproduisez la présentation suivante : Exercice 4.3 : Du texte et de l image Reproduisez la présentation suivante. Utilisez un tableau pour relier comme ci-après les deux logos par deux lignes horizontales de couleur rouge et de taille 5. 3

4 Exercice 4.4 : Couleur d arrière plan Reproduisez la présentation suivante sur un arrière plan de couleur : 1. Utilisez un tableau pour aligner du texte à gauche de l image. 2. Insérer une ligne de séparation de couleur bleue à bordure rouge 3. Ajoutez un bord de 10 sur les côtés supérieur et inférieur d une image mais pas sur les côtés gauche et droit 4. Ajoutez un bord de 20 sur les côtés les côté gauche et droit d une image mais pas sur les côtés supérieur et inférieur d une image 4

5 Exercice 4.5 : Une image d arrière plan Insérez une image d arrière-plan dans une page, comme ci-après : Exercice 4.6 : Tableaux avec textes et images d arrière-plans Reproduisez la présentation suivante : 1. Ajoutez une image d arrière plan à un tableau 2. Ajoutez une image d arrière plan aux lignes d un tableau sans bordures 3. Ajoutez une image d arrière plan dans certaines cellules d un tableau 5

6 4. Ajoutez du texte sur une image : l image retenue devient une image d arrière plan d un tableau et le texte est simplement écrit à l intérieure de la cellule du tableau. Exercice 4.7 : Une image fractionnée A partir d une image comme la suivante, reproduisez les différents effets comme décrit ciaprès. 6

7 Reproduisez la présentation suivante : 1. Ajoutez une image d arrière plan aux cellules d un tableau (appelé par la suite table1) : l image retenue est une image d arrière plan d une cellule à la dimension exacte de l image, 2. Créez un effet de découpage vertical de l image en modifiant les paramètres de table1, 3. Créez un effet de découpage horizontal de l image en modifiant les paramètres de table1, 4. Créez un effet d agrandissement de l image en modifiant les paramètres du tableau en modifiant les paramètres de table1, 7

8 5. Créez l effet d un tableau à quatre cellules avec une image d arrière plan à la dimension exacte de la cellule sans modification des paramètres du tableau précédent 6. Fractionnez avec un logiciel de retouche d image (gimp, paint, etc) l image en quatre morceaux (image1, image2, image3 et image4) comme suit : image1 image2 image3 image4 A l aide de ces quatre petites images, reconstituez l image de départ. 8

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 Tableaux. A partir de votre BackOffice, dans la Mise en forme de votre élément. Insérez un tableau :

Les Tableaux. A partir de votre BackOffice, dans la Mise en forme de votre élément. Insérez un tableau : Vous utiliserez des tableaux lorsque vous désirerez structurer les éléments d un Cms Bloc libre, d un Modèle (fiche article, liste article, etc..) ou d une Page. Créer un tableau A partir de votre BackOffice,

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

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

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

Université Paris Dauphine Outils de l Internet 2011-2012 TP 5 : LES CADRES

Université Paris Dauphine Outils de l Internet 2011-2012 TP 5 : LES CADRES TP 5 : LES CADRES Le contenu de la page d'accueil d'un site ne constitue que la subdivision en plusieurs frames. Les codes sources de chacune des frames seront contenus dans d'autres fichiers HTML. La

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

Entités, hyperliens, tableaux

Entités, hyperliens, tableaux Entités, hyperliens, tableaux Les caractères spéciaux = entités Les normes HTML demandent de respecter le codage des caractères ASCII 7 bits, c'est-à-dire que les caractères accentués ne sont pas autorisés.

Plus en détail

Fiche Tableau. Table des matières

Fiche Tableau. Table des matières Fiche Tableau Table des matières Fiche Tableau...1 1- Barre d outils tableau...1 1- Lancer la création d'un tableau...4 2- Menu Tableau > Propriétés du tableau...4 2.1- Tableau...4 2.2- Enchaînements...5

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

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

Afficher le menu contextuel

Afficher le menu contextuel Afficher le menu contextuel Utilisez le comportement Afficher le menu contextuel pour créer ou modifier un menu contextuel Dreamweaver ou pour ouvrir et modifier un menu contextuel Fireworks inséré dans

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

Réaliser certaines manipulations avec Word 2003?

Réaliser certaines manipulations avec Word 2003? Créé par : sophia Ce guide est reproductible en : +45 min et est d'un niveau : Débutant Ce guide vous permettra de réaliser l'activité proposée en autonomie. 1 / 10 Etape : 1/18 Etape : 2/18 La première

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

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

Recouvrement des bordures

Recouvrement des bordures 4 Propriétés de mise en forme Tableau 4 43 Propriété table-layout (suite) auto : largeur automatique (valeur par défaut) ou fixed : largeur fixe. Propriété héritée. Pour retrouver la valeur initiale, utiliser

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

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

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/ Conception de page web statique 2. CSS3 Validation CSS W3C Validator at http://jigsaw.w3.org/css-validator/

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

Fiche Tableau. Table des matières

Fiche Tableau. Table des matières Fiche Tableau Table des matières Fiche Tableau...1 1- Barre d outils tableau...1 1- Lancer la création d'un tableau...2 2- Menu Tableau > Propriétés du tableau...2 2.1- Tableau...2 2.2- Enchaînements...3

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

Fiche Tableau. Table des matières

Fiche Tableau. Table des matières Fiche Tableau Table des matières Fiche Tableau...1 1- Barre d outils tableau...1 1- Lancer la création d'un tableau...2 2- Menu Tableau > Propriétés du tableau...3 2.1- Tableau...3 2.2- Enchaînements...3

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

Guide du rédacteur. La mise en page d un contenu sur Internet est une opération qui doit avoir une certaine discipline et une réflexion.

Guide du rédacteur. La mise en page d un contenu sur Internet est une opération qui doit avoir une certaine discipline et une réflexion. Guide du rédacteur A Mise en page : La mise en page d un contenu sur Internet est une opération qui doit avoir une certaine discipline et une réflexion. En effet, un internaute ne lit pas le contenu d

Plus en détail

LANGAGE HTML : FEUILLES DE STYLE ET LANGAGE CSS

LANGAGE HTML : FEUILLES DE STYLE ET LANGAGE CSS ISN ISN Informatique et Sciences du Numérique LANGAGE HTML : FEUILLES DE STYLE ET LANGAGE CSS 1 INTRODUCTION AUX FEUILLES DE STYLE Le langage HTML est à la fois un langage permettant de décrire la structure

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

Réussir son site web avec XHTML et CSS

Réussir son site web avec XHTML et CSS Leçon 08 Réussir son site web avec XHTML et CSS Couleur et fond 1. La couleur du texte...1 Indiquer la couleur du texte avec un nom...1 Indiquer la couleur du texte en hexadécimal...2 Indiquer la couleur

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

Fonctions de base (1 ère partie) 1-2

Fonctions de base (1 ère partie) 1-2 A Enregistrer un document (pour la première fois) L enregistrement sert à conserver le travail en cours sur un support (disque dur, clé usb, ). On dit indistinctement Enregistrer ou sauvegarder un document

Plus en détail

Balises de tableau. - choisir des bordures à afficher - contrôler le quadrillage des cellules - traiter séparément les sections (en-tête, corps, pied)

Balises de tableau. - choisir des bordures à afficher - contrôler le quadrillage des cellules - traiter séparément les sections (en-tête, corps, pied) Les tableaux XHTML ne sont pas qu un bon moyen de présenter l information, mais aussi un bon outil de mise en page Les tableaux permettent de - choisir des bordures à afficher - contrôler le quadrillage

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

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

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML, CSS Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML Pour le fond -> HTML Pour la forme ->CSS Les balises Les balises orphelines Attributs de balise LES BALISES PRINCIPALES HTML

Plus en détail

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

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

Plus en détail

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

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

Rapport du travail pratique

Rapport du travail pratique 14/10/2015 Introduction à HTML Rapport du travail pratique Ly Stéphane CLASSE FUTURE INGÉNIEURE Table des matières 1. Introduction. 2 2. Exercices. 2 2.1. Tableau formulaire....... 2 2.2. Index.... 3 2.3.

Plus en détail

FICHE 9 : CREER UNE DIAPOSITIVE AVEC UN TABLEAU

FICHE 9 : CREER UNE DIAPOSITIVE AVEC UN TABLEAU FICHE 9 : CREER UNE DIAPOSITIVE AVEC UN TABLEAU Le 2 ème grand type de diapositive est celui où on insère un tableau. 1. CREER UN TABLEAU 1.1 AVEC UN ESPACE RESERVE SUR UNE DIAPOSITIVE - Choisissez comme

Plus en détail

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom

HTML, CSS. Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML, CSS Rapide Présentation Anthony Médassi Résumé OpenClassRoom HTML Pour le fond -> HTML Pour la forme -> CSS Les balises Les balises orphelines Attributs de balise LES BALISES PRINCIPALES HTML

Plus en détail

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

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

TP 1 - HTML/CSS. 0. Préparatifs. 1. Structure de la page HTML

TP 1 - HTML/CSS. 0. Préparatifs. 1. Structure de la page HTML TP 1 - HTML/CSS Objectif : Créer une page WEB statique en manipulant le langage HTML et la mise en forme CSS. Bien comprendre les styles et le positionnement des blocs en CSS. 0. Préparatifs 1. Lancer

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

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

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

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

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

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

DREAMWEAVER 2 de Macromédia

DREAMWEAVER 2 de Macromédia DREAMWEAVER 2 de Macromédia Dreamweaver 2 vous permettra de produire des pages Web sans trop de difficultés. Voici quelques consignes de base. 1.1 Introduction Tout d abord, allez dans Dreamweaver en cliquant

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

Technique Internet de Base HTML avancé

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

Plus en détail

HTML (1/4) : les bases

HTML (1/4) : les bases 1 HTML (1/4) : les bases introduction...1 les concepts de base...1 structure d un document HTML...1 divisions...3 balises de styles...5 les listes...8 Les liens hypertextes et les images...9 Introduction

Plus en détail

Eléments de contenu -Les différents formats d'images -Les formats audio -Les formats vidéo

Eléments de contenu -Les différents formats d'images -Les formats audio -Les formats vidéo Objectif Général N 3 : Acquérir les compétences nécessaires pour maitriser la manipulation des images et des vidéos. Pré-requis : Objectif Général N 2 Objectifs Spécifiques Objectif Etablir une distinction

Plus en détail

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez

Mohammed REZGUI m.rezgui06@gmail.com. Basé sur le cours de Guillaume Perez Mohammed REZGUI m.rezgui06@gmail.com Basé sur le cours de Guillaume Perez Contenu, Organisation Objectif principal: Base pour la création d un site Notions de client-serveur Notions de programmations Option

Plus en détail

BDW1 - Programmation web - CSS

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

Plus en détail

LE RECAP ಠ_ಠ. C est trop facile!

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

Plus en détail

TP n o 3 WORD 2007: Texte en colonnes, les tableaux et les figures 1.Objectif du TP

TP n o 3 WORD 2007: Texte en colonnes, les tableaux et les figures 1.Objectif du TP TP n o 3 WORD 2007: Texte en colonnes, les tableaux et les figures 1.Objectif du TP L'exemple d'apprentissage est le suivant : vous disposez d'un texte non mis en forme, qu'il vous va falloir compléter

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

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

Créer un bouton pour le Web

Créer un bouton pour le Web Lorsqu'un internaute place le pointeur de sa souris sur un dessin dans une page Web, ce pointeur entre physiquement dans la zone de l'écran occupée par le graphique. L'internaute peut alors soit cliquer

Plus en détail

CSS 2 Editions OEM (Groupe Eyrolles), 2003, ISBN

CSS 2 Editions OEM (Groupe Eyrolles), 2003, ISBN Patrick Beuzit Aide-mémoire CSS 2 Editions OEM (Groupe Eyrolles), 2003, ISBN 2-7464-0479-6 Les propriétés CSS 43 Les propriétés azimuth: H Définit l'origine spatiale des sons. Nécessite un système supportant

Plus en détail

introduction principes syntaxe CSS : introduction

introduction principes syntaxe CSS : introduction CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1 au programme... 1 introduction 2 principes 3 syntaxe Université Lille 1 Technologies du Web CSS : introduction 2 au programme...

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

GIMP POUR LE GRAPHISME

GIMP POUR LE GRAPHISME Création et multimédia GIMP POUR LE GRAPHISME Gimp est un logiciel de retouche d'image gratuit. Il est composé de plusieurs espaces de travail. Source : 70 ateliers pour Gimp, édité par Micro application

Plus en détail

introduction principes syntaxe CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1

introduction principes syntaxe CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1 CSS : introduction Université Lille 1 Technologies du Web CSS : introduction 1 au programme... 1 introduction 2 principes 3 syntaxe Université Lille 1 Technologies du Web CSS : introduction 2 au programme...

Plus en détail

Rédacteurs - Typo3 v6.2

Rédacteurs - Typo3 v6.2 Rédacteurs - Typo3 v6.2 Insérer des images Objet et contexte Ce document présente l insertion d images dans les contenus de l environnement typo3 6.2 Les outils images Il y a deux types d outils qui permettent

Plus en détail

MISE EN FORME D'UNE FEUILLE DE CALCUL

MISE EN FORME D'UNE FEUILLE DE CALCUL MISE EN FORME D'UNE FEUILLE DE CALCUL MISE EN FORME CONTENU D'UNE CELLULE Attribut des caractères dans une cellule Il est possible d'affecter des attributs aux caractères contenus dans une cellule (police,

Plus en détail

Xn View : visionneuse et traitement par lot. Table des matières

Xn View : visionneuse et traitement par lot. Table des matières Xn View : visionneuse et traitement par lot Table des matières Xn View : visionneuse et traitement par lot...1 1-Visionner des images...1 2-Utiliser la barre d'outils...2 3-Faire des diaporamas...4 4-Créer

Plus en détail

TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels

TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels TCH053 Manipulation d objets multimédias et conception de sites Web non transactionnels HTML tableau Lévis Thériault, hiver 2009 Structure d un tableau

Plus en détail

DES PREMIERS PAS AVEC NVU

DES PREMIERS PAS AVEC NVU DES PREMIERS PAS AVEC NVU 1. Aux laboratoires : ouvrez l'ordinateur avec VOTRE compte à Laval 2. Créez un dossier sur le BUREAU, nommez-le «siteweb» Dans ce dossier vous mettez TOUS les fichiers qui feront

Plus en détail

U2lisa2on avancée des tableaux. Couleur de fond 21/09/11. On u2lise l'ahribut bgcolor.

U2lisa2on avancée des tableaux. Couleur de fond 21/09/11. On u2lise l'ahribut bgcolor. U2lisa2on avancée des tableaux Couleur de fond On u2lise l'ahribut bgcolor. bgcolor=nombre nom: La couleur donnée par son code hexadécimal ou son nom. On peut l'appliquer à la table, une ligne, une cellule

Plus en détail

OpenOffice.org 3.1 Impress

OpenOffice.org 3.1 Impress INITIATION à OpenOffice.org 3.1 Impress Exercices (avec mode opératoire) 1/8 Exercice 1 Présentation basée sur un modèle Utilisation : de l'assistant de présentation, enregistrer, fermer, ouvrir. 1. Lancer

Plus en détail

WORD. Tableaux Bordures & trames Outils de dessins & graphiques

WORD. Tableaux Bordures & trames Outils de dessins & graphiques WORD Tableaux Bordures & trames Outils de dessins & graphiques Les tableaux Créer un tableau (1) Par la barre d outil Placer le curseur à l endroit où le tableau doit être inséré Cliquer sur le bouton

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

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

OpenOffice. Editeur HTML. Table des matières

OpenOffice. Editeur HTML. Table des matières Editeur HTML OpenOffice Table des matières Editeur HTML...1 CREER UN NOUVEAU SITE WEB...2 INTERFACE DE TRAVAIL...3 CONFIGURATION DE LA PAGE...4 Ou sont les balises Meta?...4 Options de la page...5 ENREGISTREMENT...6

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

Fiche 3 : Construire un tableau avec Excel

Fiche 3 : Construire un tableau avec Excel Notions de base Fiche 3 : Construire un tableau avec Excel Ce qu il faut savoir en premier lieu c est que les lignes que l on aperçoit ne sont que des repères visuels, en aucun cas ces lignes n apparaîtront

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

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

CSS. Karima Boudaoud IUT- R&T

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

Plus en détail

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

HTML & CSS. d e s i g n w e b. [ présentation ]

HTML & CSS. d e s i g n w e b. [ présentation ] d e s i g n w e b [ présentation ] Généralités Les feuilles de styles (CSS) existent depuis 1996. Elles ne sont vraiment correctement supportées par les navigateurs que depuis 2000-2001. C'est donc depuis

Plus en détail

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

Plus en détail

15. GERER LES IMAGES D ARRIERE-PLAN

15. GERER LES IMAGES D ARRIERE-PLAN 52 15. GERER LES IMAGES D ARRIERE-PLAN Il y a deux méthodes pour insérer les graphiques d une page web : Ajout du graphique dans l arrière-plan d un DIV à l aide des CSS (exemple : une texture pour créer

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

AC.T.I.V. formations ACcueil Télémarketing Informatique Vente

AC.T.I.V. formations ACcueil Télémarketing Informatique Vente AC.T.I.V. formations ACcueil Télémarketing Informatique Vente PRESENTATION DE MICROSOFT EXCEL...2 GESTION DE LA FENETRE EXCEL...2 GESTION DES LIGNES ET DES COLONNES...3 GESTION D'UN CLASSEUR...4 GESTION

Plus en détail

LibreOffice Découvrir Le tableur Calc (1)

LibreOffice Découvrir Le tableur Calc (1) L INTERFACE LibreOffice Découvrir Le tableur Calc (1) Ce document présente quelques fonctionnalités du tableur CALC. Ouvrez une feuille de calcul et suivez les indications. Les données à saisir sont repérées

Plus en détail

Gérer un site avec Kompozer. Josiane Ducournau CRDP Aquitaine

Gérer un site avec Kompozer. Josiane Ducournau CRDP Aquitaine Gérer un site avec Kompozer Organisation, plan de travail Création de pages Tout les fichiers, dossiers, images auront des noms (ex. nouveautes.htm ; ces noms ne devront comporter ni espaces, ni caractères

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

Open Office Texte, Classeur et Présentation / «Gallery» d'images et de sons

Open Office Texte, Classeur et Présentation / «Gallery» d'images et de sons Open Office Texte, Classeur et Présentation / «Gallery» d'images et de sons Aperçu de la «Gallery» d'images et de sons d'open Office, détail de la barre d'outils «Image» et création de thèmes d'images

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

Cours Web n o 3 CSS Notions avancées

Cours Web n o 3 CSS Notions avancées Modèle de boîtes de CSS Cours Web n o 3 CSS Notions avancées Sandrine-Dominique Gouraud (gouraud@lri.fr) Pierre Senellart (pierre@senellart.com) Semaine du 3 octobre 2005 S.-D. Gouraud, P. Senellart (IFIPS)

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

Mise en page avec CSS

Mise en page avec CSS Mise en page avec CSS CSS ne sert pas uniquement à formater le texte et afficher des images de fond. Si on se concentrait un peu sur les tâches de base de mise en page? Bienvenue dans le monde du positionnement.

Plus en détail

Guide pour Mac OS 9 novembre Suzanne Harvey. Conseillère pédagogique Service local du RÉCIT Commission scolaire de Saint-Hyacinthe

Guide pour Mac OS 9 novembre Suzanne Harvey. Conseillère pédagogique Service local du RÉCIT Commission scolaire de Saint-Hyacinthe Guide pour Mac OS 9 novembre 2002 Suzanne Harvey Conseillère pédagogique Service local du RÉCIT Commission scolaire de Saint-Hyacinthe suzanne.harvey@prologue.qc.ca http://www.cssh.qc.ca/se/recit Création

Plus en détail