GUIDA HTML

Pubblicato il | Da Alessandro I | Nessun commento

Per creare un file html, aprire un editor testuale, va bene anche il block notes e salvato con estensione .htm o .html
Importante si consiglia di scrivere IL NOME DEL FILE (sia gli htm o html che i gif, jpeg…) sempre tutto minuscolo e di non utilizzare lo spazio (sul web verrebbe interpretato così: 20% ) come separatore potete utilizzare qualsiasi altro simbolo, in particolare il trattino – o il _
Nota1: l’html è un linguaggio “case unsensitive“, cioè non fa differenza se si scrivono i commandi in maiuscolo o minuscolo!
Nota2: I colori possono essere scritti in forma esadecimale (esempio nero:#000000) oppure con la terminologia inglese (black).

La “Struttura invisibile”:
La struttura iniziale è invisibile agli occhi dell’utente ma è utilizzata dagli spider e robot dei vari motori di ricerca.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<title>titolo della pagina visualizzato in alto del browser</title>

<meta name=”author” content=”autore del sito”>
<meta name=”description” content=”descrizione del sito”>
<meta name=”keywords” content=”parole chiavi del sito separate dalla virgola”>
</head>
<!– questo è un commento –>

Attributi:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
Indica il software utilizzato per creare le pagine; la lingua del sito; e il tipo di documento (html)
Name Indica il tipo di meta tag, i più famosi sono quei 3 indicati ma c’è ne sono molti altri.
Content E’ il contenuto del meta tag personalizzabile.

Una volta prima che si utilizzassero i css, si usava scrivere qui in body, la struttura grafica del sito, in questo modo:
<body bgcolor=”red”>
<body text=”blue”>
<body background=”prova1.jpg”>
<body link=”red”>
<body alink=”green”>
<body vlink=”yellow”>

Attributi:
Bgcolor è il colore di sfondo della pagina.
Background è un’eventuale immagine di sfondo della pagina.
Text indica il colore del testo
link il colore del link normale
alink il colore del link attivo
vlink il colore del link visitato
<body>
Tutto quello che si scrive o s’inserisce qui viene visualizzato dal browser. Alla fine ricordarsi sempre di chiudere con:
<!– questo è un commento non viene visualizzato –>
</body>
</html>

Il Testo:
Nota importante per inserire il testo si usa ormai generalmente il css, queste regole sono quindi obsolete.
<font face=”Arial” size=”10″ color=”black”>prova</font>
oppure <font color=”black>testo da scrivere</font>
<p align=”left”>
<center>testo centrale</center>

Attributi:
Face Tipo di carattere
Size Dimensione
Color Colore
Align Allineamento
può essere right(destro); center (centro); left (sinistra) justify (giustificato).

Mentre quest’altre si usano ancora:
<br> per andare a capo
oppure
<p>con p lascia spazio prima e dopo la chiusura </p>
<p>prova2</p>
<div>nessuno spazio rispetto a p va solo a capo</div>
<div>prova2</div>
<span>non va a capo</span><span>prova2/span>
<b>per scrivere in grassetto</b>
<c>per scriver in corsivo</c>
<s>per scrivere sottolineato</s>
<strike>testo sbarrato</strike>
<sup>testo in apice</sup>
<sub>testo in pedice</sub>

<h1>testo</h1>
<h6>testo</h6>
E’ una funzione speciale del testo per indicare che si tratta di un titolo.

Gli Elenchi:
<dir><li>elenco normale
</li></dir>

<dir><ol type=”1>elenco ordinato</ol></dir>
opppure <dir><ol></ol><ol></ol>…</ol></dir>

<dir><ul type=”disc”>elenco non ordinato</ul></dir>
opppure <dir><ul></ul><ul></ul>…</ul></dir>

Attributi:
type specifica quale valore deve assumere
per <ol>può essere: 1 numeri cardinali (arabi PREDEFINITO); I numeri ordinali (romani); A alfabetico;
per <ul>si può scegliere tra: disc (disco PREDEFINITO); circle (cerchio); square (quadrato pieno)

Le tabelle:
<table bgcolor=”pink” width=”500″ height=”500″ border=”0″ align=”left”>
<caption>legenda</caption>
<tr><td>cella 1</tr></td><tr><td>cella 2</td></tr>
</table>

Inserire una linea orrizzontale:
<hr noshade size=”5″ width=”50%” align=”center” border=”1″ color=”red”/>
oppure semplicemente </hr>

Attributi:
width (larghezza); height (altezza); size (dimensione); align (allineamento); border (bordo); color (colore).

Inserire un immagine:
<img src=”immagine.jpg” border=”0″ width=”50″ height=”50″ align=”center” alt=”testo”>

Attributi dell’immagine:
scr=”nome e percorso immagine.est” Le estensioni più comuni sono i .gif (immagini animate);  .jpeg o .jpg (il formato universale per eccellenza letto anche da lettori mp3/dvd/divx…); .png (un’altro formato assai noto).
border=”numero il bordo dell’immagine”
width=”numero – larghezza”
height=”numero – altezza”
align=”allineamento può essere:
right Destra; left Sinista; center Centrale ”
bottom allineamento nella parte bassa a sinistra del testo
middle allineamento centrale
top allinemento nella parte alta a sinistra del testo
alt“Testo alternativo visualizzato al passaggio del mouse”
title“Ha la stessa funzione di alt”

Inserire un link:
<a href=https://www.computereweb.eu target=”_blank” title=”mostra un testo quando il mouse passa sopra il link>Computer e Web</a>

Nota:
target=”_blank” Se inserito indica che il link si aprirà in una nuova finestra.
Il percorso può essere ad una pagina del sito, quindi interno (sarà sufficiente indicare il path: esempio invece di scrivere sarà sufficiente scrivere /images).
Mentre se è esterno è necessario scrivere l’url completo con
Inoltre il link può indirizzare anche verso un’immagine/audio/video. Mentre se è uno .zip verrà chiesto di scaricare il file, diversamente se è un .pdf o un .doc si aprirà, se nel pc dell’utente è presente, il relativo programma (Adobe Reader Pdf o Microsoft Word).

Inserire un indirizzo e-mail:
<a href=”mailto:info@computereweb.eu” subject=”Richiesta info”>invia un e-mail</a>

Nota:
Cliccando si aprira “nuovo messaggio di posta elettronica” del proprio client che si utilizza.
Mentre l’attributo subject è opzionale, indica se oltre al destinatario predefinito si vuole immettere un valore di default per l’oggetto.

Inserire un’immagine con link:
<a href=https://www.computereweb.eu target=”_blank”><img src=”immagine.jpg” border=”0″ width=”50″ height=”50″ align=”center”></a>

Inserire un’Ancora
Un’ancora è un link interno della pagina, può essere paragonata ad “un paragrafo”. Utilizzato per creare la pagina delle faq.
Passo 1: inserire l’ancora nella pagina, nel punto che si desidera
<a name=“#nome”>
Passo 2: Richiamo dell’ancora dal menù ad inizio della pagina.
<a href=”#nome”>nome</a>

Note:

Per dichiare o richiamare un’ancora, ricordarsi di mettere sempre prima il simbolo: #

Inserire una mappa d’immagini:
Una mappa d’immagine, come dice il nome è un’immagine suddivisa per aree e al passaggio del mouse corrisponde un determinato link. Utilizzato per visualizzare le sedi in Italia di una ditta.

<IMG SRC=”https://www.computereweb.eu/wp-content/uploads/2009/08/italia-249×300.jpg” USEMAP=”#italia” WIDTH=350 HEIGHT=421 BORDER=”0″>
<MAP NAME=”italia”>
<AREA SHAPE=”POLY” HREF=”#” ALT=”Lombardia” COORDS=”63,39, 79,18, 105,16, 116,25, 109,53, 120,51, 112,64, 135,83, 107,83, 87,76, 74,87, 57,70, 64,62, 64,54, 60,49, 60,41, 63,40, 64,40, 62,37, 255,82, 298,42, 91,28, 267,99, 284,49, 249,60, 236,54, 271,108, 343,109, 267,117, 282,21, 305,194, 246,81, 426,180, 56,122, 147,144, 203,132, 235,115, 272,86, 283,119, 295,124, 290,76, 271,83, 63,39″>
<AREA SHAPE=”CIRCLE” HREF=”#” ALT=”Toscana” COORDS=”127,147,32″>
<AREA SHAPE=”RECT” HREF=”http://www.lacineteca.tk “ALT=”Abruzzo” COORDS=”192,173, 230,205″&gt border=”0″;
</MAP>

Attributi:
Coords sono le coordinate da definire in base allo shape scelto
Shape è la forma dell’immagine può essere di 3 tipi:
rect Rettangolare, con 4 coordinate (x sx -y sx- x a – y b)
circle Cerchio, con 3 coordinate (x-y-raggio)
poly Poligono, con numero personalizzato di coordinate
in parole povere, è il classico gioco d’enigmistica dove bisogna unire tutti i punti (detto comunemente filo numerico).
Mentre alt o title sono attribuiti visti quando s’inserisce un’immagine.
Infine da notare l’uso dell’ancora (preceduta dal simbolo #).

Inserire un’audio di sfondo

<bgsound src=”amico.mp3″ loop”2″>

Attributi:
src come nel caso dell’immagine, delle mappe d’immagini, e come vedremo successivamente anche per i video/audio è utilizzato per indicare il percorso completo di dove si trova il file.
loop E’ il ciclo, quante volte si deve riproddure il brano.

Inserire un video/audio

<embed src=”comemai.wmv” autostart=”yes” width=”100! height”100″ loop=”1″>

Attributi:
Autostart Indica se il video all’apertura della pagina si autoavvia o no.
Mentre width (larghezza) height (altezza) e loop (ciclo) hanno le medesime funzionalità viste in precedenza.

Inserire un file flash:
<object type=”application/x-shockwave-flash” data=”https://www.computereweb.eu/flash/prova.swf” width=”450″ height=”164″>
<param name=”movie” value=”https://www.computereweb.eu/flash/prova.swf””/>
</object>

Inserire javascript; applet java oppure un codice di un servizio esterno (es.: contatore)
Copiare e incollare il codice nella parte della pagina che si desidera visualizzare.

Inserire un foglio di stile esterno:
<link rel=”stylesheet” type/css” href=”nome.css”>

Frame:
Un frame è una particolare struttura su cui è possibile costruire un sito in html.
<frameset rows=”100,200″>
<frame name=”home” scr=”home.html” scrolling=”auto” noresize border=”0″>
<frameset cols=”100, 200″>
<frame name=”colonna” src=”colonna.html”>
</frameset>
</frameset>
<noframes>browser obsoleto</noframes>

Iframe:
L‘iframe è simile al frame solo che viene inserito in una comunissima pagina.
<iframe name=”prova” src=prova.html” scrolling=”yes” border=”0″ noresize align=”center”>

Infine, quando avete terminato il vostro sito in html è giunto il momento di pubblicarlo. Esistono diversi hosting gratuiti che offrono un sottodominio gratis (come altervista.org). Aprite un account e inviate tutti i vostri file, si consiglia di usare un programma ftp (come filezilla).
I dati da inserire saranno quelli che trovate sull’account creato, quindi l’indirizzo ftp; l’username e la password; la porta invece predefinita è sempre la 21.
Un ultima nota, naturalmente al giorno d’oggi le pagine in html si creano attraverso gli editor visuali e non più testuali (ne esistono anche in versione free ed in italiano come l’Nvu).
Comunque comprendere e conoscere le regole principali dell’html è la base per diventare buon webmaster!

Ti è piaciuta questa guida? Allora scaricala e portarla ovunque con te, nel formato universale del PDF .
Premi il tasto destro del mouse sul link e clicca su salva oggetto con nome.

Approfondimenti:

Categoria: Varie

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *