Guide du débutant pour la création de pages Web HTML5 / CSS3

Cet article fait partie de notre "Série de tutoriels HTML5 / CSS3" - dédié à vous aider à faire de vous un meilleur concepteur et / ou développeur. Cliquez ici pour voir plus d'articles de la même série.

HTML5 et CSS3 ont balayé le Web par la tempête en seulement 2 ans. Avant eux, les concepteurs Web devaient créer de nombreuses pages Web avec une sémantique modifiée. De nombreux supports impressionnants tels que les médias alternatifs, les balises de style XML et les attributs de saisie progressive permettant aux concepteurs Web de réaliser des rêves des fonctionnalités telles que l'animation.

Bien que la plupart des développeurs semblent présenter des démonstrations potentielles mais compliquées, HTML5 / CSS3 ne sont pas une science factice, et je vous expliquerai le processus de détente pour créer une page Web standard HTML5 / CSS3 avec des explications et un tada complets mais détaillés! Des bonus comme des ressources d'apprentissage et des modèles HTML5 gratuits sont disponibles, alors saisissez cette occasion pour lancer votre aventure HTML5!

Changements entre HTML4 et HTML5

Vous vous demandez peut-être pourquoi il est même important de passer au format HTML5. Il y a une myriade de raisons, mais surtout parce que vous serez travailler avec les standards Internet mondiaux comme tous les autres designers. De cette façon, vous trouverez plus de soutien en ligne et votre les sites Web seront rendus correctement dans les navigateurs modernes qui sont constamment améliorés.

(Source de l'image: W3C)

La comparaison entre HTML4 et HTML5 est difficile à repérer au niveau de la surface. En consultant le nouveau brouillon HTML5, vous pouvez voir les éléments présentés et les procédures de traitement des erreurs corrigées. Les développeurs de navigateurs ont particulièrement apprécié les nouvelles spécifications de rendu des pages Web par défaut..

De plus, HTML5 est la conversion de notre navigateur Web moderne. Avec ces nouvelles spécifications, le Web dans son ensemble est maintenant considéré comme un plate-forme d'application pour HTML (en particulier HTML5), CSS et JavaScript sur lesquels s'appuyer. En outre, ce système élégamment crée une harmonie entre les concepteurs Web et les développeurs en fixant des normes communes que tous les navigateurs devraient suivre.

De plus, de nombreux éléments ont été créés pour représenter les médias numériques new-age. Ceux-ci inclus et qui sont énormes pour le support multimédia. Dans certains navigateurs, vous pouvez compléter la validation du formulaire directement en HTML. Certes, jQuery a encore un besoin urgent, car de nombreux développeurs de logiciels n’ont pas encore reconnu les fonctionnalités. Si vous souhaitez une liste de balises, cochez cette table W3Schools pour en savoir plus..

Squelette HTML5 nu

Je trouve que la meilleure façon de comprendre un sujet est de plonger directement dans. Je construirai donc un modèle squelette HTML5 très basique pour une page Web. J'ai inclus quelques-uns des éléments les plus récents, que j'espère classer un peu plus tard.

   Notre première page HTML5       Bienvenue à tous!
   Accueil
 À propos de nous
 Contacts
 
 
 
   du contenu ici.
 
  mais certains ici aussi!
 
 
  Certains droits d'auteur et mentions légales ici. Peut-être utiliser un peu le symbole ©.

Pour l’instant, ce n’est pas très différent d’une page Web HTML4 standard. Vous remarquerez peut-être que nous il n'est pas nécessaire d'inclure d'autres balises à fermeture automatique. C'est vraiment une excellente nouvelle, car cela vous fera gagner beaucoup de temps sur vos projets de développement..

Pour ceux qui ne savent pas, dans les brouillons XHTML, il y avait beaucoup d'éléments étiquetés à fermeture automatique. Celles-ci se termineraient par une barre oblique avant l'opérateur «supérieur à» pour indiquer que vous n'auriez pas besoin d'inclure une autre balise de fermeture ailleurs. Par exemple, pour créer une balise meta keywords, utilisez sans la nécessité d'une fermeture autre part.

Cette règle s'applique toujours en HTML5. Mais maintenant vous ne même pas besoin de la barre oblique supplémentaire! est complètement valide, bien que vous puissiez continuer à utiliser le standard XHTML / XML. Pour tous les navigateurs conformes aux normes, les deux éléments seront rendus de la même manière..

Définir nos zones de page

La majorité de notre nouveau code ne devrait pas être trop choquant. Notre doctype est hilarement plus simple que jamais, pas besoin d'attributs corporels excessifs, et les informations dans notre rubrique sont clairement étiquetées. Pour continuer, je voudrais attirer votre attention sur le contenu de notre étiquette. Cela inclut toute la structure de la page principale. J'ai délibérément utilisé quelques jolies balises HTML5 pour indiquer comment les inclure dans votre propre travail..

Tout d'abord, vous verrez la page entière est encapsulé dans un div étiquette. J'ai étiqueté cela avec un identifiant de emballage, ce qui signifie qu'il enveloppe tout le contenu de notre site Web. C'est utile pour définir un contenu de largeur ou de position maximum autour de l'écran. Ensuite, j'ai fractionné la page en 3 éléments de base - un

, un noyau

, et un court

. Dans ma zone d'en-tête personnalisée, j'ai ajouté un affichage simpliste du titre de la page et des éléments de navigation à l'aide de la

tag comme un wrapper.

Maintenant pour le

avec un identifiant de coeur J'ai appliqué un secondaire clearfix. Cette fonctionnalité fait en sorte que nous pouvons flotte librement 2 colonnes à l'intérieur et nous ne ferons l'expérience d'aucun contenu oublié ni de phénomènes étranges. Et à juste titre, comme à l'intérieur j'ai placé deux

balises qui incluront respectivement notre zone de contenu principale et notre barre latérale. Nous allons utiliser des styles CSS pour les séparer.

De même le calme bas de page étiquette fonctionne bien pour différencier ce contenu sur la page. À l'intérieur, j'ai placé un paragraphe solennel pouvant contenir des informations sur le droit d'auteur et la propriété. Mais il y a de bonnes chances que vous souhaitiez inclure un peu plus de contenu, tel que des liens secondaires vers vos pages..

Creative CSS3 Wizardry

Pour terminer cette présentation de base du pochoir, nous pouvons utiliser quelques styles CSS. Dans le modèle HTML5 de base, j'ai ajouté un feuille de style CSS externe afin que nous puissions garder nos zones de code séparées. Cette volonté éclaircir beaucoup de confusion à long terme, lorsque vos pages et vos styles commencent à fonctionner pour différentes pages.

(Source de l'image: W3C)

Je n'ai donc pas passé beaucoup de temps avec CSS, mais assez pour présenter quelques effets intéressants. Tout d'abord, j'ai utilisé certains des paramètres de rayon de bordure pour créer des effets de survol de lien de navigation très cool. Vous pouvez cibler le même effet dans le code du modèle. Ajoutez simplement les lignes suivantes dans le document CSS..

 nav display: block; marge inférieure: 10px;  nav ul list-style: none; taille de police: 14px;  nav ul li display: inline;  nav ul li a display: block; float: gauche; rembourrage: 3px 6px; couleur: # 575c7d; texte-décoration: aucun; poids de police: gras;  nav ul li a: hover background: # deff90; couleur: # 485e0f; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; rembourrage: 3px 6px; marge: 0; texte-décoration: aucun;

Un autre effet intéressant est le styles de correctifs. Ce n'est pas un concept entièrement nouveau avec CSS3, mais il est important pour la création de pages Web conformes aux normes. Souvent, lorsque vous cherchez à placer du contenu côte à côte, vous rencontrez des problèmes de positionnement. Cela est dû aux marges de décalage et aux erreurs de définition des largeurs absolues pour votre contenu flottant..

Ce concept peut sembler un peu déroutant, et j'ai ajouté un peu de code ci-dessous pour vous aider. Fondamentalement, nous visons deux

éléments, #la gauche et #droite pour correspondre à leur côté de la page. Je les ai définies avec une largeur définie et une marge flottante, afin qu'elles s'empilent les unes à côté des autres. Depuis notre conteneur div # core contient le clearfix classe, cela signifie que tout le contenu interne peut se déplacer librement et efface automatiquement l'espace supplémentaire après.

/ * page core * / div # core display: block; clarifier les deux; marge inférieure: 20 px;  section # left width: 550px; float: gauche; marge: 0 15 px;  section # right float: left; largeur: 300px;  / * clearfix * / .clearfix: après contenu: "."; bloc de visualisation; clarifier les deux; visibilité: cachée; hauteur de ligne: 0; hauteur: 0;  .clearfix display: inline-block;  html [xmlns] .clearfix display: block;  * html .clearfix height: 1%;

Ces bouts de code sont simples à utiliser. Ils se rapportent également à notre code de modèle HTML5 construit plus tôt, il s’agit donc d’une pratique simple. Mais quand il s'agira de véritables drogués du Web, vous explorerez davantage de fonctionnalités CSS3..

Syntaxe CSS3 moins connue

Pour construire des pages Web HTML5 / CSS3 complètes, vous allez commencer à utiliser des feuilles de style beaucoup plus complexes. De nombreux concepteurs connaissent le code abrégé (comme le police: propriété), puisque celles-ci étaient des normes avant même CSS2.

Mais il y a quelques nouvelles propriétés dans CSS3 auxquelles beaucoup de concepteurs ne pensent pas. Beaucoup d'entre eux ne sont pas uniquement esthétiques, mais incluent également des effets d'animation. Vous trouverez ci-dessous une courte liste expliquant quelques-unes des propriétés avec lesquelles vous pouvez jouer. Essayez Google pour des exemples de syntaxe si vous vous sentez perdu.

boîte ombre: ajoute un effet d’ombre aux éléments de votre page. Vous avez 4 paramètres qui définissent la position gauche / droite, haut / bas, le flou de l’ombre et la couleur. Notez que les ombres de boîte ne sont pas considérées comme un espace supplémentaire par rapport à la largeur / hauteur d'origine..
ombre de texte: crée de belles ombres derrière le texte de votre page. Avec les bons effets, vos lettres pourraient apparaître directement de la page..
rayon de la frontière: Les angles arrondis ont mis longtemps à devenir des normes acceptées. Il y a quelques années, de nombreux concepteurs Web 2.0 étaient en train de créer des images d'arrière-plan uniquement pour les coins arrondis avec CSS. Mais en utilisant CSS3 border-radius, vous pouvez manipuler la courbe de chaque bordure sur n'importe quel élément.
opacité: Cela ressemble à une propriété simple que beaucoup de concepteurs ne considèrent pas. L'opacité attend une seule entrée numérique allant de 0 à 1,0 (0% à 100%). Cet effet fonctionne très bien comme une animation en vol stationnaire.
@ font-face: Un autre bel exemple de certains styles et typographies CSS complexes. Les concepteurs Web peuvent désormais utiliser leurs propres polices personnalisées en les définissant comme des variables dans vos documents CSS..
taille de la boîte: par défaut, box-sizing définira tous vos éléments comme contenu-box. Cela signifie que la largeur, le remplissage et les bordures sont tous inclus dans la largeur maximale. Mais mis à boîte à bordure vous pouvez définir une largeur maximale (par exemple 20px) et les marges / bords ajoutés s’y inclus, supprimant ainsi l’espace à l’intérieur de l’objet. C'est une propriété fantastique une fois que vous maîtrisez sa débrouillardise.

Ces propriétés ont toutes des avantages et des inconvénients. Je ne recommanderais pas d'essayer de tout mettre dans vos pages Web. Mais la pratique vous donnera un état d'esprit clair entrer facilement dans le développement de nouveaux sites Web.

Un autre élément essentiel de la syntaxe à mentionner est sélecteurs d'attributs. Avec CSS3, vous pouvez maintenant définir des styles en fonction d'attributs HTML (tels que type, href, title) et même fournir des valeurs spécifiques. Ainsi, par exemple, nous pourrions cibler des liens avec un attribut title défini et leur attribuer un ensemble d'icônes d'arrière-plan..

 ul li [titre ^ = "ico"] background: url ('my-icon.gif');

Si vous remarquez que j'ai inclus un symbole de caret avant le signe égal. Ceci est un opérateur qui définit tous les éléments de la liste contenant le préfixe, ico. Vous pouvez également remplacer le curseur (^) par un signe dollar ($) pour cibler le suffixe de votre titre. De cette manière, CSS3 sait ajouter des images d’arrière-plan où vous pouvez définir les titres comme "premier ico" ou "book ico". Lisez un peu plus sur les sélecteurs d'attributs si cela vous intéresse.

Mettre tous ensemble

Au cœur des pages Web HTML5 et CSS3 se trouve simplicité. Les développeurs Web tentent de créer des sites Web très créatifs en moins de temps et avec moins de stress. Les nouvelles fonctionnalités de HTML5 permettent cela avec beaucoup de marge de manœuvre. Et utiliser certains des nouveaux sélecteurs et propriétés CSS3 vous procurera des avantages à long terme..

(Source de l'image: W3C)

Mais aussi vous devriez être compte tenu de l'utilisateur final. Le processus de création d’une page Web se termine finalement après le lancement du site Web. Votre but est de s'il vous plaît audience avec des informations faciles d'accès, et pas seulement les lecteurs humains, mais crawlers et indexation des moteurs de recherche. La sémantique a considérablement évolué pour inclure de nouveaux éléments de mise en page HTML5, scindant les mises en page de manière cohérente. Il n'a jamais été aussi facile de construire une petite section de navigation et de pied de page en ligne avec tous les navigateurs Web modernes..

Une fois que vous êtes à l'aise avec la construction de pages Web HTML5, vous commencerez probablement à regarder dans les animations de page. Même des effets mineurs avec JavaScript et AJAX peuvent grandement améliorer l'expérience utilisateur et les performances du site. Bien que cela ne fasse pas partie de la portée de l'article, je vous recommande de jouer avec jQuery si vous en avez le temps. La bibliothèque open source est stupéfiante et permet un prototypage rapide au-dessus des éléments de page HTML5.

Ressources supplémentaires

Les blogueurs du monde entier discutent des nouvelles tendances en HTML5 et CSS3 et partagent leurs ressources avec le public. Le temps change et la communauté Web change avec eux. Vous devriez envisager quelques domaines de niche dans lesquels étudier et développer un petit intérêt..

Vous trouverez ci-dessous quelques listes, articles et tutoriels supplémentaires qui pourraient vous intéresser. J'ai pris la liberté de scinder les listes en ressources HTML5 et CSS3. Selon ce que vous étudiez, il devrait y avoir quelques sujets ici pour tout le monde. Profitez également de la brève galerie de thèmes HTML gratuits à télécharger en ligne.!

HTML5

HTML5: 15 expériences inspirantes
HTML5: 19 applications Web
HTML5: 48 démonstrations potentielles de destruction Flash
Créer un formulaire de contact HTML5 / CSS3 basé sur Ajax

CSS3

CSS3: Guide du débutant
CSS3: Création d'un champ de recherche
CSS3: utilisation de pseudo-classes
CSS3: 30+ tutoriels utiles

Bonus: Modèles et thèmes HTML5

Entreprise de design

Prêt à entrer dans le monde merveilleux de HTML5? Voici un modèle HTML5 totalement gratuit, avec des scripts jQuery et des polices personnalisées pour vous permettre de tester librement!

Un thème HTML5 / CSS3

Ce thème basé sur HTML5 / CSS3 a la même disposition de conception de blog que vous pouvez créer votre propre blog HTML5 avec de nombreuses fonctionnalités, ou tout simplement creuser dans le code pour en apprendre davantage..

Yoko

Yoko est un thème WordPress moderne qui parle de flexibilité avec sa mise en page réactive basée sur les requêtes de médias CSS3, ce qui permet de s’adapter à différentes tailles d’écran.!

Gris

Si vous préférez le style classique du blog WordPress, Gray est probablement fait pour vous avec ses fonctionnalités CSS3 intégrées telles que border-radius, arrière-plans multiples, texte-ombre, etc..

Guide du débutant de Flock, le navigateur de médias sociaux

Guide du débutant pour le développement iOS L'interface - Partie I

Guide du débutant pour la configuration de Windows 7 Media Center