CSS# Conflits# Avec"quelle"couleur""Navigate:""" va"t'il"être"affiché"?" il"y"a"un"conflit"entre"" ces"styles"css"!" mypage.html" mystyles.
|
|
|
- Floriane Cardinal
- il y a 6 ans
- Total affichages :
Transcription
1 mypage.html" <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyles.css" /> </head> <body> <h2 id="main" class="navigation">navigate :</h2> </html> Avec"quelle"couleur""Navigate:""" va"t'il"être"affiché"?" mystyles.css" Conflits# # h2 { color: green; font-size: 1.2em; padding: 10px; } h2.navigation { color: blue; } h2#main { color: red; } il"y"a"un"conflit"entre"" ces"styles"css"!"
2 mypage.html" Conflits# # <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="mystyles.css" /> </head> <body> <h2 id="main" class="navigation">navigate :</h2> </html> Navigate : mystyles.css" h2 { color: green; font-size: 1.2em; padding: 10px; } h2.navigation { color: blue; } h2#main { color: red; } le"sélecteur"h2#main"est"plus"" "spécifique""que"les"autres"!"il"gagne"
3 Conflits# # mypage.html" <!DOCTYPE html> <html> <h2 id="main" class="navigation" style="color: yellow">navigate :</h2> </html> Avec"quelle"couleur""Navigate:""" va"t'il"être"affiché"?" mystyles.css" h2 { color: green; font-size: 1.2em; padding: 10px; } h2.navigation { color: blue; } h2#main { color: red; }
4 Conflits# # mypage.html" <!DOCTYPE html> <html> <h2 id="main" class="navigation" style="color: yellow">navigate :</h2> </html> Navigate : mystyles.css" h2 { color: green; font-size: 1.2em; padding: 10px; } h2.navigation { color: blue; } h2#main { color: red; } une"déclaraion"css"dans"un"a%ribut" style"est"toujours"plus""spécifique"" que"les"autres"!"elle"gagne" Les"conflits"sont"résolus"grâce" au"mécanisme"de"cascade( RappelezYvous"!"CSS"="Cascading"Style"Sheets"
5 Cascade# # Cascade"is"the"mechanism"that"controls"the"end"result"when" muliple,"conflicing"css"declaraions"apply"to"the"same" element." Three"main"concepts:" Importance" Specificity"" Souce"order" If"two"declaraIons"have"the"same"importance,"the"specificity" of"the"rules"decides"which"one"will"apply."if"the"rules"have"the" same"specificity,"then"source"order"controls"the"outcome.""
6 Cascade# Importance# The"importance"of"a"CSS"declaraIon"depends"on"where"it"is" specified." The"conflicIng"declaraIons"will"be"applied"in"the"following"order" (later"ones"will"override"earlier"ones):" 1. User"agent"style"sheets"(brower's"default"sepngs)" 2. Normal"declaraIons"in"user"style"sheets" 3. Normal"declaraIons"in"author"style"sheets" 4. Important"declaraIons"in"author"style"sheets" 5. Important"declaraIons"in"user"style"sheets" Important"declaraIons"are"declaraIons"followed"by"!important * { font-family: "Comic Sans MS"!important; }
7 Cascade# Specificity# Specificity:"a"measure"of"how"specific"a"rule's"selector"is." If"two"or"more"declaraIons"conflict"for"a"given"element,"and"all" the"declaraions"have"the"same"importance,"then"the"one"in"the" rule"with"the"most"specific"selector"will""win"." The"specificity"is"a"number"of"4"digits""abcd""computed"this"way:" "a""is"1"for"a"declaraion"in"a"style"a%ribute,"otherwise"0." "b""is"the"number"of"id's"in"the"selector"(e.g."#monid)." "c""is"the"number"of"classes"(e.g.".maclasse)"and"pseudoyclasses" (e.g.":hover)." "d""is"the"number"of"tags"in"your"selector"(e.g."div)" CSS"declaraIons"in"a"style"a%ribute"don t"have"any"selector,"so" their"specificity"is"always"1000." Example:"the"specificity"of"#parentid p"is"0101"and"the"specificity" of".class p"is"0011"!"#parentid p"wins"(0101>0011)"
8 Other"examples:" Cascade# Specificity# Selector# a b c# d Specificity# h2 h2.navigation h2#main * blockquote p.class blockquote p#id blockquote.class p#id html>head+body ul#nav.home a:link
9 mypage.html" Cascade# Source#order# if"two"declaraions"affect"the"same"element,"have"the"same"importance" and"the"same"specificity,"the"final"disinguising"mark"is"the"source"order:" the"declaraion"that"appears"later"in"the"style"sheets"will""win""over" those"that"come"before"it." <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles1.css" /> <style> 3# h2 { color: green; } </style> </head> <body> <h2>navigate :</h2> </body> </html> url("styles2.css) h2 { 2# color: red; } h2 { color: blue; } styles2.css" 1#
10 @import url("styles2.css) h2 { color: red; } Cascade# Source#order# if"two"declaraions"affect"the"same"element,"have"the"same"importance" and"the"same"specificity,"the"final"disinguising"mark"is"the"source"order:" the"declaraion"that"appears"later"in"the"style"sheets"will""win""over" those"that"come"before"it." mypage.html" <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles1.css" /> <style> h2 { color: green; } </style> </head> <body> <h2>navigate :</h2> </body> </html> styles1.css" ce%e"déclaraion"apparaît" après"les"autres"!"elle"gagne" h2 { color: blue; } styles2.css"
11 Affichage#des#éléments#HTML# flux#du#document# chaque"élément"html"considéré"comme"une"boîte#rectangulaire." flux#du#document#:"ordre"dans"lequel"le"navigateur"affiche"ces" boîtes." flux#normal#(par"défaut)" un"élément"père"est"un"conteneur" un"élément"fils"s'affiche"dans"son"conteneur" élément"bloc" s'affiche"en"dessous"de"son"frère"précédent."" occupe"toute"la"largeur"disponible"dans"son"conteneur." élément"en"ligne" s'affiche"à"côté"de"son"frère"précédent." retour"à"la"ligne"quand"il"n'y"a"plus"de"place"dans"le"conteneur." flux"personnalisé" certaines"propriétés"css"perme%ent"de"sor=r"des"éléments"du"flux"normal" 43"
12 exemple"de"flux"normal" Affichage#des#éléments#HTML# flux#du#document# 44"
13 Affichage#des#éléments#HTML# flux#du#document# <div>"et"<span>#éléments"génériques"sans"informaion" structurante"prédéfinie" uilisés"en"associaion"avec"des"feuilles"de"style"css"ou"du"javascript"via"les"a%ributs"id,"class" ou"style# div#:#balise"de"type"bloc"" " zone"rectangulaire"qui"ne"peut"être"réparie"sur"plusieurs"lignes" " "peut"contenir"tous"les"autres"éléments"de"type"bloc"ou"en"ligne" span#:#balise"de"type"en"ligne"(inline)" " "s'inscrit"dans"le"flux"du"contenu,"peut"être"réparie"sur"plusieurs"lignes"" " "peut"contenir"tous"les"autres"éléments"en"ligne" 45"
14 marge#externe/ bordure/ marge#interne/ No:on#de#boîte# par:es#cons:tuantes# boîte"rectangulaire"matérialisant"un"élément"composée"de"3" paries":" son"contenu"(contenu"de"l'élément":"texte,"image "autres"éléments )" un"cadre" une"bordure" une"marge"interne"(marge"entre"le"contenu"et"la"bordure)" une"marge"externe" marge"entre"le"cadre"et"les"boîtes"matérialisant"les"éléments"adjacents"dans"le"flux" contenu/ 46"
15 width height background No:on#de#boîte# propriétés#css# La"taille"du"contenu,"le"cadre"et"la"marge"externe"d'une"boîte" peuvent"être"contrôlés"par"des"propriétés"css." Contenu# Marge#interne# Bordure# Marge#externe# largeur/et/ type,/épaisseur/ épaisseur/ épaisseur/ hauteur/ et/couleur/ Arrière#plan# couleur/ image/ padding border-style border-width border-color marge#externe/ bordure/ marge#interne/ padding-top margin margin-right height contenu/ background-color width border-bottom-width 47"
16 No:on#de#boîte# dimensions#et#a^ributs#par#défaut# dimensions"d'une"boîte"induites"par"son"contenu"+"trois"périmètres" (margin,"border","padding)." margin,"border,"padding"pas"obligatoires" " valeurs"par"défaut" 0"pour"éléments"en"ligne"et"<div> border(=(0,(margin"et"padding(dépendent"du"navigateur"pour"les"éléments"bloc"!"fixer"dans"les"feuilles"de"style"css"pour"rendu"indépendant"du"navigateur" marge#externe/ bordure/ marge#interne/ padding-top margin-right height contenu/ background-color width border-bottom-width 48"
17 Bordures"et"arrière"plan" Possibilité"d'entourer"les"éléments"et"de"les"doter" d'un"arrièreyplan"(couleur,"image)" Propriétés" border-style"style" border-width"épaisseur" border-color"couleur" Bordures#et#arrièreEplan# introduc:on# # applicable"à"tous"les"bords" ou"de"chaque"côté" background-color"couleur"arrière"plan" background-image"image"d'arrière"plan" 49"
18 border-style Bordures#et#arrièreEplan# style# valeurs"possibles" border-style:<val> tous"les"côtés" border-style:<val1> <val2> <val1>"côtés"horizontaux" <val2>"côtés"vericaux" border-style:<val1> <val2> <val3> <val1>"côté"horizontal"haut" <val2>"côtés"vericaux" <val3">"côté"horizontal"bas" possibilité"de"spécifier"chaque"côté" border-left-style border-right-style border-top-style border-bottom-style 50"
19 Bordures#et#arrièreEplan# épaisseur,#couleur# border-width valeur"numérique"ex:"border-width:5px (5"pixels)" mots"clés" border-color valeur"numérique"" hexadécimale":"#00ffff ou"#0ff# rgb":"rgb(0,255,255)"ou"rgb(0,100%,100%) mot"clé":"cyan même"règles"que"pour"border-style"pour" individualiser"chaque"côté." 51"
20 Bordures#et#arrièreEplan# couleur# #image#arrièreeplan# background-color: valeur #00ffff,"#0ff#,"rgb(0,255,255),"rgb(0,100%,100%)","cyan background-image: url(url de l'image) image"locale"" url(images/logo-ujf.png) "chemin"relaif# image"distante"url( logo.gif) " par"défaut"l'image" est"répétée"en"damier" logo_ujfyfond.png" 52"
21 Bordures#et#arrièreEplan# image#arrièreeplan# background-repeat: valeur contrôle"répéiion"de"l'image"d'arrièreyplan background-position: valeur1 valeur2 valeur1"posiion"horizontale"par"rapport"au"bord"gauche" left,"center,"right"ou"pourcentage" valeur2"si"présente,"posiion"vericale"par"rapport"au"bord"supérieur" top,"center,"bottom ou"pourcentage" 53"
22 Bordures#et#arrièreEplan# image#arrièreeplan# Par"défaut"image"d'arrièreYplan"a%achée"à"son"élément" se"déplace"avec"lui"lors"d'un"scroll" background-attachment: fixed a%ache"l'image"à"la"fenêtre. 54"
23 exemple"(sans"posiionnement)" Posi:onnement#des#éléments# # 55"
24 a%ribuion"de"dimensions"aux"éléments"div1"et"p1# Posi:onnement#des#éléments# ajout"de"marges" internes"(padding)" aux"éléments"div1" et"p1# 250px# 400px# 20px# 250px" 20px# 30px# 400px" 30px# 56"
25 Posi:onnement#des#éléments# ajout"d'une"marge" externe"(margin)"a" l'élément"div1# div1"sans"marge" 20px# div1"avec"marge" 20px# 57"
26 Posi:onnement#des#éléments# #posi:onnement#rela:f# posiionnement"relaif" l'élément"est"décalé"à"l'aide"des"propriétés"top,"right,"left,"bottom par" rapport"à"sa"posiion"normale"dans"le"flux"courant "!"l'élément"peut"prendre"place"au"dessus"de"ses"éléments"frères." n'affecte"pas"les"boites"qui"l'entourent" 40px# 50px# 58"
27 Posi:onnement#des#éléments# #posi:onnement#absolu# posiionnement"absolu" sort"un"élément"du"flux" l'élément"ne"paricipe"plus"à"la"posiion"de"ses"frères" posiionnement"à"l'aide"des"propriétés"top,"right,"left,"bottom expriment"des"décalages"non"plus"par"rapport"à"posiion"théorique"(posiionnement"relaif)"mais"par" rapport"à"la"posiion"d'un"bloc"conteneur"de"référence" boite"conteneur"de"référence":"le"premier"élément"ancêtre"posiionné"(relaif,"absolu"ou"fixed)" (élément"<body>"toujours"considéré"comme"posiionné) 100px# 90px# tout"élément"posiionné"en"absolu"est"considéré"de"type"bloc" =>"éléments"en"ligne"peuvent"ainsi"recevoir"des"dimensions"et"bordures""" 59"
28 Posi:onnement#des#éléments# #posi:onnement#fixe# posiionnement"fixe" cas"pariculier"du"posiionnement"absolu" l'élément"reste"fixe"dans"la"page"par"rapport"à"la"zone"de"visualisaion"(pas"de" scroll)" posiionnement" absolu" scrolling"en"liaison" avec"l'élément"de" référence"" posiionnement" fixe" pas"de"scrolling" 60"
29 posiionnement"flo%ant" 1. sort"l'élément"du"flux" 2. l'élément"est""poussé""à"gauche"(float:#led)" "ou"à"droite"(float:#right)"de"son"conteneur." 3. les"éléments"qui"le"suivent"dans"le" conteneur"prennent"place"autour"de"lui." Posi:onnement#des#éléments# #posi:onnement#flo^ant# posi:onnement#normal#(flux)# posi:onnement#flo^ant#(right)# posi:onnement#en#flo^ant# 61"
30 possibilité"de"placer"des"blocs"flo%ants"côte"à"côte" Posi:onnement#des#éléments# #posi:onnement#flo^ant# p1# p2# p3# p4# p5# 62"
31 Posi:onnement#des#éléments# #posi:onnement#flo^ant# clear"permet"d'interdire"le"voisinage"avec"un"élément"flo%ant"(à"droite,"à" gauche"ou"des"deux"côtés)." p1# p2# p3# p4# p5# pas#d'élement# flo^ant#à#droite# 63"
32 Posi:onnement#des#éléments# #posi:onnement#flo^ant# clear"permet"d'interdire"le"voisinage"avec"un"élément"flo%ant"(à"droite,"à" gauche"ou"des"deux"côtés)." p1# p2# p3# p4# (c)"ujfy2011"philippe"genoud" p5# pas#d'élement#flo^ant# ni#à#droite#ni#à#gauche# 64"
33 possibilité"de"faire"flo%er"des"éléments"en"ligne." Posi:onnement#des#éléments# #posi:onnement#flo^ant# +#?# p2# p1# p3# p4# p5# 65"
34 possibilité"de"faire"flo%er"des"éléments"en"ligne." Posi:onnement#des#éléments# #posi:onnement#flo^ant# +# p2# p1# p3# "tout"élément"flo%ant"est" considéré"de"type"bloc" "les"éléments"en"ligne" peuvent"alors"recevoir" bordures"et"dimensions" p4# p5# 66"
35 possibilité"de"rendre"invisible"des"éléments" Posi:onnement#des#éléments# #Afficher#et#masquer#des#éléments# p2# p1# p3# "visibility:hidden"masque" l'élément"mais"réserve"sa" posiion"et"ses"dimensions." L'élément"occupe"de"l'espace" sur"la"page." " "autres"valeurs":"visible," collapse"(pour"tables),"inherit# p4# p5# 67"
36 possibilité"de"reirer"un"élément"de"l'affichage" Posi:onnement#des#éléments# #Afficher#et#masquer#des#éléments# p2# p1# p3# "display:none#l'élément"n'est" plus"du"tout"affiché."tout"se" passe"comme"si"il"n'existait" pas" # p4# p5# 68"
37 posiionnement"flo%ant" autre"exemple." Posi:onnement#des#éléments# #posi:onnement#flo^ant# posiionnement"en"flux" posiionnement"en"flo%ant" 69"
38 Bibliographie# h^p:// CSS2":"PraIque"du"design"web,"Raphaël"Goe%er,"3 ème "ediion," EdiIons"Eyrolles,"2009" Tête"la"première"HTML"avec"CSS"et"XHTML,"Eric"et"Elisabeth" Freeman,"EdiIons"0'Reilly,"2007" h%p:// h%p://openweb.eu.org" h%p://wiki.mediaybox.net/documentaion/css" h%p:// " " 70"
.. 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
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
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?
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
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
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
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
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
{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
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
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
Activités HTML. Code: act-html
Activités HTML act-html Activités HTML Code: act-html Originaux url: http://tecfa.unige.ch/guides/tie/html/act-html/act-html.html url: http://tecfa.unige.ch/guides/tie/pdf/files/act-html.pdf Prérequis:
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
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
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
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
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
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
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
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
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
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
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
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
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...
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é
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)
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
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
Dans l Unité 3, nous avons parlé de la
11.0 Pour commencer Dans l Unité 3, nous avons parlé de la manière dont les designs sont créés dans des programmes graphiques tels que Photoshop sont plus semblables à des aperçus de ce qui va venir, n
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
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
MANUEL D UTILISATION ORBITVU EDITOR V.3
MANUEL D UTILISATION ORBITVU EDITOR V.3 1 INFORMATIONS GENERALES : Logiciel Orbitvu Editor V 3 Le logiciel accepte les systèmes d exploitation suivants : - Microsoft Vista avec service pack 2 et les dernières
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
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
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
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
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
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
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
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
Freeway 7. Nouvelles fonctionnalités
! Freeway 7 Nouvelles fonctionnalités À propos de ce guide... 3 Nouvelles fonctionnalités en un coup d'oeil... 3 À propos de la conception d'un site web réactif... 3 Travailler avec les pages pour créer
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
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
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,
// 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
Spécificités techniques JANVIER 2013
Spécificités techniques JANVIER 2013 Spécificités techniques des bannières de la newsletter 100%MEDIA Supermegabanner : Taille = 728x180 / Format = gif / Poids Max = 35Ko Important : - Un lien de redirection
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
Plan. Avant de créer son site. Quelques logiciels complémentaires
Internet, créer son site personnel. Yves Roger Cornil Microcam06, Fréjus Vous Accueille 7 mars 2005 Plan Pourquoi publier sur Internet? Quelques prérequis et quelques logiciels Combien ça coûte? Rappels
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
Responsive Web Design. La Rochelle, Avril 2014
Responsive Web Design La Rochelle, Avril 2014 Mohamed Belmokhtar Université de La Rochelle Germain Souquet Université de La Rochelle Sommaire Qu est-ce que le responsive web design? Les différentes approches
Spécifications techniques
Spécifications techniques Décembre2009 1. Récapitulatif des formats : p2 1. Formats classiques p2 2. Formats Rich Média p2 2. Emplacements : p3 1. Directions.fr p3 2. Newsletter Directions p4 3. Contraintes
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
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...
CONSTRUCTION DE SITES WEB
CONSTRUCTION DE SITES WEB 3ème partie Sommaire Introduction...3 Les Images sur le Web...3 Les Images Numériques...6 Les Formats des Fichiers...7 Les particularités du format GIF...8 Les Images Animées...9
SPÉCIFICATIONS TECHNIQUES DES FORMATS PUBLICITAIRES
SPÉCIFICATIONS TECHNIQUES DES FORMATS PUBLICITAIRES DIRECTIVES COMMUNE POIDS Display Standard: 70 KB Display «Expandable»: 115 KB Video: 40 MB Video Mobile: 3 MB Performance: 30 KB Mobile: voir page 9
PEPSITE EST COMPATIBLE UNIQUEMENT SUR IE10+
1 Avertissements Ce document a pour but de fournir à tous les moyens pour bien débuter avec PEPSITE. Nous utiliserons donc volontairement un vocabulaire et une méthode de travail accessibles à un public
Creation d une page Web
Création des pages web 1 Creation d une page Web Par Romica TRANDAFIR Table des matières 4. Création des pages web... 2 4.1. Présentation générale du langage HTML...2 4.2. Les principales balises du langage
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
DOSSIER PROJET ISN. PARTIE 1 : Présentation de l équipe projet. PARTIE 2 : Présentation du projet
DOSSIER PROJET ISN PARTIE 1 : Présentation de l équipe projet Le groupe que nous avons décidé de composer pour réaliser notre projet d ISN cette année 2014-2015 est composé de 3 élèves : Lev POZNIAKOV,
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...
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
Canvas 3D et WebGL. Louis Giraud et Laetitia Montagny. 9 Avril 2013. Université Lyon 1
Canvas 3D et WebGL Louis Giraud et Laetitia Montagny Université Lyon 1 9 Avril 2013 1 Présentation du sujet Introduction Présentation du sujet Problématique : Représenter de la 3D dans le navigateur sans
A propos de Microsoft
A propos de Microsoft Introduction Microsoft est l entreprise informatique la plus connue au monde. Ses systèmes d exploitation séduisent plus de 90% des utilisateurs d ordinateurs Mais Microsoft ne se
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,
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
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,
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.
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,
Atelier numérique Développement économique de Courbevoie
Atelier numérique Développement économique de Courbevoie Jeudi 24 octobre 2013 Comment positionner son site internet en haut de Google? Atelier numérique de Courbevoie Intervenants : Olivier CARTIERI Animateur
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
Mise à jour : janvier 2015 POURQUOI ET COMMENT OPTIMISER LES VISUELS
Mise à jour : janvier 2015 POURQUOI ET COMMENT OPTIMISER LES VISUELS QUI EST MAXIWEB? Maxiweb est une agence digitale pas comme les autres. Un seul objectif : faire de vous le ROI Pôle Consulting Pôle
Parcours guidé : créer des pages simples au format html avec Nvu 28/1/10
Table des matières 1. AVANT-PROPOS... 4 1.1. PRESENTATION DE NVU... 4 1.2. CARACTERISTIQUES PRINCIPALES DE NVU... 4 1.3. OBJECTIF DE CE DOCUMENT... 4 1.4. PRE-REQUIS NECESSAIRES... 4 1.5. MODE D'EMPLOI
NAMEBAY PRO. votre site de revente de noms de domaine en marque blanche. Documentation technique
NAMEBAY PRO votre site de revente de noms de domaine en marque blanche Documentation technique SOMMAIRE 1. PRÉSENTATION... 3 2. FONCTIONNEMENT... 4 2.1. ETAPE 1 : Devenir revendeur de noms de domaine...
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 &
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
Manuel d utilisation du module Liste de cadeaux PRO par Alize Web
Manuel d utilisation du module Liste de cadeaux PRO par Alize Web INSTALLER ET CONFIGURER LE MODULE (BACK OFFICE) 2 Réglages des performances 2 Télécharger le module 3 Installer le module 4 Configurer
AFFICHEUR TFT 5.7 TFT210
AFFICHEUR TFT 5.7 TFT210 MANUEL D UTILISATION ET PROGRAMMATION Rev. n. 0 Date: 03/05/2011 hardware rev.1.1 frw 0.3 software v2.0.1.2 1 CONTENTS: Données techniques... 3 Schéma de branchement... 4 Kit di
L informatique et la formation en direction des élus
L informatique et la formation en direction des élus ICE version 2.30 Edité le 30 juillet 2011 Référence Client :............ Votre Contact :............... INOVA3 Sarl au capital de 9200 Euros Siret 441761798
Projet en nouvelles technologies de l information et de la communication
Projet en nouvelles technologies de l information et de la communication Site Web universitaire du Prof. Jacques Moeschler. Nono Steeve Semestre de printemps 2013 Sous la direction du Prof Luka Nerima
Créer une base de données vidéo sans programmation (avec Drupal)
Créer une base de données vidéo sans programmation (avec Drupal) 10.10.2013 Nicolas Bugnon (nicolas.bugnon@alliancesud.ch) Centre de documentation Alliance Sud www.alliancesud.ch Résultat de l atelier
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
W3MS Web, Marketeur, Manager de Médias sociaux
W3MS Web, Marketeur, Manager de Médias sociaux Nouvelles modes de consommations des biens et des services, Nouvelles formes de communication dans le B2B, dans le B2C, dans le B2B2C, le C2C, Nouvelles compétences
Société : xxxxx. Rapport de référencement naturel
Société : xxxxx Rapport de référencement naturel Mois : Octobre 2013 Positionnement de votre site pour les mots-clés ciblés Position Position Position Evolution Mots clés Aout Septembre Octobre Accessoire
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 :
Interface papier pour des présentations multimédia. BELKHIR Abdelkader, BOUYAKOUB Fayçal M'hamed, SMAIL Samia
Interface papier pour des présentations multimédia BELKHIR Abdelkader, BOUYAKOUB Fayçal M'hamed, SMAIL Samia LSI-TR-0904 Juin 2004 2 LSI-TR-0904 Interface papier pour des présentations multimédia BELKHIR
TP création et publication d'un site web statique
TP création et publication d'un site web statique Ce TP va se décomposer en trois parties. Dans un premier temps nous créerons un site web statique. Le site sera créé avec l'éditeur Amaya pour respecter
Introduction... 3. 1 Pourquoi Slax?... 4. 2 Formatage... 5. 3 Rendre la clé bootable sous linux... 6. 4 Slax... 7. 5 Installshield...
6, bd maréchal Juin F-14050 Caen cedex 4 Spécialité Informatique 1 re année Rapport de mini-projet Slax sur clé USB PAITEL Arnaud Montouchet Yohann Responsable : François Lecellier 2 e semestre 2006-2007
Base de données opérationnelle pour les phénomènes PAN Commission SIGMA 2 - AAAF
Le groupe 3AF (SIGMA 2) : - approfondir les cas intéressants exploitable (en aval du GEIPAN) - rechercher de nouveaux cas (bases de données, publications référencées) - constituer un réseau scientifique
Initiation aux techniques du Web. Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr
Initiation aux techniques du Web Cours L2 sciences cognitives séance 2 Charif HAYDAR: alchiekc@loria.fr La balise Intégrer un élément ou un fichier externe (video, audio, flash, pdf ). Le support
TIC. Réseau informatique. Historique - 1. Historique - 2. TC - IUT Montpellier Internet et le Web
Réseau informatique TIC TC - IUT Montpellier Internet et le Web Ensemble d'ordinateurs reliés entre eux et échangeant des informations sous forme de données numériques But : Rendre disponible l information
DOCUMENTATION - FRANCAIS... 2
DOCUMENTATION MODULE SHOPDECORATION MODULE PRESTASHOP CREE PAR PRESTACREA INDEX : DOCUMENTATION - FRANCAIS... 2 INSTALLATION... 2 Installation automatique... 2 Installation manuelle... 2 Résolution des
w w w. t o m. t r a v e l
Lancé en Janvier 2013, tom.travel vous informe sur les nouvelles technologies applicables au Tourisme. TOM réalise une veille sur l innovation, les nouveaux usages et les services à valeur ajoutée pour
INTRODUCTION A JAVA. Fichier en langage machine Exécutable
INTRODUCTION A JAVA JAVA est un langage orienté-objet pur. Il ressemble beaucoup à C++ au niveau de la syntaxe. En revanche, ces deux langages sont très différents dans leur structure (organisation du
Chapitre 1. Prise en main
Guide de référence Guide de référence Chapitre 1. Prise en main Le processus d'enquête Le processus d'enquête comporte 5 étapes toutes prises en charge par le logiciel : Conception des formulaires Cette
Optimiser moteur recherche
Optimiser moteur recherche Vous apprennez à inscrire vos sites dans les moteurs de recherche et les optimiser, déjà à la construction Worldsoft SA Inscription de sites Web dans les moteurs de recherche