Share
Het leren van een nieuwe vaardigheid is in het begin vaak intimiderend; weten waar te beginnen, naar wie moet luisteren, wat te negeren - het kan een moeilijk proces zijn om in beweging te komen. Daar is deze post voor. Het zal je helpen plannen wat te leren en in welke volgorde, hopelijk maakt dat wat een grote hindernis lijkt veel lager, waardoor je geïnteresseerd blijft en je aanmoedigt om verder te leren!
Dit is het meest cruciale onderdeel van elk leerproces - zodra je de beslissing hebt genomen om je horizon te verbreden door een nieuwe vaardigheid te leren, ben je de eerste hindernis voorbij! Misschien ben je een ontwerper en kijk je verder dan pen, papier en Photoshop, misschien heb je eerder niets met internet te maken gehad, het maakt niet uit. Nu je wilt webpagina's bouwen en met behulp van de onderstaande bronnen kun je HTML snel kraken.
Om te beginnen zullen we heel letterlijk over de basisprincipes van HTML praten, waarna we zullen kijken naar middelen en opdrachten om de bal aan de gang te houden.
Het is belangrijk dat u weet wat HTML is, dus hier is een snelle definitie van het World Wide Web Consortium (W3C) die zich onvermoeibaar inzetten voor een gestandaardiseerd web:
HTML is de publicatietaal van het World Wide Web.
Het einde. Dat was makkelijk, toch? Met HTML (HyperText Markup Language) kunt u documenten maken die klaar zijn voor publicatie op internet. Goed geschreven HTML-opmaak (zoals er naar wordt verwezen) beschrijft de structuur van de inhoud in een document. U kunt opgeven welke bits van het document kopteksten zijn, welke bits alinea's zijn, eenvoudige relaties tot stand brengen tussen stukjes inhoud en zelfs bepaalde basishapjes instellen.
Dat gezegd hebbende, laten we beginnen met uw eerste HTML-bestand. U hebt een gewone teksteditor nodig (zoals de standaard TextEdit op OS X of Windows Kladblok). Nu:
Nu hebt u uw tweede toepassing, een webbrowser, nodig. Er zijn verschillende hoofdrolspelers op de browsermarkt, maar of u nu Internet Explorer, Google Chrome, Firefox, Safari of Opera gebruikt (en andere), uw index.html-bestand zal vrijwel zeker standaard openen in uw browser naar keuze.
Wat belangrijk is, is dat een browser, wanneer hij zich realiseert dat hij te maken heeft met een .html-bestand, weet dat de inhoud als HTML moet worden verwerkt. Technisch gezien hebben we hier niet de juiste HTML-code gegeven, maar browsers zullen je veel speling bezorgen - de aanwezigheid van de .html-bestandsextensie vertelt onze browser genoeg. We hebben alleen een eenvoudige regel tekst geschreven, maar kijk eens hoe de browser het eigenlijk interpreteert:
Maak je geen zorgen over dit foutopsporingsvenster, het wordt alleen gebruikt om ons punt te illustreren.
Dus dat zorgt voor uw eerste stap in HTML! Je begrijpt nu wat het is, wat ervoor nodig is om het te schrijven en begint te begrijpen wat browsers ermee doen.
Voordat we in bronnen duiken, is het nodig om nog enkele basisprincipes onder onze riem te krijgen. Herinner je je de extra stukjes code die onze browser leek toe te voegen? Dat waren HTML-tags, de bouwstenen van HTML-markup. Een tag beschrijft een element en benadrukt dat feit met behulp van punthaken. Dit is de openingstag van het html-element dat we eerder zagen:
Afgezien van wat bekend staat als een doctype-verklaring, gebruiken we de html-tag om ons document af te schaffen, waarna we ons document afronden met een begeleidend document afsluitende tag:
Zie de schuine streep in de tweede tag? Dat is wat een afsluitende tag betekent. Alles wat we plaatsen tussen de openende en sluitende html-tags is ons HTML-document. En dat is het eerste principe van HTML-tagparen; ze verpakken inhoud van een soort. Deze twee omwikkelen de inhoud van een alinea:
Oké, we gaan nog eenmaal terug naar ons oorspronkelijke index.html-bestand, dan beloof ik dat we het echt over leermiddelen zullen hebben. Zie je hoe de html-tags rond andere tags zijn gewikkeld? Dat wordt de term genoemd nesting. Tags kunnen om andere tags heen lopen. Dan kunnen die tags zelfs meer tags omsluiten, en dit nesten kan oneindig doorgaan. Zoals exponentiële Matryoshka-poppen ...
Op deze manier kunnen we delen van een webpagina opbouwen; een koptekst met koppen en horizontale regels. Paragrafen met ankers en overspanningen. Voetteksten die lijsten bevatten die vervolgens koppelingen bevatten. Dit is de basis voor het bouwen van HTML-structuur.
Bekijk deze illustratie. Aan de bovenkant is de HTML-markup, hieronder is een visuele weergave van hoe de elementen in elkaar zijn genest.
Als je de absolute basis hebt begrepen, is het tijd om verder te gaan en een goed begrip te krijgen van HTML-fundamentals. Er zijn een paar cursussen waarvan ik u aanraad om deze eens te bekijken, beide zijn dat helemaal vrij en zeker de moeite waard om te volgen van begin tot eind.
Genoeg academie voorlopig, laten we even pauzeren en wat hulpprogramma's uitchecken om onze HTML-codering eenvoudiger te maken. Tot nu toe heb ik alleen eenvoudige platte teksteditors voorgesteld voor het maken van uw HTML-bestanden. Dit zijn prima, maar er zijn code-editors beschikbaar die je veel intuïtiever kunt gebruiken.
De belangrijkste voordelen van het gebruik van een speciaal ontworpen codebewerker zijn:
Er zijn veel meer voordelen, maar die worden duidelijk zodra je meer betrokken raakt bij het schrijven van code. Dus wat zijn jouw opties dan? Hier zijn er slechts een paar:
Raadpleeg A Web Designer's Guide to Coding Apps en 18 Wonderful IDE's voor Windows, Mac en Linux voor meer informatie over de vele code-editors die voor u beschikbaar zijn..
Het wordt hoog tijd dat je je handen vies maakt en je nieuwe vaardigheden in de praktijk brengt. Daag jezelf uit door de HTML-markup-structuur voor de volgende dingen te bouwen:
Accentsconagua
!doctype, de </code>, <code><meta></code> tags en <code><link></code> labels.</li> <li> <strong>Een blogartikel</strong>: Typografisch gezien kan een artikel alle belangrijke spelers van HTML-markeringen bevatten. Begin met een <code><article></code> zelf, misschien een <code><h2></code> titel, <code><p></code> tags natuurlijk, misschien bezaaid met <code><em></code> tags voor nadruk, of <code><strong></code> tekst. U kunt zelfs minder opvallende markeringen gebruiken als een <code><blockquote></code> en een horizontale regel <code><hr></code>.</li> <li> <strong>Portfolio-thumbnails</strong>: Het kan nu iets ingewikkelder worden, maar vergeet het niet; je bent dit eigenlijk niet aan het stylen, je probeert alleen de bouwstenen op de schoonste en meest logische manier te structureren. In dit geval zou u een ongeordende lijst kunnen gebruiken <code><ul></code>, met lijstitems <code><li></code> om elk van de miniaturen vast te houden. Elke miniatuur bevat waarschijnlijk een afbeelding <code><img></code> (waarmee je kunt spelen met de src- en alt-attributen) gewikkeld in een anker <code><a></code> die zal linken naar een grotere versie. Genoeg nestende goedheid daar.</li> </ul> <p>Houd uw markup schoon en laat geneste tags inspringen om de leesbaarheid te vergroten. Maak er ook een gewoonte van om opmerkingen achter te laten om anderen te helpen die mogelijk met uw code moeten werken:</p> <pre><div> <p>Dit is de inhoud van de test-div.</p> </div><!-- end of test div --></pre> <h3>Controleer je werk</h3> <p>Als je iets in HTML hebt gebouwd, is het tijd om het te controleren. Ga naar validator.w3.org en voer je werk door de validator. Het is niet altijd van levensbelang dat je opmaak 100% geldig is, maar het streven naar die grote groene klap op de rug is een geweldige manier om je normen hoog te houden.</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_9.png"> <h3>Bonus!</h3> <p>Als je er eenmaal zeker van bent dat je een denkbeeldige structuur opbouwt, waarom dan niet je eigen ontwerp omdraaien? Bekijk een lay-outontwerp en stel je voor hoe het wordt gevormd in termen van markeringen.</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_10.png"><br>Artikel, door Brijan over dribbble <hr> <h2>Opdracht 4: Swot up op Markup</h2> <blockquote><p>Het is belangrijk dat u leert welke elementen u moet gebruiken</p></blockquote> <p>Nu je je op je gemak voelt om een HTML-structuur te bouwen, is het tijd om je vocabulaire te verbeteren. Terwijl je markup schrijft, heb je zoveel mogelijk element-tags nodig (en dat zijn er nogal wat).</p> <p>Het is belangrijk dat u leert welke elementen u moet gebruiken, niet voor stylingdoeleinden, maar om uw pagina-inhoud op de meest geschikte manier te beschrijven. Dit wordt de semantiek genoemd.</p> <p>Als een stuk tekst bedoeld is als een alinea binnen uw lay-out, gebruikt u a <code><p></code> label om het te omsluiten. Gebruik geen a <code><div></code>, bijvoorbeeld. Het gebruik van semantische opmaak maakt uw webpagina's efficiënt, beter toegankelijk voor browsers, schermlezers, zoekmachines, zelfs andere apparaten die nog niet zijn uitgevonden! Pas goed op met het beschrijven van uw inhoud en u helpt het web uitgroeien tot een betere plek, geloof me.</p> <p>Hier zijn enkele solide bronnen die HTML-elementen en hun beoogde doelen omvatten:</p> <ul> <li> html5doctor.com is een samenwerking van enkele van de scherpste geesten van de industrie, en maakt duidelijk hoe we semantische HTML zouden moeten gebruiken.</li> <li> HTML-elementen op Mozilla. Let op de kleine <strong>5</strong> iconen door sommige elementen? Ze geven aan dat deze elementen recente toevoegingen zijn aan de HTML-specificatie, momenteel HTML5 genoemd.</li> </ul> <hr> <h2>Opdracht 5: lees een boek</h2> <p>Boeken bij de hand hebben is altijd geweldig om naar dingen te verwijzen, of zelfs (verrassend genoeg) van cover tot cover te lezen. Neem in dit stadium van je HTML-reis de tijd om een paar naslagwerken te bemachtigen. Ik raad aan:</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_11.png"> <ul> <li> HTML & CSS Ontwerp en bouw websites - het is de moeite waard om onder andere te krijgen voor de presentatiekwaliteit.</li> <li> HTML5 decoderen van Rockable Press - Dit boek biedt een goed inzicht in de politieke werking achter HTML-standaarden.</li> <li> HTML5 VOOR WEBONTWERPERS van A Book Apart - Als u nog geen A Book Apart-publicatie bezit, is dit een goed moment om uzelf voor te stellen.</li> <li> Introductie van HTML5 door Bruce Lawson en Remy Sharp - begint een beetje complex te worden in termen van andere functionaliteit die HTML5 biedt, maar dit is een HTML-boek dat zeker de moeite van het bekijken waard is.</li> </ul> <hr> <h2>Opdracht 6: Neem deel aan de gemeenschap</h2> <p>Hier is het beste deel van een webprofessional zijn: community. Als je een vraag hebt of een probleem hebt, is er altijd iemand die hetzelfde is tegengekomen en bereid is je te helpen. Ga en doe mee op fora en creatieve gemeenschappen, vraag om hulp en bied advies aan zodra je genoeg zelfvertrouwen hebt om dit te doen!</p> <p>Doe mee door deel te nemen aan de volgende community's:</p> <ul> <li> Stack Overflow: de beste technische Q & A-community die er is. Je bent HTML aan het leren? Er zijn nogal wat discussies onderweg ... </li> <li> Forrst: een geweldige plek voor creatieve en technische feedback op projecten waaraan u werkt. Het is alleen uitnodigen als je wilt deelnemen, maar lang genoeg in de gangen rondhangen en iemand je binnen laat ... </li> <li> GitHub: in de eerste plaats een open, online repository voor het opslaan en versioneren van je eigen code, GitHub biedt leren door te zien hoe anderen het "doen". Veel van de projecten op GitHub zijn intimiderend geavanceerd voor HTML-beginners, maar houd hier rekening mee voor de toekomst.</li> <li> Creattica: is een online community voor creatieven. Geef en ontvang feedback over uw nieuwste HTML-projecten.</li> </ul> <p>Afgezien van de communities, zijn sociale netwerken de perfecte manier om met je HTML-helden te communiceren, vragen te stellen en meningen te geven. Hier zijn een paar van de Twitterers die het waard zijn om te volgen vanwege hun hint in HTML:</p> <ul> <li>@ html5doctor</li> <li>@brucel</li> <li> @wdtuts natuurlijk ... </li> <li> @nettuts natuurlijk ... </li> <li>@LeaVerou</li> <li>@zeldman</li> <li>@meyerweb</li> <li>@smashingmag </li> </ul> <hr> <h2>Opdracht 7: Versnel uw markupworkflow</h2> <p>In deze fase heb je een greep op wat HTML is, welke elementen momenteel worden gebruikt, hoe je semantische markeringen structureert, wie de spelers in de sector zijn en je klaar bent voor de volgende uitdaging! De volgende logische stap zou zijn om zich te concentreren op CSS; het opmaken van de HTML-markeringen die u nu vaardig kunt schrijven. Laten we eerst eens kijken of we onze opmaakworkflow kunnen versnellen met een aantal alternatieve benaderingen ... </p> <h3>Markdown</h3> <blockquote><p>Markdown stelt je in staat om te schrijven met behulp van een gemakkelijk te lezen, gemakkelijk te schrijven standaard tekstformaat.</p></blockquote> <p>Markdown is een beter leesbare manier om HTML content-opmaak te schrijven. Het verlicht heel wat tag-codering door al die onzin uit te zetten voor minder complexe syntaxis. Nadat u uw Markdown-document hebt geschreven, voert u het uit via een parser (zoals Dingus) om het vertrouwde HTML-equivalent te maken.</p> <p>We zijn nu bijvoorbeeld bekend met deze HTML-markeertags:</p> <pre><h1>Dit is een H1</h1> <h2>Dit is een H2</h2> <h6>Dit is een H6</h6></pre> <p>Het Markdown-equivalent zou zijn:</p> <pre># Dit is een H1 ## Dit is een H2 ###### Dit is een H6</pre> <p>wat betekent dat je je geen zorgen hoeft te maken over het sluiten van tags - en de ingesprongen aard van de Markdown-kopjes maakt de hiërarchie visueel veel duidelijker, leesbaarder voor menselijke ogen.</p> <p>Markdown wordt steeds populairder en je vindt het geïntegreerd in code-editors en contentmanagementsystemen. In termen van het schrijven van webinhoud is het ideaal. Bekijk de syntaxpagina voor meer informatie of bekijk onze recente zelfstudie Snelle en eenvoudige documentatie met Markdown.</p> <h3>mier</h3> <p>Emmet versnelt uw markup-codering door de verkorte code te parseren en te converteren. Bijvoorbeeld in plaats van handmatig te typen:</p> <pre><div> <ul> </ul> </div></pre> <p>je zou de verkorte vorm gebruiken:</p> <pre>div> ul> li * 4</pre> <blockquote><p>Emmet (voorheen bekend als Zen Coding) is een toolkit voor webontwikkelaars die uw HTML & CSS-workflow aanzienlijk kan verbeteren:</p></blockquote> <p>Wat dit letterlijk zegt is "output een div, die een ongeordende lijst bevat, die vier lijstitems bevat".</p> <p>Afhankelijk van de applicatie die je gebruikt, zou je dan bijvoorbeeld TAB raken en Emmet zou die verkorte syntaxis verwerken, waarbij HTML-markup wordt uitgevoerd zoals het originele voorbeeld. Het tijdbesparingspotentieel zou al heel duidelijk moeten zijn, en Emmet doet dat <em>veel</em> meer dan ons eenvoudige voorbeeld hier.</p> <p>Emmet kan worden gebruikt met een aantal code-editors en -toepassingen, bekijk Uw verbetering van uw productiviteit: snelle tips voor Zen-codering en 7 geweldige Emmet HTML tijdbesparende tips voor meer hulp bij het opstarten.</p> <hr> <h2>Conclusie</h2> <p>Het volgen van een dergelijk leerplan en het benutten van de genoemde middelen zal je op weg helpen naar HTML-succes. Het leren van een nieuwe vaardigheid opent deuren, wie weet waar deze vaardigheid je zal brengen?</p> <p><strong>Volgende stap:</strong> Nu heb je wat HTML-vaardigheden onder de riem, kijk eens naar de beste manier om CSS te leren.</p> <p>Alle suggesties voor het leren zijn zeer welkom - roep uit in de commentaren!</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">Web ontwerp</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">De beste manier om JavaScript te leren</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">De beste manier om CSS te leren</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="/">nl.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Interessante informatie en nuttige tips over programmeren. Website ontwikkeling, webdesign en webontwikkeling. Photoshop-zelfstudies. Creatie van computerspellen en mobiele applicaties. Word een volledig professionele programmeur.
</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="Zoeken...">
<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>