Introduzione a HTML e CSS per designer

Un'introduzione a HTML e CSS per i progettisti.

Come graphic designer, probabilmente sei consapevole del rapporto in continua evoluzione tra design e tecnologia. Ciò è particolarmente vero per coloro che sono coinvolti nel web design. In questo settore, dobbiamo avere una conoscenza di base di come i nostri layout accuratamente realizzati diventano pagine web viventi. Quando comprendiamo le basi di questo processo (e i suoi limiti), possiamo comunicare accuratamente con gli sviluppatori e creare siti web con perfetto pixel.

Ciò non significa che devi sapere come codificare un sito web da cima a fondo (anche se sarebbe fantastico!), significa solo che devi capire le basi. In questo post inizieremo con un'introduzione di base all'HTML. Imparerai come ritagliare progetti web in Photoshop e formattare HTML utilizzando CSS. Introduzione a HTML e CSS per designer

Cos'è l'HTML?

Quasi tutto ciò che vedi quando navighi sul Web è un documento HTML (Hypertext Markup Language). Ipertesto è testo che fa riferimento e fa riferimento ad altro testo sullo schermo, consentendoti di accedere al contenuto con un semplice clic. Linguaggio con marcatori è un insieme di tag racchiusi tra parentesi quadre <>. Questi tag HTML solitamente vengono forniti in coppia:

<tag iniziale> : Noto anche come tag di apertura.
: chiamato anche tag di chiusura e include una barra /

Quando racchiudi il contenuto tra questi due tag, il tutto viene chiamato elemento :

Questo è un paragrafo

Quando questa lingua verrà tradotta su Internet, gli spettatori non vedranno i tag, vedranno solo il contenuto al loro interno.

HTML 5, la versione attuale di HTML, contiene circa 100 tag con attributi che ne modificano la funzione o l'aspetto. Hai solo bisogno di conoscere 30-40 di questi tag per iniziare a comprendere e creare HTML. Dai un'occhiata a loro e nota come sono raggruppati per funzione. Vediamolo in azione.

Tagliare immagini con Photoshop.

Introduzione a HTML e CSS per designer

Prima della codifica, dobbiamo decidere quali sezioni del sito web dovrebbero includere immagini e quali possono essere codificate. Approfittiamo uno strumento Photoshop Taglia (nascosto nel sottomenu Strumento di ritaglio ) ed evidenziare aree come la fotografia di un burrito e Taco Joan .

Ora dobbiamo esportare i nostri snippet: scegli File > Salva per Web (Alt + Maiusc + Ctrl + S). Quando viene selezionato uno snippet specifico, puoi impostarne le opzioni di esportazione sul lato destro della finestra (JPG, PNG, ecc.). Se fai doppio clic su un frammento specifico, vedrai una finestra pop-up " Parametri del frammento" - Ciò ti consente di nominare file di frammenti specifici.

Per impostazione predefinita, tutte le immagini vengono inserite nella sottodirectory /images/. Se desideri esportare solo gli snippet che crei, seleziona " Tutti i frammenti personalizzati" nella finestra "Salva". Introduzione a HTML e CSS per designer

Creazione di un documento HTML di base

Abbiamo i nostri affettatori, creiamo un documento HTML di base. Introduzione a HTML e CSS per designer

Linea 1 : Dichiara che il dialetto HTML 5 è la lingua del documento.

Linea 2 : elemento rappresenta la radice di un documento HTML. Questo è un contenitore obbligatorio che denota i confini del nostro documento.

3 : capitolo contiene elementi di pagina invisibili come meta informazioni, titolo, ecc.

Linea 4 : Questa è la dichiarazione di codifica del documento − utf-8 - scelta sicura: puoi leggere di più sulle codifiche dei caratteri HTML qui .

Linea 5 : Pagina di esempio Questo è il titolo della pagina che appare nella barra del titolo del browser.

6 : chiude l'etichetta dalla linea 3.

Linea 7 : Questo elemento del corpo conterrà tutto il contenuto visibile della pagina.

Linea 8 : chiude l'etichetta dalla riga 2. Questo elemento segna la fine del documento. Introduzione a HTML e CSS per designer

Esistono altri modi possibili per codificare lo stesso progetto. Utilizzeremo i tag semantici HTML 5 (header, nav, article, footer) per creare la struttura di base del documento:

Questo è il layout tradotto in HTML:

Alcune note:

Linee 11 e 12 : Gli elementi sono l'essenza di Internet poiché vengono utilizzati per creare collegamenti ipertestuali . Sono vincolati all'attributo HREF e devono vincolare la destinazione URL .

Linee 18–20 : Questi sono alcuni tag di formattazione del testo: denota un'intestazione di primo livello; denota un paragrafo; significa interruzione di riga.

Formattazione con fogli di stile a cascata (CSS).

Introduzione a HTML e CSS per designer

Quando apri solo il file HTML in un browser web, vedrai che non è formattato come il nostro design precedente. Questo perché il codice HTML non è sufficiente: dobbiamo formattarlo con Fogli di stile a cascata (CSS) . CSS è un linguaggio di fogli di stile utilizzato per formattare gli elementi HTML.

Ma perché esattamente dobbiamo combinare HTML e CCS? Qualche tempo fa, la formattazione veniva ottenuta aggiungendo attributi ai tag HTML. Tuttavia, ciò ha prodotto un codice illeggibile e non gestibile. La soluzione era separare il contenuto del documento (HTML) dalla formattazione del documento (CSS).

Analizziamo in modo semplice regola CSS : .

Selettore : questo è l'elemento HTML a cui vuoi applicare lo stile. Ad esempio: <articolo>

Annuncio : Una regola CSS può avere una o più dichiarazioni. Ogni dichiarazione è costituita da una proprietà e da un valore ed è separata da un punto e virgola. Metti le dichiarazioni tra parentesi graffe {}. Introduzione a HTML e CSS per designer

proprietà : Questo caratteristica di stile, che desideri modificare. Ad esempio: colore di sfondo, dimensione font eccetera.

Valore : a ciascuna proprietà è associato un valore. Ad esempio: #ffcc11 (per il colore dello sfondo), 16px (per la dimensione del carattere), ecc.

Ci molte proprietà CSS, che può essere impostato per ciascun elemento HTML, ma non è necessario scriverli tutti da soli. Puoi fare affidamento sulle impostazioni predefinite del tuo browser o utilizzare un foglio di stile di base che reimposta il tuo browser su impostazioni ragionevoli. In effetti, a scrivere selettori farlo da soli richiede molta conoscenza ed esperienza.

Diamo un'occhiata ad alcune regole CSS necessarie per formattare il nostro semplice design.

Proprietà di posizionamento CSS : esiste 4 metodi diversi (statici, fissi, relativi e assoluti) che ci permettono di posizionare determinati elementi nel nostro design. Dopo aver impostato uno di questi metodi, puoi posizionare gli elementi utilizzando le proprietà superiore, destra, inferiore e sinistra: funzioneranno in modo diverso a seconda di quale dei 4 metodi utilizzi. In questo caso vorremmo posizionare immagine_piastra, utilizzando assoluto posizionamento.

Modello scatola CSS : questo modello è un frame che racchiude tutti gli elementi HTML, inclusi margini, bordi, riempimento e contenuto. Il margine è l'area invisibile attorno al bordo e il riempimento tra il bordo e il contenuto.

Se vuoi VERAMENTE saperne di più sulla programmazione, guarda a questo fantastico sito: Codecademy .