Les pages Web 
en HTML et CSS 
Webdesign 
Olivier Dommange
Olivier Dommange 
La charte graphique 
Régularise la composition 
et les aspects graphiques 
Elle dispose des dimensions d...
Olivier Dommange 
La charte graphique 
Régularise la composition 
et les aspects graphiques 
Elle dispose des informations...
Olivier Dommange 
La charte graphique 
Régularise la composition 
et les aspects graphiques 
Elle présente l’espace 
color...
Olivier Dommange 
La charte graphique 
Régularise la composition 
et les aspects graphiques 
Elle présente les états de su...
Olivier Dommange 
La charte graphique 
Régularise la composition 
et les aspects graphiques 
Expose les transformations de...
Olivier Dommange 
Les étapes 
de réalisation
Olivier Dommange 
L'organisation d'un projet 
Le fichier HTML rassemble 
les autres fichiers 
Des liens relatifs lient les...
Olivier Dommange 
HTML : Les principes d'utilisation 
HTML, un langage d’identification 
Le HTML est un système d’imbricat...
Olivier Dommange 
CSS : Les principes d'utilisation 
Donne la forme visuelle à la 
page et son contenu 
Le CSS complète le...
Olivier Dommange 
La mise en page 
HTML : Identifier les zones 
de la mise en page 
Le HTML dispose dorénavant d’un plus 
...
Olivier Dommange 
La mise en page 
CSS : Donner du volume et mettre 
en page les zones 
Les éléments dans une page influen...
Olivier Dommange 
La mise en forme 
HTML : Identifier les 
contenus 
Imposer sémantiquement les balises 
aux contenus de m...
Olivier Dommange 
Le référencement naturel 
A-t-on bien identifier les 
contenus de la page ? 
Les moteurs de recherche id...
Olivier Dommange 
La mise en forme 
CSS : Corriger les propriétés 
imposées par les navigateurs 
La plupart des balises HT...
Olivier Dommange 
Les menus 
Des rubiques cliquables... 
La composition d’un menu en HTML 
devrait être sous forme de list...
Olivier Dommange 
Responsive design 
Définir les formats 
Les « media queries » permettent à la page de 
conditionner la m...
Olivier Dommange 
Démarrer un projet de page Web 
Une solution qui facilite l’insertion d’outils 
annexes à un projet Web....
Olivier Dommange 
http://www.linkedin.com/in/olivierdommange
Prochain SlideShare
Chargement dans…5
×

La page web en html css

984 vues

Publié le

Processus de réalisation et de transformation d'une maquette de site Web en page Web. Analyse de la charte graphique d'un site et de ses composantes. Description du rôle et des étapes de création d'une page Web.

Publié dans : Design
0 commentaire
3 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
984
Sur SlideShare
0
Issues des intégrations
0
Intégrations
113
Actions
Partages
0
Téléchargements
47
Commentaires
0
J’aime
3
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

La page web en html css

  1. 1. Les pages Web en HTML et CSS Webdesign Olivier Dommange
  2. 2. Olivier Dommange La charte graphique Régularise la composition et les aspects graphiques Elle dispose des dimensions des zones de contenus qui permettront la transformation de la maquette en page Web et mobile.
  3. 3. Olivier Dommange La charte graphique Régularise la composition et les aspects graphiques Elle dispose des informations typographiques (police, taille, couleur, graisse, interlignage et effets) qui définiront la mise en forme.
  4. 4. Olivier Dommange La charte graphique Régularise la composition et les aspects graphiques Elle présente l’espace colorimétrique des interfaces.
  5. 5. Olivier Dommange La charte graphique Régularise la composition et les aspects graphiques Elle présente les états de survol, enfoncés et actifs des boutons et des liens.
  6. 6. Olivier Dommange La charte graphique Régularise la composition et les aspects graphiques Expose les transformations de l’interface pour les différents supports mobiles.
  7. 7. Olivier Dommange Les étapes de réalisation
  8. 8. Olivier Dommange L'organisation d'un projet Le fichier HTML rassemble les autres fichiers 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 : Les feuilles de style CSS Les scripts en Javascript Les images, vidéos et audios. Les outils tiers incorporés dans les balises <iframe>.
  9. 9. Olivier Dommange HTML : Les principes d'utilisation HTML, un langage d’identification 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. 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”>
  10. 10. Olivier Dommange CSS : Les principes d'utilisation Donne la forme visuelle à la page et son contenu Le CSS complète le HTML en formatant l’apparence des espaces, objets et contenus qui composent la page Web. 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.
  11. 11. Olivier Dommange La mise en page HTML : Identifier les zones de 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. 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.
  12. 12. Olivier Dommange La mise en page CSS : Donner du volume et mettre en page les zones 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. 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.
  13. 13. Olivier Dommange La mise en forme HTML : Identifier les contenus Imposer sémantiquement les balises aux contenus de manière à identifier leur nature. 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).
  14. 14. Olivier Dommange Le référencement naturel A-t-on bien identifier les contenus de la page ? 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. 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.
  15. 15. Olivier Dommange La mise en forme CSS : Corriger les propriétés imposées par les navigateurs La plupart des balises HTML de mise en forme disposent d’un formatage à corriger.
  16. 16. Olivier Dommange Les menus Des rubiques cliquables... La composition d’un menu en HTML devrait être sous forme de liste (<ul>). 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.
  17. 17. Olivier Dommange Responsive design Définir les formats Les « media queries » permettent à la page de conditionner la mise en page et la mise en forme en fonction de la taille du support. 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
  18. 18. Olivier Dommange Démarrer un projet de page Web Une solution qui facilite l’insertion d’outils annexes à un projet 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
  19. 19. Olivier Dommange http://www.linkedin.com/in/olivierdommange

×