html — tag utili e caratteri speciali

Caratteri speciali

&#62    &gt    >
&#60    &lt    <
        &shy   -
&#171          «
&#187          »
&#160          <i>blank</i>
&#09           <i>tab</i>
&#247          ÷
&#177          ±

Colori

nero	#000000
bianco	#ffffff
rosso	#ff0000
blu	#0000ff
verde	#008000
giallo	#ffff00
fucsia	#ff00ff
grigio	#808080
lime	#00ff00
marrone	#800000
navy	#000080
oliva	#808000
viola	#800080
acqua	#00ffff
argento	#c0c0c0
oro	#ffd700

Tags

<!-- commento -->

<title>nome della pagina web</title>

<h1>titolo grosso</h1>
<h2>titolo un po' più piccolo</h2>

<hr> <!-- crea una linea che separa orizzontalmente la pagina -->

<div id = "inizio pagina"> <!-- in pratica è come un goto (questa è la destinazione)-->
....
<a href = "#inizio pagina" title = "un link che rimanda all'inizio della pagina">Torna Su</a>

<strong>Testo enfatizzato (grassetto)</strong>
<em>Testo enfatizzato (corsivo)</em>

<b>Testo grassetto</b>
<i>Testo corsivo</i>

<!--un tento enfatizzato ha maggiore rilevanza per il browser rispetto a un testo normale. graficamente <strong> e <b> sono identici, così come <em> e <i> -->

<a href = "http://www.indirizzolink.it" title = "Descrizione del link"> Testo del link</a>

<img src = "https://www.indirizzolink.com/photo.png" alt = "Didascalia dell'immagine" width="100" height="50">

<!-- elenco puntato -->
<ul>
	<li>Elemento 1</li>
	<li>Elemento 2</li>
	<li>Elemento 3</li>
</ul>

<!-- elenco numerato -->
<ol>
	<li>Elemento 4</li>
	<li>Elemento 5</li>
	<li>Elemento 6</li>
</ol>

<p style = "color:#ff0000">Testo rosso</p>
<p style = "color:red">Sempre testo rosso</p>

<p style = "font-family:Comic Sans MS;">Testo in Comic Sans MS</p>

<p style = "font-size:500%;">Testo bello grosso</p>

<p style = "text-align:center;">Testo centrato</p>
<p style = "text-align:right;">Testo allineato a destra</p>
<p style = "text-align:left;">Testo allineato a sinistra</p>

<p align="center">Anche questo va bene</p>

<p style="background-color:blue;">Tutta questa riga di testo ha lo sfondo blu</p>

<!-- Tutti questi style si possono mettere anche nel 'h1', oppure nel 'body' per applicare lo stile a tutta la pagina -->

H<small><sub>2</small></sub>O	<!-- apice -->
X<small><sup>2</small></sup>	<!-- pedice -->

<font color = "#ff0000">
	<p>Tutto quello che c'è in questo tag '<font>' è testo rosso</p>
</font>

<font size = "3">
	<p>Tutto quello che c'è in questo tag 'font' è testo grosso 3</p>
</font>

<font face = "Comic Sans MS">
	<p>Tutto quello che c'è in questo tag 'font' è testo in Comic Sans MS</p>
</font>

<table>
	<tr><td>Colonna 1</td><td>Colonna 2</td></tr>
	<tr><td>Dato 1</td><td>Dato 2</td></tr>
	<tr><td>Dato 3</td><td>Dato 4</td></tr>
	<tr><td>Dato 5</td><td>Dato 6</td></tr>
</table>

<style>    <!-- questo è CSS e serve per visualizzare i bordi, copia-incolla senza fare domande e tutti felici -->
table  {
	border-collapse:collapse
}
td, th {
	border:1px solid #ddd;
	padding:8px;
}
</style>

<form name="NomeForm">
	<input type="text" name="text1"><br>
	<input type="button" value="invia" onClick="invia()"><br>
	<input type="checkbox" name="checkbox1"> checkbox<br>
	<input type="color" name="color1"><br>
	<input type="date" name="date1"><br>
	<input type="datetime-local" name="datetime-local1"><br>
	<input type="file" name="file1"><br>
	<input type="month" name="month1"><br>
	<input type="number" name="number1"><br>
	<input type="password" name="password1"><br>
	<input type="radio" name="radio1">1<br>
	<input type="radio" name="radio2">2<br>
	<input type="radio" name="radio3">3<br>
	<input type="range" name="range1"><br>
	<input type="reset"><br>
	<input type="time" name=""><br>
	<input type="week" name=""><br>
</form>

<script type="text/javascript">
	document.write("Testo stampato su pagina");
	alert("Avviso con possibilità di premere solo OK");
	confirm("Avviso con possibilità di premere o OK o ANNULLA");
	var r = prompt("Frase con casella di testo per inserire una stringa");
	window.location.href = 'https://www.google.com/'; //redirect
	function invia()
	{
		var n = document.NomeForm.text1.value;
	}
</script>

<style type="text/css">
	.cursore{
		cursor:url(mycursor.cur), auto;
	}
</style>
<body class="cursore">
...
</body>

<!-- posso mettere class="cursore" anche in <p>, in <h1> o dove mi pare :) -->
<!-- NOTA: il file deve essere delle dimensioni giuste! (piccolo): se è troppo grande non si vede -->

<style type="text/css">
::-webkit-scrollbar {
	display: none;
}
</style>

<!-- così la scrollbar laterale non è visualizzata, ma è possibile scrollare la pagina -->