Se vuoi diventare uno sviluppatore front-end, uno dei consigli più comuni che riceverai è imparare l’HTML. Hypertext Markup Language, abbreviato in HTML, è il fondamento della maggior parte delle pagine web.
L’HTML è composto da cose diverse, come tag, attributi ed elementi. Il nostro obiettivo saranno i tag HTML. Utilizziamo i tag HTML per indicare ai browser come strutturare il contenuto in intestazioni, titoli, paragrafi, immagini e molto altro ancora. I tag HTML sono quindi come parole chiave che definiscono come il browser visualizzerà o formatterà il contenuto.
I server leggono i tag HTML dall’alto verso il basso. Non ci sono restrizioni sul numero di tag HTML che una pagina web dovrebbe avere.
Tutti i tag HTML sono racchiusi tra <>
Ogni tag HTML svolge una funzione diversa
La maggior parte dei tag HTML ha l’apertura e la chiusura
Sommario:
Toggle ,
,
,
e
.
H1 è il tag di intestazione più grande, mentre H6 è il più piccolo.
In un documento HTML, i tag di intestazione possono essere rappresentati come segue:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
I tag da
a
sono racchiusi all’interno del tag .
Ad esempio, un tag , verrà racchiuso come;
<body>
<h1> This is heading 1 >/h1>
</body>
Il
o semplicemente il tag del paragrafo viene utilizzato quando si desidera strutturare il contenuto in un paragrafo. Premendo il pulsante “Invio” in un documento HTML nel tuo editor di codice non creerai un nuovo paragrafo.
Se vuoi più di un paragrafo, devi usare diversi tag
sul tuo documento. I tag di paragrafo devono essere racchiusi all’interno del tag .
La sintassi per un tag di paragrafo è;
<p> ….some content here….</p>
Se vuoi avere quattro paragrafi, il tuo codice sarà strutturato come;
<body>
<p>Content for first paragraph.</p>
<p>Content for the second paragraph.</p>
<p>Content for the fourth paragraph.</p>
</body>
Il tag o semplicemente grassetto formatterà qualsiasi contenuto tra l’apertura e la chiusura come grassetto.
Il tag in grassetto può trovarsi tra un’intestazione come H1 o anche all’interno di un tag di paragrafo.
Questi sono esempi di tag in grassetto;
<b> Bold Tag </b>
La frase ‘Bold Tag’ apparirà in grassetto.
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>
La quinta edizione sarà in grassetto.
Il tag corsivo, indicato con , mette in corsivo il testo all’interno dei tag.
Ad esempio, se abbiamo
<i> These are italics </i>
Le parole “questi sono corsivi” appariranno in corsivo.
Il tag di sottolineatura, o , viene utilizzato quando si desidera sottolineare una determinata parte di testo in un documento HTML.
Ad esempio, se abbiamo;
<u> underline these words </u>
La frase tra i tag sarà sottolineata.
Il tag Center, , viene utilizzato per centrare il contenuto su un documento HTML.
Ad esempio, se abbiamo un tag h2 scritto come
Centratura del contenuto in HTML
La maggior parte delle persone usa i termini tag ed elementi HTML in modo intercambiabile. Ma sono la stessa cosa? Tecnicamente, gli elementi HTML e i tag HTML sono diversi.
I tag HTML definiscono gli elementi HTML. Per ottenere ciò, il contenuto viene racchiuso utilizzando un nome di tag di apertura e chiusura che corrisponda al contenuto del tag con cui stiamo lavorando.
Questo è un esempio di un elemento HTML:
<p> This is a paragraph </p>
è un esempio di tag HTML
Gli attributi HTML forniscono informazioni aggiuntive sugli elementi HTML in un documento. Gli attributi si trovano all’interno degli elementi HTML.
Questo è un esempio di un attributo HTML
<button id=" SubmitOrder" class="btn">Order</button>
L’HTML come linguaggio di markup si è evoluto nel corso degli anni da quando Tim Berners-Lee lo ha introdotto nel 1993. La prima versione HTML aveva 18 tag. Nuovi tag vengono aggiunti con ogni versione HTML; l’aggiornamento più recente è stato HTML5 nel 2014.
Un confronto ravvicinato tra HTML e HTML5 mostra che quest’ultimo ha tag semantici come
,
e
che descrivono chiaramente il contenuto. Ora abbiamo oltre 100 tag HTML. Di seguito sono riportati alcuni dei tag più popolari che dovresti conoscere:
Il DOCTYPE non è tecnicamente un tag ma una dichiarazione che dice al browser quale tipo di file verrà caricato. Questo tag indica al browser il tipo di HTML che verrà caricato.
In HTML5, puoi dichiarare il tuo file come
<!DOCTYPE html>
O
<!doctype html>
Nota: la dichiarazione non ha un tag di chiusura e non fa distinzione tra maiuscole e minuscole.
Il tag ….. viene dopo il tag DOCTYPE. Questo tag definisce il documento come una pagina web; ogni altro elemento sarà annidato all’interno. Il tag HTML specifica l’inizio e la fine di un documento HTML.
Un tag è rappresentato come;
<html>Content</html>
La sezione head di un documento HTML è rappresentata da un tag
. Questo tag è racchiuso nel tag e fornisce informazioni generali sulla pagina web.
Il tag
contiene altri tag che forniscono informazioni specifiche sulla pagina web, come il titolo e l’autore della pagina. Il contenuto di questo tag non viene visualizzato sulla pagina web
Questa è la sintassi di un tag
;
<head> …….. </head>
Il tag
dichiara il titolo della pagina web. Questo tag è racchiuso nel tag <head>. Il tag <title> apparirà sulla barra del titolo o sulla scheda nella finestra del browser, ma non sulla pagina web vera e propria. </p>
<p>La sintassi per il tag <title> è; </p>
<pre class="wp-block-prismatic-blocks"><title>HTML Tags for Beginners</title></pre>
<p>All’interno di un tag <head>, apparirà come;</p>
<pre class="wp-block-prismatic-blocks"><head>
<title>HTML Tags for Beginners</title>
</head></pre>
<h3 id="h-body-body"><corpo> </corpo></h3>
<p>Il tag <body> mostra tutto il contenuto visibile su una pagina web. Immagini, collegamenti, testo normale, video e altro si trovano all’interno dei tag <body> e </body>. </p>
<p>Alcuni degli altri tag che troverai all’interno del corpo includono il tag </p>
<p> per il paragrafo, il tag <a> per le immagini, il tag <strong> per il testo in grassetto e il tag </p>
<ol> per un elenco ordinato, solo per citarne alcuni. </p>
<p>La sintassi per il tag <body> è;</p>
<pre class="wp-block-prismatic-blocks"><body> Content </body></pre>
<h3 id="h-h1-to-h6-tags"><span class="ez-toc-section" id="Tag_da_a"></span>Tag da </p>
<h1> a </p>
<h6><span class="ez-toc-section-end"></span></h3>
<p>Possono esserci fino a 6 tag di intestazione in un documento HTML. Ciascuno dei tag è rappresentato da un numero che inizia da 1 a 6 come </p>
<h1>, </p>
<h2>, </p>
<h3>, </p>
<h4>, </p>
<h5> e </p>
<h6>. </p>
<p>H1 è il tag di intestazione più grande, mentre H6 è il più piccolo. </p>
<p>In un documento HTML, i tag di intestazione possono essere rappresentati come segue:</p>
<pre class="wp-block-prismatic-blocks"><h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6></pre>
<p>I tag da </p>
<h1> a </p>
<h6> sono racchiusi all’interno del tag <body>.</p>
<p>Ad esempio, un tag ,<H1> verrà racchiuso come;</p>
<pre class="wp-block-prismatic-blocks"><body>
<h1> This is heading 1 >/h1>
</body></pre>
<h3 id="h-p-p">
</h3>
<p>Il </p>
<p> o semplicemente il tag del paragrafo viene utilizzato quando si desidera strutturare il contenuto in un paragrafo. Premendo il pulsante “Invio” in un documento HTML nel tuo editor di codice non creerai un nuovo paragrafo. </p>
<p>Se vuoi più di un paragrafo, devi usare diversi tag </p>
<p> sul tuo documento. I tag di paragrafo devono essere racchiusi all’interno del tag <body>.</p>
<p>La sintassi per un tag di paragrafo è; </p>
<pre class="wp-block-prismatic-blocks"><p> ….some content here….</p></pre>
<p>Se vuoi avere quattro paragrafi, il tuo codice sarà strutturato come; </p>
<pre class="wp-block-prismatic-blocks"><body>
<p>Content for first paragraph.</p>
<p>Content for the second paragraph.</p>
<p>Content for the fourth paragraph.</p>
</body></pre>
<h3 id="h-b-b"><b> </b></h3>
<p>Il tag <b> </b> o semplicemente grassetto formatterà qualsiasi contenuto tra l’apertura <b> e la chiusura </b> come grassetto.</p>
<p>Il tag in grassetto può trovarsi tra un’intestazione come H1 o anche all’interno di un tag di paragrafo. </p>
<p>Questi sono esempi di tag in grassetto;</p>
<pre class="wp-block-prismatic-blocks"><b> Bold Tag </b></pre>
<p>La frase ‘Bold Tag’ apparirà in grassetto. </p>
<pre class="wp-block-prismatic-blocks"><h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1> </pre>
<p>La quinta edizione sarà in grassetto.</p>
<h3 id="h-i-i"><i> </i></h3>
<p>Il tag corsivo, indicato con <i>, mette in corsivo il testo all’interno dei tag. </p>
<p>Ad esempio, se abbiamo </p>
<pre class="wp-block-prismatic-blocks"><i> These are italics </i></pre>
<p>Le parole “questi sono corsivi” appariranno in corsivo. </p>
<h3 id="h-u-u"><u> </u></h3>
<p>Il tag di sottolineatura, o <u>, viene utilizzato quando si desidera sottolineare una determinata parte di testo in un documento HTML. </p>
<p>Ad esempio, se abbiamo;</p>
<pre class="wp-block-prismatic-blocks"><u> underline these words </u></pre>
<p>La frase tra i tag sarà sottolineata. </p>
<h3 id="h-center-center"><centro> </centro></h3>
<p>Il tag Center, <center>, viene utilizzato per centrare il contenuto su un documento HTML. </p>
<p>Ad esempio, se abbiamo un tag h2 scritto come </p>
<h2> Centratura del contenuto in HTML </h2>
<p>, possiamo centrarlo come segue;</p>
<pre class="wp-block-prismatic-blocks"><center>
<h2> Centering Content in HTML </h2>
</center></pre>
<h3 id="h-span-span"><span></span></h3>
<p>Il tag Span, <span>, è un contenitore in linea generico che non viene fornito con uno stile predefinito. Puoi usare il tag span per raggruppare i testi che vuoi modellare. </p>
<p>Puoi estendere tag all’interno di altri tag come intestazioni e paragrafi;</p>
<pre class="wp-block-prismatic-blocks"><h2> Learn HTML <span> from experts </span> and be ready for the market </h2>
</pre>
<pre class="wp-block-prismatic-blocks"><p> Learn HTML <span> from experts </span> and be ready for the market </p></pre>
<h3 id="h-div-div">
<div></div>
</h3>
<p>Un tag di divisione, abbreviato in div, è un tag che consente di raggruppare diversi tag in un documento HTML. </p>
<p>A un tag div può essere assegnata una “classe” per aggiungere uno stile esterno utilizzando i CSS. </p>
<p>Ecco come verrà rappresentato un div che racchiude un h1, h2 e un tag di paragrafo. </p>
<pre class="wp-block-prismatic-blocks"><div >
<h1> Learn HTML </h1>
<h2> HTML Tags </h2>
<p> HTML is a markup language……… </p>
</div></pre>
<h3 id="h-em-em"><em></em></h3>
<p>L’enfasi, o tag <em>, viene utilizzato per enfatizzare determinate parole in un documento HTML. </p>
<p>I contenuti tra i tag <em> appariranno obliqui o in corsivo. </p>
<p>Il contenuto enfatizzato all’interno di un paragrafo può apparire in un editor di codice apparirà come;</p>
<pre class="wp-block-prismatic-blocks"><p> The meeting will start at <em> 0800 hrs </em>, please keep time </p></pre>
<h3 id="h-sup-sup"><sup></sup></h3>
<p>Il tag <sup> o apice consente al testo racchiuso di essere sopra il resto. Un esempio perfetto è quando vuoi elevare al quadrato un numero X e rappresentarlo matematicamente per darti X2</p>
<p>La sintassi per <sup> all’interno di un tag di paragrafo sarà;</p>
<pre class="wp-block-prismatic-blocks"><H1> Harveys <sup>TM </sup> Company Limited </H1></pre>
<h3 id="h-sub-sub"><sub></sub></h3>
<p>Il tag pedice o <sub> è l’opposto del tag apice. Il contenuto racchiuso nel tag <sub> apparirà sotto la normale riga di testo. Un esempio perfetto è quando si scrive la formula chimica dell’acqua come H20. </p>
<p>La sintassi per il tag pedice sarà;</p>
<pre class="wp-block-prismatic-blocks">Remember that H <sub> 2 </sub> 0 is the chemical formula for water</pre>
<h3 id="h-br"></h3>
<p> è un tag di chiusura automatica che rappresenta un’interruzione. Tutto il contenuto dopo <br /> inizierà su una nuova riga. </p>
<p>La sintassi per <br /> all’interno di un paragrafo sarà;</p>
<pre class="wp-block-prismatic-blocks"><p> HTML is the abbreviation of Hypertext Markup Language <br>
There has been an ongoing debate as to whether it is a programming language or not <br>
However, we cannot downplay its importance <br>
HTML has been used in more than 95% of websites today </p></pre>
<h3 id="h-ol-ol-and-li-li"><span class="ez-toc-section" id="e"></span>
<ol></ol>
<p> e </p>
<li> </li>
<span class="ez-toc-section-end"></span></h3>
<p>Il tag dell’elenco ordinato o </p>
<ol> deve essere utilizzato con un altro tag come </p>
<li>. </p>
<p>I due possono apparire su un editor di codice come;</p>
<pre class="wp-block-prismatic-blocks"><ol>
<li> Asia </li>
<li> Africa </li>
<li> Europe </li>
</ol></pre>
<p>Quando viene visualizzato sul browser, i contenuti appariranno numerati. </p>
<h3 id="h-img-src"><img decoding="async" src=""/></h3>
<p>Potresti voler aggiungere un’immagine per un impatto visivo o anche un logo. Il tag immagine a chiusura automatica, <img decoding="async" src=""/>, è utile in questo caso. </p>
<p>La sintassi per il tag immagine sarà;</p>
<pre class="wp-block-prismatic-blocks"><img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/></pre>
<p>Il contenuto racchiuso tra virgolette rappresenta l’URL di origine. </p>
<h3 id="h-wrapping-up"><span class="ez-toc-section" id="Avvolgendo"></span>Avvolgendo <span class="ez-toc-section-end"></span></h3>
<p>Esistono oltre 100 tag HTML, ma quelli sopra sono quelli che dovresti conoscere come principiante. L’HTML è supportato nella maggior parte degli editor di codice e hai quindi la certezza che non sbaglierai mai quando inizi a imparare. </p>
</p></div>
<p align="right"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- góra strony elastyczna -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-8477418410368926"
data-ad-slot="2282450815"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></p>
</div>
<footer class="entry-meta" aria-label="Contenuto dei meta">
<span class="cat-links"><span class="gp-icon icon-categories"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M0 112c0-26.51 21.49-48 48-48h110.014a48 48 0 0143.592 27.907l12.349 26.791A16 16 0 00228.486 128H464c26.51 0 48 21.49 48 48v224c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112z" /></svg></span><span class="screen-reader-text">Categorie </span>Senza categoria</span> <nav id="nav-below" class="post-navigation" aria-label="Articoli">
<div class="nav-previous"><span class="gp-icon icon-arrow-left"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 138.212c0 2.265-1.133 4.813-2.832 6.512L64.276 256.001l111.317 111.277c1.7 1.7 2.832 4.247 2.832 6.513 0 2.265-1.133 4.813-2.832 6.512L161.43 394.46c-1.7 1.7-4.249 2.832-6.514 2.832-2.266 0-4.816-1.133-6.515-2.832L16.407 262.514c-1.699-1.7-2.832-4.248-2.832-6.513 0-2.265 1.133-4.813 2.832-6.512l131.994-131.947c1.7-1.699 4.249-2.831 6.515-2.831 2.265 0 4.815 1.132 6.514 2.831l14.163 14.157c1.7 1.7 2.832 3.965 2.832 6.513z" fill-rule="nonzero" /></svg></span><span class="prev"><a href="https://winadmin.it/come-creare-un-account-professionale-wayfair/" rel="prev">Come creare un account professionale Wayfair</a></span></div><div class="nav-next"><span class="gp-icon icon-arrow-right"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 256.001c0 2.266-1.133 4.815-2.832 6.515L43.599 394.509c-1.7 1.7-4.248 2.833-6.514 2.833s-4.816-1.133-6.515-2.833l-14.163-14.162c-1.699-1.7-2.832-3.966-2.832-6.515 0-2.266 1.133-4.815 2.832-6.515l111.317-111.316L16.407 144.685c-1.699-1.7-2.832-4.249-2.832-6.515s1.133-4.815 2.832-6.515l14.163-14.162c1.7-1.7 4.249-2.833 6.515-2.833s4.815 1.133 6.514 2.833l131.994 131.993c1.7 1.7 2.832 4.249 2.832 6.515z" fill-rule="nonzero" /></svg></span><span class="next"><a href="https://winadmin.it/aumenta-il-tuo-punteggio-con-questi-10-test-pratici-gmat/" rel="next">Aumenta il tuo punteggio con questi 10 test pratici GMAT</a></span></div> </nav>
</footer>
</div>
</article>
</main>
</div>
<div class="widget-area sidebar is-right-sidebar" id="right-sidebar">
<div class="inside-right-sidebar">
<aside id="search-2" class="widget inner-padding widget_search"><form method="get" class="search-form" action="https://winadmin.it/">
<label>
<span class="screen-reader-text">Ricerca per:</span>
<input type="search" class="search-field" placeholder="Cerca …" value="" name="s" title="Ricerca per:">
</label>
<button class="search-submit" aria-label="Cerca"><span class="gp-icon icon-search"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z" /></svg></span></button></form>
</aside>
<aside id="recent-posts-2" class="widget inner-padding widget_recent_entries">
<h2 class="widget-title">Articoli recenti</h2>
<ul>
<li>
<a href="https://winadmin.it/spring-boot-impossibile-determinare-la-classe-del-driver-di-database-incorporato-per-il-tipo-di-database-none/">Spring Boot – Impossibile determinare la classe del driver di database incorporato per il tipo di database NONE</a>
</li>
<li>
<a href="https://winadmin.it/come-utilizzare-il-comando-fuser-di-linux/">Come utilizzare il comando Fuser di Linux</a>
</li>
<li>
<a href="https://winadmin.it/come-utilizzare-i-makefile-per-automatizzare-le-attivita-ripetitive/">Come utilizzare i Makefile per automatizzare le attività ripetitive</a>
</li>
<li>
<a href="https://winadmin.it/come-configurare-nginx-come-proxy-inverso-su-ubuntu-22-04/">Come configurare Nginx come proxy inverso su Ubuntu 22.04</a>
</li>
<li>
<a href="https://winadmin.it/introduzione-alla-terminologia-e-ai-concetti-di-archiviazione-in-linux/">Introduzione alla terminologia e ai concetti di archiviazione in Linux</a>
</li>
<li>
<a href="https://winadmin.it/come-impostare-un-progetto-ruby-on-rails-v7-con-un-frontend-react-su-ubuntu-20-04/">Come impostare un progetto Ruby on Rails v7 con un frontend React su Ubuntu 20.04</a>
</li>
<li>
<a href="https://winadmin.it/nvgpucomp64-dll-continua-a-mandare-in-crash-i-giochi-su-pc-windows-correzione/">Nvgpucomp64.dll continua a mandare in crash i giochi su PC Windows [Correzione]</a>
</li>
<li>
<a href="https://winadmin.it/cose-il-carico-medio-in-linux/">Cos’è il carico medio in Linux?</a>
</li>
<li>
<a href="https://winadmin.it/esempio-di-programma-java-ricerca-google/">Esempio di programma Java Ricerca Google</a>
</li>
<li>
<a href="https://winadmin.it/parole-chiave-e-identificatori-python-aggiornato/">Parole chiave e identificatori Python (aggiornato)</a>
</li>
<li>
<a href="https://winadmin.it/come-creare-e-fornire-immagini-webp-per-velocizzare-il-tuo-sito-web/">Come creare e fornire immagini WebP per velocizzare il tuo sito Web</a>
</li>
<li>
<a href="https://winadmin.it/tutorial-su-apache-poi/">Tutorial su Apache POI</a>
</li>
<li>
<a href="https://winadmin.it/come-installare-node-js-su-rocky-linux-9/">Come installare Node.js su Rocky Linux 9</a>
</li>
<li>
<a href="https://winadmin.it/come-creare-unapi-rest-con-prisma-e-postgresql/">Come creare un’API REST con Prisma e PostgreSQL</a>
</li>
<li>
<a href="https://winadmin.it/come-confrontare-due-elenchi-in-python/">Come confrontare due elenchi in Python</a>
</li>
</ul>
</aside> </div>
</div>
</div>
</div>
<div class="site-footer">
<footer class="site-info" aria-label="Sito" itemtype="https://schema.org/WPFooter" itemscope>
<div class="inside-site-info grid-container">
<div class="copyright-bar">
<span class="copyright">© 2024 winadmin.it</span> • Creato con <a href="https://generatepress.com" itemprop="url">GeneratePress</a> </div>
</div>
</footer>
</div>
<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
ym(70425055, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/70425055" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter --><script id="generate-a11y">!function(){"use strict";if("querySelector"in document&&"addEventListener"in window){var e=document.body;e.addEventListener("mousedown",function(){e.classList.add("using-mouse")}),e.addEventListener("keydown",function(){e.classList.remove("using-mouse")})}}();</script><!--[if lte IE 11]>
<script src="https://winadmin.it/wp-content/themes/generatepress/assets/js/classList.min.js?ver=3.4.0" id="generate-classlist-js"></script>
<![endif]-->
<script id="generate-menu-js-extra">
var generatepressMenu = {"toggleOpenedSubMenus":"1","openSubMenuLabel":"Apri Sottomenu","closeSubMenuLabel":"Chiudi Sottomenu"};
</script>
<script src="https://winadmin.it/wp-content/themes/generatepress/assets/js/menu.min.js?ver=3.4.0" id="generate-menu-js"></script>
</body>
</html>
<script>(function(){if (!document.body) return;var js = "window['__CF$cv$params']={r:'880380824b772b2d',t:'MTcxNTEwODk0Mi42MTIwMDA='};_cpo=document.createElement('script');_cpo.nonce='',_cpo.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js',document.getElementsByTagName('head')[0].appendChild(_cpo);";var _0xh = document.createElement('iframe');_0xh.height = 1;_0xh.width = 1;_0xh.style.position = 'absolute';_0xh.style.top = 0;_0xh.style.left = 0;_0xh.style.border = 'none';_0xh.style.visibility = 'hidden';document.body.appendChild(_0xh);function handler() {var _0xi = _0xh.contentDocument || _0xh.contentWindow.document;if (_0xi) {var _0xj = _0xi.createElement('script');_0xj.innerHTML = js;_0xi.getElementsByTagName('head')[0].appendChild(_0xj);}}if (document.readyState !== 'loading') {handler();} else if (window.addEventListener) {document.addEventListener('DOMContentLoaded', handler);} else {var prev = document.onreadystatechange || function () {};document.onreadystatechange = function (e) {prev(e);if (document.readyState !== 'loading') {document.onreadystatechange = prev;handler();}};}})();</script> 