Elemento HTML: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
Aggiornamento della voce con tabella originale basata su una guida riconosciuta |
m →Vari: + punto fermo in didascalia, +parm lingua |
||
| (29 versioni intermedie di 16 utenti non mostrate) | |||
Riga 1:
{{
[[File:HTML element content categories.svg|miniatura|Categorie in cui sono divisi gli elementi HTML]]
Un '''elemento HTML''', in [[informatica]], spesso chiamato anche '''tag HTML''', indica una struttura in un documento [[HTML]] e un metodo per ordinare gerarchicamente i contenuti. Più specificamente è un elemento [[SGML]] che soddisfa i requisiti di uno o più [[Document Type Definition|DTD]] HTML.<ref name=":1">{{Cita web|url=https://www.ocean-team.com/upload/immagini/certificazioni/e77dd6f7bc9604ae793a68a9ce4d0f64.pdf|titolo=pdf|accesso=23 novembre 2021|dataarchivio=20 gennaio 2021|urlarchivio=https://web.archive.org/web/20210120044935/http://www.ocean-team.com/upload/immagini/certificazioni/e77dd6f7bc9604ae793a68a9ce4d0f64.pdf|urlmorto=sì}}</ref>
== Descrizione ==
Riga 18 ⟶ 19:
=== Annidamento ===
Molti elementi HTML possono essere "[[Annidamento (informatica)|nidificati]]". La nidificazione è più facilmente comprensibile attraverso esempi<ref>{{Cita web|url=https://www.andreaminini.com/html/annidamento-tag-html|titolo=L'annidamento dei tag in Html|accesso=2021-11-23}}</ref>:
:<code><nowiki><p>You<em>rock</em></p></nowiki></code>
Riga 43 ⟶ 44:
== Elementi block-level ed elementi inline ==
[[File:Boxmodel-html.png|alt=Boxmodel|miniatura|Il ''box-model'' è una scatola che avvolge ogni elemento HTML<ref>{{Cita web|url=https://www.w3schools.com/css/css_boxmodel.asp|titolo=CSS Box Model|accesso=31 gennaio 2021}}</ref>.]]
Un '''elemento ''block-level''''' inizia di solito su una nuova riga mentre un '''elemento ''inline''''' di solito no. Un elemento ''block-level'' può contenere altri elementi sia di tipo ''block-level'' sia di tipo ''inline'' mentre un elemento ''inline'' può contenere solo altri elementi di tipo ''inline''. Esempi di elementi block-level sono paragrafi, elenchi, tabelle, intestazioni e il contenitore generale <code><nowiki><div></nowiki></code>. Gli elementi di blocco sono elementi con un contenitore rettangolare composto del contenuto, padding, border e padding esterno (margin). Si possono specificare le sue dimensioni con i [[CSS]]. Gli elementi in linea (ad esempio STRONG, ITALIC e UNDERLINE) non creano blocchi, vengono visualizzati sulla stessa linea con i contenuti del tag adiacenti. La larghezza e l'altezza dell'elemento "in linea" dipende solo dal suo contenuto, non si possono specificare le sue dimensioni con i CSS<ref>{{Cita web|url=https://www.w3schools.com/html/html_blocks.asp|titolo=HTML Block and Inline Elements|lingua=en|accesso=2021-11-23}}</ref>.
== Elementi d'intestazione in HTML 4.01 ==
{{Vedi anche|Meta tag}}
;<code><title>...</title></code>
:Indica il titolo della pagina. Questo elemento è richiesto in ogni documento HTML e XHTML. Differenti [[user agent]] e [[Sistema operativo|sistemi operativi]] visualizzano il titolo in maniera differente. I browser web di solito lo visualizzano nella [[barra del titolo]] quando la finestra è aperta e nella [[barra delle applicazioni]] quando è minimizzato. Può essere il nome predefinito quando si salva la pagina o altro. Al contrario degli altri tag, l'elemento ''title'' non permette di contenere altri tag. I browser visualizzeranno i tag inclusi come sono. Per esempio <code><title>My <b>first</b
;<code><meta>...</meta></code>
Riga 67 ⟶ 70:
::;<code>/*<![CDATA[*/ @import "''url'' "; @import "''url'' "; /*]]>*/</code>
== Elementi body definiti in HTML
Tutti i tag body non sono elementi block-level e non possono essere contenuti all'interno di un elemento inline<ref name=":1" /><ref>{{Cita web|url=http://www-db.deis.unibo.it/courses/TW/DOCS/w3schools/html/html5_semantic_elements.asp.html|titolo=HTML5 Semantic Elements|sito=www-db.deis.unibo.it|accesso=2021-11-23}}</ref>.
=== Intestazioni ===
Riga 103 ⟶ 106:
;<code><cite>...</cite></code>
:Citazione. Riferimento ad una citazione di una fonte od elemento all'interno del testo. ''CITE'' è stato accettato all'interno dell{{'}}''HTML 2.0''<ref>[https://tools.ietf.org/html/rfc1866 RFC 1866 - Hypertext Markup Language - 2.0<!-- Titolo generato automaticamente -->]</ref>.
;<code><dfn>...</dfn></code>
;<code><samp>...</samp></code>
Riga 295 ⟶ 298:
=== Moduli ===
L'HTML può solo definire il formato del [[form|modulo]], gli input degli utenti vengono processati da un [[linguaggio di scripting]] [[lato client]] oppure [[lato server]]<ref>{{Cita web|url=https://www.w3schools.com/html/html_forms.asp|titolo=HTML Forms|lingua=en|accesso=2021-11-23}}</ref>.
;<code><form>...</form></code>
Riga 340 ⟶ 343:
=== Formattazione ===
{{Vedi anche|CSS}}
;<code><b>...</b></code> (deprecato)
:Utilizza il '''grassetto'''. CSS equivalente: <code>{font-weight: bold}</code>
Riga 348 ⟶ 351:
:Crea testo <span style="font-size: 120%;">più grande</span>. CSS equivalente: <code>{font-size: larger}</code>.
;<code><small>...</small></code>
:Crea testo <small>più piccolo</small>. CSS equivalente: <code>{font-size: smaller}</code>
;<code><s>...</s></code> e <code> <strike>...</strike></code> (deprecati)
:Cancella il testo: <s>Cancellato</s>. CSS equivalente: <code>{text-decoration: line-through}</code>
;<code><tt>...</tt></code>
:Usa un carattere simile a quelli da <
;<code><u>...</u></code> (deprecato)
:Usa un carattere <span style="text-decoration: underline">sottolineato</span>. CSS equivalente: <code>{text-decoration: underline}</code>
;<code><font [color=''color'',] [size=''size'',] [face=''face'']>...</font></code> (deprecato)
:
Esempi:
# <code><font color="green">text</font></code> crea <span style="color:green">testo verde</span>.
Riga 367 ⟶ 370:
:* <code><font color="red"></code> corrisponde a <code>{color: red}</code>
:* <code><font face="Courier"></code> corrisponde a <code>{font-family: Courier}</code>
=== Colori ===
{{vedi anche|Colori Web}}
'''I colori Web''' sono [[Colore|colori]] usati nella [[Web design|visualizzazione di pagine Web]] sul [[World Wide Web]] e nei metodi per descrivere e specificare tali colori. I colori possono essere specificati come una tripletta [[RGB]] o in formato [[Sistema numerico esadecimale|esadecimale]] (una ''tripletta esadecimale'') o in alcuni casi in base ai loro nomi comuni inglesi. Uno strumento di prelievo colore o un altro [[Software grafico|software di grafica]] viene spesso utilizzato per generare valori di colore. Un esempio: <code>#0099CC</code> (un tipo di azzurro che si può anche scrivere <code>Pacific Blue</code>)<ref>{{Cita web|url=http://www.dannydesign.it/tabella-colori-web.html|titolo=Danny Design: tabella colori web|accesso=2021-11-23}}</ref>.
=== Collegamenti e ancore ===
{{vedi anche|Anchor}}
;<code><a>...</a></code>
:Crea un elemento che diventa un
:Con l'attributo <code>href</code> impostato ad una [[Uniform Resource Locator|URL]] l'ancora diventa l
:Alternativamente (e a volte contemporaneamente), con l'attributo <code>name</code> (o <code>id</code>) l'ancora diventa la ''destinazione'' di un collegamento ipertestuale ''da'' un'altra risorsa, che come un segnalibro farà scorrere la pagina fino a quel punto. Una URL può indicare tale destinazione con un [[fragment identifier]] (l'aggiunta alla fine dell'URL di un simbolo '#' seguito dal nome dell'ancora) nell'URL<ref>{{Cita web|url=https://www.html.it/pag/16049/i-link-interni-o-ancore/|titolo=HTML anchor: cos'è un link interno e come inserirlo {{!}} Guida HTML.it|autore=Wolfgang Cecchin|sito=HTML.it |accesso= 2021-11-23}}</ref>.
:Ogni elemento può essere trasformato in un'ancora attraverso l'attributo <code>id</code> così usare <code><a name="foo"></code> non è necessario.
:Inoltre l'attributo <code>title</code> può essere impostato per dare una breve informazione sul collegamento ipertestuale.
Riga 390 ⟶ 397:
;<code><br></code>
;<code><br/></code> (in XHTML)
:Specifica un'interruzione di linea.[[File:Area-shape-html.png|alt=Esempio di area shape su una immagine. In alto sono indicate le aree cliccabili dall'utente, in basso cosa vede l'utente.|miniatura|Esempio di tag <map> su una immagine. In alto sono indicate le aree cliccabili dall'utente, in basso cosa vede l'utente. Quest'ultimo le noterà solo quando passerà sopra di esse con il mouse.]]
;<code><map>...</map></code>
:Specifica una mappa lato client, ossia aree cliccabili dall'utente.
;<code><area></code>
;<code><area/></code> (in XHTML)
Riga 399 ⟶ 406:
:Testo lampeggiante. Può essere reso in alternativa con la direttiva di stile <code>{text-decoration: blink}</code>
;<code><marquee>...</marquee></code> (fortemente sconsigliato)
:
::<code>behaviour</code>: indica il tipo di movimento del testo, può assumere i valori:
:::<code>scroll</code>: il testo arrivato alla fine viene ripresentato dall'inizio in modo continuo;
Riga 439 ⟶ 446:
== Frame ==
{{Vedi anche|Iframe|Frameset}}
I frame, in italiano "cornici", permettono di strutturare il documento HTML in
</ref>
Le cornici sono parte dello standard HTML 4.0 Frameset, mentre in HTML5 sono state dichiarate obsolete<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/frameset|titolo=- HTML: HyperText Markup Language {{!}} MDN|sito=developer.mozilla.org|accesso=5 febbraio 2021}}</ref><ref>{{Cita web|url=https://www.ostraining.com/blog/webdesign/against-using-iframes/|titolo=3 Reasons You Might Not Want To Use Iframes|accesso=5 febbraio 2021}}</ref>.
;<code><frameset>...</frameset></code>
Riga 473 ⟶ 463:
;<code><iframe>...</iframe></code>
:Un frame speciale ''inline'', inseribile all'interno di un normale elemento <code>body</code>. Ha molti attributi comuni all'elemento <code>img</code>, ma incorpora, invece di un'immagine, un altro documento HTML.
== RDFa ==
RDFa (Resource Description Framework in Attributes ) è una raccomandazione del [[W3C]] che aggiunge una serie di estensioni a livello di attributo a HTML, XHTML e vari tipi di documenti basati su XML per incorporare metadati ricchi nei documenti Web. La mappatura del modello dati RDF consente il suo utilizzo per incorporare espressioni RDF soggetto-predicato-oggetto all'interno di documenti XHTML. Consente inoltre l'estrazione di triple del modello RDF da parte di programmi utente conformi .
La comunità RDFa gestisce un sito web wiki per ospitare strumenti, esempi e tutorial<ref name="rdfa wiki">{{Cita web|url=http://rdfa.info/|titolo=RDFa / Tools}}</ref>.
=== Essenza ===
L'essenza di RDFa è fornire un insieme di attributi che possono essere usati per trasportare i metadati in un linguaggio XML (da qui la "a" in RDFa).
Questi attributi sono:
; about
: un URI o CURIE che specifica la risorsa di cui trattano i metadati
; rel e rev
: specificando rispettivamente una relazione e una relazione inversa con un'altra risorsa
; src , href e resource
: specificando la risorsa partner
; property
: specificando una proprietà per il contenuto di un elemento o della risorsa partner
; content
: attributo opzionale che sostituisce il contenuto dell'elemento quando si utilizza l'attributo della proprietà
; datatype
: attributo facoltativo che specifica il tipo di dati del testo specificato per l'uso con l'attributo della proprietà
; typeof
: attributo facoltativo che specifica il / i tipo / lo RDF del soggetto o della risorsa partner (la risorsa su cui si riferiscono i metadati).
=== Vantaggi ===
Ci sono cinque "principi di metadati interoperabili" soddisfatti da RDFa<ref>[http://assets.adida.net/presentations/w3c-2006-04-06/w3c-2006-04-06.pdf Building Interoperable Web Metadata]</ref>.
* Indipendenza dal publisher: ogni sito può utilizzare i propri standard
* Riutilizzo dei dati: i dati non vengono duplicati. Non sono necessarie sezioni XML e HTML separate per lo stesso contenuto.
* Auto contenimento: l'HTML e l'RDF sono separati
* Modularità dello schema: gli attributi sono riutilizzabili
Inoltre RDFa può trarre vantaggio dall'accessibilità web poiché maggiori informazioni sono disponibili per la tecnologia assistiva<ref>{{Cita web|url=http://www.standards-schmandards.com/2007/rdfa-and-accessibility/|titolo=RDFa – Implications for Accessibility – Standards Schmandards}}</ref>.
=== Esempio ===
<syntaxhighlight lang="html">
<div xmlns: dc = "http://purl.org/dc/elements/1.1/"
about = "http://www.example.com/books/wikinomics" >
Nel suo ultimo libro
<span property = "dc: title" > Wikinomics </span> ,
<span property = "dc: creator" > Don Tapscott </span>
spiega i profondi cambiamenti nella tecnologia,
demografia e affari.
Il libro dovrebbe essere pubblicato in
<span property = "dc: date" content = "2006-10-01" > ottobre 2006 </span> .
</div>
</syntaxhighlight>
== HTML5 ==
{{Vedi anche|HTML5}}
{| class="wikitable"
|'''TAG'''<ref>{{Cita web|url=https://www.html.it/guide/guida-html5/|titolo=HTML5: guida completa|sito=HTML.it
|'''SCOPO'''
|-
Riga 502 ⟶ 541:
|-
|Embed
|
|-
|Ruby
Riga 534 ⟶ 573:
|Per ogni tag HTML si possono specificare degli attributi semantici
|-
| colspan="2" |'''Nuovi attributi e tipi
|-
|autofocus, placeholder e form
Riga 585 ⟶ 624:
|Applicazioni web offline (file ".manifest")
|Dopo la prima sessione di navigazione online,
resteranno accessibili alcuni oggetti anche
in assenza di una connessione di rete.
Riga 594 ⟶ 633:
|WebStorage API
|Si possono ad esempio tenere aperti contemporaneamente
due account social o mail sullo stesso browser e ogni navigazione
sul primo comporterà il logout del secondo e viceversa
|-
|Web Workers API
|Consentono l’esecuzione di pezzi di codice
senza intaccare le performance della pagina web
|-
|WebSocket API
|Stabiliscono e mantengono una connessione dati tra browser
e server remoto sulla quale far transitare messaggi
in entrambe le direzioni
Riga 619 ⟶ 658:
|Immagini vettoriali e formule matematiche
|-
|[[Canvas (elemento HTML)|Canvas]]/[[WebGL]]
|API adatte a tracciare linee, cerchi, rettangoli, immagini e oggetti 3D
|-
Riga 627 ⟶ 666:
|Audio
|Inserisce file audio
|-
|'''Elementi HTML4 deprecati'''
|[[File:Deprecated-HTML.png|alt=Elementi HTML4 deprecati|centro|miniatura|290x290px]]
|}
==
'''Haml''' ( HTML Abstraction Markup Language) è un sistema di modelli progettato per evitare di scrivere codice inline in un documento web e rendere l'HTML più pulito. Haml offre la flessibilità di avere alcuni contenuti dinamici in HTML. Simile ad altri linguaggi web come [[PHP]], ASP, JSP e sistemi di modelli come eRuby , Haml incorpora anche del codice che viene eseguito durante il runtime e genera codice HTML per fornire alcuni contenuti dinamici. Per eseguire il codice Haml, i file devono avere un'estensione .haml. Questi file sono simili ai file .erb o eRuby che aiutano anche a incorporare il codice Ruby durante lo sviluppo di un'applicazione web<ref>{{Cita web|url=https://haml.info/|titolo=Haml|sito=haml.info|accesso=4 febbraio 2021}}</ref>.
=== Esempio ===
Haml utilizza il rientro degli spazi (due spazi) per la nidificazione e l'ambito dei tag. Questo funge da sostituto per le coppie di tag open-end, rendendolo asciutto e più pulito. L'esempio seguente confronta le sintassi di Haml ed eRuby (Embedded Ruby), insieme all'output HTML.
{| class="wikitable"
!Haml
!ERB
!HTML
|-
|
% div .category
% div .recipes
% h1 = ricetta . nome
% h3 = ricetta . categoria
% div
% h4 = ricetta . descrizione
|
< div class = "category" >
< div class = "ricette" >
< h1 > <% = ricetta . nome %> </ h1 >
< h3 > <% = ricetta . categoria %> </ h3 >
</ div >
< div >
< h4 > <% = ricetta . descrizione %> </ h4 >
<
</ div >
|
< div class = "category" >
< div class = "ricette" >
< h1 > Cookie </ h1 >
< h3 > Dessert </ h3 >
</ div >
< div >
< h4 > A base di pasta e zucchero. Di solito di forma circolare e ha circa 400 calorie. </ h4 >
</ div >
</ div >
|}
== Note ==
Riga 676 ⟶ 726:
[[Categoria:HTML]]
[[Categoria:Terminologia
[[Categoria:Formattazione del testo]]
| |||