Remerciez-le!

Remerciez @Admin pour avoir partagé cet document gratuitement, de la manière la plus simple, en partageant sur les réseaux sociaux.

HTML5 : le guide du débutant Par Robert Mening - Florent Montoya (traducteur) D

HTML5 : le guide du débutant Par Robert Mening - Florent Montoya (traducteur) Date de publication : 14 août 2015 Cela prend un certain temps pour apprendre le HTML, mais ce n'est pas aussi difficile que vous pourriez le penser. Avoir au moins quelques notions de HTML est nécessaire pour tout webmaster. N'oubliez pas que le HTML a été développé en 1993. Vous pouvez donner vos avis et remarques sur cet article sur le forum : Commentez. HTML5 : le guide du débutant par Robert Mening I - HTML5 : le guide du débutant................................................................................................................................3 II - Introduction.............................................................................................................................................................3 III - Scénario................................................................................................................................................................ 3 IV - Éditeur de texte.................................................................................................................................................... 4 V - Balises....................................................................................................................................................................4 VI - Balises Section..................................................................................................................................................... 5 VI-A - Aside............................................................................................................................................................ 5 VI-B - Footer...........................................................................................................................................................5 VI-C - Article...........................................................................................................................................................5 VI-D - Header......................................................................................................................................................... 6 VI-E - Nav...............................................................................................................................................................6 VII - Formulaire............................................................................................................................................................6 VIII - Musique et vidéo................................................................................................................................................ 8 IX - Blog.....................................................................................................................................................................10 X - Typographie......................................................................................................................................................... 12 XI - C'est l'heure de faire le ménage........................................................................................................................ 13 XII - Conclusion......................................................................................................................................................... 15 XIII - Remerciements Développez.............................................................................................................................15 - 2 - Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2015 Robert Mening. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. https://websitesetup.developpez.com/tutoriels/html5/guide-debutant/ HTML5 : le guide du débutant par Robert Mening I - HTML5 : le guide du débutant La capacité à créer de belles et convaincantes pages web est une compétence utile qu'il faut avoir. Elle vous permet de présenter des informations qui vous intéressent tout en capturant l'attention des personnes qui visitent votre page web. Si vous ne souhaitez pas utiliser les gestionnaires de contenu (tels que WordPress, Drupal et Joomla) pour mettre sur pied votre site web et que vous voulez apprendre les bases du HTML5, alors ce guide est fait pour vous ! Et au fait, une fois que vous aurez appris les ficelles du métier pour le HTML5, je vous suggère de jeter un œil à ma « Fiche de révision HTML5» ci-dessous. Fiche de révision pour le HTML5 II - Introduction Historiquement, les sites web sont créés à partir du HTML, du CSS et du JavaScript. Ils sont connus en tant que technologies front-end et contrôlent l'esthétique du site web. Ces dernières années ces outils ont eu droit à une énorme refonte et peuvent maintenant se vanter de disposer d'incroyables fonctionnalités, qui vous permettent de faire des choses qui auraient été impossibles auparavant sans l'utilisation d'une technologie back-end difficile à manipuler, telle que le PHP, Perl ou Ruby On Rails. Ce renouveau est appelé HMTL5, et il est utilisé avec beaucoup d'enthousiasme par les entreprises et les développeurs. Dans cet article, je vais vous montrer comment utiliser les différents aspects du HTML5 dans vos propres projets de sites web. Et bien qu'avoir de l'expérience dans le web design de base est utile, elle n'est pas essentielle. III - Scénario Charlie and the Roundheads est un groupe de rock indépendant du coin d'Huntingdon Beach en Californie qui a récemment signé avec un gros studio d'enregistrement. Leur manager A&R (Artists and Repertoire) souhaite vraiment qu'ils aient un site web, et il vous a embauché pour le créer ! Vous devrez ajouter des fonctionnalités pour écouter de la musique en streaming, un endroit où Charlie and the Roundheads pourront partager leurs clips musicaux, poster des messages ainsi qu'une zone où les fans pourront s'inscrire et recevoir par e-mail les nouveautés du groupe. En plus de tout ceci, le code devra être propre et représentatif des styles de codage moderne en HTML5. Même si tout ça peut sembler intimidant au premier abord, ça ne l'est pas du tout. Durant les prochaines trente minutes, vous allez apprendre comment faire tout ça, et bien plus encore. - 3 - Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2015 Robert Mening. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. https://websitesetup.developpez.com/tutoriels/html5/guide-debutant/ HTML5 : le guide du débutant par Robert Mening IV - Éditeur de texte Premièrement, nous devons parler des outils que nous allons utiliser pour rédiger notre code. Vous êtes probablement familiarisé avec Microsoft Word ou Apple Pages. Ce sont des logiciels de traitement de texte qui conviennent bien à l'écriture de lettres et de documents, mais complètement inappropriés pour écrire du code. Ceci est dû à plusieurs raisons ; la principale étant que les logiciels de traitement de texte créent des fichiers difficilement lisibles par les navigateurs internet tels qu'Internet Explorer, Chrome et Safari et ajoutent aux documents web des formatages et informations superflus. Alors qu'en fait, nous avons besoin de créer des fichiers aussi simples que possible. Ils sont appelés fichiers « plain text », ou « texte brut » en français. Pour créer et modifier ces fichiers, nous utilisons des éditeurs de texte. Vous pouvez connaître Notepad sur Windows. C'est un exemple d'éditeur de texte que l'on peut utiliser, bien qu'il soit un des plus basiques. Les programmeurs et les web designers ont tendance à utiliser des éditeurs de texte qui sont plus efficaces pour écrire du code. Ici on trouve beaucoup de choix Si vous êtes sous Windows, vous pouvez essayer Notepad++ ou TSW WebCoder. Certaines versions de Linux sont fournies avec Gedit, qui est un éditeur de texte remarquablement efficace pour les codeurs. Les utilisateurs de OS X pourraient trouver TextMate plus adapté à leurs besoins. Pour ce tutoriel, je vais utiliser Sublime Text 2. Disponible sur OS X, Linux et Windows, c'est un éditeur de texte polyvalent et puisqu'il n'est pas gratuit, il propose une version d'essai illimitée. Alors s'il vous plaît, téléchargez et installez-le avant de poursuivre plus loin dans ce tutoriel. V - Balises HTML est l'acronyme de « Hypertext MarkUp Language » et se réfère au code qui structure tous les éléments d'une page web. Il ne définit pas le style de la page et n'ajoute pas d'interactivité complexe. Il laisse tout ça au CSS et au JavaScript que nous verrons plus loin dans cet article. Premièrement, jetons un œil à la façon de structurer notre document et comment créer un formulaire d'inscription. Nous nous intéresserons plus tard à l'esthétique. Pour commencer, créez un nouveau dossier où vous allez ranger tout votre code. Lancez Sublime Text 2 et créez un nouveau fichier. Enregistrez-le avec l'extension « signup.html », et assurez-vous qu'il se trouve bien dans le dossier que vous avez créé. Maintenant, ajoutons un peu de code. - 4 - Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2015 Robert Mening. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts. https://websitesetup.developpez.com/tutoriels/html5/guide-debutant/ HTML5 : le guide du débutant par Robert Mening signup.html 1. <!doctype html> 2. <html lang="fr"> 3. <head> 4. <meta charset="UTF-8"> 5. <title>Document</title> 6. </head> 7. <body> 8. 9. </body> 10. </html> Cela peut sembler un peu intimidant comme ça, mais c'est le code de base que l'on retrouve sur tous les sites web. Vous remarquerez que vous avez deux balises <html>qui entourent tout le reste, ainsi qu'une paire de balises <head> et <body>. Mais que font-elles ? Donc, <head> est l'endroit où vous stockez les choses telles que les métadonnées (elles sont utiles pour vous faire remarquer dans un moteur de recherche), le titre de votre page, ainsi que les fichiers externes CSS et JavaScript. <body>est l'endroit où va tout le reste, et c'est ici que nous allons nous concentrer. Mais tout d'abord, nous allons voir comment les sites web sont structurés. Si vous visitez les sites web d'entreprises telles que The Guardian, BCC, CNN et Fox News, vous pourrez remarquer qu'ils partagent certains points. Ils ont des headers (ou en-têtes en français), des pieds de page (footers), des articles, des barres latérales et certains onglets qui contiennent des informations en rapport avec les articles, mais qui n'en sont pas des parties intégrantes. Comme vous pouvez vous y attendre, il y a de nombreuses balises en HTML qui sont clairement utilisées dans ces cas. Puisqu'elles n'ont été introduites que très récemment aux nouveaux standards du HTML5, elles uploads/S4/ html-le-guide-du-debutant.pdf