{"id":51360,"date":"2022-03-08T06:41:00","date_gmt":"2022-03-08T05:41:00","guid":{"rendered":"https:\/\/sos-wp.it\/?p=51360"},"modified":"2025-04-08T11:28:21","modified_gmt":"2025-04-08T09:28:21","slug":"guida-html-css","status":"publish","type":"post","link":"https:\/\/sos-wp.it\/tutorial\/guida-html-css\/","title":{"rendered":"HTML e CSS &#8211; La guida completa per principianti"},"content":{"rendered":"\n<div class=\"wp-block-media-text alignwide has-media-on-the-right is-stacked-on-mobile img-evidenza\"><div class=\"wp-block-media-text__content\">\n<p class=\"has-text-align-left\">Per costruire e gestire il tuo sito WordPress non hai bisogno di <strong>imparare <span id=\"urn:enhancement-246f1704-8096-f224-9150-844e09aaa390\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> e CSS.<\/strong> Ma potrebbe tornarti utile. <\/p>\n\n\n\n<p class=\"has-text-align-left\">Con una conoscenza anche sollo di base del linguaggio HTML e di come \u00e8 strutturato il CSS puoi per esempio personalizzare il tuo sito e gestire l&#8217;aspetto di tutti gli elementi delle pagine.<\/p>\n\n\n\n<p class=\"has-text-align-left\">In questa <strong>guida <span id=\"urn:enhancement-63b135b9-ca3a-db94-cfb9-49ee6a293014\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> e <span id=\"urn:enhancement-74d69001-d66e-6a50-5c4d-7234a78fc71c\" class=\"textannotation disambiguated wl-thing\">CSS<\/span><\/strong> scoprirai come fare, senza dover studiare codici per ore. <\/p>\n<\/div><figure class=\"wp-block-media-text__media\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"548\" src=\"https:\/\/sos-wp.it\/wp-content\/uploads\/HTML-CSS-la-guida-introduttiva-per-chi-usa-WordPress-rettangolo-min-1024x548.png\" alt=\"HTML &amp; CSS la guida introduttiva per chi usa WordPress\" class=\"wp-image-109239 size-full\"\/><\/figure><\/div>\n\n\n\n\n\n\n\n<p>E se hai una domanda specifica usa la funzione di ricerca del tuo browser: ho preparato delle comode tabelle riassuntive in cui troverai in un attimo quello che ti serve. Se vuoi puoi anche scaricarle per averle a portata di mano.<\/p>\n\n\n\n<p>Ma prima di passare ai dettagli vediamo rapidamente cosa sono l&#8217;HTML e il CSS.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cos&#8217;\u00e8 l&#8217;HTML<\/h2>\n\n\n\n<p class=\"has-text-align-left\">L&#8217;<span id=\"urn:enhancement-14555590-d159-6c84-01b0-f1a8e60b9321\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> \u00e8 un linguaggio di markup, <em><span id=\"urn:enhancement-e71eb6c8-3072-36ab-fc44-d386425e4db1\" class=\"textannotation disambiguated wl-thing\">HyperText Markup Language<\/span><\/em>, e questo significa che serve a definire qual \u00e8 la funzione dei vari elementi di una pagina web, dal punto di vista della struttura e della formattazione.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Con l&#8217;<span id=\"urn:enhancement-68c16528-cbb0-9472-696d-bfd972a021cc\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> diciamo alle varie parti di testo se sono titoli, sottotitoli, paragrafi, elenchi&#8230; oppure possiamo aggiungere immagini e link.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Cos&#8217;\u00e8 il CSS<\/h2>\n\n\n\n<p class=\"has-text-align-left\">Il <span id=\"urn:enhancement-72325082-c853-4df1-5890-a0c9a1a9497d\" class=\"textannotation disambiguated wl-thing\">CSS<\/span> \u00e8 un altro codice che si applica all&#8217;<span id=\"urn:enhancement-c899ddfa-78aa-40f5-51fd-e319421779cc\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> e <strong>serve a definire l&#8217;aspetto<\/strong> degli elementi di una pagina web. Con il <span id=\"urn:enhancement-9e8c9f60-3986-2d82-2123-042698fc2b4d\" class=\"textannotation disambiguated wl-thing\">CSS<\/span> possiamo stabilire colori, dimensioni, posizioni dei vari elementi.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Il <span id=\"urn:enhancement-885c9310-aef3-5fc4-7d76-b3cdfa7c1d52\" class=\"textannotation disambiguated wl-thing\">CSS<\/span> \u00e8 quindi ci\u00f2 che d\u00e0 forma e colore alle pagine web.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Ora che abbiamo capito a cosa servono questi codici, entriamo nella vera e propria <strong>guida <span id=\"urn:enhancement-125a2404-f368-a36a-4edc-492f6142bf16\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> e <span id=\"urn:enhancement-1e0a8685-b317-39d4-e30b-f5cc2e3f884f\" class=\"textannotation disambiguated wl-thing\">CSS<\/span><\/strong> e cominciamo a scoprire come usarli.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Guida HTML e CSS<\/h2>\n\n\n\n<p class=\"has-text-align-left\">Come accennavo prima, <strong>l&#8217;<span id=\"urn:enhancement-43c0786f-fad9-5762-b2e0-f5f4c35ccacb\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> e il <span id=\"urn:enhancement-4d613c66-00b0-a83d-3d19-256f0b5d5caa\" class=\"textannotation disambiguated wl-thing\">CSS<\/span><\/strong> ti permettono di gestire personalizzazioni che a volte sono difficili da ottenere con l&#8217;editor a blocchi, tanto meno con l&#8217;editor classico di WordPress.<\/p>\n\n\n\n<p>Per cominciare vediamo dove \u00e8 nascosto il codice HTML di una qualunque pagina per poterlo cos\u00ec modificare:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Apri la pagina di <em>modifica<\/em> di un tuo articolo qualsiasi del tuo <a href=\"https:\/\/sos-wp.it\/come-creare-sito-web\/\" target=\"_blank\" rel=\"noopener\">sito WordPress<\/a>.<\/li>\n\n\n\n<li>Seleziona un blocco, clicca sui tre puntini delle opzioni e vai su <em>Modifica come HTML<\/em>. Se invece usi l&#8217;editor classico, vai nel riquadro dei contenuti. Noterai che hai due linguette, <em>Visuale<\/em>, che \u00e8 quella selezionata, e <em>Testo<\/em>.<\/li>\n\n\n\n<li>In entrambi i casi, vedrai la versione in codice di ci\u00f2 che hai fatto con l&#8217;editor visuale.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-left\">Se hai bisogno di aggiustare qualche dettaglio che diventa troppo complicato con l&#8217;editor visuale, apri la modifica in HTML e lavora direttamente sul codice.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Guida HTML: la sintassi HTML<\/h2>\n\n\n\n<p class=\"has-text-align-left\">Per poter essere correttamente interpretato dai browser (Google Chrome, Mozilla, Safari ecc.), l&#8217;<span id=\"urn:enhancement-d97a06c7-d778-be34-fc85-85b8081911ad\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> deve rispettare una certa sintassi. E per questo, abbiamo i <em><span id=\"urn:enhancement-6c1e5ef7-108c-c15e-9d76-d722c53b0c98\" class=\"textannotation disambiguated wl-thing\">tag<\/span><\/em>, che segnano dove inizia e dove finisce un certo elemento.<\/p>\n\n\n\n<p class=\"has-text-align-left\">I <span id=\"urn:enhancement-8b66c2c4-a78e-81e3-8d27-f1c1b13e05e9\" class=\"textannotation disambiguated wl-thing\">tag<\/span>, quindi, servono a dire, per esempio, <em>&#8220;Qui inizia un paragrafo&#8230; e qui finisce.&#8221;<\/em>.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Vediamo insieme da cosa sono formati i <span id=\"urn:enhancement-a6050b1e-43f7-fc12-588d-0dd66adb1eef\" class=\"textannotation disambiguated wl-thing\">tag<\/span>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"tag\">I tag<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Per far capire al browser che abbiamo inserito un <span id=\"urn:enhancement-4e7fbbdc-2447-08e4-3285-cd238666488a\" class=\"textannotation disambiguated wl-thing\">tag<\/span>, usiamo i simboli <code>&lt;<\/code> e <code>&gt;<\/code>. Al loro interno inseriamo il nome del <span id=\"urn:enhancement-e12f829f-d03e-55d2-cf55-6d5c9469d086\" class=\"textannotation disambiguated wl-thing\">tag<\/span>, che dovr\u00e0 essere sempre in caratteri minuscoli. Per esempio, quello che definisce un paragrafo \u00e8 la lettera p: <code>&lt;p&gt;<\/code><\/p>\n\n\n\n<p class=\"has-text-align-left\">Con questo <span id=\"urn:enhancement-ddc9b031-1f00-5ca6-b264-5878f85555f8\" class=\"textannotation disambiguated wl-thing\">tag<\/span>, indichiamo al browser che sta iniziando un <em>paragrafo<\/em>.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Per segnalare al browser che il paragrafo, o qualsiasi altro elemento, \u00e8 terminato, usiamo la barra \/ prima del nome del <span id=\"urn:enhancement-0109c2d3-b47a-6089-da30-6a2baf23bf55\" class=\"textannotation disambiguated wl-thing\">tag<\/span>: <code>&lt;\/p&gt;<\/code><\/p>\n\n\n\n<p class=\"has-text-align-left\">Ecco quindi un paragrafo completo:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p&gt;Ciao! Benvenuto nella nostra guida <span id=\"urn:enhancement-aa53165e-4cc0-06eb-1c16-2deaa7189bec\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> e <span id=\"urn:enhancement-ce00446d-2be5-b117-1e33-3c9f9cc3696a\" class=\"textannotation disambiguated wl-thing\">CSS<\/span>!&lt;\/p&gt;<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Questo tipo di <span id=\"urn:enhancement-50cbb904-6eec-7120-8aae-dc3035e6e214\" class=\"textannotation disambiguated wl-thing\">tag<\/span> \u00e8 quello classico, cio\u00e8 \u00e8 formato da un <span id=\"urn:enhancement-af48749b-b28a-8408-8126-1324d83abd69\" class=\"textannotation disambiguated wl-thing\">tag<\/span> di apertura e uno di chiusura.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Ma altri <span id=\"urn:enhancement-36e6208a-16df-4b46-6dd7-2208bd805338\" class=\"textannotation disambiguated wl-thing\">tag<\/span> possono essere &#8220;vuoti&#8221;, cio\u00e8 hanno un <span id=\"urn:enhancement-13e07ef5-dd39-bea1-0d76-228c4934f698\" class=\"textannotation disambiguated wl-thing\">tag<\/span> di apertura, all&#8217;interno del quale si inseriscono tutti i valori di cui abbiamo bisogno, e non c&#8217;\u00e8 bisogno di un <span id=\"urn:enhancement-af6df3c5-f241-dac6-e0fc-b5a54df5994c\" class=\"textannotation disambiguated wl-thing\">tag<\/span> di chiusura. \u00c8 questo il caso del <span id=\"urn:enhancement-fd18e8ab-54e0-7e13-62c1-b3019b42e04d\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <code>&lt;img&gt;<\/code>, per inserire le immagini. Esso contiene il percorso dell&#8217;immagine da inserire: <code>&lt;img src=\"images\/immagine.jpg\"&gt;<\/code>.<\/p>\n\n\n\n<p>Nell&#8217;HTML 5 (la versione attualmente raccomandata dal World Wide Web Consortium) non \u00e8 necessario aggiungere altro, mentre le versioni precedenti richiedevano uno slash prima del simbolo &gt;: <code>&lt;img src=\"images\/immagine.jpg\" \/&gt;<\/code>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"attributi\">Gli attributi<\/h4>\n\n\n\n<p class=\"has-text-align-left\">Forse hai notato che, quando ti ho mostrato il <span id=\"urn:enhancement-cab13a41-36bd-1e1b-2183-07592fb8f465\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <code>&lt;img><\/code>, <strong>ho aggiunto un valore<\/strong>. Infatti, oltre al nome del <span id=\"urn:enhancement-c7e61039-8323-10ed-0b37-9eb9a76285e8\" class=\"textannotation disambiguated wl-thing\">tag<\/span>, ho aggiungo l&#8217;attributo <em>src<\/em>, ossia un&#8217;informazione aggiuntiva. Il valore dell&#8217;attributo si inserisce usando il simbolo di uguale e le virgolette: <code>&lt;img src=\"images\/immagine.jpg\"><\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"struttura\">La struttura di una pagina web<\/h2>\n\n\n\n<p class=\"has-text-align-left\">La pagina web ha una sua struttura ben precisa. Nella parte iniziale ci sono tutte le informazioni sulla pagina. Poi abbiamo la parte relativa ai contenuti, al cui interno troviamo un&#8217;ulteriore suddivisione fra testata, parte principale e parte in fondo alla pagina.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Cominciamo a vedere la sezione iniziale.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"doctype\">Doctype declaration<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE <span id=\"urn:enhancement-89b8f9b9-9819-11e1-8763-a861b0299e61\" class=\"textannotation disambiguated wl-thing\">html<\/span>&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">La prima riga in assoluto di un documento <span id=\"urn:enhancement-3282943c-fa1c-b24d-9ea5-a373cdaf81ef\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> \u00e8 la dichiarazione del tipo di documento. Usando <code>&lt;!DOCTYPE <span id=\"urn:enhancement-716539f9-0700-d511-848b-d488703ab908\" class=\"textannotation disambiguated wl-thing\">html<\/span>&gt;<\/code>, stiamo indicando al browser che useremo la versione di <span id=\"urn:enhancement-359db7ee-9c43-3d52-b65c-5f8a7d2a9750\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> 5.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"html\">&lt;html&gt;<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;<span id=\"urn:enhancement-a979e64c-b7bd-5772-6b0a-266ba3c18546\" class=\"textannotation disambiguated wl-thing\">html<\/span>&gt;\n...tutto il contenuto della pagina...\n&lt;\/<span id=\"urn:enhancement-6162863b-3fb0-4e2b-6390-60fb4973ff8f\" class=\"textannotation disambiguated wl-thing\">html<\/span>&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Dalla seconda riga, iniziamo subito con il primo <span id=\"urn:enhancement-22213839-6951-8b00-e04c-8259f134b01e\" class=\"textannotation disambiguated wl-thing\">tag<\/span>: <code>&lt;<span id=\"urn:enhancement-5544dc8b-c4e4-9956-d037-3f56ca95b6ac\" class=\"textannotation disambiguated wl-thing\">html<\/span>&gt;<\/code>. Questo identifica l&#8217;inizio e la fine dell&#8217;intero documento <span id=\"urn:enhancement-99915259-ff68-69ac-d76f-43b4815468c3\" class=\"textannotation disambiguated wl-thing\">HTML<\/span>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"head\">&lt;head&gt;<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;head&gt;\n...informazioni sulla pagina...\n&lt;\/head&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Il <span id=\"urn:enhancement-4a5d7b85-fc9c-01a3-8233-22848be4a3c6\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <code>&lt;head&gt;<\/code> contiene informazioni sulla pagina, come il titolo, l&#8217;autore o i link <span id=\"urn:enhancement-c8414595-7ee6-4f01-38cc-951f24788b6d\" class=\"textannotation disambiguated wl-thing\">tag<\/span>. Vediamo cosa sono.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"title\">&lt;title&gt;<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;title&gt;Titolo della pagina&lt;\/title&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Il titolo della pagina viene mostrato nella barra del titolo del browser, ma anche nei risultati delle ricerche su Google o altri motori.<\/p>\n\n\n\n<p>Su WordPress, \u00e8 quello che impostiamo come titolo SEO nei plugin come Yoast e Rank Math.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"meta\">&lt;meta&gt;<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;meta charset=\"UTF-8\"&gt;<br>&lt;meta name=\"description\" content=\"Questa \u00e8 una breve descrizione del contenuto della pagina.\"&gt;<br>&lt;meta name=\"author\" content=\"Nome dell'autore\"&gt;<br><\/pre>\n\n\n\n<p class=\"has-text-align-left\">I meta <span id=\"urn:enhancement-ec7e7b06-d68c-8067-025e-c176d81c8bba\" class=\"textannotation disambiguated wl-thing\">tag<\/span> sono tutti &#8220;vuoti&#8221;, cio\u00e8 non hanno bisogno di <span id=\"urn:enhancement-37526d9d-9691-41b0-220c-9a834b008749\" class=\"textannotation disambiguated wl-thing\">tag<\/span> di chiusura, e il loro valore \u00e8 definito dagli attributi <em>name<\/em> e <em>content<\/em>.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Il meta <span id=\"urn:enhancement-9e9f00d5-5b37-d2f0-d96e-a4c76fc71019\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <em>charset<\/em> definisce il tipo di caratteri usati nella pagina. Per le lingue latine, si usa <em>UTF-8<\/em>. Impostare il charset permette, per esempio, che le vocali accentate vengano visualizzate correttamente.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Il meta <span id=\"urn:enhancement-cef0175b-07a2-3e7c-2fb3-6582a63c42b1\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <em>description<\/em> \u00e8 importante per la SEO: nella pagina dei risultati della ricerca di Google, viene visualizzato sotto al titolo. Questo d\u00e0 un&#8217;idea del contenuto della pagina al visitatore.<\/p>\n\n\n\n<p class=\"has-text-align-left\"><em>Author<\/em> indica il nome dell&#8217;autore del sito.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"link\">&lt;link&gt;<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;link rel=\"stylesheet\" type=\"text\/<span id=\"urn:enhancement-0dfa7e8a-b2a6-5c7a-ec72-dd72266ae6d4\" class=\"textannotation disambiguated wl-thing\">css<\/span>\" href=\"<span id=\"urn:enhancement-dfb30f69-3c91-2aa7-3e37-0173c55c3c59\" class=\"textannotation disambiguated wl-thing\">css<\/span>\/style.css\"&gt;<br><\/pre>\n\n\n\n<p class=\"has-text-align-left\">Il <span id=\"urn:enhancement-746196d9-1ccc-1ae9-9c50-96b11ace68f1\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <code>&lt;link><\/code> non serve per inserire un link, ma per collegare il documento <span id=\"urn:enhancement-23bb058d-84e1-39fc-bd31-fe3136349e7f\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> ad altre risorse, come il file <span id=\"urn:enhancement-82077069-d223-2d1d-5fd2-2feb6dab5f6f\" class=\"textannotation disambiguated wl-thing\">CSS<\/span>. Nell&#8217;attributo <em>href<\/em>, indichiamo il percorso del file, cos\u00ec le sue impostazioni <span id=\"urn:enhancement-14e32cf8-abfd-e10d-7661-b347cccda613\" class=\"textannotation disambiguated wl-thing\">CSS<\/span> verranno applicate alla nostra pagina web.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"altri\">Altri tag della sezione head<\/h4>\n\n\n\n<p class=\"has-text-align-left\">Nella <em>head<\/em> possiamo poi trovare il <span id=\"urn:enhancement-8201d337-47a4-255e-caee-c6aa38e076ca\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <code>&lt;script&gt;<\/code>, per inserire degli script in linguaggi diversi, oppure il <span id=\"urn:enhancement-d23261e5-2756-1442-c18d-e54953b5b6df\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <code>&lt;style&gt;<\/code>, dove possiamo aggiungere del codice <span id=\"urn:enhancement-30344126-300f-af2c-bfe8-e5353d35787a\" class=\"textannotation disambiguated wl-thing\">CSS<\/span> che avr\u00e0 valore solo per questa pagina del nostro sito.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Tutti i <span id=\"urn:enhancement-6dbdbebe-51ca-3a2a-2f2e-a6e4a1c72acb\" class=\"textannotation disambiguated wl-thing\">tag<\/span> che abbiamo visto fino a questo punto, si trovano nel <a href=\"https:\/\/sos-wp.it\/tutorial\/aggiungere-codice-dentro-il-tag-head\/\" target=\"_blank\" rel=\"noopener\">file <em>header.php<\/em> di WordPress<\/a>. Non sono quindi modificabili dall&#8217;editor con il quale crei il contenuto delle pagine.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"contenuti\">La struttura dei contenuti<\/h3>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"353\" height=\"451\" src=\"https:\/\/sos-wp.it\/wp-content\/uploads\/struttura-pagina-html.jpg\" alt=\"Guida HTML e CSS: Struttura di una pagina HTML\" class=\"wp-image-51371\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"body\">&lt;body&gt;<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;body&gt;\n...tutto il contenuto visibile nel browser...\n&lt;\/body&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Nella <em>head<\/em> abbiamo inserito delle informazioni sulla pagina che restano &#8220;nascoste&#8221;. Ora, con il <code>&lt;body&gt;<\/code> definiamo la sezione in cui inserire gli elementi che compongono la pagina web.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Per gestire pi\u00f9 comodamente la struttura di una pagina web, sono stati introdotti dei <span id=\"urn:enhancement-4fb886b7-d677-d009-bf1a-45b162acc60a\" class=\"textannotation disambiguated wl-thing\">tag<\/span> che hanno la funzione di indicare quale funzione ha una determinata sezione della pagina. Vediamo quali sono.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"header\">&lt;header&gt;<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;header&gt;\n...testata della pagina...\n&lt;\/header&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Nella sezione <code>&lt;header&gt;<\/code> inseriamo il titolo principale del sito e il logo.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"nav\">&lt;nav&gt;<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;nav&gt;\n...menu principale...\n&lt;\/nav&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Questa parte sar\u00e0 destinata a contenere un elenco di link, che costituiranno il menu principale.<\/p>\n\n\n\n<p class=\"has-text-align-left\"><em>Header<\/em> e <em>nav<\/em> vengono gestiti con WordPress con vari sistemi. La header pu\u00f2 essere personalizzata dal pannello Personalizza, mentre i menu vengono creati dalla sezione <em>Aspetto &gt; Menu<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" width=\"402\" height=\"660\" src=\"https:\/\/sos-wp.it\/wp-content\/uploads\/personalizza.jpg\" alt=\"Pannello Personalizza di WordPress\" class=\"wp-image-51369\"\/><\/figure>\n\n\n\n<p>Nei temi a blocchi, la header e il menu sono gestiti dalla sezione <em>Aspetto &gt; Temi &gt; Navigazione<\/em> oppure dai <a href=\"https:\/\/sos-wp.it\/tutorial\/come-usare-i-template-di-pagina-nei-temi-wordpress-a-blocchi\/\" data-type=\"post\" data-id=\"137057\">template delle pagine<\/a>.<\/p>\n\n\n\n<p>Puoi anche inserire codici particolari nel tag <em>head<\/em>. Se vuoi approfondire <a href=\"https:\/\/sos-wp.it\/tutorial\/aggiungere-codice-dentro-il-tag-head\/\" target=\"_blank\" rel=\"noopener\">ne parliamo in questa guida<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"mainTag\">&lt;main&gt;<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;main&gt;\n...contenuto principale della pagina...\n&lt;\/main&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Usiamo il <code>&lt;main&gt;<\/code> per indicare i contenuti principali.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Il contenuto che inserisci con l&#8217;editor di WordPress, in realt\u00e0, costituisce solo una sezione che si trova all&#8217;interno di <em>main<\/em>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"aside\">&lt;aside&gt;<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;aside&gt;\n...sidebar...\n&lt;\/aside&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">L&#8217;<code>&lt;aside&gt;<\/code> si usa per creare <a href=\"https:\/\/sos-wp.it\/tutorial\/cosa-mettere-sidebar-blog\/\" target=\"_blank\" rel=\"noopener\">sidebar<\/a>, o barre laterali.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"footer\">&lt;footer&gt;<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;footer&gt;\n...contenuti in fondo alla pagina...\n&lt;\/footer&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Nel <code>&lt;footer><\/code>, che identifica il pi\u00e8 di pagina, inseriremo i contenuti di contatto, link utili alla privacy policy, copyright, icone social&#8230;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"testo\">Formattare testo<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Ora che sappiamo come \u00e8 strutturata la pagina web, andiamo a vedere come si inseriscono i contenuti, i testi, e come formattarli.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"headings\">&lt;h1&gt;&#8230; &lt;h6&gt;<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"799\" height=\"400\" src=\"https:\/\/sos-wp.it\/wp-content\/uploads\/headings.jpg\" alt=\"guida html e css: headings h1-h6\" class=\"wp-image-51366\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;h1&gt;Questo \u00e8 un titolo di livello 1&lt;\/h1&gt;\n&lt;h2&gt;Questo \u00e8 un titolo di livello 2&lt;\/h2&gt;\n&lt;h3&gt;Questo \u00e8 un titolo di livello 3&lt;\/h3&gt;\n&lt;h4&gt;Questo \u00e8 un titolo di livello 4&lt;\/h4&gt;\n&lt;h5&gt;Questo \u00e8 un titolo di livello 5&lt;\/h5&gt;\n&lt;h6&gt;Questo \u00e8 un titolo di livello 6&lt;\/h6&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">I titoli all&#8217;interno della pagina sono marcati con gli <em>headings<\/em>, che vanno da <code>&lt;h1&gt;<\/code> a <code>&lt;h6&gt;<\/code>.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Il livello 1 \u00e8 quello principale, mentre il 6 \u00e8 il sottotitolo di livello pi\u00f9 basso. \u00c8 molto importante rispettare correttamente l&#8217;ordine degli <em>headings<\/em>. In base all&#8217;argomento di cui parli, organizza i titoli in modo da contrassegnare le sotto-sezioni. <\/p>\n\n\n\n<p class=\"has-text-align-left\">Non usare mai gli <em>headings<\/em> semplicemente per rendere un testo pi\u00f9 grande, ma usali solo se veramente quel testo ha la funzione di titolo. Nella <a href=\"https:\/\/sos-wp.it\/tutorial\/come-scrivere-un-articolo\/\" target=\"_blank\" rel=\"noopener\">scrittura dei tuoi articoli<\/a> i titoli e i sottotitoli sono fondamentali quindi impara a distinguere il valore che ogni tipologia possiede.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"paragrafi\">&lt;p&gt;<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p&gt;\nQuesto \u00e8 un paragrafo.\n&lt;\/p&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Il paragrafo indica un blocco di testo, al termine del quale c&#8217;\u00e8 un ritorno a capo. \u00c8 possibile inserire un ritorno a capo, senza dover chiudere il paragrafo, usando il <span id=\"urn:enhancement-8c0a23b2-ee37-63b7-40f4-186fb7bbfdd7\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <code>&lt;br&gt;<\/code>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"span\">&lt;span&gt;<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p&gt;\nQuesto \u00e8 un paragrafo. Per\u00f2, al suo interno, posso &lt;span&gt;prendere una porzione di testo&lt;\/span&gt;.\n&lt;\/p&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Potresti trovare il <span id=\"urn:enhancement-7bec9a49-3e7a-93da-6526-e1326a774ff9\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <code>&lt;span&gt;<\/code> molto spesso se provi a modificare una pagina WordPress con la funzione <em>Testo<\/em>. Infatti, ogni volta che selezioni una porzione di testo per formattarla in modo particolare, per esempio per cambiare colore ai caratteri, essa viene marcata come <em>span<\/em>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"683\" src=\"https:\/\/sos-wp.it\/wp-content\/uploads\/2024\/05\/span-wordpress-22052024-sos-wp-1024x683.jpg\" alt=\"Span nell'editor di WordPress\" class=\"wp-image-141532\" srcset=\"https:\/\/sos-wp.it\/wp-content\/uploads\/2024\/05\/span-wordpress-22052024-sos-wp-1024x683.jpg 1024w, https:\/\/sos-wp.it\/wp-content\/uploads\/2024\/05\/span-wordpress-22052024-sos-wp-300x200.jpg 300w, https:\/\/sos-wp.it\/wp-content\/uploads\/2024\/05\/span-wordpress-22052024-sos-wp-768x512.jpg 768w, https:\/\/sos-wp.it\/wp-content\/uploads\/2024\/05\/span-wordpress-22052024-sos-wp.jpg 1200w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"strong\">&lt;strong&gt;<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p&gt;\nQuesto \u00e8 un paragrafo. &lt;strong&gt;E questo testo \u00e8 in grassetto&lt;\/strong&gt;.\n&lt;\/p&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Il <span id=\"urn:enhancement-9df00b30-f953-fd6b-698d-ca772c7de5cb\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <code>&lt;strong><\/code> viene usato per rendere del testo in grassetto. La sua funzione non \u00e8 semplicemente stilistica, ma il testo marcato con lo <em>strong<\/em> ha una funzione ben precisa: indica che quelle parole hanno una certa importanza. <\/p>\n\n\n\n<p class=\"has-text-align-left\">Per questo, \u00e8 bene usarlo per contrassegnare le parole chiave all&#8217;interno dei tuoi contenuti. Google, infatti, riconosce lo <em>strong<\/em> e far\u00e0 pi\u00f9 attenzione alle parole al suo interno. Ti consiglio quindi di <a href=\"https:\/\/sos-wp.it\/tutorial\/semrush-guida\/\" data-type=\"post\" data-id=\"104142\">scegliere le keyword con attenzione<\/a>, magari utilizzando uno strumento come <a rel=\"nofollow noopener sponsored\" target=\"_blank\" href=\"https:\/\/sos-wp.it\/raccomanda\/seo\/semrush\/\" data-shortcode=\"true\">SEMRush<\/a>.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Attenzione per\u00f2 con i grassetti: usali anche <strong>per guidare il lettore<\/strong> e non solo per risaltare con l&#8217;algoritmo.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"em\">&lt;em&gt;<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p&gt;\nQuesto \u00e8 un paragrafo. &lt;em&gt;E questo testo \u00e8 in corsivo&lt;\/em&gt;.\n&lt;\/p&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Il <span id=\"urn:enhancement-7159c6b8-67f1-6ead-e74c-cd5c088c7eb6\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <code>&lt;em><\/code> serve a rendere in corsivo del testo ma, come per lo <em>strong<\/em>, anche qui abbiamo una funzione pi\u00f9 precisa: indica che <em>il testo ha una certa enfasi.<\/em><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">&lt;mark&gt;<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p&gt;\nQuesto \u00e8 un paragrafo. &lt;mark&gt;E questo testo \u00e8 evidenziato&lt;\/mark&gt;.\n&lt;\/p&gt;\n<\/pre>\n\n\n\n<p>Con il tag <code>&lt;mark><\/code> puoi <a href=\"https:\/\/sos-wp.it\/tutorial\/evidenziare-testo-wordpress\/\" target=\"_blank\" rel=\"noopener\">usare l&#8217;evidenziatore<\/a> per mettere in risalto una parte di testo. Il risultato sar\u00e0 un testo con uno sfondo giallo. Questo colore potrebbe cambiare in base alle impostazioni del tuo tema WordPress, ed \u00e8 possibile definire il colore che desideri utilizzando del CSS. A tal proposito voglio fare una breve digressione.<\/p>\n\n\n\n<p><strong>Le abitudini di lettura degli utenti stanno cambiando.<\/strong> Molti usano lo smartphone e il tablet e, tra le impostazioni che sempre pi\u00f9 spesso vengono attivate ci sono quelle che rendono l&#8217;uso dello schermo meno stancante. <\/p>\n\n\n\n<p>Tra le opzioni date agli utenti c&#8217;\u00e8 il cambiamento del colore di tutto ci\u00f2 che viene mostrato o l&#8217;attivazione di una modalit\u00e0 bianco e nero.<\/p>\n\n\n\n<p>Questo \u00e8 un dettaglio che devi tenere presente se decidi di usare l&#8217;evidenziatore: in alcune circostanza l&#8217;utente potrebbe non vederlo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"a\">&lt;a&gt;<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;a href=\"https:\/\/sos-wp.it\" title=\"Vai al nostro sito\"  target=\"_blank\" rel=\"noopener\"&gt;SOS WP&lt;\/a&gt;<br><\/pre>\n\n\n\n<p class=\"has-text-align-left\">Vediamo come funzionano i link. Il <span id=\"urn:enhancement-89bae5a8-2fe5-199c-1ab4-1ca2444bd13c\" class=\"textannotation disambiguated wl-thing\">tag<\/span> per i link \u00e8 <code>&lt;a&gt;<\/code> e al suo interno troviamo diversi attributi.<\/p>\n\n\n\n<p class=\"has-text-align-left\"><code><em>href<\/em><\/code> indica l&#8217;URL di destinazione. Deve includere anche <em>https:\/\/<\/em> per funzionare correttamente.<\/p>\n\n\n\n<p class=\"has-text-align-left\">L&#8217;attributo <code><em>title<\/em><\/code> consiste in un testo che chiarisce meglio la funzione di un link. Questo testo apparir\u00e0 se andiamo col cursore del mouse sopra il link.<\/p>\n\n\n\n<p class=\"has-text-align-left\"><code> target=\"_blank\" rel=\"noopener \"<\/code> si usa per far aprire il link in una nuova scheda del browser. Utile se linki a una risorsa esterna, ma non vuoi che i visitatori abbandonino il tuo sito.<\/p>\n\n\n\n<p><a href=\"https:\/\/sos-wp.it\/tutorial\/accesskey\/\" target=\"_blank\" rel=\"noopener\">L&#8217;attributo <em>accesskey<\/em><\/a>, invece, imposta una combinazione di tasti per aprire il link senza doverci cliccare sopra con il mouse.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Il testo racchiuso tra i <span id=\"urn:enhancement-d728c7d0-b2b7-7abe-6e40-51530f47537d\" class=\"textannotation disambiguated wl-thing\">tag<\/span> di apertura e chiusura \u00e8 chiamato <em>anchor text<\/em> e ti suggerisco di usare sempre parole che riassumano la funzione del link. Cio\u00e8, evita di usare espressioni come &#8220;Clicca qui&#8221;, &#8220;Apri questa pagina&#8221;. Inoltre, non mettere l&#8217;URL nell&#8217;anchor text, a meno che non sia proprio necessario che i tuoi utenti vedano l&#8217;URL per esteso.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Un tipo speciale di link \u00e8 il <em>link <code>mailto<\/code><\/em>, che serve per <a href=\"https:\/\/sos-wp.it\/tutorial\/link-html-mailto\/\" target=\"_blank\" rel=\"noopener\">inviare email<\/a>. Al posto dell&#8217;URL, nell&#8217;attributo <em>href<\/em> inserisci <em>mailto:<\/em> seguito dall&#8217;indirizzo email:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;a href=\"mailto:supporto@sos-wp.it\"&gt;Scrivici!&lt;\/a&gt;\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"img\">&lt;img&gt;<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;img src=\"immagine.jpg\" alt=\"Descrizione immagine\"&gt;<br><\/pre>\n\n\n\n<p class=\"has-text-align-left\">Ora inseriremo un&#8217;immagine. Il <span id=\"urn:enhancement-d2b1165f-1df8-ad49-74bc-f50d1e37e383\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <code>&lt;img&gt;<\/code> ha bisogno, per funzionare, del percorso in cui si trova l&#8217;immagine, e lo aggiungiamo nell&#8217;attributo <em>src<\/em>. Il percorso \u00e8 relativo alla posizione del file in cui stiamo lavorando. Perci\u00f2:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>se l&#8217;immagine \u00e8 nella stessa cartella del nostro file <span id=\"urn:enhancement-2cdeddcb-37d8-a978-2f63-25c18708b07b\" class=\"textannotation disambiguated wl-thing\">HTML<\/span>, scriviamo solo il nome del file;<\/li>\n\n\n\n<li>se \u00e8 in una sottocartella rispetto a quella dove ci troviamo, scriviamo <em>nome_cartella\/nome_file<\/em>;<\/li>\n\n\n\n<li>se si trova in una cartella di livello superiore, torniamo indietro di ciascun livello usando ..\/.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-left\">Oppure, possiamo anche inserire l&#8217;URL del file immagine che vogliamo usare.<\/p>\n\n\n\n<p class=\"has-text-align-left\"><strong>Suggerisco di aggiungere sempre l&#8217;attributo <em>alt<\/em> alle immagini.<\/strong> Esso viene mostrato nel caso in cui l&#8217;immagine non fosse disponibile e, in pi\u00f9, viene letto dai motori di ricerca. Perci\u00f2 usiamo <a href=\"https:\/\/sos-wp.it\/tutorial\/come-fare-seo-con-le-immagini\/\" target=\"_blank\" rel=\"noopener\">l&#8217;<em>alt<\/em> per descrivere l&#8217;immagine<\/a> e, possibilmente, inseriamoci le keyword.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"447\" height=\"852\" src=\"https:\/\/sos-wp.it\/wp-content\/uploads\/2024\/05\/immagini-alt-22052024-sos-wp.jpg\" alt=\"Inserimento immagini e testo alt\" class=\"wp-image-141533\" srcset=\"https:\/\/sos-wp.it\/wp-content\/uploads\/2024\/05\/immagini-alt-22052024-sos-wp.jpg 447w, https:\/\/sos-wp.it\/wp-content\/uploads\/2024\/05\/immagini-alt-22052024-sos-wp-157x300.jpg 157w\" sizes=\"(max-width: 447px) 100vw, 447px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Le liste<\/h3>\n\n\n\n<p class=\"has-text-align-left\"><a href=\"https:\/\/sos-wp.it\/tutorial\/come-inserire-elenchi-puntati-e-numerati-in-wordpress\/\" data-type=\"post\" data-id=\"138459\">Le liste sono di due tipi<\/a>: puntate e numerate. Le liste puntate hanno come punto elenco un simbolo (cerchio, quadrato, immagine&#8230;), mentre quelle numerate avranno un numero o una lettera.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"ul\">&lt;ul&gt;<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;ul&gt;\n&lt;li&gt;Questo \u00e8 un elenco;&lt;\/li&gt;\n&lt;li&gt;Inseriamo tutte le voci;&lt;\/li&gt;\n&lt;li&gt;E terminiamo.&lt;\/li&gt;\n&lt;\/ul&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">L&#8217;elenco puntato \u00e8 indicato dal <span id=\"urn:enhancement-c0b61ab6-7481-71f8-130c-d713e59b6579\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <code>&lt;ul&gt;<\/code>, <em>unordered list<\/em>. Ogni voce dell&#8217;elenco deve essere contrassegnata dal <span id=\"urn:enhancement-63580250-7b12-e786-9aa3-eeef8f76fbc2\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <code>&lt;li&gt;<\/code>. Il simbolo predefinito dell&#8217;elenco puntato \u00e8 un pallino nero.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"ol\">&lt;ol&gt;<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;ol&gt;\n&lt;li&gt;Prima voce dell'elenco numerato;&lt;\/li&gt;\n&lt;li&gt;Seconda voce;&lt;\/li&gt;\n&lt;li&gt;Terza voce.&lt;\/li&gt;\n&lt;\/ol&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Gli elenchi numerati, o <em>ordered list<\/em>, si indicano con <code>&lt;ol&gt;<\/code> e le voci al suo interno si segnano sempre con <code>&lt;li&gt;<\/code>. Di default, l&#8217;elenco numerato \u00e8 visualizzato con dei numeri arabi, ma possiamo cambiare il tipo di numerazione con l&#8217;attributo <em>type<\/em>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>&lt;ol type=\"A\"&gt;<\/code> lettere maiuscole;<\/li>\n\n\n\n<li><code>&lt;ol type=\"a\"&gt;<\/code> lettere minuscole;<\/li>\n\n\n\n<li><code>&lt;ol type=\"I\"&gt;<\/code> numeri romani.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"802\" height=\"448\" src=\"https:\/\/sos-wp.it\/wp-content\/uploads\/ul-ol.jpg\" alt=\"Elenchi ul e ol\" class=\"wp-image-51374\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"table\">&lt;table&gt;<\/h3>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;table&gt;\n&lt;thead&gt;\n&lt;tr&gt; &lt;th&gt;titolo 1&lt;\/th&gt;  &lt;th&gt;titolo 2&lt;\/th&gt; &lt;\/tr&gt; \n&lt;\/thead&gt;\n&lt;tbody&gt;\n&lt;tr&gt; &lt;td&gt;dato 1&lt;\/td&gt;  &lt;td&gt;dato 2&lt;\/td&gt; &lt;\/tr&gt; \n&lt;tr&gt; &lt;td&gt;dato 3&lt;\/td&gt;  &lt;td&gt;dato 4&lt;\/td&gt; &lt;\/tr&gt; \n&lt;tr&gt; &lt;td&gt;dato 5&lt;\/td&gt;  &lt;td&gt;dato 6&lt;\/td&gt; &lt;\/tr&gt; \n&lt;\/tbody&gt;\n&lt;\/table&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Le tabelle hanno una struttura ben definita. Il <span id=\"urn:enhancement-ac63c677-431d-d022-d391-d4918249342e\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <code>&lt;table&gt;<\/code> indica l&#8217;intera tabella. Essa si divide un due parti: il <code>&lt;thead&gt;<\/code>, per indicare le intestazioni, e il <code>&lt;tbody&gt;<\/code>, ossia il contenuto.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"226\" src=\"https:\/\/sos-wp.it\/wp-content\/uploads\/table.jpg\" alt=\"table html\" class=\"wp-image-51373\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-left\">Al loro interno, dovremo indicare ogni volta che inizia e termina una riga, usando <code>&lt;tr&gt;<\/code>.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Nella <em>thead<\/em>, ciascun dato, o cella, viene indicato con <code>&lt;th&gt;<\/code>. Invece, nella sezione <em>tbody<\/em> le celle saranno indicate con <code>&lt;td&gt;<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"altriTag\">Altri tag<\/h3>\n\n\n\n<p class=\"has-text-align-left\">I blocchi dell&#8217;editor WordPress sono semplicemente dei modi rapidi per <a href=\"https:\/\/sos-wp.it\/tutorial\/guida-html-wordpress\/\" target=\"_blank\" rel=\"noopener\">inserire automaticamente molti dei tag<\/a> che ti ho illustrato. Alcuni sono dei semplici tag, altri sono combinazioni di tag che creano elementi pi\u00f9 complessi. Ad esempio:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>il blocco Citazione inserisce il <span id=\"urn:enhancement-89070b87-6aea-4781-0df7-a2540b748aa5\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <code>&lt;blockquote&gt;<\/code>;<\/li>\n\n\n\n<li>il blocco code inserisce il <span id=\"urn:enhancement-9131e01e-ac44-12f9-ffec-6e55487dc26f\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <code>&lt;code&gt;<\/code>, ossia un testo con carattere monospace (come quello che ho usato in questo articolo per evidenziare i <span id=\"urn:enhancement-d3154028-88bd-f40c-0db3-6a38b16e68cf\" class=\"textannotation disambiguated wl-thing\">tag<\/span>);<\/li>\n\n\n\n<li>i blocchi di tipo Pattern inseriscono codici pi\u00f9 complessi per aggiungere combinazioni fra pi\u00f9 elementi.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tabellaHtml\">Tabella riassuntiva dei tag HTML<\/h2>\n\n\n\n<p class=\"has-text-align-left\">Abbiamo visto tutti i principali <span id=\"urn:enhancement-b3a10207-16d4-c27c-fded-abfe1af164e3\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <span id=\"urn:enhancement-30ea7a2b-764d-c44a-8441-484b46a4c958\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> e le loro funzioni. Consulta la tabella qui sotto per una rapida consultazione ogni volta che ne avrai bisogno!<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Tag<\/th><th>Funzione<\/th><th>Note<\/th><\/tr><\/thead><tbody><tr><td>&lt;!DOCTYPE <span id=\"urn:enhancement-fb6a9a7a-280b-e415-06ab-a9e97609733e\" class=\"textannotation disambiguated wl-thing\">html<\/span>&gt;<\/td><td>Doctype declaration<\/td><\/tr><tr><td>html<\/td><td>intero documento HTML<\/td><\/tr><tr><td>head<\/td><td>informazioni sulla pagina<\/td><\/tr><tr><td>title<\/td><td>titolo del documento<\/td><\/tr><tr><td>meta<\/td><td>informazioni sul contenuto<\/td><td><code>&lt;meta charset=\"UTF-8\"&gt;<\/code><br><code>&lt;meta name=\"description\" content=\"breve descrizione del contenuto della pagina.\"&gt;<\/code><br><code>&lt;meta name=\"author\" content=\"Nome dell'autore\"&gt;<\/code><\/td><\/tr><tr><td>link<\/td><td>risorse collegate<\/td><td><code>&lt;link rel=\"stylesheet\" type=\"text\/<span id=\"urn:enhancement-280d63d8-ea1c-76a6-ffe0-cbf27071f217\" class=\"textannotation disambiguated wl-thing\">css<\/span>\" href=\"<span id=\"urn:enhancement-7f107a30-b3c0-7429-56b6-6d23b9b30039\" class=\"textannotation disambiguated wl-thing\">css<\/span>\/style.css\"&gt;<\/code><\/td><\/tr><tr><td>body<\/td><td>contenuti visibili<\/td><\/tr><tr><td>header<\/td><td>testata<\/td><\/tr><tr><td>nav<\/td><td>menu<\/td><\/tr><tr><td>main<\/td><td>contenuti principali<\/td><\/tr><tr><td>aside<\/td><td>sidebar<\/td><\/tr><tr><td>footer<\/td><td>pi\u00e8 di pagina<\/td><\/tr><tr><td>h1&#8230; h6<\/td><td>titoli e sottotitoli<\/td><\/tr><tr><td>p<\/td><td>paragrafo<\/td><\/tr><tr><td>span<\/td><td>parte di testo<\/td><\/tr><tr><td>br \/<\/td><td>interruzione di riga<\/td><\/tr><tr><td>strong<\/td><td>grassetto<\/td><\/tr><tr><td>em<\/td><td>corsivo<\/td><\/tr><tr><td>a<\/td><td>link<\/td><td><code>&lt;a href=\"https:\/\/sos-wp.it\" title=\"Vai al nostro sito\"  target=\"_blank\" rel=\"noopener \"&gt;SOS WP&amp;lt\/a&gt;<\/code><br><code>&lt;a href=\"mailto:supporto@sos-wp.it\"&gt;Scrivici!&lt;\/a&gt;<\/code><\/td><\/tr><tr><td>img<\/td><td>immagine<\/td><td><code>&lt;img src=\"immagine.jpg\" alt=\"Descrizione immagine\"&gt;<\/code><\/td><\/tr><tr><td>ul<\/td><td>elenco puntato<\/td><\/tr><tr><td>ol<\/td><td>elenco numerato<\/td><td><code>&lt;ol type=\"A\"&gt;<\/code><br><code>&lt;ol type=\"a\"&gt;<\/code><br><code>&lt;ol type=\"I\"&gt;<\/code><\/td><\/tr><tr><td>li<\/td><td>elemento di un elenco<\/td><\/tr><tr><td>table<\/td><td>tabella<\/td><\/tr><tr><td>thead<\/td><td>intestazioni della tabella<\/td><\/tr><tr><td>tbody<\/td><td>corpo della tabella<\/td><\/tr><tr><td>tr<\/td><td>riga di una tabella<\/td><\/tr><tr><td>td<\/td><td>cella di una tabella<\/td><\/tr><tr><td>&lt;blockquote&gt;<\/td><td>citazione<\/td><\/tr><tr><td>&lt;code&gt;<\/td><td>testo con carattere monospace<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"has-text-align-left\">Fantastico! Hai terminato la sezione relativa all&#8217;<span id=\"urn:enhancement-20d80591-efd1-a867-308a-906ea875923c\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> di questa guida!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"esercizio\">Esercizio sull&#8217;HTML<\/h2>\n\n\n\n<p class=\"has-text-align-left\">Ora, ti consiglio di fare un po&#8217; di esercizi. Crea un nuovo articolo WordPress e prova a inserire i seguenti <span id=\"urn:enhancement-948d812d-f692-8b08-4ead-74fbf23a1d09\" class=\"textannotation disambiguated wl-thing\">tag<\/span>:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>h1&#8230; h6<\/li>\n\n\n\n<li>p<\/li>\n\n\n\n<li>ul e ol<\/li>\n\n\n\n<li>span<\/li>\n\n\n\n<li>br<\/li>\n\n\n\n<li>strong<\/li>\n\n\n\n<li>em<\/li>\n\n\n\n<li>a (sia URL che email)<\/li>\n\n\n\n<li>blockquote<\/li>\n\n\n\n<li>img<\/li>\n\n\n\n<li>table (completa)<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-left\">E adesso, entriamo nella seconda parte della nostra <strong>guida <span id=\"urn:enhancement-46817fd4-95e8-56bb-6c54-c9f48e1531ba\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> e <span id=\"urn:enhancement-1fda07d7-6d81-f1cc-fbd1-ec18d065c4db\" class=\"textannotation disambiguated wl-thing\">CSS<\/span><\/strong>. Scopriamo come personalizzare i nostri <span id=\"urn:enhancement-087105f2-5fd0-6dbb-ec20-a27e020e2029\" class=\"textannotation disambiguated wl-thing\">tag<\/span> usando il <span id=\"urn:enhancement-a6473340-eb8f-9c34-45a8-296f9776ef9e\" class=\"textannotation disambiguated wl-thing\">CSS<\/span>!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Guida CSS<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"doveCss\">Dove si usa il CSS<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Il <span id=\"urn:enhancement-862f5f25-8388-8eee-5729-022e1f69e3fd\" class=\"textannotation disambiguated wl-thing\">CSS<\/span> pu\u00f2 essere modificato utilizzando il file <em>style.css<\/em>. Prima di effettuare qualsiasi personalizzazione, hai gi\u00e0 installato <a href=\"https:\/\/sos-wp.it\/tutorial\/come-installare-un-tema-su-wordpress\/\" target=\"_blank\" rel=\"noopener\">un tema<\/a> child? \u00c8 molto importante, se non vuoi perdere dati!<\/p>\n\n\n\n<p class=\"has-text-align-left\">Il <span id=\"urn:enhancement-58433d78-0c57-92ce-93d1-89f266c43b38\" class=\"textannotation disambiguated wl-thing\">CSS<\/span> pu\u00f2 essere applicato anche all&#8217;interno dell&#8217;<span id=\"urn:enhancement-0d360c48-a7c6-e658-f87a-bc41d02521a1\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> con il <span id=\"urn:enhancement-94935244-4a25-138b-d884-7a78c1740c6b\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <code>&lt;style&gt;<\/code> o con l&#8217;attributo <em>style<\/em>.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Il <span id=\"urn:enhancement-ddaf8a96-ff46-4bbb-fea7-645092c295c5\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <code>&lt;style&gt;<\/code> si trova nella sezione <em>head<\/em>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;head&lt;\n&lt;title&gt;Il mio documento&lt;\/title&gt;\n&lt;style&gt;\n...codici <span id=\"urn:enhancement-e29d46e9-0d3e-fa66-8f4e-ac76db3bfbf7\" class=\"textannotation disambiguated wl-thing\">CSS<\/span>...\n&lt;\/style&gt;\n&lt;\/head&lt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">L&#8217;attributo <em>style<\/em>, invece, si applica al singolo elemento da modificare.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p style=\"...codici <span id=\"urn:enhancement-c73c9c1f-e059-f333-699d-cd92139e324a\" class=\"textannotation disambiguated wl-thing\">CSS<\/span>...\"&gt;Questo \u00e8 il mio paragrafo.&lt;\/p&gt;\n<\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"271\" src=\"https:\/\/sos-wp.it\/wp-content\/uploads\/style-wordpress.jpg\" alt=\"Guida html e css: file style css WordPress\" class=\"wp-image-51372\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"sintassiCss\">La sintassi CSS<\/h2>\n\n\n\n<p class=\"has-text-align-left\">Il <a href=\"https:\/\/sos-wp.it\/tutorial\/guida-css\/\" target=\"_blank\" rel=\"noopener\">linguaggio CSS<\/a> \u00e8 formato da selettore e dichiarazioni. Il selettore indica quale elemento deve essere modificato, mentre le dichiarazioni indicano le impostazioni da applicare. Le dichiarazioni si inseriscono all&#8217;interno di parentesi graffe, usando la coppia <em>propriet\u00e0: valore<\/em>, chiusa da un punto e virgola:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">selettore {\npropriet\u00e01: valore;\npropriet\u00e02: valore;\npropriet\u00e03: valore;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">I selettori sono di vario tipo. Possiamo richiamare l&#8217;elemento <span id=\"urn:enhancement-73a9de00-c24c-8c39-7258-7bb66ad037c4\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> attraverso il nome <span id=\"urn:enhancement-853208f0-46cf-3b7d-f756-2ceda02c4af6\" class=\"textannotation disambiguated wl-thing\">tag<\/span>, un id o una classe.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Per richiamare il selettore con il nome <span id=\"urn:enhancement-d23cf6b7-6c6e-d08b-7528-711d41c890e7\" class=\"textannotation disambiguated wl-thing\">tag<\/span>, scrivo semplicemente il nome del <span id=\"urn:enhancement-0fafd6ee-3bae-a58d-9d00-64bf47f99051\" class=\"textannotation disambiguated wl-thing\">tag<\/span>, senza i simboli &lt; e &gt;.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">p {\ncolor: #000000;\n}\n\nh1 {\nfont-size: 50px;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Con questo sistema, il selettore serve a richiamare tutti quei <span id=\"urn:enhancement-6b827fd7-18c4-f10e-6918-1aef7f11ca48\" class=\"textannotation disambiguated wl-thing\">tag<\/span> presenti nel documento. Nel caso qui sopra, tutti i paragrafi avranno il testo di colore nero, e tutti gli h1 avranno una carattere di 50 pixel.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Per usare id e classi, invece, dovremo aggiungerli all&#8217;elemento che ci interessa.<\/p>\n\n\n\n<p class=\"has-text-align-left\">L&#8217;<em>id<\/em> \u00e8 un valore univoco, perci\u00f2 non ci possono essere due id con lo stesso valore in un unico documento.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p id=\"mioParagrafo\"&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">La classe, invece, pu\u00f2 essere applicata a pi\u00f9 elementi.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p class=\"miaClasse\"&gt;Questo \u00e8 un paragrafo.&lt;\/p&gt;\n&lt;p class=\"miaClasse\"&gt;Questo \u00e8 un altro paragrafo.&lt;\/p&gt;\n&lt;p&gt;Questo \u00e8 un paragrafo senza classe.&lt;\/p&gt;\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Per richiamare un id nel <span id=\"urn:enhancement-4b13e28b-59a7-e5e5-5da6-55cda78748e3\" class=\"textannotation disambiguated wl-thing\">CSS<\/span>, si usa il simbolo #, mentre per la classe useremo il punto:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#mioParagrafo {\ncolor: #222222;\n}\n\n.miaClasse {\nfont-size: 18px;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">In questo esempio, solamente il paragrafo con id &#8220;mioParagrafo&#8221; sar\u00e0 di colore grigio, mentre tutti i paragrafi con classe &#8220;miaClasse&#8221; hanno un carattere di 18 pixel.<\/p>\n\n\n\n<p class=\"classe-del-blocco\" id=\"id-del-blocco\">Nell&#8217;editor a blocchi di WordPress puoi applicare un id o una classe a qualsiasi blocco nelle impostazioni Avanzate.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"319\" height=\"855\" src=\"https:\/\/sos-wp.it\/wp-content\/uploads\/2024\/05\/id-classe-22052024-sos-wp.jpg\" alt=\"Assegnare un id e una classe a un blocco\" class=\"wp-image-141534\" srcset=\"https:\/\/sos-wp.it\/wp-content\/uploads\/2024\/05\/id-classe-22052024-sos-wp.jpg 319w, https:\/\/sos-wp.it\/wp-content\/uploads\/2024\/05\/id-classe-22052024-sos-wp-112x300.jpg 112w\" sizes=\"(max-width: 319px) 100vw, 319px\" \/><\/figure>\n\n\n\n<p class=\"has-text-align-left\">Ora che abbiamo capito come selezionare gli elementi da modificare, passiamo alle propriet\u00e0 principali del <span id=\"urn:enhancement-71c7afda-0bfe-060f-2360-7f9f0f65d936\" class=\"textannotation disambiguated wl-thing\">CSS<\/span>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"proprieta\">Le propriet\u00e0 CSS<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Propriet\u00e0 dei font<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Partiamo con lo studio delle propriet\u00e0 <span id=\"urn:enhancement-170569b1-d4b9-cf0d-f73f-f5c314f9945f\" class=\"textannotation disambiguated wl-thing\">CSS<\/span> che si applicano ai font, quindi tutto ci\u00f2 che riguarda la formattazione del testo.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"fontfamily\">font-family<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">p {\nfont-family: \"Times New Roman\", Times, serif;\n}\n<\/pre>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"203\" src=\"https:\/\/sos-wp.it\/wp-content\/uploads\/font-family.jpg\" alt=\"Esempi di font family\" class=\"wp-image-51365\"\/><\/figure>\n\n\n\n<p class=\"has-text-align-left\">La propriet\u00e0 <code>font-family<\/code> si usa per scegliere il tipo di font. Il suo valore \u00e8 formato da tre parametri, separati da una virgola. Questi parametri sono tre famiglie di font, che partono dal pi\u00f9 specifico per arrivare al pi\u00f9 generico: se il primo non \u00e8 disponibile per essere visualizzato sul browser, si passa al secondo, oppure al terzo:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>famiglia 1<\/em>: il nome del font. Se il nome \u00e8 composto da pi\u00f9 parole, bisogna inserirlo tra virgolette, altrimenti non c&#8217;\u00e8 bisogno &#8211; es. Times New Roman, Book Antiqua, Monotype Corsiva&#8230;;<\/li>\n\n\n\n<li><em>famiglia 2<\/em>: \u00e8 il nome di un font pi\u00f9 diffuso, ma simile a quello che abbiamo scelto per primo &#8211; Arial, Helvetica, Times&#8230;;<\/li>\n\n\n\n<li><em>famiglia 3<\/em>: \u00e8 la famiglia generica &#8211; serif, sans-serif, monospace.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"fontstyle\">font-style<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">h2 { \nfont-style: italic;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Il <code>font-style<\/code> pu\u00f2 assumere due valori:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>normal<\/em>, il valore di default;<\/li>\n\n\n\n<li><em>italic<\/em>, che rende il testo in corsivo.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-left\">Quando dobbiamo inserire un testo in corsivo, suggerisco di riflettere se sia pi\u00f9 appropriato usare il <span id=\"urn:enhancement-e956c2fd-9e11-e9d9-7f4e-25bfb3d6bc10\" class=\"textannotation disambiguated wl-thing\">tag<\/span> <span id=\"urn:enhancement-e764a068-bae8-a13f-4ae6-8733d8c7fe23\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> <code>&lt;em&gt;<\/code> oppure il <span id=\"urn:enhancement-6f616833-dcff-78e2-956f-73561dc2659a\" class=\"textannotation disambiguated wl-thing\">CSS<\/span>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"fontweight\">font-weight<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">span {\nfont-weight: bold;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Questa propriet\u00e0 indica lo spessore del carattere e pu\u00f2 avere i seguenti valori:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>normal<\/em> oppure <em>400<\/em>: testo normale;<\/li>\n\n\n\n<li><em>bold<\/em> oppure <em>700<\/em>: grassetto;<\/li>\n\n\n\n<li><em>lighter<\/em>: pi\u00f9 sottile del default;<\/li>\n\n\n\n<li><em>bolder<\/em>: pi\u00f9 spesso del default;<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-left\"><strong>Indeciso tra tag <span id=\"urn:enhancement-d29fc969-6c53-573e-bbc3-bc4af0313e1d\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> <code>&lt;strong><\/code> e CSS bold?<\/strong> Per capire quando \u00e8 meglio usare il <span id=\"urn:enhancement-d2126e42-5229-bf11-ce9a-ffc47c8b03f8\" class=\"textannotation disambiguated wl-thing\">tag<\/span> e quando \u00e8 preferibile il <span id=\"urn:enhancement-ca39470b-12e2-5c53-b46c-75f5a54207f3\" class=\"textannotation disambiguated wl-thing\">CSS<\/span> puoi tornare alla sezione in cui abbiamo affrontato proprio l&#8217;uso del grassetto usando il tag.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"fontsize\">font-size<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">.smallText {\nfont-size: 12px;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">La propriet\u00e0 <code>font-size<\/code> indica le dimensioni del testo.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Ci sono diverse unit\u00e0 di misura:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>pixel (px)<\/em>: \u00e8 un&#8217;unit\u00e0 di misura non responsive, cio\u00e8 rimane fissa su qualsiasi dispositivo;<\/li>\n\n\n\n<li><em>em<\/em>: \u00e8 un&#8217;unit\u00e0 di misura responsive. 1em corrisponde alla dimensione di default del browser (solitamente corrisponde a 16px);<\/li>\n\n\n\n<li><em>percentuali<\/em>: anche le percentuali sono responsive. 100% \u00e8 la dimensione predefinita del browser.<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"color\">color<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">#testoRosso {\ncolor: red;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">La propriet\u00e0 <code><em>color<\/em><\/code> attribuisce un colore al testo. Vai nella sezione sui colori per scoprire come usare i colori con il <span id=\"urn:enhancement-05ad781d-40d1-dac4-b551-d4aecb747b07\" class=\"textannotation disambiguated wl-thing\">CSS<\/span>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"spazi\">Spazi intorno agli elementi<\/h3>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"marginpadding\">margin e padding<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"600\" height=\"241\" src=\"https:\/\/sos-wp.it\/wp-content\/uploads\/margin-padding.jpg\" alt=\"schema margin, padding e border\" class=\"wp-image-51368\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">blockquote {\nmargin: 15px;\npadding: 5px;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\"><code><em>margin<\/em><\/code> indica lo spazio intorno all&#8217;elemento.<\/p>\n\n\n\n<p class=\"has-text-align-left\"><code><em>padding<\/em><\/code> \u00e8 lo spazio che si trova tra il confine dell&#8217;elemento e il suo contenuto, come se fosse un margine interno.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Possiamo applicare un valore diverso di margin e padding per ciascuno dei 4 lati di un elemento, oppure valori uguali.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>margin: 15px<\/em>: tutti e quattro i lati dell&#8217;elemento hanno un margine di 15px;<\/li>\n\n\n\n<li><em>margin: 5px 10px<\/em>: il primo numero indica sopra e sotto (5px), il secondo numero destra e sinistra (10px);<\/li>\n\n\n\n<li><em>padding: 5px 10px 15px<\/em>: il primo valore indica sopra (5px), il secondo destra e sinistra (10px), il terzo sotto(15px);<\/li>\n\n\n\n<li><em>padding: 5px 10px 15px 20px<\/em>: i valori indicano i 4 lati in senso orario a partire dall&#8217;alto &#8211; sopra, destra, sotto, sinistra.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-left\">\u00c8 possibile applicare il valore a un singolo lato dell&#8217;elemento usando la propriet\u00e0 <em>margin-<\/em> o <em>padding-<\/em> insieme alla direzione:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>margin-top <\/em>(sopra), <em>margin-right<\/em> (destra), <em>margin-bottom<\/em> (sotto),<em> margin-left<\/em> (sinistra);<\/li>\n\n\n\n<li><em>padding-top<\/em> (sopra), <em>padding-right <\/em>(destra), <em>padding-bottom<\/em> (sotto), <em>padding-left<\/em> (sinistra).<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-left\">Esempio:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">img {\nmargin-top: 20px;\n}\n<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"border\">border<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">img {\nborder: 2px solid black;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Il <code><em>border<\/em><\/code> \u00e8 una linea che delimita l&#8217;elemento: al suo interno ci sar\u00e0 l&#8217;elemento con il padding, al suo esterno ci sono i margini.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Il bordo ha diversi parametri: spessore, tipo, colore.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Lo spessore si indica con la propriet\u00e0 <code><em>border-width<\/em><\/code> ed \u00e8 un valore in pixel, oppure si indicano i valori predefiniti <em>thin<\/em> &#8211; sottile, <em>medium<\/em>, <em>thick<\/em> &#8211; grosso.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Il tipo di bordo, <em><code>border-style<\/code>,<\/em> pu\u00f2 essere <em>solid<\/em> &#8211; lineare, <em>dashed<\/em> &#8211; tratteggiato, <em>dotted<\/em> &#8211; una serie di punti, <em>double<\/em> &#8211; doppio ecc.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Il colore del bordo si indica con <code><em>border-color<\/em><\/code>. I colori hanno diverse modalit\u00e0 di selezione nel <span id=\"urn:enhancement-e640d2d9-a2b5-e1c6-23ff-08365dbbdd86\" class=\"textannotation disambiguated wl-thing\">CSS<\/span>, e li vediamo subito nella prossima sezione.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Per abbreviare, possiamo indicare tutte le propriet\u00e0 del bordo con un&#8217;unica propriet\u00e0, <code>border<\/code>, che avr\u00e0 come valori, in questo ordine: spessore, tipo, colore. I tre parametri sono separati da uno spazio.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"colori\">Colori con i CSS<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Come appena accennato, ci sono diversi modi di <a href=\"https:\/\/sos-wp.it\/tutorial\/codici-html-colori\/\" target=\"_blank\" rel=\"noopener\">rappresentare i colori con il <span id=\"urn:enhancement-ea2a7f6e-8ac0-9d67-3163-38879a17640d\" class=\"textannotation disambiguated wl-thing\">CSS<\/span><\/a>. Eccoli.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/sos-wp.it\/wp-content\/uploads\/color-picker.jpg\" alt=\"Color Picker per la scelta dei colori\" class=\"wp-image-51363\"\/><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"nomecolore\">Nome del colore<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">blockquote {\nborder-color: pink;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Il sistema che usa il nome del colore consiste nell&#8217;inserire la denominazione in inglese del colore. \u00c8 possibile usare 140 tonalit\u00e0 diverse. Consulta la <a href=\"https:\/\/www.w3schools.com\/colors\/colors_hex.asp\" target=\"_blank\" rel=\"noopener nofollow\">lista dei nomi dei colori del W3C<\/a> per conoscerli tutti.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"exa\">Valore esadecimale<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">h3 {\ncolor: #FF0000;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\"><strong>Il formato esadecimale \u00e8 quello pi\u00f9 diffuso in assoluto,<\/strong> perci\u00f2 ti consiglio di studiarlo bene. Il valore secondo questo formato \u00e8 composto da un # seguito da sei cifre (da 0 a 9) o lettere (da A a F). Si parte da #000000 &#8211; totale assenza di colore &#8211; che corrisponde al nero, fino ad arrivare a #FFFFFF &#8211; massimo valore di colore &#8211; che sarebbe il bianco.<\/p>\n\n\n\n<p class=\"has-text-align-left\">La prima coppia di cifre indica la quantit\u00e0 di rosso, la seconda coppia indica la quantit\u00e0 di verde, le ultime due cifre invece sono per il blu.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Di conseguenza, il colore #FF0000 corrisponde al rosso, #00FF00 al verde, #0000FF al blu.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Consulta tutti i colori disponibili con il <a href=\"https:\/\/www.w3schools.com\/colors\/colors_picker.asp\" target=\"_blank\" rel=\"noopener nofollow\">Color Picker del W3C<\/a>.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"rgb\">Sistema RGB<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">body {\nbackground-color: rgb(0, 255, 0);\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Il sistema RGB indica la quantit\u00e0 di rosso (R), verde (G) e blu (B) presenti nel colore, usando un valore da 0 a 255. Si usa indicando la dicitura <em>rgb<\/em> e poi, tra parentesi tonde, i tre valori separati da una virgola.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Nel Color Picker del W3C trovi anche questi valori.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Ci sono anche altri sistemi per indicare i colori con il <span id=\"urn:enhancement-70c4134d-1984-44b4-0461-d8d13c7a8215\" class=\"textannotation disambiguated wl-thing\">CSS<\/span>, ma non sono molto diffusi, perci\u00f2 non ritengo opportuno parlarne in questo articolo di base.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"background\">Background<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Il <em>background<\/em> indica lo sfondo di un elemento. Esso occuper\u00e0 tutto lo spazio fino al padding, ma non comprende i margini, che rimangono esterni.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Suggerisco di fare sempre molta attenzione al contrasto tra sfondo e testo. Uno sfondo troppo scuro rende molto difficile la lettura, specialmente per chi ha problemi di vista. Prova ad eseguire un <a href=\"https:\/\/webaim.org\/resources\/contrastchecker\/\" target=\"_blank\" rel=\"noopener nofollow\">test del contrasto<\/a> per verificare che tutti leggano con facilit\u00e0 il tuo contenuto.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Possiamo usare un colore di sfondo, un&#8217;immagine oppure un gradiente, ossia una sfumatura tra pi\u00f9 colori.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"bgcolor\">background-color<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">aside {\nbackground-color: #FFFF99;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">\u00c8 possibile inserire il colore di sfondo con la propriet\u00e0 <em><code>background-color<\/code>.<\/em> Il colore pu\u00f2 essere indicato con i sistemi visti sopra. Per\u00f2 possiamo anche inserire il valore <em>transparent<\/em>, che rende l&#8217;elemento trasparente.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"bgimg\">background-image<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">footer {\nbackground-image: url(\"immagine.jpg\");\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Aggiungiamo un&#8217;immagine di sfondo con <em><code>background-image<\/code>.<\/em> Il suo valore sar\u00e0 la dicitura <em>url<\/em> seguita dal percorso dell&#8217;immagine.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"bgrepeat\">background-repeat<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">body {\nbackground-repeat: round;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Come fare per adattare l&#8217;immagine alle dimensioni dell&#8217;elemento? Di default, se l&#8217;immagine \u00e8 pi\u00f9 piccola, verr\u00e0 ripetuta in verticale e orizzontale fino a occupare l&#8217;intero spazio disponibile.<\/p>\n\n\n\n<p class=\"has-text-align-left\">I valori che puoi usare sono:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em><code>background-repeat: repeat-x<\/code> <\/em>&#8211; ripete in orizzontale;<\/li>\n\n\n\n<li><code><em>background-repeat: repeat-y<\/em><\/code> &#8211; ripete in verticale;<\/li>\n\n\n\n<li><em><code>background-repeat: no-repeat<\/code> <\/em>&#8211; non ripete;<\/li>\n\n\n\n<li><code><em>background-repeat: space<\/em><\/code> &#8211; ripete senza spezzare;<\/li>\n\n\n\n<li><code><em>background-repeat: round<\/em><\/code> &#8211; allarga fino a riempire lo spazio.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"dimensioni\">Dimensioni e visibilit\u00e0<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Ogni elemento <span id=\"urn:enhancement-e9604470-840d-2a3a-7aa7-333b9b25466b\" class=\"textannotation disambiguated wl-thing\">HTML<\/span> ha una forma rettangolare e possiamo stabilire le sue dimensioni e la visibilit\u00e0 nella pagina.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"width\">width<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">.box {\nwidth: 450px;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">La <code><em>width<\/em><\/code> \u00e8 la larghezza dell&#8217;elemento. Pu\u00f2 essere espressa in pixel, o in percentuale.<\/p>\n\n\n\n<p class=\"has-text-align-left\">I pixel indicano una misura fissa che non \u00e8 responsive.<\/p>\n\n\n\n<p class=\"has-text-align-left\">La misura in percentuale si riferisce all&#8217;elemento che contiene quello a cui stiamo dando la dimensione. Se ho un&#8217;immagine con <code>width: 50%;<\/code> dentro un paragrafo, l&#8217;immagine sar\u00e0 larga la met\u00e0 del paragrafo.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"height\">height<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">#sidebar {\nheight: 800px;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Il valore <code><em>heigth<\/em><\/code> indica l&#8217;altezza di un elemento. Anche questo si pu\u00f2 indicare in pixel o in percentuale.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"display\">display<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">.hidden {\ndisplay: none;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">La propriet\u00e0 <code><em>display<\/em><\/code> indica come deve essere reso il rettangolo nel quale si trova un elemento:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>inline<\/em>: elemento su una riga;<\/li>\n\n\n\n<li><em>block<\/em>: elemento che occupa la larghezza disponibile (o che gli abbiamo impostato con <em>width<\/em>;<\/li>\n\n\n\n<li><em>inline-block<\/em>: elemento su una stessa riga, ma possiamo dargli una larghezza e un&#8217;altezza;<\/li>\n\n\n\n<li><em>none<\/em>: l&#8217;elemento &#8220;scompare&#8221;.<\/li>\n<\/ul>\n\n\n\n<p class=\"has-text-align-left\">Si pu\u00f2 usare <em>display: none;<\/em> per visualizzare un elemento sul PC, ma nasconderlo dai cellulari.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Una propriet\u00e0 simile \u00e8 <code><em>visibility<\/em><\/code>, che pu\u00f2 assumere i valori <em>visible<\/em> (di default) o <em>hidden<\/em>. Un elemento <em>hidden<\/em>, per\u00f2, continuer\u00e0 a occupare lo spazio nella pagina anche se non lo vediamo.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"overflow\">overflow<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">#sezione {\noverflow: visible;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">La propriet\u00e0 <code><em>overflow<\/em><\/code> indica il comportamento del contenuto di un box nel caso in cui la sua altezza sia troppo piccola per contenerlo. Il valore <em>visible<\/em> visualizzer\u00e0 il contenuto anche al di fuori del box, <em>hidden<\/em> mostrer\u00e0 solo il contenuto che pu\u00f2 stare al suo interno, mentre <em>auto<\/em> aggiunger\u00e0 delle barre di scorrimento per permetterci di vedere tutto il contenuto.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"posizione\">La posizione degli elementi<\/h3>\n\n\n\n<p class=\"has-text-align-left\">Vediamo adesso come posizionare gli elementi all&#8217;interno della pagina.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"position\">position<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">#header {\nposition: static;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">La propriet\u00e0 <code><em>position<\/em><\/code> permette di stabilire la posizione nella pagina. Il valore di default \u00e8 <em>static<\/em> e posiziona l&#8217;elemento successivamente a quello precedente.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Usando l&#8217;attributo <em>relative<\/em>, possiamo spostare l&#8217;elemento nelle 4 direzioni. Usando le propriet\u00e0 <em><code>left<\/code>, <code>right<\/code>, <code>top<\/code> e <code>bottom<\/code>,<\/em> possiamo spostare l&#8217;elemento di un certo numero di pixel:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#header {\nposition: relative;\nleft: 30px;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\">Il valore <em>fixed<\/em> attacca l&#8217;elemento ad un preciso punto: anche se scorro la pagina, vedo sempre l&#8217;elemento in quella posizione.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Simile a fixed \u00e8 <em>sticky<\/em>, che fa diventare &#8220;fixed&#8221; l&#8217;elemento non appena, scorrendo, raggiunge il bordo superiore della finestra.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Con <em>absolute<\/em> invece l&#8217;elemento si posizioner\u00e0 in maniera relativa al suo genitore.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"zindex\">z-index<\/h4>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"617\" height=\"423\" src=\"https:\/\/sos-wp.it\/wp-content\/uploads\/float-z-index.jpg\" alt=\"Esempi di float e z-index\" class=\"wp-image-51364\"\/><\/figure>\n\n\n\n<pre class=\"wp-block-preformatted\">.sovrapposto {\nz-index: 9999;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\"><code><em>z-index<\/em><\/code> \u00e8 un numero positivo o negativo che posiziona l&#8217;elemento davanti o dietro gli altri, in caso di sovrapposizione. I valori pi\u00f9 bassi andranno sotto, quelli pi\u00f9 alti invece si sovrappongono.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"float\">float<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">.destra {\nfloat: right;\n}\n<\/pre>\n\n\n\n<p class=\"has-text-align-left\"><code><em>float<\/em><\/code> ha come valore <em>left<\/em>, <em>right<\/em> oppure <em>none<\/em>.<\/p>\n\n\n\n<p class=\"has-text-align-left\"><em>left<\/em> significa che l&#8217;elemento si posiziona a sinistra rispetto al precedente, con <em>right<\/em> si posizioner\u00e0 sulla destra, e con <em>none<\/em> rimane nella posizione di default.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Se non annulliamo il <em>float<\/em> quando non serve pi\u00f9, anche gli elementi successivi si sposteranno. Perci\u00f2, resettiamo le posizioni con la propriet\u00e0 <code><em>clear<\/em><\/code>, che impedisce a un elemento di stare a destra (col valore <em>right<\/em>), a sinistra (<em>left<\/em>) o da entrambi i lati (<em>both<\/em>).<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tabellaCss\">Tabella riassuntiva delle propriet\u00e0 CSS<\/h2>\n\n\n\n<p class=\"has-text-align-left\">Abbiamo visto tutte le principali propriet\u00e0 <span id=\"urn:enhancement-6b118456-ae1f-516e-24c4-8259343c1563\" class=\"textannotation disambiguated wl-thing\">CSS<\/span> che potresti incontrare nella creazione del tuo sito web.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Concludo anche questa sezione con una tabella riassuntiva delle propriet\u00e0 viste finora.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Propriet\u00e0<\/th><th>Valori<\/th><th>Funzione<\/th><\/tr><\/thead><tbody><tr><td>font-family<\/td><td>famiglia1, famiglia2, famiglia generica;<\/td><td>imposta il font<\/td><\/tr><tr><td>font-style<\/td><td>normal, italic<\/td><td>testo normale o corsivo<\/td><\/tr><tr><td>font-weight<\/td><td>normal, bold, bolder, lighter, 400, 700<\/td><td>spessore del testo<\/td><\/tr><tr><td>font-size<\/td><td>px, em, percentuale<\/td><\/tr><tr><td>color<\/td><td>valore esadecimale &#8211; #FFFFFF<br>valore RGB &#8211; rgb(0, 0, 255)<br>nome colore<\/td><\/tr><tr><td>margin<\/td><td>ordine dei valori: sopra, destra, sotto, sinistra<\/td><td>spazio al di fuori dell&#8217;elemento<\/td><\/tr><tr><td>padding<\/td><td>ordine dei valori: sopra, destra, sotto, sinistra<\/td><td>spazio interno tra il confine e il contenuto<\/td><\/tr><tr><td>border-width<\/td><td>px, thin, medium, thick<\/td><td>spessore del bordo<\/td><\/tr><tr><td>border-style<\/td><td>dotted, dashed, solid, double<\/td><td>tipo di bordo<\/td><\/tr><tr><td>border-color<\/td><td>valore esadecimale &#8211; #FFFFFF<br>valore RGB &#8211; rgb(0, 0, 255)<br>nome colore<\/td><\/tr><tr><td>border<\/td><td>ordine valori: width &#8211; style &#8211; color<\/td><\/tr><tr><td>background-color<\/td><td>transparent<br>valore esadecimale &#8211; #FFFFFF<br>valore RGB &#8211; rgb(0, 0, 255)<br>nome colore<\/td><\/tr><tr><td>background-image<\/td><td>url(&#8220;&#8221;)<\/td><td>inserire percorso immagine<\/td><\/tr><tr><td>background-repeat<\/td><td>repeat-x, repeat-y, no-repeat, space, round<\/td><td>riempimento dello spazio<\/td><\/tr><tr><td>width<\/td><td>dimensione, percentuale<\/td><td>larghezza<\/td><\/tr><tr><td>heigth<\/td><td>dimensione, percentuale<\/td><td>altezza<\/td><\/tr><tr><td>display<\/td><td>inline, block, inline-block, none<\/td><td>none fa sparire l&#8217;elemento<\/td><\/tr><tr><td>visibility<\/td><td>visible, hidden<\/td><td>hidden nasconde l&#8217;elemento, ma lascia lo spazio<\/td><\/tr><tr><td>overflow<\/td><td>visible, hidden, auto<\/td><td>visibilit\u00e0 del contenuto in un elemento troppo corto<\/td><\/tr><tr><td>position<\/td><td>static, relative, absolute, fixed, sticky<\/td><\/tr><tr><td>z-index<\/td><td>numero positivo o negativo<\/td><td>gestisce la sovrapposizione di elementi<\/td><\/tr><tr><td>float<\/td><td>right, left, none<\/td><td>posizione a destra o sinistra<\/td><\/tr><tr><td>clear<\/td><td>right, left, both<\/td><td>resetta il float<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"conclusione\">Conclusione<\/p>\n\n\n\n<p class=\"has-text-align-left\">S\u00ec, c&#8217;\u00e8 tanto da studiare, ma una volta appreso il meccanismo diventa facile capire come e dove intervenire se si presenta un problema di formattazione.<\/p>\n\n\n\n<p class=\"has-text-align-left\">Ti ricordo che, se vuoi approfondire, puoi richiedere la nostra <a href=\"https:\/\/sos-wp.it\/servizi-web\/formazione-seo\/\" target=\"_blank\" rel=\"noopener\">formazione 1 a 1<\/a> con un insegnante esperto che risponder\u00e0 a tutte le tue domande e ti aiuter\u00e0 a imparare secondo le tue necessit\u00e0.<\/p>\n\n\n\n<p class=\"has-text-align-left\"><strong><em>Hai trovato utile questa guida?<\/em><\/strong><\/p>\n\n\n\n<p class=\"has-text-align-left\"><strong><em>Dove hai incontrato maggiori difficolt\u00e0<\/em><\/strong><\/p>\n\n\n\n<p class=\"has-text-align-left\">Scrivici le tue domande nei commenti.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Per costruire e gestire il tuo sito WordPress non hai bisogno di imparare HTML e CSS. Ma potrebbe tornarti utile. Con una conoscenza anche sollo di base del linguaggio HTML e di come \u00e8 strutturato il CSS puoi per esempio personalizzare il tuo sito e gestire l&#8217;aspetto di tutti gli elementi delle pagine. In questa [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":109239,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[8],"tags":[117,107],"class_list":["post-51360","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorial","tag-css","tag-html"],"acf":[],"_links":{"self":[{"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/posts\/51360","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/comments?post=51360"}],"version-history":[{"count":0,"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/posts\/51360\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/media\/109239"}],"wp:attachment":[{"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/media?parent=51360"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/categories?post=51360"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sos-wp.it\/wp-json\/wp\/v2\/tags?post=51360"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}