la page web en html css
TRANSCRIPT
Les pages Weben HTML et CSS
Webdesign
Oliv
ier D
omm
ange
Oliv
ier D
omm
ange
La charte graphique
Elle dispose des dimensions des zones de contenus qui permettront la transformation de la maquette en page Web et mobile.
Régularise la composition et les aspects graphiques
Oliv
ier D
omm
ange
La charte graphique
Elle dispose des informations typographiques (police, taille, couleur, graisse, interlignage et effets) qui définiront la mise en forme.
Régularise la composition et les aspects graphiques
Oliv
ier D
omm
ange
La charte graphique
Elle présente l’espace colorimétrique des interfaces.
Régularise la composition et les aspects graphiques
Oliv
ier D
omm
ange
La charte graphique
Elle présente les états de survol, enfoncés et actifs des boutons et des liens.
Régularise la composition et les aspects graphiques
Oliv
ier D
omm
ange
La charte graphique
Expose les transformations de l’interface pour les différents supports mobiles.
Régularise la composition et les aspects graphiques
Oliv
ier D
omm
ange
Les étapesde réalisation
Oliv
ier D
omm
ange
L'organisation d'un projet
Des liens relatifs lient les fichiers du projet au document HTML. Les ressources distantes impliquent un lien absolu (adresse URL complète).Les éléments liés au fichier HTML sont :
Le fichier HTML rassemble les autres fichiers
Les feuilles de style CSSLes scripts en JavascriptLes images, vidéos et audios.Les outils tiers incorporés dans les balises <iframe>.
Oliv
ier D
omm
ange
HTML : Les principes d'utilisation
Le HTML est un système d’imbrication de contenus identifiés par les balises qui l’entourent.Les balises HTML disposent d’attributs qui permettent de leur donner une forme spécifique ou de les identifier.
HTML, un langage d’identification
Une balise qui s’ouvre, se ferme (par le même nom de balise avec le symbole «slash» devant (ex. : </p>). Quelques balises échappent à cette règle (<img>, <input>, <br>, <link>, <meta>,...).Les attributs s’insèrent dans la balise d’ouverture (ex. : <div id=”page”>
Oliv
ier D
omm
ange
CSS : Les principes d'utilisation
Le CSS complète le HTML en formatant l’apparence des espaces, objets et contenus qui composent la page Web.
Donne la forme visuelle à la page et son contenu
Les sélecteurs, identifient les éléments HTML dont l’apparence sera altérée.Énumération de propriétés CSS qui conditionnent l’apparence de la page.Le “Responsive design” est possible grâce au CSS.Les navigateurs imposent un formatage CSS par défaut.
Oliv
ier D
omm
ange
La mise en page
Le HTML dispose dorénavant d’un plus grand nombre de balises pour identifier les zones de la mise en page.
HTML : Identifier les zones de la mise en page
Identifier les zones à l’aide des balises <main>, <section>, <header>. <footer>, <aside>, <article>, <nav>, <menu> et <div>.Envisager l’ordre d’apparition des balises en fonction du résultat sur les supports mobiles.
Oliv
ier D
omm
ange
La mise en page
Les éléments dans une page influence mutuellement leur mise en page. Une zone se positionne en fonction du flux de la page. Sa position se définit par l’espace qu’occupe les éléments qui le précède et les limites de son contenant.
CSS : Donner du volume et mettre en page les zones
Définir la dimension des zones.Habiller le fond des zones (images, couleurs ou dégradés)Positionner grâce aux marges imposées et à la propriété “float” qui permet de positionner deux blocs côte-à-côte.
Oliv
ier D
omm
ange
Imposer sémantiquement les balises aux contenus de manière à identifier leur nature.
HTML : Identifier les contenus
Identifier les titres, les paragraphes et les listes.Insérer les images, vidéos et sons faisant parties des contenus.Créer les composants complémentaires (formulaires et tableaux).
La mise en forme
Oliv
ier D
omm
ange
Les moteurs de recherche identifient les contenus de la page grâce aux balises de mise en forme. Elles informent de la priorité à donner aux mots-clés.
A-t-on bien identifier les contenus de la page ?
Les balises <h1>-<h6>, <p>, <ul>, <ol>, <img> sont utilisées à bon escient.Les titres des images et des contenus sont descriptifs (et les espaces sont remplacés par des tirets).Des descriptifs sont indiqués aux images et aux liens.Chaque page dispose d’un titre et d'une description unique.
Le référencement naturel
Oliv
ier D
omm
ange
La plupart des balises HTML de mise en forme disposent d’un formatage à corriger.
CSS : Corriger les propriétés imposées par les navigateurs
La mise en forme
Oliv
ier D
omm
ange
La composition d’un menu en HTML devrait être sous forme de liste (<ul>).
Des rubiques cliquables...
Il s’agit d’une liste de rubriques.La représentation HTML de blocs dans des blocs d’une liste offre toute la souplesse pour conditionner l’apparence du menu avec CSS quelque soit sa forme.
Les menus
Oliv
ier D
omm
ange
Les « media queries » permettent à la page de conditionner la mise en page et la mise en forme en fonction de la taille du support.
Définir les formats
La dimension et le positionnement des zones de contenus.La taille des caractères.L’optimisation des images.La réorganisation des outils de navigation
Responsive design
Oliv
ier D
omm
ange
Une solution qui facilite l’insertion d’outils annexes à un projet Web.
Démarrer un projet de page Web
Utilise la librairie « modenizr » qui harmonise la fonctionnement du HTML 5 sur les différents navigateurs.Propose les outils de référencement et statistiques courants qu’un projet en ligne devrait disposer.Propose des icônes des différents formats et supports.Propose des outils annexes fréquents dans les projets Web (jQuery et Bootstrap).
Initializr
http://www.linkedin.com/in/olivierdommange
Olivier Dommange