Scarica Linguaggio html e più Appunti in PDF di Informatica solo su Docsity!
COS’E’ UNA PAGINA WEB
Una pagina Web appare come un unico documento multimediale. Nella finestra del browser prende forma una struttura unitaria e armonica, in cui si combinano testi, immagini, animazioni, etc. Alcuni di questi elementi sono attivi, cioè associati in modo ipertestuale ad altri documenti e siti Web. La visualizzazione di una pagina Web dipende da:
- un file principale in formato HTML (HyperText Markup Language = linguaggio per la marcatura di ipertesti), che rappresenta il nucleo della pagina: contiene il testo del documento e le istruzioni, o tag, per la sua visualizzazione;
- file multimediali, come immagini, animazioni, suoni, … esterni al file principale e che vengono richiamati da appositi tag;
- eventuali file di servizio.
TAG HTML
Un qualunque testo, non formattato, scritto con un text editor tipo “Blocco Note”, e salvato con estensione HTML, può essere visualizzato con un browser. Attraverso i tag, o marcatori, si danno istruzioni al browser su come visualizzarlo. Un tag è un comando racchiuso tra < e >, ad esempio è il tag per Bold, ovvero grassetto. Il browser interpreta questi simboli ed “esegue” il comando, invece di visualizzare il testo. La maggior parte dei tag funzionano in coppia: _ testo _ mentre altri sono singoli . I tag, oltre a istruzioni, possono contenere anche attributi , che ne definiscono alcune proprietà. Possono assumere valori differenti e pertanto si scrivono __ Le virgolette possono anche non essere obbligatorie, ma lo diventano quando il valore è espresso da più parole. I tag a coppie possono contenere altri tag.
NB: Se i tag a coppie contengono altri tag a coppie, devono essere chiusi con il metodo della “nidificazione”. Esempio: testo corretto testo non corretto
Nella scrittura dei tag è ininfluente l’uso delle maiuscole o delle minuscole, mentre nei valori degli attributi, ad esempio nei nomi dei file, si può incorrere in errori, quali “file non trovato”.
STRUTTURA DI UNA PAGINA
Una pagina HTML è suddivisa in due parti: testa o HEAD e corpo o BODY. La struttura di una pagina è pertanto la seguente:
__ indica al browser di visualizzazione che deve utilizzare un interprete HTML per decodificare ed eseguire le istruzioni __ testa della pagina __
corpo della pagina, in cui vengono inseriti immagini, testo, etc. __
__ fine del codice HTML e termine della pagina
HEAD
La testa della pagina contiene informazioni che non vengono visualizzate dal browser, ma che gli necessitano per una corretta elaborazione. I tag che compongono la testa sono:
_ testo _ breve testo che appare nella barra del titolo (title) del browser. E’ possibile inserire un solo titolo.
__ Le META informazioni rappresentano una serie di attributi e informazioni che vengono utilizzate dal browser e dai motori di ricerca per catalogare la pagina.
Il tag di tipo META che viene inserito necessariamente all’inizio della pagina è quello che identifica la versione del linguaggio utilizzato. Se la pagina Web viene creata attraverso uno strumento tipo Frontpage, questo tag viene inserito automaticamente nella testa della pagina e sarà del tipo:
Gli altri META sono opzionali, ma comunque utili per inserire la pagina nei motori di ricerca:
_
_
Aqua 00FFFF Black 000000 Blue 0000FF Fuchsia FF00FF Gray 808080 Green 008000 Lime 00FF Maroon 800000
Navy 000080 Olive 808000 Purple 800080 Red FF Silver C0C0C Teal 008080 White FFFFFF Yellow FFFF
L’attributo BGCOLOR è inutile se viene utilizzata una immagine come sfondo.
BACKGROUND=”immagine.gif” - specifica una immagine da utilizzare come sfondo. L’immagine viene replicata in tutta la pagina. E’ preferibile usare immagini di tipo GIF trasparente. Si può optare per un formato JPEG quando esistono problemi sui tempi di caricamento. Il nome del file può essere preceduto dal percorso.
TEXT =”#rrggbb” - permette di specificare il colore di default da assegnare al testo della pagina. Se omesso il colore di default è il nero. Per la codifica dei colori vedi l’attributo BGCOLOR.
LINK
ALINK =”#rrggbb” - permette di definire i colori dei collegamenti VLINK ipertestuali. LINK è l’attributo del collegmanto normale, ALINK è il collegamento su cui si è fatto click, in attesa che venga caricata la pagina collegata, VLINK è il collegamento già visitato.
Il tag singolo __ , posto subito dopo il tag specifica la dimensione di default dei caratteri in fase di visualizzazione. A questo valore farà riferimento l’attributo SIZE del tag (vedi TESTO).
IL TESTO
Per visualizzare un testo è sufficiente digitarlo all’interno del corpo. Il testo può essere suddiviso in paragrafi ed il browser visualizza i paragrafi separati da una riga vuota.
testo
Il testo all’interno del paragrafo può essere allineato al centro, a destra a sinistra oppure giustificato. Se omesso l’attributo di allineamento, assume a sinistra:
“LEFT”
ALIGN = “CENTER”
“RIGHT”
“JUSTIFY”
Poiché il testo viene visualizzato tutto “intero”, benchè lo si sia scritto su più righe, è possibile indicare al browser di andare a capo in un punto ben preciso del testo inserendo il tag singolo
E’ possibile assegnare al testo la formattazione carattere grassetto, corsivo e sottolineato, racchiudendo il testo tra i tag doppi: testo testo testo testo testo
grassetto corsivo sottolineato enfatizzato equivalente al grassetto
Si può specificare inoltre un carattere da utilizzare per la visualizzazione delle pagine, diverso da quello utilizzato per default dal browser (solitamente il Times New Roman). Se il carattere non è presente tra i font del computer utente, viene utilizzato dal browser quello di default: _ testo _
carattere rappresenta il nome del font utilizzato. n rappresenta la dimensione del carattere ed è un valore compreso tra 1 e 7, oppure da un incremento/decremento (+1, -2) rispetto al valore predefinito (4), se non diversamente specificato dal tag BASEFONT (vedi BODY). COLOR rappresenta il colore da assegnare al carattere. Il valore predefinito è il nero (vedi BODY).
Alcuni browser però non supportano la possibilità di scegliere tra vari font e pertanto si può optare tra due soli tipi di carattere:
- uno simile alla macchina da scrivere, tipo Courier, a spaziatura fissa
- uno simile al Times New Roman, a spaziatura variabile. Mentre il secondo è il predefinito da tutti i browser, per scegliere il primo si deve ricorrere ad uno dei seguenti tag doppi, tutti equivalenti tra di loro:
_ testo testo testo _
Carattere ASCII Codice ‘ 39 " & 38 & < 60 < > 62 > [spazio]
£ 156 £ | 124 ¦ © 184 © ® 169 ® ° 167 ° ± 241 ± ¼ 172 &frac ½ 171 &frac ¾ 243 &frac À 183 À Á 181 Á Â 182 Â Ã 199 Ã Ä 142 Ä Å 143 Å Æ 146 Æ Ç 128 Ç È 212 È É 144 É Ê 210 Ê Ë 211 Ë Ì 222 Ì Í 214 Í Î 215 Î Ï 216 Ï Ñ 165 Ñ Ò 227 Ò Ó 224 Ó Ô 226 Ô Õ 229 Õ Ö 153 Ö Ø 157 Ø
Ù 235 Ù Ú 233 Ú Û 234 Û Ü 154 Ü Ý 237 Ý à 133 à á 160 á â 131 â ã 198 ã ä 132 ä å 134 å æ 145 æ ç 135 ç è 138 è é 130 é ê 136 ê ë 137 ë ì 141 ì í 161 í î 140 î ï 139 ï ñ 164 ñ ò 149 ò ó 162 ó ô 147 ô õ 228 õ ö 148 ö ÷ 246 ÷ ø 155 ø ù 151 ù ú 163 ú û 150 û ü 129 ü ý 236 ý þ 231 þ ÿ 152 ÿ
Durante la scrittura del testo, questo può essere organizzato in capitoli e sottocapitoli contraddistinti da titoli. E’ possibile utilizzare fino a 6 livelli di titoli. L’unica differenza tra un livello e l’altro è la dimensione del carattere. Il titolo deve essere racchiuso all’interno del tag doppio
_ testo _
n rappresenta il livello del titolo allineamento può assumere i seguenti valori: CENTER, RIGHT e LEFT; se omesso assume per default LEFT. Il testo può essere formattato in grassetto, corsivo e sottolineato, cambiare carattere e colore, utilizzando i relativi tag.
N.B.: I tag di formattazione del testo vanno chiusi prima di quello dell’intestazione e quelli dell’intestazione non si possono estendere automaticamente al testo.
LISTE, ELENCHI PUNTATI E NUMERATI
Esistono tre tipi di elenchi:
- elenchi puntati o non ordinati
- elenchi numerati o ordinati
- elenchi di definizioni I primi 2 sono molto simili agli elenchi di Word, mentre il terzo è proprio dell’HTML.
Elenco puntato L’elenco deve essere compreso nel tag doppio
_ … _
ed ogni elemento dell’elenco deve essere compreso nel tag doppio
…
simbolo rappresenta il tipo di punto elenco e può assumere i seguenti valori: disc circle square
Elenco numerato L’elenco deve essere compreso tra i tag
_ … _
Ogni elemento dell’elenco deve essere inserito all’interno del tag doppio . “numerazione” rappresenta il codice del tipo di numerazione dell’elenco: 1 numeri arabi (default) I numeri romani maiuscoli i numeri romani minuscoli A lettere maiuscole a lettere minuscole
__
SRC rappresenta il percorso ed il nome dell’immagine da inserire. I tipi immagine migliori per il Web sono Jpeg e GIF. Sono entrambi tipi compressi, ma il tipo GIF permette l’effetto trasparenza e le animazioni.
Gli attributi che si possono assegnare ad una immagine sono i seguenti:
WIDTH = ”valore o %” (larghezza) valore rappresenta il numero di pixel mentre HEIGHT = ”valore o %” (altezza) % è il rapporto con l’originale
ALT = ”testo” rappresenta una breve descrizione (una o due parole) dell’immagine che viene visualizzato durante il caricamento oppure associato all’icona “immagine non disponibile”. Il testo appare anche quando il mouse si ferma su di essa. L’attributo viene utilizzato dai browser per non vedenti al posto dell’immagine.
BORDER = ”n” è lo spessore del bordo espresso in pixel. Se omesso equivale a 0.
HSPACE = ”n” rappresentano lo spazio lasciato vuoto intorno all’immagine VSPACE = ”n” ed è espresso in pixel.
“BOTTOM” il testo è allineato al bordo inferiore “TOP” il testo è allineato al bordo superiore ALIGN = “MIDDLE” il testo è allineato al centro dell’immagine “LEFT” l’immagine è a sinistra del testo “RIGHT” l’immagine è a destra del testo
COLLEGAMENTI IPERTESTUALI
I collegamenti ipertestuali permettono di effettuare salti a pagine diverse del sito, di inviare posta, visualizzare immagini e filmati, riprodurre suoni, scorrere il testo in maniera veloce attraverso indici. Il tag (doppio) che permette i collegamenti ipertestuali è il seguente
_ oggetto _
destinazione rappresenta l’indirizzo di un’altra pagina o di un altro sito, un’immagine, un filmato, un file MP3, un file ZIP, … Se destinazione è un file ZIP il browser utente attiverà in maniera automatica la procedura di download. finestra rappresenta l’indicazione al browser dove deve essere aperto il collegamento: _WINDOW indica una nuova finestra del browser,
“nomeframe” indica il nome del frame in cui si deve visualizzare la pagina (vedi FRAME) oggetto è il testo o l’immagine che diventa un collegamento.
Se “destinazione” è il nome di un sito esterno al nostro, l’indirizzo della pagina deve essere indicato per intero compreso l’HTTP: … Se “destinazione” rappresenta il collegamento ad un’altra pagina del sito e questa è presente nella stessa cartella della pagina corrente è sufficiente specificare solo il nome della pagina: … Se la pagina è contenuta in una sottocartella rispetto alla pagina corrente si indica il seguente percorso: … mentre se la pagina è contenuta in una cartella di livello pari a quella corrente, ma diversa …
Per inserire il collegamento ad un indirizzo di posta elettronica, attivando automaticamente il programma di posta predefinito del computer utente, si utilizza il seguente formato:
_ indirizzo o testo _
Si può inserire anche il riferimento ad un gruppo di discussione _ gruppo di discussione _
E’ possibile inserire anche collegamenti interni alla pagina corrente. In questo caso occorre definire all’interno della pagina delle “etichette” a cui il tag di collegamento farà riferimento. Le etichette si definiscono con il tag doppio
_ testo _ oppure __
Nel primo caso il testo specificato assume il nome di “etichetta” ed è visibile nella pagina, mentre nel secondo caso l’etichetta non si vede.
Il tag HREF si riferirà quindi all’etichetta preceduto da #
_ … _
E’ possibile anche fare riferimento ad etichette contenute in altre pagine
_ … _
“n2” indica il ritardo (in millisecondi) con cui far ripartire il filmato tra una volta e l’altra. Se LOOP=”1” allora LOOPDELAY=”0”.
LE TABELLE
Le tabelle in ambiente Web hanno un duplice utilizzo:
- Tabelle di dati veri e propri
- Disposizione o Layout della pagina Per entrambi gli utilizzi i tag che definiscono le tabelle sono i medesimi, cambiano soltanto gli attributi. Inoltre è possibile inserire tabelle all’interno della cella di una tabella, creando così strutture complesse.
Nella definizione delle tabelle si procede con definire le righe ed all’interno delle righe le singole celle, che rappresentano così le colonne. E’ possibile definire tabelle “regolari”, in cui il numero delle colonne sono uguali in tutte le righe, e tabelle “irregolari”, in cui il numero delle colonne varia da riga a riga (non sono consigliabili perché esteticamente disomogenee e brutte). I tag (tutti doppi) che definiscono le tabelle sono i seguenti:
_
contenuto della cella _ …… __ …… __
Nel caso di tabelle “regolari” è possibile inserire l’intestazione di colonna subito dopo il tag TABLE e comunque occupa una riga della tabella:
_ intestazione_colonna1 …… _
Si inseriranno tanti tag TH quante sono le colonne. L’intestazione_colonna appare in grassetto ed è possibile impostare gli stessi attributi che si possono utilizzare per le celle (vedi).
Gli attributi del tag TABLE
WIDTH = ”n” larghezza della tabella espressa in pixel o in % rispetto alla pagine Web. Se omesso assume 100%
“CENTER”
ALIGN = ”LEFT” posizione della tabella rispetto alla pagina Web. Se omesso “RIGHT” è uguale a LEFT
BORDER = ”n” indica lo spessore del bordo. Se omesso assume zero ed indica bordo trasparente
BGCOLOR = ”#rrggbb” indica il colore dello sfonod (vedi BODY). Se omesso assume trasparente
BACKGROUND = ”immagine” indica un’immagina come sfondo della tabella (vedi BODY)
BORDERCOLOR = ”#rrggbb” indica il colore del bordo della tabella. E’ supportato dai browser più recenti
CELLSPACING = ”n” indica lo spessore della griglia interna se BORDER>0. Se omesso il valore predefinito è 2.
CELLPADDING = ”n” indica in pixel lo spazio vuoto da lasciare tra il bordo ed il contenuto della cella. Il valore predefinito è 1.
E’ possibile inserire un’intestazione alla tabella attraverso il tag doppio
_ titolo_tabella _
da posizionare subito dopo il tag TABLE. Il titolo viene visualizzato sopra la tabella posizionato al centro.
Gli attributi del tag TD (Table Data)
WIDTH = ”n” indica la larghezza della cella. Si esprime in pixel o in % rispetto alla dimensione della tabella. Le colonne devono avere tutte la stessa larghezza, altrimenti il browser si basa su quella maggiore HEIGHT = ”n” indica l’altezza della cella. Si esprime in pixel o in % rispetto alle dimensioni della tabella. Tutte le celle della riga devono avere la stessa altezza, altrimenti il browser si basa su quella maggiore
N.B.: Se si indicano WIDTH e HEIGHT verificare che il contenuto ci stia nella cella, altrimenti si generano errori di visualizzazione.
“LEFT” ALIGN = “CENTER” indica l’allineamento orizzontale del contenuto della cella, “RIGHT” all’interno della cella. Se omesso assume LEFT
“MIDDLE”
VALIGN = “TOP” indica l’allineamento verticale del contenuto della “BOTTOM” cella, all’interno della cella. Se omesso è MIDDLE. “BASELINE” BASELINE indica la prima riga di testo delle celle adiacenti
NOWRAP indica che il testo si deve trovare su un’unica riga, ovvero non deve andare automaticamente a capo
…
…
…
…
Alle celle così unite o “estese” si applicano gli stessi attributi delle celle normali (vedi attributi TD).
I FRAME
I frame o cornici rappresentano l’alternativa alla tabella nella costruzione del layout della pagina Web. In realtà ogni frame suddivide lo spazio della finestra del browser in zone indipendenti l’una dall’altra denne quali vengono caricati in ognuna una pagina Web diversa.
Esempio:
La pagina è suddivisa in 4 frame in cui vengono caricate 4 pagine html diverse. Non tutti i browser riconoscono i frame e quindi bisogna comunque prevedere pagine Web che non li utilizzano, come alternativa per l’utente finale.
Per utilizzare i frame si devono creare quindi una serie di pagine Html:
- la pagina “contenitore”, che contiene la struttura della pagina finale
- le singole pagine con il contenuto
La pagina “contenitore” viene definita con tag diversi da quelli utilizzati per le pagine normali. Mantiene la struttura HEAD, ma al posto del BODY presenta i seguenti tag:
_ ._
. struttura
FRAME 1: intestazione.html
FRAME 2: barra_di_navigazione. html FRAME 3: corpo_della_pagina.html
FRAME 4: informazioni.html
Nel caso si voglia prevedere l’eventualità di browser che non gestiscono i frame, si inserirà al termine della definizione FRAMESET il seguente tag
_ commento o link a pagina senza frame _
La pagina così ottenuta verrà salvata con il nome di “DEFAULT.HTML”. Gli attributi del tag FRAMESET sono i seguenti:
FRAMEBORDER = ”0” indica se i bordi dei form sono visibili “1” oppure “1” no “0” (“yes” – “no” sono alternativi a “1” e “0”)
BORDER = ”n” indica in “n” pixel lo spessore dei bordi se visibili.
BORDERCOLOR = ”#rrggbb” indica il colore con cui si visualizzano i bordi dei frame (vedi BODY)
FRAMESPACING = ”n” indica lo spazio vuoto tra un frame e l’altro
Per la struttura si procede nella definizione come per le tabelle:
- prima si definiscono le righe
- all’interno delle righe si definiscono le colonne. Se la struttura prevede solo frame verticali di tipo colonne si definiscono direttamente le colonne. Le definizioni di righe e colonne avviene attraverso l’attributo, da assegnare al tag FRAMESET, ROWS = ” … “ e COLS = ” … “. I due attributi non possono contemporaneamente assegnati allo stesso tag FRAMESET. Per ogni riga/colonna si indica lo spazio in pixel o in % che dovrà occupare nella pagina. Esempio: ROWS = “25%,50%,25%” COLS=”100,*” Il carattere * indica ciò che rimane dello spazio disponibile. Per ogni frame così definito si procede quindi ad indicarne il contenuto attraverso il tag singolo: __
Se il frame è ulteriormente suddiviso, al posto del tag FRAME si inserirà un tag FRAMESET per l’ulteriore suddivisione.
La definizione dell’esempio:
attributo rappresenta il nome dell’attributo di cui si vuole impostare il “valore”
Per ogni tag è possibile assegnare più attributi nella stessa dichiarazione, equivale a specificare tanti attributi per il tag
H1 { COLOR:”#0000FF”; FONT:”14pt arial” } equivale a H1 {COLOR:”#0000FF”} H1 {FONT:”14pt arial”}
E’ possibile associare gli stessi attributi a più tag purché separati da “,” esempio: H1, P {FONT:” … “; COLOR:” … “ } E’ possibile inoltre condizionare l’attributo di un tag se questo è contenuto all’interno di un altro tag: esempio: P B {COLOR:” … “ } viene assegnato il colore al testo in grassetto contenuto all’interno di un paragrafo
Gli attributi più freqeunti sono i seguenti: BACKGROUND: immagine oppure colore COLOR: colore FONT-FAMILY: caratter (Es.: arial, times new roman, …) nPT (dimensione carattere in picth) nIN (dimensione carattere in inch – pollici) FONT-SIZE: nCM (dimensione carattere in centimetri ) nPX (dimensione carattere in pixel) n% FONT-STYLE: BOLD (definisce il carattere in grassetto) NONE FONT-DECORATION: UNDERLINE (definisce gli effetti sul ITALIC carattere) LINE-THROUGH
MARGIN-LEFT nPT : nCM (definisce i margini sinistro e destro) MARGIN-RIGHT nIN nPX
MARGIN-TOP nPT : nCM (definisce i margini superiore e inferiore) MARGIN-BOTTOM nIN nPX
nPT TEXT-INDENT : nCM (definisce il rientro sinistro del paragrafo) nIN nPX
CENTER
TEXT-ALIGN : RIGHT (definisce l’allineamento del testo) LEFT JUSTIFY
Eventuali attributi stilistici che venissero inseriti all’interno del corpo BODY della pagina, sovrascrivono, per quel solo oggetto, gli attributi si stile precedentemente definiti.
FOGLI DI STILE
I fogli di stile sono documenti HTML, privi di contenuto, che impostano le caratteristiche stilistiche del documento HTML a cui vengono associati. Permettono di definire un “modello” che rimane lo stesso per tutte le pagine Web che compongono un sito. Velocizzano la scrittura della pagina perché non è più necessario definire ogni volta le caratteristiche da associare ai vari elementi delle pagina, come il font o il colore, i bordi delle immagini e delle tabelle, etc, … I fogli di stile hanno come estensione CSS (Cascading Style Sheet) e vengono associati alla pagina Web attraverso un collegamento ipertestuale inserito all’interno dell’HEAD
__
La sintassi per i fogli di stile è la seguente:
_
tag indica a quale tag HTML si devono applicare le caratteristiche attributo indica quale attributo deve essere impostato valore indica il valore di impostazione dell’attributo
E’ possibile impostare con la stessa istruzione più attributi per quel tag oppure in alternativa si possono inserire più righe di attributi per lo stesso tag (vedi STILE). E’ possibile assegnare uno stesso attributo a più tag, separati da “,” (vedi STILE).
