Html tag utili

Ingrandisci il Font ingrandisci font | Riduci il Font riduci font | stampa documentosalva documento in pdf

Andare accapo:

<br>

Spazio vuoto: 

&nbsp;

Linea orizzontale:

<hr>

Esempio:


 

Redirect tramite html

<meta http-equiv="refresh" content="0;URL=http://www.miosito.com/nuova-pagina.html">

Se invece desiderate un refresh dopo 5 o 10 secondi modificate lo "0" con "5" o "15"

Esempio di refresh dopo 10 secondi: <meta http-equiv="refresh" content="10;URL=http://www.miosito.com/nuova-pagina.html">

Colore sfondo html:

<body bgcolor="blue">

oppure:

<body style="background-color: blue">

Testo in grassetto:

<b>testo</b> oppure <strong>testo in grassetto </strong>

Testo sottolineato:

<u>testo sottolineato</u>

Testo in corsivo:

<i>testo in corsivo </i>

Testo barrato:

<del>testo barrato</del>

Testo con link: 

<a href="http://www.webmastertrapani.it"> Vai alla Home di WebmasterTrapani.it </a>

Colore testo:

<span style="color: red;">testo rosso</span>

<span style="color: green;">testo verde</span>

<span style="color:  blue;">testo blue</span>

 

Testo giustificato:

<p style="text-aligh=justify">testo giustificato<p>

Testo centrato:

<p style="text-aligh=center">testo centrato<p>

Testo a sinistra:

<p style="text-aligh=left">testo a sinistra<p>

Testo a destra:

<p style="text-aligh=right">testo a destra<p>

<div align="center"> testo</div>

Oppure, alternativa validata W3C:

<div style="test-align:center;">testo o immagine da centrare</div>

Inserisci immagine: 

<img src="images/immagine.png" alt="mia immagine">

Centrare un'immagine: 

<img style="display: block; margin: 0 auto;" src="images/matite.png" alt="" width="500" height="50" />

Inserisci immagine con link: 

<a href="http://www...percorso link"><img src="percorso immagine.jpg"></a>

Inserisci immagine forzando dimensioni ed a sinistra rispetto al testo: 

<img style="float: left; border-width: 5px; margin: 5px;" title="immagine di prova" src="images/foto.jpg" alt="immagine di prova" width="110" height="97" />

Formattazione testo in html:

testo di prova

Elenco puntanto con circle:

<ul style="list-style-type: circle;">
<li>elenco 1</li>
<li>elenco 2</li>
<li>elenco 3</li>
</ul>

Risulato:

  • elenco 1
  • elenco 2
  • elenco 3

Elenco puntanto:

<ul style="list-style-type: disc;">
<li>elenco 1</li>
<li>elenco 2</li>
<li>elenco 3</li>
</ul>

Risulato:

  • elenco 1
  • elenco 2
  • elenco 3

Menù a tendina con link :

<select name="url" onchange="location.href = this.value;">
<option selected="selected" value="#">-------------</option>
<option value="http://www.google.it">Google</option>
<option value="http://www.yahoo.it">Yahoo</option>
<option value="http://www.altervista.org">AlterVista</option>
</select>

Ecco il risultato:

Scegli opzione:


Link anchor (ad un punto della stessa pagina)

Testo al quale desideriamo mettere il link:

<a href="#nomeancora">scrivi testo da linkare</a>

Testo al quale desideriamo rimandare il link:

<a name="nomeancora">Home</a>

 

ES: <a href="#nome-ancora">testo</a>

<a name="nome-ancora">testo</a>

Oppure:

<a href="#nome-ancora"></a>
<a id="nome-ancora"></a>  (se l'ID non è associato ad un paragrafo o titolo)
oppure:
<h1 id="nomeancora">Testo da mostrare</h1> (o <p></p>, etc.)
Ancora in u'altra pagina:
<a href="../Text/programma.xhtml#nome-ancora">Testo da mostrare</a>

Apice:

<sup>testo</sup>

Pedice:

<sub>testo</sub>

Tabella in html: 

<table style="height: 78px;" width="80">
<tbody>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>

Testo con scorrimento in marquee:

<marquee>test scorrevole</marquee>

Esempio: 

testo scorrevole

Marquee verticale (il valore:"scrollamount", indica la velocità; "direction" indica la "direzione")

<marquee scrollamount="2" direction="up">testo scorrevole</marquee>

Esempio: 

testo scorrevole

Marquee che si ferma al pasaggio del mouse:

<marquee onmouseover="this.stop()" onmouseout="this.start()">immagine/testo</marquee>

immagine/testo

Marquee con box, direzione verticale:

<marquee scrollamount="2" direction="up" bgcolor="yellow" height="243" width="200"> testo scorrevole dentro un box.</marquee>

Testo scorrevole dentro un box.

Incudere un iframe o pagina esterna sul proprio sito:

<iframe src="http://www.giovannafilingeri.it" width="400" height="500"></iframe>

Iframe senza bordi:

<iframe src="http://www.giovannafilingeri.it" marginwidth="0" marginheight="0" height="400" width="500" align="middle" style="border-style: solid; border-width: 0"></iframe>

Oppure, scrivere <embed> al posto di iframe.

Height iframe automatica:

Codice da inserire fra <head> ed </head>:

<!-- Iframe autoadattabile in altezza -->
<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>

Codice Html da inserire dove volete che appaia l'iframe:

<iframe name="slideshow" src="slider.html" width="100%" height="800" framespacing="0" border="0" frameborder="0" scrolling="no" onload='javascript:resizeIframe(this);'>
</iframe>

Iframe intero sito

<iframe src="http://www.nomedominio.it" name="frame1" scrolling="auto" frameborder="no" align="center" height = "100%" width = "100%">
</iframe>

File audio

<embed src=”url del file audio” autostart=”true” />

Includi File pdf
<embed width="600" height="400" src="cartellapdf/file1.pdf">


Object Incorpora file in pdf

<Object data = "myfile.pdf" type = "pdf application /" width = height "100%" = "100%">
<P> Sembra non si disponga di un plug-in PDF per questo browser.
Nessun problema ... Puoi cliccare qui <a href="myfile.pdf"> per scaricare il file in formato PDF. </a> </ p>
</ Object>

<object type ="application/pdf"data="NAMEofFILE.pdf" width="X"vheight="Y"></object>

Incorpora PDF responsive
<div class = "graph-outline" >
<object style = " width : 100% ; " data = "path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type = "application/pdf" >
<embed src = "path/to/file.pdf?#zoom=85&scrollbar=0&toolbar=0&navpanes=0" type = "application/pdf" />
</object>
</div>

File audio
<object data="canzone.mp3" type="audio/mpeg">
<param name="autostart" value="true">
<param name="loop" value="false">
</object>


Inserisci video in una pagina html

Prima di tutto imposta il CSS

video {
    max-width: 100%;
    height: auto;
}

Codice Html da inserire:

<video controls="controls" width="400" height="150">
    <source src="video/photoshop-grafica.mp4" type="video/mp4" />
      Your browser does not support HTML5 video.
  </video>

Risultato:

LINK UTILI: mailto, chiama, whats app, Skipe:

  <a href="mailto: info@tuamail.it"> info@tuamail.it</a>
  <a href="tel: +39123456">+39123345</a>
  <a href="whatsapp://send?text=Hello World!&phone=+39123456">WhatsApp</a><br><br>
  <a href="skype:tuo.account.skipe">Skipe</a>