Download HTML tabella appunti and more Summaries Information Technology in PDF only on Docsity!
HTML
acronimo di Hypertext Mark Up Language
linguaggio di formattazione e presentazione con scopo di costruire IPERTESTI
- Che cos'è un ipertesto? documento che prevede del testo e degli elementi multimediali, la cui caratteristica principale è che è fruibile in modo non sequenziale. -> fruizione in maniera non sequenziale. Che cosa vuol dire? elementi che appartengono a un determinato nodo che contiene informazione (testuale e multimediale) possono essere connessi mediante dei collegamenti = struttura a GRAFO che prevede vari collegamenti che sono chiamati ipercollegamenti (in inglese, hyperlinks o links)
cosa possiamo fare con HTML?
- definire la struttura logica del documento che stiamo creando
- gestire la presentazione grafica di un documento (sconsigliato)
- definire un'interfaccia utente web
- tag speciali specifici per definire interfacce web (tipicamente codice scritto in linguaggio javascript) permette di dare un comportamento dinamico al vostro documento
definizione di tag = elemento principale del linguaggio documento HTML = file di testo = con comandi speciali detti tag hanno diverse funzioni.
- definisco la struttura di un documento, i vari tipi di informazione che abbiamo
- indicare dove reperire altre informazioni multimediali/testuali come collegare 1 certo elemento, altri nodi dell'ipertesto
- in forma limitata, specificare l'aspetto grafico dell'informazione presente nel documento
- inserire all'interno di un di un documento elementi multimediali del tipo del tipo audio e video. Esistono dei tag speciali, uno si chiama appunto audio, l'altro che si chiama video, che permettono di inserire facilmente questi due elementi all'interno di un documento HTML
- Altri tag permettono di inserire codice Javascript
- per costruire moduli dei form per poter far interagire l'utente con la pagina
TAG SIGNIFICATO ESEMPIO
HTML HTML è il tag che ci permette di definire il contenitore principale, ciò che rappresenta l'intero documento HTML.
All'interno di questo contenitore ho due elementi fondamentali:
- la sezione relativa all'intestazione: che sarà definita dal tag Head
- la sezione relativa al corpo che è definita mediante il Tag Body
HEAD Definisce l’intestazione del documento HTML (titolo, metainformazioni) -> posto dopo il tag html
TITLE Permette di definire il titolo del documento HTML (ovvero ciò che si vedrà nel tab del browser che visualizza il documento) -> Incluso nella intestazione
BODY Delimita il corpo del documento html (ovvero l’insieme di elementi HTML che saranno inclusi ed eventualmente mostrati nella finestra del browser) ->È posto dopo l’elemento intestazione HEAD
ATTRIBUTI ● bgcolor : colore di sfondo per il corpo ● background : immagine di sfondo (se l’immagine è più piccola dell’area del corpo, tale area sarà tassellata usando l’immagine) ● text : imposta il colore del testo ● vlink, alink, link : impostano rispettivamente il colore dei link visitati, attivati e non visitati.
address permette di specificare un indirizzo
pre permette di specificare testi preformattati che mantengono la spaziatura e le interruzioni di linea presenti nel documento HTML
p permette di specificare paragrafi -> è dotato dell’attributo align che permette di controllare l’allineamento del testo nel paragrafo
div permette di specificare contenitori generici per altri elementi html (testo, immagini,…). Utile per definire layout di pagina -> è dotato dell’attributo align che permette di controllare l’allineamento del testo
span permette di delimitare un blocco di testo. Non ha nessun effetto grafico (ma utile in combinazione con il linguaggio CSS per applicare effetti grafici alle porzioni di testo)
hr permette di tracciare linee orizzontali di separazione fra sezioni del documento
è dotato di attributi =>
ELENCHI • li: definisce un elemento in un elenco
- ol: definisce un elenco ordinato (numerato)
- ul: definisce un elenco non ordinato (non numerato)
start ="x": il cui valore x (sempre un numero) indica da dove deve iniziare l’elenco
tag ol
ATTRIBUTI
type: definisce il tipo di enumerazione
- type="a" etichette lettere minuscole (a,b,c,...)
- type="A" etichette lettere maiuscole (A,B,C,..)
- type="i" etichette numeri romani minuscoli (i,ii,iii,…)
- type="I" etichette numeri romani maiuscoli (I,II,III,…)
- type="1" etichette numeri arabi (1,2,3,…) (DEFAULT)
tag ul
ATTRIBUTI
type: definisce il tipo di etichetta per identificare gli elementi dell’elenco
- type="disc" pallini pieni
- type="circle" cerchi
- type="square" quadrati pieni
- type="none" nessuna etichetta
Collegamenti
tag a
(anchor)
Possono essere interni o esterni al documento HTML
Gli ATTRIBUTI sono:
- href indica un riferimento (destinazione)
- title specifica un titolo (per i bookmark)
- name marca un riferimento in un documento
Valori per
href
chiamato URL (Uniform Resource Locator), rappresenta l’indirizzo della risorsa da collegare -> può essere
- Assoluto: href="https://www.sito.it/docs/p.html"
- Relativo: href="./docs/p.html" -> riferimento a una parte specifica di un documento opportunamente etichettata.
- Es: href="https://www.sito.it/docs/p.html#sez1"
- Es: href="./docs/p.html#sez1" -> possono essere associati anche a risorse non HTML (suoni, immagini, video, archivi)
- Es: href="https://www.sito.it/docs/doc.zip" -> può fare riferimento ad una directory
- cliccando il link, viene caricato nel browser un documento di default (tipicamente index.html, index.php,…)
Creare un collegamento che permette di inviare un email con il proprio programma di posta
Raggruppare righe
● thead : tag per raggruppare le righe che definiscono l’intestazione della tabella ● tbody : tag per raggruppare le righe che definiscono il corpo della tabella ● tfoot : tag per raggruppare le righe che definiscono footer della tabella
ATTRIBUTI
validi per table,tr,td -> dimensione/ colore sfondo
● width : specifica la larghezza della tabella, riga o cella (in pixel o %) ● height : specifica l’altezza della tabella, riga o cella (in pixel o %) ● bgcolor : specifica il colore di sfondo della tabella, riga o cella
ATTRIBUTI
valido per tr,td -> allineamento orizzontale/ verticale
● align : allineamento orizzontale del contenuto di un’intera riga o singola cella Valori possibili: left,right,center ● valign : allineamento verticale del contenuto di un’intera riga o singola cella Valori possibili: middle (DEFAULT), top, bottom
Altri ATTRIBUTI di table
● cellpadding = "valore" stabilisce lo spazio in pixel tra il contenuto di una cella e i suoi bordi es.: ● cellspacing = "valore" stabilisce lo spazio in pixel tra le celle es.:
Altri ATTRIBUTI di td
● colspan = "numero di colonne" controlla il numero di colonne su cui una cella si può estendere In questo modo è possibile creare celle che fondono assieme più colonne ● rowspan = "numero di righe" controlla il numero di righe su cui una cella si può estendere In questo modo è possibile creare celle che fondono assieme più righe
Nuovi tag semantici
specificano chiaramente a browser e web developer il loro significato Es. Tag non semantici: Es. Tag semantici:
HTML5 offre nuovi tag semantici per la strutturazione del documento HTML Es.:
Si evita di organizzare la struttura mediante blocchi (es. … )
Attenzione: i tag semantici visti indicano solo il significato di un dato blocco di codice HTML, ma non non implementano nessun layout predefinito. Es.: Un blocco elementi non collocherà automaticamente i suoi elementi su di un lato della finestra del browser. Per implementare un layout è necessario assegnare agli elementi semantici delle opportune regole css
video Usato per includere video in una pagina HTML ( Formati supportati MP4 e OGG )
- attributi width e height usati per dimensionare il video
- attributo controls usato per mostrare i controlli video (play, pause,…)
- tag source usato per caricare un video Ci possono essere più source, in questo caso il browser carica il primo formato video supportato
- testo è visualizzato se non è possibile riprodurre il video
audio Usato per includere file audio in una pagina HTML
( Formati supportati MP3 , WAV e OGG )
