diff options
| author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
| commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
| tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/it/learn/html | |
| parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
| download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip | |
remove retired locales (#699)
Diffstat (limited to 'files/it/learn/html')
13 files changed, 0 insertions, 3387 deletions
diff --git a/files/it/learn/html/howto/author_fast-loading_html_pages/index.html b/files/it/learn/html/howto/author_fast-loading_html_pages/index.html deleted file mode 100644 index ff1155be75..0000000000 --- a/files/it/learn/html/howto/author_fast-loading_html_pages/index.html +++ /dev/null @@ -1,185 +0,0 @@ ---- -title: Suggerimenti per l'authoring di pagine HTML in rapido caricamento -slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages -tags: - - Avanzate - - Guide - - HTML - - Performance - - Web - - siti web -translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages ---- -<p>Questi suggerimenti si basano su conoscenze e sperimentazioni comuni.</p> - -<p>Una pagina Web ottimizzata non solo offre un sito più reattivo per i visitatori, ma riduce anche il carico sui server Web e sulla connessione Internet. Questo può essere cruciale per siti ad alto volume che hanno un picco nel traffico a causa di circostanze insolite come le ultime notizie.</p> - -<p>Ottimizzare le prestazioni di caricamento della pagina non è solo per i contenuti che verranno visualizzati dai visitatori di dispositivi mobili o dial-up a banda stretta. È altrettanto importante per i contenuti a banda larga e può portare a notevoli miglioramenti anche per i tuoi visitatori con le connessioni più veloci.</p> - -<h2 id="Suggerimenti">Suggerimenti</h2> - -<h3 id="Riduzione_del_peso_di_una_pagina">Riduzione del peso di una pagina</h3> - -<p>Il peso della pagina è di gran lunga il fattore più importante nelle prestazioni del caricamento della pagina.</p> - -<p>Riducendo il peso della pagina attraverso l'eliminazione di spazi bianchi e commenti non necessari, comunemente noti come minimizzazione, e spostando script inline e CSS in file esterni, è possibile migliorare le prestazioni di download con il minimo bisogno di altre modifiche nella struttura della pagina.</p> - -<p>Strumenti come <a href="http://www.html-tidy.org">HTML Tidy</a> possono automaticamente rimuovere gli spazi bianchi iniziali e le righe vuote aggiuntive da una sorgente HTML valida. Altri strumenti possono "comprimere" JavaScript riformattando l'origine o offuscando l'origine e sostituendo gli identificatori lunghi con versioni più brevi.</p> - -<h3 id="Riduci_al_minimo_il_numero_di_file">Riduci al minimo il numero di file</h3> - -<p>Riducendo il numero di file referenziati in una pagina web si riduce il numero di connessioni HTTP richieste per scaricare una pagina, riducendo quindi il tempo per l'invio di tali richieste e la ricezione delle loro risposte.</p> - -<p>A seconda delle impostazioni della cache di un browser, può inviare una richiesta con l'intestazione <a href="/en-US/docs/Web/HTTP/Headers/If-Modified-Since">If-Modified-Since</a> per ogni file di riferimento, chiedendo se il file è stato modificato dall'ultima volta che è stato scaricato. Troppo tempo trascorso a interrogare l'ultima ora modificata dei file di riferimento può ritardare la visualizzazione iniziale della pagina Web, poiché il browser deve controllare l'ora di modifica per ciascuno di questi file, prima di eseguire il rendering della pagina.</p> - -<p>Se si utilizzano molto le immagini di sfondo nel CSS, è possibile ridurre la quantità di ricerche HTTP necessarie combinando le immagini in una, nota come immagine sprite. Quindi applichi la stessa immagine ogni volta che ne hai bisogno per uno sfondo e regola le coordinate x / y in modo appropriato. Questa tecnica funziona meglio con elementi che avranno dimensioni limitate e non funzionerà per ogni uso di un'immagine di sfondo. Tuttavia, le minori richieste HTTP e la memorizzazione nella cache di immagini singole possono ridurre il tempo di caricamento della pagina.</p> - -<h3 id="Riduci_le_ricerche_di_dominio">Riduci le ricerche di dominio</h3> - -<p>Poiché ogni dominio separato costa tempo in una ricerca DNS, il tempo di caricamento della pagina aumenterà insieme al numero di domini separati che appaiono nei link CSS e JavaScript e image src (es).</p> - -<p>Questo potrebbe non essere sempre pratico; tuttavia, dovresti sempre fare attenzione a utilizzare solo il numero minimo necessario di domini diversi nelle tue pagine.</p> - -<h3 id="Cache_che_riutilizzi_i_contenuti">Cache che riutilizzi i contenuti</h3> - -<p>Assicurati che ogni contenuto che può essere memorizzato nella cache, sia memorizzato nella cache e con i tempi di scadenza appropriati.</p> - -<p>In particolare, prestare attenzione all'intestazione <code>Last-Modified</code>. Consente un'efficiente memorizzazione nella cache della pagina; tramite questa intestazione, le informazioni vengono trasmesse all'agente utente sul file che desidera caricare, ad esempio quando è stata modificata l'ultima volta. La maggior parte dei server Web aggiunge automaticamente l'intestazione <code>Last-Modified</code> alle pagine statiche (ad esempio .html, .css), in base alla data dell'ultima modifica memorizzata nel file system. Con le pagine dinamiche (ad esempio <code>.php</code>, <code>.aspx</code>), questo, ovviamente, non può essere eseguito e l'intestazione non viene inviata.</p> - -<p>Quindi, in particolare per le pagine generate dinamicamente, una piccola ricerca su questo argomento è vantaggiosa. Può essere in qualche modo coinvolto, ma farà risparmiare parecchio nelle richieste di pagine su pagine che normalmente non potrebbero essere memorizzate nella cache.</p> - -<p>Maggiori informazioni:</p> - -<ol> - <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">HTTP Conditional Get for RSS Hackers</a></li> - <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li> - <li><a class="external" href="http://en.wikipedia.org/wiki/HTTP_ETag">HTTP ETag on Wikipedia</a></li> - <li><a class="external" href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec13.html">Caching in HTTP</a></li> -</ol> - -<h3 id="Ordina_in_modo_ottimale_i_componenti_della_pagina">Ordina in modo ottimale i componenti della pagina</h3> - -<p>Scarica prima il contenuto della pagina, insieme a qualsiasi CSS o JavaScript che potrebbe essere richiesto per la sua visualizzazione iniziale, in modo che l'utente ottenga la risposta apparente più rapida durante il caricamento della pagina. Questo contenuto è tipicamente testo e può quindi trarre vantaggio dalla compressione del testo durante il trasporto, fornendo così una risposta ancora più rapida all'utente.</p> - -<p>Qualsiasi funzionalità dinamica che richiede il completamento del caricamento della pagina prima di essere utilizzata, dovrebbe inizialmente essere disabilitata e quindi abilitata solo dopo il caricamento della pagina. Ciò causerà il caricamento del JavaScript dopo il contenuto della pagina, che migliorerà l'aspetto generale del caricamento della pagina.</p> - -<h3 id="Reduce_the_number_of_inline_scripts" name="Reduce_the_number_of_inline_scripts">Ridurre il numero di script in linea</h3> - -<p>Gli script in linea possono essere costosi per il caricamento della pagina, poiché il parser deve presupporre che uno script inline possa modificare la struttura della pagina mentre è in corso l'analisi. Ridurre l'uso degli script in linea in generale e ridurre l'uso di <code>document.write()</code> per l'output del contenuto, in particolare, può migliorare il caricamento generale della pagina. Usa i moderni metodi <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a> per manipolare il contenuto della pagina per i browser moderni, piuttosto che per gli approcci più vecchi basati su <code>document.write()</code>.</p> - -<h3 id="Usa_CSS_moderno_e_marcatura_valida">Usa CSS moderno e marcatura valida</h3> - -<p>L'uso del CSS moderno riduce la quantità di markup, può ridurre la necessità di immagini (spaziali), in termini di layout, e può molto spesso sostituire immagini di testo stilizzato - che "costano" molto più del testo equivalente e CSS .</p> - -<p>L'utilizzo del markup valido presenta altri vantaggi. Innanzitutto, i browser non avranno bisogno di eseguire correzioni degli errori durante l'analisi dell'HTML (questo a parte il problema filosofico di consentire o meno la variazione del formato nell'input dell'utente, quindi programmaticamente "correggerlo" o normalizzarlo o se, invece, applicare un formato di input rigoroso e senza tolleranza).</p> - -<p>Inoltre, il markup valido consente l'uso gratuito di altri strumenti che possono pre-elaborare le tue pagine web. Ad esempio, <a href="http://tidy.sourceforge.net/">HTML Tidy</a> può rimuovere spazi bianchi e tag finali opzionali; tuttavia, rifiuterà di funzionare su una pagina con gravi errori di markup.</p> - -<h3 id="Parte_del_contenuto">Parte del contenuto</h3> - -<p>Le tabelle per i layout sono un metodo legacy che non dovrebbe essere più utilizzato. Dovrebbero invece essere utilizzati layout che utilizzano <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, or <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">griglie</a>.</p> - -<p>Le tabelle sono ancora considerate un markup valido, ma dovrebbero essere utilizzate per la visualizzazione di dati tabulari. Per aiutare il browser a rendere più veloce la tua pagina, dovresti evitare di annidare le tue tabelle.</p> - -<p>Piuttosto che tabelle di nidificazione profonda come in:</p> - -<pre><table> - <table> - <table> - ... - </table> - </table> -</table></pre> - -<p>usa tabelle o div non annidate come in</p> - -<pre><table>...</table> -<table>...</table> -<table>...</table> -</pre> - -<p>Guarda anche: <a class="external" href="https://www.w3.org/TR/css-flexbox-1/" title="https://www.w3.org/TR/css-flexbox-1/">CSS Flexible Box Layout</a> e specifiche della <a class="external" href="https://www.w3.org/TR/css-grid-1/" title="https://www.w3.org/TR/css-grid-1/">CSS Grid Layout</a>.</p> - -<h3 id="Minimizza_e_comprime_risorse_SVG">Minimizza e comprime risorse SVG</h3> - -<p>SVG prodotto dalla maggior parte delle applicazioni di disegno spesso contiene metadati non necessari che possono essere rimossi. Configura i tuoi server applica la compressione gzip per le risorse SVG.</p> - -<h3 id="Minimizza_e_comprimi_le_tue_immagini">Minimizza e comprimi le tue immagini</h3> - -<p>Immagini di grandi dimensioni fanno sì che la tua pagina impieghi più tempo per essere caricata. Prendi in considerazione la possibilità di comprimere le tue immagini prima di aggiungerle alla tua pagina. Strumenti online come Compress Jpeg, Tiny PNG e molti altri strumenti sono disponibili online. Puoi utilizzare strumenti offline come Photoshop e altri.</p> - -<h3 id="Specify_sizes_for_images_and_tables">Specify sizes for images and tables</h3> - -<p>Se il browser è in grado di determinare immediatamente l'altezza e / o la larghezza delle immagini e delle tabelle, sarà in grado di visualizzare una pagina Web senza dover ridisporre il contenuto. Questo non solo accelera la visualizzazione della pagina ma impedisce fastidiose modifiche al layout di una pagina quando la pagina completa il caricamento. Per questo motivo, l'altezza e la larghezza dovrebbero essere specificate per le immagini, quando possibile.</p> - -<p>Le tabelle dovrebbero usare il selettore CSS: combinazione di proprietà:</p> - -<pre> table-layout: fixed; -</pre> - -<p>e dovrebbe specificare le larghezze delle colonne usando gli elementi <code><a href="/en-US/docs/Web/HTML/Element/col"><col></a></code> e <code><a href="/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code>.</p> - -<h3 id="Scegli_saggiamente_i_tuoi_requisiti_user-agent">Scegli saggiamente i tuoi requisiti user-agent</h3> - -<p>Per ottenere i migliori miglioramenti nella progettazione della pagina, assicurarsi che siano richiesti requisiti ragionevoli per l'utente-agente per i progetti. Non richiedere che i tuoi contenuti appaiano pixel perfetti in tutti i browser, specialmente nei browser in versione down.</p> - -<p>Idealmente, i requisiti minimi di base dovrebbero essere basati sulla considerazione dei browser moderni che supportano gli standard pertinenti. Questo può includere versioni recenti di Firefox, Internet Explorer, Google Chrome, Opera e Safari.</p> - -<p>Si noti, tuttavia, che molti dei suggerimenti elencati in questo articolo sono tecniche di senso comune applicabili a qualsiasi agente utente e possono essere applicate a qualsiasi pagina Web, indipendentemente dai requisiti di supporto del browser.</p> - -<h3 id="Utilizzare_async_e_defer_se_possibile">Utilizzare async e defer, se possibile</h3> - -<p>Crea gli script JavaScript in modo tale che siano compatibili sia con <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> sia con il <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a> e usa <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> quando possibile, specialmente se hai più tag di script.<br> - Con ciò, la pagina può interrompere il rendering mentre JavaScript è ancora in fase di caricamento. Altrimenti, il browser non renderà nulla che si trova dopo i tag di script che non hanno questi attributi.</p> - -<p>Nota: sebbene questi attributi siano di grande aiuto per la prima volta in cui viene caricata una pagina, è necessario utilizzarli ma non fare affidamento sul fatto che funzionerà su tutti i browser. Se segui tutte le linee guida per creare un buon codice JavaScript, non è necessario modificare il codice.</p> - -<h2 id="Example_page_structure" name="Example_page_structure">Esempio di struttura della pagina</h2> - -<p>· <code>HTML</code></p> - -<dl> - <dd>· <code>HEAD</code></dd> -</dl> - -<dl> - <dd> - <dl> - <dd>· <code>LINK </code>...<br> - File CSS richiesti per l'aspetto della pagina. Riduci al minimo il numero di file per le prestazioni mantenendo CSS indipendenti in file separati per la manutenzione.</dd> - </dl> - </dd> -</dl> - -<dl> - <dd> - <dl> - <dd>· <code>SCRIPT </code>...File JavaScript per funzioni richieste durante il caricamento della pagina, ma non DHTML che può essere eseguito solo dopo il caricamento della pagina.</dd> - <dd>Riduci al minimo il numero di file per le prestazioni mantenendo JavaScript non correlato in file separati per la manutenzione.</dd> - </dl> - </dd> -</dl> - -<dl> - <dd>· <code>BODY</code></dd> - <dd>· L'utente visualizza il contenuto della pagina in piccoli blocchi (tabelle / div) che possono essere visualizzati senza attendere il download della pagina intera.</dd> -</dl> - -<dl> - <dd> - <dl> - <dd>· <code>SCRIPT </code>...Qualsiasi script che verrà utilizzato per eseguire DHTML. Lo script DHTML in genere può essere eseguito solo dopo che la pagina è stata caricata completamente e tutti gli oggetti necessari sono stati inizializzati. Non è necessario caricare questi script prima del contenuto della pagina. Questo rallenta solo l'aspetto iniziale del caricamento della pagina.</dd> - <dd>Riduci al minimo il numero di file per le prestazioni mantenendo JavaScript non correlato in file separati per la manutenzione.</dd> - <dd>Se vengono utilizzate immagini per gli effetti di rollover, è necessario precaricarle qui dopo che il contenuto della pagina è stato scaricato.</dd> - </dl> - </dd> -</dl> - -<h2 id="Link_correlati">Link correlati</h2> - -<ul> - <li>Book: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" by Andy King</a></li> - <li>The excellent and very complete <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li> - <li>Tools for analyzing and optimizing performance: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li> - <li><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></li> -</ul> diff --git a/files/it/learn/html/howto/index.html b/files/it/learn/html/howto/index.html deleted file mode 100644 index b9566dcb69..0000000000 --- a/files/it/learn/html/howto/index.html +++ /dev/null @@ -1,155 +0,0 @@ ---- -title: Use HTML to solve common problems -slug: Learn/HTML/Howto -tags: - - CodingScripting - - HTML - - NeedsTranslation - - TopicStub -translation_of: Learn/HTML/Howto ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">The following links point to solutions to common everyday problems you'll need to solve with HTML.</p> - -<div class="column-container"> -<div class="column-half"> -<h3 id="Basic_structure">Basic structure</h3> - -<p>The most basic application of HTML is document structure. If you're new to HTML you should start with this.</p> - -<ul> - <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">How to create a basic HTML document</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">How to divide a webpage into logical sections</a></li> - <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">How to set up a proper structure of headings and paragraphs</a></li> -</ul> - -<h3 id="Basic_text-level_semantics">Basic text-level semantics</h3> - -<p>HTML specializes in providing semantic information for a document, so HTML answers many questions you might have about how to get your message across best in your document.</p> - -<ul> - <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">How to create list of items with HTML</a></li> - <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">How to stress or emphasize content</a></li> - <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">How to indicate that text is important</a></li> - <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">How to display computer code with HTML</a></li> - <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">How to annotate images and graphics</a></li> - <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">How to mark abbreviations and make them understandable</a></li> - <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations">How to add quotations and citations to webpages</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">How to define terms with HTML</a></li> -</ul> -</div> - -<div class="column-half"> -<h3 id="Hyperlinks">Hyperlinks</h3> - -<p>One of the main reasons for HTML is make navigation easy with {{Glossary("hyperlink", "hyperlinks")}}, which can be used in many different ways:</p> - -<ul> - <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">How to create a hyperlink</a></li> - <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">How to create a table of contents with HTML</a></li> -</ul> - -<h3 id="Images_multimedia">Images & multimedia</h3> - -<ul> - <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">How to add images to a webpage</a></li> - <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">How to add video content to a webpage</a></li> - <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">How to add audio content to a webpage</a></li> -</ul> - -<h3 id="Scripting_styling">Scripting & styling</h3> - -<p>HTML only sets up document structure. To solve presentation issues, use {{glossary("CSS")}}, or use scripting to make your page interactive.</p> - -<ul> - <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to use CSS within a webpage</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">How to use JavaScript within a webpage</a></li> -</ul> - -<h3 id="Embedded_content">Embedded content</h3> - -<ul> - <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">How to embed a webpage within another webpage</a></li> - <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">How to add Flash content within a webpage</a></li> -</ul> -</div> -</div> - -<h2 id="Uncommon_or_advanced_problems">Uncommon or advanced problems</h2> - -<p>Beyond the basics, HTML is very rich and offers advanced features for solving complex problems. These articles help you tackle the less common use cases you may face:</p> - -<div class="column-container"> -<div class="column-half"> -<h3 id="Forms">Forms</h3> - -<p>Forms are a complex HTML structure made to send data from a webpage to a web server. We encourage you to go over our <a href="/en-US/docs/Web/Guide/HTML/Forms">full dedicated guide</a>. Here is where you should start:</p> - -<ul> - <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">How to create a simple Web form</a></li> - <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">How to structure a Web form</a></li> -</ul> - -<h3 id="Tabular_information">Tabular information</h3> - -<p>Some information, called tabular data, needs to be organized into tables with columns and rows. It's one of the most complex HTML structures, and mastering it is not easy:</p> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">How to create a data spreadsheet</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">How to make HTML tables accessible</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">How to optimize HTML table rendering</a></li> -</ul> - -<h3 id="Data_representation">Data representation</h3> - -<ul> - <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">How to represent numeric values with HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">How to use data attributes</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">How to associate human readable content with arbitrary computer data structures</a></li> -</ul> - -<h3 id="Interactivity">Interactivity</h3> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">How to create collapsible content with HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">How to add context menus to a webpage</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">How to create dialog boxes with HTML</a></li> -</ul> -</div> - -<div class="column-half"> -<h3 id="Advanced_text_semantics">Advanced text semantics</h3> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">How to take control of HTML line breaking</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">How to mark changes (added and removed text)</a></li> -</ul> - -<h3 id="Advanced_images_multimedia">Advanced images & multimedia</h3> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">How to add responsive image to a webpage</a></li> - <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">How to add vector image to a webpage</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">How to add a hit map on top of an image</a></li> -</ul> - -<h3 id="Internationalization">Internationalization</h3> - -<p>HTML is not monolingual. It provides tools to handle common internationalization issues.</p> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">How to add multiple languages into a single webpage</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">How to handle Japanese ruby characters</a></li> - <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">How to display time and date with HTML</a></li> -</ul> - -<h3 id="Performance">Performance</h3> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">How to author fast-loading HTML pages</a></li> -</ul> -</div> -</div> - -<p><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span><span class="hidden"> </span> </p> diff --git a/files/it/learn/html/howto/use_data_attributes/index.html b/files/it/learn/html/howto/use_data_attributes/index.html deleted file mode 100644 index 836dda37ca..0000000000 --- a/files/it/learn/html/howto/use_data_attributes/index.html +++ /dev/null @@ -1,83 +0,0 @@ ---- -title: Uso degli attributi data -slug: Learn/HTML/Howto/Use_data_attributes -tags: - - Attributi Di Dati Personalizzati - - Esempi - - Guide - - HTML - - HTML5 - - Web -translation_of: Learn/HTML/Howto/Use_data_attributes -original_slug: Learn/HTML/Howto/Uso_attributi_data ---- -<div>{{LearnSidebar}}</div> - -<p><a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> è progettato tenendo conto dell'estensibilità per i dati che possono essere associati ad un particolare elemento anche se questi non hanno alcun significato definito. I <a href="/en-US/docs/Web/HTML/Global_attributes#attr-dataset"><code>data-* </code>attributes</a> ci permettono di memorizzare informazioni extra su elementi semantici HTML standard senza utilizzare altri hack quali l'utilizzo di attributi non standard, proprietà extra nel DOM o {{domxref("Node.setUserData()")}}.</p> - -<h2 id="Sintassi_HTML">Sintassi HTML</h2> - -<p>La sintassi è semplice. Qualsiasi attributo associato ad un qualsivoglia elemento, il cui nome inizi con <code>data-</code> è un attributo data. Facciamo l'esempio di un elemento article nel quale vogliamo memorizzare qualche informazione extra che non ha alcuna rappresentazione visuale. E' sufficiente utilizzare l'attributo <code>data</code> per ottenere ciò:</p> - -<pre class="brush: html"><article - id="electriccars" - data-columns="3" - data-index-number="12314" - data-parent="cars"> -... -</article></pre> - -<h2 id="Accesso_mediante_JavaScript">Accesso mediante JavaScript</h2> - -<p>Accedere ai valori di questi attributi mediante <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a> è molto semplice. E' possibile utilizzare {{domxref("Element.getAttribute", "getAttribute()")}} con il loro nome HTML completo, nello stesso modo in cui si accede a qualsiasi attributo di un elemento HTML, tuttavia lo standard HTML definisce un modo più semplice, un {{domxref("DOMStringMap")}} a cui è possibile accedere attraverso la proprietà {{domxref("HTMLElement.dataset", "dataset")}}.</p> - -<p>Per ottenere un attributo <code>data</code> attraverso l'oggetto <code>dataset</code>, è sufficiente ricavare la proprietà utilizzando la parte del nome dell'attributo dopo <code>data-</code> (notare che i trattini vengono converti in camelCase).</p> - -<pre class="brush: js">var article = document.getElementById('electriccars'); - -article.dataset.columns // "3" -article.dataset.indexNumber // "12314" -article.dataset.parent // "cars"</pre> - -<p>Ogni proprietà è una stringa e può essere letta e scritta. Nel caso precedente impostare <code>article.dataset.columns = 5</code> cambierebbe il valore dell'attributo a <code>"5"</code>.</p> - -<h2 id="Accesso_mediante_CSS">Accesso mediante CSS</h2> - -<p>E' importante notare che, poichè gli attributi data sono semplici attributi HTML, è possibile accedere a questi anche via <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>. Ad esempio per mostrare i dati del genitore sull'elemento article è possibile ricorrere <a href="/en-US/docs/Web/CSS/content" title="/en-US/docs/Web/CSS/content">contenuti generati</a> in CSS con la funzione {{cssxref("attr")}}:</p> - -<pre class="brush: css">article::before { - content: attr(data-parent); -}</pre> - -<p>E' possibile anche utilizzare i <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute_selectors">selettori d'attributi</a> in CSS per cambiare lo stile in base ai dati:</p> - -<pre class="brush: css">article[data-columns='3'] { - width: 400px; -} -article[data-columns='4'] { - width: 600px; -}</pre> - -<p>E' possibile vedere tutto ciò all'opera <a href="http://jsbin.com/ujiday/2/edit">in questo esempio JSBin</a>. </p> - -<p>Gli attributi data possono anche essere usati per memorizzare informazioni in costante cambiamento, come gli scores in un gioco. Utilizzare qui i selettori CSS e l'accesso via JavaScript è ciò che permette di ottenere effetti molto eleganti senza dover scrivere le proprie routine di visualizzazione. Vedi <a href="http://www.youtube.com/watch?v=On_WyUB1gOk">questo screencast</a> per vedere un esempio che utilizza contenuti generati e transizioni CSS (<a href="http://jsbin.com/atawaz/3/edit">esempio JSBin</a>).</p> - -<p>I valori degli attributi data sono stringhe. I valori numerici devono essere virgolettati affinchè la stilizzazione abbia effetto.</p> - -<h2 id="Problemi">Problemi</h2> - -<p>Non memorizzare contenuti che devono essere visibili e accessibili negli attributi data, poichè le tecnologie assistive potrebbero non accederci. In aggiunta, crawler di ricerca potrebbero non indicizzare i valori degli attributi data.</p> - -<p>Le problematiche principali da considerare sono il supporto di Internet Explorer e la performance. Internet Explorer 11+ fornisce supporto per lo standard, ma le versioni precedenti <a href="http://caniuse.com/#feat=dataset">non supportano <code>dataset</code></a>. Per supportare IE 10 e precedenti è necessario accedere agli attributi data utilizzando {{domxref("Element.getAttribute", "getAttribute()")}}. <span id="result_box" lang="it"><span>Inoltre, le</span></span> <a href="http://jsperf.com/data-dataset">prestazioni di lettura degli attributi data</a> <span lang="it"><span>rispetto alla memorizzazione di questi dati in un oggetto JS regolare sono scarse.</span></span> Inoltre, la <a href="http://jsperf.com/data-dataset">performance di lettura degli attributi data</a> comparata alla memorizzazione in un oggetto JavaScript è bassa.</p> - -<p>Tenuto conto di ciò, tuttavia, per metadati personalizzati associati ad un elemento HTML, sono un'ottima soluzione.</p> - -<p>In Firefox 49.0.2 (e probabilmente versioni antecedenti e precedenti), gli attributi data che eccedono 1022 caratteri non verranno letti da Javascript (EcmaScript 4).</p> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li>Questo articolo è stato adattato da <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Using data attributes in JavaScript and CSS on hacks.mozilla.org</a>.</li> - <li>Gli attributi personalizzati sono supportati anche da SVG 2; vedi {{domxref("SVGElement.dataset")}} e {{SVGAttr("data-*")}} per ulteriori informazioni.</li> - <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">How to use HTML5 data attributes</a> (Sitepoint)</li> -</ul> diff --git a/files/it/learn/html/index.html b/files/it/learn/html/index.html deleted file mode 100644 index c617173ffb..0000000000 --- a/files/it/learn/html/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: HTML -slug: Learn/HTML -tags: - - Apprendimento - - Argomento - - Guida - - HTML - - Introduzione - - Principianti -translation_of: Learn/HTML ---- -<div>{{IncludeSubnav("/en-US/Learn")}}</div> - -<p>{{Glossary('HTML')}} è la maggiore tecnologia del Web che definisce la struttura delle pagine web. Se stai cercando di costruire in sito web, dovresti conosce HTML.</p> - -<p>Non è difficile apprendere le basi, ma HTML è anche un' ampia tecnologia con complesse caratteristiche, per questo non esiste un percorso ben preciso di apprendimento. Suggeriamo di iniziare con il seguire pagine per apprenderne alcune tecniche e conoscenze. Muovetevi dalle basi alle tecniche più avanzate o soltanto attraverso le pagine che vi sembrano più interessanti per voi!</p> - -<div class="row topicpage-table"> -<div class="section"> -<h2 id="Le_basi">Le basi</h2> - -<p>inizia da qui se non hai alcuna familiarità con HTML:</p> - -<dl> - <dt><a href="/en-US/docs/Web/Guide/HTML/Introduction">Introduzione ad HTML</a></dt> - <dd>se vi siete mai chiesti cosa accade nel vostro Web browser, è da li che potete iniziare ad imparare.</dd> - <dt><a href="/en-US/docs/Web/Guide/HTML/Introduction">Risolvere problemi comuni con HTML</a></dt> - <dd>questa serie di articoli è qui per aiutare coloro che usano HTML per risolvere dei problemi davvero molto comuni quando si crea una pagina web:Il rapporto con i titoli, aggiungere immagini o video, enfatizzare contenuti, iniziare ad usare i moduli (ossia i form), etc.</dd> - <dt><a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">Scrivere un semplice pagina in HTML</a></dt> - <dd>in questo articolo puoi imparare a creare una semplice pagina web.</dd> - <dt><a href="/en-US/Learn/HTML/HTML_tags">Cosa sono i tag in HTML e come usarli</a></dt> - <dd>Questo articolo copre l'HTML base.Trovi cosa sono i tag e come usarli.</dd> -</dl> -</div> - -<div class="section"> -<h2 id="Nel_dettaglio">Nel dettaglio</h2> - -<p>non appena presa più familiarità con HTML, qui puoi trovare informazioni più dettagliate da esplorare:</p> - -<dl> - <dt><a href="/en-US/docs/Web/HTML/Reference">Riferimento HTML </a></dt> - <dd>Nella nostra guida di riferimento, potrai trovare dettagli su ogni singolo elemento ed attributo HTML.</dd> -</dl> -</div> -</div> diff --git a/files/it/learn/html/introduction_to_html/getting_started/index.html b/files/it/learn/html/introduction_to_html/getting_started/index.html deleted file mode 100644 index 47a4006b6c..0000000000 --- a/files/it/learn/html/introduction_to_html/getting_started/index.html +++ /dev/null @@ -1,649 +0,0 @@ ---- -title: Cominciare conl'HTML -slug: Learn/HTML/Introduction_to_HTML/Getting_started -translation_of: Learn/HTML/Introduction_to_HTML/Getting_started ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary">In questo articolo trattiamo le basi dell'HTML, per farti cominciare. Definiamo gli elementi, gli attributi e tutti gli altri termini che puoi aver sentito e vediamo come si integrano nel linguaggio. Vediamo inoltre come sono strutturati un elemento HTML e una tipica pagina e spieghiamo altre importanti caratteristiche del linguaggio. Lungo il percorso, giocheremo con un po' di HTML per mantenere viva l'attenzione.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisiti:</th> - <td>Alfabetizzazione sull'uso del computer, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, e conoscenze di base di <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>.</td> - </tr> - <tr> - <th scope="row">Obbiettivo:</th> - <td>Acquisire familiarità col linguaggio HTML e fare un po' di pratica nella scrittura di elementi HTML.</td> - </tr> - </tbody> -</table> - -<h2 id="Cos'é_l'HTML">Cos'é l'HTML?</h2> - -<p>L'{{glossary("HTML")}} (HyperText Markup Language) non è un linguaggio di programmazione ma un <em>linguaggio di markup</em>, usato per dire al browser come strutturare le pagine web. Può essere complicato o semplice, a seconda di come lo sviluppatore desidera che sia. Un file HTML è composto da una serie di {{glossary("Element", "elementi")}} usati per racchiudere o marcare parti di contenuto, così che venga mostrato in un certo modo. I {{glossary("Tag", "tag")}} che racchiudono il contenuto, possono renderlo un collegamento a un altra pagina web, formattarlo in carattere <em>italico </em>e così via. Per esempio prendiamo la seguente linea di codice:</p> - -<pre>My cat is very grumpy</pre> - -<p>Se vogliamo che la linea sia isolata, possiamo specificare che è un paragrafo, racchiudendola con due tag ({{htmlelement("p")}})</p> - -<pre class="brush: html"><p>My cat is very grumpy</p></pre> - -<h2 id="Anatomia_di_un_elemento_HTML">Anatomia di un elemento HTML</h2> - -<p>Esploriamo ulteriormente il nostro elemento.</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> - -<p>Le parti sono:</p> - -<ol> - <li><strong>Il tag di apertura:</strong> consiste nel nome dell'elemento (in questo caso, p), racchiuso tra parentesi angolari (minore e maggiore - < >); indica sia il punto dove inizia l'elemento e quando ha effetto — nel caso in esame indica l'inizio del paragrafo.</li> - <li><strong>Il tag di chiusura:</strong> uguale al tag di apertura eccetto che per la presenza di uno slash prima del nome dell'elemento; indica dove finisce l'elemento. Dimenticarsi di mettere il tag di chiusura è un tipico errore e può portare a strani risultati.</li> - <li><strong>Il contenuto:</strong> Ciò che sta fra i due tag; in questo caso è solo testo.</li> - <li><strong>L'elemento:</strong> l'insieme del tag di apertura, tag di chiusura e contenuto è detto "elemento".</li> -</ol> - -<h3 id="Active_learning_creare_il_primo_elemento_HTML">Active learning: creare il primo elemento HTML</h3> - -<p>Modifica la linea sottostante nel campo <em>Input</em> racchiudendola fra i tag <em> e </em> (inserisci il tag {{htmlelement("em")}} all'inizio della riga per <em>aprire l'elemento</em>, e {{htmlelement("/em")}} al termine della riga per <em>chiudere l'elemento</em>), questo evidenzierà il contenuto con il carattere italico. Vedrai l'effetto dei cambiamenti nel campo <em>Output</em>.</p> - -<p>Se fai un errore, puoi sempre usare il pulsante reset per ripristinare la situazione iniziale. Se sei bloccato, premi il pulsante <em>Mostra soluzione</em> per vedere la risposta.</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Codice modificabile<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Premi Esc per uscire dalla textarea (La pressione del tasto Tab, inserirà un carattere di tabulazione).<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-code<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span><span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - Questo è il mio testo. -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>controls<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span> <span class="punctuation token">/></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>solution<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"Mostra</span> soluzion<span class="punctuation token">e"</span></span> <span class="punctuation token">/></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> - -<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">html </span><span class="punctuation token">{</span> - <span class="property token">font-family</span><span class="punctuation token">:</span> <span class="string token">'Open Sans Light'</span>,Helvetica,Arial,sans-serif<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">h2 </span><span class="punctuation token">{</span> - <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span>px<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token"><span class="class token">.a11y-label</span> </span><span class="punctuation token">{</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> - <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> - <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span>rem<span class="punctuation token">;</span> - <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98%</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">body </span><span class="punctuation token">{</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> - <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.output'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> -<span class="keyword token">var</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - -<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - output<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span> - userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> - solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> - <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span> - solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Hide solution'</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span> - solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Show solution'</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="keyword token">var</span> htmlSolution <span class="operator token">=</span> <span class="string token">'<em>This is my text.</em>'</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> - -textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> -window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="comment token">// stop tab key tabbing out of textarea and</span> -<span class="comment token">// make it write a tab at the caret position instead</span> - -textarea<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> - -<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span> - <span class="keyword token">var</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span> - - <span class="keyword token">var</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span> - caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">// Update the saved userCode every time the user updates the text area code</span> - -textarea<span class="punctuation token">.</span>onkeyup <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> - <span class="comment token">// We only want to save the state when the user code is being shown,</span> - <span class="comment token">// not the solution, so that solution is not saved over the user code</span> - <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 300) }}</p> - -<h3 id="Elementi_annidati">Elementi annidati</h3> - -<p>Puoi inserire elementi dentro altri elementi: si dice annidare (<strong>nesting)</strong>. Se vogliamo sottolineare che il nostro gatto è MOLTO scontroso (VERY grumpy) possiamo racchiudere la parola "very" in un elemento {{htmlelement("strong")}}, per enfatizzarla fortemente.</p> - -<pre class="brush: html"><p>My cat is <strong>very</strong> grumpy.</p></pre> - -<p>Dovete assicurarvi che gli elementi siano annidati in modo appropriato: nell'esempio viene aperto prima l'elemento <code>p</code> e poi l'elemento <code>strong</code>, dobbiamo perciò chiudere prima l'elemento <code>strong</code> e poi l'elemento <code>p</code>. L'esempio seguente è sbagliato:</p> - -<pre class="example-bad brush: html"><p>My cat is <strong>very grumpy.</p></strong></pre> - -<p>Gli elementi devono essere aperti e chiusi correttamente perché sia chiaro se sono all'interno o all'esterno uno dell'altro. Se si mescolano, come nell'esempio qui sopra, il browser cercherà di indovinare quali erano le tue intenzioni e potrebbe darti risultati inaspettati. Quindi presta attenzione.</p> - -<h3 id="Confronto_tra_elementi_blocco_e_in_linea">Confronto tra elementi "blocco" e "in linea"</h3> - -<p>Ci sono due importanti categorie di elementi in HTML. Questi sono gli elementi di tipo blocco (block level) e elementi in linea (inline).</p> - -<ul> - <li>Gli elementi di tipo block level, occupano un'area (blocco) sulla pagina — appariranno sempre su una nuova linea e qualunque contenuto successivo apparirà anch'esso su una nuova linea. I blocchi, tendenzialmente, sono elementi strutturali della pagina che rappresentano: ad esempio paragrafi, liste, menù di navigazione, piè di pagina, ecc. Un blocco non dovrebbe venir inserito all'interno di un elemento inline, ma può essere annidato in un altro blocco.</li> - <li>Gli elementi inline sono quelli contenuti all'interno degli elementi blocco e delimitano solo piccole parti di contenuto del documento: non interi paragrafi o raggruppamenti di contenuti. Un elemento inline non determina la comparsa di una nuova linea nel documento; normalmente appariranno all'interno di un paragrafo e sono elementi tipo un collegamento ad un'altra pagina o sezione di quella in cui ci si trova ({{htmlelement("a")}}) o elementi di enfatizzazione come {{htmlelement("em")}} o {{htmlelement("strong")}}.</li> -</ul> - -<p>Prendete l'esempio seguente:</p> - -<pre class="brush: html"><em>first</em><em>second</em><em>third</em> - -<p>fourth</p><p>fifth</p><p>sixth</p> -</pre> - -<p>{{htmlelement("em")}} è un elemento in linea, che viene mostrato nell'esempio sottostante, i tre elementi saranno mostrati sulla stessa linea senza nessuno spazio a separarli.</p> - -<p>{{htmlelement("p")}} è un elemento blocco, quindi ogni elemento dichiarato con questo tag, apparirà su una nuova linea con spazi sopra e sotto (la spaziatura è dovuta alla formattazione di default (<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS styling</a>) che il browser applica ai paragrafi).</p> - -<p>{{ EmbedLiveSample('Confronto_tra_elementi_blocco_e_in_linea', 700, 200) }}</p> - -<div class="note"> -<p><strong>Nota</strong>: l'HTML5 ha ridefinito le categorie degli elementi: approfondisci in <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Categorie degli elementi di contenuto </a>(en) queste nuove definizioni sono più accurate e meno ambigue di quelle definite precedentemente, ma più complicate da capire rispetto a "blocchi" e "in linea", perciò continueremo a usarle in questa spiegazione.</p> -</div> - -<div class="blockIndicator note"> -<p><strong>Nota</strong>: I termini "block" e "inline", come usati in questo argomento , non dovrebbero essere confusi con <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">i tipi dei box CSS</a> con lo stesso nome. Anche se correlati per default, cambiare la proprietà display nei CSS non cambia la categoria dell'elemento e non modifica quali elementi potrebberso essere contenuti e quali saranno contenuti. Uno dei motivi per cui HTLM5 a deprecato l'uso di questi termini, riguarda la possibilità che questi vengano confusi.</p> -</div> - -<div class="blockIndicator note"> -<p><strong>Nota</strong>: Nelle pagine di riferimento, troverai delle liste che includono gli elementi di Blocco e quelli In linea — controlla <a href="https://developer.mozilla.org/it/docs/Web/HTML/Block-level_elements">Elementi di tipo blocco </a> e <a href="https://developer.mozilla.org/it/docs/Web/HTML/Inline_elements">Elementi in linea</a>.</p> -</div> - -<h3 id="Elementi_vuoti">Elementi vuoti</h3> - -<p>Non tutti gli elementi seguono il modello: tag di apertura, contenuto, tag di chiusura. Alcuni elementi hanno un unico tag, che è abitualmente usato per includere qualcosa nel documento in quel punto. Per esempio l'elemento {{htmlelement("img")}} inserisce un'immagine nella posizione in cui viene scritto.</p> - -<pre class="brush: html"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> - -<p>Questo fa apparire ciò che segue:</p> - -<p>{{ EmbedLiveSample('Elementi_vuoti', 700, 300) }}</p> - -<div class="note"> -<p><strong>Note</strong>: Gli elementi vuoti sono a volte chiamati <em>elementi void</em>.</p> -</div> - -<h2 id="Attributi">Attributi</h2> - -<p>Gli elementi possono avere "attributi" che appaiono così:</p> - -<p><img alt='&amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> - -<p>Gli attributi contengono informazioni extra, riguardanti l'elemento, che non appaiano nel contenuto visualizzato nella pagina. In questo caso, l'attributo <code>class</code> permette di assegnare uno o più nomi che potrà/anno poi essere usato/i per puntare alle regole di stile per quell elemento o altro.</p> - -<p>Un attributo deve avere:</p> - -<ol> - <li>uno spazio tra lui e il nome dell'elemento (o il precedente attributo, se l'elemento ha già uno o più attributi.)</li> - <li>il nome dell'attributo seguito dal segno di uguale</li> - <li>un valore racchiuso tra virgolette</li> -</ol> - -<h3 id="Active_learning_aggiunta_di_attributi_ad_un_elemento">Active learning: aggiunta di attributi ad un elemento</h3> - -<p>Un altro esempio di elemento é {{htmlelement("a")}} — che sta per "anchor" e rende il contenuto dell'elemento un collegamento ipertestuale (hyperlink). Questo elemento può avere diversi attributi, come vediamo qui sotto:</p> - -<ul> - <li><code>href:</code> Il valore di questo attributo è l'indirizzo web a cui si vuole che il link punti, ed a cui verra indirizzato il browser quando verrà cliccato. Ad esempio <code>href="https://www.mozilla.org/"</code>.</li> - <li><code>title</code>: Questo attributo, fornirà informazioni aggiuntive sul link, come ad esempio il nome della pagina a cui si verrà indirizzati. Ad esempio, <code>title="The Mozilla homepage"</code>. Questo attributo verrà mostrato come tooltip quando ci si posizionerà con il mouse sopra il link.</li> - <li><code>target</code>: L'attributo <code>target</code> indica il modo in cui si aprirà il link. Ad esempio, <code>target="_blank"</code> mostrerà il link in un nuovo tab / finestra. Se si vuol aprire il link nel/la tab/finestra corrente, basterà ometterlo.</li> -</ul> - -<p>Modifica la linea sottostante nel campo <em>Input</em> per farne un link al tuo sito preferito. Per prima cosa, aggiungi l'elemento {{htmlelement("a")}}. Poi specifica gli attributi <code>href</code> e <code>title</code>. Ed infine, specifica l'attributo <code>target</code> affinche il collegamento si aprà in un nuovo/a tab/finestra.Vedrai l'effetto dei cambiamenti nel campo <em>Output</em> mentre digiti. Dovresti vedere un link che mostrerà il valore dell'attributo <code>title</code> quando il puntatore del mouse verrà posizionato sopra e aprirà la pagina definita dal valore dell'attributo <code>href</code>. Ricorda di lasciare uno spazio tra nome dell'elemento e attributi.</p> - -<p>Se hai commesso un errore, puoi sempre tornare allo stato iniziale con il pulsante Reset. Se non riesci proprio a trovare la soluzione, premi il pulsante Mostra soluzione e vedrai la risposta.</p> - -<div class="hidden"> -<h6 id="Playable_code2">Playable code2</h6> - -<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">></span></span>Live output<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>output<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">50</span>px<span class="punctuation token">;</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>h2</span><span class="punctuation token">>Input</span></span><span class="tag token"><span class="tag token"><span class="punctuation token"></</span>h2</span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>a11y-label<span class="punctuation token">"</span></span><span class="punctuation token">></span></span>Premi Esc per uscire dall'area del codice (La pressione del tasto Tab inserirà un carattere di tabulazione).<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>code<span class="punctuation token">"</span></span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>input<span class="punctuation token">"</span></span><span class="language-css style-attr token"><span class="attr-name token"> <span class="attr-name token">style</span></span><span class="punctuation token">="</span><span class="attr-value token"><span class="property token">min-height</span><span class="punctuation token">:</span> <span class="number token">100</span>px<span class="punctuation token">;</span><span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">95%</span></span><span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="entity token" title="<">&lt;</span>p<span class="entity token" title=">">&gt;</span>Un collegamento al mio sito web preferito.<span class="entity token" title="<">&lt;</span>/p<span class="entity token" title=">">&gt;</span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>textarea</span><span class="punctuation token">></span></span> - -<span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span> <span class="attr-name token">class</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>playable-buttons<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Reset<span class="punctuation token">"</span></span><span class="punctuation token">></span></span> - <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>input</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>solution<span class="punctuation token">"</span></span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"Mostra</span> soluzion<span class="punctuation token">e"</span></span><span class="punctuation token">></span></span> -<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>div</span><span class="punctuation token">></span></span></code></pre> - -<pre class="brush: css line-numbers language-css">html { - font-family: sans-serif; -} - -<code class="language-css"><span class="selector token">h2 </span><span class="punctuation token">{</span> - <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">16</span>px<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token"><span class="class token">.a11y-label</span> </span><span class="punctuation token">{</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">0</span><span class="punctuation token">;</span> - <span class="property token">text-align</span><span class="punctuation token">:</span> right<span class="punctuation token">;</span> - <span class="property token">font-size</span><span class="punctuation token">:</span> <span class="number token">0.7</span>rem<span class="punctuation token">;</span> - <span class="property token">width</span><span class="punctuation token">:</span> <span class="number token">98%</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="selector token">body </span><span class="punctuation token">{</span> - <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">10</span>px<span class="punctuation token">;</span> - <span class="property token">background</span><span class="punctuation token">:</span> <span class="hexcode token">#f5f9fa</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span></code></pre> - -<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> textarea <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'code'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> reset <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'reset'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> solution <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">'solution'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> output <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">querySelector</span><span class="punctuation token">(</span><span class="string token">'.output'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> code <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> -<span class="keyword token">var</span> userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - -<span class="keyword token">function</span> <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - output<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -reset<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> code<span class="punctuation token">;</span> - userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> - solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Mostra soluzione'</span><span class="punctuation token">;</span> - <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -solution<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'click'</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Mostra soluzione'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> solutionEntry<span class="punctuation token">;</span> - solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Nascondi soluzione'</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> userEntry<span class="punctuation token">;</span> - solution<span class="punctuation token">.</span>value <span class="operator token">=</span> <span class="string token">'Mostra soluzione'</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="keyword token">var</span> htmlSolution <span class="operator token">=</span> <span class="string token">'<p>Un collegamento al mio <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">sito web preferito</a>.</p>'</span><span class="punctuation token">;</span> -<span class="keyword token">var</span> solutionEntry <span class="operator token">=</span> htmlSolution<span class="punctuation token">;</span> - -textarea<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'input'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> -window<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">'load'</span><span class="punctuation token">,</span> updateCode<span class="punctuation token">)</span><span class="punctuation token">;</span> - -<span class="comment token">// stop tab key tabbing out of textarea and</span> -<span class="comment token">// make it write a tab at the caret position instead</span> - -textarea<span class="punctuation token">.</span>onkeydown <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span><span class="punctuation token">{</span> - <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">9</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - e<span class="punctuation token">.</span><span class="function token">preventDefault</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="function token">insertAtCaret</span><span class="punctuation token">(</span><span class="string token">'\t'</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>keyCode <span class="operator token">===</span> <span class="number token">27</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - textarea<span class="punctuation token">.</span><span class="function token">blur</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="punctuation token">}</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span> - -<span class="keyword token">function</span> <span class="function token">insertAtCaret</span><span class="punctuation token">(</span>text<span class="punctuation token">)</span> <span class="punctuation token">{</span> - <span class="keyword token">var</span> scrollPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>scrollTop<span class="punctuation token">;</span> - <span class="keyword token">var</span> caretPos <span class="operator token">=</span> textarea<span class="punctuation token">.</span>selectionStart<span class="punctuation token">;</span> - - <span class="keyword token">var</span> front <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span><span class="number token">0</span><span class="punctuation token">,</span> caretPos<span class="punctuation token">)</span><span class="punctuation token">;</span> - <span class="keyword token">var</span> back <span class="operator token">=</span> <span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>value<span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">substring</span><span class="punctuation token">(</span>textarea<span class="punctuation token">.</span>selectionEnd<span class="punctuation token">,</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">.</span>length<span class="punctuation token">)</span><span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>value <span class="operator token">=</span> front <span class="operator token">+</span> text <span class="operator token">+</span> back<span class="punctuation token">;</span> - caretPos <span class="operator token">=</span> caretPos <span class="operator token">+</span> text<span class="punctuation token">.</span>length<span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>selectionStart <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>selectionEnd <span class="operator token">=</span> caretPos<span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span><span class="function token">focus</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> - textarea<span class="punctuation token">.</span>scrollTop <span class="operator token">=</span> scrollPos<span class="punctuation token">;</span> -<span class="punctuation token">}</span> - -<span class="comment token">// Update the saved userCode every time the user updates the text area code</span> - -textarea<span class="punctuation token">.</span>onkeyup <span class="operator token">=</span> <span class="keyword token">function</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span> - <span class="comment token">// We only want to save the state when the user code is being shown,</span> - <span class="comment token">// not the solution, so that solution is not saved over the user code</span> - <span class="keyword token">if</span><span class="punctuation token">(</span>solution<span class="punctuation token">.</span>value <span class="operator token">===</span> <span class="string token">'Show solution'</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> - userEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - <span class="punctuation token">}</span> <span class="keyword token">else</span> <span class="punctuation token">{</span> - solutionEntry <span class="operator token">=</span> textarea<span class="punctuation token">.</span>value<span class="punctuation token">;</span> - <span class="punctuation token">}</span> - - <span class="function token">updateCode</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> -<span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code2', 700, 300) }}</p> - -<h3 id="Attributi_booleani">Attributi booleani</h3> - -<p>A volte potrai trovare degli attributi senza alcun valore — questo è consentito. Questo tipo di attributi, sono chiamati attributi booleani, e possono avere un unico valore, che solitamente è uguale al nome dell'attributo stesso. Ad esempio, analizziamo l'attributo {{htmlattrxref("disabled","input")}} che può essere assegnato agli elementi input dei moduli (form) per disabilitarli (renderli grigi) e fare in modo che non possa essere introdotto alcun dato.</p> - -<pre class="brush: html"><input type="text" disabled="disabled"></pre> - -<p>Per brevità, è permesso scriverli come nell'esempio qui sotto (abbiamo incluso anche un campo non disabilitato per confronto, per darti un assaggio di cosa verrà).</p> - -<pre class="brush: html"><input type="text" disabled> - -<input type="text"> -</pre> - -<p>Entrambi ti mostreranno il seguente output:</p> - -<p>{{ EmbedLiveSample('Attributi_booleani', 700, 100) }}</p> - -<h3 id="Omettere_le_virgolette_attorno_al_valore_degli_attributi">Omettere le virgolette attorno al valore degli attributi</h3> - -<p>Quando navighi il world wild web, potrai trovare i più strani stili di mark up, inclusi i valori degli attributi senza virgolette: ciò è permesso in alcune circostanze, ma negli altri casi creerà problemi al tuo markup. Per esempio, se riprendiamo il precedente esempio del link, possiamo scriverne una versione base con solo l'attributo href, come qui:</p> - -<pre><a href=<code>https://www.mozilla.org/</code>>favourite website</a></pre> - -<p>Tuttavia, appena aggiungeremo l'attributo <code>title</code>, le cose smetteranno di funzionare</p> - -<pre class="brush: html"><a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage>favourite website</a></pre> - -<p>A questo punto il browser, fraintenderà il tuo markup, interpretando l'attributo <code>title</code> come tre attributi distinti — un attributo title con valore "The" e due attributi booleani <code>Mozilla</code> e <code>homepage</code>. Non è ovviamente ciò che si intendeva e provocherà errori o comportamenti inaspettati, come nell'esempio live sottostante. Prova a posizionare il mouse sopra il link per vedere qual é il title.</p> - -<p>{{ EmbedLiveSample('Omettere_le_virgolette_attorno_al_valore_degli_attributi', 700, 100) }}</p> - -<p>Il nostro consiglio è di mettere sempre le virgolette — Si evitano questi problemi e si ottiene anche un codice più leggibile.</p> - -<h3 id="Virgolette_singole_o_doppie">Virgolette singole o doppie?</h3> - -<p>In questo articolo noterai che sono state usate le doppie virgolette. Potrai tuttavia trovare le virgolette singole in qualche documento HTML. Si tratta esclusivamente di una questione di stile e sei libero di scegliere quelle che preferisci. Le due linee seguenti sono equivalenti.</p> - -<pre class="brush: html"><a href="http://www.example.com">A link to my example.</a> - -<a href='http://www.example.com'>A link to my example.</a></pre> - -<p>Devi però assicurarti di non mescolarle. L'esempio seguente non funzionerà.</p> - -<pre class="brush: html"><a href="http://www.example.com'>A link to my example.</a></pre> - -<p>Se hai usato un tipo di virgolette nel tuo HTML, puoi usare l'altro tipo nel valore dell'attributo senza nessun problema:</p> - -<pre class="brush: html"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> - -<p>Se vuoi annidare lo stesso tipo di virgolette, dovrai usare {{anch("Entity references: including special characters in HTML")}}.</p> - -<h2 id="Anatomia_di_un_documento_HTML"><a id="Anatomia di un documento HTML" name="Anatomia di un documento HTML">Anatomia di un documento HTML</a></h2> - -<p>That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Adesso vedremo come gli elementi sono combinati per formare una intera pagina HTML.</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>My test page</title> - </head> - <body> - <p>This is my page</p> - </body> -</html></pre> - -<p>Qui abbiamo:</p> - -<ol> - <li><code><!DOCTYPE html></code>: La doctype. Nella notte dei tempi, quando l'HTML era appena nato (about 1991/2), doctypeserano utilizzate per collegare set of rules che la pagina HTML doveva rispettare per essere considerata un buon documento HTML, il che significava determinare automaticamente gli errori e altre cose utili. In genere erano qualcosa tipo questo: - - <pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" -"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> - Tuttavia oggi, a nessuno interessa di loro e sono solo un residuo storico che deve essere incluso per far si che tutto funzioni. <code><!DOCTYPE html></code> è la più corta stringa di caratteri che rappresenta una doctype valida; è tutto ciò che serve sapere.</li> - <li><code><html></html></code>: The <code><html></code> element. Questo elemento racchiude tutta la pagina e vi si può riferire come "root", elemento radice.</li> - <li><code><head></head></code>: The <code><head></code> element. Questo elemento serve da contenitore per tutta una serie di cose da includere nel documento HTML che non sono "contenuto" da far visualizzare ai visitatori della tua pagina. Sono incluse cose come le parole chiave e la descrizione della pagina, che vuoi appaia nei risultati dei motori di ricerca, dichiarazioni CSS per formattare il contenuto, dichiarazioni dei set di caratteri e altro. Imparerai di più riguardo a questo nel prossimo articolo della serie.</li> - <li><code><meta charset="utf-8"></code>: Questo elemento imposta il set di caratteri che il tuo documento dovrebbe usare a utf-8, che include la maggior parte dei caratteri di tutti gli alfabeti umani conosciuti. Sostanzialmente può trattare qualsiasi tipo di testo tu voglia introdurre. non c'è ragione per non usare questo set di caratteri e può evitare problemi in seguito.</li> - <li><code><title></title></code>: Questo imposta il titolo della tua pagina, cioè il titolo che appare nella scheda del browser quando la pagina viene caricata e che viene usato per descrivere la pagina quando la salvi tra i preferiti (bookmark).</li> - <li><code><body></body></code>: The <code><body></code> element. Questo elemento contiene tutto ciò che vuoi mostrare agli utenti del web che visitano la pagina, sia che si tratti di testo, sia di immagini o video, giochi, tracce audio o qualsiasi altra cosa.</li> -</ol> - -<h3 id="Active_learning_Aggiungere_alcune_caratteristiche_ad_un_documento_HTML">Active learning: Aggiungere alcune caratteristiche ad un documento HTML</h3> - -<p>If you want to experiment with writing some HTML on your local computer, you can: Se vuoi esercitarti a scrivere un po' di HTML sul tuo computer, puoi:</p> - -<ol> - <li>Copiare il codice HTML della pagina di eempio qui sopra</li> - <li>creare un nuovo file nel tuo editor di testo</li> - <li>incollare il codice nel tuo nuovo file</li> - <li>salvare il file col nome <code>index.html</code></li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: Trovi questo modello di base anche nel <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p> -</div> - -<p>Adesso puoi aprire il file nel tuo browser e vedere come appare il codice, poi puoi modificare il codice e ricaricare la pagina per vedere i risultati. Inizialmente dovrebbe apparire più o meno così:</p> - -<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">Così, in questo esercizio, puoi modificare il codice localmente sul tuo computer come mostrato sopra, o puoi modificare l'esempio sotto (l'esempio modificabile rappresenta solo l'elemento <code><body></code>). Ci piacerebbe che tentassi di realizzare questi passi:</p> - -<ul> - <li>appena sotto l'apertura dell'elemento <code><body></code>, aggiungi un titolo principale per il documento; dovrebbe essere racchiuso tra il tag <code><h1></code> e il corrispondente tag di chiusura <code></h1></code>.</li> - <li>Modifica il paragrafo del contenuto per aggiungere del testo che parla di qualcosa a cui sei interessato.</li> - <li>Metti in risalto tutte le parole importanti racchiudendole tra i tag <code><strong></code> e <code></strong></code> per chiudere l'elemento.</li> - <li>Aggiungi un link nel paragrafo, come <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Active_learning_Adding_attributes_to_an_element">spiegato precedentemente</a>.</li> - <li>Aggiungi un'immagine al tuo documento, sotto il paragrafo, come <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Empty_elements">spiegato precedentemente nell'articolo. </a>Avrai dei punti bonus se riesci a lincare un'immagine diversa (una nel tuo computer o una altrove nel web).</li> -</ul> - -<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see the answer.</p> - -<div class="hidden"> -<h6 id="Playable_code3">Playable code3</h6> - -<pre class="brush: html"><h2>Input</h2> -<textarea id="code" class="input"> -&lt;p&gt;This is my page&lt;/p&gt;</textarea> -<h2>Output</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Reset" /> - <input id="solution" type="button" value="Show solution" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; -} - -.input, .output { - width: 90%; - height: 10em; - padding: 10px; - border: 1px solid #0095dd; -} - -img { - max-width: 100%; -} - -.output { - overflow: auto; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { - textarea.value = '<p>I really enjoy <strong>playing the drums</strong>. One of my favourite drummers is Neal Peart, who\ - plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\ - My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\ -<img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code3', 700, 600) }}</p> - -<h3 id="Spazio_bianco_nell'HTML">Spazio bianco nell'HTML</h3> - -<p>Nei precedenti esempi potresti aver notato che molto spazio bianco (vuoto) è incluso nel listato del codice - ciò non è affatto necessario; i due seguenti estratti sono equivalenti:</p> - -<pre class="brush: html"><p>Dogs are silly.</p> - -<p>Dogs are - silly.</p></pre> - -<p>Non importa quanti spazi usi (includendo sia il carattere spaziatura che le interruzioni di linea), il decodificatore (parser) HTML li riduce tutti ad un unico spazio quando restituisce la pagina. Quindi perché usare così tanti spazi? La risposta é per ottenere leggibilità; è molto più semplice capire cosa fa il tuo codice se lo hai formattato ordinatamente e non solo raggruppato insieme in un grande caos. Nel nostro HTML abbiamo fatto rientrare di due spazi, rispetto all'elemento contenitore, tutti gli elementi annidati. Dipende da te quale stile di formattazione usare (per esempio quanti spazi utilizzare per ogni livello di indentazione), ma devi usare qualche tipo di formattazione.</p> - -<h2 id="Elenco_di_riferimento_delle_entità_includere_caratteri_speciali_nell'HTML">Elenco di riferimento delle entità: includere caratteri speciali nell'HTML</h2> - -<p>In HTML, i caratteri <code><</code>, <code>></code>,<code>"</code>,<code>'</code> e <code>&</code> sono caratteri speciali. Sono anche parti della sintassi dell'HTML, quindi si pone il problema di come poterli includere nel proprio testo, per indicare ad esempio un "minore di", senza che venga interpretato dal parser come codice, cosa che alcuni browser potrebbero fare.</p> - -<p>Dobbiamo usare speciali codici che rappresentano quei caratteri e che possono quindi essere usati in quelle circostanze. Ognuno di questi codici (character reference) inizia con un ampersand (&) e finisce con un punto e virgola (;).</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Literal character</th> - <th scope="col">Character reference equivalent</th> - </tr> - </thead> - <tbody> - <tr> - <td><</td> - <td>&lt;</td> - </tr> - <tr> - <td>></td> - <td>&gt;</td> - </tr> - <tr> - <td>"</td> - <td>&quot;</td> - </tr> - <tr> - <td>'</td> - <td>&apos;</td> - </tr> - <tr> - <td>&</td> - <td>&amp;</td> - </tr> - </tbody> -</table> - -<p>Nell'esempio sotto, puoi vedere 2 paragrafi che parlano di tecnologie web:</p> - -<pre class="brush: html"><p>In HTML, you define a paragraph using the <p> element.</p> - -<p>In HTML, you define a paragraph using the &lt;p&gt; element.</p></pre> - -<p>Nel campo di output istantaneo sotto, puoi vedere che il primo paragrafo è sbagliato, perché il browser pensa che il secondo tag p (<p>) sia l'inizio di un nuovo paragrafo. Il secondo paragrafo funziona perché abbiamo sostituito le parentesi angolate con le entità (character references).</p> - -<p>{{ EmbedLiveSample('Elenco_di_riferimento_delle_entità_includere_caratteri_speciali_nell\'HTML', 700, 200) }}</p> - -<div class="note"> -<p><strong>Note</strong>: Una tabella di riferimento di tutte le entità disponibili nel linguaggio HTML si trova su Wikipedia: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p> -</div> - -<h2 id="Commenti_HTML">Commenti HTML</h2> - -<p>In HTML, come in molti linguaggi di programmazione, c'è la possibilità di aggiungere dei "commenti" al codice, che sono ignorati dal browser e sono pertanto invisibili per gli utenti; il loro scopo è di includere nel documento spiegazioni sul funzionamento del codice, su cosa fanno le differenti parti di codice, ecc. Tutto ciò può essere molto utile se ritorni sul codice sei mesi dopo che ci avevi lavorato e non puoi ricordare cosa avevi fatto, o se passi a qualcun'altro il tuo codice perché ci lavori.</p> - -<p>Per far si che una parte del contenuto del documento HTML sia un commento, devi includerlo tra speciali segni, che sono <code><!--</code> and <code>--></code>. Avrai per esempio:</p> - -<pre class="brush: html"><p>I'm not inside a comment</p> - -<!-- <p>I am!</p> --></pre> - -<p>Come puoi vedere qui sotto, il primo paragrafo appare nell'output , mentre il secondo no.</p> - -<p>{{ EmbedLiveSample('Commenti_HTML', 700, 100) }}</p> - -<h2 id="Riepilogo">Riepilogo</h2> - -<p>Hai raggiunto la fine dell'articolo; spero tu abbia gradito questo tour fra le più elementari regole dell'HTML. A questo punto dovresti capire come appare il linguaggio, come funziona ad un livello base e dovresti essere in grado di scrivere alcuni elementi ed attributi. Questo è il punto perfetto a cui essere adesso, perché nei seguenti articoli della serie rivedremo nei dettagli alcune delle cose già viste e introdurremo alcune nuove caratteristiche del linguaggio. Stay tuned! (Resta sintonizzato!)</p> - -<div class="note"> -<p><strong>Note</strong>: A questo punto, poiché inizi a saperne di più di HTML, potresti anche voler iniziare ad esplorare i Cascading Style Sheets, o <a href="/en-US/docs/Learn/CSS">CSS</a>, che é il linguaggio usato per dare stile e abbellire le pagine web (per esempio cambiare il colore dei font o alterare il layout della pagina). HTML e CSS sono fatti per operare insieme, come presto scoprirai.</p> -</div> - -<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> diff --git a/files/it/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/it/learn/html/introduction_to_html/html_text_fundamentals/index.html deleted file mode 100644 index 9783c3850d..0000000000 --- a/files/it/learn/html/introduction_to_html/html_text_fundamentals/index.html +++ /dev/null @@ -1,954 +0,0 @@ ---- -title: Fondamenti di testo HTML -slug: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals -translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals -original_slug: Learn/HTML/Introduction_to_HTML/fondamenti_di_testo_html ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Imparare/HTML/Introduzione_all_HTML/I_metadati_del_head_HTML", "Imparare/HTML/Introduzione_all_HTML/Creazione_di_collegamenti_ipertestuali", "Imparare/HTML/Introduzione_all_HTML")}}</div> - -<p class="summary">Una delle funzioni principali dell'HTML è quella di dare struttura e significato ai testi (conosciuto anche come {{glossary("semantica")}}) in modo che un browser possa visualizzarli correttamente. Questo articolo spiega il modo in cui l'{{glossary ("HTML")}} può essere usato per strutturare una pagina di testo aggiungendo titoli e paragrafi, enfatizzando parole, creando elenchi e altro.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisiti:</th> - <td>Conoscenza di base dell'HTML, come spiegato in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>.</td> - </tr> - <tr> - <th scope="row">Obiettivi:</th> - <td>Scopri come costruire una pagina di testo di base per dargli struttura e significato, inclusi paragrafi, intestazioni, elenchi, enfasi e citazioni.</td> - </tr> - </tbody> -</table> - -<h2 id="Le_basi_Intestazioni_e_paragrafi">Le basi: Intestazioni e paragrafi</h2> - -<p>Un testo più strutturato è composto da intestazioni e paragrafi, indipendentemente dal fatto che tu stia leggendo una storia, un giornale, un libro di testo del college, una rivista, ecc.</p> - -<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0px auto;" title="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs."></p> - -<p>Il contenuto strutturato rende l'esperienza di lettura più facile e divertente.</p> - -<p>In HTML, ogni paragrafo dev'essere racchiuso in un elemento {{htmlelement("p")}}, in questo modo:</p> - -<pre class="brush: html"><p>Sono un paragrafo, oh si lo sono.</p></pre> - -<p>Ogni intestazione dev'essere racchiuso in un elemento d'intestazione:</p> - -<pre class="brush: html"><h1>Sono il titolo della storia.</h1></pre> - -<p>Ci sono sei elementi di intestazione — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}}, e {{htmlelement("h6")}}. Ogni elemento rappresenta un livello di contenuto differente nel documento; <code><h1></code> rappresenta l'intestazione principale, <code><h2></code> rappresenta i sottotitoli, <code><h3></code> rappresenta i sub-sottovoci, e cosi via.</p> - -<h3 id="Implementazione_della_gerarchia_strutturale">Implementazione della gerarchia strutturale</h3> - -<p>Come esempio, in una storia, <code><h1></code> rappresenterebbe il titolo della storia, <code><h2></code> rappresenterebbe il titolo di ogni capitolo e <code><h3></code> rappresenterebbe le sottosezioni di ogni capitolo, e cosi via.</p> - -<pre class="brush: html"><h1>La noia schiacciante</h1> - -<p>Di Chris Mills</p> - -<h2>Capitolo 1: La notte scura</h2> - -<p>Era una notte scura. Da qualche parte, un gufo ha bubolato. La pioggia si abbetté sul ...</p> - -<h2>Capitolo 2: Il silenzio eterno</h2> - -<p>Il nostro protagonista non poteva nemmeno un sussurro uscire dalla figura oscura ...</p> - -<h3>Lo spettro parla</h3> - -<p>Erano passate altre ore, quando tutto d'un tratto lo spettro si raddrizzò e esclamò: "Per favore abbi pietà della mia anima!"</p></pre> - -<p>Dipende solo da te che cosa rappresentano esattamente gli elementi coinvolti, purché la gerarchia abbia un senso. Devi solo tenere a mente alcune buone pratiche mentre crei tali strutture:</p> - -<ul> - <li>Preferibilmente potresti usare un solo <code><h1></code> per ogni pagina — questa è l'intestazione di primo livello, e tutti gli altri siedono al di sotto di questo nella gerarchia.</li> - <li>Assicurati di utilizzare i titoli nell'ordine corretto nella gerarchia. Non usare <code><h3></code> per rappresentare i sottotitoli, seguito da <code><h2></code> per rappresentare le sub-sottovoci — questo non ha senso e porterà a risultati inaspettati.</li> - <li>Dei sei livelli di intestazione disponibili, dovresti mirare a non utilizzare più di tre per pagina, a meno che tu non ritenga sia necessario. I documenti con molti livelli (ad esempio una gerarchia di intestazione profonda) diventano ingombranti e difficili da navigare. In tali occasioni, è consigliabile diffondere il contenuto su più pagine, se possibile.</li> -</ul> - -<h3 id="Perché_abbiamo_bisogno_di_una_struttura">Perché abbiamo bisogno di una struttura?</h3> - -<p>Per rispondere a questa domanda, diamo un'occhiata a <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> — il punto di inizio del nostro esempio per questo articolo (un'ottima ricetta per l'hummus). Dovresti salvare una copia di questo file sul tuo computer, così come avrai bisogno di fare per gli esercizi più avanti. Il corpo di questo documento attualmente contiene molti pezzi di contenuto — non sono marcati in alcun modo, ma sono separati con degli a capo (Invio premuto per andare alla riga successiva).</p> - -<p>Tuttavia, quando aprirai il documento nel tuo browser, vedrai che il testo apparirà come un blocco unico!</p> - -<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;" title="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it."></p> - -<p>Questo succede perché non ci sono elemnti per dare una struttura al contenuto, così il browser non sa quale sia l'intestazione e quale sia il paragrafo. Inoltre:</p> - -<ul> - <li>Gli utenti che guardano una pagina web tendono a esaminarla velocemente per trovare contenuto rilevante, spesso leggendo solo le intestazioni da cui cominciare (di solito rimaniamo molto poco su una pagina web). Se non riescono a trovare qualcosa di utile in pochi secondi, probabilmente rimarranno frustrati e andranno da qualche altra parte.</li> - <li>i motori di ricerca che indicizzano la tua pagina considerano il contenuto delle intestazioni come importanti parole chiave per influenzare il posizionamento della pagina nella ricerca. Senza intestazioni, la tua pagina avrà una bassa performance in termini di {{glossary("SEO")}} (Search Engine Optimization).</li> - <li>Molti utenti con disabilità visiva spesso non leggono le pagine web; invece le ascoltano. Questo succede utilizzando un software chiamato <a class="external external-icon" href="http://en.wikipedia.org/wiki/Screen_reader" title="screen readers">screen reader</a>. Questo software fornisce dei modi per accedere velocemente ad un dato contenuto testuale. Tra le varie tecniche, forniscono uno schema del documento attraverso la lettura delle intestazioni, permettendo agli utenti di trovare velocemente le informazioni di cui hanno bisogno. Se le intestazioni non sono disponibili, saranno costretti ad ascoltare la lettura dell'intero documento.</li> - <li>Per dare uno stile al contenuto con {{glossary("CSS")}}, o fargli fare cose interessanti con {{glossary("JavaScript")}}, hai bisogno di avere elementi intorno al contenuto, in modo che CSS/JavaScript possano lavorarci sopra efficacemente.</li> -</ul> - -<p>Abbiamo quindi bisogno di dare al nostro contenuto un markup strutturale.</p> - -<h3 id="Apprendimento_attivo_Dare_una_struttura_al_nostro_contenuto">Apprendimento attivo: Dare una struttura al nostro contenuto</h3> - -<p>Approfondiamo con un esempio. Nell'esempio qui sotto, aggiungi degli elementi al testo nel campo <em>Input</em> in modo che appaia come un'intestazione e due paragrafi nel campo <em>Output</em>.</p> - -<p>In caso di errore, puoi sempre ripartire da zero usando il pulsante <em>Reset</em>. Se ti blocchi, premi il pulsante <em>Show solution</em> per vedere la risposta.</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><h2>Live output</h2> - -<div class="output" style="min-height: 50px;"> -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="input" style="min-height: 100px; width: 95%">My short story I am a policewoman and my name is Trish. - -My legs are made of cardboard and I am married to a fish.</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<h1>My short story</h1>\n<p>I am a policewoman and my name is Trish.</p>\n<p>My legs are made of cardboard and I am married to a fish.</p>'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Perché_abbiamo_bisogno_delle_semantiche">Perché abbiamo bisogno delle semantiche?</h3> - -<p>Le semantiche vengono utilizzate continuamente intorno a noi — ci affidiamo all'esperienza per predire la funzione degli oggetti che usiamo tutti i giorni; quando vediamo qualcosa, sappiamo quale sarà la sua funzione. Così, per esempio, ci aspettiamo che una luce rossa del semaforo significhi "fermati", e una luce verde significhi "vai". Le cose diventano complicate rapidamente se vengono applicate le semantiche sbagliate (forse qualche Paese usa il rosso per dire "vai"? Spero di no.)</p> - -<p>Sulla stessa falsariga, dobbiamo essere sicuri che stiamo usando gli elementi giusti, per dare al nostro contenuto il giusto significato, funzione o aspetto. In questo contesto l'elemento {{htmlelement("h1")}} è anche un elemento semantico, che conferisce al testo che racchiude il ruolo (o il significato) di "intestazione di primo livello sulla tua pagina".</p> - -<pre class="brush: html"><h1>This is a top level heading</h1></pre> - -<p>Per impostazione predefinita, il browser darà al suo font una dimensione grande per farlo apparire come un'intestazione (anche se potresti dargli uno stile per farlo apparire in qualsiasi modo tu voglia usando CSS). E' ancora più importante osservare che il suo valore semantico verrà usato in molti modi, ad esempio dai motori di ricerca e dagli screen reader (come spiegato in precedenza).</p> - -<p>Dall'atro lato, potresti <em>far sembrare</em> qualsiasi elemento come un'intestazione di primo livello. Considera quanto segue:</p> - -<pre class="brush: html"><span style="font-size: 32px; margin: 21px 0;">Is this a top level heading?</span></pre> - -<p>Questo è un elemento {{htmlelement("span")}}. non ha semantiche. Lo usi per includere contenuto quando vuoi applicargli il CSS (o lavorarci con JavaScript) senza dargli alcun ulteriore significato (troverai di più su questo argomento più avanti nel corso). Abbiamo applicato del CSS per farlo apparire come un'intestazione di primo livello, m dal momento che non ha valore semantico non avrà nessuna delle qualità extra descritte sopra. E' una buona idea usare per questo scopo l'HTML appropriato.</p> - -<h2 id="Liste">Liste</h2> - -<p>Ora rivolgiamo la nostra attenzione alle liste. Le liste sono ovunque nella nostra vita — dalla lista della spesa alle indicazioni che in maniera inconscia segui per tornare a casa tutti i giorni, alla lista di istruzioni che stai seguendo in questi tutorial! Le liste sono ovunque anche sul Web, e abbiamo tre tipi differenti di cui occuparci.</p> - -<h3 id="Puntata">Puntata</h3> - -<p>La lista puntanta viene utilizzata come mark up per elementi di cui l'ordine non è importante — prepara la tua lista della spesa.</p> - -<pre>milk -eggs -bread -hummus</pre> - -<p>Ogni lista puntata comincia con un {{htmlelement("ul")}} che racchiude la lista:</p> - -<pre class="brush: html"><ul> -milk -eggs -bread -hummus -</ul></pre> - -<p>L'ultimo step è racchiudere ogni elemento della lista con {{htmlelement("li")}} (list item):</p> - -<pre class="brush: html"><ul> - <li>milk</li> - <li>eggs</li> - <li>bread</li> - <li>hummus</li> -</ul></pre> - -<h4 id="Apprendimento_attivo_prepara_la_tua_lista_a_punti">Apprendimento attivo: prepara la tua lista a punti</h4> - -<p>Prova a editare in diretta l'esempio sottostante per creare la tua lista puntata in HTML.</p> - -<div class="hidden"> -<h6 id="Playable_code_2">Playable code</h6> - -<pre class="brush: html"><h2>Live output</h2> - -<div class="output" style="min-height: 50px;"> -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="input" style="min-height: 100px; width: 95%">milk -eggs -bread -hummus</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<ul>\n<li>milk</li>\n<li>eggs</li>\n<li>bread</li>\n<li>hummus</li>\n</ul>'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Numerata">Numerata</h3> - -<p>La lista numerata viene utilizzata per elementi di cui l'ordine è importante — ecco un esempio:</p> - -<pre>Drive to the end of the road -Turn right -Go straight across the first two roundabouts -Turn left at the third roundabout -The school is on your right, 300 meters up the road</pre> - -<p>La struttura è la stessa della lista puntata ad eccezione che chiuderai la lista di elementi con {{htmlelement("ol")}} element, al posto del <code><ul></code>:</p> - -<pre class="brush: html"><ol> - <li>Drive to the end of the road</li> - <li>Turn right</li> - <li>Go straight across the first two roundabouts</li> - <li>Turn left at the third roundabout</li> - <li>The school is on your right, 300 meters up the road</li> -</ol></pre> - -<h4 id="Active_learning_Marking_up_an_ordered_list">Active learning: Marking up an ordered list</h4> - -<p>Try editing the live sample below to create your very own HTML ordered list.</p> - -<div class="hidden"> -<h6 id="Playable_code_3">Playable code</h6> - -<pre class="brush: html"><h2>Live output</h2> - -<div class="output" style="min-height: 50px;"> -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="input" style="min-height: 200px; width: 95%">Drive to the end of the road -Turn right -Go straight across the first two roundabouts -Turn left at the third roundabout -The school is on your right, 300 meters up the road</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<ol>\n<li>Drive to the end of the road</li>\n<li>Turn right</li>\n<li>Go straight across the first two roundabouts</li>\n<li>Turn left at the third roundabout</li>\n<li>The school is on your right, 300 meters up the road</li>\n</ol>'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Active_learning_Marking_up_our_recipe_page">Active learning: Marking up our recipe page</h3> - -<p>So at this point in the article, you have all the information you need to mark up our recipe page example. You can choose to either save a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> starting file and do the work there, or do it in the editable example below. Doing it locally will probably be better, as then you'll get to save the work you are doing, whereas if you fill it in to the editable example, it will be lost the next time you open the page. Both have pros and cons.</p> - -<div class="hidden"> -<h6 id="Playable_code_4">Playable code</h6> - -<pre class="brush: html"><h2>Live output</h2> - -<div class="output" style="min-height: 50px;"> -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="input" style="min-height: 200px; width: 95%">Quick hummus recipe - - This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years. - - Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads. - - Ingredients - - 1 can (400g) of chick peas (garbanzo beans) - 175g of tahini - 6 sundried tomatoes - Half a red pepper - A pinch of cayenne pepper - 1 clove of garlic - A dash of olive oil - - Instructions - - Remove the skin from the garlic, and chop coarsely - Remove all the seeds and stalk from the pepper, and chop coarsely - Add all the ingredients into a food processor - Process all the ingredients into a paste. - If you want a coarse "chunky" hummus, process it for a short time - If you want a smooth hummus, process it for a longer time - - For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you. - - Storage - - Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it. - - Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<h1>Quick hummous recipe</h1>\n\n<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.</p>\n\n<p>Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is very tasty with salad, grilled meats and pitta breads.</p>\n\n<h2>Ingredients</h2>\n\n<ul>\n<li>1 can (400g) of chick peas (garbanzo beans)</li>\n<li>175g of tahini</li>\n<li>6 sundried tomatoes</li>\n<li>Half a red pepper</li>\n<li>A pinch of cayenne pepper</li>\n<li>1 clove of garlic</li>\n<li>A dash of olive oil</li>\n</ul>\n\n<h2>Instructions</h2>\n\n<ol>\n<li>Remove the skin from the garlic, and chop coarsely.</li>\n<li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li>\n<li>Add all the ingredients into a food processor.</li>\n<li>Process all the ingredients into a paste.</li>\n<li>If you want a coarse "chunky" hummus, process it for a short time.</li>\n<li>If you want a smooth hummus, process it for a longer time.</li>\n</ol>\n\n<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>\n\n<h2>Storage</h2>\n\n<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you\'ve made it. If it starts to become fizzy, you should definitely discard it.</p>\n\n<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}</p> - -<p>If you get stuck, you can always press the <em>Show solution</em> button, or check out our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> example on our github repo.</p> - -<h3 id="Nesting_lists">Nesting lists</h3> - -<p>It is perfectly ok to nest one list inside another one. You might want to have some sub-bullets sitting below a top level bullet. Let's take the second list from our recipe example:</p> - -<pre class="brush: html"><ol> - <li>Remove the skin from the garlic, and chop coarsely.</li> - <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li> - <li>Add all the ingredients into a food processor.</li> - <li>Process all the ingredients into a paste.</li> - <li>If you want a coarse "chunky" hummus, process it for a short time.</li> - <li>If you want a smooth hummus, process it for a longer time.</li> -</ol></pre> - -<p>Since the last two bullets are very closely related to the one before them (they read like sub-instructions or choices that fit below that bullet), it might make sense to nest them inside their own unordered list, and put that list inside the current fourth bullet. This would look like so:</p> - -<pre class="brush: html"><ol> - <li>Remove the skin from the garlic, and chop coarsely.</li> - <li>Remove all the seeds and stalk from the pepper, and chop coarsely.</li> - <li>Add all the ingredients into a food processor.</li> - <li>Process all the ingredients into a paste. - <ul> - <li>If you want a coarse "chunky" hummus, process it for a short time.</li> - <li>If you want a smooth hummus, process it for a longer time.</li> - </ul> - </li> -</ol></pre> - -<p>Try going back to the previous active learning example and updating the second list like this.</p> - -<h2 id="Emphasis_and_importance">Emphasis and importance</h2> - -<p>In human language, we often emphasise certain words to alter the meaning of a sentence, and we often want to mark certain words as important or different in some way. HTML provides various semantic elements to allow us to mark up textual content with such effects, and in this section, we'll look at a few of the most common ones.</p> - -<h3 id="Emphasis">Emphasis</h3> - -<p>When we want to add emphasis in spoken language, we <em>stress</em> certain words, subtly altering the meaning of what we are saying. Similarly, in written language we tend to stress words by putting them in italics. For example, the following two sentences have different meanings.</p> - -<p>I am glad you weren't late.</p> - -<p>I am <em>glad</em> you weren't <em>late</em>.</p> - -<p>The first sentence sounds genuinely relieved that the person wasn't late. In contrast, the second one sounds sarcastic or passive-aggressive, expressing annoyance that the person arrived a bit late.</p> - -<p>In HTML we use the {{htmlelement("em")}} (emphasis) element to mark up such instances. As well as making the document more interesting to read, these are recognised by screen readers and spoken out in a different tone of voice. Browsers style this as italic by default, but you shouldn't use this tag purely to get italic styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps an {{htmlelement("i")}} element (see below.)</p> - -<pre class="brush: html"><p>I am <em>glad</em> you weren't <em>late</em>.</p></pre> - -<h3 id="Strong_importance">Strong importance</h3> - -<p>To emphasize important words, we tend to stress them in spoken language and <strong>bold</strong> them in written language. For example:</p> - -<p>This liquid is <strong>highly toxic</strong>.</p> - -<p>I am counting on you. <strong>Do not</strong> be late!</p> - -<p>In HTML we use the {{htmlelement("strong")}} (strong importance) element to mark up such instances. As well as making the document more useful, again these are recognized by screen readers and spoken in a different tone of voice. Browsers style this as bold text by default, but you shouldn't use this tag purely to get bold styling. To do that, you'd use a {{htmlelement("span")}} element and some CSS, or perhaps a {{htmlelement("b")}} element (see below.)</p> - -<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong>.</p> - -<p>I am counting on you. <strong>Do not</strong> be late!</p></pre> - -<p>You can nest strong and emphasis inside one another if desired:</p> - -<pre class="brush: html"><p>This liquid is <strong>highly toxic</strong> — -if you drink it, <strong>you may <em>die</em></strong>.</p></pre> - -<h3 id="Active_learning_Lets_be_important!">Active learning: Let's be important!</h3> - -<p>In this active learning section, we have provided an editable example. Inside it, we'd like you to try adding emphasis and strong importance to the words you think need them, just to have some practice.</p> - -<div class="hidden"> -<h6 id="Playable_code_5">Playable code</h6> - -<pre class="brush: html"><h2>Live output</h2> - -<div class="output" style="min-height: 50px;"> -</div> - -<h2>Editable code</h2> -<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> - -<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Important notice</h1> -<p>On Sunday January 9th 2010, a gang of goths were - spotted stealing several garden gnomes from a - shopping center in downtown Milwaukee. They were - all wearing green jumpsuits and silly hats, and - seemed to be having a whale of a time. If anyone - has any information about this incident, please - contact the police now.</p></textarea> - -<div class="playable-buttons"> - <input id="reset" type="button" value="Reset"> - <input id="solution" type="button" value="Show solution"> -</div></pre> - -<pre class="brush: css">html { - font-family: sans-serif; -} - -h2 { - font-size: 16px; -} - -.a11y-label { - margin: 0; - text-align: right; - font-size: 0.7rem; - width: 98%; -} - -body { - margin: 10px; - background: #f5f9fa; -}</pre> - -<pre class="brush: js">var textarea = document.getElementById('code'); -var reset = document.getElementById('reset'); -var solution = document.getElementById('solution'); -var output = document.querySelector('.output'); -var code = textarea.value; -var userEntry = textarea.value; - -function updateCode() { - output.innerHTML = textarea.value; -} - -reset.addEventListener('click', function() { - textarea.value = code; - userEntry = textarea.value; - solutionEntry = htmlSolution; - solution.value = 'Show solution'; - updateCode(); -}); - -solution.addEventListener('click', function() { - if(solution.value === 'Show solution') { - textarea.value = solutionEntry; - solution.value = 'Hide solution'; - } else { - textarea.value = userEntry; - solution.value = 'Show solution'; - } - updateCode(); -}); - -var htmlSolution = '<h1>Important notice</h1>\n<p>On <strong>Sunday January 9th 2010</strong>, a gang of <em>goths</em> were spotted stealing <strong><em>several</em> garden gnomes</strong> from a shopping center in downtown <strong>Milwaukee</strong>. They were all wearing <em>green jumpsuits</em> and <em>silly hats</em>, and seemed to be having a whale of a time. If anyone has <strong>any</strong> information about this incident, please contact the police <strong>now</strong>.</p>'; -var solutionEntry = htmlSolution; - -textarea.addEventListener('input', updateCode); -window.addEventListener('load', updateCode); - -// stop tab key tabbing out of textarea and -// make it write a tab at the caret position instead - -textarea.onkeydown = function(e){ - if (e.keyCode === 9) { - e.preventDefault(); - insertAtCaret('\t'); - } - - if (e.keyCode === 27) { - textarea.blur(); - } -}; - -function insertAtCaret(text) { - var scrollPos = textarea.scrollTop; - var caretPos = textarea.selectionStart; - - var front = (textarea.value).substring(0, caretPos); - var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); - textarea.value = front + text + back; - caretPos = caretPos + text.length; - textarea.selectionStart = caretPos; - textarea.selectionEnd = caretPos; - textarea.focus(); - textarea.scrollTop = scrollPos; -} - -// Update the saved userCode every time the user updates the text area code - -textarea.onkeyup = function(){ - // We only want to save the state when the user code is being shown, - // not the solution, so that solution is not saved over the user code - if(solution.value === 'Show solution') { - userEntry = textarea.value; - } else { - solutionEntry = textarea.value; - } - - updateCode(); -};</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> - -<h3 id="Italic_bold_underline...">Italic, bold, underline...</h3> - -<p>The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as <strong>presentational elements</strong> and should no longer be used, because as we've seen before, semantics is so important to accessibility, SEO, etc.</p> - -<p>HTML5 redefined <code><b></code>, <code><i></code> and <code><u></code> with new, somewhat confusing, semantic roles.</p> - -<p>Here's the best rule of thumb: it's likely appropriate to use <code><b></code>, <code><i></code>, or <code><u></code> to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.</p> - -<ul> - <li>{{HTMLElement('i')}} is used to convey a meaning traditionally conveyed by italic: Foreign words, taxonomic designation, technical terms, a thought...</li> - <li>{{HTMLElement('b')}} is used to convey a meaning traditionally conveyed by bold: Key words, product names, lead sentence...</li> - <li>{{HTMLElement('u')}} is used to convey a meaning traditionally conveyed by underline: Proper name, misspelling...</li> -</ul> - -<div class="note"> -<p>A kind warning about underline: <strong>People strongly associate underlining with hyperlinks.</strong> Therefore, on the Web, it's best to underline only links. Use the <code><u></code> element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the Web. The example below illustrates how it can be done.</p> -</div> - -<pre class="brush: html"><!-- scientific names --> -<p> - The Ruby-throated Hummingbird (<i>Archilochus colubris</i>) - is the most common hummingbird in Eastern North America. -</p> - -<!-- foreign words --> -<p> - The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>, - <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>. -</p> - -<!-- a known misspelling --> -<p> - Someday I'll learn how to <u>spel</u> better. -</p> - -<!-- Highlight keywords in a set of instructions --> -<ol> - <li> - <b>Slice</b> two pieces of bread off the loaf. - </li> - <li> - <b>Insert</b> a tomato slice and a leaf of - lettuce between the slices of bread. - </li> -</ol></pre> - -<h2 id="Summary">Summary</h2> - -<p>That's it for now! This article should have given you a good idea of how to start marking up text in HTML, and introduced you to some of the most important elements in this area. There are a lot more semantic elements to cover in this area, and we'll look at a lot more in our 'More Semantic Elements' article, later on in the course. In the next article, we'll be looking in detail at how to <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">create hyperlinks</a>, possibly the most important element on the Web.</p> - -<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> - -<h2 id="In_this_module">In this module</h2> - -<ul> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> - <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> -</ul> diff --git a/files/it/learn/html/introduction_to_html/index.html b/files/it/learn/html/introduction_to_html/index.html deleted file mode 100644 index 459e8e1302..0000000000 --- a/files/it/learn/html/introduction_to_html/index.html +++ /dev/null @@ -1,67 +0,0 @@ ---- -title: Introduzione a HTML -slug: Learn/HTML/Introduction_to_HTML -tags: - - CodingScripting - - HTML - - Introduction to HTML - - Landing - - Links - - NeedsTranslation - - Structure - - Text - - TopicStub - - head - - semantics -translation_of: Learn/HTML/Introduction_to_HTML ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">Al suo centro, {{glossary("HTML")}} è un linguaggio abbastanza semplice composto da elementi, che possono essere applicati a parti di testo per dare loro un significato diverso in un documento (è un paragrafo? E' un elenco puntato? E' parte di una tabella?). Struttura un documento in sezioni logiche (Ha un'intestazione? Ha tre colonne di contenuto? Ha un menù di navigazione?). Incorpora contenuto come immagini e video in una pagina. Questo modulo introdurrà i primi due dI questi argomenti introducendo i concetti fondamentali e sintassi di cui tu hai bisogno per comprendere l'HTML.</p> - -<h2 id="Prerequisiti">Prerequisiti</h2> - -<p>Prima di iniziare questa sezione non hai bisogno di nessuna nozione di HTML, ma dovresti avere una buona familiarità nell'uso dei computer e nell'uso del web passivo(per esempio guardare il contenuto o usarlo). Dovresti avere un normale ambiente di lavoro come spiegato nel dettaglio in <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installare il software base</a> e capire come creare e gestire file, come spiegato in <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Lavorare con i file</a> — entrambi fanno parte della nostra guida per principianti <a href="https://developer.mozilla.org/it/docs/Learn/Getting_started_with_the_web">Inizia con il web</a>.</p> - -<div class="note"> -<p><strong>Note</strong>: Se stai lavorando su un computer/tablet o un altro device dove non hai la possibilità di creare dei file, potresti provare (almeno la maggior parte) degli esempi di codice in un programma online come <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Guida">Guida</h2> - -<p>Questo modulo contiene i seguenti articoli, che ti guideranno nella teoria di base dell'HTML e ti daranno un'ampia opportunità per testare alcune abilità.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Iniziare con HTML</a></dt> - <dd><span id="result_box" lang="it" style="background-color: transparent; color: #222222; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; min-height: 89px; position: relative; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal; word-wrap: break-word;"><span style="color: #222222; font-size: 16px; min-height: 0px; position: static; word-wrap: break-word;">Copre le basi assolute dell'HTML, per iniziare: definiamo elementi, attributi e tutti gli altri termini importanti che potresti aver sentito e dove si adattano alla lingua.</span> <span style="color: #222222; font-size: 16px; min-height: 0px; position: static; word-wrap: break-word;">Mostriamo anche come è strutturato un elemento HTML, come è strutturata una tipica pagina HTML e spieghiamo altre importanti funzionalità linguistiche di base.</span> <span style="color: #222222; font-size: 16px; min-height: 0px; position: static; word-wrap: break-word;">Lungo la strada, avremo un gioco con HTML, per interessarti!</span></span></dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">Cosa c'è nell'intestazione del documento? Metadati in HTML</a></dt> - <dd><span id="result_box" lang="it" style="background-color: transparent; color: #222222; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; min-height: 89px; position: relative; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal; word-wrap: break-word;"><span style="color: #222222; font-size: 16px; min-height: 0px; position: static; word-wrap: break-word;">La testa di un documento HTML è la parte che non viene visualizzata nel browser Web quando la pagina viene caricata.</span> <span style="color: #222222; font-size: 16px; min-height: 0px; position: static; word-wrap: break-word;">Contiene informazioni come la pagina {{htmlelement ("title")}}, i collegamenti a {{glossary ("CSS")}} (se vuoi dare uno stile al contenuto HTML con CSS), link a favicon personalizzate e metadati</span> <span style="color: #222222; font-size: 16px; min-height: 0px; position: static; word-wrap: break-word;">(che sono dati sull'HTML, come chi l'ha scritto, e parole chiave importanti che descrivono il documento).</span></span></dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fondamenti del testo HTML</a></dt> - <dd><span style="background-color: transparent; color: #222222; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; min-height: 0px; position: static; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal; word-wrap: break-word;">Uno dei principali lavori dell'HTML è dare significato al testo (conosciuto anche come semantica), in modo che il browser sappia come visualizzarlo correttamente.</span><span style="background-color: transparent; color: #222222; display: inline !important; float: none; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal; word-wrap: break-word;"> </span><span style="background-color: transparent; color: #222222; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; min-height: 0px; position: static; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal; word-wrap: break-word;">Questo articolo esamina come utilizzare l'HTML per suddividere un blocco di testo in una struttura di intestazioni e paragrafi, aggiungere enfasi / importanza alle parole, creare elenchi e altro.</span></dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creare collegamenti ipertestuali</a></dt> - <dd>I collegamenti ipertestuali sono davvero importanti: sono ciò che rende il Web una rete. Questo articolo mostra la sintassi richiesta per effettuare un collegamento e tratta delle migliori prassi inerenti ai collegamenti.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formattazione avanzata del testo</a></dt> - <dd>Ci sono molti altri elementi in HTML adibiti per la formattazione del testo che non troviamo nell'articolo <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">fondamentali del testo HTML</a>.Questi elementi sono meno conosciuti tuttavia risulta utile conoscerli. Qui imparerai come creare delle citazioni, elenchi puntati, codice del computer e altro relativo al testo come pedici e apici, informazioni di contatto e altro ancora.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Struttura del documento e del sito</a></dt> - <dd>Come per la definizione di parti individuale della tua pagina (come "un paragrafo" o "un'immagine", l'HTML è anche usato per definire aree del tuo sito (come "l'intestazione", "il menù di navigazione" o "la colonna di contenuto principale"). Questo articolo spiega come creare la struttura base di un sito e come trascriverla in codice HTML.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Correggere gli errori in HTML</a></dt> - <dd>Scrivere codice HTML è divertente ma se qualcosa andasse storto e tu non potessi lavorare per comprendere ciò che hai sbagliato, cosa faresti? Questo articolo ti introducerà alcuni utili strumenti che ti possono aiutare.</dd> -</dl> - -<h2 id="Valutazioni">Valutazioni</h2> - -<p>I seguenti test valuteranno la tua comprensione delle basi del codice HTML spiegate nelle guide soprascritte.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Scrivere una lettera</a></dt> - <dd>Tutti noi dobbiamo imparare a scrivere una lettera prima o poi; e questo è anche un utile esempio per valutare le tue competenze di formattazione del testo. In questo test, infatti, ti verrà data una lettera da creare.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Strutturare una pagina di contenuti</a></dt> - <dd>Questo test valuterà le tue abilità sull'uso dell'HTML per strutturare una semplice pagina di contenuti, contenente un header, un footer, un menù di navigazione, contenuto principale e una sidebar.</dd> -</dl> - -<h2 id="Guarda_anche">Guarda anche</h2> - -<dl> - <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Alfabetizzazione web di base 1</a></dt> - <dd>Un corso eccellente della fondazione Mozilla che esplora e testa molte delle competenze introdotte nel modulo <em>Introduzione all'HTML.</em> La lettura, la scrittura e la partecipazione sul web vi diventeranno famigliari in questa sesta parte del modulo. Scoprirete su cosa il mondo del web è fondato attraverso produzione e collaborazione.</dd> -</dl> diff --git a/files/it/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/it/learn/html/introduction_to_html/the_head_metadata_in_html/index.html deleted file mode 100644 index 0b05f30ee0..0000000000 --- a/files/it/learn/html/introduction_to_html/the_head_metadata_in_html/index.html +++ /dev/null @@ -1,266 +0,0 @@ ---- -title: Cosa c'è nella head? Metadata in HTML -slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML -tags: - - Guida - - HTML - - Principiante - - favicon - - head - - lang - - metadata -translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML -original_slug: Learn/HTML/Introduction_to_HTML/I_metadata_nella_head_in_HTML ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div> - -<p class="summary">La {{glossary("Head", "head")}} di un documento HTML è la parte che non viene visualizzata nel browser quando la pagina viene caricata. Contiene informazioni come il {{htmlelement("title")}}, della pagina, i link ai {{glossary("CSS")}} (se vuoi applicare uno stile al contenuto tramite i CSS), i link alle favicons personalizzate, e altri metadata (dati relativi all'HTML, come chi lo ha scritto, o importanti parole chiave che descrivono il documento). In questo articolo vedremo tutto ciò e anche altro, per darti una buona base del markup e di altro codice che dovrebbe trovarsi nella head.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisiti:</th> - <td>Familiarità con le basi di HTML, spiegate in <a href="/it/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Cominciare con l'HTML</a>.</td> - </tr> - <tr> - <th scope="row">Obbiettivi:</th> - <td>Conoscere la head dell'HTML, qual è il suo scopo, i più importanti elementi che può contenere e quale effetto può avere sul documento HTML.</td> - </tr> - </tbody> -</table> - -<h2 id="Cosa_è_la_head">Cosa è la head?</h2> - -<p>Riprendiamo il semplice esempio di documento HTML che abbiamo visto nell'articolo precedente.</p> - -<pre class="brush: html"><!DOCTYPE html> -<html> - <head> - <meta charset="utf-8"> - <title>My test page</title> - </head> - <body> - <p>This is my page</p> - </body> -</html></pre> - -<p>La head HTML è il contenuto dell'elemento {{htmlelement("head")}} — diversamente dal contenuto dell'elemento {{htmlelement("body")}} (che è visualizzato quando la pagina viene caricata dal browser), il contenuto della head non viene visualizzato nella pagina. Invece, il compito della head è di contenere dei {{glossary("Metadata", "metadata")}} relativi al documento. Nell'esempio precedente, la head è piuttosto ridotta:</p> - -<pre class="brush: html"><head> - <meta charset="utf-8"> - <title>My test page</title> -</head></pre> - -<p>In pagine più corpose tuttavia, la head può diventare piuttosto piena di elementi — prova ad andare in qualcuno dei tuoi siti favoriti e usando i <a href="/en-US/docs/Learn/Discover_browser_developer_tools">developer tools</a> esamina il contenuto della loro head. Il nostro scopo qui, non è di mostrarti l'uso di qualsiasi cosa sia possibile mettere nella head, ma piuttosto di insegnarti come usare le cose più ovvie da mettere nella head e fare in modo che tu abbia un po' di familiarità con quelle. Andiamo a cominciare.</p> - -<h2 id="Aggiungere_un_title">Aggiungere un <code>title</code></h2> - -<p>Abbiamo già visto l'elemento {{htmlelement("title")}} in azione — può essere usato per aggiungere un titolo ad un documento. Ciò può confondere conl'elemento {{htmlelement("h1")}} che è usato per aggiungere l'intestazione principale al contenuto del body — a cui ci si riferisce lo stesso come al titolo della pagina; ma sono due cose differenti!</p> - -<ul> - <li>L'elemento {{htmlelement("h1")}} appare nella pagina quando è caricata dal browser — in generale dovrebbe essere usato una sola volta per ogni pagina, per contrassegnare il titolo del contenuto della pagina (il titolo della storia, o l'intestazione delle notizie o qualsiasi cosa sia appropriata al tuo scopo).</li> - <li>L'elemento {{htmlelement("title")}} è il metadata che rappresenta il titolo di tutto il documento HTML (non solo del contenuto del documento).</li> -</ul> - -<h3 id="Active_learning_esaminare_un_sempice_esempio.">Active learning: esaminare un sempice esempio.</h3> - -<ol> - <li>Per avviare questo active learning, ci piacerebbe che andassi al nostro repositori Github e scaricassi una copia della nostra pagina <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>. Per farlo puoi usare uno dei due modi seguenti: - - <ol> - <li>copiare ed incollare il codice della pagina in un nuovo file di testo creato col tuo editor e salvarlo in un posto adatto;</li> - <li>Premere il tasto "Raw" nella pagina, scegliere <em>File > Save Page As...</em> nel menù del browser e scegliere un posto in cui salvarlo.</li> - </ol> - </li> - <li>Adesso apri il file nel browser. Dovresti vedere questo: - <p><img alt="A simple web page with the title set to <title> element, and the <h1> set to <h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">Adesso dovrebbe essere chiaro dove appare il contenuto dell'elemento <code><h1></code> e dove appare il contenutodell'elemento <code><title></code>!</p> - </li> - <li>Dovresti anche provare as aprire il codice nell'editor, modificare il contenuto di questi elementi, ricaricare la pagina nel browser. Adesso puoi divertiti un po'!</li> -</ol> - -<p>Il contenuto dell'elemento <code><title></code> è anche usato in altri modi. Per esempio, se provi a salvare la pagina nei preferiti (<em>Bookmarks > Bookmark This Page</em>, in Firefox), vedrai il contenuto del <code><title></code> come nome suggerito per il segnalibro.</p> - -<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p> - -<p>Il <code><title></code> è usato anche nelle ricerche, come vedrai più avanti.</p> - -<h2 id="Metadata_lelemento_<meta>">Metadata: l'elemento <meta></h2> - -<p>I metadati sono dati che descrivono altri dati. In HTML c'è un modo "ufficiale" per aggiungere metadata al documento: l'elemento {{htmlelement("meta")}}. Inoltre, le altre cose di cui parliamo in questo articolo possono essere pensate anch'esse come metadata. Ci sono molti tipi di elementi <code><meta></code> che possono essere inseriti nella <head> del documento, ma non vogliamo cercare di parlare di tutti adesso, perché renderebbe tutto troppo complicato. Invece, spiegheremo poche cose che potrai vedere più spesso, solo per darti un'idea.</p> - -<h3 id="Specificare_la_codifica_dei_caratteri_del_documento">Specificare la codifica dei caratteri del documento</h3> - -<p>Nell'esempio che abbiamo visto, c'era questa riga:</p> - -<pre class="brush: html"><meta charset="utf-8"></pre> - -<p>Questo elemento specifica semplicemente la codifica dei caratteri del documento: il set di caratteri che il documento può usare. <code>utf-8</code> è un set di caratteri universale, che include pressoché ogni carattere di ogni linguaggio umano. Ciò significa che la tua pagina web potrà mostrare qualsiasi lingua; pertanto è una buona cosa usare questo set di caratteri per ogni pagina che crei! Per esempio, la tua pagina potrebbe tranquillamente gestire sia l'inglese che il giapponese:</p> - -<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">Se imposti il set di caratteri <code>ISO-8859-1</code>, per esempio (il set di caratteri per l'alfabeto latino), il rendering della pagina potrebbe essere scombinato:</p> - -<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p> - -<h3 id="Active_learning_esercitarsi_con_la_codifica_dei_caratteri">Active learning: esercitarsi con la codifica dei caratteri</h3> - -<p>Per questa prova, riprendi il modello di HTML che hai scaricato durante la precedente sezione riguardante l'elemento <code><title></code> (il <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>), prova a cambiare il set dei caratteri (il valore di charset) a <code>ISO-8859-1</code> e aggiungi del giapponese alla pagina; questo è il codice che abbiamo usato:</p> - -<pre class="brush: html"><p>Japanese example: ご飯が熱い。</p></pre> - -<h3 id="Aggiungere_lautore_e_la_descrizione">Aggiungere l'autore e la descrizione</h3> - -<p>Molti <code>elementi <meta></code> includono gli attributi <code>name</code> e <code>content</code> :</p> - -<ul> - <li><code>name</code> specifica di che tipo di elemento meta si tratta; che tipo di informazioni contiene.</li> - <li><code>content</code> specifica il reale contenuto dell'elemento meta.</li> -</ul> - -<p>Due degli elementi meta che è utile inserire nella pagina definiscono l'autore della pagina e una concisa descrizione della stessa. Vediamo un esempio:</p> - -<pre class="brush: html"><meta name="author" content="Chris Mills"> -<meta name="description" content="The MDN Learning Area aims to provide -complete beginners to the Web with all they need to know to get -started with developing web sites and applications."></pre> - -<p>Specificare un autore è utile per ricavare chi ha scritto la pagina: nel caso li si voglia contattare per chiarimenti riguardo al contenuto. Alcuni Content Management Systems (CMS) hanno dei meccanismi per estrarre automaticamente le informazioni sull'autore e renderle disponibili per questo scopo.</p> - -<p>Specificare una descrizione che includa parole chiave relative al contenuto della pagina è utile perché può far apparire la pagina più avanti nei risultati delle ricerche fatte con i motori di ricerca (questo è un tema trattato in <a href="/en-US/docs/Glossary/SEO">Search Engine Optimization</a>, o {{glossary("SEO")}}.)</p> - -<h3 id="Active_learning_Luso_della_descrizione_nei_motori_di_ricerca">Active learning: L'uso della descrizione nei motori di ricerca</h3> - -<p>La descrizione è usata anche per la generazione delle pagine dei risultati della ricerca. Facciamo un esercizio per capire meglio.</p> - -<ol> - <li>Vai alla prima pagina di <a href="https://developer.mozilla.org/en-US/">The Mozilla Developer Network</a>.</li> - <li>Guarda il sorgente della pagina (Right/<kbd>Ctrl</kbd> + click sulla pagina, nel menù contestuale scegli <em>View Page Source</em>/Visualizza sorgente pagina).</li> - <li>Trova il meta tag description. Sarà così: - <pre class="brush: html"><meta name="description" content="The Mozilla Developer Network (MDN) provides -information about Open Web technologies including HTML, CSS, and APIs for both -Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS."></pre> - </li> - <li>Adesso cerca "Mozilla Developer Network" con il tuo motore di ricerca preferito (We used Yahoo.) Vedrai il contenuto dell'elemento <code><meta></code> description e il contenuto dell'elemento <code><title></code> usati nei risultati della ricerca. — Vale decisamente la pena averli! - <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/12347/search-result.png" style="display: block; margin: 0 auto;"></p> - </li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: In Google, vedrai alcune altre pagine rilevanti del sito MDN elencate sotto il link alla homepage MDN — sono chiamati sitelinks e sono configurabili negli strumenti di Google per webmasters (<a href="http://www.google.com/webmasters/tools/">Google's webmaster tools</a>) — un modo per migliorare i risultati del tuo sito nelle ricerche fatte col motore di ricerca di Google.</p> -</div> - -<div class="note"> -<p><strong>Note</strong>: Molte proprietà <code><meta></code> non sono più usate. Per esempio, l'elemento <code><meta></code> keyword — che si supponeva dover essere usato per fornire ai motori di ricerca termini per rendere la pagina rilevante per le ricerche di quei termini — è ignorato dai motori di ricerca perché gli spammers lo riempivano di centinaia di parole chiave, pregiudicando i risultati della ricerca.</p> -</div> - -<h3 id="Altri_tipi_di_metadata">Altri tipi di metadata</h3> - -<p>Setacciando il Web, troverai altri tipi di metadata. Molte delle proprietà che vedrai nei siti web sono creazioni proprietarie (coperte da Copyright), progettate per dotare alcuni siti (tipo i social network) di particolari informazioni che loro possono usare.</p> - -<p>Per esempio, <a href="http://ogp.me/">Open Graph Data</a> è un insieme di metadata (un protocollo) che Facebook ha inventato per avere dei metadata più ricchi per i siti web. Nel codice sorgente MDN troverai questo:</p> - -<pre class="brush: html"><meta property="og:image" content="https://developer.mozilla.org/static/img/opengraph-logo.png"> -<meta property="og:description" content="The Mozilla Developer Network (MDN) provides -information about Open Web technologies including HTML, CSS, and APIs for both Web sites -and HTML5 Apps. It also documents Mozilla products, like Firefox OS."> -<meta property="og:title" content="Mozilla Developer Network"></pre> - -<p>Un effetto è che quando crei un link a MDN su facebook, il collegamento appare accompagnato da una immagine e da una descrizione: è una esperienza più ricca per gli utenti.</p> - -<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">Anche Twitter ha i suoi metadati proprietari simili, che hanno un effetto simile quando l'indirizzo del sito è mostrato su twitter.com. Per esempio:</p> - -<pre class="brush: html"><meta name="twitter:title" content="Mozilla Developer Network"></pre> - -<h2 id="Aggiungere_icone_personalizzate_al_tuo_sito">Aggiungere icone personalizzate al tuo sito</h2> - -<p>Per arricchire ulteriormente il progetto del tuo sito, puoi aggiungere un riferimento a delle icone personalizzate nei tuoi metadata e queste saranno mostrate in alcuni contesti.</p> - -<p>Le humble favicon, che hanno girato per molti molti anni, sono state le prime icone di questo tipo: icone 16 x 16 pixel usate in molti modi. Le favicon possono essere aggiunte alla pagina :</p> - -<ol> - <li>Salvandole nella stessa directory in cui è salvato il file index.html nel formato <code>.ico</code> (molti browser supportano le favicons in formati più comuni, come <code>.gif</code> or <code>.png</code>, ma usando il formato .ico si è sicuri che funzionino anche con browser vecchi come Internet Explorer 6.)</li> - <li>Aggiungendo la seguente riga nella <code><head></code> del docuemnto HTML per creare un riferimento all'icona: - <pre class="brush: html"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> - </li> -</ol> - -<p>I browser moderni usano le favicon in molti posti, come nella scheda in cui la pagina è aperta o nel pannello dei segnalibri quando la pagina è salvata tra i preferiti.</p> - -<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p> - -<p>Ci sono molti altri tipi di icone da prendere in considerazione attualmente. Per esempio, nel codice della homepage MDN troverai questo:</p> - -<pre class="brush: html"><!-- third-generation iPad with high-resolution Retina display: --> -<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png"> -<!-- iPhone with high-resolution Retina display: --> -<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png"> -<!-- first- and second-generation iPad: --> -<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png"> -<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> -<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png"> -<!-- basic favicon --> -<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png"></pre> - -<p>I commenti spiegano per cosa è usata ciascuna icona — questi elementisoddisfano esigenze quali, ad esempio, fornire una piacevole icona ad alta risoluzione quando il sito è salvato nello schermo di un iPad.</p> - -<p>Non preoccuparti troppo di aggiungere tutti questi tipi di icone al momento — sono caratteristiche piuttosto avanzate e non ci si aspetta che tu conosca queste cose per progredire nel corso. Lo scopo principale, qui, è farti sapere cosa sono queste cose nel caso le incontri mentre navighi il codice sorgente di altri siti web.</p> - -<h2 id="Applicare_CSS_e_JavaScript_allHTML">Applicare CSS e JavaScript all'HTML</h2> - -<p>Pressoché tutti i siti web, oggi, impiegano i {{glossary("CSS")}} per apparire fantastici e i {{glossary("JavaScript")}} per potenziare l'interattività, i video players, le mappe, i giochi e altro. CSS e JavaScript sono generalmente applicati alle pagine web usando l'elemento {{htmlelement("link")}} e l'elemento {{htmlelement("script")}} rispettivamente.</p> - -<ul> - <li> - <p>L'elemento {{htmlelement("link")}} va sempre inserito nella head del documento; comprende due attributi: rel="stylesheet", che indica di essere riferito ad un documento foglio di stile (stylesheet); e href, che contiene il percorso fino al file css corrispondente al foglio di stile</p> - - <pre class="brush: html"><link rel="stylesheet" href="my-css-file.css"></pre> - </li> - <li> - <p>L'elemento {{htmlelement("script")}} non deve necessariamente essere nella head; in effetti, è spesso meglio metterlo al fondo del body del documento (proprio prima di chiudere il tag <code></body></code>), per essere sicuri che il documento HTML sia a disposizione del browser prima che provi ad applicargli il javascript (se il Javascript provasse ad accedere ad un elemento che ancora non esiste, il browser darebbe un errore).</p> - - <pre class="brush: html"><script src="my-js-file.js"></script></pre> - - <p><strong>Note</strong>: l'elemento <code><script></code> può sembrare simile ad un elemento vuoto, ma non lo è e necessita del tag di chiusura. Invece di puntare ad un file esterno contenente uno script, puoi anche decidere di mettere lo script dentro l'elemento <code><script></code> .</p> - </li> -</ul> - -<h3 id="Active_learning_applicare_CSS_e_JavaScript_ad_una_pagina">Active learning: applicare CSS e JavaScript ad una pagina</h3> - -<ol> - <li>Per iniziare questo apprendimento attivo, preleva una copia del nostro <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, dello <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> e del file <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> , e salvali nel tuo computer nella stessa directory. Assicurati che siano salvati con i nomi e le estensioni dei nomi corrette.</li> - <li>Apri il file HTML sia nel browser che nel tuo editor di testo</li> - <li>Seguendo le informazioni date precedentemente, aggiungi gli elementi {{htmlelement("link")}} e {{htmlelement("script")}} al tuo HTML così che il CSS e il JavaScript gli siano applicati.</li> -</ol> - -<p>Se fatto correttamente, quando salvi l' HTML e ricarichi la pagina del browser, vedrai cambiare le cose (la lista non ci sarà, perché la dovete fare voi; il testo dice: "Qui sotto c'è una lista dinamica. Clicca ovunque fuori dalla lista per aggiungerle un nuovo punto. Clicca un punto della lista per cambiare il suo testo in qualcos'altro").</p> - -<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p> - -<ul> - <li>Il Javascript ha aggiunto una lista vuota alla pagina. Adesso, quando clicchi altrove, si aprirà una finestra di dialogo che chiederà di introdurre del testo per un nuovo punto della lista; quando premi OK, l'elemento della lista verrà aggiunto. Quando clicchi un elemento esistente, si aprirà una finestra di dialogo che ti permetterà di cambiare quell'elemento.</li> - <li>Il CSS ha reso verde il background e più grande il testo. Ha anche dato uno stile al contenuto aggiunto dal JavaScript (ha aggiunto lo sfondo rosso e il bordo nero alla lista generata dal JavaScript).</li> -</ul> - -<div class="note"> -<p><strong>Note</strong>: se sei bloccato e non riesci ad applicare i CSS/JS , prova ad esaminare la pagina d'esempio <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a>.</p> -</div> - -<h2 id="Impostare_la_lingua_principale_del_documento">Impostare la lingua principale del documento</h2> - -<p>In fine. vale la pena dire che si può (e lo si dovrebbe proprio fare) impostare la lingua della pagina. Può essere fatto aggiungendo l'attributo <a href="/en-US/docs/Web/HTML/Global_attributes/lang">lang</a> al tag HTML di apertura (come visto nel <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>.)</p> - -<pre class="brush: html"><html lang="en-US"></pre> - -<p>Ciò si rivela utile in molti modi. Il tuo documento sarà indicizzato meglio dai motori di ricerca (permettendoti di apparire correttamente nelle ricerche per linguaggi specifici) ed è utile agli utenti con disabilità visive che usano degli screen readers (per esempio, la parola "six" esiste sia in francese che in inglese, ma è pronunciata diversamente.)</p> - -<p>Puoi anche impostare sottosezioni del documento perché vengano riconosciute come scritte in altre lingue; possiamo impostare la lingua giapponese per il nostro esempio in questo modo:</p> - -<pre class="brush: html"><p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p></pre> - -<p>Questi codici sono definiti dalla <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a>. Puoi trovare più informazioni a questo riguardo in <a href="https://www.w3.org/International/articles/language-tags/">Language tags in HTML and XML</a>.</p> - -<h2 id="Riepilogo">Riepilogo</h2> - -<p>Queso segna la fine del corso accelerato sull'elemento HTML head — ci sarebbe molto di più da dire, ma un corso completo sarebbe noioso e porterebbe confusione a questo stadio dell'apprendimento; volevamo solo darti un'idea delle cose che più comunemente vi ci troverai. Nel prossimo articolo vedremo i fondamenti dell'HTML per il testo.</p> - -<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/it/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/it/learn/html/multimedia_and_embedding/images_in_html/index.html deleted file mode 100644 index 5015ad5516..0000000000 --- a/files/it/learn/html/multimedia_and_embedding/images_in_html/index.html +++ /dev/null @@ -1,352 +0,0 @@ ---- -title: Immagini in HTML -slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML -translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML ---- -<div>{{LearnSidebar}}</div> - -<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div> - -<p class="summary">All'inizio, il Web era fatto di solo testo ed era piuttosto noioso. Fortunatamente, non è passato molto prima che venisse aggiunta la possibilità di integrare immagini (e altri tipi di contenuto più interessanti) nelle pagine web. Ci sono altri tipi di contenuti multimediali da considerare, ma è logico cominciare con l'elemento {{htmlelement("img")}}, usato per introdurre una singola immagine. In questo articolo vedremo in profondità come usarlo, le nozioni fondamentali, come commentarlo con il titolo usando l'elemento {{htmlelement("figure")}} e come si collega alle immagini di background coi CSS.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisiti:</th> - <td>Alfabetizzazione di base sui computer, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">software basilare installato</a>, conoscenze di base su <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">gestione dei file</a>, familiarità con i fondamenti di HTML (come trattati in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Cominciare con l'HTML</a>.)</td> - </tr> - <tr> - <th scope="row">Obbiettivi:</th> - <td>Imparare ad introdurre semplici immagini in HTML, commentarle con i titoli e come collegarle alle immagini di background coi CSS.</td> - </tr> - </tbody> -</table> - -<h2 id="Come_facciamo_a_mettere_un'immagine_in_una_pagina_web">Come facciamo a mettere un'immagine in una pagina web?</h2> - -<p>Per mettere una semplice immagine in una pagina web, usiamo l'elemento {{htmlelement("img")}}. Si tratta di un elemento vuoto (significa che non ha un contenuto testuale ne un tag di chiusura) che richiede un attributo per poter funzionare — <code>src</code> (pronounciato <em>sarc</em>, a volte chiamato col suo nome intero <em>source</em>). L'attributo <code>src</code> contiene un percorso (path) che punta all'immagine che si vuole mettere nella pagina, che può essere un URL relativo o assoluto; nello stesso modo in cui il valore dell'attributo <code>href</code> dell'elemento {{htmlelement("a")}} punta alla risorsa da linkare (si dovrebbe leggere <a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#A_quick_primer_on_URLs_and_paths">A quick primer on URLs and paths</a> per rinfrescarsi la memoria prima di continuare).</p> - -<p>Quindi, per esempio, se l'immagine è chiamata <code>dinosaur.jpg</code> ed è collocata nella stessa directory della pagina HTML, la si può inserire così:</p> - -<pre class="brush: html"><img src="dinosaur.jpg"></pre> - -<p>Se l'immagine si trova in una sottodirectory <code>images</code> della directory in cui si trova la pagina HTML (che è la soluzione raccomandata da Google per scopi di indicizzazione e {{glossary("SEO")}}), allora si può fare così:</p> - -<pre class="brush: html"><img src="images/dinosaur.jpg"></pre> - -<p>E così via.</p> - -<div class="note"> -<p><strong>Nota</strong>: I motori di ricerca leggono anche il nome del file dell'immagine e ne tengono conto per la SEO — si dovrebbe perciò dare al file un nome descrittivo ("<code>dinosaur.jpg</code>" è meglio di "<code>img835.png</code>").</p> -</div> - -<p>Si potrebbe inserire l'immagine usando l'URL assoluto, per esempio:</p> - -<pre class="brush: html"><img src="https://www.example.com/images/dinosaur.jpg"></pre> - -<p>Ma ciò è inutile, poiché fa fare al browser più lavoro, ricavando nuovamente l'indirizzo IP daccapo dal server DNS quando, quasi sempre, le immagini saranno salvate sullo stesso server web dell'HTML.</p> - -<div class="warning"> -<p><strong>Attenzione:</strong> la maggior parte delle immagini è coperta da copyright. Non si deve mostrare un'immagine nel proprio sito, a meno che 1) si sia proprietari dell'immagine 2) si sia ricevuto esplicito permesso scritto dal proprietario dell'immagine, o 3) si abbia prova che l'immagine è di pubblico dominio. Le violazioni al copyright sono illegali ed immorali.</p> - -<p>Inoltre, non si deve <strong>mai</strong> far puntare l'attributo <code>src</code> ad una immagine ospitata sul sito di qualcun altro senza avere il permesso: questo comportamento è chiamato "hotlinking" — nuovamente, rubare la larghezza di banda di qualcun altro è illegale e sbagliato (in più rallenta la tua pagina e non si ha il controllo sull'immagine, che potrebbe venir rimossa o sostituita con qualcosa di inappropriato).</p> -</div> - -<p>Il codice riportato sopra dovrebbe dare il seguente risultato:</p> - -<p><img alt="A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it" src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> - -<div class="note"> -<p><strong>Nota</strong>: elementi come {{htmlelement("img")}} e {{htmlelement("video")}} sono a volte indicati come <strong>replaced elements</strong> (elementi sostituiti), perché il contenuto dell'elemento e la dimensione sono determinati da una risorsa esterna (file immagine o video) e non dal contenuto dell'elemento stesso.</p> -</div> - -<div class="note"> -<p><strong>Nota</strong>: si possono trovare gli esempi di questa sezione in <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">running on Github</a> (guarda anche il <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">codice sorgente</a>.)</p> -</div> - -<h3 id="Testo_alternativo">Testo alternativo</h3> - -<p>Il prossimo atrtibuto che guarderemo è <code>alt</code> — il suo valore si suppone che sia una descrizione dell'immagine in forma di testo, che possa essere usata in situazioni nelle quali l'immagine non può essere vista o mostrata. Per esempio, il nostro codice potrebbe essere modificato così:</p> - -<pre class="brush: html"><img src="images/dinosaur.jpg" - alt="The head and torso of a dinosaur skeleton; - it has a large head with long sharp teeth"></pre> - -<p>Il modo più semplice per testare il funzionamento di questo attributo è di scrivere male il nome del file nell'attributo src (ad esempio dinosooor.jpg); in questo caso il browser non mostrerà l'immagine perché non la troverà e al suo posto mostrerà il testo alternativo.</p> - -<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> - -<p>Perciò, perché mai dovresti visualizzare o aver bisogno del testo alternativo? Può essere utile in numerose situazioni:</p> - -<ul> - <li>L'utente è ipovedente e utilizza uno screen reader per leggere il web — in un caso come questo è davvero essenziale avere a disposizione un testo alternativo.</li> - <li>Come ipotizzato prima si potrebbe aver scritto male il nome del file dell'immagine.</li> - <li>Il browser non supporta il tipo di file dell'immagine. Alcune persone usano ancora browser solo testo, come <a href="https://en.wikipedia.org/wiki/Lynx_%28web_browser%29">Lynx</a>, che mostrano il testo alternativo di ogni immagine.</li> - <li>Si vuole che il testo sia utilizzato dai motori di ricerca per indicizzare le immagini — I motori di ricerca possono rispondere alle interrogazioni cercando il testo che combacia con la stringa ricercata anche all'interno del testo alternativo delle immagini.</li> - <li>Fornire una alternativa agli utenti che hanno disabilitato le immagini per ridurre il consumo di banda e le distrazioni (comportamento diffuso nei paesi in cui l'ampiezza di banda è limitata e costosa).</li> -</ul> - -<p>Cosa si dovrebbe scrivere, esattamente, come valore dell'attributo <code>alt</code>? DIpende dal motivo per cui l'immagine si trova li; in altre parole: cosa si perde se l'immagine non viene vista?</p> - -<ul> - <li><strong>Decorazione. </strong>Se l'immagine è solo una decorazione e non è parte del contenuto, si può lasciare vuoto, add a blank <code>alt=""</code>, così, per esempio, uno screen reader non perde tempo a leggere contenuto privo di utilità per l'utente. Le immagini decorative non fanno realmente parte del contenuto HTML — {{anch("CSS background images")}} dovrebbero essere usati per introdurre decorazioni — ma se è inevitabile, la miglior cosa da fare è lasciare l'attributo in bianco (<code>alt=""</code>).</li> - <li><strong>Contenuto.</strong> Se l'immagine fornisce informazioni significative, fornire le stesse informazioni in forma sintetica con <code>alt</code> text, o ancora meglio, nel testo principale che tutti possono vedere. Non scrivere <code>alt</code> text ridondanti (quanto sarebbe noioso per un utente vedente se tutti i paragrafi fossero scritti due volte di seguito?). Se l'immagine è adeguatamente descritta nel testo principale, si può nuovamente lasciare <code>alt=""</code>.</li> - <li><strong>Link.</strong> Se si mette una immagine in un elemento {{htmlelement("a")}} per usarla come link, si dovrebbe comunque fornire un link testuale accessibile (<a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Use_clear_link_wording">accessible link text</a>) — in questi casi si può sia scriverlo all'interno dell'elemento <code><a></code> o all'interno dell'attributo <code>alt</code> dell'immagine, se si pensa che funzioni meglio.</li> - <li><strong>Text.</strong> Non si dovrebbe scrivere del testo nelle immagini (se ad esempio il titolo principale ha bisogno di un effetto ombra, si possono usare i CSS piuttosto che far diventare il testo una immagine). Se davvero non si può evitare di farlo, si dovrebbe comunque fornire il testo tramite l'attributo <code>alt</code>.</li> -</ul> - -<p>La chiave è consentire una esperienza proficua anche quando non si può fruire delle immagini, così che gli utenti non perdano alcun contenuto. Provate a disattivare le immagini nel browser e a vedere qual è il risultato; ci si renderà subito conto di quanto inutili siano degli alt text come "logo" o "il mio posto preferito" quando le immagini non sono visibili:</p> - -<div class="note"> -<p><strong>Nota</strong>: La WebAIM's <a href="http://webaim.org/techniques/alttext/">Alternative text guide</a> fornisce più dettagli e se si vogliono più informazioni è sicuramente una buona lettura.</p> -</div> - -<h3 id="Larghezza_e_altezza">Larghezza e altezza</h3> - -<p>Si possono usare gli attributi <code>width</code> e <code>height</code> per specificare la larghezza e l'altezza dell'immagine (si possono ricavare le misure in diversi modi: per esempio su un Mac si può usare la combinazione di tasti <kbd>Cmd</kbd> + <kbd>I</kbd> per ottenere le informazioni sull'immagine). Tornando all'esempio, si può fare così:</p> - -<pre class="brush: html"><img src="images/dinosaur.jpg" - alt="The head and torso of a dinosaur skeleton; - it has a large head with long sharp teeth" - width="400" - height="341"></pre> - -<p>In circostanze normali ciò non produce differenze nella visualizzazione, ma se l'immagine non dovesse essere visualizzata (per esempio si è appena aperta la pagina e l'immagine non è ancora stata visualizzata) si noterà che il browser riserva dello spazio per farvi apparire l'immagine:</p> - -<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> - -<p>È una buona cosa da fare — produce un più rapido e fluido caricamento della pagina.</p> - -<p>Non si dovrebbe alterare la dimensione dell'immagine per mezzo degli attributi HTML — se si imposta una dimensione troppo grande si otterrà un'immagine sgranata, sfocata; se la si imposta più piccola vuol dire che si spreca banda per far scaricare un'immagine più grande di ciò di cui abbiamo bisogno. Se non si mantiene il corretto rapporto tra le dimensioni (<a href="https://en.wikipedia.org/wiki/Aspect_ratio_%28image%29">aspect ratio</a>) l'immagine risulterà distorta. Si dovrebbe usare un editor di immagini per ridimensionare l'immagine secondo le proprie necessità, prima di metterla su internet.</p> - -<div class="note"> -<p><strong>Nota</strong>: se si ha la necessità di alterare le dimensioni dell'immagine, lo si dovrebbe fare coi CSS piuttosto che con l'HTML.</p> -</div> - -<h3 id="Titoli_delle_immagini">Titoli delle immagini</h3> - -<p>Come per i<a href="https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Adding_supporting_information_with_%3Ctitle%3E"> link</a>, si può aggiungere un attributo <code>title</code> per fornire ulteriori informazioni di supporto. Nell'esempio, possiamo fare così:</p> - -<pre class="brush: html"><img src="images/dinosaur.jpg" - alt="The head and torso of a dinosaur skeleton; - it has a large head with long sharp teeth" - width="400" - height="341" - title="A T-Rex on display in the Manchester University Museum"></pre> - -<p>Ciò produce un tooltip, proprio come accade per i "title" dei link.</p> - -<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p> - -<p>I title delle immagini non sono essenziali per aggiungere qualcosa di significativo e spesso è meglio aggiungere queste informazioni di supporto nel testo principale dell'articolo, piuttosto che attaccarle all'immagine. Sono tuttavia utili in alcune circostanze; per esempio in una galleria di immagini, dove non si ha lo spazio per le didascalie.</p> - -<h3 id="Apprendimento_attivo_inserire_un'immagine">Apprendimento attivo: inserire un'immagine</h3> - -<p>Ok, adesso è il tuo turno! In questa sezione active learning ci piacerebbe fare un semplice esercizio. Sei stato istruito su un fondamentale elemento {{htmlelement("img")}}; ci piacerebbe che inserissi l'immagine reperibile al seguente URL:</p> - -<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p> - -<p>Si, prima abbiamo detto di non fare mai degli "hotlink" a immagini su altri server, ma questo è solo a scopo dimostrativo — ti assolveremo, per questa volta.</p> - -<p>Ci piacerebbe anche che:</p> - -<ul> - <li>aggiungessi alt text e verificassi che funziona sbagliando l'URL dell'immagine;</li> - <li>impostassi le corrette <code>width</code> e <code>height</code> (suggerimento: è larga 200px e alta 171px) e poi sperimentassi altri valori per vedere l'effetto;</li> - <li>impostassi un <code>title</code> per l'immagine.</li> -</ul> - -<p>Se fai un errore, puoi sempre resettare con l'apposito bottone. Se sei proprio bloccato, premi il bottone <em>Show solution</em> .</p> - -<div class="hidden"> -<h6 id="Playable_code">Playable code</h6> - -<pre class="brush: html"><h2>Input</h2> -<textarea id="code" class="input"> -<img></textarea> -<h2>Output</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Reset" /> - <input id="solution" type="button" value="Show solution" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; -} - -.input, .output { - width: 90%; - height: 10em; - padding: 10px; - border: 1px solid #0095dd; - overflow: auto; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { -textarea.value = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> - -<h2 id="Aggiungere_note_alle_immagini_(con_figures_e_figure_captions)">Aggiungere note alle immagini (con figures e figure captions)</h2> - -<p>Parlando di didascalie, ci sono molti modi per aggiungerle ad una immagine: per esempio non c'è niente ad impedirti di fare così:</p> - -<pre class="brush: html"><div class="figure"> - <img src="images/dinosaur.jpg" - alt="The head and torso of a dinosaur skeleton; - it has a large head with long sharp teeth" - width="400" - height="341"> - - <p>A T-Rex on display in the Manchester University Museum.</p> -</div></pre> - -<p>Questo è ok — produce l'effetto voluto ed è facilmente modificabile con i CSS; ma c'è un problema — non c'è niente che colleghi semanticamente l'immagine alla sua didascalia e ciò può creare problemi agli screen readers; per esempio, quando hai 50 immagini e 50 didascalie, cosa collega una all'altra?</p> - -<p>Una soluzione migliore è usare gli elementi dell'HTML5 {{htmlelement("figure")}} e {{htmlelement("figcaption")}} che sono appositamente stati creati per questa ragione: fornire un contenitore semantico per le immagini, che colleghi chiaramente ogni immagine con la sua didascalia; il nostro esempio può essere riscritto così:</p> - -<pre><figure> - <img src="images/dinosaur.jpg" - alt="The head and torso of a dinosaur skeleton; - it has a large head with long sharp teeth" - width="400" - height="341"> - - <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption> -</figure></pre> - -<p>L'elemento {{htmlelement("figcaption")}} dice al browser e alle tecnologie per l'accessibilità (assistive technology) che la didascalia descrive il restante contenuto dell'elemento {{htmlelement("figure")}}.</p> - -<div class="note"> -<p><strong>Nota</strong>: dal punto di vista dell'accessibilità, le didascalie e l'{{htmlattrxref('alt','img')}} text hanno ruoli distinti. Le didascalie beneficiano anche coloro che possono vedere l'immagine, mentre il testo alternativo ({{htmlattrxref('alt','img')}} text) fornisce le stesse funzionalità di una immagine che però, manca. Perciò captions e <code>alt</code> text non dovrebbero dire la stessa cosa, perché quando l'immagine manca, appaiono entrambe. Provate a disattivare le immagini nel browser e a vedere l'effetto che fa.</p> -</div> - -<p>Notate che una "figure" non deve necessariamente essere un'immagine — una figure è una unità indipendente di contenuto che:</p> - -<ul> - <li>esprime il concetto in maniera sintetica e facile da afferrare</li> - <li>può comparire in vari punti del flusso lineare della pagina</li> - <li>fornisce informazioni essenziali di supporto al testo principale.</li> -</ul> - -<p>Una figure potrebbe essere costituita da diverse immagini, un frammento di codice, audio o video, equazioni, una tabella o altro.</p> - -<h3 id="Active_learning_creare_una_figure">Active learning: creare una figure</h3> - -<p>In questa sezione di apprendimento attivo, ci piacerebbe che prendessi il codice della precedente sezione active learning e lo trasformassi in una figure:</p> - -<ul> - <li>annidalo in un elemento {{htmlelement("figure")}}</li> - <li>copia il testo dell'attributo <code>title</code>, rimuovi l'attributo <code>title</code>, quindi metti il testo copiato in un elemento {{htmlelement("figcaption")}} sotto all'immagine.</li> -</ul> - -<p>Se fai un errore puoi resettare con l'apposito bottone; se sei proprio bloccato premi il pulsante <em>Show solution</em>.</p> - -<div class="hidden"> -<h6 id="Playable_code_2">Playable code 2</h6> - -<pre class="brush: html"><h2>Input</h2> -<textarea id="code" class="input"> -</textarea> -<h2>Output</h2> -<div class="output"></div> -<div class="controls"> - <input id="reset" type="button" value="Reset" /> - <input id="solution" type="button" value="Show solution" /> -</div> -</pre> - -<pre class="brush: css">body { - font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; -} - -.input, .output { - width: 90%; - height: 10em; - padding: 10px; - border: 1px solid #0095dd; - overflow: auto; -} - -button { - padding: 10px 10px 10px 0; -} -</pre> - -<pre class="brush: js">var textarea = document.getElementById("code"); -var reset = document.getElementById("reset"); -var code = textarea.value; -var output = document.querySelector(".output"); -var solution = document.getElementById("solution"); - -function drawOutput() { - output.innerHTML = textarea.value; -} - -reset.addEventListener("click", function() { - textarea.value = code; - drawOutput(); -}); - -solution.addEventListener("click", function() { -textarea.value = '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>'; - drawOutput(); -}); - -textarea.addEventListener("input", drawOutput); -window.addEventListener("load", drawOutput); -</pre> -</div> - -<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p> - -<h2 id="CSS_e_immagini_di_background">CSS e immagini di background</h2> - -<p>Puoi anche usare i CSS per inserire immagini nelle pagine web (e anche i JavaScript, ma questa è tutta un'altra storia). Le proprietà dei CSS {{cssxref("background-image")}} — e le altre proprietà <code>background-*</code> — sono usate per controllare il posizionamento delle immagini di sfondo (background). Per esempio, per mettere un'immagine di sfondo ad ogni paragrafo di una pagina, si può fare così:</p> - -<pre class="brush: css">p { - background-image: url("images/dinosaur.jpg"); -}</pre> - -<p>Le immagini risultanti sono presumibilmente più facili da posizionare e controllare delle immagini HTML, quindi perché complicarsi la vita con le immagini HTML? Come suggerito precedentemente, le immagini introdotte con i CSS hanno solo scopo decorativo — se vuoi aggiungere qualcosa di carino alla tua pagina per migliorare l'effetto visivo, va bene; ma queste immagini non hanno alcun significato semantico — non possonoavere alcun testo equivalente, sono invisibili per gli screen readers, etc. Per questo, servono le immagini HTML.</p> - -<p>Quindi, se una immagine ha un contenuto significativo, si dovrebbe inserirla tramite l'HTML; se è puramente decorativa, lo si dovrebbe fare tramite i CSS.</p> - -<div class="note"> -<p><strong>Nota</strong>: imparerai molto di più riguardo a <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS background images</a> nel nostro <a href="/en-US/docs/Learn/CSS">CSS</a> topic.</p> -</div> - -<h2 id="Conclusioni">Conclusioni</h2> - -<p>Per ora è tutto — abbiamo trattato le immagini e le didascalie nei dettagli. Nel prossimo articolo cambieremo marcia e vevremo come usare l'HTML per includere video e audio nelle pagine web.</p> - -<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p> diff --git a/files/it/learn/html/multimedia_and_embedding/index.html b/files/it/learn/html/multimedia_and_embedding/index.html deleted file mode 100644 index 8e1f49dad8..0000000000 --- a/files/it/learn/html/multimedia_and_embedding/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Multimedialità e incorporamento -slug: Learn/HTML/Multimedia_and_embedding -tags: - - Assessment - - Audio - - Beginner - - CodingScripting - - Flash - - Guide - - HTML - - Images - - Landing - - Learn - - NeedsTranslation - - SVG - - TopicStub - - Video - - iframes - - imagemaps - - responsive -translation_of: Learn/HTML/Multimedia_and_embedding ---- -<p>{{LearnSidebar}}</p> - -<p class="summary">Finora, in questo corso abbiamo visto molto testo. Molto. Testo. Ma il Web sarebbe veramente noisoso con nient'altro che il testo, quindi cominciamo a vedere come rendere il Web animato, con contenuti più interessanti! Questo modulo esplora come usare l'HTML per inserire la multimedialità nelle tue pagine web, inclusi i differenti modi di aggiunta di immagini, e come incorporare video, audio e persino altre intere pagine web.</p> - -<h2 id="Prerequisiti">Prerequisiti</h2> - -<p>Prima di cominciare questo modulo, dovresti avere una ragionevole conoscenza delle basi dell'HTML, trattate in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduzione all'HTML</a>. Se non hai esaminato questo modulo (o qualcosa di simile), prima studialo, poi torna qui!</p> - -<div class="note"> -<p><strong>Nota</strong>: se stai lavorando su un computer/tablet/altro dispositivo dove non hai la possibilità di creare propri file, potresti provare (la maggior parte degli) esempi di codice in un programma di codifica online come <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Guide">Guide</h2> - -<p>Questo modulo contiene i seguenti articoli, che ti porteranno attraverso tutti i fondamenti dell'incorporazione della multimedialità nelle pagine web.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Immagini nell'HTML</a></dt> - <dd>Ci sono altri tipi di multimedialità da considerare, ma è logico cominciare con l'umile elemento {{htmlelement("img")}}, usato per inserire una semplice immagine in una pagina web. In questo articolo vedremo come usarlo in profondità, a cominciare dalle basi, annotandolo con didascalie grazie all'elemento {{htmlelement("figure")}}, e come si relaziona con le immagini di sfondo CSS.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Contenuti video e audio</a></dt> - <dd>In seguito, vedremo come usare gli elemeti HTML5 {{htmlelement("video")}} e {{htmlelement("audio")}} per inserire video e audio nelle nostre pagine, a cominciare dalle basi, fornendo l'accesso a differenti formati di file per differenti browser, aggiungendo didascalie e sottotitoli, e come aggiungere le alternative per browser più vecchi.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Da <object> a <iframe> — altre tecnologie di integrazione</a></dt> - <dd>A questo punto ci piacerebbe fare qualche passo di lato, dando un'occhiata ad una coppia di elementi che ti permettono di integrare un'ampia varietà di tipi di contenuti nella tua pagina web: gli elementi {{htmlelement("iframe")}}, {{htmlelement("embed")}} e {{htmlelement("object")}}. Gli <code><iframe></code> servono ad integrare altre pagine web, e gli altri due ti permettono di integrare PDF, SVG e anche Flash — una tecnologia sulla via del disuso, ma che ancora vedi in maniera semi-regolare.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Aggiungere grafiche vettoriali al Web</a></dt> - <dd>Le grafiche vettoriali possono essere molto utili in certe situazioni. A differenza dei regolari formati come PNG/JPG, esse non si distorcono/pixellano quando aumenti lo zoom — possono rimanere armoniose quando scalate. Questo articolo introduce cosa sono le grafiche vettoriali e come includere il popolare formato {{glossary("SVG")}} nelle pagine web.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Immagini reattive</a></dt> - <dd>Con così tanti tipi di dispositivi differenti in grado ora di navigare il Web — dai telefoni mobili ai computer da scrivania — un concetto essenziale per padroneggiare il moderno mondo web è il disegno reattivo (responsive design). Questo si riferisce alla creazione di pagine web che possono automaticamente cambiare le loro caratteristiche per adattarsi a differenti dimensioni dello schermo, risoluzioni, ecc. Questo sarà visto più in dettaglio nel successivo modulo CSS, ma per il momento vedremo gli strumenti a disposizione dell'HTML per creare immagini reattive, incluso l'elemento {{htmlelement("picture")}}.</dd> -</dl> - -<h2 id="Valutazioni">Valutazioni</h2> - -<p>Le seguenti valutazioni testeranno il tuo apprendimento delle basi dell'HTML viste nelle guide qui sopra.</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Splash page di Mozilla</a></dt> - <dd>In questa valutazione, noi testeremo la tua conoscenza di alcune delle tecniche discusse negli articoli di questo modulo, portandoti ad aggiungere alcuni video e immagini alla stravagante splash page tutta riguardo Mozilla!</dd> -</dl> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Aggiungi una hitmap sulla parte superiore di una immagine</a></dt> - <dd>Le mappe di immagini forniscono un meccanismo per collegare differenti parti di una immagine a differenti posti (pensa ad una mappa, che ti rimanda ad ulteriori informazioni riguardo ciascun differente Paese quando gli clicchi sopra). Questa tecnica può qualche volta essere utile.</dd> - <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Letteratura base sul Web 2</a></dt> - <dd> - <p>Un eccellente corso della fondazione Mozilla, che esplora e testa alcune delle capacità trattate nel modulo <em>Multimedialità e incorporamento</em>. Immergiti più in profondità nelle nozioni fondamentali sulla composizione di pagine web, disegno per l'accessibilità, condivisione risorse, uso di media online e lavoro libero.</p> - </dd> -</dl> diff --git a/files/it/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/it/learn/html/multimedia_and_embedding/responsive_images/index.html deleted file mode 100644 index 20c4afe6a2..0000000000 --- a/files/it/learn/html/multimedia_and_embedding/responsive_images/index.html +++ /dev/null @@ -1,242 +0,0 @@ ---- -title: Immagini reattive -slug: Learn/HTML/Multimedia_and_embedding/Responsive_images -translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images -original_slug: Learn/HTML/Multimedia_and_embedding/immagini_reattive ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div> - -<div> -<p class="summary">In questo articolo impareremo il concetto di "immagini reattive" (responsive images) — immagini che funzionano correttamente su dispositivi con monitor di dimensioni e risoluzioni anche molto diverse — e vedremo quali strumenti l'HTML ci mette a disposizione per implementarle. Le immagini reattive sono solo una parte della progettazione di un web reattivo (responsive web design), e pongono delle buone basi per un argomento del quale si imparerà molto di più in un modulo seguente sui <a href="/en-US/docs/Learn/CSS">CSS</a>.</p> -</div> - -<table class="learn-box nostripe standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisiti:</th> - <td>Dovresti già conoscere <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">basics of HTML</a> e come <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">aggiungere immagini a una pagina web</a>.</td> - </tr> - <tr> - <th scope="row">Obiettivi:</th> - <td>Imparare ad usare caratteristiche quali l'attributo {{htmlattrxref("srcset", "img")}} e l'elemento {{htmlelement("picture")}} per aggiungere immagini reattive ai siti web, usando diverse soluzioni.</td> - </tr> - </tbody> -</table> - -<h2 id="Perché_le_immagini_reattive">Perché le immagini reattive?</h2> - -<p>Quale problema stiamo cercando di risolvere con le immagini reattive? Esaminiamo uno scenario tipico. Un sito web, probabilmente, avrà una immagine di testa (header image) per piacere ai visitatori, più, forse, altre immagini più giù nel contenuto. Probabilmente si vorrà che l'immagine di testa occupi l'intera larghezza della pagina e che le immagini nel contenuto riempiano le colonne. Vediamo un esempio:</p> - -<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p> - -<p>Ciò funziona bene su un dispositivo con uno schermo ampio, come un laptop o un desktop (you can <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">see the example live</a> and find the <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">source code</a> on Github). Non discuteremo molto dei CSS, salvo che per dire questo:</p> - -<ul> - <li>il contenuto del body è stato fissato ad una larghezza massima di 1200 pixels — sopra a questa larghezza il body rimarrà a 1200px e si centrerà orizzontalmente nella pagina. Sotto a questa larghezza, il body verrà visualizzato al 100% della larghezza della pagina.</li> - <li>L'immagine di testa è impostata in modo che il suo centro sia sempre nel centro della testata, indipendentemente dalla larghezza della stessa. Così, se il sito è visto in uno schermo più stretto, i dettagli importanti nel centro dell'immagine (le persone) rimangono visibili, mentre ai lati viene perso ciò che eccede. L'altezza è di 200 px.</li> - <li>Le immagini nel contenuto sono impostate in modo che se l'elemento body diventa più stretto delle immagini, queste iniziano a ridursi per rimanere sempre al''interno del body, piuttosto che strabordare.</li> -</ul> - -<p>Così va bene, ma il problema arriva quando cominci a vedere il sito su un dispositivo con uno schermo stretto — l'immagine di testata si vede bene, ma inizia a prendere gran parte dell'altezza dello schermo per un dispositivo portatile; d'altra parte la prima immagine del contenuto si vede malissimo - a questa dimensione si possono appena vedere le persone.</p> - -<p><img alt="Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p> - -<p>Quando il sito è visualizzato su uno schermo stretto, sarebbe molto meglio mostrare una versione ritagliata dell'immagine che contenga i dettagli importanti dello scatto e magari una via di mezzo tra le due foto quando lo schermo è di media dimensione, come per i tablet. - Questa situazione è nota come <strong>art direction problem</strong>.</p> - -<p>Inoltre, non c'è bisogno di includere immagini così grandi se la pagina vien vista sui piccoli schermi dei portatili. - Questa è nota come <strong>resolution switching problem</strong>. Una immagine raster è definita da un certo numero di pixel di larghezza e da un certo numero in altezza; come abbiamo visto parlando di <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">vector graphics</a>, una immagine raster inizia a sgranarsi e a sfocarsi se è mostrata più grande della sua dimensione originale (ciò non accade per le immagini vettoriali), mentre se la visualizziamo più piccola stiamo sprecando banda per far scaricare un file immagine più pesante del necessario - specialmente gli utenti di dispositivi portatili non vogliono che questo accada dal momento che una piccola immagine farebbe a caso loro. Una soluzione ideale la si avrebbe se si avessero diverse immagini, con diverse dimensioni e risoluzioni, da caricare sui diversi dispositivi.</p> - -<p>A rendere le cose ancora più complicate, hanno schermi ad alta risoluzione che necessitano di immagini più grandi di quello che ci si potrebbe aspettare per apparire al meglio. Questo problema è essenzialmente analogo, ma in un contesto leggermente diverso.</p> - -<p>Si potrebbe pensare che le immagini vettoriali possano risolvere questi problemi e in certa misura lo fanno: sono leggere, vengono scalate (ingrandite in scala) bene e dove possibile le si dovrebbe usare. Tuttavia non sono adatte a qualsiasi tipo di immagine: mentre sono ottime per grafiche semplici, cominciano a diventare molto complesse per creare immagini con il livello di dettaglio che si vorrebbe per una foto. Le immagini raster dei formati come ad es. JPEG sono più adatte ai tipi di immagini che abbiamo visto negli esempi precedenti.</p> - -<p>Questo tipo di problemi non esisteva quando il web era agli esordi, nei primi anni 90: allora, gli unici dispositivi esistenti per navigare il web erano i desktop e i laptop, così i progettisti di browser e gli scrittori non dovevano pensare alle soluzioni. Le tecnologie per le immagini reattive (<em>Responsive image technologies</em>) sono state aggiunte di recente per risolvere i problemi accennati sopra, permettendoti di fornire al browser diversi file immagine, che contengono le stesse immagini ma ad una risoluzione diversa, con diverso numero di pixel (<em>resolution switching</em>), o immagini diverse adatte a spazi di allocazione di dimensione diversa (<em>art direction</em>.)</p> - -<div class="note"> -<p><strong>Nota</strong>: Le nuove caratteristiche trattate in questo articolo — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — sono tutte supportate nelle versioni più aggiornate dei browser per desktop e per dispositivi mobili (incluso il browser Microsoft Edge, non da Internet Explorer.) </p> -</div> - -<h2 id="Come_creare_immagini_reattive">Come creare immagini reattive?</h2> - -<p>In questa sezione, esamineremo i 2 problemi illustrati e mostreremo come risolverli usando le caratteristiche dell'HTML per le immagini reattive. Dovreste notare che ci concentreremo sull'elemento {{htmlelement("img")}} come trattato nell'esempio precedente — l'immagine nella header è solo decorativa e perciò è aggiunta usando i CSS. I <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">CSS hanno probabilmente migliori strumenti per il responsive design</a> dell'HTML; ne parleremo in un successivo modulo sui CSS.</p> - -<h3 id="Cambiare_risoluzione_dimensioni_differenti">Cambiare risoluzione: dimensioni differenti</h3> - -<p>Qual è il problema che vogliamo risolvere cambiando la risoluzione? Vogliamo mostrare una immagine identica, ma più grande o più piccola in funzione del dispositivo — è la situazione che abbiamo con la seconda immagine del nostro esempio. L'elemento standard {{htmlelement("img")}} tradizionalmente, permette solo di puntare a un singolo file sorgente.</p> - -<pre class="brush: html"><img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"></pre> - -<p>Tuttavia, possiamo usare 2 nuovi attributi — {{htmlattrxref("srcset", "img")}} e {{htmlattrxref("sizes", "img")}} — per fornire molte sorgenti di immagine addizionali insieme a dei suggerimenti per aiutare il browser a prelevare quella giusta. Si può vedere un esempio nel nostro <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">reponsive.html</a> su Github (vedere anche <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">il codice sorgente</a>):</p> - -<pre class="brush: html"><img srcset="elva-fairy-320w.jpg 320w, - elva-fairy-480w.jpg 480w, - elva-fairy-800w.jpg 800w" - sizes="(max-width: 320px) 280px, - (max-width: 480px) 440px, - 800px" - src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"></pre> - -<p>Gli attributi <code>srcset</code> e <code>sizes</code> sembrano complicati da capire, ma non lo sono poi tanto se li si formatta come mostrato qui sopra: con una parte del valore dell'attributo per riga. Ogni valore contiene una lista separata da virgole e ogni parte della lista è fatta di 3 sottoparti. Esaminiamo il contenuto di ognuna:</p> - -<p><strong><code>srcset</code></strong> definisce il set di immagini tra le quali vogliamo che il browser scelga e quali dimensioni hanno. Prima di ogni virgola, scriviamo:</p> - -<ol> - <li>un <strong>nome di file immagine</strong> (<code>elva-fairy-480w.jpg</code>.)</li> - <li>uno spazio</li> - <li>la <strong>dimensione della larghezza dell'immagine in pixels</strong> (<code>480w</code>) — notate l'uso dell'unità w e non px come ci si potrebbe aspettare. Si tratta della reale dimensione dell'immagine, che si può trovare esaminando il file immagine sul computer (per esempio in un Mac si può selezionare l'immagine in Finder, e premere <kbd>Cmd</kbd> + <kbd>I</kbd> per aprire la scheramta di informazioni).</li> -</ol> - -<p><strong><code>sizes</code></strong> definisce un set di condizioni (ad es. la larghezza dello schermo) e indica quale dimensione di immagine sarebbe meglio scegliere quando si verificano quelle condizioni — questi sono i suggerimenti di cui si parlava prima. In questo caso, prima di ogni virgola scriviamo:</p> - -<ol> - <li>una <strong>media condition</strong> (<code>(max-width:480px)</code>) — imparerete di più a questo riguardo nella sezione sui <a href="/en-US/docs/Learn/CSS">CSS</a>, ma per adesso diciamo solo che la "media condition" descrive un possibile stato dello schermo. In questo caso, si stà dicendo: "quando la larghezza visualizzata è 480 pixels o meno".</li> - <li>uno spazio</li> - <li>La <strong>larghezza della posizione</strong> che l'immagine occuperà quando si realizza la condizione (<code>440px</code>.)</li> -</ol> - -<div class="note"> -<p><strong>Nota</strong>: Per la larghezza della posizione, si può fornire una misura assoluta (<code>px</code>, <code>em</code>) o una relativa (come una percentuale). Potreste aver notato che l'ultima larghezza non ha media condition — questa è perciò la condizione di default che deve essere scelta quando nessuna delle condizioni sui dispositivi è vera. Il browser ignora tutto ciò che segue la prima condizione verificata, perciò bisogna fare attenzione all'ordine delle condizioni.</p> -</div> - -<p>Quindi, definiti questi attributi, il browser farà:</p> - -<ol> - <li>verifica della larghezza del suo dispositivo</li> - <li>calcolo di quale sia la prima condizione tra la lista dell'atributo <code>sizes</code> ad essere vera</li> - <li>Look at the slot size given to that media query.</li> - <li>Caricamento dell'immagine elencata nell'attributo <code>srcset</code> che maggiormente si avvicina alla dimensione della posizione (slot) scelta.</li> -</ol> - -<p>Fatto! Così a questo punto, se un browser col supporto con una larghezza della viewport di 480px carica la pagina, la <code>(max-width: 480px)</code> media condition sarà vera, perciò verrà scelta la slot da <code>440px</code>, quindi sarà caricata la <code>elva-fairy-480w.jpg</code>, poiché la sua larghezza (<code>480w</code>) è la più vicina ai <code>440px</code>. L'immagine da 800px occupa 128KB su disco, mentre la versione da 480px solo 63KB — un risparmio di 65KB. Adesso immagina se fosse una pagina con molte immagini. Usando questa tecnica si può far risparmiare agli utenti mobile un sacco di ampiezza di banda.</p> - -<p>I browser più vecchi che non supportano queste caratteristiche, semplicemente le ignoreranno e andranno avanti a caricare l'immagine indicata dall'attributo {{htmlattrxref("src", "img")}} come al solito.</p> - -<div class="note"> -<p><strong>Note</strong>: nell'elemento {{htmlelement("head")}} del documento si troverà la linea <code><meta name="viewport" content="width=device-width"></code>: questo obbliga i browser dei dispositivi mobili ad adottare la loro reale larghezza viewport per caricare le pagine web (alcuni browser mentono riguardo alla larghezza e caricano invece pagine a una risoluzione maggiore e poi la riducono, che non è molto utile con una progettazione o una immagine reattiva. Spiegheremo di più a questo proposito in un modulo successivo).</p> -</div> - -<h3 id="Utili_strumenti_di_sviluppo">Utili strumenti di sviluppo</h3> - -<p>Ci sono alcuni utili <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools</a> nei browser, per aiutare a calcolare le necessarie larghezze slot, ecc. che si ha bisogno di usare. Mentre le stavo calcolando, prima di tutto ho caricato la versione non reattiva dell'esempio (<code>not-responsive.html</code>), poi sono andato in <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design View</a> (<em>Tools > Web Developer > Responsive Design View - In Firefox, dal sandwich menù -> Sviluppo -> Modalità visualizzazione flessibile</em>), che ti permette di guardare il layout della tua pagina come se fosse visto attraverso dispositivi con diversa dimensione dello schermo.</p> - -<p>Ho impostato la larghezza viewport a 320px e poi a 480px; per ciascuna sono andato nel <a href="/en-US/docs/Tools/Page_Inspector">DOM Inspector</a>, ho cliccato sull'elemento {{htmlelement("img")}} a cui ero interessato e ho guardato la dimensione nella scheda vista Box Model sulla destra del monitor. Questo dovrebbe dare la larghezza dell'immagine di cui si ha bisogno.</p> - -<p><img alt="A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels." src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;"></p> - -<p>Dopo, si può controllare se <code>srcset</code> sta funzionando impostando la larghezza viewport come si desidera (impostatela stretta, per esempio), aprendo il Network Inspector (<em>Tools > Web Developer > Network</em>), poi ricaricando la pagina. Questo dovrebbe dare una lista di risorse che sono state scaricate per per mostrare la pagina e quindi si potrà verificare quale file è stato scelto e scaricato.</p> - -<p><img alt="a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p> - -<h3 id="Modificare_la_risoluzione_stessa_dimensione_diverse_risoluzioni">Modificare la risoluzione: stessa dimensione, diverse risoluzioni</h3> - -<p>Se stai supportando diverse risoluzioni, ma tutti vedono la tua immagine alla stessa dimensione reale sullo schermo, puoi permettere al browser di scegliere una immagine di risoluzione appropriata usando l'attributo <code>srcset</code> con il descrittore x (x-descriptors) e senza <code>sizes</code> — una sintassi piuttosto semplice! Puoi trovare un esempio di come appare in <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (vedere anche il <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">codice sorgente</a>):</p> - -<pre class="brush: html"><img srcset="elva-fairy-320w.jpg, - elva-fairy-480w.jpg 1.5x, - elva-fairy-640w.jpg 2x" - src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"> -</pre> - -<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">In questo esempio è stato applicato il seguente CSS all'immagine per farle avere una larghezza di 320 pixels sullo schermo (also called CSS pixels):</p> - -<pre class="brush: css">img { - width: 320px; -}</pre> - -<p>In questo caso <code>sizes</code> non è necessario — il browser calcola qual è la risoluzione del display su cui è mostrato e fornisce l'immagine più appropriata tra quelle elencate in <code>srcset</code>. Così se il dispositivo che accede alla pagina ha un display standard a bassa risoluzione, with one device pixel representing each CSS pixel, viene caricata l'immagine <code>elva-fairy-320w.jpg</code> (il descrittore 1x è implicito e non c'è bisogno di specificarlo.) Se il dispositivo ha una alta risoluzione di 2 pixel per ogni pixel CSS o più, viene caricata l'immagine <code>elva-fairy-640w.jpg</code>. L'immagine a 640px è di 93KB, mentre quella a 320px è di soli 39KB.</p> - -<h3 id="Art_direction">Art direction</h3> - -<p>To recap, the <strong>art direction problem</strong> involves wanting to change the image displayed to suit different image display sizes. For example, if a large landscape shot with a person in the middle is shown on a website when viewed on a desktop browser, then shrunk down when the website is viewed on a mobile browser, it will look bad as the person will be really tiny and hard to see. It would probably be better to show a smaller, portrait image on mobile, which shows the person zoomed in. The {{htmlelement("picture")}} element allows us to implement just this kind of solution.</p> - -<p>Returning to our original <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a> example, we have an image that badly needs art direction:</p> - -<pre class="brush: html"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"></pre> - -<p>Let's fix this, with {{htmlelement("picture")}}! Like <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code><video></code> and <code><audio></code></a>, The <code><picture></code> element is a wrapper containing several {{htmlelement("source")}} elements that provide several different sources for the browser to choose between, followed by the all-important {{htmlelement("img")}} element. the code in <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> looks like so:</p> - -<pre class="brush: html"><picture> - <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> - <source media="(min-width: 800px)" srcset="elva-800w.jpg"> - <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"> -</picture> -</pre> - -<ul> - <li>The <code><source></code> elements include a <code>media</code> attribute that contains a media condition — as with the first <code>srcset</code> example, these conditions are tests that decide which image is shown — the first one that returns true will be displayed. In this case, If the viewport width is 799px wide or less, the first <code><source></code> element's image will be displayed. If the viewport width is 800px or more, it'll be the second one.</li> - <li>The <code>srcset</code> attributes contain the path to the image to display. Note that just as we saw with <code><img></code> above, <code><source></code> can take a <code>srcset</code> attribute with multiple images referenced, and a <code>sizes</code> attribute too. So you could offer multiple images via a <code><picture></code> element, but then also offer multiple resolutions of each one too. Realistically, you probably won't want to do this kind of thing very often.</li> - <li>In all cases, you must provide an <code><img></code> element, with <code>src</code> and <code>alt</code>, right before <code></picture></code>, otherwise no images will appear. This provides a default case that will apply when none of the media conditions return true (you could actually remove the second <code><source></code> element in this example), and a fallback for browsers that don't support the <code><picture></code> element.</li> -</ul> - -<p>This code allows us to display a suitable image on both wide screen and narrow screen displays, as shown below:</p> - -<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p> - -<div class="note"> -<p><strong>Note</strong>: You should use the <code>media</code> attribute only in art direction scenarios; when you do use <code>media</code>, don't also offer media conditions within the <code>sizes</code> attribute.</p> -</div> - -<h3 id="Why_can't_we_just_do_this_using_CSS_or_JavaScript">Why can't we just do this using CSS or JavaScript?</h3> - -<p>When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's CSS and JavaScript. This is a useful technique, which on average has shaved 20% off page load times. However, it is not helpful for responsive images, hence the need to implement solutions like <code>srcset</code>. You couldn't for example load the {{htmlelement("img")}} element, then detect the viewport width with JavaScript and dynamically change the source image to a smaller one if desired. By then, the original image would already have been loaded, and you would load the small image as well, which is even worse in responsive image terms.</p> - -<ul> -</ul> - -<h3 id="Use_modern_image_formats_boldly">Use modern image formats boldly</h3> - -<p>There are several exciting new image formats (such as WebP and JPEG-2000) that can maintain a low file size and high quality at the same time. However, browser support is spotty.</p> - -<p><code><picture></code> lets us continue catering to older browsers. You can supply MIME types inside <code>type</code> attributes so the browser can immediately reject unsupported file types:</p> - -<pre class="brush: html"><picture> - <source type="image/svg+xml" srcset="pyramid.svg"> - <source type="image/webp" srcset="pyramid.webp"> - <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> -</picture> -</pre> - -<ul> - <li>Do <em>not </em>use the <code>media</code> attribute, unless you also need art direction.</li> - <li>In a <code><source></code> element, you can only refer to images of the type declared in <code>type</code>.</li> - <li>As before, you're welcome to use comma-separated lists with <code>srcset</code> and <code>sizes</code>, as needed.</li> -</ul> - -<h2 id="Active_learning_Implementing_your_own_responsive_images">Active learning: Implementing your own responsive images</h2> - -<p>For this active learning, we're expecting you to be brave and go it alone ... mostly. We want you to implement your own suitable art directed narrow screen/wide screen shot using <code><picture></code>, and a resolution switching example that uses <code>srcset</code>.</p> - -<ol> - <li>Write some simple HTML to contain your code (use <code>not-responsive.html</code> as a starting point, if you like)</li> - <li>Find a nice wide screen landscape image with some kind of detail contained in it somewhere. Create a web-sized version of it using a graphics editor, then crop it to show a smaller part that zooms in on the detail, and create a second image (about 480px wide is good for this.)</li> - <li>Use the <code><picture></code> element to implement an art direction picture switcher!</li> - <li>Create multiple image files of different sizes, each showing the same picture.</li> - <li>Use <code>srcset</code>/<code>size</code> to create a resolution switcher example, either to serve the same size image at different resolutions, or different image sizes at different viewport widths.</li> -</ol> - -<div class="note"> -<p><strong>Note</strong>: Use the browser devtools to help work out what sizes you need, as mentioned above.</p> -</div> - -<h2 id="Summary">Summary</h2> - -<p>That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:</p> - -<ul> - <li><strong>Art direction</strong>: The problem whereby you want to serve cropped images for different layouts — for example a landscape image showing a full scene for a desktop layout, and a portrait image showing the main subject zoomed in close for a mobile layout. This can be solved using the {{htmlelement("picture")}} element.</li> - <li><strong>Resolution switching</strong>: The problem whereby you want to serve smaller image files to narrow screen devices, as they don't need huge images like desktop displays do — and also optionally that you want to serve different resolution images to high density/low density screens. This can be solved using <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">vector graphics</a> (SVG images), and the {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} attributes.</li> -</ul> - -<p>This also draws to a close the entire <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a> module! The only thing to do now before moving on is to try our multimedia assessment, and see how you get on. Have fun.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Jason Grigsby's excellent introduction to responsive images</a></li> - <li>{{htmlelement("img")}}</li> - <li>{{htmlelement("picture")}}</li> - <li>{{htmlelement("source")}}</li> -</ul> - -<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div> diff --git a/files/it/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/it/learn/html/multimedia_and_embedding/video_and_audio_content/index.html deleted file mode 100644 index a6c5b0f258..0000000000 --- a/files/it/learn/html/multimedia_and_embedding/video_and_audio_content/index.html +++ /dev/null @@ -1,271 +0,0 @@ ---- -title: Contenuti video e audio -slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content -original_slug: Learn/HTML/Multimedia_and_embedding/contenuti_video_e_audio ---- -<div>{{LearnSidebar}}</div> - -<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div> - -<p class="summary">Adesso che siamo pratici con l'aggiunta di immagini, il passo successivo è cominciare ad aggiungere lettori video e audio ai documenti HTML. In questo articolo vedremo come farlo, con gli elementi {{htmlelement("video")}} e {{htmlelement("audio")}}; finiremo dando uno sguardo a come si aggiungono i sottotitoli ai video.</p> - -<table class="learn-box standard-table"> - <tbody> - <tr> - <th scope="row">Prerequisiti:</th> - <td>Competenze base sui computer, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">software di base installato</a>, conoscenze base di gestione dei file (<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>), familiarità coi fondamenti di HTML (come trattati in <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Cominciare con l'HTML</a>) e con <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Immagini in HTML</a>.</td> - </tr> - <tr> - <th scope="row">Obbiettivi:</th> - <td>Imparare ad inserire contenuti video e audio nelle webpage e aggiungere i sottotitoli ai video.</td> - </tr> - </tbody> -</table> - -<h2 id="Audio_e_video_nel_web">Audio e video nel web</h2> - -<p>Gli sviluppatori Web han voluto usare video e audio per lungo tempo, fin dai primi anni del terzo millennio, quando abbiamo cominciato ad avere la banda larga, veloce abbastanza da supportare ogni tipo di video (i file video sono molto più grandi dei file testo o immagine). Nei primi tempi, le tecnologie nate per il web, come l'HTML, non avevano la capacità di integrare video e audio nel web, così, per poterlo fare, sono diventate popolari delle tecnologie proprietarie (e i plugin basati su di esse), come <a href="https://en.wikipedia.org/wiki/Adobe_Flash">Flash</a> (e più tardi <a href="https://en.wikipedia.org/wiki/Microsoft_Silverlight">Silverlight</a>). Questo tipo di tecnologie funziona bene, ma ha numerosi problemi, tra cui: non essere ben integrate con HTML/CSS, problemi di sicurezza e di accessibilità.</p> - -<p>Una soluzione nativa, sviluppata apposta, avrebbe risolto molti di questi problemi. Fortunatamente, pochi anni dopo, la specifica {{glossary("HTML5")}} aveva queste caratteristiche, conferite dall'aggiunta degli elementi {{htmlelement("video")}} e {{htmlelement("audio")}} e di alcune brillanti nuove {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} per il loro controllo. Non vedremo JavaScript qui — vedremo solo le fondamenta che possono essere ottenute con l'HTML.</p> - -<p>Non ti insegneremo a produrre file audio e video, cosa per la quale sono richieste competenze totalmente diverse. Ti forniremo <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">campioni audio, video e esempi di codice</a> per i tuoi esperimenti, nel caso che tu non possa ottenerli per tuo conto.</p> - -<div class="note"> -<p><strong>Nota</strong>: Prima di cominciare, dovresti anche sapere che ci sono abbastanza pochi {{glossary("OVP","OVPs")}} (online video providers - fornitori di video online) come <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a>, e <a href="https://vimeo.com/">Vimeo</a>, e fornitori di audio online, come <a href="https://soundcloud.com/">Soundcloud</a>. Queste compagnie offrono un modo comodo e facile per pubblicare e fruire di video, così che tu non ti debba preoccupare dell'enorme consumo di banda. Queste compagnie OVP, in genere, offrono anche il codice da usare per integrare video/audio nelle tue pagine web. Se segui questa strada puoi evitare alcune delle difficoltà di cui discutiamo in questo articolo. Vedremo un po meglio questo tipo di servizi nel prossimo articolo.</p> -</div> - -<h3 id="L'elemento_<video>">L'elemento <video></h3> - -<p>L'elemento {{htmlelement("video")}} permette di aggiungere un video in modo molto semplice. Un esempio può essere questo:</p> - -<pre class="brush: html"><video src="rabbit320.webm" controls> - <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> -</video></pre> - -<p>Le caratteristiche sono:</p> - -<dl> - <dt>{{htmlattrxref("src","video")}}</dt> - <dd>Come per l'elemento {{htmlelement("img")}}, l'attributo <code>src</code> contiene il percorso al video che vuoi integrare nella pagina; funziona esattamente nello stesso modo.</dd> - <dt>{{htmlattrxref("controls","video")}}</dt> - <dd>Gli utenti devono poter controllare il riavvolgimento e la ripetizione del video o dell'audio (è particolarmente importante per i malati di <a href="https://en.wikipedia.org/wiki/Epilepsy#Epidemiology">epilessia</a>). Si può usare sia l'attributo <code>controls</code> per aggiungere l'interfaccia di controllo propria del browser, sia costruire la propria interfaccia usando le appropriate <a href="/en-US/docs/Web/API/HTMLMediaElement">API JavaScript</a>. Come minimo, l'interfaccia deve offrire la possibilità di avviare e fermare il media e di regolare il volume.</dd> - <dt>Il paragrafo tra i tag <code><video></code></dt> - <dd>Questo paragrafo è chiamato <strong>fallback content</strong> (contenuto di ripiego) — sarà mostrato se il browser che accede alla pagina non supporta l'elemento <code><video></code>, offrendo un'alternativa per i vecchi browser. Può essere qualunque cosa vogliate; si può ad esempio fornire un collegamento diretto al file video, così che l'utente possa accedervi in qualche modo, indipendentemente dal browser che usa.</dd> -</dl> - -<p>Il video integrato apparirà più o meno così:</p> - -<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p> - -<p>Puoi provare l'esempio qui: <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">try the example</a> (vedi anche il <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">codice sorgente</a>).</p> - -<h3 id="Supportare_molti_formati">Supportare molti formati</h3> - -<p>C'è un problema con l'esempio qui sopra, che potresti aver già notato se hai provato ad accedere il live link con un browser come Safari o Internet Explorer. Il video non parte! Ciò è dovuto al fatto che i browser supportano formati video (e audio) diversi.</p> - -<p>Passiamo rapidamente in rassegna la terminologia. Formati come MP3, MP4 e WebM sono chiamati <strong>container formats</strong> (formati container). Contengono diverse parti che costituiscono l'intera canzone o video — come un'unica traccia audio (o un unica traccia video nel caso dei video) e i metadati per descrivere il media (mezzo espressivo) che viene presentato.</p> - -<p>Anche le tracce audio e video hanno diversi formati, per esempio:</p> - -<ul> - <li>Un contenitore WebM in genere include l'audio Ogg Vorbis con un video VP8/VP9. Ciò è supportato principalmente in Firefox e Chrome.</li> - <li>Un MP4 spesso include audio AAC o MP3 con video H.264. Questa soluzione è principalmente supportata in Internet Explorer e Safari.</li> - <li>Il più vecchio contenitore Ogg tende ad andare verso l'audio Ogg Vorbis e il video Ogg Theora. Questa soluzione era supportata principalmente in Firefox e Chrome, ma è sostanzialmente stata rimpiazzata dal formato di migliore qualità WebM.</li> -</ul> - -<p>Un player audio tenderà a riprodurre una traccia audio direttamente, ad es. un MP3 o un file Ogg; queste non necessitano di contenitori.</p> - -<div class="note"> -<p><strong>Nota</strong>: non è così semplice, come puoi vedere nella nostra tabella<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility"> audio-video codec compatibility table</a>. Inoltre, molti browser dei portatili possono riprodurre un formato non supportato passandone la gestione al media player del sistema perché lo riproduca. Ma per ora ce n'è già abbastanza.</p> -</div> - -<p>I formati precedenti esistono per comprimere i video e gli audio in file maneggiabili (i video e gli audio originali sono molto pesanti). I browser contengono differenti <strong>{{Glossary("Codec","Codecs")}}</strong>, come Vorbis o H.264, che sono usati per covertire i video e gli audio compressi in file binari e viceversa. Come già detto, sfortunatamente, non tutti i borwser supportano gli stessi codecs, così si dovranno fornire molti file, per ogni riproduttore di media. Se manca il giusto codec per decodificare il media, questo non si avvierà.</p> - -<div class="note"> -<p><strong>Nota:</strong> ti potresti chiedere il perché di questa situazione. I formati <strong>MP3 </strong> (for audio) and <strong>MP4/H.264</strong> (for video) sono entrambi ampiamente supportati e di buona qualità. Tuttavia, sono anche ricoperti da brevetto — Il brevetto americano copre MP3 fino almeno al 2017, e H.264 fino al 2027 come minimo; ciò significa che i browser che non detengono il brevetto devono pagare parecchio per poter supportare questi formati. Inoltre, molte persone evitano per principio i software con delle restrizioni, in favore dei formati aperti.</p> -</div> - -<p>Quindi, come facciamo ad offrire diversi formati? Dai uno sguardo al seguente <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">updated example</a> (<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">try it live here</a>, also):</p> - -<pre class="brush: html"><video controls> - <source src="rabbit320.mp4" type="video/mp4"> - <source src="rabbit320.webm" type="video/webm"> - <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> -</video></pre> - -<p>Qui abbiamo tirato fuori l'attributo <code>src</code> dal tag <code><video></code> e abbiamo invece incluso elementi {{htmlelement("source")}} che puntano ciascuno a una risorsa. In questo caso il browser cercherà tra gli elementi <code><source></code> e riprodurrà il primo per il quale ha il codec. Includere i formati WebM e MP4 dovrebbe essere sufficiente a riprodurre il tuo video sulla maggioranza delle piattaforme e dei browser di oggi.</p> - -<p>Ogni elemento <code><source></code> ha un attributo <code>type</code>; è opzionale, ma è consigliato metterlo — contiene i {{glossary("MIME type","MIME types")}} dei file video e i browser possono leggerli e scartare immediatamente i formati che non capiscono. Se non viene messo, i browser dovranno caricare i file e provare a riprodurli fino a che ne troveranno uno che funziona, usando molto più tempo e risorse.</p> - -<div class="note"> -<p><strong>Nota</strong>: il nostro <a href="/en-US/docs/Web/HTML/Supported_media_formats">articolo sui formati media supportati </a>contiene alcuni comuni {{glossary("MIME type","MIME types")}}.</p> -</div> - -<h3 id="Altre_caratteristiche_dell'elemento_<video>">Altre caratteristiche dell'elemento <video></h3> - -<p>Ci sono numerose altre funzionalità che possono essere incluse in un video HTML5. Dai un occhiata al nostro terzo esempio:</p> - -<pre class="brush: html"><video controls width="400" height="400" - autoplay loop muted - poster="poster.png"> - <source src="rabbit320.mp4" type="video/mp4"> - <source src="rabbit320.webm" type="video/webm"> - <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> -</video> -</pre> - -<p>Questo ci darà un output simile a questo:</p> - -<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;">Le nuove funzionalità sono:</p> - -<dl> - <dt>{{htmlattrxref("width","video")}} e {{htmlattrxref("height","video")}}</dt> - <dd>Puoi controllare la dimensione del video sia con questi attributi che con i {{Glossary("CSS")}}. In entrambi i casi i video mantengono il loro rapporto larghezza-altezza nativo, conosciuto come <strong>aspect ratio</strong>. Se il rapporto d'aspetto non è mantenuto dalle dimensioni impostate da te, il video sarà ridimensionato fino alla dimensione orizzontale e lo spazio non occupato verticalmente verrà riempito, di default, con uno sfondo colorato.</dd> - <dt>{{htmlattrxref("autoplay","video")}}</dt> - <dd>Questo attributo fa partire l'audio o il video immediatamente, durante il caricamento della pagina. Ti suggeriamo di non usare l'autoplay nel tuo sito, perché gli utenti possono trovarlo molto fastidioso.</dd> - <dt>{{htmlattrxref("loop","video")}}</dt> - <dd>Questo attributo fa ricominciare il video (o l'audio) nuovamente, ogni volta che finisce. Anche questo può essere fastidioso, quindi usalo solo se necessario.</dd> - <dt>{{htmlattrxref("muted","video")}}</dt> - <dd>Questo attributo fa si che il video parta con l'audio disattivato per default.</dd> - <dt>{{htmlattrxref("poster","video")}}</dt> - <dd>Questo attributo ha per valore l'URL di una immagine che sarà mostrata prima dell'avvio del video. Si suppone sia usata come schermata di lancio, promozionale.</dd> -</dl> - -<p>Puoi trovare gli esempi sopra su <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">play live on Github</a> (also <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">see the source code</a>). Nota che non abbiamo incluso l'attributo <code>autoplay</code> nella versione live — se il video parte appena la pagina viene caricata, non potrai vedere il poster!</p> - -<h3 id="L'elemento_<audio>">L'elemento <audio></h3> - -<p>L'elemento {{htmlelement("audio")}} funziona esattamente come l'elemento {{htmlelement("video")}}, con poche minime differenze illustrate qui sotto. Un esempio tipico potrebbe apparire così:</p> - -<pre class="brush: html"><audio controls> - <source src="viper.mp3" type="audio/mp3"> - <source src="viper.ogg" type="audio/ogg"> - <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p> -</audio></pre> - -<p>Ciò produce qualcosa del genere, in un browser:</p> - -<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p> - -<div class="note"> -<p><strong>Nota</strong>: Puoi riprodurre<a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html"> the audio demo live</a> on Github (also see the <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">audio player source code</a>.)</p> -</div> - -<p>Questo occupa meno spazio di un player video, perché non c'è la componente visiva — devi solo visualizzare i controlli per l'audio. Altre differenze dall'HTML5 video sono queste:</p> - -<ul> - <li>l'elemento {{htmlelement("audio")}} non supporta gli attributi <code>width</code>/<code>height</code> — non essendoci la componente video, non c'è nulla a cui poter assegnare larghezza o altezza.</li> - <li>non supporta neanche l'attributo <code>poster</code> — per la stessa ragione: nessuna componente visiva.</li> -</ul> - -<p>A parte ciò, <code><audio></code> supporta tutte le caratteristiche di <code><video></code> — puoi vedere la precedente sezione per avere informazioni a riguardo, se non l'hai ancora vista.</p> - -<h2 id="Mostrare_le_traccie_testuali_(sottotitoli)_dei_video">Mostrare le traccie testuali (sottotitoli) dei video</h2> - -<p>Adesso discuteremo un concetto leggermente più avanzato, che è molto utile conoscere. Molta gente non può o non vuole ascoltare il contenuto audio del web, almeno certe volte. Per esempio:</p> - -<ul> - <li>molta gente ha invalidità uditive (difficoltà di ascolto, sordità) e non può sentire l'audio.</li> - <li>altri potrebbero non essere in grado di sentire perchè si trovano in un ambiente rumoroso (come un bar affollato quando viene trasmesso un evento sportivo) o potrebbero voler evitare di disturbare gli altri, se si trovano in un ambiente silenzioso (come una bibblioteca).</li> - <li>le persone che non parlano la lingua del video, potrebbero desiderare una trascrizione o una traduzione che gli aiuti a capire il contenuto del media.</li> -</ul> - -<p>Non sarebbe bello poter fornire a queste persone una trascrizione del testo enunciato nel video/audio? Bene, grazie all'HTML5 si può; con il formato <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> e l'elemento {{htmlelement("track")}}.</p> - -<div class="note"> -<p><strong>Nota</strong>: "Transcribe (trascrivere)" e "transcript (trascrizione)" significa creare un testo scritto che riproduce le parole come sono pronunciate.</p> -</div> - -<p>WebVTT è un formato per scrivere file di testo contenenti molteplici stringhe di testo insieme a metadati come il tempo a cui vuoi che ogni stringa sia mostrata e limitate informazioni relative allo stile e alla opsizione. Queste stringhe di testo sono chiamate <strong>cues (battute)</strong>, e se ne possono visualizzare diversi tipi che hanno scopi diversi; le più comuni sono:</p> - -<dl> - <dt>subtitles</dt> - <dd>Traduzioni di materiale straniero, per chi non capisce la lingua</dd> - <dt>captions</dt> - <dd>trascrizioni sincronizzate di dialoghi o descrizioni di suoni significativi, per permettere a chi non può sentire l'audio di capire cosa sta succedendo.</dd> - <dt>timed descriptions</dt> - <dd>testo che deve essere convertito in audio, per essere disponibile a chi ha disabilità visive.</dd> -</dl> - -<p>Un tipico file WebVTT appare così:</p> - -<pre class="eval line-numbers language-html"><code class="language-html">WEBVTT - -1 -00:00:22.230 --> 00:00:24.606 -This is the first subtitle. - -2 -00:00:30.739 --> 00:00:34.074 -This is the second. - - ...</code> -</pre> - -<p>Per visualizzarlo insieme al riproduttore di media HTML, devi:</p> - -<ol> - <li>salvarlo come file <code>.vtt</code> in un posto adatto</li> - <li>collegare il file <code>.vtt</code>con l'elemento {{htmlelement("track")}}. Questo elemento <code><track></code> deve essere annidato dentro <code><audio></code> o <code><video></code>, ma dopo tutti gli elementi <code><source></code>. Usa l'attributo {{htmlattrxref("kind","track")}} per specificare se le battute sono <code>subtitles</code>, <code>captions</code>, o <code>descriptions</code>. Inoltre, usa l'attributo {{htmlattrxref("srclang","track")}} per dire al browser in quale lingua sono scritti i sottotitoli.</li> -</ol> - -<p>Ecco un esempio:</p> - -<pre class="brush: html"><video controls> - <source src="example.mp4" type="video/mp4"> - <source src="example.webm" type="video/webm"> - <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> -</video></pre> - -<p>Ciò produrrà un video coi sottotitoli visualizzati più o meno così:</p> - -<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> - -<p>Per avere più dettagli, leggi <a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>. Puoi trovare l'esempio sviluppato in questo articolo qui: <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">find the example</a>, su Github, scritto da Ian Devlin (guarda anche il <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">codice sorgente)</a>. Questo esempio usa alcuni JavaScript per permettere agli utenti di scegliere tra differenti sottotitoli. Nota che per attivare i sottotitoli, devi premere il bottone "CC" e selezionare un'opzione — English, Deutch, o Español. </p> - -<div class="note"> -<p><strong>Nota</strong>: le "Text tracks" ti aiutano anche con la {{glossary("SEO")}}, perché i motori di ricerca brillano particolarmente coi testi. I sottotitoli (Text tracks/traccie di testo) permettono ai motori di ricerca, persino di linkare direttamente una certa parte del video.</p> -</div> - -<h2 id="Active_learning_Includere_un_proprio_audio_o_video">Active learning: Includere un proprio audio o video</h2> - -<p>Per questo apprendimento attivo, ci piacerebbe che tu andassi fuori a registrare alcuni video tuoi — molti telefoni, oggi, consentono di registrare audio e video molto facilmente e se riesci a trasferirli sul tuo computer, li puoi usare. Potresti dover fare alcune conversioni per ottenere i formati WebM o MP4, per i video, oppure MP3 o Ogg, per l'audio, ma ci sono molti programmi che permettono di farlo senza problemi, come <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> e <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. Ci piacerebbe che facessi un tentativo!</p> - -<p>Se non sai generare acun video o audio, allora puoi usare i nostri <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">campioni di file video e audio</a> per portare a termine l'esercizio. Puoi anche usare i campioni di codice come riferimento.</p> - -<p>Ci piacerebbe che:</p> - -<ol> - <li>salvassi i tuoi file audio e video in una nuova directory sul tuo computer,</li> - <li>creassi un nuovo file <code>index.html</code> nella stessa directory,</li> - <li>aggiungessi gli elementi <code><audio></code> e <code><video></code> alla pagina facendogli mostrare i controlli di default del browser,</li> - <li>dessi a entrambi degli elementi <code><source></code> così che il browser trovi il formato che supportano meglio e lo caricassero; ciò include l'uso dell'attributo <code>type</code>,</li> - <li>dessi all'elemento <code><video></code> un poster da visualizzare prima che il video venga avviato. Divertiti a creare il tuo personale poster disegnato.</li> -</ol> - -<p>Per raggiungere dei bonus, puoi provare a cercare text tracks (sottotitoli) e studiare come aggiungere qualche trascrizione al tuo video.</p> - -<h2 id="Conclusioni">Conclusioni</h2> - -<p>Questo è quanto. Speriamo tu ti sia divertito/a a giocare con contenuti video e audio! Nel prossimo articolo vedremo altri modi per inserire contenuti nelle pagine web, usando tecnologie come gli {{htmlelement("iframe")}} e gli {{htmlelement("object")}}.</p> - -<h2 id="Vedi_anche">Vedi anche</h2> - -<ul> - <li>{{htmlelement("audio")}}</li> - <li>{{htmlelement("video")}}</li> - <li>{{htmlelement("source")}}</li> - <li>{{htmlelement("track")}}</li> - <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Aggiungere captions e subtitles ai video HTML5</a></li> - <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Distribuire Audio and Video</a>: MOLTI dettagli su come mettere audio e video nelle pagine web usando HTML e JavaScript.</li> - <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Manipolazione di Audio e Video</a>: MOLTI dettagli sulla manipolazione di audio e video usando JavaScript (per esempio come aggiungere dei filtri).</li> -</ul> - -<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p> - -<dl> -</dl> - -<ul> -</ul> diff --git a/files/it/learn/html/tables/index.html b/files/it/learn/html/tables/index.html deleted file mode 100644 index af7fae7ac0..0000000000 --- a/files/it/learn/html/tables/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: HTML Tables -slug: Learn/HTML/Tables -tags: - - Article - - Beginner - - CodingScripting - - Guide - - HTML - - Landing - - Module - - NeedsTranslation - - Tables - - TopicStub -translation_of: Learn/HTML/Tables ---- -<div>{{LearnSidebar}}</div> - -<p class="summary">A very common task in HTML is structuring tabular data, and it has a number of elements and attributes for just this purpose. Coupled with a little <a href="/en-US/docs/Learn/CSS">CSS</a> for styling, HTML makes it easy to display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team. This module takes you through all you need to know about structuring tabular data using HTML.</p> - -<h2 id="Prerequisites">Prerequisites</h2> - -<p>Before starting this module, you should already have covered the basics of HTML — see <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>.</p> - -<div class="note"> -<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p> -</div> - -<h2 id="Guides">Guides</h2> - -<p>This module contains the following articles:</p> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Tables/Basics">HTML table basics</a></dt> - <dd>This article gets you started with HTML tables, covering the very basics such as rows and cells, headings, making cells span multiple columns and rows, and how to group together all the cells in a column for styling purposes.</dd> - <dt><a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a></dt> - <dd>In the second article in this module, we look at some more advanced features of HTML tables — such as captions/summaries and grouping your rows into table head, body and footer sections — as well as looking at the accessibility of tables for visually impaired users.</dd> -</dl> - -<h2 id="Assessments">Assessments</h2> - -<dl> - <dt><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Structuring planet data</a></dt> - <dd>In our table assessment, we provide you with some data on the planets in our solar system, and get you to structure it into an HTML table.</dd> -</dl> |