Manto Vincenzo

Per scaricare alcuni esempi html, template, cliccare qua

HTML

HTML è un linguaggio di Markup, ovvero di costruzione di interfacce grafiche per il web. E' a volte chiamato anche un linguaggio tag, perchè ogni istruzione è un tag.
Scopriamo meglio queste istruzioni:

<[nometag] [opzioni] > </[nometag]>

I nomi dei tag sono molti soprattutto nella versione HTML5. Ecco una tabella che ne cita alcuni:

Nome tag	Funzione
html	Tag fondamentale. Racchiude qualsiasi altro tag. Solo all'interno di questo blocco è possibile visualizzare una pagina correttamente
head	Posto dentro html. Racchiude tutta l'intestazione ovvero tutta quella parte di codice che non fa parte del contenuto della pagina
body	Posto dentro html. Racchiude tutta la parte di codice che compone il contenuto della pagina
title	Posto dentro head. Indica la scritta che compare nella scheda del browser
style	Posto dentro head. Al suo interno viene scritto il codice in linguaggio CSS che definisce lo stile della pagina
script	Posto dentro head. Al suo interno viene scritto il codice in linguaggio Javascript che definisce le varie funzioni lato client della pagina
h1-2-3-4-5-6	Posto dentro body. Sono i titoli della pagina. Si dividono in 6 categorie (h1-h2-h3-ecc) in base alla grandezza carattere
p	Posto dentro body. Indica il paragrafo. All'interno è possibile visualizzare un testo
div	Posto dentro body. Indica la suddivisione del body in porzioni o contenitori. Al loro interno è possibile inserire qualunque cosa
a	Posto dentro body. Crea un collegamento. Fra i tag è possibile scrivere il nome del link, ovvero come verra visualizzato
img	Posto dentro body. Permette di visualizzare un'immagine attraverso un path assoluto.
input	Posto dentro body. Permette di creare bottoni o aree per scrivere.

Tag: html


<html>
...
</html>

Da qui si inizia coll'aggiungere altri tag per la creazione di una pagina web

Tag: head


<html>
	<head>
	...
	</head>
</html>

Posto questo tag, ora è possibile inserire le fondamenta "invisibili"(ovvero non visibili nella pagina ma di rilevante importanza)

Tag: title


<html>
	<head>
		<title>Titolo della mia pagina</title>
	</head>
</html>

Questo tag renderà visibile ciò che si è scritto fra le due istruzioni come il titolo della scheda del browser. Inoltre aiuta il motore di ricerca a trovare facilmente la tua pagina se cercata

Tag: style


<html>
	<head>
		<title>Titolo della mia pagina</title>
		<style>
			...
		</style>
	</head>
</html>

Questo tag è di fondamentale importanza perchè contiene lo script in CSS (un linguaggio di stile) per definire la parte grafica dei componenti della pagina

Tag: script


<html>
	<head>
		<title>Titolo della mia pagina</title>
		<style>
			...
		</style>
		<script>
			...
		</script>
	</head>
</html>

Anche questo tag serve ad inserire un codice in linguaggio generalmente (di default) però Javascript. Esso non è un linguaggio per la parte grafica ma è utilizzato per definire delle funzioni chiamate per esempio attraverso il click di un bottone

Tag: body


<html>
	<head>
		<title>Titolo della mia pagina</title>
		<style>
			...
		</style>
		<script>
			...
		</script>
	</head>
	<body>
		...
	</body>
</html>

E' il tag più importante visto che deve contenere tutto ciò che si potrà vedere nella pagina. Ogni componente che viene inserito qui è visualizzabile

Tag: h


<html>
	<head>
		<title>Titolo della mia pagina</title>
		<style>
			...
		</style>
		<script>
			...
		</script>
	</head>
	<body>
		<h1>Titolo in grande</h1>
	</body>
</html>

Questo tag definisce i titoli. Qui sotto è possibile vedere i risultati:

Titolo in grande h1

TITOLO IN GRANDE H2

Titolo in grande h3

Titolo in grande h4

Titolo in grande h5

Titolo in grande h6

Tag: p


<html>
	<head>
		<title>Titolo della mia pagina</title>
		<style>
			...
		</style>
		<script>
			...
		</script>
	</head>
	<body>
		<h1>Titolo in grande</h1>
		<p>Un paragrafo</p>
	</body>
</html>

Questo tag definisce il paragrafo ove è possibile inserire il testo. Qui sotto è possibile vedere i risultati:

Titolo in grande

Un paragrafo

Tag: div


<html>
	<head>
		<title>Titolo della mia pagina</title>
		<style>
			...
		</style>
		<script>
			...
		</script>
	</head>
	<body>
		<h1>Titolo in grande</h1>
		<p>Un paragrafo</p>
		<div style="background:lightblue" 
		<!--questo è un commento: style="background:lightblue" definisce il colore del contenitore come azzurro (lightblue)--> >
			<h1>Altro titolo</h1>
			<p>Altro paragrafo</p>
		</div>
	</body>
</html>

Questo tag definisce un contenitore ove è possibile inserire altri tag. Qui sotto è possibile vedere i risultati:

Titolo in grande

Un paragrafo

Altro titolo

Altro paragrafo

Tag: a


<html>
	<head>
		<title>Titolo della mia pagina</title>
		<style>
			...
		</style>
		<script>
			...
		</script>
	</head>
	<body>
		<h1>Titolo in grande</h1>
		<p>Un paragrafo</p>
		<div style="background:lightblue" 
			<h1>Altro titolo</h1>
			<p>Altro paragrafo</p>
		</div>
		<a href="http://copernico.duckdns.org/">Un link</a>
	</body>
</html>

Questo tag definisce un link in questo caso portante all'url http://copernico.duckdns.org/. Qui sotto è possibile vedere i risultati:

Titolo in grande

Un paragrafo

Altro titolo

Altro paragrafo

Un link

Tag: img


<html>
	<head>
		<title>Titolo della mia pagina</title>
		<style>
			...
		</style>
		<script>
			...
		</script>
	</head>
	<body>
		<h1>Titolo in grande</h1>
		<p>Un paragrafo</p>
		<div style="background:lightblue" 
			<h1>Altro titolo</h1>
			<p>Altro paragrafo</p>
		</div>
		<a href="http://copernico.duckdns.org/">Un link</a><br/>
		<img src="http://copernico.duckdns.org/~manto_vincenzo/Logo/icon.png"></img>
	</body>
</html>

Questo tag visualizza un'immagine che si trova nel percorso dopo src. Qui sotto è possibile vedere i risultati:

Titolo in grande

Un paragrafo

Altro titolo

Altro paragrafo

Un link

N.B.

E' comparso un tag che si chiama <br/>. Quest'istruzione permette di andare a capo (come l'invio sulla tastiera). Diffatti il comune enter non viene letto dal browser.

Tag: input


<html>
	<head>
		<title>Titolo della mia pagina</title>
		<style>
			...
		</style>
		<script>
			...
		</script>
	</head>
	<body>
		<h1>Titolo in grande</h1>
		<p>Un paragrafo</p>
		<div style="background:lightblue" 
			<h1>Altro titolo</h1>
			<p>Altro paragrafo</p>
		</div>
		<a href="http://copernico.duckdns.org/">Un link</a><br/>
		<img src="http://copernico.duckdns.org/~manto_vincenzo/Logo/icon.png"></img><br/>
		<input type="text" value="scritta"></input>
		<input type="submit" value="bottone"></input>
	</body>
</html>

Questo tag crea un'area in cui è possibile scrivere. Esistono svariati tipi di input. Se l'input è definito da type="text" allore definisce uno spazio per scrivere. Se è presente invece type="submit" l'input crea un bottone. Qui sotto è possibile vedere i risultati:

Titolo in grande

Un paragrafo

Altro titolo

Altro paragrafo

Un link

Example

Login

E' un falso form di entrata ;)

Username:

Password:

Contattami!Clicca qua


<html>
	<head>
		<title>Login</title>
	</head>
	<body>
		<h1>Login</h1>
		<p>E' un falso form di entrata ;)</p>
		<div style="background:lightgreen">
			<p>Username:</p>
			<input type="text"></input><br/>
			<p>Password:</p>
			<input type="text"></input><br/>
		</div>
		<a href="http://copernico.duckdns.org/~manto_vincenzo">Contattami!Clicca qua</a><br/>
	</body>
</html>