Scarica Riassunto Laboratorio HTML e CSS prof Silvello e più Appunti in PDF di Programmazione e Tecnologie Web solo su Docsity!
PAGINE WEB – INTRODUZIONE E HTML
- Caratteristiche di base dell’HTML
- Elementi di base dell’HTML
- Realizzazione di documenti HTML
Pagina web è formata da:
- Struttura componenti logici e di layout che compongono la pagina (titolo/ paragrafi/ tabelle/ liste/ immagini/video…etc) / non si decide tutto a priori / layout va deciso prima
- Contenuto ciò che bisogna scriverci dentro
- Presentazione riguarda tutte le parti della pagina che sono di stile (colori, tipo di bordo.. aspetti che modificano in qualche modo la pagina / possono riguardare animazioni, immagini.. etc)
Immagine uomo + vestiti
Strutturazione della pagina HTML (parte strutturale)
Vestiti CSS ( parte presentazione)
La struttura è sempre la stessa, ma la presentazione può cambiare
Inizialmente la pagine web erano state pensate soprattutto per i contenuti, senza prestare troppa
attenzione alla presentazione
CANVAS
ciò che è visibile all’interno del broswer (slide) / come è disponibile all’utente / cosa inserisco all’interno
del canvas?
Elementi di una pagina web (interno del canvas):
- Insieme di elementi che vengono disposti uno di fianco all’altro nello spazio (canvas) messo a disposizione dal browser per la loro visualizzazione questi elementi dobbiamo immaginare come se galleggiassero sulla pagina (per questo esistono regole per regolare il loro comportamento)
Una pagina web si crea con il linguaggio HTML ( HyperText MarkUp Language )
- Un linguaggio di mark-up è un linguaggio artificiale che viene definito e realizzato per permettere di specificare la struttura e il formato di documenti digitali, questi obiettivi si ottengono utilizzando combinazioni apposite dello stesso alfabeto di caratteri che viene utilizzato per scrivere il contenuto dei documenti
- Queste combinazioni di caratteri di chiamano tag
- L’insieme dei tag di un linguaggio markup permette di identificare i componenti logici di un documento e di collegarli alla definizione sintattica della struttura del documento
Si chiama mark-up perché composto da combinazioni di caratteri (tag) ogni tag specifica che tipo di
contenuto ho e come questo verrà visualizzato tag portano con sé elementi di presentazione (ma si tratta
comunque della parte strutturale)
HTML è nato con il web il web si è sviluppato in maniera non molto strutturata / è stato strutturato ex-
post attraverso il linguaggio HTML (non danno la forma alla realtà, ma prende forma dalla realtà)
XML è un altro linguaggio / non serve per visualizzare pagine web ma per strutturare un altro tipo di
contenuto
Una volta imparato HTML si può anche imparare questo linguaggio con lo stesso modus operandi
HTML struttura invece di grafica
- Permette di concentrarsi sulla struttura piuttosto che sulla rappresentazione grafica del documento (come invece fa ad esempio WordPress)
- I programmi di DeskTop Publishing (DTP), invece mettono in gran evidenza la presentazione di un documento, non la su struttura
- Comunque va tenuto presente che la distinzione tra struttura e presentazione non può essere sempre netta
Com e creo un documento HTML?
- I documenti HTML sono file di testo
- Devono essere interpretati dal browser
- Possono essere creati mediante editor di testo
Si può creare un file HTML utilizzando ad esempio l’applicazione Blocco Note
Quando creiamo un documento HTML dobbiamo scrivere delle sequenze di caratteri predefinite che permettano al browser cosa abbiamo scritto attraverso i tag il browser interpreta le sequenze di caratteri nell’interpretarlo lo trasforma in ciò che vede l’utente (prodotto finale)
Concetto di documento testuale e di “formato”
Grossa differenza tra linguaggi interpretati (=non ha passaggi intermedi) e
linguaggi compilati (=traduzione in un altro linguaggio dove il passaggio
intermedio è appunto la traduzione)
Errori con linguaggi interpretati l’errore non è visibile, perché interpreta ciò che scriviamo / per questo sono più difficili da “debuggare”
Errori linguaggi compilati l’errore viene subito riconosciuto
Word editor nel quale ciò che scrivi e ciò che vedi
Caratteristiche di un doc HTML
- HTML permette di definire quali sono le regole che devono essere rispettate dagli elementi che compongono un documento
- Un elemento HTML di solito è composto da tre parti:
a.
Tag (o etichetta) di apertura
b. Contenuto c. Tag di chiusura
Quando inserisco un tag dentro un altro si dice che sto innestando un tag
Non sono tutti allineati allo stesso modo indentazione del codice / gli elementi interni vanno indentati su una struttura diagonale vedi slide
Body ciò che viene visualizzato nel canvas Head contiene informazioni che non vengono visualizzati e contiene l’elemento title (=viene visualizzato nella barra in alto del browser non nel canvas)
META-TAG
Un meta dato è una descrizione del dato
Metà-tag i meta-tag in HTML sono dei tag che permettono di descrivere un documento HTML
- Possono essere usati dal browser per sapere qualcosa di più sulla pagina Web come ad esempio la codifica dei caratteri da usare ovvero come interpreto i caratteri della pagina
- I meta-tag non sono visualizzati dal browser e sono in genere inseriti all’interno dell’elemento
Codifica dei caratteri modo in cui interpreto i carattere che scrivo / perché ogni carattere è definito con una sequenza fino ad 8 bit / una sequenza di 8 valori che prendono la forma di 0/
Esistono diverse codifiche standard dei caratteri le codifiche più comuni che permettono di codificare correttamente tutti i caratteri sono l’ ASCII a7-bit e l’ ASCII a 8-bit.
Non tutte le lingue possono essere rappresentate da 2^8 = 256 caratteri. Per risolvere questo problema è stata proposta e adottata la codifica UNICODE (e.g. UTF-8 )
256 caratteri vanno bene per la lingua inglese / ma quando si vuole utilizzare un’altra lingua, come ad esempio l’italiano che è piena di accenti si deve utilizzare un altro tipo di codifica UTF-8 UNICODE
Va scritto nell’head
Codifica dei caratteri possiamo indicare come codificare i caratteri mediante un meta tag inserito
nell’intestazione del documento HTML (slide)
Realizzazione di un semplice documento HTML - 1:
- Elemento HTML:
- Questo è l’elemento che serve ad indicare l’inizio () e la fine () di un documento HTML
- Qualsiasi sia il contenuto tra questi tag è contenuto dell’elemento HTML
- All’interno dell’elemento HTML vi sono due altri elementi di “livello inferiore” HEAD e BODY: esempio slide
Chrome Visualizza Opzioni per sviluppatori visualizza sorgente
Nel linguaggio HTML non si distingue tra minuscole e maiuscole (no case sensitive) maiuscolo è più visibile
EsempioHTML1/EsempioHTML2 FILE
Versione aggiornata è html 5 dalla versione precedente cambia come vengono codificati i dati. Realizziamo un documento HTML. In particolare utilizziamo 3 tag (che sono di intestazione perché non appaiono nel canvas) :
: che indica l’inizio e la fine (/html) di un documento elemento principale che contiene a sua volta:
- : barra degli strumenti
- (: nome del documento non appare nel canvas))
- <body>: che contiene tutto ciò che verrà visualizzato nel canvas
Alcuni tag sono in maiuscolo e altri in minuscolo non si distingue tra maiuscole e minuscole è la stessa cosa (NO CASE SENSITIVE) comunque meglio il maiuscolo perché è più visibile.
Elementi html che ci fanno apparire qualcosa nel canvas:
- titoli: <h1> - <h2> - <h3> (dal più importante al meno importante)
Quando inserisco il testo meglio mettere un meta tag <meta charset=”utf-8”> il metatag è un tag isolato che non necessita di essere chiuso! in questo caso il metatag serve a riconoscere gli accenti o lettere accentate
ELEMENTI HTML
Nell’ head vanno : title, codifica carattere e CSS
Elemento titolo <Hx>
- (^) Elemento titolo di primo livello, denominato H1, va all’interno di BODY:
- HTML prevede altri livelli di titolo H1, H2, H3, H5, H6 più il numero è elevato minore è l’importanza del titolo (esempio3.html/esempio4.html/esempio5.html)
Elemento <P>
Elemento paragrafo di testo, denominato P, ovviamente va all’interno di BODY.
</P> può essere omesso.
Elementi che non hanno uno specifico contenuto ma che creano un qualche effetto:
- HR linea di separazione o “filetto”
- BR interpunzione di riga (per andare a capo) ** NON SI CHIUDE**
Semplice esempio di file HTML
DIV il tag significa “division” e permette di dividere la pagina in “sezioni” E’ usato in genere per raggruppare elementi a blocco a cui si vuole applicare uno stile comune
SPAN (?) stessa funzione di DIV ma in linea utile per il layout della pagina
STRUTTURE DELLE PAGINE WEB
La struttura di una pagina Web è gerarchia struttura ad albero
Elementi finali elementi foglia
Un file HTML può essere sempre rappresentato come un albero, struttura gerarchica per eccellenza rapporto genitore/ figlio
HTML è il genitore degli elementi figlio
Antenati di Strong? P / Body / Html
Ciò ci permette di descrivere la pagina e i rapporti tra gli elementi, come gli elementi si relazionano tra di loro.
Ereditarietà le proprietà impostate per un elemento sono automaticamente ereditate dai suoi discendenti
COLLEGAMENTI IPERTESTUALI
Una possibilità offerta dagli ipertesti è quella di permettere ad un documento di essere collegato con altri
documenti. Un collegamento permette di collegare una risorsa Web ad un’altra risorsa Web.
Un collegamento ha due parti:
Un collegamento inizia dall’ancora sorgente e fa riferimento all’ancora destinazione, che può essere una qualsiasi risorsa Web.
Per creare un collegamento è necessario utilizzare le ancore tramite esse si associa ad una parte del documento un documento esterno al documento stesso.
Ancora sorgente è necessario utilizzare il tag per l’ancora sorgente, perché l’ancora destinazione è qualcosa che esiste già sul web per fare un collegamento si circonda l’elemento che vogliamo rendere “cliccabile” con il tag seguente:
La sintassi d’uso di un’ancora è
In questo modo la parte di testo viene collegata al documento (a alla parte di documento) specificato da opzioni.
**Attributi tag **
- href specifica l’URL della pagina verso cui va il link
- rel specifica la relazione tra il documento corrente e il documento allegato ad esempio: alternate, license, author, bookmark
- target specifica dove aprire il documento collegato ad esempio: _blank (si apre in un’altra scheda) _self (si apre nella scheda corrente)
I tag e sono facoltativi
Vedi esempio15.html primo collegamento è in locale (=perché esiste sulla stessa macchina) ed è relativo ad un
punto di partenza / secondo collegamento è in remoto (=perché esiste su un’altra macchina, non la nostra) ed è
assoluto
STRUTTURA DI UN SITO WEB
IMMAGINI
Le immagini vengono inserite grazie all’elemento (o tag)
Elemento IMG (abbreviazione di image):
- SRC specifica la localizzazione dell’immagine (source)
- ALT ha lo scopo di permettere di inserire una descrizione testuale alternativa (alternative text)
Esempio utilizzando il file mhattan_woody_allen,jpg presente nella cartella images:
Dimensione immagini Height e width
La dimensione è specificata in pixel
CSS CASCADING STYLE SHEET
Sono risorse aggiuntive che contengono delle regole dicono come deve essere visualizzata la pagina web
E’ un file separato dall’HTML ma collegato ad esso (con le stesse regole dei collegamenti per gli URL)
Introduzione:
Sono stati introdotti negli anni ’90 per Separazione presentazione e contenuto: CSS
+ HTML
- CSS1: 1996 CSS2: 1998 CSS3: Working Draft
- Specifica W3C : http://www.w3.org/Style/CSS/
- W3C consorzio che definisce gli standard
- Realizzano ciò che è difficile o impossibile con HTML
- I CSS non sono solo uno strumento grafico ma di modifica dello stile degli elementi strutturali delle pagine Web
Cosa si può fare con i CSS?
Impareremo a gestire i contenuti e gli elementi di una pagina web, in particolare quando parliamo di
dispositivi diversi è necessario utilizzare CSS diversi, per avere la fruizione migliore.
Caratteristica degli elementi della pagina visibilità, bordi, dimensioni, spaziatura
- Posizionamento degli elementi nella pagina alto, basso, destra, sinistra, posizionamento relativo e assoluto
- Testo dimensione, colore, font, allineamento, sistema di interlinea, decorazioni, spaziare lettere e parole
- Stili diversi per titoli, sottotitoli, paragrafi, liste
- Sfondo colore, immagini, immagini ripetute o centrate
- Bordi tabelle, pagina, immagini, blocchi di testo
I CSS permettono di creare e gestire lo stile delle pagine web, ma lo “stile” dobbiamo metterlo noi!
BOX MODEL
Una pagina HTML è un insieme di box rettangolari elemento blocco o in linea la loro gestione fa parte del
box model
Bisogna distinguere tra la larghezza dell’area del contenuto e la larghezza effettiva di un box.
Area del contenuto valore della proprietà width per il valore della proprietà height
Larghezza di un box margine sinistro + bordo sinistro + padding sinistro + larghezza del contenuto +
padding desto + bordo destro + margine destro
CSS INTERNI ED ESTERNI
- CSS esterno un foglio si dice esterno se è definito in un file separato (file.css) dalla pagina HTML
- CSS interno un foglio di stile si dice interno quando il suo codice è inserito direttamente nella pagina HTML
Il CSS va inserito nell’head. 4 modi:
titolo 1
a. Rel descrive il tipo di relazione tra il documento e il file collegato. È obbligatorio. Per i CSS due sono i valori possibili: stylesheet e alternate stylesheet -> fogli di stile alternativi.
b. Href serve a definire l'URL assoluto o relativo del foglio di stile. È obbligatorio.
ESEMPIO CODICE + VISUALIZZAZIONE
Gli attributi Class e ID
Tre tipi di selettore:
• Type selettore {proprietà:valore};
• ID #nome ID {proprietà:valore};
• Classe nome Classe {proprietà:valore};
Combinando i selettori possiamo puntare più accuratamente gli elementi a cui si desidera assegnare una
certa presentazione
Concetto di classe
Il concetto di classe può essere associato a quello di funzione o procedura
f(x) = (x+2)/
f(0) = 2/
f(1) = (1+2)/3 = 1
f(2) = (2+2)/3 = 1,
f(3) = 5/3 = 1,
CSS: Esempio d’uso
Combinare i selettori
Pseudo-classi e pseudo-elementi
Estendono le potenzialità espressive dei CSS
Con quanto visto finora, non è possibile gestire ad esempio:
- il cambiamento del colore di un’ancora al passaggio del mouse
- cambiare lo stile della prima lettera di un paragrafo
- cambiare lo stile della prima riga di un paragrafo
I casi più significativi riguardano la gestione di questi aspetti.
Pseudo-classe Anchor
Un browser in genere visualizza un collegamento ipertestuale impiegando colori
diversificati dal resto del testo:
- Blu per il collegamento da visitare
- Rosso per il collegamento visitato
Con la pseudo-classe anchor possiamo controllare questi aspetti!
Proprietà della Pseudo-classe anchor
Proprietà applicabili all’elemento
✴ a:link collegamento non visitato2 02 8
✴ a:hover mouse sopra il collegamento
✴ a:visited collegamento visitato2 02 8
✴ a:active collegamento selezionato
Pseudo-elementi: first-letter e first-line
Questi pseudo-elementi permettono di definire uno stile per la prima lettera o per la prima riga di
un paragrafo, in modo indipendente dagli altri stili.
Uso dei div per organizzare la pagina
Consideriamo 3 div annidati:
Un semplice sito d’esempio
Importare Bootsrap nelle vostre pagine HTML
IL SISTEMA A GRIGLIE
https://getbootstrap.com/docs/4.3/layout/grid/
La pagina viene divisa in righe (row) di dodici colonne (col)
Possiamo organizzare la pagina in modo pratico
Possiamo creare griglie innestate
Può essere usata per diversi scopi:
- layout generale della pagina;
- layout menu
- layout liste
12 COLONNE E TANTE RIGHE
col-8 perché la casella è larga 8 colonne
