Elemento HTML: differenze tra le versioni
Contenuto cancellato Contenuto aggiunto
Recupero di 2 fonte/i e segnalazione di 0 link interrotto/i.) #IABot (v2.0 |
m →Vari: + punto fermo in didascalia, +parm lingua |
||
| (37 versioni intermedie di 20 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 85 ⟶ 88:
:Crea una citazione, convenzionalmente visualizzata indentata ma non realizzata per indentare il testo. Può automaticamente aggiungere delle virgolette. L'attributo <code>cite</code> può fornire la fonte e deve essere una [[URL]] completa.
;<code><pre>...</pre></code>
:Crea testo pre
;<code><address>...</address></code>
:Usato per delimitare informazioni sull'indirizzo.
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 133 ⟶ 136:
==== Esempi di elenchi ====
===== Elenchi ordinati =====
Per creare un elenco ordinato in HTML si usa un elemento '''<code>ol</code>''' contenente un elemento '''<code>li</code>''', per ognuna delle voci dell'elenco stesso. Ad esempio:
{| border="0" width="50%"|
!Codice HTML
Riga 141 ⟶ 144:
<pre>
<ol>
<li>Giovanni
<li>Luca
<li>Marco
<li>Giacomo
</ol>
</pre>
|
<ol>
<li>
<li>
<li>
<li>
</ol>
|-
Riga 167 ⟶ 170:
|
<pre>
<ol type="1">
<li>
<li>
<li>
</ol>
</pre>
|
<ol type="a">
<li>
<li>
<li>
</ol>
|
<ol type="A">
<li>
<li>
<li>
</ol>
|
<ol type="i">
<li>
<li>
<li>
</ol>
|
<ol type="I">
<li>
<li>
<li>
</ol>
|-
Riga 204 ⟶ 206:
!Codice HTML, con <code>start</code> predefinito (1)
!Inizio a 8
!Inizio a
|-
|
<pre>
<ol type="a" start="1">
<li>
<li>
<li>
</ol>
</pre>
|
<ol type="a" start="8">
<li>
<li>
<li>
</ol>
|
<ol type="a" start="26">
<li>
<li>
<li>
</ol>
|-
|}
===== Elenchi non ordinati =====
Gli elenchi non ordinati (definiti anche puntati) vanno creati con un elemento <code>ul</code> che conterrà, come per gli elenchi ordinati, un elemento <code>li</code>. L'elenco non ordinato definisce di default lo stile di un elenco puntato con cerchi pieni. Ad esempio:
{| border="0" width="50%"|
!Codice HTML
|-
|
<pre>
<ul>
<li>Giovanni</li>
<li>Luca</li>
<li>Marco</li>
<li>Giacomo</li>
</ul>
</pre>
|
<ul>
<li>Giovanni</li>
<li>Luca</li>
<li>Marco</li>
<li>Giacomo</li>
</ul>
|-
|}
L'attributo <code>type</code> di <code>ul</code> può far assumere tre stili diversi ai puntatori dei singoli elementi: con il valore <code>disc</code> verrà creata una lista puntata con cerchi pieni come quella predefinita, col valore <code>circle</code> i cerchi saranno di stessa dimensione ma vuoti, e infine con <code>square</code> verrà creato un elenco puntato a piccoli quadrati pieni. Non avendo nessun tipo di ordine di interpretazione, non è previsto l'attributo <code>start</code>.
{| border="0" width="50%"|
!Codice con <code>type</code> predefinito (disc)
|-
|
<pre>
<ul type="disc">
<li>Luca</li>
<li>Marco</li>
<li>Carlo</li>
</ul>
</pre>
|
<ul type="disc">
<li>Luca</li>
<li>Marco</li>
<li>Carlo</li>
</ul>
|-
|}
Riga 253 ⟶ 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 298 ⟶ 343:
=== Formattazione ===
{{Vedi anche|CSS}}
;<code><b>...</b></code> (deprecato)
:Utilizza il '''grassetto'''. CSS equivalente: <code>{font-weight: bold}</code>
Riga 306 ⟶ 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 325 ⟶ 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 348 ⟶ 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 357 ⟶ 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 397 ⟶ 446:
== Frame ==
{{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}}</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 430 ⟶ 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|accesso=29 gennaio 2021}}</ref>
|'''SCOPO'''
|-
| colspan="2" |'''Nuovi elementi strutturali e semantici'''
|-
|Header
| rowspan="6" |[[File:Html4-vs-html5-struttura.png|alt=Confronto tra pagina di base HTML4 e 5|centro|miniatura|Confronto tra pagina di base HTML4 e 5]]
|-
|Footer
|-
|Section
|-
|Nav
|-
|Article ''(nel caso di articoli in homepage)''
|-
|Aside ''(contenuti correlati al principale)''
|-
|Hgroup
|Raggruppa i tag Heading
|-
|<figure> e <figcaption>
|Didascalie per contenuti
|-
|Embed
|Inserisce contenuti interattivi o multimediali
|-
|Ruby
|Specifica le annotazioni Ruby
|-
|Wbr
|Il browser può inserire un a capo
|-
|<command> e <menu>
|Definiscono barre degli strumenti o menu di scelta rapida
|-
|<details> e <summary>
|Widget informativi per gli utenti
|-
|mark
|Parte di un testo segnato o evidenziato all'utente
|-
|<nowiki><time> e attributi </nowiki>''pubdate'' e ''datetime''
|Tempo su 24 ore o una data nel calendario Gregoriano
|-
|Meter
|Misura scalare di un intervallo noto o un valore frazionario
|-
|Progress
|Stato di completamento di un compito
|-
|Picture
|Contenitore per immagini
|-
|Microdati
|Per ogni tag HTML si possono specificare degli attributi semantici
|-
| colspan="2" |'''Nuovi attributi e tipi di input per i form'''
|-
|autofocus, placeholder e form
| rowspan="8" |[[File:Form-errori.png|alt=form|centro|miniatura|L'autofocus in questo caso è in rosso. Gli input type equivalgono agli spazi da riempire (in questo caso c'è "email"). Il placeholder è il testo di esempio di ogni spazio]]
|-
|Input type: tel
|-
|Input type: search
|-
|Input type: url
|-
|Input type: email
|-
|Input type: number
|-
|Input type: range
|-
|Input type: color
|-
|Datalist
|Completamento automatico ad un elemento del form
|-
|Autocomplete
|Permette o no al browser di riempire i campi
del form in maniera automatica
|-
|Min, max
|Definiscono il valore minimo e massimo consentito
|-
|Multiple
|Permette all’utente possa inserire più valori per lo stesso input
|-
|Pattern
|Verifica che il valore inserito rispetti determinate regole
|-
|Required
|Rende obbligatoria la compilazione di uno spazio del form
|-
|Step
|Definisce la distanza che intercorre tra un valore e il successivo
|-
|keygen
|Generatore di chiavi numeriche all’interno di un form
|-
|output
|Restituisce il risultato di un calcolo
|-
| colspan="2" |'''API per Web Applications'''
|-
|Applicazioni web offline (file ".manifest")
|Dopo la prima sessione di navigazione online,
resteranno accessibili alcuni oggetti anche
in assenza di una connessione di rete.
|-
|Indexed Database API
|Creare e manipolare un database all’interno del browser
|-
|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 JavaScript
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
|-
|Drag and Drop
|Trascinamento e rilascio di oggetti
|-
|Geolocation API
|Geolocalizzazione
|-
| colspan="2" |'''Multimedia'''
|-
|[[.svg|SVG]] e [[MathML]]
|Immagini vettoriali e formule matematiche
|-
|[[Canvas (elemento HTML)|Canvas]]/[[WebGL]]
|API adatte a tracciare linee, cerchi, rettangoli, immagini e oggetti 3D
|-
|Video
|Inserisce file video (prima fattibile solo con [[Adobe Flash]])
|-
|Audio
|Inserisce file audio
|-
|'''Elementi HTML4 deprecati'''
|[[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}}</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 447 ⟶ 726:
[[Categoria:HTML]]
[[Categoria:Terminologia
[[Categoria:Formattazione del testo]]
| |||