Share
Dans ce didacticiel, nous allons créer une page de blog en utilisant les techniques de nouvelle génération HTML HTML 5 et CSS 3. Ce didacticiel vise à montrer comment nous construirons des sites Web lorsque les spécifications seront finalisées et que les éditeurs de navigateurs les ont mises en œuvre. Si vous connaissez déjà HTML et CSS, il devrait être facile de suivre.
Avant de commencer, envisagez d'utiliser l'un de nos modèles HTML5 ou de nos thèmes CSS pour votre prochain projet, c'est-à-dire si vous avez besoin d'une solution rapide et professionnelle. Ou vous pouvez essayer l’un des développeurs expérimentés d’Envato Studio qui peut vous aider avec un large éventail de projets HTML5 et CSS personnalisés..
Sinon, il est temps de creuser ces techniques.
HTML 5 est la prochaine version majeure de HTML. Il introduit un tas de nouveaux éléments qui rendront nos pages plus sémantiques. Les moteurs de recherche et les lecteurs d’écran auront ainsi beaucoup plus de facilité à naviguer dans nos pages et à améliorer l’expérience Web pour tous. De plus, HTML 5 comprendra également des API sophistiquées permettant de dessiner des graphiques à l'écran, de stocker des données hors connexion, de glisser-déposer et bien plus encore. Commençons à baliser la page du blog.
Avant de commencer à marquer la page, nous devrions avoir une structure claire:
En HTML 5, il existe des balises spécifiques destinées à baliser l'en-tête, la navigation, la barre latérale et le pied de page. Tout d'abord, jetez un coup d'œil au balisage et je vous expliquerai plus tard:
Titre de la page Titre de la page
Cela ressemble toujours au balisage HTML, mais il y a quelques points à noter:
Au lieu d'utiliser divs pour contenir différentes sections de la page, nous utilisons maintenant des balises sémantiques appropriées. Les moteurs de recherche et les lecteurs d’écran auront beaucoup plus de facilité à comprendre le contenu d’une page..
La navigation est balisée exactement comme nous le ferions en HTML 4 ou XHTML, en utilisant une liste non ordonnée. La clé est que cette liste est placée dans les balises de navigation.
Nous avons déjà défini une nouvelle section dans le document à l'aide de la balise section. Maintenant nous avons juste besoin de contenu.
Aimez-vous les fleurs autant que nous?
Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
Nous ajoutons un identifiant à la balise section afin de pouvoir l'identifier ultérieurement lors du styling. Nous utilisons la balise header pour envelopper l'élément h2 d'introduction. En plus de décrire un document entier, la balise header devrait également être utilisée pour décrire des sections individuelles.
Notre domaine de contenu principal comprend trois sections: le post de blog, les commentaires et le formulaire de commentaire. En utilisant nos connaissances sur les nouvelles balises structurelles en HTML 5, il devrait être facile de les marquer..
Passez par le balisage et j'expliquerai les nouveaux éléments par la suite.
Ceci est le titre d'un article de blog
Posté sur par Mads Kjaer - 3 commentaires
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Apprécier euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Apprendre à connaître, Ultricies eu pharetra dictum, laoreet id odio…
Nous commençons une nouvelle section et encapsulons l'intégralité de l'article de blog dans un tag article. La balise article est utilisée pour désigner une entrée indépendante dans un blog, une discussion, une encyclopédie, etc., et est idéale à utiliser ici. Étant donné que nous visionnons les détails d'un article, nous n'en avons qu'un, mais sur la page d'accueil du blog, nous envelopperions chaque article dans une balise article..
L'élément d'en-tête est utilisé pour présenter l'en-tête et les métadonnées concernant l'article du blog. Nous disons à l'utilisateur quand le message a été écrit, qui l'a écrit et combien de commentaires il a. Notez que l'horodatage est encapsulé dans une -tag. Cette balise est également nouvelle dans HTML 5 et est utilisée pour marquer un endroit spécifique dans le temps. Le contenu de l'attribut datetime doit être:
Marquer les commentaires est assez simple. Aucune nouvelle balise ou attribut n'est utilisé.
commentaires
George Washington sur Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
Benjamin Franklin sur Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.
Plusieurs améliorations ont été apportées aux formulaires dans HTML 5. Plus besoin de valider des champs, des courriels, etc. du côté client, côté client. Le navigateur s'en charge pour vous..
Il y a deux nouveaux types d'entrées, email et url. Email spécifie que l'utilisateur doit entrer un email valide, et l'URL que l'utilisateur doit entrer une adresse de site Web valide. Si vous écrivez requis en tant qu'attribut, l'utilisateur ne peut pas soumettre de champ vide. "Obligatoire" est un attribut booléen, une nouveauté de HTML 5. Cela signifie simplement que l'attribut doit être déclaré sans valeur..
Le balisage de la barre latérale et du pied de page est extrêmement simple. Quelques sections avec du contenu à l'intérieur des balises side et footer appropriées.
Vous pouvez voir le balisage final, sans style, ici. Maintenant pour le style.
CSS 3 repose sur les principes concernant les styles, les sélecteurs et la cascade que nous connaissons si bien des versions précédentes de CSS. Il ajoute de nombreuses nouvelles fonctionnalités, notamment de nouveaux sélecteurs, pseudo-classes et propriétés. En utilisant ces nouvelles fonctionnalités, il devient beaucoup plus facile de configurer votre mise en page. Plongeons dedans.
Pour commencer, nous allons définir quelques règles de base concernant la typographie, la couleur de fond de la page, etc. Vous reconnaitrez tout cela à partir de CSS 2.1
/ * Réinitialisation CSS Makeshift * / margin: 0; rembourrage: 0; / * Indique au navigateur de rendre les éléments HTML 5 sous forme de bloc * / en-tête, pied de page, côté, navigation, article display: block; body margin: 0 auto; largeur: 940px; police: 13px / 22px Helvetica, Arial, sans serif; arrière-plan: # f0f0f0; h2 font-size: 28px; hauteur de ligne: 44px; rembourrage: 22px 0; h3 font-size: 18px; hauteur de ligne: 22px; remplissage: 11px 0; p padding-bottom: 22px;
Tout d'abord, nous réinitialisons les styles de marge et de remplissage avec une règle simple. Dans un environnement de production, j’utiliserais une réinitialisation CSS plus complète, telle que celle d’Eric Meyer (pour CSS 2.1), mais cela suffirait pour la portée du tutoriel..
Nous demandons ensuite au navigateur de rendre tous les nouveaux éléments HTML 5 sous forme de bloc. Les navigateurs acceptent les éléments qu’ils ne reconnaissent pas (c’est pourquoi HTML 5 est quelque peu compatible avec les versions antérieures), mais ils ne savent pas comment ces éléments doivent être restitués par défaut. Nous devons leur dire ceci jusqu'à ce que la norme soit mise en œuvre à tous les niveaux.
Notez également que j'ai choisi de redimensionner les polices en pixels au lieu de ems ou%. Cela permet de maintenir la nature progressive du didacticiel. Lorsque les principaux navigateurs auront fini de mettre en œuvre HTML 5 et CSS 3, nous aurons tous accès au zoom de la page au lieu du simple redimensionnement du texte. Cela évite de définir des tailles en unités relatives, car le navigateur redimensionnera quand même la page..
Voir à quoi ressemble la page avec le style de base appliqué. Nous pouvons maintenant passer au styling du reste de la page. Aucun style supplémentaire n'est requis pour l'en-tête, nous allons donc passer directement à la navigation..
Il est important de noter que la largeur du corps a été définie à 940 pixels et qu’elle a été centrée. Notre barre de navigation doit couvrir toute la largeur de la fenêtre, nous devrons donc appliquer quelques styles supplémentaires:
Accentsconagua
nav position: absolute; gauche: 0; largeur: 100%; fond: url ("nav_background"); Nous positionnons absolument l'élément de navigation, l'alignons à gauche de la fenêtre et le faisons s'étendre sur toute la largeur. Nous allons centrer la liste imbriquée pour l'afficher dans les limites de la présentation:
nav ul margin: 0 auto; largeur: 940px; style de liste: aucun;
Nous allons maintenant définir quelques styles supplémentaires pour rendre les éléments de navigation plus beaux et les aligner sur la grille sur laquelle la présentation est basée. J'ai également inclus un style permettant de mettre en évidence la page sur laquelle l'utilisateur se trouve et un style personnalisé pour le lien d'abonnement..
nav ul li float: left; nav ul li a display: block; marge droite: 20px; largeur: 140px; taille de police: 14px; hauteur de ligne: 44px; text-align: center; texte-décoration: aucun; couleur: # 777; nav ul li a: hover color: #fff; nav ul li.selected a color: #fff; nav ul li.subscribe a margin-left: 22px; padding-left: 33px; text-align: left; background: url ("rss.png") centre gauche non répétée; Le balisage pour l'introduction est assez simple: une section avec un en-tête et un paragraphe de texte. Cependant, nous utiliserons de nouvelles astuces CSS 3 pour le rendre plus attrayant..
#intro margin-top: 66px; rembourrage: 44px; background: # 467612 url ("intro_background.png") repeat-x; taille du fond: 100%; border-radius: 22px; Nous utilisons deux nouvelles propriétés. Le premier est la taille de l'arrière-plan, ce qui vous permet de redimensionner l'image d'arrière-plan. Dans notre cas, nous l’échelonnons à 100% sur les deux axes. Si la zone s'agrandit à mesure que nous ajoutons du contenu, l'arrière-plan en dégradé sera également mis à l'échelle. C’est quelque chose qui n’était pas possible dans CSS 2.1 sans balisage non sémantique et problèmes divers de navigateur.
La deuxième nouvelle propriété est border-radius, qui applique des coins arrondis à l'élément. Le rayon de nos coins arrondis est 22px dans chaque coin. Vous pouvez spécifier différentes valeurs pour chaque coin ou choisir de ne arrondir que des coins individuels..
Malheureusement, aucune des propriétés n'est entièrement implémentée dans les principaux navigateurs. Cependant, nous pouvons obtenir une assistance en utilisant des attributs spécifiques au fournisseur. La taille de l'arrière-plan est prise en charge par les nouvelles versions de Safari, Opera et Konqueror. Border-radius est supporté par les nouvelles versions de Safari et Firefox.
#intro … / * Taille de l'arrière-plan non encore implémentée * / /webkit-background-size: 100%; -o-background-size: 100%; -khtml-background-size: 100%; / * Border-radius pas encore implémenté * / / -moz-border-radius: 22px; -webkit-border-radius: 22px;
Étant donné que nous avons défini une couleur de fond, il n'y aura pas de problèmes majeurs dans les navigateurs qui ne prennent pas en charge la taille de fond, comme Firefox. Il ne nous reste plus qu'à styliser l'en-tête et le texte.
#intro h2, #intro p¬ † width: 336px; #intro h2 padding: 0 0 22px 0; poids de police: couleur normale: #fff; #intro p padding: 0; couleur: # d9f499;
L’image de fleur peut être facilement ajoutée en donnant à #intro une seconde image d’arrière-plan, ce que CSS 3 prend en charge..
#intro … background: # 467612 url ("intro_background.png") en haut à gauche (287px 100%) repeat-x, url ("intro_flower.png") en haut à droite (653px 100%) no-repeat;… Nous donnons des dimensions explicites aux deux images d’arrière-plan afin d’empêcher qu’elles ne se chevauchent. Notez la notation abrégée de background-size.
Malheureusement, aucun navigateur ne le supporte encore de manière fiable. Nous devrons donc le faire à l'ancienne: inclure une image en ligne et la positionner à l'aide de CSS. Voir le dernier exemple pour voir comment cela a été fait.
La zone de contenu et la barre latérale vont être alignés l'un à côté de l'autre. Traditionnellement, vous utiliseriez des flottants, mais en CSS 3, nous allons utiliser des tableaux.!
"Quoi?! Tables?" vous pourriez demander et avoir l'air confus. Vous avez probablement appris il y a des années que l'utilisation de tableaux pour la mise en page Web est un non-non, et c'est toujours le cas. Vous ne devriez jamais utiliser l'élément table pour baliser une mise en page. Cependant, en CSS 3, nous pouvons faire en sorte que les éléments se comportent comme des tableaux sans que cela apparaisse dans le balisage! Pour commencer, nous aurons besoin de divs pour grouper les sections de manière un peu plus logique.
Sémantiquement, tout a encore un sens, mais nous pouvons maintenant l'appeler. Nous voulons que la div #content se comporte comme une table, avec #mainContent et de côté comme des cellules-tables. Avec CSS 3, c'est très simple:
#content display: table; #mainContent display: table-cell; largeur: 620px; rembourrage à droite: 22px; apartement display: table-cellule; largeur: 300px;
C'est tout! Plus aucune image d'arrière-plan de colonne flottante ou fausse, d'effacement ou de réduction des marges. Nous avons fait en sorte que les éléments se comportent comme une table, ce qui nous facilite grandement la mise en page..
Le style de l'en-tête du message est plutôt trivial, je passe donc à la partie amusante: la disposition en plusieurs colonnes.
Plusieurs colonnes de texte étaient auparavant impossibles sans scinder manuellement le texte, mais avec CSS 3, c'est un jeu d'enfant, bien que nous devions ajouter un div autour des multiples paragraphes pour que cela fonctionne avec les navigateurs actuels.
Lorem ipsum dolor sit amet…
Pellentesque ut sapien arcu…
Vivamus vitae nulla dolor…
…
Maintenant, nous pouvons ajouter deux propriétés simples et appeler un jour.
.blogPost div nombre de colonnes: 2; écart de colonne: 22px;
Nous voulons 2 colonnes et un écart de 22px entre les colonnes. La div supplémentaire est nécessaire car il n’existe actuellement aucun moyen de créer un élément sur plus d’une colonne. Dans le futur, cependant, vous pourrez spécifier la propriété column-span, et nous pourrions simplement écrire:
.blogPost nombre de colonnes: 2; écart de colonne: 22px; .blogPost header column-span: all;
Bien entendu, les propriétés de nombre de colonnes et de colonnes ne sont prises en charge que par certains navigateurs, Safari et Firefox. Nous devons utiliser les propriétés spécifiques du vendeur pour l'instant.
.blogPost div / * Le nombre de colonnes n'est pas encore implémenté * / -moz-column-count: 2; -webkit-column-count: 2; / * Column-gap pas encore implémenté * / / -moz-column-gap: 22px; -webkit-colonne-gap: 22px;
Si vous regardez de près l'image dans l'article du blog, vous verrez une ombre portée. Nous sommes en mesure de générer cela en utilisant CSS 3 et la propriété box-shadow.
.blogPost img margin: 22px 0; box-shadow: 3px 3px 7px # 777;
Le premier "3px" indique au navigateur où nous voulons que l'ombre s'arrête horizontalement. Le deuxième "3px" indique à l’endroit où nous voulons que l’ombre s’arrête verticalement. Le dernier "7px" indique à quel point la bordure doit être floue. Si vous le définissez sur 0, il sera complètement solide. Enfin, nous définissons la couleur de base de l'ombre. Cette couleur est bien sûr estompée, en fonction du degré de flou de l'ombre.
Il n’est probablement pas surprenant que cette propriété ne soit pas encore implémentée dans tous les navigateurs. En fait, cela ne fonctionne que dans Safari et vous devez utiliser la propriété spécifique du fournisseur..
.blogPost img margin: 22px 0; -webkit-box-shadow: 3px 3px 7px # 777;
Les bandes de zébrures, ou la mise en évidence de chaque deuxième élément d'une série, impliquaient traditionnellement de sélectionner tous les éléments via javascript, de les parcourir en boucle et de mettre en évidence tous les éléments impairs. CSS 3 introduit la pseudo-classe "nth-child", ce qui le rend ridiculement simple à faire sans javascript. Nous allons l'utiliser pour zébrer les commentaires.
section # commentaires article: nth-child (2n + 1) padding: 21px; arrière-plan: # E3E3E3; bordure: 1px solide # d7d7d7; / * Border-radius pas encore implémenté * / / -moz-border-radius: 11px; -webkit-border-radius: 11px;
La valeur bizarre "2n + 1" est en fait assez simple si vous comprenez ce que cela signifie:
Alternativement, vous pouvez simplement écrire:
section # commentaires article: nth-child (impair) …
Étant donné que la norme inclut les deux valeurs les plus utilisées, à savoir sténographie, impaire et paire. Le reste du style de commentaire doit être simple à comprendre avec vos nouvelles connaissances..
Quelques techniques CSS 3 sont réutilisées dans le style du formulaire de commentaire, du pied de page et de la barre latérale. Dans le formulaire de commentaire et le pied de page, j'ai utilisé le même type de technique de présentation de tableau que celle utilisée dans la présentation principale. Dans la barre latérale bord-rayon est utilisé pour ajouter des coins arrondis aux différentes sections.
Voir le design final avec tous les styles appliqués.
La page s'affiche correctement dans Safari 4 et les navigateurs Web plus récents, car il s'agit du seul moteur de rendu prenant en charge toutes les techniques CSS 3 que nous avons utilisées. Firefox 3 a quelques problèmes pour appliquer des coins arrondis à notre image de fleur et il ne prend pas en charge la taille de l’arrière-plan, mais à part cela, la disposition fonctionne. J'ai choisi d'ignorer Internet Explorer, car il nécessite un peu de piratage pour que HTML 5 fonctionne. Vous pouvez également définir quelques règles supplémentaires et tout faire fonctionner dans les principaux navigateurs, mais tout cela sort du cadre du didacticiel..
Lorsque HTML 5 et CSS 3 seront mis en œuvre un jour dans tous les navigateurs, il sera beaucoup plus facile de créer des sites Web. Nous pourrons enfin cesser d'utiliser des flottants pour la mise en page (ce pour quoi ils n'ont jamais été conçus) et nous passerons beaucoup moins de temps à écrire du javascript pour redimensionner nos images d'arrière-plan ou zébrer nos tableaux. Espérons que nous utiliserons tout ce temps supplémentaire pour étudier certains domaines de la conception Web longtemps négligés, tels que l'optimisation front-end et une architecture d'informations appropriée..
Consultez nos modèles HTML5 ou nos thèmes CSS si vous avez besoin d'une solution professionnelle prête à l'emploi pour votre prochain projet Web..
