Ghidul pentru începători pentru HTML și CSS

La guida per principianti a HTML e CSS

⌛ Reading Time: 9 minutes

Sebbene oggi sia possibile trovare molte tecnologie diverse che alimentano i nostri siti, i due file più importanti su tutta Internet sono HTML e CSS. Sì, se hai bisogno di qualcosa di complesso, avrai anche bisogno di più tecnologie per andare con loro. Ma se tutto ciò che vuoi è creare una semplice pagina web 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 leggere da solo se desideri modificarlo ulteriormente ed espanderlo. Ma sarà un sito e funzionerà “come dovrebbe” nella maggior parte dei browser.

Poiché lo spazio è prezioso, non ci immergeremo troppo in 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 è composto da 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 questi elementi.

Entrambi sono essenzialmente file di testo tipici, contenenti testo strutturato in modo specifico. Non hai bisogno di alcun tipo speciale di programma per crearli o modificarli: qualsiasi editor di testo “semplice” andrà bene. Con “semplice” si intende la tipica applicazione in stile blocco note, non qualcosa come l’editor di LibreOffice o Microsoft Words che potrebbero “arricchire” il testo in qualsiasi modo.

Il primo passo è creare una nuova cartella sul desktop con due file di testo vuoti al suo interno. Assegna un nome a uno “index.html” e al secondo “style.css”.

Configura il tuo spazio di lavoro

Esegui il tuo browser preferito e carica il file HTML al suo interno, selezionando “File -> Apri” o trascinando il file nella sua finestra.

Apri sia il file HTML che il file CSS nel tuo editor di testo di tipo blocco note preferito.

La possibilità di visualizzare tutte e tre le finestre contemporaneamente è il modo più comodo per lavorare. Se non hai due schermi per distribuirli, ti consigliamo di disporre le finestre come nella nostra immagine qui sotto.

Effettua una configurazione dell'area di lavoro del sito

“Incolla” la finestra del browser su un lato dello schermo per occuparne metà (verticalmente) 4 e posiziona le due finestre del blocco note sull’altro lato, una sotto l’altra.

Costruzioni

Scrivi qualcosa sul blocco note con il file HTML e salva le modifiche. Quindi, aggiorna la finestra del browser premendo F5. Vedrai immediatamente il testo che hai scritto apparire nella finestra del tuo browser.

Congratulazioni per aver appena configurato il tuo primo sito! E non stiamo scherzando, poiché i primi siti su Internet non differivano molto nel loro aspetto rispetto a quanto appena creato. La cosa importante, allora, era il contenuto stesso.

L’HTML ti consente di “contrassegnare qual è ogni parte di contenuto”, utilizzando un insieme specifico di “codici”. Alcuni dei più importanti sono:

  • html: Indica un documento html. Dovrebbe essere all’inizio di ogni file html.
  • body: Tutto il contenuto che vedi su un browser è racchiuso in questo body etichetta. Rappresenta l’aspetto visivo di un documento html.
  • p: Paragrafo di testo
  • img: Immagini
  • a href: Collegamenti a indirizzi web
  • div: Imposta una “scatola” attorno a qualsiasi parte di contenuto che puoi quindi “applicare” con CSS.

Per “definire” un 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:

” indica che “ciò che segue è un paragrafo” e “

” che “il paragrafo finisce qui”. Sostituendo “p” con “div” in entrambi i casi, definisci una casella che racchiude il contenuto anziché “contrassegnarlo come paragrafo”.

Nota che ci sono delle eccezioni: elementi come immagini (img) e linee di divisione (hr) non richiedono un “codice di chiusura”.

Crea un primo paragrafo del sito

Cambia e aggiorna

Sostituisci tutto nel tuo file HTML con quanto segue:

Aggiorna il browser (F5) e vedrai le parole HEADER, CONTENT e FOOTER apparire una sotto l’altra. Abbiamo appena creato tre box “div” invisibili e autonomi. Ognuno di loro contiene una delle parole.

Per poter definire il loro aspetto tramite CSS, abbiamo assegnato a ciascuno una parola chiave, una “identità” (l ‘“id = nome” nel codice), corrispondente al loro contenuto: intestazione, contenuto e piè di pagina. Tutti gli elementi in una pagina web possono avere un tale alias, impostato come “classe” o “id”. Le classi definiscono gli alias per gli elementi che appaiono più volte sulla stessa pagina web, come paragrafi, collegamenti, ecc. Gli ID definiscono gli alias per gli elementi che appaiono solo una volta in ogni pagina, come il nome o il logo di un sito.

Crea un piè di pagina del contenuto dell'intestazione del sito

Contenuto reale

Elimina la parola “HEADER” tra i codici div, senza modificarne la struttura, e inserisci invece il nome che desideri per il tuo sito.

Fai lo stesso per il tuo “CONTENUTO”, ma invece di inserire solo testo, assicurati anche di “contrassegnare” l’inizio e la fine di ogni paragrafo come abbiamo visto in precedenza. Sostituisci “CONTENUTO” con due o tre paragrafi di testo.

Adesso è il momento di parlare anche di link. Per convertire qualsiasi frase nel testo in un collegamento, strutturalo come segue:

Puoi copiare e incollare questo e sostituire “INDIRIZZO” con “a cosa vuoi che punti il ​​link” e “TESTO” con la frase che apparirà nel tuo sito. Abbiamo collegato una frase nel nostro piè di pagina al nostro sito Web con quanto segue:

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 desideri.

Salva le modifiche e aggiorna il browser per visualizzarle lì.

Rendi un sito un contenuto reale

Hai lo stile (.CSS)

Il primo elemento di qualsiasi pagina web è la testa. In esso, di solito troviamo codice che definisce l’identità del sito, il suo nome, creatore e lingua, nonché qualsiasi tecnologia, a parte l’HTML usato in esso. È qui che risiede la maggior parte dei collegamenti a qualsiasi file JavaScript e CSS esterno. Aggiungine uno al tuo sito inserendo quanto segue all’inizio del tuo file HTML, subito dopo il html etichetta:

Per poter modellare gli elementi di una pagina web con CSS, dovrai caricare il file CSS dall’interno dell’HTML. E questo significa includerlo nella tua “testa”. Quanto segue indica che la pagina HTML “si collegherà” a un file “foglio di stile”, di tipo “testo / css”. denominato “style.css”:

Copia e incolla il nostro codice, così come lo vedi, “dentro” la testa, cioè sotto “” e sopra “”. Salva le modifiche e rivolgi la tua attenzione al file CSS. Lì, inserisci quanto segue:

Crea un sito prima Css

Sito reale

CSS, o Cascading Style Sheets, sono semplicemente insiemi di regole di visualizzazione che corrispondono a elementi specifici di una pagina web. Con i CSS possiamo definire sia “dove” che “come” tutto apparirà su una pagina web.

Nel passaggio precedente abbiamo introdotto una serie di regole vuote per tutti gli elementi della nostra pagina. Vediamo ora come aggiungere parametri che definiranno il loro aspetto.

Inizia con il corpo, che include tutto sul tuo sito web. Modificalo come segue:

Le regole di cui sopra stabiliscono che vogliamo che il nostro sito occupi l’intera larghezza della finestra del browser (larghezza: 100%), che non vogliamo che abbia alcuna distanza dai bordi della finestra del browser (margine: 0) e non lo facciamo vuoi uno spazio vuoto intorno (padding: 0).

Tutte le regole per un elemento devono essere racchiuse tra parentesi e ogni regola deve terminare con un “;” come il seguente:

Continua aggiornando il tuo CSS “#header, #content, #footer” al seguente:

Con questo, stai dicendo che la posizione di tutti e tre gli elementi dovrebbe seguire alcune regole comuni: ognuno dovrebbe essere “relativo” al precedente e “seguirlo” (float: left). Indipendentemente dalla loro dimensione, forma, aspetto o qualsiasi altro fattore, ognuno di loro “spingerà” l’elemento successivo e non si sovrapporranno mai.

Aggiorna #header, #footer con quanto segue per rendere la tua pagina web più simile a un sito reale:

Quanto sopra definisce che vogliamo che sia l’intestazione che il piè di pagina del nostro sito web siano larghi al 100%, alti 100 pixel e che il testo visualizzato in essi sia di dimensioni 3em e centrato.

Le regole di sfondo e colore specificano, rispettivamente, il colore dell’intera intestazione e del piè di pagina “div box” e il colore del testo in essi contenuto. “RGBA” imposta il colore in base allo standard di miscelazione dei colori Rosso – Verde – Blu. Ogni colore può avere un valore compreso tra 0 e 255, con combinazioni di diversi valori di rosso, verde e blu che consentono la visualizzazione di 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”.

Termina concentrandoti sui contenuti di base del sito. Definisci il suo aspetto come:

Salva di nuovo tutte le modifiche e aggiorna la finestra del browser per visualizzarle.

Stile dell’immagine

Crea un sito aggiungendo immagini

Per aggiungere immagini al tuo sito, devi tornare al file HTML. Lì, “all’interno” del contenuto ma prima del primo paragrafo, inserisci quanto segue:

Dove “PERCORSO” e “FILE.JPG” sono la “posizione” e il nome file di qualsiasi immagine, disponibile online o localmente, e “TESTO” una descrizione di ciò che rappresenta ai fini dell’accessibilità.

Crea un'aggiunta di immagine grezza al sito

Se provi a salvare e controllare le modifiche dopo questa aggiunta, scoprirai che il tuo sito è deformato. Il problema verrà risolto una volta create le 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 degli altri elementi (float: left e position: relative).

Rendi le immagini del sito fisse

Per non superare i confini della pagina, specifica come vuoi che la loro larghezza sia il massimo della pagina stessa (larghezza: 100%). Per evitare che le immagini tocchino il testo, aggiungi un margine verticale in alto e in basso. Il risultato dovrebbe essere simile a questo:

Crea immagini allineate al sito

Completare aggiungendo un’altra immagine, questa volta allineata a sinistra oa destra. Come prima, dovresti prima tornare al codice HTML e incollare lì un link alla tua immagine, come abbiamo visto prima. La differenza è che dovrai aggiungere una “classe”, un identificatore all’elemento. Quindi specificherai tramite le regole di visualizzazione CSS su di esso e su qualsiasi altro elemento in cui la stessa classe è “allegata”.

Abbiamo chiamato la nostra classe “alignright” poiché vogliamo che qualsiasi oggetto, a cui è collegato, venga visualizzato sul lato destro della pagina.

Prova a creare il codice da solo. Aggiungi un file .alignright {} class nel tuo “style.css”, quindi crea regole che lo definiscano. Il codice CSS dovrebbe specificare che vogliamo che gli elementi fluttuino sul lato destro della pagina e siano larghi del 46% (larghezza: 46%). Non vogliamo che le immagini tocchino il testo, quindi dovremmo anche aggiungere uno spazio del 2% attorno ad esse, diviso come 1% di margine (la distanza da qualsiasi altro elemento) e 1% di riempimento (un po ‘di “spazio vuoto extra attorno all’elemento “).

Pertanto, le nostre regole dovrebbero definire che qualsiasi immagine con estensione .alignright la classe allegata occuperà il 46% della larghezza della pagina, più un margine dell’1% su ciascun lato, più un riempimento dell’1% su ciascun lato. Il tutto aggiunge fino al 50%, esattamente la metà della larghezza della pagina. Il risultato dovrebbe essere simile a questo:

Pagina successiva

La tua prima pagina web è pronta e completamente operativa. Imparando di più su HTML e CSS, puoi arricchirne ulteriormente il contenuto, aggiungere nuovi elementi e migliorarne l’aspetto. Come passaggio successivo, prova a copiare e rinominare il file HTML, modificarne il contenuto e collegare ogni nuova pagina alle altre.

Non sembra troppo difficile, vero? Benvenuto nello sviluppo web: copiando, modificando e collegando pagine diverse tramite link, avrai creato il tuo primo sito multi-pagina completo, “corretto”!

Credito immagine: Gattini Pluks, Gattini Pluks, IMG_20171124_142629