Dato che ho uno sfondo in stampa, sono sempre desideroso di aiutare i designer di altre aree a iniziare dal web design e dallo sviluppo di base. So per esperienza che la transizione è estremamente intimidatoria e che molte persone semplicemente non pensano di poter gestire.

Fortunatamente, posso anche attestare che probabilmente non è così difficile come potresti immaginare. Nel mondo della codifica hardcore, HTML e CSS si collocano piuttosto in basso barriera all'entrata scala.

Oggi inizieremo una serie che esamina gli elementi costitutivi fondamentali dello sviluppo web. HTML, CSS, JavaScript; Se sei un principiante completo e inesperto che potrebbe anche non avere una conoscenza di base di ciò che queste tecnologie sono molto meno come maneggiarle, allora questa serie è per te.

Cos'è l'HTML?

Ci sono un milione di modi in cui potrei iniziare questa discussione. Potremmo addentrarci nel modo in cui HTML sta per Hypertext Markup Language o come è stato inventato nel 1980 dal fisico Tim Berners-Lee come sistema per condividere documenti, ma è possibile ottenere tutto ciò da Wikipedia. Se sei interessato alla storia del World Wide Web, ti consiglio vivamente di approfondire ulteriormente l'argomento, ma questo non ci aiuta molto nella nostra discussione su cos'è l'HTML oggi e su come dovrai usarlo.

Quello che devi veramente capire è lo scopo concettuale dell'HTML. Cosa serve? Perchè ne hai bisogno? Come si confronta e si relaziona con altre tecnologie come CSS e JavaScript?

HTML: il pezzo più importante

Lungo queste linee, l'HTML può essere pensato come il tassello fondamentale del web come lo conosci. C'è un'architettura di base della tecnologia complicata che compone? Internet? ma il buon vecchio WWW dipende in gran parte dall'HTML.

Infatti, tecnicamente, HTML è tutto ciò che serve per creare una pagina web. Alcune linee HTML estremamente semplici caricate su un server Web costituirebbero una pagina Web, che non è sicuramente qualcosa che può essere detto per CSS e in genere non è qualcosa che può essere detto di JavaScript. Il punto qui è che, mentre tutte queste tecnologie sono strettamente correlate, l'HTML è il pezzo chiave del puzzle.

Ora, prima che tu sia troppo eccitato, ciò non significa che puoi farla franca solo con l'apprendimento dell'HTML. Sarebbe difficile trovare una pagina web moderna che non utilizzi, come minimo, una combinazione di HTML e CSS.

Markup Languages

Per comprendere veramente cos'è l'HTML, è necessario capire quali sono i linguaggi di markup e perché esistono (mi sto intrufolando in quel momento in fondo).

Fondamentalmente, il web è scritto in testo semplice. Ora, con? Testo normale? Non intendo solo una mancanza di immagini, intendo una mancanza di formattazione ricca di qualsiasi tipo. A differenza di Microsoft Word, in cui è possibile creare facilmente testo in grassetto in qualsiasi dimensione, la scrittura del codice è più simile all'utilizzo di WriteRoom o IA Writer; tutto quello che ottieni sono semplici vecchie lettere e simboli.

La metafora della macchina da scrivere

Immagina di comporre un saggio su una macchina da scrivere d'epoca, poi di consegnare quel saggio a qualcuno in modo che possano inserirlo in un computer. La tua macchina da scrivere non ha caratteristiche di formattazione, ma quando il tuo collaboratore inserisce il tuo saggio nel moderno elaboratore di testi, vuoi che abbia intestazioni, testo in grassetto, testo in corsivo, elenchi puntati e altro. Come diresti a quella persona dove implementare queste funzionalità?

La risposta è, naturalmente, che vorresti? il tuo documento e inserisci degli indicatori aggiuntivi su come vuoi che il testo sia formattato. Questi non sarebbero presenti sul risultato finale, ma sono semplicemente pensati per dire all'interprete come far apparire tutto come si intende. Questo è esattamente come funziona un linguaggio di markup. Con HTML, questo markup è realizzato tramite tag.

Tag, sei tu

Mentre scrivo questo articolo, lo sto facendo in formato HTML HTML. Questo significa quando voglio grassetto qualcosa, non posso semplicemente premere un pulsante. Invece, inserisco un tag grassetto:

L'ultima parola sarà in <b>grassetto</b>.

Vedi come l'ho usato?? per indicare dove dovrebbe iniziare il testo in grassetto? Notate anche come ho usato?? per indicare dove finirà il testo in grassetto. Per scrivere in corsivo qualcosa, uso la stessa tecnica.

<i>Questo è in corsivo.</i> Questo non è.

Le parti a parentesi sono note come tag e ogni set di tag ha un punto di partenza e di arresto. Con questi, dici all'interprete, nel nostro caso un browser web come Firefox, come vuoi che il contenuto sia formattato. Quando inseriamo il contenuto tra un'etichetta di apertura e quella di chiusura, di solito diciamo che abbiamo? Avvolto? in un tag.

Tag di esempio

Ora che sai quali sono i tag, ecco alcuni esempi più elementari di alcuni tag HTML:

• paragrafo

• intestazione

  (h2, h3, h4, ecc. creano intestazioni incrementalmente più piccole)

• piccolo testo

Link, tag e attributi

Questo è dove l'? Hypertext? in? Hypertext Markup Language? parte entra in gioco. Una delle parti principali della scrittura dell'HTML e, in effetti, l'uso del web in generale, è il collegamento. È così che funziona tutto bene? Se nel tuo browser è caricata una pagina web e vuoi arrivare a un'altra pagina, cosa fai? Clicca un link! Questo sistema è fantastico per connettere tutti i vari bit e pezzi di informazioni memorizzati sul web.

Per collegare qualcosa in HTML, ovviamente usiamo un tag. Questo tag apparirà un po 'più complesso di molti altri. Diamo un'occhiata a un esempio che rimanda alla home page di Design Shack.

Leggi Design Shack ogni giorno per pezzi fantastici di bontà del design.

Qui non abbiamo solo un etichetta ma a attributo anche. Il tag () dice al browser che c'è un link e l'attributo (href) dice al browser dove deve andare il link. La sintassi per questo tipo di struttura è la seguente:

Testo, immagini, ecc.

Nel nostro esempio precedente, qualcosa tra il? A? i tag diventano un collegamento. Quindi le parole? Design Shack? sarebbe stato un link di testo attivo che, cliccando, indirizzava l'utente all'URL href, che era la homepage di Design Shack.

Posizionare un'immagine via HTML funziona allo stesso modo. Usiamo il? Src? attribuire per puntare il browser alla posizione dell'immagine e al? alt? attributo per il testo che apparirà al posto dell'immagine se non può essere visualizzato. Nota che la struttura del tag di chiusura è un po 'diversa questa volta con tutti? Img? informazioni inserite all'interno di un singolo tag.

<img src="//lesptitesaffairesdemayl.be/img/images_1/what-is-html-back-to-basics_4.jpg"> <p>Ora abbiamo una buona idea di come HTML sia un linguaggio di markup e cosa significhi. Sappiamo che è fondamentalmente un modo per dare al browser un testo semplice e renderlo ricco di formattazione e persino di contenuto attivo su cui è possibile fare clic. L'ultima cosa che dobbiamo capire è come si inserisce nel quadro generale di una pagina web completa.</p> <p>Come abbiamo visto negli esempi sopra, HTML <em>soprattutto</em> si riferisce direttamente inserendo il contenuto in una pagina. L'effettiva struttura di base di qualsiasi pagina web è il tipo di dichiarazioni taggate che abbiamo appena appreso. La maggior parte del testo e dei link che vedi in una determinata pagina, così come molte delle immagini, sono implementate direttamente con HTML. </p> <h3>HTML è destinato a essere noioso</h3> <p>Come ho detto sopra, l'HTML è tecnicamente tutto ciò che serve per una pagina web. Tuttavia, questo contenuto HTML di per sé è abbastanza semplice. Si noti che da nessuna parte negli esempi precedenti abbiamo detto alla pagina quale colore di sfondo vogliamo utilizzare, quali dimensioni deve essere il testo, quali font applicare, dove devono essere ampie le parti e come devono essere allineate, ecc. </p> <p>Abbiamo semplicemente gettato il contenuto senza alcun reale pensiero su come sarà. Guardando qualsiasi pagina sul web puoi vedere che nessuno si ferma qui. Ogni sito ha il proprio aspetto grafico, la propria combinazione di colori, la tipografia, il layout, ecc.</p> <p>Ad esempio, immagina che il tuo sito di notizie locale raccolga una storia dalla stampa associata. Potrebbero stampare la storia in modo letterale e quindi avere la stessa struttura HTML di base per quel contenuto, ma probabilmente sarebbe molto diversa dalla versione sul sito di AP. Perché?</p> <h3>CSS è la pelle, i capelli e l'abbigliamento</h3> <p>La risposta è che l'HTML moderno non è generalmente usato per governare lo stile e il layout estetico. Per questo, abbiamo adottato qualcosa chiamato Cascading Style Sheets o CSS.</p> <p>Il tipico flusso di lavoro degli sviluppatori Web potrebbe essere quello di inserire tutti i vari contenuti puri in un documento HTML, quindi passare al CSS e iniziare a creare quel contenuto in modo da renderlo visivamente più gradevole e utilizzabile. Un anno dopo lo sviluppatore potrebbe tornare e lanciare un nuovo file CSS che rende il sito completamente diverso, senza toccare l'HTML. </p> <p>JavaScript salta in questo gioco assumendo un ruolo più attivo nel modo in cui la pagina <em>si comporta</em>. Animazioni, invii di moduli, contenuti dinamici, questi sono il dominio di JavaScript. Ultimamente i CSS hanno invaso questo territorio, ma questo è un argomento per un altro giorno. </p> <h2>Che cos'è HTML5?</h2> <img src="//lesptitesaffairesdemayl.be/img/images_1/what-is-html-back-to-basics_5.jpg"> <p>Prima di concludere, probabilmente ti starai chiedendo perché diavolo tutto questo discorso su HTML5 riguardi. HTML5 è esattamente ciò che sembra: la quinta iterazione principale dell'HTML.</p> <p>Le tecnologie web non sono scolpite nella pietra, sono in continua evoluzione ed espansione. Proprio come i tipografi devono generalmente tenere il passo con i nuovi campanelli e fischietti nell'ultima versione di Photoshop, così i web designer devono tenere d'occhio i cambiamenti negli standard web. </p> <p>HTML5 apporta molte nuove funzionalità al tavolo eliminando il grasso non necessario dalla sua precedente versione. Ad esempio, gli sviluppatori HTML5 hanno alcuni nuovi tag con cui fare in modo che la struttura di base di una pagina web sia più logica. </p> <p>Per ulteriori informazioni su HTML5, consulta le nostre serie complete sull'argomento:</p> <ul> <li>HTML5: Nozioni di base</li> <li>HTML5: nuovi elementi</li> <li>HTML5: modifiche semantiche</li> <li>HTML5: eseguilo oggi</li> </ul> <h2>Conclusione: più da venire!</h2> <p>Questo articolo ha lo scopo di darti una panoramica concettuale di base dell'HTML. Se hai iniziato a leggere senza la minima idea di cosa sia l'HTML e come sia usato, spero che tu abbia una conoscenza di base di questi concetti.</p> <p>Mentre guardiamo al futuro, espanderò questo argomento e passerò attraverso l'anatomia di base di un documento HTML per passare poi a un'altra importante domanda: cos'è il CSS? </p> <p>Assicurati di controllare presto per ulteriori informazioni su questi argomenti!</p> <p><em>Fonti di immagini: xlibber, Ryan Amos, Dave Parker</em></p>