accueil — cégep du vieux montréal (partie 1 ) -2020.docx · web viewles « nouvelles » balises...
Post on 06-Aug-2020
1 Views
Preview:
TRANSCRIPT
1
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
Cours 420-B53-IN
Programmation en environnement graphique
Recueil d’annexes ( Partie 1 )Par É. Labonté
2
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
ANNEXE 1 – Éléments de base d’une page HTML5
1. INTRODUCTION A. L’évolution : HTML4 XHTML HTML5
3
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
B. HTML5 : un seul type de document possible : <doctype>
C. Squelette de base d’une page :
2.PRINCIPALES BALISES HTML5
A)Balises à placer dans l’entête :
<title>
<meta>
4
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
<link>, <style>
<script>
B)Balises de bloc : débutent et se terminent généralement par une ligne vide
i) Titres ( <h1> à <h6> ) ii) <p> : paragrapheiii) <blockquote> : paragraphe en retrait iv) <div> : pour déterminer des sections v) <table> vi) les « nouvelles » balises html5 : <canvas>, <video>,
<header>, <footer>, <aside>, <section>, <nav>, <main>
vii) les listes :C)Balises de liste
Liste ordonnée Liste non-ordonnée
Liste de définitions
Bloc <ol> </ol> <ul></ul> <dl></dl>Items <li></li> <li></li> <dt></dt>Définition d’un item
<dd></dd>
EXERCICE 1 : Reproduisez cette page sous le nom Velo1.html en utilisant un fichier HTML5
5
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
D) Balises de liens
Lien absolu vers un URL externe : __________________________________
Lien relatif ( vers une page de notre site ) : __________________________
EXERCICE 2 :
Ajoutez une section « Nos succursales » avec les 2 succursales, leurs adresses et le petit texte d’accompagnement tel que présenté ci-haut.
6
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
Créez des liens absolus vers une carte localisant la succursale ( utilisez www.maps.google.com et l’option Partager)
Sauvegardez sous le nom Velo2.html
Notes ergonomiques :o L’ancre de votre lien hypertexte doit être explicative
( évitez les cliquez ici)o La couleur bleue est presque devenue une couleur
d’office pour les liens hypertextes, lire le document de Pascal Pelletier dont le lien est sur mon site
Le consortium W3C fournit un outil permettant de valider du code HTML5, il est important de soumettre notre code à ce validateur afin de s’assurer que notre code suit la syntaxe HTML5. L’adresse du site est : http://validator.w3.org/
E. Alternatives souhaitables à la balise <div>
En HTML5, le choix d'instaurer de nouvelles balises est venu d'un besoin de rendre le HTML plus descriptif, plus sémantique au lieu d'utiliser le bloc <div> à toutes les sauces. On peut identifier plus rapidement les sections d'une page.
Ian Hickson, un des développeurs les plus cités dans l'avènement du HTML5, s'est inspiré de statistiques comptabilisées par Google sur un nombre énorme de pages web.
Les noms de classes les plus fréquents étaient : ____________________________________
Le navigateur Opera a fait des statistiques similaires au niveau des ids. Les plus fréquents étaient : _______________________________________________
La création de nouvelles balises/éléments permet ainsi l'uniformisation de la structure des pages en éliminant la barrière des langues dans les
7
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
noms des classes/ids. De plus, permet plus de latitude dans l’élaboration des sélecteurs ( au lieu d’utiliser plein de classes )
Modèle de page
Page Classique : Identifiez les blocs et déclarer la CSS pour le positionnement
CSS: _____________________________________
_________________________________________
__________________________________________
___________________________________________
___________________________________________
Page avec nouvelles balises HTML5 :
CSS: _______________________________________
___________________________________________
___________________________________________
___________________________________________
__________________________________________
8
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
Autre exemple :
IMPORTANT ( pour les anciens navigateurs ) : ___________________________________
________________________________________________________________________
Solution : ________________________________________________________________________
Des balises en détail :
<header> : pas utile si on a qu'un <h1> dans la page peut regrouper:
o _____________________o _____________________o _____________________
Un bloc <header> peut également se retrouver au début d'un bloc <div> ou d'un bloc <section>
les distinguer :
9
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
<main> : _______________________________________________________________
Sites à page unique : ______________________________________________________
________________________________________________________________________
________________________________________________________________________
<section> / <article>
Différence entre les deux : __________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
*** Une section peut contenir des articles
<aside> : ______________________________________________________________
_______________________________________________________________________
*** <div> conserve son importance :_________________________________________
________________________________________________________________________
ANNEXE 2 – Les feuilles de styles ( CSS )
10
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
Une feuille de style contient des instructions sur différents éléments visuels d’une page web ( police, positionnement d’éléments, couleurs, etc. ) qui seront appliqués à une page HTML
Standard W3C depuis 1996 mais a tardé à prendre son essor car les navigateurs de l’époque ne supportaient pas les feuilles de style.
CSS3 développé par modules (contrairement aux versions précédentes ) : on a conservé les anciennes façons de faire et on ajoute de nouveaux modules ( work in progress... ). Les modules sont approuvés individuellement par le W3C. Les navigateurs mettent en œuvre ces modules graduellement ( site canIuse utile )
nouveautés CSS3 : transformations dans l'espace, bordures, animations, @font-face…certaines de ces nouveautés sont considérées CSS4
Avantages des CSS par rapport au formatage direct dans le code HTML:
o ______________________________________________
o ______________________________________________
______________________________________________
o ______________________________________________
Les feuilles de styles peuvent changer totalement l’apparence d’une page web visiter le site www.csszengarden.comUne bonne pratique est donc de confiner le contenu informatif au HTML et de coder toute l’apparence de la page dans les CSS.
11
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
1. Différents types d’application d’une CSSA) Attribut style appliqué à un élément précis ( balise )
Ex : ____________________________________________________
B) Un style déclaré dans l’entête d’une page HTML5 ( style interne )
Squelette :
C) Un style codé dans un fichier CSS ( style externe )
Les styles CSS servent entre autres à attribuer des couleurs à une page HTML.2. Les couleurs Schémas généraux de couleur :
RGB : _______________________________________________________
_______________________________________________________
12
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
Synthèse additive : ______________________________________________________________________________________________
CMJN : ______________________________________________________
Synthèse soustractive : ____________________________________________________________________________________________
TSL : ________________________________________________________
Différents formats :
A) RGB / RGBA : _________________________________
B) Noms : ________________________________
C) Plus répandue code hexadécimal :
Exemple : 0A004E R = ____ V = ____ B = _____
13
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
D) opacité ( propriété opacity ) : s'applique à l'ensemble du sélecteur ( texte et couleur de fond par exemple )
E) Outil : ColorSchemeDesigner ( paletton.com )
3. Les propriétés relatives aux dimensions (des polices de caractères, entre autres )
A) font-weight, font-style…B) font-size : plusieurs unités possibles Unités absolues
en pt, en cm, en mm : en vue de l’impression en texte ( xx-small, x-small.. ) dépendant du
navigateur pour l’interprétation en pixels dépend de la résolution de l’écran, le W3C
décourage son utilisation en raison du web adaptatif et de l’accessibilité ( grands caractères )
Unités relatives
en em
____________________________________________________________
____________________________________________________________
Exception : ___________________________________________________
____________________________________________________________
14
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
si l’internaute n’a pas changé la taille des caractères du navigateur 1em = 16 px
*** Attention aux balises imbriquées, la grosseur des caractères s’en ressent :EX : <style type="text/css">body {font-size:2em;}p{font-size:1.5em;}</style>
Quelle sera la taille approximative en pixels du texte à l’intérieur de la balise <p> ?
On peut utiliser les ems pour d’autres dimensions :EX2 :h1{font-size :2em;margin-bottom : 1em;}p{font-size : 1em;margin-bottom: 1em;}
Quelle sera la valeur en pixels de la propriété margin-bottom dans les deux règles CSS ( en supposant que l’usager n’a pas modifié les paramètres de son navigateur ) ?
15
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
_____________________________ ________________________________
*** Attention également aux balises de titre qui modifient les tailles de base*** Attention l’usager peut avoir changer la taille par défaut des caractères, la règle de 16 px n’existe plus à ce moment le tester
***Peut devenir embrouillant ! solution : rem : ________________________________________________________________________________________________
Truc pour travailler plus facilement en rem :
en pourcentage :
en vh, vw :
C) font-family : ex. : Arial, Verdana, sans-serif
familles :
16
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
serif ( empattement )sans-serifmonospace
Meilleures polices créées pour les écrans : Verdana ( sans-serif ) , Georgia ( serif ). Les polices sans serif se lisent mieux à l’écran.
** si nom de police a 2 mots ( propriété font-family ) , le mettre entre guillemets
D) Propriétés CSS héritées des éléments-parent
E) Pour intégrer une police à une page web L’utilisation d’une police de caractères originale y est pour beaucoup dans l’élaboration d’un design accrocheur pour votre site web. Avec CSS3, il est plus facile d’intégrer des polices originales plutôt que de toujours s’en tenir aux polices installées de base sur les ordinateurs des internautes.La règle @font-face
17
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
Autre solution : les fonts de Google (https://www.google.com/fonts )
*** Attention , balise font sournoise :
__________________________________________________________________
__________________________________________________________________
4. Exercice :À partir de votre dernière version de VeloSport (fin de l’Annexe 2, Velo2 ), sauvegardez sous Velo4.html et ajoutez un style interne à la page qui permettra de :
A) Associer une police sans serif à l’ensemble de la pageB) Associer la couleur blanche au titre et trouvez une couleur
de fond qui vous convient pour le titre « boutiques VeloSport »
C) Trouvez une police de caractères gratuite sur internet et utiliser la règle @font-face afin de l’appliquer au titre et aux sous-titres de la page
D) Associer la couleur blanche pour le texte des deux sous-titres et trouver, à l’aide de Paletton.com, une teinte similaire à celle de B) pour la couleur de fond de ces deux sous-titres. Associez une opacité de 70% à ces deux blocs.
E) Associer aux définitions des items de la liste une police italique
F) Faites-en sorte que les puces de la liste soient des cercles vides
G) À l’aide d’une règle CSS appropriée, centrer le texte du titreH) Quelle est la taille de base en pixels du texte du bloc
<h1> ? _________I) Trouvez une formule utilisant les unités vw et px qui fera en
sorte que la taille des caractères du titre <h1> soit à présent dynamique en fonction de la largeur de la fenêtre du navigateur. À une largeur de 1440 px, la taille des caractères sera 50px et devra diminuer progressivement
18
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
pour atteindre 32px lorsque la largeur de la fenêtre est de 768px.
*** vous pouvez utiliser l’opérateur calc( ) pour faire un calcul
Annexe 3 éléments blocs, éléments inline, classes et id...
--> Utilisez le fichier Industrie.html dans LÉA1. éléments blocs
Principaux éléments blocs : ___________________________________________
Les éléments blocs commencent et terminent par un saut de ligne et occupent tout l’espace horizontal disponible ( par rapport à son parent )
bloc <div> :
permet de définir une zone qui aura un formatage particulier
utile pour le design d'une page ( remplace les tables old school )
19
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
depuis HTML5, plusieurs nouvelles balises permettent de mieux déterminer le contenu d’une section d’un page ( faire attention à la sémantique )
EX A ) Modifiez la section Faits avec une css interne de manière à ce qu'elle soit écrite en rouge avec une grandeur de caractère légèrement supérieure à la normale.2. éléments inline
principaux éléments inline : ___________________________________________* les éléments inline ne commencent ( et ne terminent ) pas par un saut de ligne contrairement aux éléments blocs.* les éléments inline contiennent du texte ou d’autres éléments inline* les éléments inline prennent uniquement la largeur nécessaire pour afficher leur contenu. Pour transformer un élément bloc en élément inline : _______________________Pour transformer un élément inline en élément bloc : _______________________
EX B ) transformez les balises <li> en élément inline à l'aide d'une règle CSSBalise <span> : ________________________________________
_________________________________________
EX C) Placez la 2ème phrase du premier paragraphe en gras
20
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
3. display:inline-block, display :inherit
4. Page à layout fixe centré
layout de base, peu adaptatif page Industrie.html actuelle, lignes de texte trop longues,
nuisent à la lecture ( on essaie de suivre règle 40-70 caractères par ligne )
Comment faire ?
problème : <div> est déjà utilisé
solution : sélecteurs class et id ( ne peuvent pas commencer par un chiffre ! )
Symbole css
Attribut balise html
particularité Priorité des opérateurs
21
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
class
id
EX D) Rendre la page Industrie.html avec un layout fixe et centré assignez le id "rouge" au <div> précédent assignez le id "centre" au <div> englobant
centrer un bloc :
propriété background-image:
Alternative :
5. Question quasi-existentielle : choisir un class ou un id ?
Réponse simple : ________________________________________________________________________________________________________________________________________________________________________________________
22
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
Points à considérer :________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________________Autres alternatives : technique BEM ( Block Element Modifier )
Sélecteurs complexes : on verra plus tard
5. CSS externe Énoncer les sélecteurs dans un fichier avec extension .css Faire le lien entre le fichier .css et le fichier .html à l'aide de
la balise <link> dans l'entête de la page ( au lieu de <style> )
<link href="pagecss.css" rel="stylesheet" type="text/css"/>
On peut tester également nos fichiers CSS avec un validateur sur le site W3C : css validator dans Google
23
© Eric Labonté, Département d’informatique, Cégep du Vieux Montréal
EX E) Changer l'emplacement de la CSS vers un fichier externe ( dans un dossier CSS ) . Valider la CSS ainsi produite.
@import :
top related