vuoi
o PayPal
tutte le volte che vuoi
Che cos'è HTML?
Una pagina web è un file di testo che è stato codificato utilizzando il linguaggio HTML in modo che venga interpretata all'interno di un browser.
Ecco il significato di HTML parola per parola:
• Hypertext: testo collegato da un documento all'altro, fa riferimento alla possibilità di collegare le pagine web;
• Markup: letteralmente marcato con i tag HTML;
• Language: l'HTML è considerato un linguaggio di descrizione delle pagine web, da non confondere con i linguaggi di programmazione.
L’HTML è quindi il linguaggio con cui indicare la struttura di una pagina web, per definirne invece la formattazione e la disposizione degli elementi abbiamo bisogno dei CSS(che tratteremo in seguito).
Scelta della versione di HTML
Ci sono varie versioni di HTML, le più conosciute sono le seguenti:
• HTML4: ha un codice molto stabile ed è accettato universalmente da tutti i browser;
• XHTML: un'implementazione rigida dell'HTML4 creata con XML, questa versione utilizza lo stesso codice di HTML4 quindi è compatibile con tutti i browser;
• HTML5: una versione rivista e corretta dell'HTML4 con l'aggiunta di nuove funzionalità. HTML5 offre molte miglioramenti nella gestione delle applicazioni e multimedia.
La nostra scelta ricade ovviamente sull'HTML5 poiché si tratta di un investimento per il futuro che nel giro di alcuni anni diventerà lo standard su cui saranno basati tutti i siti web. L'HTML5 ha un codice più pulito e semplice da scrivere, ha deprecato alcuni vecchi TAG e lascia la formattazione della pagina interamente ai CSS, cosa che non avveniva con l'HTML4.
Tutte le pagine HTML sono strutturate in TAG, i TAG sono dei marcatori racchiusi tra parentesi angolari (<TAG>). Quasi tutti i TAG hanno bisogno del rispettivo TAG di chiusura (</TAG>).
Specificare il tipo di documento
Come abbiamo detto sopra ci sono diverse versioni dell'HTML, ogni volta che scriviamo un documento dobbiamo specificare la versione che vogliamo utilizzare. La definizione del tipo va inserita nella prima riga HTML e consiste nella specifica del DOCTYPE.
Il TAG DOCTYPE inizia sempre con un punto esclamativo, deve essere scritto tutto in maiuscolo ed è uno dei pochi che non richiede chiusura, utilizzare questo TAG equivale a firmare il documento, promettendo che il codice sarà conforme a quello standard.
Nel caso dell'HTML5 il DOCTYPE è il seguente: <!DOCTYPE html>.
Struttura di un documento
Tutto il codice HTML, ad eccezione del TAG DOCTYPE, deve essere posizionato all'interno del TAG doppio <html>, questo TAG serve come involucro di tutti gli altri.
Inoltre ogni documento deve avere due sezioni: head e body:
• la sezione head contiene tutte le informazioni che a primo impatto non so percepibili dall'utente, ma che riguardano il modo in cui il documento deve essere letto, interpretato. Ad esempio troviamo il titolo, i meta tag, i collegamenti ai CSS esterni o gli script Javascript;
• la sezione body è il vero corpo del documento, conterrà tutta la parte della pagina visibile all'utente.
I meta TAG
Questi TAG particolari vanno inseriti nella sezione head del documento, sono TAG singoli quindi richiedono la chiusura alla fine del TAG con la /. I meta TAG vengono usati per definire la codifica del documento, l'autore e tutte le informazioni che vogliamo fornire ai motori di ricerca.
Facciamo un esempio:
<meta charset="utf-8" />
con questa istruzioni scegliamo di utilizzare come codifica quella dell' utf-8.
In genere l'attributo meta è costituito da una coppia nome/valore e ha tre principali attributi:
1. NAME
2. HTTP-EQUIV
3. CONTENT
I primi due attributi hanno funzioni simili.
1. L'attributo NAME
Viene utilizzato con diverse variabili:
• author (identifica l'autore);
• description ( da una breve descrizione del documento, è consigliabile utilizzare massimo 15 parole);
• copyright (ribadisce il fatto che il documento è coperto da copyright).
2. L'attributo HTTP-EQUIV
Contiene informazioni utilizzate nella comunicazione tra server e browser, ha assunto importanza in riferimento ai metodi di indicizzazione dei motori di ricerca.
3. Il meta-tag keyword
Contiene una raccolta delle parole chiave che identificano il contenuto del sito in maniera dettagliata, in passato era usato principalmente per l'indicizzazione ma nel corso degli anni ha leggermente perso il suo valore. Rimane comunque importante inserire le keyword e per farlo abbiamo bisogno di alcuni accorgimenti:
• evitare termini generici;
• riportare il termine in più lingue per avere un indicizzazione internazionale;
• inserire sia il singolare che il plurale (alcuni motori di ricerca riconosco automaticamente questa differenza);
• creare frasi composte con termini usati nelle keyword.
A differenza di come si può pensare è meglio usare poche parole chiave, l'abuso crea l'effetto contrario sul nostro sito.
Il meta-tag charset invece è stato inserito solo nella specifica dell'HTML5 e come abbiamo detto serve per definirne la codifica.
I TAG HTML
Tutto il codice HTML è organizzato attraverso i TAG, questi vengono divisi in tre tipologie:
1. Elementi di blocco
2. Elementi inline
3. Liste
1. Gli elementi di blocco sono box che possono contenere altri elementi, sia di tipo blocco che di tipo inline. Quando un elemento di blocco è inserito nel documento viene automaticamente creata una nuova riga nel flusso del documento.
2. Gli elementi inline quando sono inseriti nel documento non danno origine ad una nuova riga, possono tranquillamente essere integrati all'interno di testi senza provocarne alterazioni. Questi elementi non possono contenere al loro interno elementi di blocco, ma solo elementi inline.
Quindi possiamo dire che tutti gli elementi HTML hanno una loro modalità di visualizzazione predefinita, tramite i CSS possiamo modificare tale modalità attraverso la proprietà display. Grazie a quest'ultima possiamo trattare un elemento di blocco come un inline e viceversa.
Abbiamo poi un'altra importante distinzione da fare è quella tra elementi rimpiazzati ed elementi non rimpiazzati. Nel primo caso abbiamo tutti gli elementi le cui dimensioni sono definite dall'elemento stesso e non risente degli elementi che lo circondano (ad esempio le immagini); la maggior parte degli elementi sono non rimpiazzati, le loro dimensioni risentono quindi degli elementi esterni.
I TAG più importanti introdotti dall'HTML5 sono sei:
• header va sempre posizionato in alto nella struttura del sito, ha la funzione di contenitore;
• footer si trova sempre infondo alla pagina e serve in genere a contenere le informazioni riguardanti i proprietari del sito, il copyright, la p.iva e così via;
• section secondo la definizione presenti nella specifica HTML5 rappresenta una sezione generica di un documento o applicazione, è molto importante non confondere l'elemento <section> con il <div>. Le section possono essere usati sia come contenitore di articoli che per suddividere i commenti da un articolo all'interno di quest'ultimo;
• article è una forma particolare di section, serve per contenere e organizzare gli articoli di un blog ad esempio, al suo interno possono essere annidati più article
• nav rappresenta una parte di pagina che contiene link a pagine interne o esterne del sito, è particolarmente adatto per i menu, in genere racchiude gli ul che compongono il menu.
• aside ultimo ma non per importanza, rappresenta in genere la barra che troviamo a lato in molti siti, è un contenitore di contenuti per l'approfondimento.
In sostanza un layout standard HTML5 è il seguente:
Ovviamente per avere un layout accattivante ed una corretta formattazione dei testi dobbiamo conoscere i CSS.
Introduzione ai CSS
L'acronimo CSS sta per Cascading Style Sheets (fogli di stile a cascata), servono per definire colori, posizionamento, font e tutto ciò che riguarda l'aspetto visuale. L'ultima specifica è la CSS3 che introduce animazioni e nuove proprietà.
Prima di addentrarci nei CSS dobbiamo esaminare il modello ad albero della struttura di una pagina:
Questo serve per mettere in risalto la forma gerarchica del documento, dove ogni elemento ha una relazione genitore-figlio, questo è alla base "della cascata" e dell'ereditarietà dei CSS.
CSS esterni, interni, in linea
Esistono tre modi per scrivere codice CSS, tutti validi e utilizzati:
1. esterni (external)
2. interni (embedded)
3. in linea (inline)
1. I CSS esterni sono in genere i più utilizzati e consistono nelle scrive il codice CSS in un file esterno con estensione .css, essendo il file esterno deve essere collegato all'HTML, il collegamento avviene nell'head in questo modo:
<link rel="stylesheet" href="stile.css" type="text/css" />.
Spieghiamo meglio questo codice:
• Il tag <link> viene usato per definire collegamenti esterni come fogli di stile o codici javascript;
• l'attributo rel serve per definire la relazione che c'è con la risorsa esterna collegata;
• href definisce l'url del foglio di stile;
• type serve per definire il tipo di file che abbiamo linkato;
• media è un attributo opzionale per definire il supporto cui applicare il foglio di stile
2. I fogli di stile interni vengono scritti nella sezione head e racchiusi dal doppio tag <style> </style>, hanno priorità rispetto a quelli esterni. Quindi se scriviamo una regola esterna, poi applichiamo un valore diverso a quella regola scritto su un foglio interno, la formattazione che vedremo a video sarà quella del foglio di stile interno. Se invece aggiungiamo semplicemente altre regole che non vanno in "conflitto" vengono tutte applicate per la formattazione del documento.
3. I fogli di stile in linea sono i più specifici e i meno utilizzati, hanno la priorità su tutti gli altri e vengono scritti direttamente all'interno del tag html:
<p style=" font-size: 18px; color: red"> testo </p>
Le regole CSS
In sostanza un foglio di stile non è altro che un insieme di regole strutturate cosi:
Vediamo le due parti fondamentali che sono:
• il selettore
• il blocco delle dichiarazioni.
Il selettore serve a definire la parte del documento cui verrà applicata la regola, in questo caso sarà applicata a tutti i TAG <h1>. Il blocco delle dichiarazioni è delimitato da due parentesi graffe e al suo interno contiene tutte le dichiarazioni; una dichiarazione è composta da:
• proprietà
• valore.
La proprietà definisce un aspetto da settare secondo il valore espresso, è seguita dai due punti e dopo aver scritto il valore chiudiamo la dichiarazione con un punto e virgola.
Proprietà singole e a sintassi abbreviata
Nella definizione delle regole è possibile fare uso di proprietà singole e proprietà a sintassi abbreviata.
Con le proprietà singole per ogni dichiarazione abbiamo un valore, nelle proprietà a sintassi abbreviata ogni dichiarazione raggrupperà più valori, ecco un esempio:
div{ margin-top:10px; margin-right:10px; margin-bottom:10px; margin-left: 10px;}
con la proprietà abbreviata avremo invece questo codice:
div{ margin: 10px;}
I selettori
Il selettore serve a selezionare la parte di documento a cui verrà applicata la regola, esistono quattro tipi di selettori:
• univerale
• di tipo
• id
• classi
Il selettore universale serve a selezionare tutti gli elementi di un documento, la sintassi è la seguente:
*{ blocco delle dichiarazioni;}
Il selettore di tipo serve a selezionare tutti gli elementi di quel tipo nel documento html, ad esempio tutti i paragrafi o tutti i titoli:
p { blocco delle dichiarazioni;}
h1 { blocco delle dichiarazioni;}
Raggruppare i selettori
E' possibile inoltre raggruppare diversi selettori per semplificare il codice, ogni selettore va separato dall'altro con una virgola:
h1, h2,h3 { background: white;}
Così abbiamo settato per tutti i TAG h1,h2,h3 contenuti nel documento lo sfondo di colore bianco. Il codice è molto più compatto e più facile da gestire.
I selettori combinatori o di relazione
I selettori di relazione hanno la funziona di mettere in relazione elementi presenti all'interno del documento. Sono quattro:
Selettore Simbolo
Selettore di discendenti
Selettore di figli >
Selettore di fratelli adiacenti +
Selettore generale di fratelli ῀
Id e classi
Sono i selettori più potenti che abbiamo a disposizione. Questi selettori a differenza degli altri dobbiamo attribuirli agli elementi ai quali vogliamo applicare quelle regole, la sintassi è la seguente:
<p class="miaclasse"> </p>
<p id="mioid"> </p>
Mentre nel CSS bisogna specificare di cosa stiamo parlando in questo modo:
.miaclasse{ blocco dichiarazioni;}
#mioid{blocco dichiarazioni;}
A primo impatto gli id e le classi possono sembrare identici ma la loro differenza è sostanziale, l'id può essere usato una sola volta all'interno ( è un identificatore univoco) del documento mentre la classe possiamo attribuirla a tutti gli elementi che vogliamo.
Quindi possiamo dire che se uno stile deve essere usato più volte all'interno di un documento abbiamo bisogno di una classe, se invece va applicato ad un solo caso specifico possiamo utilizzare un id.
Le pseudo classi
Una pseudo classe non definisce un elemento ma un particolare stato di quest'ultimo. In sostanza imposta lo stile di un elemento al verificarsi di determinate condizioni.
Le pseudo classi non possono mai essere dichiarate da sole, hanno bisogno di appoggiarsi sempre ad un selettore che può essere di qualsiasi tipo.
Per definire una pseudo classe subito dopo il selettore mettiamo i due punti ed attaccato il nome di quest'ultima, poi creiamo il blocco delle dichiarazioni.
a:visited{ blocco dichiarazioni;}
Questa regola viene applicata a tutti i TAG a dopo che sono stati visitati.
Ecco un elenco delle pseudo classi più utilizzate
:first-child Si applica quando l'elemento è il primo figlio di qualsiasi altro elemento
:hover Al passaggio del mouse sopra l'elemento
:visited Quando un link viene visitato
Che cos'è HTML?
Una pagina web è un file di testo che è stato codificato utilizzando il linguaggio HTML in modo che venga
interpretata all'interno di un browser.
Ecco il significato di HTML parola per parola:
Hypertext: testo collegato da un documento all'altro, fa riferimento alla possibilità di collegare le
pagine web;
Markup: letteralmente marcato con i tag HTML;
Language: l'HTML è considerato un linguaggio di descrizione delle pagine web, da non confondere
con i linguaggi di programmazione.
L’HTML è quindi il linguaggio con cui indicare la struttura di una pagina web, per definirne invece la
formattazione e la disposizione degli elementi abbiamo bisogno dei CSS(che tratteremo in seguito).
Scelta della versione di HTML
Ci sono varie versioni di HTML, le più conosciute sono le seguenti:
HTML4: ha un codice molto stabile ed è accettato universalmente da tutti i browser;
XHTML: un'implementazione rigida dell'HTML4 creata con XML, questa versione utilizza lo stesso
codice di HTML4 quindi è compatibile con tutti i browser;
HTML5: una versione rivista e corretta dell'HTML4 con l'aggiunta di nuove funzionalità. HTML5
offre molte miglioramenti nella gestione delle applicazioni e multimedia.
La nostra scelta ricade ovviamente sull'HTML5 poiché si tratta di un investimento per il futuro che nel giro
di alcuni anni diventerà lo standard su cui saranno basati tutti i siti web. L'HTML5 ha un codice più pulito e
semplice da scrivere, ha deprecato alcuni vecchi TAG e lascia la formattazione della pagina interamente ai
CSS, cosa che non avveniva con l'HTML4.
Tutte le pagine HTML sono strutturate in TAG, i TAG sono dei marcatori racchiusi tra parentesi angolari
(<TAG>). Quasi tutti i TAG hanno bisogno del rispettivo TAG di chiusura (</TAG>).
Specificare il tipo di documento
Come abbiamo detto sopra ci sono diverse versioni dell'HTML, ogni volta che scriviamo un documento
dobbiamo specificare la versione che vogliamo utilizzare. La definizione del tipo va inserita nella prima riga
HTML e consiste nella specifica del DOCTYPE.
Il TAG DOCTYPE inizia sempre con un punto esclamativo, deve essere scritto tutto in maiuscolo ed è uno dei
pochi che non richiede chiusura, utilizzare questo TAG equivale a firmare il documento, promettendo che il
codice sarà conforme a quello standard.
Nel caso dell'HTML5 il DOCTYPE è il seguente: <!DOCTYPE html>.
Struttura di un documento
Tutto il codice HTML, ad eccezione del TAG DOCTYPE, deve essere posizionato all'interno del TAG doppio
<html>, questo TAG serve come involucro di tutti gli altri.
Inoltre ogni documento deve avere due sezioni: head e body:
la sezione head contiene tutte le informazioni che a primo impatto non so percepibili dall'utente,
ma che riguardano il modo in cui il documento deve essere letto, interpretato. Ad esempio
troviamo il titolo, i meta tag, i collegamenti ai CSS esterni o gli script Javascript;
la sezione body è il vero corpo del documento, conterrà tutta la parte della pagina visibile
all'utente.
I meta TAG
Questi TAG particolari vanno inseriti nella sezione head del documento, sono TAG singoli quindi richiedono
la chiusura alla fine del TAG con la /. I meta TAG vengono usati per definire la codifica del documento,
l'autore e tutte le informazioni che vogliamo fornire ai motori di ricerca.
Facciamo un esempio:
<meta charset="utf-8" />
con questa istruzioni scegliamo di utilizzare come codifica quella dell' utf-8.
In genere l'attributo meta è costituito da una coppia nome/valore e ha tre principali attributi:
1. NAME
2. HTTP-EQUIV
3. CONTENT
I primi due attributi hanno funzioni simili.
1. L'attributo NAME
Viene utilizzato con diverse variabili:
author (identifica l'autore);
description ( da una breve descrizione del documento, è consigliabile utilizzare massimo 15 parole);
copyright (ribadisce il fatto che il documento è coperto da copyright).
2. L'attributo HTTP-EQUIV
Contiene informazioni utilizzate nella comunicazione tra server e browser, ha assunto importanza in
riferimento ai metodi di indicizzazione dei motori di ricerca.
3. Il meta-tag keyword
Contiene una raccolta delle parole chiave che identificano il contenuto del sito in maniera dettagliata, in
passato era usato principalmente per l'indicizzazione ma nel corso degli anni ha leggermente perso il suo
valore. Rimane comunque importante inserire le keyword e per farlo abbiamo bisogno di alcuni
accorgimenti:
evitare termini generici;
riportare il termine in più lingue per avere un indicizzazione internazionale;
inserire sia il singolare che il plurale (alcuni motori di ricerca riconosco automaticamente questa
differenza);
creare frasi composte con termini usati nelle keyword.
A differenza di come si può pensare è meglio usare poche parole chiave, l'abuso crea l'effetto contrario sul
nostro sito.
Il meta-tag charset invece è stato inserito solo nella specifica dell'HTML5 e come abbiamo detto serve per
definirne la codifica.
I TAG HTML
Tutto il codice HTML è organizzato attraverso i TAG, questi vengono divisi in tre tipologie:
1. Elementi di blocco
2. Elementi inline
3. Liste
1. Gli elementi di blocco sono box che possono contenere altri elementi, sia di tipo blocco che di tipo inline.
Quando un elemento di blocco è inserito nel documento viene automaticamente creata una nuova riga nel
flusso del documento.
2. Gli elementi inline quando sono inseriti nel documento non danno origine ad una nuova riga, possono
tranquillamente essere integrati all'interno di testi senza provocarne alterazioni. Questi elementi non
possono contenere al loro interno elementi di blocco, ma solo elementi inline.
Quindi possiamo dire che tutti gli elementi HTML hanno una loro modalità di visualizzazione predefinita,
tramite i CSS possiamo modificare tale modalità attraverso la proprietà display. Grazie a quest'ultima
possiamo trattare un elemento di blocco come un inline e viceversa.
Abbiamo poi un'altra importante distinzione da fare è quella tra elementi rimpiazzati ed elementi non
rimpiazzati. Nel primo caso abbiamo tutti gli elementi le cui dimensioni sono definite dall'elemento stesso e
non risente degli elementi che lo circondano (ad esempio le immagini); la maggior parte degli elementi
sono non rimpiazzati, le loro dimensioni risentono quindi degli elementi esterni.
I TAG più importanti introdotti dall'HTML5 sono sei:
header va sempre posizionato in alto nella struttura del sito, ha la funzione di contenitore;
footer si trova sempre infondo alla pagina e serve in genere a contenere le informazioni riguardanti
i proprietari del sito, il copyright, la p.iva e così via;
section secondo la definizione presenti nella specifica HTML5 rappresenta una sezione generica di
un documento o applicazione, è molto importante non confondere l'elemento <section> con il
<div>. Le section possono essere usati sia come contenitore di articoli che per suddividere i
commenti da un articolo all'interno di quest'ultimo;
article è una forma particolare di section, serve per contenere e organizzare gli articoli di un blog ad
esempio, al suo interno possono essere annidati più article
nav rappresenta una parte di pagina che contiene link a pagine interne o esterne del sito, è
particolarmente adatto per i menu, in genere racchiude gli ul che compongono il menu.
aside ultimo ma non per importanza, rappresenta in genere la barra che troviamo a lato in molti
siti, è un contenitore di contenuti per l'approfondimento.
In sostanza un layout standard HTML5 è il seguente:
Ovviamente per avere un layout accattivante ed una corretta formattazione dei testi dobbiamo conoscere i
CSS.
Introduzione ai CSS
L'acronimo CSS sta per Cascading Style Sheets (fogli di stile a cascata), servono per definire colori,
posizionamento, font e tutto ciò che riguarda l'aspetto visuale. L'ultima specifica è la CSS3 che introduce
animazioni e nuove proprietà.
Prima di addentrarci nei CSS dobbiamo esaminare il modello ad albero della struttura di una pagina:
Questo serve per mettere in risalto la forma gerarchica del documento, dove ogni elemento ha una
relazione genitore-figlio, questo è alla base "della cascata" e dell'ereditarietà dei CSS.
CSS esterni, interni, in linea
Esistono tre modi per scrivere codice CSS, tutti validi e utilizzati:
1. esterni (external)
2. interni (embedded)
3. in linea (inline)
1. I CSS esterni sono in genere i più utilizzati e consistono nelle scrive il codice CSS in un file esterno con
estensione .css, essendo il file esterno deve essere collegato all'HTML, il collegamento avviene nell'head in
questo modo:
<link rel="stylesheet" href="stile.css" type="text/css" />.
Spieghiamo meglio questo codice:
Il tag <link> viene usato per definire collegamenti esterni come fogli di stile o codici javascript;
l'attributo rel serve per definire la relazione che c'è con la risorsa esterna collegata;
href definisce l'url del foglio di stile;
type serve per definire il tipo di file che abbiamo linkato;
media è un attributo opzionale per definire il supporto cui applicare il foglio di stile
2. I fogli di stile interni vengono scritti nella sezione head e racchiusi dal doppio tag <style> </style>, hanno
priorità rispetto a quelli esterni. Quindi se scriviamo una regola esterna, poi applichiamo un valore diverso a
quella regola scritto su un foglio interno, la formattazione che vedremo a video sarà quella del foglio di stile
interno. Se invece aggiungiamo semplicemente altre regole che non vanno in "conflitto" vengono tutte
applicate per la formattazione del documento.
3. I fogli di stile in linea sono i più specifici e i meno utilizzati, hanno la priorità su tutti gli altri e vengono
scritti direttamente all'interno del tag html:
<p style=" font-size: 18px; color: red"> testo </p>
Le regole CSS
In sostanza un foglio di stile non è altro che un insieme di regole strutturate cosi:
Vediamo le due parti fondamentali che sono:
il selettore
il blocco delle dichiarazioni.
Il selettore serve a definire la parte del documento cui verrà applicata la regola, in questo caso sarà
applicata a tutti i TAG <h1>. Il blocco delle dichiarazioni è delimitato da due parentesi graffe e al suo
interno contiene tutte le dichiarazioni; una dichiarazione è composta da:
proprietà
valore.
La proprietà definisce un aspetto da settare secondo il valore espresso, è seguita dai due punti e dopo aver
scritto il valore chiudiamo la dichiarazione con un punto e virgola.
Accedi a tutti gli appunti
Tutor AI: studia meglio e in meno tempo
