Second atelier gratuit autour des technologies HTML5 / CSS3 / Javascript organisé par La Coopérative des Tilleuls.
Au menu cette fois-ci une initiation à l'intégration web grâce aux feuilles de style CSS.
Après avoir appris lors du premier atelier à créer et à structurer des pages web grâce à HTML, nous verrons comment les mettre en forme avec les feuilles de style en cascade CSS.
Nous découvrirons ensembles :
- les fondements du langage CSS (syntaxe, cascade, sélecteurs)
- quelques balises et attributs HTML utiles pour la CSS
- le formatage de texte (police, couleur, gras, italique...)
- le positionnement des éléments
- les couleurs et images de fond
Normes de base du Web - GTI780 & MTI780 - ETS - A08Claude Coulombe
Présentation sur les normes de base du Web dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'Ecole de technologie supérieure, Montréal, Automne 2008
Second atelier gratuit autour des technologies HTML5 / CSS3 / Javascript organisé par La Coopérative des Tilleuls.
Au menu cette fois-ci une initiation à l'intégration web grâce aux feuilles de style CSS.
Après avoir appris lors du premier atelier à créer et à structurer des pages web grâce à HTML, nous verrons comment les mettre en forme avec les feuilles de style en cascade CSS.
Nous découvrirons ensembles :
- les fondements du langage CSS (syntaxe, cascade, sélecteurs)
- quelques balises et attributs HTML utiles pour la CSS
- le formatage de texte (police, couleur, gras, italique...)
- le positionnement des éléments
- les couleurs et images de fond
Normes de base du Web - GTI780 & MTI780 - ETS - A08Claude Coulombe
Présentation sur les normes de base du Web dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'Ecole de technologie supérieure, Montréal, Automne 2008
Normes de base du Web GTI780 & MTI780 ETS A09Claude Coulombe
Présentation sur les normes de base du Web dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'Ecole de technologie supérieure, Montréal, Automne 2009
objectif général : Mettre en forme le contenu d’un site web
objectifs opérationnel :
Insérer du style dans une page HTML
• Donner du style aux caractères et au texte
• Choisir une image ou une couleur de fond
• Gérer l’espacement externe et interne des différents composants d’une page Web
• Dimensionner les éléments d’une page HTML
• Positionner les éléments d’une page Web
Cours CSS feuilles de style en cascade- mars 2015Abdoulaye Dieng
Objectif général : Mettre en forme le contenu d’un site web
Objectifs spécifiques :
Insérer du style dans une page HTML
Sélectionner du contenu dans une page Web
Donner du style aux caractères et au texte
Choisir une image ou une couleur de fond
Gérer l’espacement externe et interne des différents composants d’une page Web
Dimensionner les éléments d’une page HTML
Positionner les éléments d’une page Web
Voici une présentation sur l’HTML5 que j’ai réalisé pour l’entreprise Sfeir dans laquelle je travaille. Bien que vous n’ayez pas accès à tout le contenu retranscrit à l’oral, elle peut déjà vous apporter une synthèse assez complète de ce que cette technologie apporte.
Normes de base du Web GTI780 & MTI780 ETS A09Claude Coulombe
Présentation sur les normes de base du Web dans le cadre du cours combiné GTI780 / MTI780, Sujets spéciaux en TI, donné par Claude Coulombe, à l'Ecole de technologie supérieure, Montréal, Automne 2009
objectif général : Mettre en forme le contenu d’un site web
objectifs opérationnel :
Insérer du style dans une page HTML
• Donner du style aux caractères et au texte
• Choisir une image ou une couleur de fond
• Gérer l’espacement externe et interne des différents composants d’une page Web
• Dimensionner les éléments d’une page HTML
• Positionner les éléments d’une page Web
Cours CSS feuilles de style en cascade- mars 2015Abdoulaye Dieng
Objectif général : Mettre en forme le contenu d’un site web
Objectifs spécifiques :
Insérer du style dans une page HTML
Sélectionner du contenu dans une page Web
Donner du style aux caractères et au texte
Choisir une image ou une couleur de fond
Gérer l’espacement externe et interne des différents composants d’une page Web
Dimensionner les éléments d’une page HTML
Positionner les éléments d’une page Web
Voici une présentation sur l’HTML5 que j’ai réalisé pour l’entreprise Sfeir dans laquelle je travaille. Bien que vous n’ayez pas accès à tout le contenu retranscrit à l’oral, elle peut déjà vous apporter une synthèse assez complète de ce que cette technologie apporte.
HTML 4 pour les nuls » par E. Tittel, N. Pitts et C. Valentine
« HTML : précis et concis » par J. Niederst et J. Guérin au édition O’Reilly
« Introduction à HTML et CSS » par E. Sarrion au édition O’Reilly
« HTML et XHTML : La référence » de C. Musciano, B. Kennedy et J. Guérin au édition O’Reilly
N’importe quel autre bouquin sur HTML…
The document describes creating a "HelloWorld" SOA application using BPEL and NetBeans. It involves:
1) Designing a BPEL process to concatenate a received input string with "Hello" and return the result.
2) Creating a composite application that calls the BPEL process, passing an input string and receiving the output.
3) Testing the composite application by running a test case that passes "World!" as input and verifies the output is "Hello World!"
This document describes creating a RESTful web service using JAX-RS in NetBeans that returns a "Hello World" message. It introduces REST and JAX-RS, and outlines the steps to create a simple "HelloWorld" application that returns an HTML greeting. These steps include generating the RESTful web service from a pattern, implementing a GET method to return the message, and testing the service using the NetBeans web test client by making a GET request. The document concludes by assigning homework to create a currency conversion web service using REST.
The document discusses the need for enterprise service buses (ESBs) and their role in service-oriented architectures (SOAs). ESBs are needed to integrate heterogeneous information systems and ensure consistency across subsystems. They provide loose coupling between systems using standards-based integration. The document compares ESBs to other integration approaches like extract-transform-load tools, message-oriented middleware, and enterprise application integration, noting advantages of ESBs like separating mediation and orchestration roles. The key aspects of ESBs are that they provide a bus-like infrastructure to decouple applications and use adapters to transform data between application and canonical formats.
The document discusses service-oriented architecture (SOA). It begins by contrasting old architectures with new architectures, noting that new architectures reduce costs and complexity while improving availability, scalability, and reusability. It then defines some key characteristics of SOA services, such as being coarse-grained, interfacable, locatable, and loosely coupled. It also describes some common types of SOA services, such as presentation services, business services, and data access services. Finally, it outlines several principles of SOA, including standardized service contracts, loose coupling between services, service abstraction, reusability, autonomy, statelessness, discoverability, and composability.
This document defines and discusses e-services. It begins by defining e-services as services that are produced, provided, and consumed through information and communication technologies like the internet. It then discusses the benefits of e-services, including accessing larger customer bases and lowering costs. The main domains of e-services identified are e-business, e-government, e-learning, and e-health. Examples of each domain are provided. The document concludes by noting some disadvantages of e-services, such as the risks of data hacking and costs of ensuring high system performance and reliability.
2. 22/04/2017Ettaieb Abdessattar
● Les exemples que nous avons vu jusque là n’utilisent pas
de Styles.
● La présentation est adoptée par défaut et elle est très
basique.
● C’est normal XHTML ne s’occupe que du contenu d’un
document.
● La présentation est déléguée aux feuilles de style.
● Les styles peuvent être contenus directement dans le
document XHTML lui-même ou dans un ou plusieurs
document CSS séparé. Nous vous recommandons de
toujours utiliser un ou plusieurs document CSS séparé (un
par média par exemple)
3. 22/04/2017Ettaieb Abdessattar
● 1994 - Les styles ont été utilisés quasiment depuis le début
du WEB. Une License a été déposé par le W3C
garantissant l’usage libre des styles.
● 1996 - CSS Niveau 1 : contient les fonctionnalités
essentielles, telles que le formatage de texte, la
spécification des typographies et les marges.
● 1996-1998 - CSS Positioning : spécification intermédiaire
entre la norme 1 et la norme 2, permet le positionnement
précis des éléments sur la page.
4. 22/04/2017Ettaieb Abdessattar
● 1998 - CSS Niveau 2 : intègre les spécifications CSS-1 et
CSS-P, en y ajoutant des propriétés liées à l'accessibilité et
au type de média utilisé (écran, imprimante, dispositif
braille, TV, ...).
● 1999 - Un brevet intitulé "Style sheets for publishing
systems" a été déposé Microsoft, sans effet car la License
du W3C lui est antérieure.
● La version courante est CSS niveau 3. Parmi les grandes
nouveautés on peut citer le support du format SVG
permettant l'inclusion de formes vectorielles, le
LayoutModule permettant de composer une page selon un
modèle de grille (comme on le ferait avec des tableaux).
5. 22/04/2017Ettaieb Abdessattar
● Séparation des données et de la mise en forme
(présentation)
● Facilité de maintenance.
● Facilité de portage pour un autre site
● Simplification et lisibilité du code
● Uniformisation du code entre les pages du même site et
entre différents médias (e.g., impression, écran)
● Améliorer l’accessibilité
6. 22/04/2017Ettaieb Abdessattar
● Il y a deuxmanières d’associer des feuilles
styles à un document XHTML :
Usage de l’élément LINK
Usage de l’élément STYLE
● L’un ou l’autredes deux éléments doit être placé
dans l’élément
HEADER.
<link href= "css_url" media="all" rel="stylesheet" type="text/css" />
<style type="text/css">@import url("css_url"); </style>
7. 22/04/2017Ettaieb Abdessattar
● Comme le nom l’indique, les styles peuvent être “en
cascades”, i.e., la possibilité de combiner des déclarations
de styles externe, interne ou inline.
● La priorité est accordée à la déclaration la plus proche de
l’élément à styliser en cas de conflit sur une même
propriété
● Ordre décroissant de priorité : [feuille utilisatrice,] inline,
interne, externe.
● Un élément imbriqué hérite des propriétés de son/ses
parents, sauf les propriétés redéfinies pour cet élément.
● EXEMPLE : Si on déclare un élément BODY avec une
couleur de fond bleue, un paragraphe sans style
spécifique et dont le parent direct est la balise body aura
une couleur de fond bleue
8. 22/04/2017Ettaieb Abdessattar
● Une couleur en CSS est la combinaison des 3 couleurs
primaires (dans l’ordre) : le RED (rouge), le GREEN (vert)
et le BLUE (bleue) - RGB
● Chacune des composantes primaires
est indiquée par une valeur
comprise entre 0 et 255.
● La syntaxe de spécification des couleurs est :
#RRGGBB – RR, GG et BB étant des valeurs
hexadécimales (de 00 à FF) rgb (R, G, B) – R, G et B des
valeurs décimales (de 0 à 255)
rgb (R% , G% , B%) avec R, G et B des valeurs comprises entre
0 et 100
9. 22/04/2017Ettaieb Abdessattar
● La combinaison des valeurs entre 0 et 255 du rouge, du
vert et du bleu donne un total de plus de 16 millions de
couleurs différentes.
● color : indique la couleur du texte
● background-color : spécifie la couleur de fond
11. 22/04/2017Ettaieb Abdessattar
Pour toutes les données numériques (tailles de police, les
espaces entre paragraphes ou les marges) on dispose de :
● Données absolues:
pt pour point(= 1/72
pouce) pc pour
Pica(= 12 points) in
pour pouce (= 2,54
cm) mm pour
millimètre
cm pour centimètre
● Données relatives:
em pour "en relation avec la taille de police propre à l'élément"
ex pour "en relation avec la hauteur de la lettre x propre è
l´élément"
px pour pixel
15. 22/04/2017Ettaieb Abdessattar
LES SÉLECTEURS
● Sélecteur : “pattern” qui sélectionne l’élément ou le groupe
d’éléments sur lesquels va s’appliquer le style.
● Types de sélecteur possibles :
Une balise
Un nom de classe (introduit par .)
Un identifiant d’élément (introduit par #)
16. 22/04/2017Ettaieb Abdessattar
LES SÉLECTEURS
Sélecteur de type BALSE
balise {
propriete1 : valeur1 ;
propriete2 : valeur2 ;
}
Sélectionne tous les éléments
"balise"
EXEMPLE
p {
font-family:"Arial Narrow", Arial;
color:#0000FF;
background-color:#DDDDDD;
}
17. 22/04/2017Ettaieb Abdessattar
HTML: <element class="class-value">…</element>
CSS: .class-value {
...
}
LES SÉLECTEURS
Sélecteur de type nom de CLASS
.classe {
propriete1 : valeur1 ;
propriete2 : valeur2 ;
}
Tous les éléments HTML ont un
attribut class
18. 22/04/2017Ettaieb Abdessattar
EXEMPLE : exemple-
02.css
LES SÉLECTEURS
● Sélectionne tous leséléments de la
page dont l’attribut class vaut
class-value.
● Plusieurs éléments (et de balises
différentes) peuvent appartenir à la même classe
21. 22/04/2017Ettaieb Abdessattar
EXEMPLE : exemple-
03.css
85
LES SÉLECTEURS
● Sélectionne l’élément de la page dont l’attribut id
vaut tag-id.
● Unique pour chaque page !
23. 22/04/2017Ettaieb Abdessattar
RÈGLES D’APPARIEMENT
EXEMPLE : exemple-04.css
Sélecteur Appariement
E N’importe quel élément E
E F N’importe quel élément F qui est descendant de E
E > F N’importe quel élément F qui est enfant de E
E F N’importe quel élément F qui est immédiatement précédé de E
E[att=val] N’importe quel élément E ayant un a tribut att dont la valeur
est val
E.myclass N’importe quel élément E de la classe myclass
#myid L’élément dont l’id est myid
24. 22/04/2017Ettaieb Abdessattar
● Des pseudo-éléments sont des éléments dans un fichier
HTML qui ne sont pas clairement définis.
● Pseudo-formats sur les liens :link, :visited, :hover,
:active, :focus.
● Pseudo-formats sur les paragraphes :first-line, :first-
letter, :first-child.
● Pseudo-formats pour le texte généré automatiquement
:before,
:after.
● Pseudo-formats pour la numérotation automatique.
28. 22/04/2017Ettaieb Abdessattar
EXEMPLE : exemple-06.css et
exemple-07.css
● font-family: times, arial, serif, sans-serif,
monospace;
● font-style: normal | italic | oblique;
● font-weight: normal | bold | bolder | lighter |
100 –900
● font-size: size;
29. 22/04/2017Ettaieb Abdessattar
● text-indent: indentation de la première ligne d’un
paragraphe.
● text-align: right | left | center | justify;
● text-decoration: none | underline | overline | line-through
● text-transform: none | capitalize | uppercase |lowercase;
● line-height: ajuste l’espace verticalpour chaque
ligne de texte en fonction de la taille de la
police de caractères.
EXEMPLE : exemple-06.css et exemple-07.css