Commencez avec html5

Video: Formation HTML5 & CSS3 - #1 : Bien commencer en HTML & CSS

Table des matières

§1. Introduction

§2-sémantique de balisage

§3-formes

§4-Media

§5-CSS3 transformations et animations

§6-Just Enough javascript

Video: Tutoriel HTML 5 / CSS 3 - #2 - l'organisation d'un site

§7-Creative Canvas

§8-ensuite?

1. Introduction

Vous en avez entendu parler: HTML5. Tout le monde l`utilise. On est en train comme le substitut salutaire de l`Internet, ce qui permet aux gens de créer riches, engageant des pages web sans avoir recours à l`utilisation de Flash et Shockwave.Qu`est-ce que HTML5, et comment faut-il changer la façon dont je passe en revue? [MakeUseOf Explique]Qu`est-ce que HTML5, et comment faut-il changer la façon dont je passe en revue? [MakeUseOf Explique]Au cours des dernières années, vous avez peut-être entendu chaque fois dans un certain temps le terme HTML5. Que vous savez quoi que ce soit sur le développement web ou non, le concept peut être quelque peu nébuleux et confus. Évidemment,...Lire la suite

Mais ce qui est réellement?

Eh bien, ce n`est pas une question facile à répondre. Dans ce tutoriel HTML5, nous allons essayer d`apporter quelques réponses. HTML5 est utilisé pour décrire un groupe très diversifié de choses. Il est une norme d`écriture de pages Web. Il est une collection d`API. Il est une nouvelle façon d`ajouter de l`interactivité aux pages Web.

HTML5 est tout cela et plus. Alors, quel est ce livre?

Dans ce tutoriel HTML5, je vais supposer que vous avez à un moment donné touché le HTML et CSS. Peut-être que vous avez créé votre propre thème WordPress, ou édité une mise en page MySpace dans la journée. Peut-être que vous avez lu très propre guide XHTML de MakeUseOf. Le point est, je suppose que vous connaissez votre chemin autour d`une page Web et que ce dont nous discutons dans ce guide ne sera pas trop étranger pour vous.

L`objectif de ce guide est de ne pas vous enseigner l`ensemble de HTML5. Ce serait tout à fait hors de la portée de ce livre. L`objectif est de fournir une introduction en douceur à ces nouvelles technologies web étonnantes, et de vous montrer quelques façons fraîches de les intégrer dans vos sites Web.

Pourquoi voudriez-vous apprendre HTML5?

Il est une bonne question. Dans un monde des smartphones et des applications, il est vraiment important d`apprendre comment programmer des pages web?

Eh bien, croyez-le ou non, il est vraiment commun pour écrire des applications smartphone à l`aide des technologies HTML5. Jusqu`à récemment, l`application Facebook pour Android a été écrit en utilisant HTML5, CSS et javascript.

Blackberry est une autre grande entreprise qui est extrêmement désireux de HTML5. Cela est évident dans la dernière version de son système d`exploitation mobile, Blackberry OS 10, où ils encouragent activement les développeurs à développer des applications pour leur téléphone en utilisant des technologies web.

Le nouveau Firefox OS smartphones entièrement géré sur les applications HTML5 aussi. Une connaissance pratique de HTML5 est essentielle dans le climat des smartphones d`aujourd`hui.

De plus, l`apprentissage HTML5 est bonne pour votre carrière. Ne me croyez pas? Selon Indeed.com, le salaire annuel moyen pour un développeur HTML5 est un eye-popping 89000 $. Avec de plus en plus d`entreprises qui changent de sites Web d`utiliser les technologies HTML5, les développeurs qui connaissent la pile HTML5 sont recherchés - maintenant plus que jamais.

1.1 Conditions préalables

Ce tutoriel HTML5 suppose deux choses. Tout d`abord, il suppose que vous savez comment fonctionne le web, et que vous savez comment créer une page Web de base. Vous devriez être en mesure de bricoler certains éléments HTML ensemble et d`être en mesure de présenter des informations dans un navigateur Web. Voyant

les balises ne sont pas trop intimidant, et vous n`êtes pas peur de se salir les mains dans un code source.

En second lieu, ce guide suppose que vous savez ce que CSS est et comment il fonctionne. Nous ne vous attendez pas à être des génies de conception, ni vous attend de connaître la spécification CSS entière à l`arrière de votre main. Vous devriez cependant être en mesure d`appliquer un style à un élément sur une page Web, être en mesure de créer un lien vers un fichier CSS et connaître la différence entre un ID et une classe et comment appliquer un style à chacun d`eux.

Si vous gratter la tête au-dessus, ne vous inquiétez pas. Une des meilleures choses à propos de HTML et CSS est qu`il est vraiment, vraiment facile. En fait, MakeUseOf a un incroyable guide de XHTML qui vous mènera à la vitesse très rapide.

Après avoir lu ce guide, vous pouvez également consulter les articles suivants:

• 8 sites internet avec des exemples de codage de qualité
• 6 Les blogs de suivre de grands designers Web

Vous allez aussi avoir besoin d`un éditeur de texte moderne et navigateur. Toute version d`Internet Explorer qui est plus ancienne que IE 9 et certaines anciennes versions de Safari, Chrome et Firefox lutteront avec de nombreuses fonctionnalités qui font partie de HTML5 et peut vous empêcher de suivre ce guide.

En conséquence, vous êtes invités à télécharger un navigateur moderne. Je recommande Google Chrome, et je vais utiliser dans chaque exemple.

Au-delà, tout ce que vous allez avoir besoin est une volonté d`apprendre. Oh, et un éditeur de texte.

1.2 éditeurs de texte pour le développement Web

Votre éditeur de texte est ce que vous allez utiliser pour écrire votre code. Vous demandez peut-être ce qu`est un éditeur de texte est.

Eh bien, tout d`abord il est un traitement de texte. Des programmes tels que Microsoft Word et les pages d`Apple sont totalement inadaptées au développement web. C`est parce qu`ils attachent plus d`informations à votre HTML, CSS et fichiers javascript qui le rend difficile pour lire votre navigateur Web.

Un éditeur de texte tire les caractères dans un fichier texte, et pas grand-chose. Cela vous permet de créer des fichiers sans formatage supplémentaire, et peut être enregistré à toute extension de votre choix.

Votre ordinateur est déjà un. Si vous utilisez un PC sous Windows, puis le Bloc-notes est l`éditeur de texte que vous avez probablement est bien installé.

Sur un Mac, la situation est légèrement différente. OS X arrive à venir avec quatre éditeurs de texte différents. Ceux-ci sont appelés Vim, Emacs, Pico et Nano. Cependant, contrairement à Bloc-notes, tous arriver à travailler dans le terminal.

Ceci est un peu intimidant pour les gens qui sont nouveaux pour le développement web et ne doivent pas être utilisés par des personnes qui sont nouveaux pour le développement de logiciels. Nous ne les utiliserons dans ce guide. Toutefois, lorsque vous obtenez un peu plus confiant avec le logiciel et le développement web, il vaut vraiment la peine d`avoir un coup d`oeil vitalité et Emacs. Ils sont tous deux éditeurs puissants de texte, et quand maîtrisé peut vous faire économiser énormément de temps.Le Top 7 raisons de donner VIM Text Editor A ChanceLe Top 7 raisons de donner VIM Text Editor A ChancePendant des années, je l`ai essayé un éditeur de texte après l`autre. Vous le nom, je l`ai essayé. Je chacun de ces éditeurs pour plus de deux mois que mon premier jour à jour éditeur. D`une certaine façon, je ...Lire la suite

Sous Linux, l`éditeur de texte par défaut varie entre les distributions. Sur Ubuntu, il est probable gedit, qui est un éditeur de texte plutôt agréable qui est pas trop différent de Bloc-notes.

Cependant, dans ce cours, nous allons écrire notre code à l`aide de trois outils différents.

Le premier est Sublime Text 2. Honnêtement, je ne peux pas recommander ce assez. Il est livré avec toutes les choses qui rend la vie plus facile pour un développeur débutant. Tout d`abord, il va rendre votre code plus facile à lire en coloriant certaines parties. En second lieu, il vous permet de basculer entre les fichiers facilement et de gérer l`ensemble des projets de fichiers. Cette fonction est idéale pour la commutation entre les fichiers, et la modification de plusieurs morceaux de code à la volée.Essayez Sublime Text 2 Pour votre code multi-plateforme d`édition des besoinsEssayez Sublime Text 2 Pour votre code multi-plateforme d`édition des besoinsSublime Text 2 est un éditeur de code multi-plateforme, je ne récemment entendu parler, et je dois dire que je suis vraiment impressionné malgré l`étiquette bêta. Vous pouvez télécharger l`application complète sans payer un sou ...Lire la suite

Le troisième est le console javascript qui est intégré dans Google Chrome. Cela nous permet d`écrire le javascript et le voir en cours d`exécution immédiatement et sera utilisé pour expliquer les concepts de programmation de base.

Le second est un site Web appelé Codepen.io. Ce site remarquable vous permettra de le code HTML, CSS et javascript dans le navigateur et est libre d`utiliser. Il vous permettra également de voir instantanément les changements.

2. sémantique de balisage

Dans ce chapitre, vous apprendrez sémantique de balisage, et comment organiser votre code basé sur son contenu.

Jusqu`à une date récente, le code HTML est généralement organisé avec

Cela a fonctionné, mais il y avait place à l`amélioration. Le problème avec

Le balisage sémantique est une nouvelle fonctionnalité en HTML5. Il apporte de nouvelles étiquettes, qui fonctionnent de la même manière comme une balise « div », mais sont pour le marquage des parties communes d`une page.

Alors, comment fonctionnent-ils? Considérez le code suivant.

Dans ce morceau de code, nous avons une barre de navigation, un titre et une liste. Ce n`est pas trop différente de la plupart des sites Web que vous êtes susceptible de toujours aller plus loin, quand on y pense.

Jetons un coup d`oeil un article sur MakeUseOf. Vous remarquerez qu`il ya une partie de la page qui est entièrement réservé pour naviguer vers d`autres articles. Vous remarquerez également qu`il ya une autre partie de la page qui contient les mots qui constitue un article. Vers le haut de la page, vous verrez un en-tête contenant le logo MakeUseOf et d`autres liens.

Quand on y pense, beaucoup de sites suivent ces conventions. La plupart des sites ont une partie qui est réservée à la navigation. Ils ont généralement un corps de contenu. Ils plus que probablement un en-tête.

balises sémantiques sont des balises qui vous permettent de définir des parties d`un site Web qui sont généralement présents sur la plupart des sites. Ils n`ajoutent rien à la page, mais vous permettent de balises de groupe en fonction de leur contenu et d`appliquer Stylings à ces groupes.

Alors, rappelez-vous que le code que nous avions avant? Regardons avec quelques balises sémantiques ajouté.

Comme vous pouvez le voir, le code est beaucoup plus facile à lire. Vous savez quelles sont les parties qui et il n`y a pas d`ambiguïté. Ceci est important, car il est plus facile d`écrire un bon code propre. Si vous décidez de devenir un designer web professionnel, cela devient primordial - on ne sait jamais qui sera en train de lire le travail que vous produisez.

Alors, regardons quelques balises sémantiques.

2.1 Section

L`article est une étiquette vraiment utile. Il est utilisé pour saisir des pans entiers de l`information et du contenu qui sont marqués par un titre ou un titre. Pensez à cela comme un chapitre dans un livre. Un chapitre a un titre, et peut également contenir des images, des diagrammes, des graphiques et des mots. Une balise de section serait utilisé pour contenir tout cela.

2.2 article

L`étiquette de l`article est utilisé pour ce qu`il semble comme- contenant du contenu comme un billet de blog ou une histoire de nouvelles. Ce contenu doit pouvoir être détaché du reste du blog et encore un sens cohérent.

2.3 En plus

Cette balise est réservé pour le contenu qui est lié, mais ne fait pas partie intégrante de la page Web. Cela pourrait être un tas de faits qui se rapportent à une histoire de nouvelles, ou la biographie d`un utilisateur sur un blog.

2.4 En-tête

Beaucoup de pages web ont un bar sur le haut de la page qui contient un logo, des informations concernant le site et peut-être quelques liens. Dans le balisage sémantique, vous souhaitez utiliser une balise d`en-tête pour contenir tout cela.

2,5 Nav

Cet élément est réservé pour la partie de navigation de votre site. Cela contient des liens vers d`autres sites ou à d`autres pages du site. Dans le cadre de MakeUseOf, cela pourrait être la partie de la page qui est en dessous de l`en-tête.

2.6 Pied de page

Cette balise est réservée à la partie inférieure de la page. , Ici vous pouvez mettre des coordonnées, des informations droit d`auteur, une carte ou des liens vers votre page « à propos de moi.

2.7 Testez-vous

• Qu`est-ce que le balisage sémantique, et quel est-il utilisé?
• Je fais une page web et je veux utiliser une balise sémantique pour contenir une biographie sur moi. Lequel dois-je utiliser?

3. Formulaires

Si vous avez déjà fait un peu de web design, vous savez probablement comment créer une forme simple en HTML. Si vous êtes vraiment intelligent, vous savez probablement comment prendre les informations que vous obtenez de votre formulaire et comment faire quelque chose avec elle, par exemple le mettre dans une base de données.

Les formulaires sont massivement importants. Ils sont la base de la plupart des choses que nous faisons sur Internet. Chaque fois que vous créez une mise à jour de statut sur votre réseau social préféré, achetez quelque chose d`Amazon, ou envoyez un e-mail, vous avez probablement utilisé un formulaire HTML.

Ce que vous ne saviez probablement pas que la façon dont nous créons des formes a radicalement changé en HTML5. Il est aussi beaucoup mieux. Dans ce chapitre, nous allons examiner quelques-unes des choses cool que vous pouvez faire, juste avec un balisage ancienne plaine.

Alors, ce qui est tellement cool de la nouvelle façon dont nous pouvons écrire des formes en HTML5? Tout d`abord, vous pouvez vous assurer que certains champs doivent être remplis afin de présenter, en changeant le balisage de la forme elle-même. De plus, vous n`avez plus à écrire montagnes de javascript ou PHP pour le faire. Il trivialement facile.

En second lieu, vous pouvez vous assurer que vos utilisateurs ne peuvent présenter certains types d`informations à votre formulaire. Ainsi, supposons que vous avez un site Web pour votre liste de diffusion et que vous voulez que les gens soient en mesure de présenter des adresses électroniques réelles? Vous pouvez le faire, juste en utilisant HTML5. Il est vraiment incroyablement puissant.

Troisièmement, vous pouvez faire vos formulaires regarder mieux en donnant certains champs un espace réservé. Cela les rend beaucoup plus intuitive, comme vous pouvez montrer vos utilisateurs un exemple de ce que vous vous attendez à une forme.

3.1 Améliorer un formulaire

Alors, regardons un formulaire et voir comment nous pouvons faire mieux.

Ce formulaire est assez basique. Il prend un nom, un e-mail et une couleur préférée, et permet ensuite à l`utilisateur de soumettre cela. Il ne contient aucune validation de ce que l`information se fait placé dans, et il n`y a rien qui empêche les utilisateurs de soumettre ce formulaire avec des champs vides. Nous allons changer tout cela.

Donc, la première chose que nous allons vouloir faire est de veiller à ce que le champ email ne prend que un email. Cette habitude d`être une tâche assez difficile en effet, que vous auriez à créer toutes sortes de code Regex Arcane. Eh bien, pas plus. Il suffit de changer juste le type de l`entrée du « texte » à « e-mail ». Lorsque vous essayez de soumettre ce formulaire avec du charabia, il va se plaindre et insister pour que vous envoyer un courriel.

3.2 Types et modèles d`entrée

Il existe d`autres types d`entrée, que vous pouvez avoir besoin. Ceux-ci comprennent les numéros de téléphone, adresses Web, des formulaires de recherche, et même les ramasseurs de couleurs! Comme HTML5 est en constante évolution, il va de soi que bientôt nous serons en mesure de spécifier plusieurs types d`entrée dans un proche avenir.

En outre, pour des choses telles que les numéros de téléphone qui varient selon la localité, vous pouvez spécifier des modèles pour les entrées. Ceux-ci sont créés en utilisant ce qu`on appelle « expressions régulières et sont assez compliquées, mais infiniment puissant.

Nous allons aussi vouloir donner un exemple d`un email dans notre domaine, afin que l`utilisateur n`a pas l`ambiguïté de ce qu`il ou elle doit présenter. C`est vraiment facile à faire. Il suffit de créer un nouvel attribut de « espace réservé » avec une adresse e-mail par exemple.

Nous allons nous assurer que notre champ « Favorite Color » est nécessaire. Dans la dernière tranche d`angle (gt;) dans la balise d`entrée e-mail, il suffit d`écrire « nécessaire ». C`est tout. Maintenant, lorsque vous essayez de soumettre votre formulaire sans valeur, il va produire un message d`erreur.

La chose vraiment incroyable sur ces messages d`erreur est que l`utilisateur n`a pas à les écrire ou d`écrire un code pour les créer. Vous venez de changer un champ pour le rendre nécessaire, et ça marche. Cela dit, il est possible de les personnaliser, si vous voulez.

Ce fut une introduction très brève à la puissance des formes en HTML5. Si vous souhaitez en savoir plus, je vous recommande de visiter ces liens.

Lectures complémentaires:

• Astuces CSS - Écrivons balisage sémantique
• Docteur HTML5 - Parlons Sémantique

3.3 Testez-vous

Il est votre anniversaire la semaine prochaine, et que vous voulez créer un formulaire d`inscription afin que vous sachiez combien gâteau vous avez besoin pour créer. Ouvrez votre éditeur de texte et de créer un formulaire avec les champs suivants.

• prénom
• Adresse e-mail
• Numéro de téléphone
• allergies

Assurez-vous que le nom, les champs e-mail et numéro de téléphone sont obligatoires, et que les champs de numéro de téléphone et e-mail sont définis avec le « e-mail » et les types d`entrée de « tel ». Créer un espace réservé pour le champ d`allergie à la valeur « pollen, oeufs, quiche.

Jouez avec la forme. Essayez de soumettre les champs requis comme vide, et essayez d`insérer des caractères non numériques dans le champ de numéro de téléphone. Dans le champ email, insérez quelque chose qui est pas une adresse e-mail. Ce qui se produit?

4. Les médias

Il y avait un temps où la seule façon dont vous pouvez insérer une vidéo ou audio dans une page web était en utilisant quelque chose comme Flash, Shockwave ou SilverLight.

Ce ne fut pas idéal. Tout d`abord, aucun de ces cadres a travaillé tout ce qui bien sur les appareils mobiles. Ils n`étaient pas équipés pour le monde moderne des smartphones et tablettes.

De plus, ils étaient des formats propriétaires. Par conséquent, les utilisateurs de Linux et OS X peuvent obtenir une jolie expérience de second ordre ou ont même été empêchés de consommer des services de médias, car il n`a pas été disponible pour leur plate-forme.

Enfin, ils ont une propension à être lente. Si vous étiez sur un ordinateur ou plus faible puissance, vous n`avez une bonne expérience vidéo en utilisant l`affichage de ces cadres. Flash a été particulièrement notoire pour cela.

4.1 Comment HTML5 Makes audio et vidéo impressionnante

HTML5 a changé cela en permettant aux développeurs web d`inclure la vidéo et de l`audio dans leurs pages web avec seulement quelques lignes de code. Il fonctionne un régal sur les appareils mobiles et fonctionne sur tous les navigateurs web modernes.

Par conséquent, les grandes entreprises telles que YouTube, Vimeo et Netflix profitent de la révolution HTML5. Pourquoi ne pas vous joindre à eux?

4.2 Tout sur Codecs

Dans ce chapitre, vous allez apprendre à utiliser la puissance de HTML5 pour inclure de l`audio et la vidéo dans vos pages web.

Tout d`abord, je vais devoir commencer avec une mise en garde. Alors que vous pouvez utiliser la vidéo HTML5 dans tous les navigateurs web modernes, il ne fonctionne pas le même dans chaque navigateur Web. Les codecs utilisés par chaque navigateur varient. Dans Internet Explorer, vous êtes limité à l`utilisation de la vidéo MP4. Chrome est un peu plus généreux et vous permet d`utiliser WebM, MP4 et vidéo Ogg Theora. Opera est un peu plus restrictive et ne vous permet d`utiliser Theora et WebM vidéo.

Par conséquent, vous devez être un peu intelligent avec la façon dont vous insérez la vidéo dans votre page Web. Alors, nous allons voir comment cela fonctionne.

4.3 Avec la vidéo à partir

Pour commencer, vous allez avoir besoin de créer une ouverture et de fermeture

Eh bien, quand vous attendez votre vidéo pour charger, la personne qui visite votre site peut voir une image qui se rapporte à la vidéo. Pour ce faire, il suffit de donner votre vidéo balises un attribut de « affiche » une valeur de l`image que vous souhaitez établir un lien. Ça devrait ressembler à ça.

La prochaine chose que nous allons vouloir faire est de créer une solution de repli. Qu`est-ce que ça veut dire? Donc, supposons que vous utilisez l`un des navigateurs plus anciens, moins impressionnants là-bas. Beaucoup de ces anciens navigateurs ne prennent pas en charge la vidéo HTML5 et ne peut donc pas lire la vidéo HTML5. Vous allez vouloir les laisser un message les informant qu`ils vont vouloir mettre à jour leur navigateur et que jusqu`à ce qu`ils le font, ils ne seront pas en mesure de regarder votre vidéo.

Pour ce faire, il vous suffit d`écrire votre message à l`intérieur de vos balises vidéo. Rien d`autre est nécessaire. Une fois que vous avez fait cela, vous allez être laissé avec un code qui ressemble à ceci.

Maintenant, ajoutons la vidéo. Je vais tester cela sur Google Chrome, donc je vais créer un lien vers un film MP4. Pour ce faire, je crée une étiquette de source et de lui donner un attribut de src qui a une valeur de la vidéo que je veux inclure.

Ma page est maintenant prêt à être ouvert dans mon navigateur web. Je suis lié à un film qui est vraiment, vraiment grand et en conséquence, lors de l`ouverture, on ne peut voir l`affiche.

4.4 Ajout d`audio

Audio peut être inséré dans votre page Web d`une manière qui rappelle beaucoup la façon dont nous avons inséré la vidéo dans notre page.

Tout d`abord, on crée des balises audio. Ces balises audio contiennent un attribut de « contrôle. Cela donne à l`utilisateur qui visite la page la possibilité de faire une pause, rembobinage de jeu et avance rapide de l`audio qui est en cours de lecture.

Ensuite, vous devez inclure une balise source au fichier MP3 que vous souhaitez établir un lien. Vous n`avez pas vraiment à se soucier tant que ça en ce qui concerne la compatibilité codec. La plupart des navigateurs web récents ont la capacité de lire des fichiers audio MP3, mais il est bon d`inclure également un fichier « .ogg » et un « .wav » - juste au cas où.

Enfin, vous pouvez créer une solution de repli pour les anciens navigateurs. Cela se fait de la même manière que vous avez créé la solution de repli pour votre vidéo.

Le résultat final ressemble un peu comme ça.

Lorsque vous ouvrez dans votre navigateur Web, il devrait regarder un peu comme ça.

4.5 Testez-vous

• Quel est le but d`avoir une affiche dans vos balises vidéo?
• Quels sont les codecs pouvez-vous pas utiliser dans Internet Explorer?
• Si je voulais la possibilité de mettre en pause une audio, quel attribut voulez-vous ajouter à votre tag « audio »?

Lectures complémentaires:

• HTML5 Rocks Vidéo

5. Les transformations CSS3 et animations

CSS était traditionnellement utilisé pour gérer la mise en page et la conception d`une page web. Cela est encore vrai, mais dans sa dernière itération, il a acquis la capacité de gérer des animations et des transformations des éléments et des images.5 étapes pour bébé à l`apprentissage CSS & Devenir un Sorcier CSS Kick-Ass5 étapes pour bébé à l`apprentissage CSS & Devenir un Sorcier CSS Kick-AssCSS est les pages Web de changement le plus important ont vu dans la dernière décennie, et il a ouvert la voie à la séparation du style et de contenu. Dans la façon moderne, XHTML définit la structure sémantique ...Lire la suite

Les gens ont fait des choses étonnantes avec CSS3, de créer une horloge numérique à l`écriture d`un jeu complet Pong. Quelqu`un a même utilisé pour recréer les crédits d`introduction à Mad Men. C`est une technologie vraiment puissante et quand il est maîtrisé peut être utilisé pour ajouter un niveau incroyable de fonctionnalités à votre page Web.

Dans ce chapitre, je vais vous donner un bref introduction à CSS3, et vous montrer comment ajouter des effets étonnants sur votre page.

Tout d`abord, accédez à codepen.io et de créer un nouveau stylo. Nous allons l`utiliser comme notre espace de travail pour la durée de ce chapitre.

Nous allons commencer simple et créer une image simple transformation qui tourne une image 3 degrés lors de son survol. Tout d`abord, créez une balise div et lui donner une carte d`identité. Dans l`exemple ci-dessous, je lui ai donné une carte d`identité de « muo ».

5.1 CSS Hover Effets

Dans ce div, inclure une image de votre choix. J`ai inclus une copie du logo pour MakeUseOf.

Vous devrez ensuite écrire des règles de feuille de style. Dans l`exemple ci-dessous, j`ai créé une marge supérieure et à gauche pour donner l`image de la place. J`ai aussi inclus une règle de stylesheet curieux à la recherche qui commence par « #muo: vol stationnaire. Qu`est-ce que c`est?

Lorsque vous connectez « : hover » à une règle de feuille de style, que ce soit à un élément, une carte d`identité ou d`une classe, vous dites effectivement le navigateur pour appliquer ce style lorsque votre souris gouverne l`élément. Plutôt cool, non?

A l`intérieur du « #muo: vol stationnaire » règle, nous avons une ligne qui dit « webkit-transform: rotate (3deg). Comme je suis sûr que vous l`avez deviné, cela dit le navigateur pour faire tourner cet élément div par trois degrés.

Cependant, il est intéressant de noter que cette balise ne fonctionne que dans Chrome et Safari. Si vous voulez que votre code fonctionne dans Firefox ou Internet Explorer 9 et au-dessus, vous allez vouloir changer votre fichier CSS pour les lignes suivantes.

Maintenant, lorsque vous passez la souris sur l`image, il ressemble à ceci:

5.2 Utilisation CSS3 Pour redimensionner les images

Alors, pourquoi arrêter là? Saviez-vous que vous pouvez également utiliser la méthode « transformer » pour agrandir ou réduire une image. Changeons notre fichier CSS pour les lignes suivantes.

Comme vous pouvez le voir, nous avons maintenant inclus une nouvelle règle de transformation, mais cette fois nous racontons à faire quelque chose appelé « échelle ». C`est un moyen vraiment beau d`augmenter la taille d`une image. Il prend deux paramètres (les chiffres que vous voyez dans entre les parenthèses), et ils représentent le montant dont vous augmentez la hauteur et la largeur de l`élément.

Comme vous pouvez le voir dans le code, je vais augmenter la taille du logo du MakeUseOf de 50%. Vous pouvez tester cela fonctionne en vol stationnaire au-dessus. Vous verrez que maintenant le logo « MakeUseOf » est maintenant beaucoup plus tendue.

Ce fut une introduction très douce aux transformations CSS3. En dépit CSS3 étant très nouvelle en effet, vous pouvez voir maintenant que vous pouvez faire beaucoup de manipulations très intéressantes avec elle.

5.3 Testez-vous

• Comment pouvons-nous appliquer un style à un élément en vol stationnaire?
• Comment vous faites pivoter une image en utilisant CSS3?
• Comment avez-vous l`échelle d`une image à l`aide CSS3?
• Qu`est-ce qui se passe si vous passez votre méthode transform « traduire (50px, 50px)?

Lectures complémentaires:

HTML5 Rocks - Présentation

6. Just Enough javascript

Si vous voulez utiliser script dans votre navigateur Web, vous devez utiliser javascript. Il n`y a pas deux façons de voir cela, malheureusement. C`est un langue qui a de nombreux fans, et de nombreux détracteurs aussi. Comme langues vont, il a beaucoup de verrues. Il y a une raison pour laquelle le livre le plus remarquable au sujet de la langue est appelée « javascript: The Good Parts.Qu`est-ce que javascript et comment ça marche? [Technologie Explained]Qu`est-ce que javascript et comment ça marche? [Technologie Explained]Lire la suite

Il sera impossible de vous apprendre comment utiliser javascript dans un seul chapitre. Ce n`est pas le but ici. Le but est de vous apprendre suffisamment javascript pour que vous puissiez comprendre le chapitre suivant, qui consiste à utiliser une technologie appelée toile pour faire des dessins et des animations.

6.1 Accès à la console

Pour ce faire, nous allons utiliser la console javascript qui est intégrée dans chaque copie de Google Chrome. Pour y accéder, vous pouvez cliquer droit sur une page Web, puis appuyez sur « Inspecter l`élément ». Cliquez ensuite sur « Console ». Vous devriez voir ça.

Il est traditionnel que le premier programme tout développeur en herbe écrit est toujours le programme « Bonjour tout le monde ». Ceci est un programme simple qui imprime l`expression « Bonjour tout le monde », et pas grand-chose. Dans votre console, tapez « console.log ( « Bonjour tout le monde! ») -.

6.2 Votre premier programme

Alors, qu`est-ce que nous faisons exactement? Tout d`abord, nous avons appelé ce qu`on appelle « console.log ». Ceci est un peu de code qui est intégré dans l`ordinateur qui affiche simplement ce que vous lui dites. Nous avons ensuite joint quelques parenthèses à, et inclus les guillemets doubles de Bonjour tout le monde. On appelle cela « arguments` qui passent, et le type d`argument nous avons passé est appelé une chaîne. Chaque fois que vous voulez faire quelque chose qui implique des lettres et des caractères spéciaux, vous devez simplement utiliser des guillemets simples. Toutefois, si vous voulez faire quoi que ce soit en utilisant des nombres, vous n`avez généralement pas besoin d`utiliser des guillemets, comme on le voit ci-dessous.

6.3 Variables en javascript

Vous pouvez également passer des variables à « console.log » aussi. Les variables sembler compliqué, mais tout ce qu`ils sont vraiment est un espace pour mettre des morceaux d`information. Ce sont souvent des chiffres ou des lettres. Pour ce faire, vous déclarez une variable en utilisant le mot-clé « var », donnez-lui un nom, puis avec un signe égal, vous lui donnez une valeur. Alors, je vais créer une variable appelée « bonjour » et lui donner une valeur de « Bonjour tout le monde! ». Je puis aller passer que pour CONSOLE.LOG.

Notez que je ne suis pas passé « bonjour » à l`aide de citations console.log. C`est parce que je voulais imprimer sur la console le contenu de « bonjour » et non « bonjour » lui-même.

6.4 Quelles sont les fonctions de

Il peut être un peu fastidieux de réécriture, encore et encore le même morceau de code, il est donc pour cette raison que nous écrivons des fonctions. Les fonctions sont plus faciles que vous pensez. Tout ce qu`ils sont est des morceaux de code que nous pouvons réutiliser sans réécrire le même code. Ci-dessous, nous avons créé une fonction appelée « sup » et passons un argument utilisant des parenthèses qui est ensuite ouvert une session à l`écran. Nous appelons « sup » en envoyant à la console « sup ( « Bonjour tout le monde! ») -.

6.5 Répétition une action avec A « pour » boucle

Supposons que vous vouliez faire la même action pour un certain nombre de fois. Il est pour cette raison pour laquelle nous utiliserions une boucle « pour ». Ils font peur au début, mais sont si faciles à faire une fois que vous les comprenez. Vous commencez par écrire « pour () ».

Dans ces parenthèses, nous allons vouloir créer une variable qui compte combien de fois nous avons effectué une action. Donc, nous obtenons quelque chose qui ressemble à ce « for (var i = 0).

Nous voulons alors vérifier que je n`a pas satisfait à une condition. Donc, dans ce cas, nous voulons que c`est inférieur à 10. Ainsi, après le point-virgule, on écrit « i lt; dix`. Notre boucle ressemble maintenant à ceci: « for (var i = 0 i lt; dix-).

Si i est inférieur à 10, nous voulons ajouter un puis faire quelque chose. Donc, nous avons mis « i = i + 1` . Notre boucle est presque terminée: « for (var i = 0 i lt; 10 i = i + 1). Notez comment la dernière partie ne dispose pas d`un point-virgule.

Après cela, nous allons vouloir faire une action. Ainsi, après les dernières parenthèses, nous écrivons des accolades et entre eux, nous nous allons console.log la valeur de i. Cela va créer un compteur qui compte jusqu`à neuf.

Les deux dernières constructions de programmation que nous allons examiner sont « si » et des déclarations « tandis que » boucles.

6.6 Si états

Une déclaration « si » effectue une action si certains critères sont respectés. Ils sont similaires à « pour » boucles dans la construction et le travail comme suit. Supposons que vous ayez une variable appelée « cheeseburgers` et que vous voulez voir si elle a une valeur de « savoureux ». Le cas échéant, vous voulez vous connecter Yum, cheeseburgers` à l`écran. Pour ce faire vous écrire quelque chose comme ça.

Notez comment je l`ai écrit « if (cheeseburgers == « savoureux »). Vous utilisez equals double ou triple pour vérifier l`égalité et un seul égaux pour attribuer une valeur.

Video: Tutoriel FR | Commencez à programmer en HTML #1

6.7 While

Enfin, une boucle while exécute une action, tandis qu`un critère est rempli. Alors, imaginez que vous voulez vous connecter « miam, cheeseburgers` tout en cheeseburgers égaux savoureux. Pour ce faire, vous devez écrire ce qui suit.

Il convient de noter que cela entrer dans une boucle infinie, et vous devez éviter de faire une action sur une valeur qui ne risque pas de changer. Cela peut entraîner votre navigateur pour bloquer ou votre code de ne pas fonctionner.

Comme je l`ai mentionné précédemment, ce fut une très brève introduction à des constructions de programmation en javascript. Nous vous invitons à en savoir plus sur ce fascinant, quoique sujet énorme.

6.8 Testez-vous

• Je veux compter vers le bas de 30. Ecrire une boucle « pour » qui ferait cela.
• Je veux créer une variable appelée « MakeUseOf » et lui donner une valeur de « génial ». Comment cela se fait?
• Je veux créer une fonction qui imprime de MakeUseOf est impressionnant » lorsqu`il est appelé. Ecrire cette fonction.

Lectures complémentaires:

• « javascript: The Good Parts » par Douglas Crockford
• Guide javascript MDN

7. Toile Creative

La toile est une technologie fraîche qui vous permet de dessiner des images et créer des animations sans avoir à recourir à l`utilisation de Flash ou Silverlight. Les gens ont utilisé pour créer des choses bizarres et merveilleuses, y compris un simulateur de sèche-cheveux et divers jeux vidéo. Il est un merveilleux et insondable grand morceau de la technologie, dans ce tutoriel, je vais vous donner une brève introduction à elle.

Il convient de noter que Canvas ne fonctionne que sur les navigateurs web modernes. Si vous utilisez une ancienne version d`Internet Explorer, Chrome ou Firefox, vous ne pouvez pas être en mesure de suivre ce chapitre. Si tel est le cas, vous devriez envisager de télécharger la dernière version de Google Chrome, qui était le navigateur Web dans lequel j`ai créé ce tutoriel.

7.1 Mise en route avec la toile

Tout d`abord, vous allez avoir besoin d`ouvrir votre navigateur Web et accédez à codepen.io. Créer un nouveau stylo.

Maintenant, nous allons devoir déclarer un élément de toile. Créer deux balises toile d`ouverture et de fermeture. En eux, vous devriez passer trois attributs. Ce sont la largeur et la hauteur de l`élément Canvas, ainsi que l`ID que vous lui donnez. Comme avant lorsque vous insérez une vidéo, vous devez inclure un message de secours.

Maintenant, nous allons vouloir écrire un code javascript qui attirera quelque chose à l`écran. Nous allons commencer de base et créer un simple carré rouge.

Nous allons créer une variable (je l`ai appelé « démo `), puis sélectionnez l`élément canvas et l`affecter à cette variable. Pour ce faire, vous utilisez document.getElementById () et passer dans l`ID de l`élément que vous souhaitez sélectionner.

La deuxième ligne dans notre script crée une autre variable appelée « contexte » et appelle « demo.getContext ( « 2d « ) » dessus. Cela dit au navigateur que nous allons travailler sur une image 2D, puis passé les fonctions nécessaires, nous aurions besoin de afin d`en tirer à l`écran.

Les troisième et quatrième lignes sont celles qui réellement le dessin à l`écran. La troisième ligne remplit un rectangle avec la couleur rouge, tandis que la quatrième ligne appelle fillRect, qui le positionne et définit sa longueur et sa largeur.

Ce n`est pas impressionnant bien. Faisons quelque chose un peu plus avancé et d`utiliser la magie de javascript et de créer Canvas MakeUseOf un tout nouveau logo.

7.2 Formes et Texte

Supprimons notre quatrième ligne, et le remplacer par celui qui place notre rectangle dans le coin supérieur gauche et étire pour la longueur de notre toile.

Les deux premiers arguments définissent où nous voulons positionner l`axe x et y de la forme. Fixons ces deux « 0` pour l`instant. Le troisième argument se réfère à la largeur de la forme. Fixons que pour « 200` , puis laisser le quatrième argument de « 50 ». Vous devriez maintenant avoir quelque chose qui ressemble un peu comme ça.

Ceci est un bon début, mais il ne mentionne pas du tout MakeUseOf. Donc, nous allons ajouter un peu de texte. Créons une variable contenant « MakeUseOf », et nous appellerons cette variable « MakeUseOf ».

Nous allons ensuite vouloir créer une autre variable de contexte. Appelez celui-ci « contexte2` , et assurez-vous qu`il est 2d. Il est ce que nous allons utiliser pour écrire notre texte.

Nous allons voulons que notre texte à couleur bleue et de superposer notre carré rouge. Alors, comme avant, nous allons vouloir donner un fillStyle de « bleu ». Maintenant, nous allons sélectionner les caractéristiques de notre texte. Nous voulons que ce soit 20px grand, gras et mis en forme en utilisant une police Arial. Nous appelons la police sur contexte2 et lui attribuer la valeur « arial 20px gras ».

Parce que nous voulons que ce texte à superposer notre précédente boîte rouge, nous devons appeler « TextBaseline » sur contexte2 et lui donner une valeur supérieure. Une fois que cela a été terminé, nous appelons « fillText » sur contexte2 et transmettons la variable contenant notre texte et les coordonnées x et y dans laquelle nous avons l`intention de placer notre texte. Le résultat final de notre code est quelque chose comme ça.

L`image qui est produit par le code ressemble à ceci.

7.3 Un mot sur la toile

Bien que cela soit une introduction très basique à la toile, vous devez comprendre qu`il est également une technologie incroyablement grande, et un puissant pour un incroyablement démarrer. Ce guide simplement servi d`introduction à rendre graphiques en utilisant cette nouvelle technologie.

7.4 Testez-vous

• Ajouter le slogan suivant à l`image que vous avez créé: « Le meilleur site tech jamais »
• Créer une boucle « pour » qui fonctionne pendant dix itérations. Voyez si vous pouvez déplacer votre dessin sur la toile, un pixel à la fois.
• Enveloppez votre dessin dans une fonction. Qu`est-ce qui arrive si vous ne l`appelez pas?

Lectures complémentaires:

• HTML5 Rocks - toile Intégration dans vos applications Web.
• Cabane dans un arbre - Comment dessiner avec toile

8. ensuite?

Merci d`avoir lu mon guide incroyablement bref aux nouvelles technologies trouvées dans HTML5. Il est indéniable que HTML5 est la technologie de l`avenir. Il est adopté par la plupart des technologies, comme il est facile d`écrire et puissant au-delà de la mesure. Les gens font des choses incroyables avec tout le temps, et je ne doute pas que dans l`avenir, vous serez une de ces personnes. Je suis honoré d`avoir fait partie de votre voyage dans le monde sauvage et merveilleux de HTML5.

Je vous supplie de continuer à apprendre. Continuez à coder. Continuez à monter de niveau et d`améliorer, et en un rien de temps, vous utiliserez les technologies qui ont été introduites dans ce guide pour créer des produits merveilleux.

Si vous avez des questions, s`il vous plaît ne pas hésiter à me contacter. Mes adresses e-mail sont [email protected] et [email protected]

HTML5 Tutoriel Publié: Juillet 2013