Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
Scarica il documento per vederlo tutto.
vuoi
o PayPal
tutte le volte che vuoi
DOM
Il DOM, acronimo di Document Object Model (Modello a Oggetti del Documento), è una
rappresentazione gerarchica e strutturata di un documento HTML o XML che consente agli script,
tipicamente scritti in linguaggi come JavaScript, di accedere, modi care e aggiornare
dinamicamente il contenuto, la struttura e lo stile di un documento web.
Il DOM rappresenta il documento come un albero gerarchico di nodi, in cui ogni elemento,
attributo e testo nel documento è rappresentato da un nodo all'interno dell'albero. Questo albero
consente di organizzare e navigare attraverso il contenuto del documento in modo e ciente,
infatti gli script possono accedere ai nodi del DOM utilizzando metodi e proprietà forniti dall'API
del DOM.
fi fi ffi fi fi fi ffi PAGINA 17
HYPERTEXT MARKUP LANGUAGE
SINTASSI DI HTML
La struttura di HTML si basa sull'utilizzo di elementi, che sono i mattoni fondamentali con cui si
costruisce una pagina web. Ogni elemento HTML è costituito da una o più "tag" e dal contenuto
che esse racchiudono.
La struttura di base di un elemento HTML è la seguente:
• Tag di apertura: Questo è il punto di inizio dell'elemento e speci ca il tipo di elemento. Ad
esempio, se vogliamo creare un paragrafo, useremo <p> per aprire il tag del paragrafo.
• Contenuto: È il testo, le immagini, o altri elementi che vengono racchiusi all'interno
dell'elemento. Ad esempio, nel caso del tag del paragrafo <p>, il contenuto sarebbe il testo del
paragrafo.
• Tag di chiusura: Questo indica la ne dell'elemento e segue il contenuto. I tag di chiusura
hanno una barra obliqua "/" prima del nome del tag, che li distingue dai tag di apertura. Ad
esempio, il tag di chiusura per un paragrafo sarebbe </p>.
È possibile annidare elementi in HTML includendo tag nei tag e credo quindi relazioni gerarchie
padre- glio.
Gli elementi in HTML posso essere di due tipi:
- inblock:
elementi occupano l'intera larghezza disponibile all'interno del loro contenitore
genitore e iniziano su una nuova riga nella pagina web. Esempi comuni di elementi inblock
includono paragra (<p>), intestazioni (<h1>-<h6>), div (<div>), elenchi (<ul>, <ol>) e molti altri.
- inline:
elementi gli elementi inline occupano solo lo spazio necessario all'interno del usso del
testo, senza forzare un'interruzione di riga. Esempi comuni di elementi inline includono link
(<a>), testo formattato (<strong>, <em>, <span>), immagini (<img>), e molti altri. fontstyle
Gli elementi inline a sua volta si dividono in elementi fontstyle e elementi phrase: i tag
phrase
forniscono informazioni speci che di rendering (meglio usare CSS), i tag aggiungono
signi cato a delle parti di un paragrafo.
elementi vuoti
Esistono degli che non hanno contenuto all'interno e non richiedono un tag di
chiusura separato. Questi elementi sono solitamente utilizzati per inserire elementi come
immagini, linee orizzontali o spazi vuoti all'interno di una pagina web.
<br> <hr>
In HTML è possibile andare a capo utilizzando il tag o che in aggiunta crea una
linea.
fi fi fi fi fi fi fl PAGINA 18
attributi,
In alcuni elementi di HTML è possibile speci care degli ovvero delle informazioni
aggiuntive che ne speci cano il valore. La sintassi è la seguente:
<tag attributo=“valore”>
La struttura di un le HTML prevede:
• <html> </html>.
Che tutte le componenti HTML all’interno del le devono essere incluse nel tag
• Che la “testa” del documento che contiene informazioni le sue informazioni da non mostrate a
<head></head>.
schermo siano contenute nel tag
• <body></body>.
Che tutte le informazioni da far vedere nel documento siano contenute nel tag
HEAD
L’head di un documento HTML contiene tutte le informazioni aggiuntive per la pagina che non
devono comparire a schermo oltre ad eventuali metadati.
title
L’elemento de nisce il titolo della pagina riportato nella scheda del browser, mentre per
icona
impostare un personalizzata si usa :
In ne nell’header è possibile aggiungere style di CSS e Javascript.
INTESTAZIONE, PARAGRAFI E FORMATTAZIONE
intestazioni
Le sono utilizzate per de nire la struttura gerarchica del testo. In HTML, ci sono sei
livelli di intestazioni, dall'1 (il più importante) al 6 (il meno importante). Si utilizzano gli elementi
<h1> <h2> <h6>.
per l'intestazione di livello 1, per il livello 2, e così via no a
<p>
paragra
I invece sono de niti dall'elemento e sono utilizzati per suddividere il testo in
blocchi di contenuto coerenti e leggibili.
fi f fi fi fi fi fi fi fi fi PAGINA 19
LE LISTE
Le liste sono utilizzate per presentare un insieme di elementi in modo strutturato e organizzato. Ci
sono tre tipi principali di liste supportate in HTML:
• liste non ordinate: presentano gli elementi in un elenco in cui l'ordine degli elementi non è
<ul> </ul>
rilevante solitamente visualizzati con punti o altri simboli di elenchi. Il tag indica la
<li> </li>
lista, mentre il tag indica gli item della lista.
• liste ordinate: presentano gli elementi in un elenco in cui l'ordine degli elementi è importante,
<ol></ol> <li> </li>
gli elementi vengono numerati. Il tag indica la lista, mentre il tag
indica gli item della lista.
• liste di de nizione: presentare una serie di termini e le loro de nizioni associate. Ogni termine
<dt>
è de nito da un elemento (termine) e la sua de nizione è speci cata all'interno di un
<dd>
elemento (de nizione).
fi fi fi fi fi fi PAGINA 20
DIV E SPAN
<div> <span>
I tag e sono entrambi elementi fondamentali utilizzati per la strutturazione e la
formattazione del contenuto, ma hanno scopi leggermente diversi.
<div>
Il tag un elemento a blocco che viene utilizzato per creare un contenitore generico che
può contenere altri elementi HTML, infatti, viene comunemente utilizzato per raggruppare e
organizzare insiemi di elementi correlati all'interno di una pagina web.
È spesso utilizzato in combinazione con fogli di stile CSS per de nire la formattazione e il layout di
gruppi di elementi.
<span>
Il tag un elemento inline viene utilizzato per selezionare o manipolare parti speci che
di un testo o contenuto all'interno di un blocco di testo. Può essere utilizzato per applicare stili
CSS, attributi o comportamenti JavaScript a parti speci che del testo o del contenuto.
LINK IPERTESTUALI
I link ipertestuali in HTML possono fare riferimento a due tipi di risorse, e di conseguenza sono:
- URL: se fanno riferimento ad una risorsa presente nel web (sito, immagine…).
- PATH: se fanno riferimento ad una risorsa presente nel nostro computer (cartella, le,
immagine…). <a> href
All’interno di HTML, i link sono de niti attraverso un tag ed un attributo che contiene la
risorsa e il testo ipertestuale. È buona pratica allegare anche un titolo al link che viene mostrato
quando ci si passa sopra con il mouse:
fi fi fi fi fi PAGINA 21
È possibile assegnare anche un link ad un immagine in modo simile:
È possibile inserire dei link interni alla pagina HTML per poter facilitarne la navigazione:
Posso fare lo stesso anche da pagine diverse e creare un vero e proprio menù interattivo.
LE IMMAGINI
Abbiamo visto che è possibile inserire delle immagini nelle pagine HTML attraverso i link, esistono
altri attributi (non tag!) che è possibile speci care:
- alt: testo alternativo in caso di mancata visualizzazione dell’immagine
- name: un nome usabile per riferirsi all’immagine
- width: forza una larghezza dell'immagine.
- heigth: forza una altezza dell'immagine.
- align, border, vspace, hspace: deprecati, speci cano il rendering
- gure, gcaptions: permette di dare una didascalia all’immagine.
LA STRUTTURA DI UN SITO
La struttura base di un sito è composta da:
• Header: (da non confondere con l’head!) è la parte superiore di una pagina web e di solito
contiene elementi come il logo del sito, il nome del sito e altre informazioni rilevanti.
• Navigation Bar: La barra di navigazione, o navbar, è un insieme di link o pulsanti che
consentono agli utenti di navigare tra le diverse sezioni o pagine del sito.
• Main Content: Il contenuto principale, o main content, è l'area principale della pagina web
dove viene visualizzato il contenuto principale o la informazioni più rilevanti. Questa sezione
può includere testo, immagini, video, form, tabelle e altri elementi che costituiscono il cuore
della pagina.
• Sidebar: La sidebar è una colonna laterale situata a sinistra o a destra del contenuto principale
che viene utilizzata per presentare contenuti aggiuntivi, collegamenti correlati, annunci
pubblicitari, menu di navigazione secondari o qualsiasi altra informazione complementare.
• Footer: Il footer è la parte inferiore di una pagina web e solitamente contiene informazioni di
contatto, link alle pagine legali (come l'informativa sulla privacy e i termini di servizio), crediti e
altre informazioni di riferimento.
• Article (non molto usato): L’elemento article è utilizzato per rappresentare un contenuto
autonomo, come un articolo di blog, una notizia, un post di forum o qualsiasi altro tipo di
contenuto indipendente.
fi fi fi fi PAGINA 22
• Section (non molto usato): L'elemento section è utilizzato per raggruppare insieme contenuti
correlati all'interno di una pagina web. Può essere utilizzato per dividere il contenuto in sezioni
distinti, come una sezione per i prodotti, una sezione per le recensioni dei clienti, una sezione
per i servizi o erti, ecc.
non contribuiscono visivamente
Questi tag nella struttura della pagina, pertanto NON È
semantica
OBBLIGATORIO inserirli all’interno del le, ma è buona pratica per la del codice.
ff fi PAGINA 23
LE TABELLE
Le tabelle in HTML vengono speci cate riga per riga, e di ogni riga si possono precisare gli
elementi che sono o intestazioni o celle normali.
Per creare una tabella utilizziamo principalmente tre elementi:
• <table> è il contenitore principale che de nisce la tabella.
• <tr> de nisce una riga della tabella.
• <td> de nisce una cella aggiuntiva nella riga selezionata della tabella.
• <th> de nisce un’intestazione della colonna o della riga.
Nota: è stato aggiunto uno stile con CSS
È possibile espandere il con
Accedi a tutti gli appunti
Tutor AI: studia meglio e in meno tempo
