accueil — cégep du vieux montréal (partie 1 ) -2020.docx · web viewles « nouvelles » balises...

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


ANNEXE 1 – Éléments de base d’une page HTML5

1. INTRODUCTION A. L’évolution : HTML4 XHTML HTML5

3


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


<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


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


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


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


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


<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


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.

http://caniuse.com/

11


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


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


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


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


_____________________________ ________________________________

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


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


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


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


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


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


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


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


EX E) Changer l'emplacement de la CSS vers un fichier externe ( dans un dossier CSS ) . Valider la CSS ainsi produite.

@import :

accueil — cégep du vieux montréal (partie 1 ) -2020.docx · web viewles « nouvelles » balises...

Documents