Share
Învățarea unei noi calități este de multe ori intimidantă la început; știind de unde să înceapă, cine să asculte, ce să ignorăm - poate fi un proces dificil de a se mișca. De asta este pentru acest post. Acesta vă va ajuta să planificați ce să învățați și în ce ordine sperăm să faceți ceea ce pare a fi un obstacol mare, mult mai scăzut, ținându-vă interesați și încurajându-vă să continuați învățarea!
Aceasta este cea mai importantă parte a oricărui proces de învățare - odată ce ați luat decizia de a vă lărgi orizonturile, învățând o nouă abilitate, sunteți peste primul obstacol! Poate că sunteți un designer și căutați să treceți dincolo de stilou, hârtie și Photoshop, poate că nu ați avut anterior nimic de-a face cu webul, nu contează. Acum doriți să creați pagini web și, cu ajutorul resurselor enumerate mai jos, veți crawlați HTML în cel mai scurt timp.
În primul rând vom vorbi foarte literal despre elementele de bază ale HTML, după care vom analiza resursele și sarcinile pentru a menține mingea în mișcare.
Este important să știi ce înseamnă HTML, deci iată o definiție rapidă a consorțiului World Wide Web Consortium (W3C) care lucrează neobosit spre o rețea standardizată:
HTML este limba de publicare a World Wide Web.
Sfarsit. A fost ușor, nu? Cu HTML (HyperText Markup Language) puteți crea documente gata pentru publicare pe web. Marcajul HTML bine scris (așa cum este menționat) descrie structura conținutului dintr-un document. Puteți specifica care biți ai documentului sunt titluri, care biți sunt paragrafe, stabilesc relații simple între bucăți de conținut și chiar stabilesc anumite comportamente de bază.
Acestea fiind spuse, să începem cu primul fișier HTML. Veți avea nevoie de un editor de text simplu (cum ar fi TextEdit implicit pe OS X sau Windows Notepad). Acum:
Acum aveți nevoie de cea de-a doua aplicație, un browser web. Există câțiva jucători principali pe piața browserului, dar dacă utilizați Internet Explorer, Google Chrome, Firefox, Safari sau Opera (și există și altele), fișierul index.html se va deschide aproape sigur în browserul ales de dvs. în mod implicit.
Ceea ce este important este că un browser, atunci când realizează că are de-a face cu un fișier .html, știe să proceseze conținutul ca HTML. Din punct de vedere tehnic, nu am furnizat corect codul HTML aici, însă browserele vă vor reduce multă ușurință - simpla prezență a extensiei de fișier .html îi spune browser-ului suficient. Am scris doar o linie simplă de text, dar uita-te la modul în care browserul o interpretează:
Nu vă faceți griji pentru această fereastră de depanare pentru moment, este doar folosit pentru a ilustra punctul nostru de vedere.
Deci, aceasta are grija de primul pas în HTML! Acum înțelegeți ce este, ce trebuie să începeți să scrieți și începeți să înțelegeți ce browsere fac cu el.
Înainte de a ne arunca cu orice resurse, este necesar să luăm câteva principii de bază sub centurile noastre. Îți amintești de codurile suplimentare de cod pe care le-a adăugat browserul nostru? Acestea au fost etichete HTML, elementele de bază ale marcajului HTML. O etichetă descrie un element și evidențiază acest fapt folosind paranteze unghiulare. Acesta este tag-ul de deschidere a elementului html pe care l-am văzut mai devreme:
În afară de ceea ce este cunoscut sub numele de declarație doctype, folosim eticheta html pentru a demara documentul, apoi terminăm documentul cu un document de însoțire tag-ul de închidere:
Vedeți slash-ul din a doua etichetă? Aceasta înseamnă o etichetă de închidere. Tot ceea ce plasăm între etichetele de deschidere și închidere html este documentul nostru HTML. Și acesta este primul principiu al perechilor de etichete HTML; ele împachetează conținut de un fel. Acestea două împachetează conținutul unui paragraf:
Bine, ne vom uita din nou la fișierul index.html original, iar apoi promitem că vom vorbi despre resursele de învățare. Vedeți cum etichetele html sunt înfășurate în jurul altor etichete? Acest lucru este numit cuiburi. Etichetele se pot înfășura în jurul altor etichete. Apoi, aceste etichete pot chiar împacheta mai multe etichete, iar această cuibare poate merge pe termen nelimitat. Ca papusi exponentiale Matryoshka ...
În acest fel, putem crea secțiuni ale unei pagini web; un antet care conține titluri și reguli orizontale. Punctele care conțin ancore și deschideri. Subsoluri care conțin liste care conțin legături. Aceasta este baza construirii structurii HTML.
Uitați-vă la această ilustrație. În partea de sus este marcajul HTML, de dedesubt este o reprezentare vizuală a modului în care elementele sunt imbricate unul în celălalt.
Având înțeles elementele de bază absolută, este timpul să mergem mai departe și să înțelegem în mod ferm fundamentele HTML. Există câteva cursuri pe care vă recomand să le aruncați o privire, ambele fiind absolut gratuit și merită urmăriți de la început până la sfârșit.
Academia suficientă pentru moment, să luăm o pauză și să verificăm câteva instrumente pentru a simplifica codarea HTML. Până în prezent, am sugerat doar editori simple de text simplu pentru crearea fișierelor HTML. Acestea sunt perfect fine, dar sunt disponibile și editoare de coduri pe care le veți găsi mult mai intuitive de utilizat.
Avantajele cheie ale utilizării unui editor de cod special sunt:
Există multe avantaje, dar acestea vor deveni aparente odată ce vă veți implica mai mult în scrierea codului. Deci, care sunt opțiunile dvs.? Iată doar câteva:
Pentru mai multe informații despre numeroșii editori de coduri de care aveți la dispoziție, consultați Ghidul Web Designer pentru codificarea aplicațiilor și 18 IDE minunate pentru Windows, Mac și Linux.
Este timpul să vă dați mâinile murdare și să vă puneți abilitățile noi de a practica. Provocați-vă prin construirea structurii de marcare HTML pentru următoarele lucruri:
Accentsconagua
!doctype, </code>, <code><meta></code> etichete și <code><link></code> Etichete.</li> <li> <strong>Un articol pe blog</strong>: Din punct de vedere tipografic, un articol poate cuprinde toți jucătorii importanți ai marcajului HTML. Începeți cu un <code><article></code> ea însăși, poate a <code><h2></code> rubrică, <code><p></code> etichete de curs, poate cu punct <code><em></code> etichete pentru accent, sau <code><strong></code> text. Ați putea folosi chiar și un marcaj mai puțin evident ca a <code><blockquote></code> și o regulă orizontală <code><hr></code>.</li> <li> <strong>Portofoliu miniaturi</strong>: Lucrurile pot începe să devină mai complexe acum, dar nu uitați; de fapt, nu faceți nimic din acest lucru, încercați doar să structurați blocurile de clădiri într-un mod cât mai curat și mai logic posibil. În acest caz, puteți utiliza o listă neordonată <code><ul></code>, cu elemente de listă <code><li></code> pentru a ține fiecare miniatură. Fiecare miniatură ar cuprinde probabil o imagine <code><img></code> (care vă va oferi șansa de a juca cu atributele src și alt) înfășurate într-o ancoră <code><a></code> care va face legătura cu o versiune mai mare. O mulțime de bunătate cuibărită acolo.</li> </ul> <p>Păstrați marcajele curate și indentate pentru a vă lizibilitatea. De asemenea, obțineți obiceiul de a lăsa comentarii pentru a ajuta pe alții care ar putea avea nevoie să lucreze cu codul dvs.:</p> <pre><div> <p>Acesta este conținutul testului div.</p> </div><!-- end of test div --></pre> <h3>Verifică munca ta</h3> <p>După ce ați construit ceva în HTML, este timpul să-l verificați. Mergeți la validator.w3.org și rulați-vă activitatea prin intermediul validatorului. Nu este întotdeauna vital ca marcajul dvs. să fie 100% valid, însă obiectivul pentru acea palmă verde mare pe spate este o modalitate excelentă de a vă menține standardele ridicate.</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_9.png"> <h3>Primă!</h3> <p>Odată ce vă simțiți încrezători în construirea unei structuri imaginare, de ce să nu vă transformați mâna într-un design real? Uită-te la un design layout și imaginați-vă cum se formează în termeni de markup.</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_10.png"><br>Articolul, de Brijan pe dribble <hr> <h2>Alocarea 4: Faceți clic pe marcaj</h2> <blockquote><p>Este important să aflați unde să utilizați elementele</p></blockquote> <p>Acum sunteți confortabil construirea structurii HTML, este timpul să vă îmbunătățiți vocabularul. În timp ce scrieți marcare, aveți nevoie de cât mai multe etichete de elemente la dispoziția dvs. (și sunt destul de puține).</p> <p>Este important să aflați unde să utilizați elementele, nu pentru scopuri de styling, ci pentru a descrie conținutul paginii în cel mai adecvat mod posibil. Aceasta se numește semantică.</p> <p>Dacă o bucată de text este destinată a fi un paragraf în aspectul dvs., utilizați a <code><p></code> pentru al închide. Nu utilizați a <code><div></code>, de exemplu. Utilizarea marcajului semantic face paginile dvs. web eficiente, mai accesibile pentru browsere, ecranare, motoare de căutare - chiar și alte dispozitive care nu au fost încă inventate! Aveți grijă să descrieți în mod corespunzător conținutul dvs. și să ajutați webul să devină un loc mai bun, credeți-mă.</p> <p>Iată câteva resurse solide care acoperă elementele HTML și scopurile propuse:</p> <ul> <li> html5doctor.com este o colaborare a unora dintre mințile cele mai interesante din industrie, clarificând modul în care ar trebui să folosim HTML semantic.</li> <li> Elemente HTML pe Mozilla. Rețineți puțin <strong>5</strong> icoane de unele elemente? Acestea indică faptul că aceste elemente reprezintă adăugiri recente în specificația HTML, denumită în prezent HTML5.</li> </ul> <hr> <h2>Alocarea 5: Citiți o carte</h2> <p>A avea cărți la îndemână este întotdeauna minunat pentru a face referire la lucruri, sau chiar (surprinzător de suficient) citirea de la acoperire la acoperire. În această etapă a călătoriei dvs. HTML, faceți timp pentru a obține o pereche de cărți de referință. Vă recomand:</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_11.png"> <ul> <li> Site-uri HTML și CSS de design și construire - merită să țineți cont de calitatea prezentării, printre altele.</li> <li> Decodarea HTML5 de la Rockable Press - Această carte oferă o perspectivă minunată asupra lucrărilor politice din spatele standardelor HTML.</li> <li> HTML5 PENTRU DESIGNERII DE WEB de la o carte separată - Dacă nu dețineți încă o publicație A Book Apart, acesta este la fel de bun ca oricare altcineva să vă prezentați.</li> <li> Introducerea HTML5 de către Bruce Lawson și Remy Sharp - începe să obțină un complex mic în ceea ce privește alte funcționalități oferite de HTML5, dar aceasta este o carte HTML care merită cu siguranță să fie verificată.</li> </ul> <hr> <h2>Alocarea 6: Participați la Comunitate</h2> <p>Iată cea mai bună parte a unui profesionist web: comunitate. Ori de câte ori aveți o întrebare sau o problemă, există întotdeauna cineva care a întâlnit același lucru și va fi dispus să vă ajute. Mergeți și participați la forumuri și comunități creative, solicitați ajutor și oferiți sfaturi după ce deveniți suficient de încrezători pentru a face acest lucru!</p> <p>Implicați-vă prin participarea la următoarele comunități:</p> <ul> <li> Stack Overflow: cea mai bună comunitate tehnică Q & A afară. Invatati HTML? Sunt câteva fire deja în curs de desfășurare ... </li> <li> Forrst: un loc minunat pentru feedback-ul creativ și tehnic asupra proiectelor pe care lucrați. Este invitată doar dacă doriți să participați, dar atârnați pe coridoare suficient de mult și cineva vă va permite să ... </li> <li> GitHub: în primul rând un depozit deschis și online pentru stocarea și versiunea propriului cod, GitHub vă oferă învățarea prin a vedea modul în care alții "o fac". Multe dintre proiectele de pe GitHub sunt avansate intimidant pentru începătorii HTML, dar au în vedere acest lucru pentru viitor.</li> <li> Creattica: este o comunitate online pentru reclame. Oferiți și primiți feedback cu privire la cele mai recente proiecte HTML.</li> </ul> <p>În afară de comunități, rețelele sociale reprezintă modalitatea perfectă de a interacționa cu eroii dvs. HTML, de a pune întrebări și de a oferi opinii. Iată câteva turiști care merită urmăriți pentru modul lor HTML:</p> <ul> <li>@ html5doctor</li> <li>@brucel</li> <li> @wdtuts natural ... </li> <li> @nettuts natural ... </li> <li>@LeaVerou</li> <li>@zeldman</li> <li>@meyerweb</li> <li>@smashingmag </li> </ul> <hr> <h2>Alocarea 7: Accelerați fluxul de lucru al marcajelor</h2> <p>În acest stadiu, aveți un mâner pe ce este HTML, ce elemente sunt utilizate în prezent, cum să structurați marcajul semantic, cine sunt jucătorii din industrie și că sunteți pregătiți pentru următoarea provocare! Următorul pas logic ar fi concentrarea asupra CSS; modelarea marcajului HTML pe care îl cunoașteți acum. În primul rând, să vedem dacă putem accelera fluxul de lucru al marcajului cu câteva abordări alternative ... </p> <h3>Markdown</h3> <blockquote><p>Markdown vă permite să scrieți utilizând un format de text simplu, ușor de citit și ușor de scris.</p></blockquote> <p>Markdown este un mod mai ușor de scris pentru marcarea conținutului HTML. Aceasta ameliorează o mare parte din codificarea tag-urilor prin comutarea tuturor acelor nonsensuri pentru o sintaxă mai puțin complexă. Odată ce ați scris documentul Markdown, rulați-l printr-un parser (cum ar fi Dingus) pentru a lansa echivalentul HTML familiar.</p> <p>De exemplu, acum suntem familiarizați cu aceste etichete pentru titlurile HTML:</p> <pre><h1>Acesta este un H1</h1> <h2>Acesta este un H2</h2> <h6>Acesta este un H6</h6></pre> <p>Echivalentul Markdown ar fi:</p> <pre># Acesta este un H1 ## Acesta este un H2 ###### Acesta este un H6</pre> <p>ceea ce înseamnă că nu ar trebui să vă faceți griji cu privire la închiderea etichetelor - iar caracterul indentat al rubricilor Markdown face din ierarhia vizuală mult mai clară, mai lizibilă ochilor omului.</p> <p>Markdown devine din ce în ce mai populară și veți găsi integrate în editorii de cod și în sistemele de gestionare a conținutului. În ceea ce privește scrierea conținutului web, este ideal. Consultați pagina de sintaxă pentru mai multe informații sau consultați instrucțiunile noastre recente, Quick and Easy Documentation Using Markdown.</p> <h3>Emmet</h3> <p>Emmet accelerează codarea marcajelor prin parsarea și conversia codului abreviat. De exemplu, în loc să tastați manual:</p> <pre><div> <ul> </ul> </div></pre> <p>ați folosi formularul abreviat:</p> <pre>div> ul> li * 4</pre> <blockquote><p>Emmet (cunoscut anterior sub numele de Zen Coding) este un set de instrumente web-developer care vă poate îmbunătăți considerabil fluxul de lucru HTML & CSS:</p></blockquote> <p>Ceea ce spune literalmente este "ieșire div, care conține o listă neordonată, care conține patru elemente de listă".</p> <p>În funcție de aplicația pe care o utilizați, veți apăsa apoi (de exemplu) TAB, iar Emmet va procesa această sintaxă abreviată, scoțând marcajul HTML ca exemplul original. Potențialul de economisire a timpului ar trebui să fie foarte clar deja și Emmet face <em>mult</em> mai mult decât exemplul nostru simplu aici.</p> <p>Emmet poate fi folosit cu mai mulți editori de coduri și aplicații, aruncați o privire la Îmbunătățirea productivității: Sfaturi rapide pentru codarea Zen și 7 sfaturi extraordinare pentru Emmet HTML pentru salvarea timpului pentru mai mult ajutor pentru a începe.</p> <hr> <h2>Concluzie</h2> <p>Urmând un plan de învățare precum acest lucru și valorificarea maximă a resurselor menționate vă va trimite pe drumul spre succesul HTML. Învățând o nouă abilitate deschide ușile, cine știe unde te va duce această abilitate?</p> <p><strong>Urmatorul pas:</strong> Acum, aveți niște abilități HTML sub centură, aruncați o privire la Cel mai bun mod de a învăța CSS.</p> <p>Orice sugestii de învățare sunt foarte binevenite - strigați în comentarii!</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 design</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">Cel mai bun mod de a învăța 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">Cel mai bun mod de a învăța 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>