Share
Att lära sig en ny färdighet är ofta skrämmande först; veta vart man ska börja, vem att lyssna på, vad man ska ignorera - det kan vara en svår process att flytta. Det är det här inlägget är för. Det hjälper dig att planera vad du ska lära dig och i vilken ordning som förhoppningsvis gör det som verkar som en stor hinder mycket lägre, vilket håller dig intresserad och uppmuntrar dig att fortsätta lära dig!
Det här är den viktigaste delen av alla inlärningsprocesser - när du har fattat beslutet att bredda dina horisonter genom att lära dig en ny färdighet, är du över den första hindren! Kanske är du designer och ser ut att gå bortom penna, papper och Photoshop, kanske du tidigare har haft något att göra med webben, det spelar ingen roll. Nu du vill bygga webbsidor och med hjälp av de resurser som anges nedan kommer du att spricka HTML på nolltid.
Till att börja med kommer vi prata mycket bokstavligen om grunderna i HTML, varefter vi tittar på resurser och uppdrag för att hålla bollen rullande.
Det är viktigt att du vet vilken HTML är, så här är en snabb definition från World Wide Web Consortium (W3C) som arbetar outtröttligt mot en standardiserad webbsida:
HTML är publiceringsspråket på World Wide Web.
Slutet. Det var lätt, eller hur? Med HTML (HyperText Markup Language) kan du skapa dokument redo för publicering på webben. Välskriven HTML-markup (som det refereras till) beskriver innehållets struktur i ett dokument. Du kan ange vilka bitar av dokumentet som är rubriker, vilka bitar är stycken, upprätta enkla relationer mellan innehållsdelar och till och med ställa vissa grundläggande behövande.
Med det sagt, låt oss börja med din första HTML-fil. Du behöver en vanlig textredigerare (som standard TextEdit på OS X eller Windows Anteckningsblock). Nu:
Nu behöver du din andra applikation, en webbläsare. Det finns flera huvudspelare på webbläsarmarknaden, men om du använder Internet Explorer, Google Chrome, Firefox, Safari eller Opera (och det finns andra), kommer din index.html-fil nästan säkert att öppnas i din webbläsare som standard.
Vad som är viktigt är att en webbläsare, när den inser att den handlar om en. Html-fil, vet att man bearbetar innehållet som HTML. Tekniskt sett har vi inte angivit korrekt HTML-kod här, men webbläsare kommer att skära dig mycket - det enda som finns i .html-filtillägget berättar för webbläsaren. Vi har bara skrivit en enkel textrad, men titta på hur webbläsaren faktiskt tolkar den:
Oroa dig inte för det här felsökningsfönstret för nu, det är bara vanligt att illustrera vår punkt.
Så det tar hand om ditt första steg i HTML! Du förstår nu vad det är, vad som krävs för att börja skriva det och börjar förstå vad webbläsare gör med det.
Innan vi dyker in i några resurser är det nödvändigt att få några fler grundläggande principer under våra bälten. Kommer du ihåg de extra kodstyckena som vår webbläsare tycktes lägga till? Det var HTML-taggar, byggstenarna i HTML-markup. En tagg beskriver ett element och belyser det faktum med hjälp av vinklar. Det här är öppnings tagg av html-elementet som vi såg tidigare:
Bortsett från vad som kallas en doktypdeklaration använder vi html-taggen för att sparka av vårt dokument, då avslutar vi dokumentet med en åtföljande stängande tagg:
Se framåt snedstrecket i den andra taggen? Det är vad som betecknar en stängningskod. Allt vi lägger in mellan öppnings- och stängningshtml-taggarna är vårt HTML-dokument. Och det är den första principen för HTML-taggpar; de sätter in innehåll av något slag. Dessa två sätter in innehållet i ett stycke:
Okej, vi ska titta tillbaka till vår ursprungliga index.html-fil en gång till, då lovar vi att vi faktiskt talar om lärandesurser. Du ser hur HTML-taggarna är inslagna runt andra taggar? Det kallas som nesting. Taggar kan gå runt andra taggar. Då kan de taggarna till och med paketera runt fler taggar, och detta nesting kan gå på obestämd tid. Liksom exponentiella Matryoshka dockor ...
På detta sätt kan vi bygga upp delar av en webbsida. en rubrik som innehåller rubriker och horisontella regler. Punkter som innehåller ankar och spänner. Footers som innehåller listor som sedan innehåller länkar. Detta är grunden för att bygga HTML-struktur.
Ta en titt på den här illustrationen. Överst är HTML-markeringen, nedanför en visuell representation av hur elementen indelas i varandra.
Efter att ha förstått de absoluta grunderna är det dags att gå vidare och få en klar förståelse av HTML-fundament. Det finns ett par kurser som jag rekommenderar att du tar en titt på, båda är helt gratis och väl värt att följa från början till slut.
Tillräckliga akademier för tillfället, låt oss ta en paus och checka ut några verktyg för att göra vår HTML-kodning enklare. Hittills har jag bara föreslagit enkla vanliga textredigerare för att skapa dina HTML-filer. Det här är helt bra, men det finns kodredigerare som du hittar mycket mer intuitivt att använda.
De viktigaste fördelarna med att använda en inbyggd kodredigerare är:
Det finns många fler fördelar, men det kommer att bli uppenbart när du blir mer involverad i skrivkoden. Så då, vilka är dina alternativ? Här är bara några:
För mer information om de många kodredigerare som är tillgängliga för dig, kolla in en webbdesignerguide till kodningsapps och 18 underbara IDE för Windows, Mac och Linux..
Det är hög tid du fick dina händer smutsiga och sätta dina nyfunna färdigheter att träna. Utmana dig själv genom att bygga HTML-uppbyggnadsstrukturen för följande saker:
Accentsconagua
!doctype, de </code>, <code><meta></code> taggar och <code><link></code> taggar.</li> <li> <strong>En bloggartikel</strong>: Typografiskt sett kan en artikel innehålla alla viktiga aktörer i HTML-märkning. Börja med en <code><article></code> sig själv, kanske en <code><h2></code> rubrik, <code><p></code> taggar självklart, kanske prickade med <code><em></code> taggar för betoning, eller <code><strong></code> text. Du kan till och med använda mindre uppenbart markup som a <code><blockquote></code> och en horisontell regel <code><hr></code>.</li> <li> <strong>Miniatyrbilder i portföljen</strong>: Det kan börja bli lite mer komplicerat nu, men glöm inte; du är inte faktiskt styling något av detta, du försöker bara strukturera byggstenarna på det renaste och mest logiska sättet. I det här fallet kan du använda en oorderad lista <code><ul></code>, med listobjekt <code><li></code> att hålla alla miniatyrer. Varje miniatyrbild skulle sannolikt innehålla en bild <code><img></code> (vilket ger dig chansen att spela med src och alt attribut) inslagna i ett ankare <code><a></code> som kommer att länka till en större version. Massor av nesting godhet där.</li> </ul> <p>Håll din markering ren och skriv in nestade taggar för att hjälpa läsbarheten. Också, vana att lämna kommentarer för att hjälpa andra som kanske behöver arbeta med din kod:</p> <pre><div> <p>Detta är innehållet i test div.</p> </div><!-- end of test div --></pre> <h3>Kontrollera ditt arbete</h3> <p>Har byggt något i HTML, det är dags att kontrollera det. Gå vidare till validator.w3.org och kör ditt arbete genom valideraren. Det är inte alltid viktigt att din markering är 100% giltig, men att sikta på den stora gröna klumpen på baksidan är ett utmärkt sätt att hålla dina standarder höga.</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_9.png"> <h3>Bonus!</h3> <p>När du känner dig säker på att bygga en imaginär struktur, varför vrid din hand inte till en verklig design? Titta på en layoutdesign och föreställa dig hur det bildades när det gäller markup.</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_10.png"><br>Artikel, av Brijan på dribbble <hr> <h2>Uppgift 4: Sot upp på Markup</h2> <blockquote><p>Det är viktigt att du lär dig var du ska använda vilka element</p></blockquote> <p>Nu är du bekväm att bygga HTML-struktur, det är dags att förbättra ditt ordförråd. Medan du skriver markering behöver du så många elementskoder som möjligt till ditt förfogande (och det finns en hel del).</p> <p>Det är viktigt att du lär dig var du ska använda vilka element, inte för styling, men för att beskriva ditt sidinnehåll på det lämpligaste sättet. Det här är vad som kallas semantik.</p> <p>Om en bit text är avsedd att vara en paragraf i din layout, använd en <code><p></code> tagg för att bifoga den. Använd inte a <code><div></code>, till exempel. Med hjälp av semantisk markering blir dina webbsidor effektiva, mer tillgängliga för webbläsare, skärmsläsare, sökmotorer - även andra enheter som ännu inte har uppfunnits! Var försiktig med att beskriva ditt innehåll korrekt och du hjälper webben att växa till en bättre plats, tro mig.</p> <p>Här är några solida resurser som täcker HTML-element och deras avsedda syften:</p> <ul> <li> html5doctor.com är ett samarbete mellan några av branschens mest angelägna sinnen och klargör hur vi ska använda semantisk HTML.</li> <li> HTML-element på Mozilla. Notera den lilla <strong>5</strong> ikoner av några av elementen? De betecknar att dessa element är nya tillägg till HTML-specifikationen, som för närvarande kallas HTML5.</li> </ul> <hr> <h2>Uppgift 5: Läs en bok</h2> <p>Att ha böcker till hands är alltid bra för att hänvisa till saker, eller till och med (överraskande nog) läsning från omslag till omslag. På det här steget i din HTML-resa tar du tid för att få tag i ett par referensböcker. Jag rekomenderar:</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_11.png"> <ul> <li> HTML & CSS Design och Build Websites - värt att ta hand om för presentationskvalitet bland annat.</li> <li> Avkodning HTML5 från Rockable Press - Den här boken ger en bra inblick i de politiska arbeten bakom HTML-standarder.</li> <li> HTML5 FÖR WEB DESIGNERS från A Book Apart - Om du ännu inte äger en A Book Apart-publikation är det här så bra som att presentera dig själv.</li> <li> Introduktion till HTML5 av Bruce Lawson och Remy Sharp - börjar bli lite komplicerat vad gäller annan funktion HTML5 erbjuder, men det här är en HTML-bok definitivt värt att kolla.</li> </ul> <hr> <h2>Uppgift 6: Ta del i gemenskapen</h2> <p>Här är den bästa delen av att vara en webbproffs: gemenskap. När du har en fråga eller ett problem finns det alltid någon där ute som har stött på samma sak och kommer att vara villig att hjälpa dig. Gå och gå med på forum och kreativa samhällen, be om hjälp och ge råd när du väl är tillräckligt säker på att göra det!</p> <p>Bli involverad genom att delta i följande samhällen:</p> <ul> <li> Stack Overflow: det bästa tekniska Q & A-communityet där ute. Du lär dig HTML? Det finns ganska många trådar som redan är igång ... </li> <li> Forrst: Ett bra ställe för kreativ och teknisk feedback om projekt du jobbar med. Det är endast inbjudan om du vill delta, men hänga runt korridorerna tillräckligt länge och någon kommer att släppa in dig ... </li> <li> GitHub: främst ett öppet, online-arkiv för lagring och version av din egen kod, GitHub erbjuder lärande genom att se hur andra "gör det". Många av projekten på GitHub är skrämmande avancerade för HTML-nybörjare, men bära den här i åtanke för framtiden.</li> <li> Creattica: är ett online-community för reklam. Ge och ta emot återkoppling om dina senaste HTML-projekt.</li> </ul> <p>Bortsett från samhällen är sociala nätverk det perfekta sättet att interagera med dina HTML-hjältar, ställa frågor och ge åsikter. Här är ett par Twitterers värda att följa för deras HTML-förmåga:</p> <ul> <li>@ html5doctor</li> <li>@brucel</li> <li> @wdtuts naturligt ... </li> <li> @nettuts naturligt ... </li> <li>@LeaVerou</li> <li>@zeldman</li> <li>@meyerweb</li> <li>@smashingmag </li> </ul> <hr> <h2>Uppgift 7: Snabba upp ditt Markup-arbetsflöde</h2> <p>I det här skedet har du ett handtag om vilken HTML som är, vilka element som används för närvarande, hur man strukturerar semantisk markering, vilka branschspelarna är och du är redo för nästa utmaning! Nästa logiska steg skulle vara att koncentrera sig på CSS; styling HTML-märkning du är nu skicklig skriftlig. För det första, låt oss se om vi kan påskynda vårt markup-arbetsflöde med ett par alternativa tillvägagångssätt ... </p> <h3>Prissänkning</h3> <blockquote><p>Markdown låter dig skriva med ett lättläst, lätt att skriva rent textformat.</p></blockquote> <p>Markdown är ett mer läsligt sätt att skriva HTML-innehållsmarkup. Det lindrar en hel del tagkodning genom att byta all den nonsens ut för mindre komplex syntax. När du har skrivit ditt Markdown-dokument kör du det genom en parser (som Dingus) för att churn out den välbekanta HTML-ekvivalenten.</p> <p>Till exempel är vi nu bekanta med dessa HTML-taggar:</p> <pre><h1>Detta är en H1</h1> <h2>Detta är en H2</h2> <h6>Detta är en H6</h6></pre> <p>Markdown motsvarigheten skulle vara:</p> <pre># Detta är en H1 ## Detta är en H2 ###### Detta är en H6</pre> <p>vilket betyder att du inte skulle behöva oroa dig för att stänga taggar - och den indragna karaktären av Markdown-rubrikerna gör hierarkin visuellt mycket tydligare, mer läsbar för mänskliga ögon.</p> <p>Markdown blir alltmer populär och du hittar den integrerad i kodredigerare och innehållshanteringssystem. När det gäller att skriva webbinnehåll är det idealiskt. Ta en titt på syntaxsidan för mer information, eller kolla in vår senaste handledning Snabb och enkel dokumentation med Markdown.</p> <h3>Emmet</h3> <p>Emmet ökar din kodning genom att parsa och konvertera förkortad kod. Till exempel istället för att manuellt skriva ut:</p> <pre><div> <ul> </ul> </div></pre> <p>du skulle använda förkortad form:</p> <pre>div> ul> li * 4</pre> <blockquote><p>Emmet (tidigare känd som Zen Coding) är en webbutvecklarens verktygsverktyg som kan förbättra ditt HTML & CSS-arbetsflöde väsentligt:</p></blockquote> <p>Vad det här bokstavligen säger är "output a div, som innehåller en orörd lista, som innehåller fyra listor".</p> <p>Beroende på vilken applikation du använder skulle du då träffa (till exempel) TAB och Emmet skulle behandla den förkortade syntaxen, utmatning av HTML-markup som det ursprungliga exemplet. Den tidsbesparande potentialen borde vara mycket tydlig redan, och Emmet gör det <em>mycket</em> mer än vårt enkla exempel här.</p> <p>Emmet kan användas med ett antal kodredigerare och applikationer, ta en titt på att förbättra din produktivitet: Snabba tips för Zen-kodning och 7 fantastiska Emmet HTML-tidsbesparande tips för mer hjälp när du ska komma igång.</p> <hr> <h2>Slutsats</h2> <p>Genom att följa en inlärningsplan som denna och göra det mesta av de nämnda resurserna, skickar du dig på väg till HTML-framgång. Att lära sig en ny färdighet öppnar dörrar, vem vet var denna färdighet tar dig?</p> <p><strong>Nästa steg:</strong> Nu har du några HTML-färdigheter under ditt bälte, ta en titt på det bästa sättet att lära dig CSS.</p> <p>Eventuella inlärningsförslag är mycket välkomna - skrika ut i kommentarerna!</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">Webbdesign</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">Det bästa sättet att lära sig 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">Det bästa sättet att lära sig 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="/">ro.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informații interesante și sfaturi utile privind programarea. Dezvoltarea de site-uri, web design si dezvoltare web. Tutoriale Photoshop. Crearea de jocuri pe calculator și aplicații mobile. Deveniți un programator profesionist de la zero.
</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="Căutare...">
<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>