Share
Apprendre une nouvelle compétence est souvent intimidant au début; savoir par où commencer, qui écouter et quoi ignorer - il peut être difficile de se mettre en mouvement. C'est ce que ce post est pour. Cela vous aidera à planifier ce qu'il faut apprendre et dans quel ordre, en espérant que ce qui semble être un gros obstacle beaucoup plus bas, en vous maintenant intéressé et en vous encourageant à continuer d'apprendre!
C'est la partie la plus cruciale de tout processus d'apprentissage - une fois que vous avez pris la décision d'élargir vos horizons en apprenant une nouvelle compétence, vous êtes le premier obstacle à franchir! Peut-être que vous êtes un designer et que vous cherchez à aller au-delà du stylo, du papier et de Photoshop, peut-être n'avez-vous jamais rien eu à faire avec le Web, peu importe. À présent vous voulez construire des pages Web et avec l'aide des ressources énumérées ci-dessous, vous allez craquer le HTML en un rien de temps.
Pour commencer, nous allons parler très littéralement des bases du HTML, après quoi nous examinerons les ressources et les affectations pour continuer à faire avancer les choses..
Il est important que vous sachiez ce qu'est le code HTML. Voici donc une définition rapide du World Wide Web Consortium (W3C), qui travaille sans relâche pour créer un site Web normalisé:
HTML est la langue de publication du World Wide Web.
La fin. C'était facile, non? Avec HTML (HyperText Markup Language), vous pouvez créer des documents prêts à être publiés sur le Web. Un balisage HTML bien écrit (comme il est appelé) décrit la structure du contenu dans un document. Vous pouvez spécifier quels bits du document sont des en-têtes, quels bits sont des paragraphes, établir des relations simples entre des éléments de contenu et même définir certains comportements de base.
Cela dit, commençons par votre premier fichier HTML. Vous aurez besoin d'un éditeur de texte brut (tel que TextEdit par défaut sous OS X ou le Bloc-notes Windows). À présent:
Vous avez maintenant besoin de votre deuxième application, un navigateur Web. Il existe plusieurs principaux acteurs sur le marché des navigateurs, mais que vous utilisiez Internet Explorer, Google Chrome, Firefox, Safari ou Opera (entre autres), votre fichier index.html s'ouvrira presque certainement dans le navigateur de votre choix, par défaut..
Ce qui est important, c’est qu’un navigateur, lorsqu'il se rend compte qu’il s’agit d’un fichier .html, sait traiter le contenu au format HTML. Techniquement, nous n'avons pas fourni le code HTML correct ici, mais les navigateurs vous réduiront considérablement le temps libre - la simple présence de l'extension du fichier .html en dit assez à notre navigateur. Nous n'avons écrit qu'une simple ligne de texte, mais regardez comment le navigateur l'interprète:
Ne vous inquiétez pas pour cette fenêtre de débogage pour l'instant, c'est juste utilisé pour illustrer notre propos..
Donc, cela prend en charge votre première étape en HTML! Vous comprenez maintenant ce que c'est, ce qu'il faut pour commencer à l'écrire et commencez à comprendre ce que les navigateurs en font.
Avant de plonger dans une ressource, il est nécessaire de connaître quelques principes de base supplémentaires. Vous vous souvenez des morceaux de code supplémentaires que notre navigateur semblait ajouter? C'étaient des balises HTML, les blocs de construction du balisage HTML. Une balise décrit un élément et met en évidence ce fait à l'aide de chevrons. C'est le balise d'ouverture de l'élément html que nous avons vu plus tôt:
En plus de ce qu’on appelle une déclaration doctype, nous utilisons la balise html pour lancer notre document, puis nous terminons notre document avec un accompagnement. balise de fermeture:
Voir la barre oblique dans la deuxième balise? C'est ce qui dénote une balise de fermeture. Tout ce que nous plaçons entre les balises HTML d'ouverture et de fermeture est notre document HTML. Et c'est le premier principe des paires de balises HTML; ils enveloppent le contenu de quelque sorte. Ces deux enveloppent le contenu d'un paragraphe:
D'accord, nous allons revoir notre fichier index.html d'origine une fois de plus, alors je vous promets que nous allons parler de ressources d'apprentissage. Vous voyez comment les balises HTML entourent les autres balises? C'est ce qu'on appelle nidification. Les étiquettes peuvent envelopper d'autres étiquettes. Ensuite, ces balises peuvent même envelopper plus de balises, et cette imbrication peut durer indéfiniment. Comme des poupées Matryoshka exponentielles…
De cette façon, nous pouvons créer des sections d’une page Web; un en-tête qui contient des en-têtes et des règles horizontales. Les paragraphes qui contiennent des ancres et des étendues. Pied de page contenant des listes contenant ensuite des liens. Ceci est la base de la construction de la structure HTML.
Regardez cette illustration. En haut se trouve le balisage HTML, en dessous, une représentation visuelle de la manière dont les éléments sont imbriqués les uns dans les autres..
Après avoir compris les bases absolues, il est temps d'aller de l'avant et de bien comprendre les principes fondamentaux de HTML. Il y a deux ou trois cours que je vous recommande de consulter. complétement gratuit et vaut la peine de suivre du début à la fin.
Assez académiques pour le moment, prenons une pause et vérifions quelques outils pour faciliter notre codage HTML. Jusqu'à présent, j'ai seulement suggéré des éditeurs de texte brut simples pour créer vos fichiers HTML. C’est parfait, mais il existe des éditeurs de code que vous trouverez beaucoup plus intuitif à utiliser..
Les principaux avantages de l’utilisation d’un éditeur de code spécialement conçu sont les suivants:
Il existe de nombreux autres avantages, mais ceux-ci deviendront évidents une fois que vous serez plus impliqué dans l'écriture de code. Alors, quelles sont vos options? En voici quelques unes:
Pour plus d'informations sur les nombreux éditeurs de code disponibles, consultez le Guide du concepteur Web pour le codage d'applications et 18 IDE merveilleux pour Windows, Mac et Linux..
Il est grand temps de vous salir les mains et de mettre en pratique vos nouvelles compétences. Relevez le défi en construisant la structure de balisage HTML pour les choses suivantes:
Accentsconagua
!doctype, la </code>, <code><meta></code> balises et <code><link></code> Mots clés.</li> <li> <strong>Un article de blog</strong>Typographiquement, un article peut contenir tous les acteurs importants du balisage HTML. Commencez par un <code><article></code> lui-même, peut-être un <code><h2></code> titre, <code><p></code> tags bien sûr, peut-être parsemé de <code><em></code> des balises pour souligner ou <code><strong></code> texte. Vous pouvez même utiliser un balisage moins évident comme un <code><blockquote></code> et une règle horizontale <code><hr></code>.</li> <li> <strong>Portefeuilles miniatures</strong>: Les choses peuvent commencer à devenir un peu plus complexes maintenant, mais n'oubliez pas; vous ne personnalisez pas tout cela, vous essayez simplement de structurer les blocs de construction de la manière la plus propre et la plus logique possible. Dans ce cas, vous pourriez utiliser une liste non ordonnée <code><ul></code>, avec des éléments de liste <code><li></code> pour tenir chacune des vignettes. Chaque vignette comprendrait probablement une image <code><img></code> (ce qui vous donnera la chance de jouer avec les attributs src et alt) enveloppé dans une ancre <code><a></code> qui sera lié à une version plus grande. Beaucoup de bonté nidification là-bas.</li> </ul> <p>Gardez votre balise propre et indentez les balises imbriquées pour améliorer la lisibilité. En outre, prenez l’habitude de laisser des commentaires pour aider les autres personnes susceptibles de travailler avec votre code:</p> <pre><div> <p>Ceci est le contenu de la div de test.</p> </div><!-- end of test div --></pre> <h3>Vérifie ton travail</h3> <p>Après avoir construit quelque chose en HTML, il est temps de le vérifier. Rendez-vous sur validator.w3.org et exécutez votre travail via le validateur. Il n'est pas toujours essentiel que votre marquage soit valide à 100%, mais viser cette grosse claque verte sur le dos est un excellent moyen de maintenir vos standards élevés..</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_9.png"> <h3>Prime!</h3> <p>Une fois que vous vous sentez confiant de construire une structure imaginaire, pourquoi ne pas vous tourner vers un design réel? Regardez un schéma de configuration et imaginez comment il se forme en termes de balisage.</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_10.png"><br>Article, de Brijan sur dribbble <hr> <h2>Devoir 4: Swot up sur le balisage</h2> <blockquote><p>Il est important de savoir où utiliser quels éléments</p></blockquote> <p>Maintenant que vous êtes à l'aise pour construire une structure HTML, il est temps d'améliorer votre vocabulaire. Lors de l’écriture du balisage, vous avez besoin du plus grand nombre possible de balises d’éléments (et il y en a assez)..</p> <p>Il est important que vous sachiez où utiliser quels éléments, non pas à des fins de style, mais afin de décrire le contenu de votre page de la manière la plus appropriée possible. C'est ce qu'on appelle la sémantique.</p> <p>Si un bloc de texte est censé être un paragraphe dans votre mise en page, utilisez un <code><p></code> tag pour le joindre. Ne pas utiliser un <code><div></code>, par exemple. L'utilisation de balises sémantiques rend vos pages Web efficaces, plus accessibles pour les navigateurs, les lecteurs d'écran, les moteurs de recherche - et même pour d'autres dispositifs qui n'ont pas encore été inventés! Décrivez bien votre contenu et aidez le Web à devenir un meilleur endroit, croyez-moi..</p> <p>Voici quelques ressources solides couvrant les éléments HTML et leurs finalités:</p> <ul> <li> html5doctor.com est une collaboration entre les esprits les plus avertis du secteur, expliquant clairement comment utiliser le code HTML sémantique..</li> <li> Éléments HTML sur Mozilla. Notez le petit <strong>5</strong> icônes par certains des éléments? Ils indiquent que ces éléments sont des ajouts récents à la spécification HTML, actuellement appelée HTML5..</li> </ul> <hr> <h2>Devoir 5: Lire un livre</h2> <p>Avoir des livres sous la main est toujours idéal pour référencer des choses, ou même (assez étonnamment) lire de bout en bout. À cette étape de votre parcours en HTML, prenez le temps de vous procurer quelques livres de référence. Je recommande:</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_11.png"> <ul> <li> Sites Web de conception et de construction HTML et CSS - il est intéressant de se procurer entre autres pour la qualité de la présentation.</li> <li> Décoder HTML5 de Rockable Press - Ce livre offre un aperçu du fonctionnement politique des normes HTML..</li> <li> HTML5 POUR LES CONCEPTEURS WEB de A Book Apart - Si vous ne possédez pas encore de publication A Book Apart, le moment est propice pour vous présenter..</li> <li> Introduction de HTML5 par Bruce Lawson et Remy Sharp - commence à être un peu complexe en termes d’autres fonctionnalités offertes par HTML5, mais c’est un livre HTML qui vaut vraiment la peine d’être vérifié..</li> </ul> <hr> <h2>Mission 6: Participer à la communauté</h2> <p>Voici la meilleure partie d’être un professionnel du Web: la communauté. Chaque fois que vous avez une question ou un problème, il y a toujours quelqu'un qui a rencontré la même chose et qui voudra vous aider. Rejoignez les forums et les communautés créatives, demandez de l'aide et offrez des conseils dès que vous êtes suffisamment en confiance pour le faire.!</p> <p>Impliquez-vous en prenant part aux communautés suivantes:</p> <ul> <li> Stack Overflow: la meilleure communauté de questions et réponses techniques sur le marché. Vous apprenez le HTML? Il y a déjà pas mal de discussions en cours… </li> <li> Forrst: un endroit idéal pour des commentaires créatifs et techniques sur les projets sur lesquels vous travaillez. C'est une invitation seulement si vous voulez participer, mais traînez dans les couloirs assez longtemps et quelqu'un vous laissera entrer… </li> <li> GitHub: principalement un référentiel en ligne ouvert permettant de stocker et de modifier le code de votre propre code, GitHub offre un apprentissage en observant comment les autres le "font". Beaucoup de projets sur GitHub sont avancés pour les débutants en HTML, mais gardez cela à l'esprit pour l'avenir.</li> <li> Creattica: est une communauté en ligne pour les créatifs. Donner et recevoir des commentaires sur vos derniers projets HTML.</li> </ul> <p>Outre les communautés, les réseaux sociaux sont le moyen idéal pour interagir avec vos héros HTML, poser des questions et offrir des avis. Voici quelques Twitterers qui méritent d'être suivis pour leurs prouesses HTML:</p> <ul> <li>@ html5doctor</li> <li>@brucel</li> <li> @wdtuts naturellement… </li> <li> @nettuts naturellement… </li> <li>@LeaVerou</li> <li>@zeldman</li> <li>@meyerweb</li> <li>@smashingmag </li> </ul> <hr> <h2>Devoir 7: Accélérez votre flux de travail de balisage</h2> <p>À ce stade, vous avez une idée de ce qu'est le HTML, des éléments actuellement utilisés, de la structure du balisage sémantique, des acteurs du secteur et du prochain défi! La prochaine étape logique serait de se concentrer sur le CSS; styliser le balisage HTML, vous êtes maintenant compétent en écriture. Cependant, voyons d’abord si nous pouvons accélérer notre flux de travail de balisage avec quelques approches alternatives… </p> <h3>Réduction</h3> <blockquote><p>Markdown vous permet d'écrire en utilisant un format de texte brut facile à lire et à écrire.</p></blockquote> <p>Markdown est un moyen plus lisible d’écrire le balisage de contenu HTML. Cela permet de réduire considérablement le codage des balises en substituant tout ce qui est absurde à une syntaxe moins complexe. Une fois que vous avez écrit votre document Markdown, exécutez-le avec un analyseur (tel que Dingus) pour obtenir l’équivalent HTML bien connu..</p> <p>Par exemple, nous connaissons maintenant ces balises d'en-tête HTML:</p> <pre><h1>C'est un H1</h1> <h2>C'est un H2</h2> <h6>C'est un H6</h6></pre> <p>L'équivalent de Markdown serait:</p> <pre># Ceci est un H1 ## Ceci est un H2 ###### Ceci est un H6</pre> <p>cela signifie que vous n'avez pas à vous soucier de la fermeture des balises - et la nature indentée des en-têtes Markdown rend la hiérarchie beaucoup plus claire, plus lisible à l'œil humain.</p> <p>Markdown est de plus en plus populaire et vous le trouverez intégré aux éditeurs de code et aux systèmes de gestion de contenu. En termes de contenu Web, c'est l'idéal. Consultez la page de syntaxe pour plus d'informations ou consultez notre didacticiel récent. Documentation rapide et facile Utilisation de Markdown.</p> <h3>Emmet</h3> <p>Emmet accélère votre codage de marquage en analysant et en convertissant le code abrégé. Par exemple, au lieu de taper manuellement:</p> <pre><div> <ul> </ul> </div></pre> <p>vous utiliseriez la forme abrégée:</p> <pre>div> ul> li * 4</pre> <blockquote><p>Emmet (anciennement connu sous le nom de Zen Coding) est une boîte à outils pour développeurs Web qui peut considérablement améliorer votre flux de travail HTML et CSS:</p></blockquote> <p>Ce que cela signifie littéralement est "sortir un div, qui contient une liste non ordonnée, qui contient quatre éléments de liste".</p> <p>En fonction de l’application que vous utilisez, vous frapperez (par exemple) TAB et Emmet traitera cette syntaxe abrégée, en affichant le balisage HTML comme pour l’exemple original. Le potentiel de gain de temps devrait déjà être très clair, et Emmet ne <em>beaucoup</em> plus que notre simple exemple ici.</p> <p>Emmet peut être utilisé avec un certain nombre d’éditeurs de code et d’applications. Consultez Amélioration de votre productivité: Conseils rapides pour le codage Zen et 7 conseils géniaux pour gagner du temps avec Emmet HTML pour vous aider à démarrer rapidement..</p> <hr> <h2>Conclusion</h2> <p>En suivant un plan d’apprentissage comme celui-ci et en exploitant au maximum les ressources mentionnées, vous gagnerez du succès en HTML. Apprendre une nouvelle compétence ouvre des portes, qui sait où cette compétence vous mènera?</p> <p><strong>L'étape suivante:</strong> Maintenant que vous avez quelques compétences en HTML, jetez un coup d'œil à La meilleure façon d'apprendre les CSS.</p> <p>Toutes les suggestions d’apprentissage sont les bienvenues - criez dans les commentaires!</p>
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-3810161443300697"
data-ad-slot="9434875811"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="h-alltags">
<a href="articles/webdesign">Création de sites web</a>
</div>
</div>
</div>
</div>
</div>
<div class="next_posts clearfix">
<div class="n_post">
<div class="next_posts-h1 left_nh1"><a href="/articles/code/the-best-way-to-learn-javascript.html">La meilleure façon d'apprendre JavaScript</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_26_1/the-best-way-to-learn-javascript_2.jpg');"></div>
</div>
<div class="n_post">
<div class="next_posts-h1 right_nh1"><a href="/articles/webdesign/the-best-way-to-learn-css.html">La meilleure façon d'apprendre le CSS</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_19/the-best-way-to-learn-css_17.png');"></div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-langs">
<ul class="site-langs-list">
<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>
<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
</ul>
</div>
<div class="h-block"><a href="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro.
</div>
</div>
</footer>
<div class="search">
<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<input class="searchmain" type="text" id="search-input" placeholder="Chercher...">
<ul class="searchli" id="results-container"></ul>
</div>
</div>
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/scripts.min.js"></script>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".search");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<script src="jquery.unveil2.min.js"></script>
<script>
$('img').unveil();
</script>
</body>
</html>