Elemento HTML: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
Aggiornamento della voce |
m →Vari: + punto fermo in didascalia, +parm lingua |
||
| (20 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
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
== 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 68 ⟶ 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 104 ⟶ 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 296 ⟶ 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 341 ⟶ 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)
:Tag considerato obsoleto in favore dei CSS<ref>{{Cita web|url=https://developer.mozilla.org/en-US/docs/Web/HTML/Element/font|titolo=- HTML: HyperText Markup Language {{!}} MDN|sito= developer.mozilla.org |accesso= 4 febbraio 2021
Esempi:
# <code><font color="green">text</font></code> crea <span style="color:green">testo verde</span>.
Riga 370 ⟶ 373:
=== 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 394 ⟶ 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.
Riga 403 ⟶ 406:
:Testo lampeggiante. Può essere reso in alternativa con la direttiva di stile <code>{text-decoration: blink}</code>
;<code><marquee>...</marquee></code> (fortemente sconsigliato)
:Tag deprecato<ref>{{Cita web|lingua=en|url=https://stackoverflow.com/questions/31951282/why-is-marquee-deprecated-and-what-is-the-best-alternative|titolo=javascript - Why is
::<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 445 ⟶ 448:
{{Vedi anche|Iframe|Frameset}}
I frame, in italiano "cornici", permettono di strutturare il documento HTML in sotto-documenti che il browser gestisce come finestre separate. Ad esempio è possibile tenere sempre fisso e visibile un menu di navigazione in una prima cornice posizionata nel bordo sinistro della pagina, affiancata ad una seconda cornice che racchiude il contenuto principale scorrevole. Gli elementi <code>frame</code> devono essere inclusi dentro un elemento <code>frameset</code> che sostituisce il <code>body</code> e lo stesso documento HTML deve essere dichiarato come Frameset. In altre parole, un elemento <code>html</code> può contenere un <code>head</code> ed un <code>body</code> (nel caso di documenti Strict o Transitional) o, in alternativa, un <code>head</code> e un <code>frameset</code>.<ref>{{cita web |url=https://www.w3.org/TR/html4/present/frames.html#h-16.1 |titolo=HTML 4.01 Specification, Frames |data=24 dicembre 1999 |editore=W3C |lingua=en |accesso=14 giugno 2014}}
</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
;<code><frameset>...</frameset></code>
Riga 471 ⟶ 467:
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">{{
=== Essenza ===
Riga 494 ⟶ 490:
=== 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
Riga 501 ⟶ 497:
* 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>{{
=== Esempio ===
Riga 520 ⟶ 516:
{{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 577 ⟶ 573:
|Per ogni tag HTML si possono specificare degli attributi semantici
|-
| colspan="2" |'''Nuovi attributi e tipi
|-
|autofocus, placeholder e form
Riga 628 ⟶ 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 637 ⟶ 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 674 ⟶ 670:
|[[File:Deprecated-HTML.png|alt=Elementi HTML4 deprecati|centro|miniatura|290x290px]]
|}
== Haml ==
'''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
=== Esempio ===
Riga 761 ⟶ 726:
[[Categoria:HTML]]
[[Categoria:Terminologia
[[Categoria:Formattazione del testo]]
| |||