Share
Imparare una nuova abilità è spesso intimidatorio all'inizio; sapendo da dove cominciare, chi ascoltare, cosa ignorare, può essere un processo difficile da ottenere. Ecco a cosa serve questo post. Ti aiuterà a pianificare cosa imparare e in quale ordine, sperando di rendere quello che sembra un grande ostacolo molto più basso, mantenendo il tuo interesse e incoraggiandoti a continuare a imparare!
Questa è la parte più cruciale di qualsiasi processo di apprendimento - una volta che hai preso la decisione di ampliare i tuoi orizzonti apprendendo una nuova abilità sei sopra il primo ostacolo! Forse sei un designer e stai cercando di andare oltre la penna, la carta e Photoshop, forse non hai mai avuto nulla a che fare con il web, non importa. Adesso vuoi costruire pagine web e con l'aiuto delle risorse elencate di seguito creerai un codice HTML in pochissimo tempo.
Per cominciare parleremo letteralmente delle nozioni di base dell'HTML, dopo di che esamineremo risorse e compiti per far girare la palla.
È importante sapere cos'è l'HTML, quindi ecco una rapida definizione del World Wide Web Consortium (W3C) che lavora instancabilmente verso un web standardizzato:
HTML è la lingua di pubblicazione del World Wide Web.
La fine. E 'stato facile, giusto? Con HTML (HyperText Markup Language) puoi creare documenti pronti per la pubblicazione sul web. Il markup HTML ben scritto (come indicato) descrive la struttura del contenuto all'interno di un documento. È possibile specificare quali bit del documento sono intestazioni, quali bit sono paragrafi, stabilire relazioni semplici tra parti di contenuto e persino impostare determinati comportamenti di base.
Detto questo, iniziamo con il tuo primo file HTML. Avrai bisogno di un editor di testo semplice (come TextEdit predefinito su OS X o Blocco note di Windows). Adesso:
Ora hai bisogno della tua seconda applicazione, un browser web. Ci sono diversi attori principali nel mercato dei browser, ma se utilizzi Internet Explorer, Google Chrome, Firefox, Safari o Opera (e ce ne sono altri), il tuo file index.html verrà quasi certamente aperto nel tuo browser di scelta per impostazione predefinita.
Ciò che è importante è che un browser, quando si accorge di aver a che fare con un file .html, sappia elaborare il contenuto come HTML. Tecnicamente, non abbiamo fornito qui il codice HTML corretto, ma i browser ti faranno perdere molto tempo: la sola presenza dell'estensione del file .html dice abbastanza al nostro browser. Abbiamo solo scritto una semplice riga di testo, ma guardiamo come il browser lo interpreta effettivamente:
Non preoccuparti per questa finestra di debug per ora, è solo usato per illustrare il nostro punto.
In modo che si prende cura del tuo primo passo in HTML! Ora capisci di cosa si tratta, cosa serve per iniziare a scriverlo e stanno iniziando a capire cosa fanno i browser con esso.
Prima di immergerci in qualsiasi risorsa è necessario avere alcuni principi base sotto le nostre cinture. Ti ricordi i pezzi di codice extra che il nostro browser sembrava aggiungere? Quelli erano tag HTML, i blocchi costitutivi del markup HTML. Un tag descrive un elemento e evidenzia questo fatto usando parentesi angolari. Questo è il tag di apertura dell'elemento html che abbiamo visto prima:
A parte la cosiddetta dichiarazione doctype, usiamo il tag html per dare il via al nostro documento, quindi finiamo il nostro documento con un accompagnamento tag di chiusura:
Vedi la barra in avanti nel secondo tag? Questo è ciò che denota un tag di chiusura. Tutto ciò che inseriamo tra i tag html di apertura e chiusura è il nostro documento HTML. E questo è il primo principio delle coppie di tag HTML; avvolgono contenuti di qualche tipo. Questi due avvolgono il contenuto di un paragrafo:
Ok, guarderemo ancora una volta il nostro file index.html originale, quindi prometto che parleremo effettivamente delle risorse di apprendimento. Vedete come i tag html sono avvolti attorno ad altri tag? Questo è indicato come annidamento. I tag possono avvolgere altri tag. Quindi questi tag possono persino racchiudere più tag e questo annidamento può continuare all'infinito. Come le bambole Matryoshka esponenziali ...
In questo modo possiamo costruire sezioni di una pagina web; un'intestazione che contiene intestazioni e regole orizzontali. Paragrafi che contengono ancore e span. Piè di pagina che contengono elenchi che contengono quindi collegamenti. Questa è la base per costruire la struttura HTML.
Dai un'occhiata a questa illustrazione. In alto c'è il markup HTML, sotto c'è una rappresentazione visiva di come gli elementi sono annidati l'uno nell'altro.
Dopo aver colto le basi assolute, è il momento di andare avanti e ottenere una solida comprensione dei fondamenti di HTML. Ci sono un paio di corsi che ti consiglio di dare un'occhiata, entrambi sono assolutamente gratuito e vale la pena seguire dall'inizio alla fine.
Per il momento basta il mondo accademico, prendiamoci una pausa e controlliamo alcuni strumenti per semplificare la nostra codifica HTML. Finora ho solo suggerito semplici editor di testo in chiaro per creare i tuoi file HTML. Questi sono perfettamente a posto, ma ci sono editor di codice disponibili che troverete molto più intuitivi da usare.
I principali vantaggi dell'utilizzo di un editor di codice appositamente creato sono:
Ci sono molti più vantaggi, ma quelli diventeranno evidenti una volta che sarai più coinvolto nella scrittura del codice. Allora, quali sono le tue opzioni? Qui ci sono solo alcuni:
Per ulteriori informazioni sui numerosi editor di codice disponibili, consulta la Guida di A Web Designer per le app di codifica e 18 meravigliosi IDE per Windows, Mac e Linux.
È giunto il momento di sporcarti le mani e di mettere in pratica le tue nuove abilità. Sfida te stesso costruendo la struttura di markup HTML per le seguenti cose:
Accentsconagua
!DOCTYPE, il </code>, <code><meta></code> tag e <code><link></code> tag.</li> <li> <strong>Un articolo sul blog</strong>: Tipograficamente parlando, un articolo può contenere tutti i giocatori importanti del markup HTML. Inizia con un <code><article></code> stesso, forse a <code><h2></code> intestazione, <code><p></code> tag ovviamente, magari punteggiato <code><em></code> tag per enfasi, o <code><strong></code> testo. Potresti anche usare un markup meno ovvio come a <code><blockquote></code> e una regola orizzontale <code><hr></code>.</li> <li> <strong>Miniature del portfolio</strong>: Le cose possono iniziare a diventare un po 'più complesse ora, ma non dimenticare; in realtà non stai progettando nulla di tutto ciò, stai solo cercando di strutturare gli elementi costitutivi nel modo più pulito e logico possibile. In questo caso, è possibile utilizzare un elenco non ordinato <code><ul></code>, con gli elementi della lista <code><li></code> per tenere ciascuna delle miniature. Ogni miniatura probabilmente comprenderà un'immagine <code><img></code> (che ti darà la possibilità di giocare con gli attributi src e alt) avvolto in un'ancora <code><a></code> che collegherà a una versione più grande. Un sacco di nidificazione bontà lì.</li> </ul> <p>Mantieni il markup pulito e tag nidificati a indent per migliorare la leggibilità. Inoltre, prendi l'abitudine di lasciare commenti per aiutare gli altri che potrebbero aver bisogno di lavorare con il tuo codice:</p> <pre><div> <p>Questo è il contenuto del div test.</p> </div><!-- end of test div --></pre> <h3>Controlla il tuo lavoro</h3> <p>Avendo costruito qualcosa in HTML, è tempo di controllarlo. Vai su validator.w3.org ed esegui il tuo lavoro attraverso il validatore. Non è sempre vitale che il tuo markup sia valido al 100%, ma mirare a quel grande schiaffo verde sul retro è un ottimo modo per mantenere alti i tuoi standard.</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_9.png"> <h3>indennità!</h3> <p>Una volta che ti senti sicuro di costruire una struttura immaginaria, perché non trasformare la tua mano in un vero e proprio progetto? Guarda un design del layout e immagina come si è formato in termini di markup.</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_10.png"><br>Articolo di Brijan su dribbble <hr> <h2>Assegnazione 4: Swot up su Markup</h2> <blockquote><p>È importante che tu impari dove usare quali elementi</p></blockquote> <p>Ora sei a tuo agio nel costruire la struttura HTML, è ora di migliorare il tuo vocabolario. Mentre scrivi il markup hai bisogno del maggior numero possibile di tag elemento (e ce ne sono parecchi).</p> <p>È importante che tu impari dove usare quali elementi, non per scopi di stile, ma per descrivere il contenuto della tua pagina nel modo più appropriato possibile. Questo è ciò che viene definito semantica.</p> <p>Se un pezzo di testo è destinato a essere un paragrafo all'interno del layout, utilizzare a <code><p></code> tag per racchiuderlo. Non usare a <code><div></code>, per esempio. L'uso del markup semantico rende le tue pagine web efficienti, più accessibili a browser, screen reader, motori di ricerca - persino altri dispositivi che non sono ancora stati inventati! Abbi cura di descrivere correttamente i tuoi contenuti e stai aiutando il web a crescere in un posto migliore, credimi.</p> <p>Ecco alcune risorse solide che coprono gli elementi HTML e i loro scopi previsti:</p> <ul> <li> html5doctor.com è una collaborazione di alcune delle menti più acute del settore, chiarendo come dovremmo usare l'HTML semantico.</li> <li> Elementi HTML su Mozilla. Nota il piccolo <strong>5</strong> icone di alcuni degli elementi? Indicano che questi elementi sono aggiunte recenti alle specifiche HTML, attualmente indicate come HTML5.</li> </ul> <hr> <h2>Compito 5: leggere un libro</h2> <p>Avere libri a portata di mano è sempre ottimo per fare riferimenti alle cose, o anche (abbastanza sorprendentemente) per leggere da una copertina all'altra. In questa fase del tuo viaggio in HTML, prenditi del tempo per procurarti un paio di libri di riferimento. Io raccomando:</p> <img src="//accentsconagua.com/img/images_20/the-best-way-to-learn-html_11.png"> <ul> <li> HTML e CSS Progettare e costruire siti Web - vale la pena di prendere in considerazione per la qualità della presentazione tra le altre cose.</li> <li> Decodifica di HTML5 da Rockable Press: questo libro offre una visione approfondita del funzionamento politico dietro gli standard HTML.</li> <li> HTML5 PER I PROGETTISTI WEB di A Book Apart - Se non possiedi ancora una pubblicazione A Book Apart, questo è il momento giusto per presentarti.</li> <li> L'introduzione di HTML5 da parte di Bruce Lawson e Remy Sharp - inizia a diventare un po 'complessa in termini di altre funzionalità offerte da HTML5, ma questo è un libro HTML che vale sicuramente la pena di verificare.</li> </ul> <hr> <h2>Compito 6: partecipare alla comunità</h2> <p>Ecco la parte migliore di essere un professionista del web: la community. Ogni volta che hai una domanda o un problema, c'è sempre qualcuno là fuori che ha incontrato la stessa cosa e sarà disposto ad aiutarti. Vai e partecipa ai forum e alle community creative, chiedi aiuto e offri consigli una volta diventato abbastanza sicuro da farlo!</p> <p>Partecipa prendendo parte alle seguenti comunità:</p> <ul> <li> Stack Overflow: la migliore community di domande e risposte tecniche. Stai imparando l'HTML? Ci sono già un bel po 'di discussioni in corso ... </li> <li> Forrst: un ottimo posto per feedback creativi e tecnici sui progetti su cui stai lavorando. È un invito solo se vuoi partecipare, ma aggira i corridoi abbastanza a lungo e qualcuno ti lascerà entrare ... </li> <li> GitHub: principalmente un repository online aperto per l'archiviazione e il versioning del proprio codice, GitHub offre l'apprendimento attraverso il modo in cui gli altri "fanno ciò". Molti dei progetti su GitHub sono intimidamente avanzati per i principianti dell'HTML, ma tengono presente questo in mente per il futuro.</li> <li> Creattica: è una community online per creativi. Dai e ricevi feedback sui tuoi ultimi progetti HTML.</li> </ul> <p>A parte le community, i social network sono il modo perfetto per interagire con i tuoi eroi HTML, porre domande e offrire opinioni. Ecco un paio di Twitterers che vale la pena seguire per la loro abilità in HTML:</p> <ul> <li>@ html5doctor</li> <li>@brucel</li> <li> @wdtuts naturalmente ... </li> <li> @nette naturalmente ... </li> <li>@LeaVerou</li> <li>@zeldman</li> <li>@meyerweb</li> <li>@smashingmag </li> </ul> <hr> <h2>Assegnazione 7: accelerare il flusso di lavoro di markup</h2> <p>A questo punto hai una presa su cosa sia l'HTML, quali elementi sono attualmente utilizzati, come strutturare il markup semantico, chi sono i player del settore e sei pronto per la prossima sfida! Il prossimo passo logico sarebbe concentrarsi sui CSS; stilando il markup HTML ora sei esperto nella scrittura. Prima però, vediamo se possiamo accelerare il nostro flusso di lavoro di markup con un paio di approcci alternativi ... </p> <h3>riduione di prezzo</h3> <blockquote><p>Markdown ti consente di scrivere usando un formato di testo semplice di facile lettura e facile scrittura.</p></blockquote> <p>Markdown è un modo più leggibile di scrivere markup del contenuto HTML. Allevia una grande quantità di codifiche dei tag, cambiando tutte quelle sciocchezze per una sintassi meno complessa. Una volta che hai scritto il tuo documento Markdown, eseguilo attraverso un parser (come Dingus) per sfornare l'equivalente HTML familiare.</p> <p>Ad esempio, ora conosciamo questi tag HTML:</p> <pre><h1>Questo è un H1</h1> <h2>Questo è un H2</h2> <h6>Questo è un H6</h6></pre> <p>L'equivalente di Markdown sarebbe:</p> <pre># Questo è un H1 ## Questo è un H2 ###### Questo è un H6</pre> <p>il che significa che non dovresti preoccuparti di chiudere i tag - e la natura frastagliata delle intestazioni di Markdown rende la gerarchia visivamente molto più chiara, più leggibile agli occhi umani.</p> <p>Markdown sta diventando sempre più popolare e lo troverai integrato in editor di codici e sistemi di gestione dei contenuti. In termini di scrittura di contenuti web è l'ideale. Dai un'occhiata alla pagina di sintassi per maggiori informazioni, o dai un'occhiata al nostro recente tutorial Quick and Easy Documentation Using Markdown.</p> <h3>Emmet</h3> <p>Emmet accelera la codifica del markup analizzando e convertendo il codice abbreviato. Ad esempio, invece di digitare manualmente:</p> <pre><div> <ul> </ul> </div></pre> <p>useresti la forma abbreviata:</p> <pre>div> ul> li * 4</pre> <blockquote><p>Emmet (precedentemente noto come Zen Coding) è un toolkit web-developer che può migliorare notevolmente il flusso di lavoro HTML e CSS:</p></blockquote> <p>Ciò che questo dice letteralmente è "emettere un div, che contiene un elenco non ordinato, che contiene quattro voci di elenco".</p> <p>A seconda dell'applicazione che si sta utilizzando, si farebbe clic su (ad esempio) TAB ed Emmet elaborerebbero la sintassi abbreviata, emettendo il markup HTML come nell'esempio originale. Il potenziale di risparmio di tempo dovrebbe essere già molto chiaro, e Emmet lo fa <em>tanto</em> più del nostro semplice esempio qui.</p> <p>Emmet può essere utilizzato con un numero di editor di codice e applicazioni, dai uno sguardo a Migliorare la tua produttività: Suggerimenti rapidi per Zen Coding e 7 Impressionanti suggerimenti per risparmiare tempo in HTML Emmet per un ulteriore aiuto per iniziare.</p> <hr> <h2>Conclusione</h2> <p>Seguendo un piano di apprendimento come questo e sfruttando al massimo le risorse menzionate, ti invierai sulla strada del successo in HTML. Imparare una nuova abilità apre le porte, chissà dove questa abilità ti porterà?</p> <p><strong>Passo successivo:</strong> Ora hai alcune competenze HTML sotto la cintura, dai un'occhiata a Il modo migliore per imparare CSS.</p> <p>Qualsiasi suggerimento di apprendimento è molto gradito - urlo nei commenti!</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">Il modo migliore per imparare 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">Il modo migliore per imparare i 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="/">it.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informazioni interessanti e consigli utili sulla programmazione. Sviluppo di siti web, web design e sviluppo web. Tutorial di Photoshop. Creazione di giochi per computer e applicazioni mobili. Diventa un programmatore professionista da 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="Ricerca...">
<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>