Bases de données et Internet
|
|
|
- Ève Marcil
- il y a 6 ans
- Total affichages :
Transcription
1 Bases de données et Internet Faculté des Sciences et Techniques Fès Département de Génie Industriel Master Sciences et Techniques en Génie Industriel Professeur : F. Kaghat
2 2 Feuilles de style en cascade (CSS)
3 Définition et caractéristiques Les Cascading Style Sheets ou Feuilles de Styles en Cascade ont été initialement conçues pour le langage HTML. La première version du standard, dite CSS niveau 1 (CSS1), a été publiée en 1996 Mai 1998, le W3 Consortium a publié une nouvelle version, dite CSS niveau 2 (CSS2) Séparation du contenu et de la présentation Définition de styles génériques pour les balises Syntaxe différente de HTML Département de Génie Industriel 3
4 Avantages Gestion simplifiée et globale de la présentation d un site Coûts de développement et de maintenance allégés (code plus simple) Code source allégé Possibilité de présentations différentes selon le profil utilisateur, la résolution écran Meilleure accessibilité Département de Génie Industriel 4
5 Définitions de styles Trois localisations possibles (+local au +global) Dans une balise HTML : attribut style Ex. <p style="color: blue; text-align: center;"> </p> Dans une page HTML : balise <style> Dans l en-tête de la page Web (head) : <style type="text/css"> </style> Dans un fichier séparé Appel dans l en-tête de la page Web (head) : <link rel="stylesheet" type="text/css" href="feuille_style.css" /> Département de Génie Industriel 5
6 A l'intérieur des marqueurs <head> La balise <style> L'attribut type="text/css" : il s'agit de feuilles de style en cascade La balise de commentaire <! > <head> <style type="text/css"> <!-- contenu d une feuille de style CSS --> </style> </head> Département de Génie Industriel 6
7 A l extérieur du document HTML Stocker la définition des feuilles de style dans un fichier Créer un fichier texte contenant les feuilles de style avec l'extension ".css" Changer l'allure de toutes les pages Web s'y référant. Ex. <head> <link rel="stylesheet" type="text/css" href="feuille_style.css" /> </head> <link> : établir un lien, peut y en avoir plusieurs rel="stylesheet" : il s'agit d'une feuille externe type="text/css" : il s'agit de feuilles de style en cascade (CSS) href="... " définit l'emplacement de la feuille de style cette solution qui consiste à écrire une feuille de style dans un fichier séparé est préférée. Département de Génie Industriel 7
8 Notion de cascade Imbrication des définitions : la plus locale l emporte. Ex. Définition de style dans un fichier externe vs. Définition dans une balise La définition locale de la balise prévaut Imbrication des balises : le style d une balise s applique aux balises imbriquées. Ex. <p> <em> </em> </p> Si un style est appliqué à <p>, il s applique à <em>. Département de Génie Industriel 8
9 Concept de base Feuille de style : ensemble de règles Un sélecteur Des propriétés Une valeur pour chaque propriété Exemple h1 { color: yellow; font-weight: bold; } Département de Génie Industriel 9
10 Définition d'un style Une règle de style se compose d'un sélecteur qui indique l'élément auquel elle s'applique, et d'une ou de plusieurs propriétés ainsi que leurs valeurs respectives. Le couple propriété: valeur forme ce que l'on appelle la déclaration. sélecteur {propriété1: valeur1; propriété2: valeur2; } Département de Génie Industriel 10
11 Sélecteurs Sélecteur universel : tous les éléments HTML Ex. * { color: blue; } Style d une catégorie de balises Ex. h1 { color: #FF00FF; } Style de plusieurs catégories de balises Ex. h1, h2, h3, p { color: green; } Style pour balises imbriquées Ex. p em { color: red; } /* Italiques dans un paragraphe */ Remarque : Les commentaires utilisés à l'intérieur des feuilles de style sont similaires à ceux que l'on utilise en langage C. Département de Génie Industriel 11
12 Héritage Considérons la règle de style : h1 { color: blue; } Considérons le code HTML suivant : <h1>le titre d'un document <em>est</em> très important!</h1> Si aucune couleur n'a été spécifiée pour l'élément em, le mot en italique "est" héritera automatiquement de la couleur de son élément parent (h1), soit bleue pour notre exemple. Département de Génie Industriel 12
13 Héritage Pour définir un style "par défaut" pour tout un document, il suffit de le définir sur l'élément parent à tous les autres - l élément racine - i.e en HTML, l'élément <body>. body { color : black; background: white; font-style: arial; } Remarque : on ne peut pas appliquer un style à la balise html! Département de Génie Industriel 13
14 Les Classes de Style Les classes permettent de créer, au niveau du document ou d une feuille de style externe, plusieurs styles différents pour une même balise, chacun se démarquant des autres par un nom de classe. Pour appliquer une classe de style, il faut l indiquer comme valeur d attribut class dans la balise. Département de Génie Industriel 14
15 Les Classes de Style Parfois, il est nécessaire de pouvoir choisir entre plusieurs types de présentations pour un même élément HTML. C'est souvent le cas pour les paragraphes dans un document long. Par exemple, on peut avoir les paragraphes d'en-tête, des remarques et des paragraphes normaux. Ex..style_rouge { color: red; }.style_bleu { color: blue; } p.entete { font-style: italic; } Dans le premier cas, on indique que tous les éléments de classe "style_rouge", quels qu'ils soient, devront être affichés en rouge. Dans le 3 ème exemple, seuls les éléments p de classe "entete" devront être affichés en italique. Département de Génie Industriel 15
16 Les Classes de Style Utilisation dans une page Web Ex. <h1 class="style_rouge">titre rouge</h1> <p class="style_rouge">texte rouge</p> <p class="style_bleu">texte bleu</p> <p class="entete">ceci est le paragraphe d'entête...</p> <p> Ceci est un paragraphe normal... </p> Département de Génie Industriel 16
17 Les Classes de Style Définir une classe se résume à ajouter un nom de classe comme suffixe au nom de balise représentant le sélecteur d une règle de style et à les séparer par un point. Le nom de classe peut être une séquence quelconque de lettres, de nombres et de tirets mais doit commencer par une lettre. balise.nom_de_classe { propriété de style: valeur } Pour appeler l'effet de style dans le document, on ajoute le nom de la classe à la balise. <balise class="nom_de_classe">... </balise> Département de Génie Industriel 17
18 Classes génériques On peut définir une classe sans l associer à une balise particulière et l appliquer ensuite au cas par cas selon les balises du document. Par exemple :.italique {font-style: italic} crée une classe générique appelée italique. Pour l utiliser, il suffit d associer son nom à l attribut class. <p class="italique"> <h1 class="italique"> Les classes génériques sont pratiques et facilitent l application d un style particulier à une large gamme de balises. Département de Génie Industriel 18
19 Application des styles A un ensemble d éléments : <div> </div> Ex. <div class="style_bleu"> <h1> </h1> <p> </p> <p> </p> </div> A une partie d un paragraphe : <span> </span> Ex. <p class="style_rouge">ceci est rouge sauf <span class="style_bleu">ce qui est bleu</span> </p> Département de Génie Industriel 19
20 Les propriétés CSS Consulter le document : «Les balises XHTML - les propriétés CSS» Département de Génie Industriel 20
21 Propriétés de couleur color color: black; color: #000000; background-color background-color: white; background-color: #FFFFFF; background-iamge background-image: url("url"); background-repeat background-repeat: no-repeat; background-position background-position: center; Département de Génie Industriel 21
22 Propriétés de typographie font-family font-family: times; font-family: arial, verdana; font-size font-size: 1.5em; font-style font-style: italic; font-weight font-weight: bold; font-weight: bolder; font-decoration font-decoration: underline; font-decoration: line-through; Département de Génie Industriel 22
23 Propriétés de texte text-align text-align: left; text-align: right; text-align: center; text-align: justify; text-indent text-indent: 10pt; text-indent: 15px; text-indent: 5%; Département de Génie Industriel 23
24 Propriétés de boîte englobante width width: 80pt; height height: 25%; padding padding: 5px; -left, -right, -top, -bottom padding-bottom: 10px; margin margin: 10px; -left, -right, -top, -bottom margin-left: 10%; border border: 2px solid #FF00FF; -width, -style, -color border-style: dotted; Département de Génie Industriel 24
25 Propriétés d hyperlien Hyperliens Ex. a { color: blue; } Hyperliens visités Ex. a:visited { color: purple; } Hyperliens survolés (avec le pointeur de la souris) Ex. a:hover { color: white; background-color: blue; } Hyperliens activés Ex. a:active { color: purple; } Département de Génie Industriel 25
26 Propriétés de liste Listes non-ordonnées list-style list-style: disc; list-style: circle; list-style: square; list-style-image list-style-image: url("url"); Listes ordonnées list-style list-style: decimal; list-style: upper-roman; list-style: lower-alpha; Département de Génie Industriel 26
27 Propriétés de tableau Balise table : border, width Balise caption : caption-side top; caption-side bottom; Balise tr : height Balises td et th : border, width et vertical-align top; vertical-align middle; vertical-align bottom; Département de Génie Industriel 27
28 Exemple Exemple films.css : Exemple de feuille CSS qui donne quelques directives de présentation pour les pages HTML de notre site. /* * La feuille de style du site Films * */ /* Le fond est toujours en blanc */ body {background-color: white;} /* On utilise une couleur rouge pour les ancres * et les entêtes */ a, h1, h2, h3 {color: #ca0000;} caption {font-size:large; color: #ca0000;} /* Alternance des couleurs pour les lignes des tables */ tr.a0 {background-color:white;} tr.a1 {background-color:yellow;} Département de Génie Industriel 28
29 Application à un document Exemple : page_films.html : Document HTML avec feuille de style <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" xml:lang="fr"> <head> <meta http-equiv="content-type" Content="text/html; charset=iso " /> <title>document HTML avec feuille de style</title> <meta name="author" content="kaghat" /> <meta name="keywords" content="cinéma,film" /> <meta name="description" content="un site consacré à l'art cinématographique" /> <link rel="stylesheet" type="text/css" href="films.css" /> </head> Département de Génie Industriel 29
30 Application à un document <body> <h1>une table HTML</h1> <table border="4"> <caption>quelques films</caption> <tr> <th>titre</th><th>année</th><th>nom Réalisateur</th><th>Prénom</th> <th>année naissance</th> </tr> <tr class="a0"> <td>alien</td><td>1979</td><td>scott</td><td>ridley</td><td>1943</td> </tr> Département de Génie Industriel 30
31 Application à un document <tr class="a1"> <td>vertigo</td><td>1958</td><td>hitchcock</td><td>alfred</td> <td>1899</td> </tr> <tr class="a0"> <td>van Gogh</td><td>1991</td><td>Pialat</td><td>Maurice</td> <td>1925</td> </tr> <tr class="a1"> <td>titanic</td><td>1997</td><td>cameron</td><td>james</td> <td>1954</td> </tr> </table></body></html> Département de Génie Industriel 31
32 page_films.html : Document HTML avec feuille de style Département de Génie Industriel 32
33 Autre exemple : les liens Exemple: style_liens.css : exemple de feuille CSS a { color: #0066CC; } /* Liens en bleu (entre clair et foncé) */ a:visited { color: black; } /* et en noir (comme le texte normal, mais souligné) si déjà visités */ a:hover, a:active { color: white; /* Lors du passage de la souris ou activation, */ background-color: #0066CC; } /* couleur blanc sur fond bleu */ le sélecteur a pour les liens normaux, a:visited pour les liens déjà visités, a:hover pour le lien actuellement sous la souris et a:active pour le lien actif (sélectionné en utilisant les touches de tabulation). Département de Génie Industriel 33
34 Application à un document Exemple : exemple_liens.html : Document HTML avec feuille de style <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" xml:lang="fr"> <head> <meta http-equiv="content-type" Content="text/html; charset=iso " /> <title>document HTML avec feuille de style</title> <meta name="author" content="kaghat" /> <meta name="keywords" content="mot1,mot2" /> <meta name="description" content="description du site" /> <link rel="stylesheet" type="text/css" href="style_liens.css" /> </head> Département de Génie Industriel 34
35 Application à un document <body> Voici un paragraphe avec un <a href="#">lien</a>,et encore un autre <a href="#">autre lien</a>, et toujours de <a href="#">nouveaux liens</a>,! De quoi tester le rendu des liens en CSS. </body> </html> Département de Génie Industriel 35
Formation HTML / CSS. ar dionoea
Formation HTML / CSS ar dionoea le HTML Hyper Text Markup Language langage descriptif composé de balises interprété par le navigateur page HTML = simple fichier texte (bloc notes, vim,...) les déclarations
.. CSS. Damien Nouvel. Damien Nouvel (Inalco) CSS 1 / 15
.. CSS Damien Nouvel Damien Nouvel (Inalco) CSS 1 / 15 Feuilles de styles Plan 1. Feuilles de styles 2. Sélecteurs 3. Attributs Damien Nouvel (Inalco) CSS 2 / 15 Feuilles de styles Déportation des styles
Tutoriel : Feuille de style externe
Tutoriel : Feuille de style externe Vous travaillerez à partir du fichier cerise.htm que vous ouvrirez dans NVU. Commencez par remplacer le contenu de la balise Title par : Comment débuter une recherche?
LES GRANDES ETAPES DE CREATION D UN WEB DESIGN
LES GRANDES ETAPES DE CREATION D UN WEB DESIGN PENSER LA STRUCTURE ET LE THEME DU SITE STRUCTURE ET THEME DU SITE Taille (le site sera-t-il extensible ou fixe?) Organisation Thème Couleurs Illustrations
HTML, CSS, JS et CGI. Elanore Elessar Dimar
HTML, CSS, JS et CGI Elanore Elessar Dimar Viamen GPAs Formation, 13 avril 2006 Sommaire Qu est-ce que HTML? HTML : HyperText Marckup Language XML : extensible Marckup Language Qu est-ce que HTML? HTML
SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE
SOUTENANCE ORALE RAPPORT DE PROJET D INFORMATIQUE SITE INTERNET DE L ASSOCIATION Diapositive 1 RAPPORT DE PROJET Site internet de l association INTRODUCTION 1) Je m appelle Léonard STRONG. 2) Oral de présentation
Bernard Lecomte. Débuter avec HTML
Bernard Lecomte Débuter avec HTML Débuter avec HTML Ces quelques pages ont pour unique but de vous donner les premiers rudiments de HTML. Quand vous les aurez lues, vous saurez réaliser un site simple.
JOOMLA 1.5 avancé SUPPORT DE COURS + annexe
JOOMLA 1.5 avancé SUPPORT DE COURS + annexe SOMMAIRE 1. LA GESTION DES MODULES... Page 2 2. MODIFICATION DE SON TEMPLATE... Page 6 3. LA CREATION DE DIAPORAMA... Page 9 4. LA CREATION DE SONDAGE... Page
HTML. Notions générales
1 HTML Le langage HTML est le langage de base permettant de construire des pages web, que celles-ci soient destinées à être affichées sur un iphone/android ou non. Dans notre cas, HTML sera associé à CSS
Travaux dirigés n 10
Travaux dirigés n 10 IMAC 1 Responsive Web Design Dans ce TD, vous verrez comment concevoir un design web qui s adaptera au terminal sur lequel il sera visualisé. Avant-propos Avec l avènement des smartphones
E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE
E-MAILING & NEWSLETTER NEWSLETTER RESPONSIVE mcbenveniste@gmail.com 09/2013 E-MAILING & NEWSLETTER L e-mailing consiste à envoyer des emails simultanément à un nombre important de destinataires dont le
STID 2ème année : TP Web/PHP
STID 2ème année : TP Web/PHP Plan de travail et aide mémoire jean.arnaud@inria.fr Ce document est composé de cinq parties : Un aide mémoire sur les aspects pratiques de la création de sites Une introduction
ENVOI EN NOMBRE DE Mails PERSONNALISES
MAILING ENVOI EN NOMBRE DE Mails PERSONNALISES 2 Téléchargement 3 Installation 6 Ecran d accueil 15 L envoi de mails 22 Envoi d un document HTML crée avec Word (envoi en base 64) 25 Le compte courriel
Initiation à html et à la création d'un site web
Initiation à html et à la création d'un site web Introduction : Concevoir un site web consiste à définir : - l'emplacement où ce site sera hébergé - à qui ce site s'adresse - le design des pages qui le
Présentation du Framework BootstrapTwitter
COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...
UN SITE WEB RESPONSIVE EN UNE HEURE?
UN SITE WEB RESPONSIVE EN UNE HEURE?! O N O R H C P TO Raphaël Goetter Raphaël Goetter alsacreations.fr alsacreations.com goetter.fr knacss.com mobitest.me @goetter EN UNE HEURE, VOUS AVEZ DIT?!? R E N
RAPPORT AUDIT SEO. Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado
- RAPPORT AUDIT SEO Élaboré à l'attention de : Monsieur Greber Élaboré par : Cédric Peinado 17 septembre 2013 Table des matières Optimisation structurelle 2 Optimisation des standards, performances et
Normes graphiques / Sigma Assistel / Site Internet version 1.0 / 12.11.03
version 1.0 / 12.11.03 CHOIX DE LANGUE / MESURES & GABARIT NORMES GRAPHIQUES & TYPOGRAPHIQUES 131 pixels La largeur totale du gabarit est de, 2 A ENTÊTE ET MENUS / MESURES & GABARIT NORMES GRAPHIQUES &
3. RÉALISATION ET QUALIFICATION D UN PROTOTYPE 3.1 Réalisation d un prototype CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML
Page:1/20 CRÉATION D UNE PAGE WEB STATIQUE AU FORMAT HTML Objectifs de l activité pratique : Notions sur le HTML, le WEB et le W3C Créer une page web statique au format HTML : - les marqueurs ou balises
Gestion Électronique de Documents et XML. Master 2 TSM
Gestion Électronique de Documents et XML Master 2 TSM I n t r o d u c t i o n Les formats de données F o r m a t s d e d o n n é e Format de donnée : manière de représenter des informations dans un document
Normes techniques 2011
Normes techniques 2011 Display classique Formats Livrables Footer p 2 p 3 p 4 Opérations spéciales Publi-rédactionnel Jeu concours Quiz Lien partenaire Habillage Accueil panoramique Sponsoring de rubrique
Zen, SASS, responsive design
, SASS, responsive design Felip Manyer i Ballester Res Telæ 21 mai 2013 Felip Manyer i Ballester, SASS, responsive design 1/36 Plan 1 Créer un thème sous Drupal Généralités Concepts à mettre en œuvre Typologie
{less} Guide de démarrage
{less Guide de démarrage Pré requis L'utilisation d'un pré processeur css nécessite son installation préalable. Vous pouvez choisir de tout installer du coté du serveur ou du coté du client. Votre site
Séance d ED n 5 : HTML et JavaScript
Séance d ED n 5 : HTML et JavaScript EXERCICE 1 1) le but de cet exercice est de construire l'interface suivante en html: une réponse : 1)
RESPONSIVE WEB DESIGN
RESPONSIVE WEB DESIGN Une approche pour concevoir des sites Web adaptatifs et une occasion d'inciter les étudiants à consulter des cours responsives Ivan MADJAROV Arnaud FÉVRIER Comment consulte-t-on le
TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012
TP JAVASCRIPT OMI4 TP5 SRC1 2011-2012 FORMULAIRE DE CONTACT POUR PORTFOLIO PRINCIPE GENERAL Nous souhaitons réaliser un formulaire de contact comprenant les champs suivants : NOM PRENOM ADRESSE MAIL MESSAGE
Les sites web avec NVU
Les sites web avec NVU Table Des Matières Les sites web avec NVU Les bases du web Les protocoles réseaux Le Web Uniform Resource Locator Recherche d'informations Création et gestion d un site Web Utiliser
TD HTML AVEC CORRECTION
TD HTML AVEC CORRECTION On utilisera Notepad++ comme éditeur sur Windows Vous créez un répertoire www sous vos répertoires personnels et vous mettrez vos pages dedans. Créez vos fichiers HTML et n oubliez
CREATION d UN SITE WEB (INTRODUCTION)
CREATION d UN SITE WEB (INTRODUCTION) Environnement : World Wide Web : ordinateurs interconnectés pour l échange d informations ( de données) Langages : HTML (HyperText Markup Language) : langages pour
Le piratage informatique. Rapport de projet. Spécialité Informatique 1 re année. DEJOUR Kévin SOUVILLE Jean-François. Suivi : Mokhtari-Brun Myriam
6, bd maréchal Juin F-14050 Caen cedex 4 Spécialité Informatique 1 re année Rapport de projet Le piratage informatique DEJOUR Kévin SOUVILLE Jean-François Suivi : Mokhtari-Brun Myriam 2 e semestre 2005-2006
Grille fluide. Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design
Grilles Fluides CSS CREATION D UNE GRILLE FLUIDE Grille fluide Une grille fluide sert à structurer la mise en page, la rendre harmonieuse et faciliter le passage au responsive web design WWW.SUTTERLITY.FR
Guide de réalisation d une campagne e-mail marketing
Guide de réalisation d une campagne e-mail marketing L ère des envois d e-mails en masse est révolue! Laissant la place à une technique d e-mail marketing ciblé, personnalisé, segmenté et pertinent. La
Pack Fifty+ Normes Techniques 2013
Pack Fifty+ Normes Techniques 2013 Nos formats publicitaires par site 2 Normes techniques 2013 Display classique Pavé vidéo Footer Accueil panoramique Publi rédactionnel Quiz Jeu concours Emailing dédié
1. La notion de cascade
HTML 5 et CSS 3 (partie 2) Objectifs Connaître quelques notions avancées de CSS 3, Appréhender l affichage, Introduction au Responsive Web Design. 1. La notion de cascade On constate que l on peut avoir
Celui qui vous parle. Yann Vigara
Celui qui vous parle Yann Vigara Celui qui vous parle Yann Vigara Celui qui vous parle [Spa m] Yann Vigara Fondateur et directeur technique d'atomes Dans l'administration système depuis 1999 Tombé dans
SII Stage d informatique pour l ingénieur
SII Stage d informatique pour l ingénieur Création d un site Web École nationale supérieure de techniques avancées SII Stage d informatique pour l ingénieur 1 / 15 L informatique et le temps qui passe...
Responsive Design. Technologies du web. Stéphane Bouvry, 2014
Responsive Design Technologies du web Stéphane Bouvry, 2014 1. Objectif Utilisation de CSS pour la mise en page 2. Diapos Le responsive design : http://goo.gl/dmh8is 3. Grille fluide Dans cette partie,
Autour du web. Une introduction technique Première partie : HTML. Georges-André SILBER Centre de recherche en informatique MINES ParisTech
Autour du web Une introduction technique Première partie : HTML Georges-André SILBER Centre de recherche en informatique MINES ParisTech silber@cri.ensmp.fr http://www.cri.ensmp.fr/people/silber/cours/2010/web
101 Réaliser et publier un site WEB
101 Réaliser et publier un site WEB Rapport personnel de module EMF - Section informatique John Baudin Module du.2008 au.2008 Table des matières 1 Introduction... 1 2 Le XHTML... 1 2.1 Les balises... 1
TP 5 Les CMS, la forme et le fond Internet et Outils (IO2)
TP 5 Les CMS, la forme et le fond Internet et Outils (IO2) Un site, tel que vous avez appris à en programmer jusqu à maintenant, contenant un ensemble de pages HTML embellies de quelques feuilles de styles,
Optimiser pour les appareils mobiles
chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...
Architecture Multi-Niveaux
Architecture Multi-Niveaux Patrick FELIX (felix@labri.fr) Franck RUBI (rubi@labri.fr) Département Informatique IUT Bordeaux1 12 novembre 2007 Architecture Multi-Niveaux 1 Plan 1. Introduction : vers une
Programmation Internet Cours 4
Programmation Internet Cours 4 Kim Nguy ên http://www.lri.fr/~kn 17 octobre 2011 1 / 23 Plan 1. Système d exploitation 2. Réseau et Internet 3. Web 3.1 Internet et ses services 3.1 Fonctionnement du Web
Sommaire. 1/ Grille. 2/ Specs globales. 3/ Specs HP. 4/ Specs Questions. 5/ Specs Offre. 6/ Specs Faq. 7/ Comportements interactifs
Sommaire 1/ Grille 2/ Specs globales 3/ Specs HP 4/ Specs Questions 5/ Specs Offre 6/ Specs Faq 7/ Comportements interactifs 1/ Grille et breakpoints Desktop :
KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.
KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html
HMTL. Exemple de fichier HTML. Structure d un document HTML. Exemple de fichier HTML. Balises HTML. IFT1147 Programmation Serveur Web avec PHP
IFT1147 Programmation Serveur Web avec PHP Un bref survol du langage HTML HMTL HTML: Hypertext Markup Language HTML est essentiellement un langage de description de structure de document (par exemple titre,
www.evogue.fr SUPPORT DE COURS / HTML
L i a m T A R D I E U www.evogue.fr SUPPORT DE COURS / HTML Sommaire Sommaire... 2 Présentation... 3 Introduction... 3 Fonctionnement... 3 Historique... 4 Navigateurs... 6 Définition... 6 Historiquement...
TIC 12 ATELIER INTEGRATION CAHIER DES CHARGES. Page 1/5
TIC 12 ATELIER INTEGRATION CAHIER DES CHARGES Page 1/5 ATELIER INTEGRATION A mi-parcours de votre formation, l'atelier (dont la note est coefficient 2) permet d'évaluer vos connaissances acquises lors
Logiciels de référencement
Outils Logiciels de référencement Afin de contrôler la qualité de son référencement, d optimiser et d améliorer son positionnement, il peut être utile d utiliser des outils couvrant tout ou partie du référencement.
Stage «Créer et animer un site Web en équipe»
Stage «Créer et animer un site Web en équipe» EREA Jean Isoard - Montgeron Jour 1 21/12/2012 Réaliser un site web Pour quoi faire? Publier sur le Web réaliser un journal en ligne (blog) écrire une ou plusieurs
// HTML, Javascript XHTML & CSS
design graphique / web design // HTML, Javascript XHTML & CSS version 1.0 date 28 / 04 / 2010 auteur Loïc Swiny contact mr@sweeen.com // sommaire HTML 01. Introduction au langage HTML 02. Introduction
Alors "Web" c'est le service Internet permettant de naviguer à travers des pages Web.
1. Langage HTML Cette chapitre explique ce qu'est un site Web et ainsi contient les information de base sur le langage HTML, langage qui permet la réalisation de pages Web. Quand on utilise le mot Internet,
Notes pour l utilisation d Expression Web
EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21 Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface
Création d'une application WEB avec PHP / MySQL
1 Créer une application WEB avec PHP / MySQL Par Philippe Bousquet Copyright (c) 2003 2008 Philippe Bousquet. 2 Ce livre électronique est une réédition d'un article de préparation d'une
Les outils de création de sites web
Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site
HTML/CSS - Travaux Pratiques 2
HTML/CSS - Travaux Pratiques 2 Le but de ces séances de TP est de se familiariser avec le format HTML et les feuilles de style CSS pour la création de pages web. Pour cela, vous utiliserez emacs sous Linux
NFA016 : Introduction. Pour naviguer sur le Web, il faut : Naviguer: dialoguer avec un serveur web
NFA016 : Introduction O. Pons, S. Rosmorduc Conservatoire National des Arts & Métiers Pour naviguer sur le Web, il faut : 1. Une connexion au réseau Réseau Connexion physique (câbles,sans fils, ) à des
Dévéloppement de Sites Web
1 Dévéloppement de Sites Web Cours II : Internet et HTML - une très brève introduction Peter Stockinger Séminaire de Maîtrise en Communication Interculturelle à l'institut National des Langues et Civilisations
Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?
Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites Quelles solutions peuvent être employées? Présentation d une des solutions Conclusion Aujourd hui le web est
CONCEPTION D E-MAILS ADAPTATIFS
CONCEPTION D E-MAILS ADAPTATIFS SELLIGENT Le contenu de ce manuel porte sur du matériel protégé par les droits d auteurs appartenant à Selligent. Ce manuel ne peut être ni reproduit, en tout ou en partie,
Luc Brun. Création de pages Web Dynamiques p.1/75
Création de pages Web Dynamiques Luc Brun Création de pages Web Dynamiques p.1/75 Place du HTML GET http://www. monssite.com HTTP 1.0 Content type: text/html ... Création de pages Web Dynamiques
1 ère Université WEB. Courbevoie Samedi 21 octobre 2006. Votre site interactif sur internet.
1 ère Université WEB Courbevoie Samedi 21 octobre 2006 Votre site interactif sur internet. Programme de la journée. 10H30 - Introduction Université web Votre site interactif sur internet. 10H35 Généralités
Langage HTML (2 partie) <HyperText Markup Language> <tv>lt La Salle Avignon BTS IRIS</tv>
Langage HTML (2 partie) «Je n'ai fait que prendre le principe d - hypertexte et le relier au principe du TCP et du DNS et alors boum! ce fut le World Wide Web!» Tim Berners-Lee
Optimiser les performances d un site web. Nicolas Chevallier Camille Roux
Optimiser les performances d un site web Nicolas Chevallier Camille Roux Intellicore Tech Talks Des conférences pour partager son savoir Le mardi au CICA Sophia Antipolis http://techtalks.intellicore.net
Introduction à Expression Web 2
Introduction à Expression Web 2 Définitions Expression Web 2 est l éditeur HTML de Microsoft qui répond aux standard dew3c. Lorsque vous démarrez le logiciel Expression Web 2, vous avez le choix de créer
Démonstration de la mise en cache via HTML 5 sur iphone
Last update: 2011/08/18 21:46 wiki:devmobile:webapp:html5:presentation Démonstration de la mise en cache via HTML 5 sur iphone Overview Parmi les nouveautés du HTML 5, l une d elles est très intéressent
Pour en expliquer le principe, on se limitera à deux exemples :
Les Media Queries permettent donc de cibler : Le type de média La taille de l'écran La taille de la fenêtre La résolution Le nombre de couleurs L'orientation Pour en expliquer le principe, on se limitera
FORMATION / CREATION DE SITE WEB / 4 JOURNEES Sessions Octobre 2006
I. INTRODUCTION 1. Présentation du formateur et des élèves 2. Historique internet : d'où ça vient a. Historique général : 3 étapes majeures 1. l'histoire de l'informatique débute en 1942 avec la première
Dans nos locaux au 98 Route de Sauve 30900 NÎMES. Un ordinateur PC par stagiaire, scanner, imprimante/copieur laser couleur
FORMATION FORFAIT WEB DEVELOPPEUR Qualification ISQ OPQF Formacode 46 125 Certification de titre professionnel Web Designer + modules optionnels : Développement PHP/MySQL avancé, Web App, CMS e-boutique
Media queries : gérer différentes zones de visualisation
2 Media queries : gérer différentes zones de visualisation Comme nous l avons vu au chapitre précédent, les CSS3 sont constituées de modules. Media queries est simplement l un d eux. Ce module permet d
Ecran : Processeur : OS : Caméra : Communication : Mémoire : Connectique : Audio : Batterie : Autonomie : Dimensions : Poids : DAS :
SMARTPHONE - DUAL-CORE - NOIR 3483072425242 SMARTPHONE - DUAL-CORE - BLEU XXXX SMARTPHONE - DUAL-CORE - BLANC 3483072485246 SMARTPHONE - DUAL-CORE - ROSE 3483073704131 SMARTPHONE - DUAL-CORE - ROUGE XXXX
Un mini-site internet en une après-midi
Prérequis Posséder un ordinateur équipé d un logiciel pour écrire des fichiers texte simples, (SimpleText, BlocNotes, etc...), d un logiciel de Navigation Internet (InternetExplorer, Netscape, Mozilla,
Informatique : Création de site Web Master 2 ANI TP 1
Informatique : Création de site Web Master 2 ANI TP 1 Objectifs du TP : créer des pages Web en HTML EXERCICE I : AFFICHAGE DE DOCUMENT HTML 1. Ouvrez le bloc-note, recopiez-y le document suivant :
Notice d accessibilité HTML, CSS et JavaScript
Notice d accessibilité HTML, CSS et JavaScript Date Version État / commentaires 10 sept. 2015 2.0 Cette version prend en compte WCAG 2.0 et RGAA 3.0. En partenariat avec : Air Liquide Atos BNP Paribas
Sana Sellami. sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012
Sana Sellami sana.sellami@lsis.org Licence Professionnelle SIL 2011-2012 Connaître les principales techniques pour la création de sites web Se familiariser avec les langages du web Rendre dynamique le
Production de documents avec XSLT. Production de documents p.1/??
Production de documents avec XSLT Production de documents p.1/?? Sommaire La balise xsl:output comment choisir le format de sortie Création de nœuds dans un document créer des éléments et attributs Création
< Atelier 1 /> Démarrer une application web
MES ANNOTATIONS SONT EN ROUGE : Axel < Atelier 1 /> Démarrer une application web Microsoft France Tutorial Découverte de ASP.NET 2.0 Sommaire 1 INTRODUCTION... 3 1.1 CONTEXTE FONCTIONNEL... 3 1.2 CONTEXTE
Les Bases. Messaoudi Khaled, Boukelal Hanane (Etudiants Informatique ) 2015.
Référencer Mon SITE, BLOG Les Bases Messaoudi Khaled, Boukelal Hanane (Etudiants Informatique ) 2015. Le but de ce livre est de vous aider à bien positionné votre site web ou blog auprès des moteurs de
Le codage informatique
Outils de Bureautique Le codage informatique (exemple : du binaire au traitement de texte) PLAN 3) Le codage binaire 4) Représentation physique des bits 5) Le bit est un peu court... 6) Codage de texte
Guide technique d accessibilité pour la création et la refonte des sites Web de l administration publique. Date : Juillet 2010 Version 1.
Guide technique d accessibilité pour la création et la refonte des sites Web de l administration publique Date : Juillet 2010 I- Mode d emploi du présent guide technique...5 II- Recommandations pour le
Panel des technologies Web
Panel des technologies Web pierre.jean@mines-ales.fr version 0.14 Objectif Un panorama des technologies Web pour comprendre leurs positionnements et leurs utilisations Questions Evaluation Sommaire Avant
Charte graphique 2011
2011 Charte graphique Sommaire Les couleurs du logo > 4 La Taille minimale d exploitation > 5 l space de protection > 5 Les applications sur fonds > 6 Les interdits > 6 la Typographie d accompagnement
02/02/2011. test 1. Communication visuelle & web. Pao. Principes fondamentaux. Les six principes de base. La mise en page. Module sur trois journées
Communication visuelle & web Module sur trois journées 1, 5 jour : communication print & visuelle 1.5 jour : communication web mise en pratique evaluation sur QCM Vous serez en mesure participer à la conception
Responsive Web Design. Responsive Design avec HTML 5.0 et CSS3
Ivan MADJAROV Responsive Design avec HTML 5.0 et CSS3 HTML5 CSS3 IvMad - 2013 2 La spécification CSS3 Media Queries (requêtes de media) définit les techniques pour adapter de feuilles de styles en fonction
Comment utiliser WordPress»
Comment utiliser WordPress» Comment utiliser WordPress» Table des matières» Table des matières Guide de démarrage rapide»... 2 Tableau de bord de WordPress»... 3 Rédiger un article»... 3 Modifier l article»...
Uniformiser la mise en forme du document. Accélère les mises à jour. Permets de générer des tables de matières automatiquement.
Les styles Table des matières Les styles... 1 1. Tutoriels... 1 2. Pourquoi utiliser les styles?... 1 3. Qu'est-ce qu'un style?... 1 4. Utiliser les styles existants... 2 Afficher les styles... 2 Appliquer
Module : programmation site Web dynamique Naviguer entre les pages via site map
Module : programmation site Web dynamique Naviguer entre les pages via site map Soit le site web suivant qui est constitué de six pages web : On veut créer un menu constitué de trois nœuds principaux générale
Création d un site Internet
Création d un site Internet Weebly.com Johanne Raymond Collège Lionel Groulx, mai 2010 Service du soutien à l enseignement et Plan de réussite Ouvrir un compte sur Weebly... 1 Modifier le modèle... 2 Ajouter
Devenez un véritable développeur web en 3 mois!
Devenez un véritable développeur web en 3 mois! L objectif de la 3W Academy est de former des petits groupes d élèves au développement de sites web dynamiques ainsi qu à la création d applications web
L'accessibilité des applications web mobiles
L'accessibilité des applications web mobiles ou la véritable histoire d un projet web mobile (très) grand public vu par ses utilisateurs Contée par Sébastien Delorme, Atalan Casting Critiques «Une histoire
Créer une maquette de site Internet
Créer une maquette de site Internet La réalisation d une maquette de site Internet pour un projet nécessite une certaine rigueur, avec le souci du détail. Nous allons voir ici comment utiliser une grille
GUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS
GUIDE D UTILISATION DE LA PLATEFORME D ENVOI DE COURRIELS Table des matières Présentation de la plateforme d envoi de courriels... 4 1- Gestion des contacts... 5 1.1. Base de données... 5 1.1.1- Création
Utilisation de l éditeur.
Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7
HTML5 et CSS3 pour des sites Responsive Web Design
Chapitre 1 : Introduction A. Le design Web aujourd'hui 11 B. Le Responsive Web Design 11 C. Les approches dans la conception 12 D. Le lâcher-prise 12 E. Les objectifs du livre 13 F. Les outils de l intégrateur
RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite?
RESPONSIVE DESIGN : Comment offrir à vos sites une adaptabilité parfaite? Medialibs, votre partenaire digital Quoi? Un partenaire pour une gestion globale du digital (un laboratoire R&D, éditeur de logiciels
Manuel de mise en page de l intérieur de votre ouvrage
Manuel de mise en page de l intérieur de votre ouvrage Merci de suivre strictement les recommandations de ce manuel qui a pour but de vous aider à préparer un livre dont la qualité de mise en page est
MAILING KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4
MAILING Table des matières KOMPOZER... 2 CREEZ UNE PAGE... 2 FORMAT DE LA PAGE... 2 AJOUTER DU TEXTE SUR UNE PAGE... 4 INSERER UNE IMAGE (OU UNE PHOTO) PAS DE COPIER / COLLER... 5 INSERER UN TABLEAU...