[guida] Tutti i trucchi per HTML!

Discussione Generale
1

Ciao a tutti! Benvenuti sul Forum Italiano ufficiale di Overwatch! :wave:

Come forse già saprete, i nuovi forum consentono di utilizzare il codice HTML all’interno dei post. Ho deciso di creare questa ‘Guida trucchi per HTML’ per mostrare tutte le diverse possibilità e strumenti che si possono usare per personalizzare i thread e le risposte. :heartpulse:
Sentiti libero di salvare questa pagina come segnalibro nel tuo browser! :star:

(Nota: potresti non essere in grado di utilizzare alcuni dei seguenti codici, a seconda del trust-level attualmente disponibile. Puoi leggere ulteriori informazioni sulle nuove modifiche al forum qui.

Seleziona una categoria:

Formato del testo

Testo in Grassetto b

<b>I need healing!</b> => I need healing!

Testo in Corsivo i

<i>I need healing!</i> => I need healing!

Testo Barrato s

<s>I need healing!</s> => I need healing!

Testo Abbreviato abbr

<abbr title="Well Played">WP</abbri> => WP

Testo Inseritoins

<ins>I need healing!</ins> => I need healing!

Testo Cancellatodel

<del>I need healing!</del> => I need healing!

Testo Keyboard kbd

Press <kbd>H</kbd> to change Hero => Press H to change Hero

Testo Soprascrittosup

I need <sup>healing!</sup> => I need healing!

Testo Sottoscrittosub

I need <sub>healing!</sub> => I need healing!
Dimensioni del testo

Testo Grande big

<big>I need healing!</big> => I need healing!

Testo Piccolo small

<small>I need healing!</small> => I need healing!

Testo di Testata 1 h1

<h1>I need healing!</h1> =>

I need healing!

Testo di Testata 2 h2

<h2>I need healing!</h2> =>

I need healing!

Testo di Testata 3 h3

<h3>I need healing!</h3> =>

I need healing!

Testo di Testata 4 h4

<h4>I need healing!</h4> =>

I need healing!

Testo di Testata 5 h5

<h5>I need healing!</h5> =>
I need healing!

Testo di Testata 6 h6

<h6>I need healing!</h6> =>
I need healing!
Link e immagini

Testo con a href

<a href="https://eu.forums.blizzard.com/it/overwatch/t/guida-settaggi-video/293?u=raven">guida impostazioni video</a> => guida impostazioni video

Immagini img

Iniziamo con il richiamare il tag img, ora possiamo aggiungere ulteriori informazioni:
  • src indica la fonte della nostra immagine. Assicuratevi soltanto che il link finisca con un formato riconosciuto tra .jpg, .jpeg, .png, .bmp o .gif.

  • Se l’immagine va offline o viene rimossa quindi non è più disponibile per qualsiasi ragione si visualizzerà quello scritto dopo il tag alt

  • Per regolare la larghezza dell’immagine (asse x) utilizzare il tag width, se questo valore non viene specificato l’immagine manterrà le proporzioni originali.

  • Per regolare l’altezza dell’immagine (asse y) utilizzare il tag height, se questo valore non viene specificato l’immagine manterrà le proporzioni originali.

<img src="https://thumbs.gfycat.com/CleverExcellentAfricanporcupine-size_restricted.gif alt="Immagine offline" height=150> => Immagine offline

Immagine con link incorporato

Combiniamo quello che abbiamo scritto in precedenza tra un link e un immagine:
<a href="https://playoverwatch.com/en-gb/heroes/sombra"><img src="https://thumbs.gfycat.com/CleverExcellentAfricanporcupine-size_restricted.gif" height="150"/></a> =>
Video

Video

I video non hanno bisogno di alcun codice HTML è sufficiente copiare ed incollare il link direttamente nel proprio post.
Tabelle

Tabelle

Prima di tutto, una tabella viene definita dal tag table, dopodichè aggiungiamo le varie parti:

  • La prima linea dell tua tabella, la testata, si inserisce utilizzando il tag th.

  • Qualsiasi dato dopo la testaa può essere aggiunto con il tag td.

  • Per proseguire alla linea successiva della tua tabella utilizza il tag tr

<table>
<th>Win Rate (%)</th>
<th>Ana</th>
<th>Doomfist</th>
<th>Junkrat</th>
<th>Zarya</th>
<tr>
<td>PC</td>
<td>46.01</td>
<td>51.06</td>
<td>49.94</td>
<td>51.05</td>
<tr>
<td>PS4</td>
<td>42.63</td>
<td>49.17</td>
<td>50.21</td>
<td>50.77</td>
<tr>
<td>XB1</td>
<td>43.38</td>
<td>49.81</td>
<td>50.27</td>
<td>50.75</td>
</table>
=>
Win Rate (%) Ana Doomfist Junkrat Zarya
PC 46.01 51.06 49.94 51.05
PS4 42.63 49.17 50.21 50.77
XB1 43.38 49.81 50.27 50.75
Altro

Pausa

Utilizzando il tag br si può creare spazio tra i vari paragrafi
Move the Payload! <br> I need Healing!
=>
Move the Payload!

I need Healing!

Dettagli/Sommario

Si può creare un piccolo menu ad apertura che mostra dei dettagli specifici utilizzando i tag details e summary
<details><summary>Shimada Bros</summary>Hanzo & Genji</details>
=>
Shimada BrosHanzo & Genji

Linea Orizzontale hr

<hr>
=>

Descrizione dd

Le descrizioni sono testi normali leggermente spostati più a destra rispetto al paragrafo.
Hey Mercy, Sono Genji <dd> I need Healing
=>
Hey Mercy, Sono Genji
I need Healing
Vi ringrazio per la lettura. Se avete feedback commentate qui sotto e provvederò ad aggiornare/sistemare la guida.
Il Thread è stato ispirato da un post di Pachimari un mio collega MVP di un'altra Nazione.

Raven
10 "Mi piace"
2

sarebbe il caso di pinnare questa guida poiché molti non sanno usare L’HTML

1 "Mi piace"
3

Grazie Raven, sono passati aaaanni dal mio ultimo uso dell’html, ergo la guida torna utile :+1:

1 "Mi piace"
9

Esistono html per file audio?

10

Si eccome! In realtà ho dato per scontato che su un Forum siano bloccati per ovvi motivi di musica in background e simili… Comunque faccio qualche test e ti aggiorno!

Raven

1 "Mi piace"
11

Come sospettavo tutti i file audio compresi i controls tipo player volume etc… sono disattivati. L’unico modo di poter linkare un file audio è tramite il link diretto che sottoforma di media può avere una preview come se fosse un video. E’ un po’ contorto ma i tag <audio><controls><source>non funzionano. Quindi rispondendo alla tua domanda: esistono ma non sono attivi su questo Forum! :sunglasses:

Raven

1 "Mi piace"
12

ti ringrazio per l’info :wink:
ti spiego, volevo creare il topic delle ulti come nel vecchio format magari immettendo proprio i file audio (che li ho trovati in cartella directory)
inoltre volevo creare in futuro un topic delle varie iterazione tra i pg del roster nei pre-match. le ultime introdotte dall’anniversary 2018 sono davvero interessanti :wink:

13

Non so quanto possa essere utile, ma nel forum Americano sembra che stiano testando gli iframe per Google Maps

2 "Mi piace"
14

Grazie della segnalazione includerò i comandi iframe nella sottocategoria “altro”!

Raven

1 "Mi piace"