Perché dovresti imparare a programmare (un po'): un'introduzione a HTML e CSS
Pubblicato: 2021-08-15Non è mai stato così facile avviare un negozio online. Grazie a piattaforme come Shopify, puoi acquistare un tema, caricare i tuoi prodotti e vendere ai tuoi clienti in poche ore! La barriera all'ingresso è così bassa che quasi chiunque può farlo.
Sebbene sia così facile iniziare, è altrettanto facile dare per scontata quella semplicità. Alla fine, vorrai aggiungere o modificare qualcosa nel tuo negozio e ti renderai conto che il tuo tema non lo supporta. Gli sviluppatori non sono economici e l'ultima cosa che vuoi fare è pagare qualcun altro per qualcosa che avresti potuto fare da solo.
E se ti dicessi che potresti passare un po' di tempo in anticipo per imparare le basi di come funzionano i siti web e risparmieresti tempo e denaro lungo la strada?
Alla fine di questo articolo, dovresti conoscere le basi di HTML e CSS e sapere abbastanza per iniziare ad armeggiare nel tuo negozio.
Quindi prenditi qualche minuto per prepararti e iniziamo!
Che cos'è HTML e CSS?
HTML sta per Hypertext Markup Language. È uno dei linguaggi fondamentali più antichi e importanti del web. È responsabile della strutturazione e della presentazione del contenuto in questa stessa pagina!
CSS è l'acronimo di Cascading Style Sheets. È responsabile di fornire all'HTML lo stile e la formattazione.
Insieme, questi sono gli elementi costitutivi necessari di qualsiasi sito web. In questo articolo, ti illustrerò le basi e ti mostrerò come codificare e modellare la tua prima pagina web.
Dato che sono un grande fan di Bill Murray (che non lo è), creeremo il nostro santuario sul web per Bill.
Prima, però, approfondiamo l'HTML e il CSS per avere una comprensione a tutto tondo della loro potenza e abilità.
L'anatomia di un sito web
Possiamo facilmente capire come funzionano insieme HTML e CSS confrontandoli con le parti strutturali di una casa.
Dietro le mura di ogni casa si cela una cornice responsabile della sua struttura. Pensa all'HTML come a una cornice di casa. È responsabile della struttura di un sito web.
Mantenendo l'analogia con la nostra casa, CSS è responsabile di cose come i colori della vernice, le dimensioni della sala da pranzo, il colore dei pavimenti in legno e la forma e lo stile del tavolo della sala da pranzo.
Diamo un'occhiata a qualche markup HTML di base e analizziamolo riga per riga.
Doctype
Il tag <!DOCTYPE html> aiuta il browser a sapere che il tipo di documento con cui vogliamo lavorare è HTML.
Capo
All'interno del tag <head> è dove memorizziamo tutti i metadati del nostro documento. Questi dati includono cose come il titolo, gli stili (CSS), la descrizione e altro. Questi dati non vengono visualizzati all'utente finale, ma i browser li utilizzano per determinare il titolo del documento o gli stili da utilizzare quando lo visualizza all'utente finale.
Annuncio pubblicitario
Alcuni altri elementi trovati nel <head> di una pagina HTML potrebbero includere informazioni sull'autore, la descrizione della pagina o un collegamento a un'immagine utilizzata per la favicon (la piccola icona in una scheda del browser).
Corpo
Il tag <body> contiene tutto il markup (codice) per il sito web. Questo è l'unico codice che l'utente finale vedrà quando visualizza il nostro sito.
Gli strumenti necessari per creare un sito web
Per iniziare a scrivere HTML potresti pensare di aver bisogno di un software costoso e fantasioso, ma non è così. In effetti, hai già quello che ti serve.
Se stai usando un PC, apri il programma NotePad. Se sei su un Mac Apple, apri TextEdit.
Ora che hai aperto il tuo programma di modifica del testo, seguimi mentre espandiamo il markup HTML di base sopra. Copia (Ctrl + C su Windows / Cmd + C su Mac) e incolla (Ctrl + p su Windows / Cmd + P su Mac) il seguente codice nel tuo editor di testo.
<!DOCTYPE html>
<html>
<testa>
<title>Il titolo della tua pagina</title>
</head>
<corpo>
<h1>Ciao mondo!</h1>
<p>Questo è il nostro primo paragrafo.</p>
</body>
</html>
Salva questo file sul desktop e aprilo nel browser web. Ora dovresti vedere il tuo codice tradotto o reso dal browser e dovrebbe assomigliare a questo:
L'elemento Intestazione (<h1>)
Il tag <h1> viene utilizzato quando si desidera attirare l'attenzione e la definizione su un determinato testo. In questo caso, vogliamo il testo "Hello World!" essere più grande e più prominente rispetto al testo successivo.
All'inizio, HTML ha sei diversi tag di intestazione che puoi usare: h1, h2, h3, h4, h5 e h6.
La dimensione del carattere si ridurrà ad ogni "passo verso il basso" che fai; H1 sarà il più grande e H6 sarà il più piccolo. Per impostazione predefinita, avranno un margine (o spaziatura intorno a loro) per separarli dagli altri elementi della pagina e per dare all'utente una gerarchia visiva.
Prenditi un minuto per sperimentare la modifica del titolo, dell'intestazione e/o dei tag di paragrafo. Dopo aver apportato una modifica, salvala e quindi aggiorna il browser. Congratulazioni, hai appena modificato l'HTML per la prima volta!
Sembra noioso però, vero?
Aggiungiamo un po' di stile alla nostra pagina e impariamo di più sul vero potere dei CSS.
Per aggiungere i nostri stili a questi elementi HTML, dobbiamo aggiungere un tag <style> all'interno del <head> del nostro documento.
Questo tag avvolge tutto il nostro CSS. Pensa a cosa c'è dentro il tag <style> come guida di stile del browser.
Sotto il tag <title> su una nuova riga, aggiungi un tag di stile come questo:
<title>Il titolo della tua pagina</title>
Annuncio pubblicitario
<stile>
</style>
All'interno del tag style è dove possiamo inserire tutte le nostre dichiarazioni. Una dichiarazione CSS è costituita da una proprietà seguita da un valore .
Rendiamo il colore del nostro <h1> diverso dal resto del nostro testo perché è il più importante e vogliamo che risalti. Aggiungi quanto segue tra i tag <style> , salva il file e aggiorna nuovamente il browser.
<stile>
h1 { colore: blu; }
</style>
Ora dovresti vedere qualcosa che assomigli a questo! Noterai che il nostro "Hello World!" il testo ora è blu. Semplice, vero?
Ecco, ce l'hai fatta! Hai modificato con successo lo stile di un elemento HTML utilizzando CSS. Ci stiamo ancora divertendo?
Aggiunta di immagini alla nostra pagina
Ci sono molti altri elementi che puoi includere nella tua pagina, ma uno dei più importanti su qualsiasi sito web è l'immagine onnipotente. Possiamo facilmente aggiungere un'immagine includendo il tagga così:
<img src= “https://www.fillmurray.com/400/500” >
Nota: a scopo dimostrativo, sto utilizzando un servizio di segnaposto per immagini chiamato www.fillmurray.com. Se preferisci, puoi utilizzare un'immagine sul tuo computer locale.
Modo alternativo (suggerimento per professionisti) per acquisire un'immagine da un sito Web: trova un'immagine su un sito Web che desideri utilizzare e fai clic con il pulsante destro del mouse su di essa. Fai clic su Copia indirizzo immagine e l'URL di quell'immagine sarà negli appunti. A seconda del browser, la dicitura potrebbe essere leggermente diversa. Sto usando Google Chrome. Non sto raccomandando l'uso eccessivo dell'hotlinking, ma per questa demo non è un grosso problema.
Copia e incolla questo elemento immagine e posizionalo sotto il tag del paragrafo in modo che il tuo blocco di codice completo assomigli al mio:
<!DOCTYPE html>
<html>
<testa>
<title> Il titolo della tua pagina </title>
<stile>
h1 { colore : blu;}
</style>
</head>
<corpo>
<h1> Ciao mondo! </h1>
<p> Questo è il nostro primo paragrafo. </p>
<img src= “ https://www.fillmurray.com/400/500 ” alt=”immagine di Bill Murray” >
</body>
</html>
Salva il tuo file e ricarica il tuo browser e ora dovresti vedere qualcosa del genere:
Se stavi prestando attenzione, hai notato un altro attributo sul tag <img> , l' alt="immagine di Bill Murray" . Poiché il browser decifra il codice e non può vedere l'output visualizzato come te e me, ha bisogno di un modo per conoscere il contesto di ciò che sta visualizzando.
Annuncio pubblicitario
Aggiungendo un tag ALT (testo alternativo) alla nostra immagine, possiamo dire al browser di cosa tratta l'oggetto della nostra immagine.
Questo è molto importante anche per la SEO (ottimizzazione per i motori di ricerca) e, cosa ancora più importante, questo testo viene letto ad alta voce per gli utenti non vedenti che utilizzano uno screen reader.
Ma per quanto riguarda i collegamenti?
Nessuna introduzione a HTML/CSS sarebbe completa senza coprire i collegamenti! Quando crei un sito web, vorrai avere la possibilità di collegarti, sia a fonti esterne che ad altre pagine interne del tuo sito web.
Parliamo dell'elemento di ancoraggio. La vera magia di un elemento di ancoraggio è in realtà il suo attributo href. Dimostriamo la struttura di un tag anchor aggiungendo un collegamento alla pagina Wikipedia di Bill.
<a href= “www.google.com” > Leggi la sua voce su Wikipedia </a>
Questo codice dice al browser che quando un utente fa clic sul testo: "Leggi la sua voce di Wikipedia", lo porta a www.google.com.
Aggiungiamo questo codice proprio sotto il nostro elemento di intestazione in modo che il nostro blocco di codice ora assomigli a questo:
<!DOCTYPE html>
<html>
<testa>
<title> Il titolo della tua pagina </title>
<stile>
h1 { colore : blu;}
</style>
</head>
<corpo>
<h1> Ciao mondo! </h1>
<a href= “https://en.wikipedia.org/wiki/Bill_Murray” > Leggi la sua voce di Wikipedia </a>
<p> Questo è il nostro primo paragrafo. </p>
<img src= “https://www.fillmurray.com/400/500” alt= “immagine di Bill Murray” >
</body>
</html>
Premi salva e aggiorna il browser e, si spera, il tuo assomigli al mio.
Portarlo oltre il traguardo
Sono andato avanti e ho disegnato il mio piccolo omaggio a Bill Murray ed ecco il mio risultato finale. Esaminerò alcuni degli stili aggiunti di seguito.
Rullo di tamburi prego…
Ora, puoi vedere che questo non è niente di entusiasmante, ma è un progetto. Questa è solo la punta dell'iceberg per quanto riguarda l'aspetto o lo stile di questa pagina. Volevo mantenere le cose semplici in modo da capire cosa fa ciascuno dei metodi di stile di seguito.
Annuncio pubblicitario
Passiamo al piccolo CSS che ho dovuto aggiungere per arrivare a questo punto.
Modellare il corpo:
Per prima cosa, al corpo della pagina, ho aggiunto:
corpo {
colore di sfondo: #eee;
font-family: Helvetica, Arial, sans-serif;
allineamento del testo: centro;
margine: 25px;
}
colore di sfondo
Ho impostato il colore di sfondo della pagina su un grigio molto chiaro usando il valore esadecimale del colore #eee. Puoi saperne di più su questi e vedere alcuni esempi qui su MOZ.
famiglia di font
Volevo cambiare il carattere dal browser predefinito Times New Roman utilizzato. Per questo, ho scelto Helvetica come prima scelta (se l'utente ha quel font installato sul proprio computer), Arial come seconda scelta (se l'utente non ha Helvetica, verrà impostato su Arial) e come backup finale , un font sans serif di base.
allineare il testo
Ho scelto di allineare al centro tutto il testo della mia pagina. Ci sono un paio di altre opzioni per valori come sinistra e destra, ma ho pensato che per questo fosse meglio centrato.
margine
Ho aggiunto un piccolo margine al corpo del documento per dargli un po' di respiro.
Styling la nostra immagine:
Infine, ho modellato il bel viso di Bill, ehm, intendo l'elemento dell'immagine
img {
bordo: 10px solido # 41bcd6;
box-shadow: 2px 5px 5px #999;
imbottitura: 10px;
raggio di confine: 5px;
}
Non ho fatto molto, ma volevo dare alla foto di Bill un po' di presenza sulla pagina.
frontiera
Ho aggiunto un bordo di 10 pixel attorno all'immagine. Il #41bcd6 è un altro valore di colore esadecimale che rende un colore azzurro (parte del mio tema di colore subliminale segreto Steve Zissou).
scatola-ombra
Volevo dare all'immagine una sensazione tridimensionale, quindi ho aggiunto un'ombra leggera. La proprietà box-shadow accetta valori di pixel e colore che determinano la lunghezza, la sfocatura e il colore dell'ombra. Per saperne di più sulla dichiarazione box-shadow, Moz la scompone bene per te qui.
imbottitura
Per rendere l'immagine più simile a una cornice, ho aggiunto 10 px di imbottitura tra essa e il bordo.
raggio di confine
Giusto per illustrare una delle abilità più interessanti dei CSS, ho arrotondato gli angoli dell'immagine usando border-radius. Quando ho iniziato a creare siti Web, non esisteva nulla di simile e produrre angoli arrotondati sul Web era in realtà piuttosto impegnativo. Abbiamo fatto molta strada da allora, e ora è piuttosto semplice. Accetta un valore come px o ems, e qui ho scelto solo di arrotondarlo abbastanza da notare impostando il valore su 5px.
Conclusione
In questo articolo abbiamo lavorato insieme per apprendere l'anatomia di base di un sito web. Abbiamo anche imparato alcuni semplici HTML e CSS che, alla fine, si sono trasformati in un piccolo tributo di una pagina piuttosto sorprendente a uno dei più grandi attori di tutti i tempi di una generazione
In tutta serietà, però, spero che tu sia stato in grado di seguirmi e costruire il tuo primo sito web di base. Ora, se Bill Murray non è il tuo attore preferito, ti sfido a modificare questo codice per mostrare il tuo attore, gruppo preferito o qualunque cosa tu voglia.
Se hai bisogno di fare riferimento a questo codice in qualsiasi momento, torna indietro e leggi questo articolo, o per comodità, l'ho messo su CodePen qui.
Ci sono così tante cose divertenti che puoi fare solo con HTML + CSS. Ecco alcune ottime risorse per espandere il tuo apprendimento:
Annuncio pubblicitario
- Code Academy: introduzione 100% GRATUITA al corso HTML/CSS
- CSS Zen Garden: il primo esempio sul web che mi ha davvero "cliccato" per aiutarmi a capire che puoi avere 100 siti web dall'aspetto diverso che utilizzano tutti lo stesso markup HTML
- Animazioni CSS
- La Gioconda usando solo CSS
- Cane husky animato usando solo CSS
- CodePen: CodePen è uno strumento online per testare LIVE e mostrare il tuo codice HTML, CSS e JavaScript
Abbiamo seriamente solo scalfito la superficie in questo articolo, quindi ti incoraggio a leggere di più, seguire alcuni corsi online e continuare a spingere le tue conoscenze!
