Guida per principianti a HTML e CSS
Sebbene tu possa trovare molte tecnologie diverse che alimentano i nostri siti oggi, i due file più importanti su tutto Internet sono HTML e CSS. Sì, se hai bisogno di qualcosa di complesso, avrai anche bisogno di più tecnologie da abbinare. Ma se tutto ciò che desideri è creare una semplice pagina personale, HTML e CSS sono tutto ciò di cui hai bisogno.
Introduzione alle basi
Questa è una guida per principianti a HTML e CSS che ti mostrerà come creare un sito semplice il più rapidamente possibile. I risultati non saranno necessariamente “conformi agli standard”. E dovrai fare un po’ di lettura da solo se vuoi ulteriormente modificare ed espandere. Ma sarà un sito e funzionerà “come dovrebbe” nella maggior parte dei browser.
Poiché lo spazio è limitato, non approfondiremo troppo ogni aspetto dello sviluppo e del design web. Invece, ti guideremo attraverso i passaggi per passare da zero a una pagina web completamente funzionante, spiegando cosa fa tutto nel processo.
I due file necessari
Un sito moderno consiste in molti file, ma due sono i più essenziali: un file HTML e un file CSS. Il file HTML definisce gli elementi e la struttura di una pagina. Il file CSS definisce l’aspetto di quegli elementi.
Entrambi sono essenzialmente file di testo tipici, contenenti testo strutturato specificamente. Non hai bisogno di alcun tipo di programma speciale per crearli o modificarli: qualsiasi editor di testo “semplice” andrà bene. Con “semplice”, intendiamo la tua tipica applicazione di tipo blocco note, non qualcosa come l’editor di LibreOffice o Microsoft Word che potrebbe “arricchire” il testo in alcun modo.
Il primo passo è creare una nuova cartella sul desktop con due file di testo vuoti al suo interno. Nomina uno di essi “index.html” e il secondo “style.css.”
Imposta il tuo spazio di lavoro
Esegui il tuo browser preferito e carica il file HTML in esso, selezionando “File -> Apri” o trascinando e rilasciando il file nella sua finestra.
Apri sia il file HTML che il file CSS nel tuo editor di testo di tipo blocco note preferito.
Essere in grado di visualizzare tutte e tre le finestre contemporaneamente è il modo più conveniente per lavorare. Se non hai due schermi su cui distribuirli, ti consigliamo di disporre le finestre come nella nostra immagine qui sotto.
“Fissa” la finestra del tuo browser su un lato dello schermo per occupare metà di esso (verticalmente) e posiziona le due finestre del blocco note sull’altro lato, una sotto l’altra.
Blocchi di costruzione
Scrivi qualcosa nel blocco note con il file HTML e salva le modifiche. Successivamente, aggiorna la finestra del tuo browser premendo F5. Vedrai immediatamente il testo che hai scritto apparire nella finestra del tuo browser.
Congratulazioni per aver appena impostato il tuo primo sito! E non stiamo scherzando, poiché i primi siti su Internet non differivano molto nel loro aspetto rispetto a ciò che hai appena creato. L’importante, all’epoca, era il contenuto stesso.
HTML ti consente di “marcare cosa è ciascun pezzo di contenuto”, utilizzando un insieme specifico di “codici”. Alcuni dei più importanti sono:
html: Denota un documento html. Dovrebbe essere all’inizio di ogni file html.body: Tutto il contenuto che vedi su un browser è racchiuso in questo tag body. Rappresenta l’aspetto visivo di un documento html.p: Paragrafo di testoimg: Immaginia href: Collegamenti a indirizzi webdiv: Imposta una “scatola” attorno a qualsiasi pezzo di contenuto che puoi poi “stilizzare” con CSS.
Per “definire” un pezzo di contenuto, di solito deve essere racchiuso dallo stesso codice con una leggera differenziazione all’inizio e alla fine. Ad esempio, un paragrafo di testo è definito come:
Paragrafo di testo standard
“
” indica che “ciò che segue è un paragrafo” e “
” che “il paragrafo termina qui.” Sostituendo “p” con “div” in entrambi i casi, definisci una scatola che racchiude il contenuto piuttosto che “marcarlo come un paragrafo.”
Nota che ci sono eccezioni: elementi come immagini (img) e linee divisorie (hr) non richiedono un “codice di chiusura.”
Cambia e aggiorna
Sostituisci tutto nel tuo file HTML con il seguente:
CONTENT
FOOTER
Aggiorna il tuo browser (F5), e vedrai le parole HEADER, CONTENT e FOOTER apparire una sotto l’altra. Abbiamo appena creato tre “div” invisibili e autonomi. Ognuno di essi contiene una delle parole.
Per poter definire il loro aspetto tramite CSS, abbiamo assegnato una parola chiave a ciascuno, un’”identità” (il “id=name” nel codice), corrispondente al loro contenuto: header, content e footer. Tutti gli elementi in una pagina web possono avere un tale alias, impostato come “classe” o “id.” Le classi definiscono alias per elementi che appaiono più volte nella stessa pagina web, come paragrafi, collegamenti, ecc. Gli ID definiscono alias per elementi che appaiono solo una volta in ciascuna pagina, come il nome o il logo di un sito.
Contenuto reale
Elimina la parola “HEADER” tra i codici div – senza cambiare la loro struttura – e invece, inserisci il nome che desideri per il tuo sito.
Fai lo stesso per il tuo “CONTENT”, ma invece di inserire solo testo, assicurati anche di “marcare” l’inizio e la fine di ciascun paragrafo come abbiamo visto in precedenza. Sostituisci il “CONTENT” con due o tre paragrafi di testo.
Ora è il momento di parlare anche dei collegamenti. Per convertire qualsiasi frase nel tuo testo in un collegamento, strutturalo come:
Puoi copiare e incollare questo e sostituire “INDIRIZZO” con “ciò a cui vuoi che il tuo collegamento punti” e il “TESTO” con la frase che apparirà nel tuo sito. Abbiamo collegato una frase nel nostro piè di pagina al nostro sito web con il seguente:
Infine, sostituisci la parola “FOOTER” con il tuo nome, una piccola frase che indica chi ha progettato o possiede il sito o qualsiasi altra cosa tu voglia.
Salva le modifiche e aggiorna il tuo browser per vederle lì.
Hai stile (.CSS)
Il primo elemento di qualsiasi pagina web è l’intestazione. In essa, di solito troviamo codice che definisce l’identità del sito, il suo nome, creatore e lingua, così come eventuali tecnologie – oltre a HTML – utilizzate in esso. È lì che vivono la maggior parte dei collegamenti a qualsiasi file esterno JavaScript e CSS. Aggiungi uno al tuo sito inserendo quanto segue nella parte superiore del tuo file HTML, subito dopo il tag html:
Per poter stilizzare gli elementi di una pagina web con CSS, dovrai caricare il file CSS dall’interno dell’HTML. E questo significa includerlo nella tua “intestazione.” Quanto segue indica che la pagina HTML “collegherà” a un file “stylesheet”, di tipo “text/css,” chiamato “style.css”:
Copia e incolla il nostro codice, proprio come lo vedi, “dentro” l’intestazione – cioè, sotto “
” e sopra “”. Salva le modifiche e concentra la tua attenzione sul file CSS. Lì, inserisci quanto segue:
body {}
#header, #content,#footer{}
#header,#footer{}
#header{}
#content{}
#footer{}
img {}
Sito reale
CSS, o Cascading Style Sheets, sono semplicemente insiemi di regole di visualizzazione che corrispondono a elementi specifici di una pagina web. Con CSS possiamo stilizzare sia “dove” che “come” tutto apparirà su una pagina web.
Nel passaggio precedente abbiamo introdotto un insieme di regole vuote per tutti gli elementi sulla nostra pagina. Ora, vediamo come possiamo aggiungere parametri a esse che definiranno il loro aspetto.
Inizia con il body, che include tutto sul tuo sito web. Modificalo come segue:
body {
width:100%;
position:relative;
margin:0;
padding:0;
}
Le regole sopra affermano che vogliamo che il nostro sito occupi l’intera larghezza della finestra del browser (width: 100%), che non vogliamo che abbia alcuna distanza dai bordi della finestra del browser (margin: 0), e non vogliamo alcuno spazio vuoto attorno ad esso (padding: 0).
Tutte le regole per un elemento devono essere racchiuse tra parentesi graffe, e ogni regola deve terminare con un “;” come segue:
#Element_ID{
RULE 1;
RULE 2;
RULE 3;
}
Continua aggiornando il tuo “#header, #content, #footer” CSS nel seguente modo:
#header, #content,#footer{
float:left;
position:relative;
}
Con questo, stai dicendo che la posizione di tutti e tre gli elementi dovrebbe seguire alcune regole comuni: ciascuno dovrebbe essere “relativo” al precedente e “seguire” esso ( float: left). Indipendentemente dalle loro dimensioni, forma, aspetto o qualsiasi altro fattore, ciascuno di essi “spingerà” il successivo, e non si sovrapporranno mai.
Aggiorna #header, #footer con quanto segue per far sembrare la tua pagina web più simile a un sito reale:
#header,#footer{
width:100%;
height:100px;
background:rgba(0,0,0,0.9);
color:rgba(255,255,255,0.9);
text-align:center;
font-size:12px;
}
Le regole sopra definiscono che vogliamo che sia l’intestazione che il piè di pagina del nostro sito siano larghi il 100%, alti 100 pixel, e che il testo visualizzato in essi sia di 3em di dimensione e centrato.
Le regole di colore e sfondo specificano, rispettivamente, quale colore avrà l’intera “scatola div” dell’intestazione e del piè di pagina e il colore di qualsiasi testo contenuto in essi. “RGBA” imposta il colore in base allo standard di miscelazione dei colori Rosso – Verde – Blu. Ogni colore può avere un valore da 0 a 255, con combinazioni di diversi valori di Rosso, Verde e Blu che consentono di visualizzare qualsiasi colore. L’ultimo numero corrisponde alla trasparenza. Quindi RGBA(255,0,0,0.5) ci darebbe un rosso traslucido, mentre RGBA(50,50,255,1) ci darebbe un blu brillante e “solido”.
Finisci concentrandoti sul contenuto di base del sito. Definisci il suo aspetto come:
#content{
width:80%;
background:rgba(255,255,255,0.9);
color:rgba(0,0,0,0.9);
margin:010%;
}
Salva di nuovo tutte le modifiche e aggiorna la finestra del tuo browser per vederle.
Stile delle immagini
Per aggiungere immagini al tuo sito, devi tornare al file HTML. Lì, “dentro” il contenuto ma prima del primo paragrafo, inserisci quanto segue:
Dove “PATH” e “FILE.JPG” sono la “posizione” e il nome del file di qualsiasi immagine, disponibile sia online che localmente, e “TESTO” una descrizione di cosa rappresenta per scopi di accessibilità.
Se provi a salvare e controllare le modifiche dopo questa aggiunta, scoprirai che il tuo sito è deformato. Il problema sarà risolto una volta che creerai regole CSS su come le immagini dovrebbero essere visualizzate sul tuo sito web.
Torna al file CSS e dichiara come vuoi che tutte le immagini (img) siano allineate a sinistra, seguendo il flusso di altri elementi (float: left e position: relative).
Per non superare i confini della pagina, specifica come vuoi che la loro larghezza sia al massimo quella della pagina stessa (width: 100%). Per evitare che le immagini tocchino il tuo testo, aggiungi un po’ di margine verticale in alto e in basso. Il risultato dovrebbe apparire così:
img {
float:left;
position:relative;
width:100%;
margin:5px0;
padding:0;
}
Completa aggiungendo un’altra immagine, questa volta allineata a sinistra o a destra. Come prima, dovresti prima tornare al codice HTML e incollare un collegamento alla tua immagine lì, come abbiamo visto in precedenza. La differenza è che dovrai aggiungere una “classe”, un identificatore all’elemento. Poi specificherai tramite regole di visualizzazione CSS su di esso e su qualsiasi altro elemento a cui è “attaccata” la stessa classe.
Abbiamo chiamato la nostra classe “alignright” poiché vogliamo che qualsiasi oggetto, a cui è attaccata, venga visualizzato sul lato destro della pagina.
Prova a creare il codice tu stesso. Aggiungi una classe .alignright {} nel tuo “style.css,” e poi crea regole che dovrebbero stilizzarla. Il codice CSS dovrebbe specificare che vogliamo che gli elementi fluttuino sul lato destro della pagina e siano larghi il 46% (width: 46%). Non vogliamo che le immagini tocchino il testo, quindi dovremmo anche aggiungere uno spazio di 2% attorno a esse, diviso in 1% di margine (la distanza da qualsiasi altro elemento) e 1% di padding (un po’ di “spazio vuoto extra attorno all’elemento”).
Quindi, le nostre regole dovrebbero definire che qualsiasi immagine con una classe .alignright attaccata occuperà il 46% della larghezza della pagina, più un margine dell’1% su ciascun lato, più un padding dell’1% su ciascun lato. Tutto ciò si somma al 50% – esattamente metà della larghezza della pagina. Il risultato dovrebbe apparire in questo modo:
img.alignright{
float:right;
width:46%;
margin:1%;
padding:1%;
}
Prossima pagina
La tua prima pagina web è pronta e completamente operativa. Imparando di più su HTML e CSS, puoi arricchire ulteriormente il suo contenuto, aggiungere nuovi elementi e migliorare il suo aspetto. Come prossimo passo, prova a copiare e rinominare il file HTML, modificando i suoi contenuti e collegando ciascuna nuova pagina alle altre.
Non sembra troppo difficile, vero? Benvenuto nello sviluppo web: copiando, modificando e collegando diverse pagine tramite collegamenti, avrai creato il tuo primo sito completo, “adeguato,” multi-pagina!
Crediti immagine: gattini Pluks, gattini Pluks, IMG_20171124_142629
