 |  | |
|
| | |
|
| |
Html
HTML (Hyper Text Markup Language) è il linguaggio con cui le pagine web vengono scritte e progettate per essere poi interpretata dai principali browser presenti sul mercato.
L'HTML non è nato per essere un linguaggio di programmazione, ma per essere un linguaggio di visualizzazione: a tutt'oggi è il linguaggio del web e quindi se si vuole costruire un sito o una pagina web bisogna conoscerlo.
Nel linguaggio HTML per indicare i colori si utilizza la codifica RGB che mette a disposizione 256 colori di sistema per dipingere i testi e gli sfondi. Ogni colore è identificato dal suo valore RGB (red-green-blue):tre numeri che variano da 0 a 255, ognuno dei quali rappresenta l'intensità della componente rossa, verde e blu del colore desiderato.
Esempio:
Il massimo valore per tutti e tre (R=255, G=255, B=255) produce il colore bianco mentre i valori minimi (R=0 G=0 B=0) producono il colore nero.
I codici dei colori sono indicati con i numeri esadecimali (due cifre per R, due per G, due per B)
Ecco qualche colore:
Aqua 00FFFF Blue 0000FF Red FF0000 Gray 808080
Un file HTML è un file di testo in cui sono contenute delle istruzioni dette tag; essi sono indipendenti dal minuscolo e dal maiuscolo.
La struttura essenziale di ogni pagina web comprende i seguenti tag:
|
<html></html> |
Definisce un documento html (si trova all'inizio e alla fine della pagina) |
|
<title></title> |
Definisce il titolo che appare alla cima della finestra del browser (il nome della pagina) |
|
<head></head> |
Definisce le informazioni di intestazione come il titolo e i meta-tag. |
|
<body></body> |
Definisce il corpo del documento HTML |
|
<!--commento--> |
Consente di commentare alcune parti del codice della pagina e può essere inserito in qualsiasi punto. |
Per rendere la pagina web più gradevole alla vista si può modificare il colore dello sfondo o inserire un'immagine. Anche i collegamenti ipertestuali che consentono di passare da un documento all'altro possono essere personalizzati modificandone il colore (anche se non è consigliabile perché tutti sono abituati a vedere i link scritti in blu, i link attivi in rosso e quelli visitati in viola)
|
<body background="URL"> |
Definisce un'immagine come sfondo |
|
<body bgcolor="#rrggbb"> |
Definisce il colore di sfondo del documento |
|
<body text="#rrggbb"> |
Definisce il colore del testo del documento |
|
<body link="#rrggbb"> |
Definisce il colore dei collegamenti ipertestuali |
|
<body vlink="#rrggbb"> |
Definisce il colore dei collegamenti ipertestuali attivi |
|
<body alink="#rrggbb"> |
Definisce i il colore dei collegamenti ipertestuali già visitati |
La pagina è resa più leggibile utilizzando piccoli accorgimenti quali la suddivisione del testo in paragrafi, l'allineamento del testo, l'inserimento di una linea orizzontale più o meno spessa per separare due parti della pagina.
|
<p></p> |
Definisce un nuovo paragrafo |
|
<br> |
Inserisce un ritorno a capo |
|
<p align=?></p> ?=left/center/right |
Allinea un paragrafo a sinistra, al centro e a destra. |
|
<br clear=?> ?=left/right/all |
Pulisce il margine sinistro, destro, entrambi. |
|
<hr> |
Inserisce una riga orizzontale |
|
<hr align=?> ?=left/right/center |
Allinea la riga a sinistra, al centro o a destra. |
|
<hr size="pixel" or "%"> |
Definisce lo spessore della linea in pixel o in percentuale |
|
<hr width="pixel"or"%"> |
Definisce la larghezza della linea in pixel o in percentuale. |
Con i seguenti tag invece si indica al browser come deve visualizzare i caratteri: in grassetto, in corsivo, sottolineati, la loro grandezza, il colore e il tipo.
|
<b></b> |
Neretto (bold) |
|
<i></i> |
Corsivo (italic) |
|
<u></u> |
Sottolineato (underline) |
|
<center></center> |
Centrato |
|
<blink></blink> |
Lampeggiante (blinking) |
|
<font size=?></font> ?=da 1 a 7 |
Grandezza dei caratteri con i valori da 1(più piccolo) a 7 (più grande) |
|
<font color= "#rrggbb"></font> |
Determina il colore dei caratteri |
|
<font face="?"></font> ?=Verdana-Arial-Helvetica |
Determina il tipo di carattere |
Con questi tag invece si lascia che il browser assegni il proprio formato alla riga (se si tratta di una citazione, se si deve enfatizzare.)
|
<h?></h?> ?=da 1 a 6 |
Sono definiti 6 livelli da 1 a 6 |
|
<em></em> |
Enfatizza una parola (generalmente in corsivo) |
|
<strong></strong> |
Enfatizza una parola (generalmente in neretto) |
|
<cite></cite> |
Citazione, generalmente in corsivo. |
|
<big></big> |
Il font più grande |
|
<small></small> |
Il font più piccolo |
|
<blockquote></blockquote> |
Blocco di citazioni |
|
<sub></sub> |
Testo pedice |
|
<sup></sup> |
Testo apice |
All'interno della pagina web spesso si rende necessaria la creazione di elenchi. Html mette a disposizione due tipi di elenchi:
l'elenco puntato
l'elenco numerato
|
<ul></ul> |
Inizio di una lista non ordinata |
|
<ul type=?> ?=disc-circle-square |
Definisce il simbolo che precede gli elementi della lista(punto pieno,punto vuoto o quadrato nero). |
|
<ol></ol> |
Inizio di una lista numerata. |
|
<ol start=?> ?=Numero |
Definisce il numero di partenza della lista. (valido per tutta la lista). |
|
<ol type=?> ?=A-a-I-i-1 |
Tipo di numero: A:lettere maiuscole, a:lettere minuscole, I:numeri romani maiuscoli, i:numeri romani minuscoli,1:numeri arabi. |
|
<li> |
Prima di ogni elemento della lista |
|
<dl></dl> |
Inizio di una lista di definizioni |
|
<dt> |
Precede ogni termine di definizione |
|
<dd> |
Precede ogni definizione. |
I collegamenti ipertestuali consentono di passare agevolmente da un documento a un altro:si creano associando l'indirizzo (percorso/nomefile) a un elemento visualizzato nella pagina corrente che può essere una stringa di testo o un'immagine.
|
<a href="url"></a> |
Origine e destinazione di un collegamento ipertestuale. |
|
<a href="url#nome></a> |
Collegamento all'ancora Nome presente nel documento esterno. |
|
<a href="#nome"></a> |
Collegamento all'ancora nome presente nel documento stesso. |
|
<a href="url" target="?"></a> ?=_blank-_self-_parent-_top |
Collegamento a una finestra. |
|
<A name="***></A> |
Definisce un'ancora nel documento |
|
<a href="malto:e-mail"></a> |
Collegamento a un indirizzo di posta elettronica. |
Affinché l'immagine venga visualizzata nella pagina web bisogna specificarne il nome, l'estenzione e l'eventuale percorso (URL).
|
<img src="url"> |
Inserisce un'immagine |
|
<img src="url" align=?> ?=top-bottom-middle-left-right |
Iserisce un'immagine allineata rispettivamente in alto, fondo, in mezzo, a sinistra o a destra rispetto al testo circostante. |
|
<img src="url" alt="testo"> |
Inserisce un testo da visualizzare quando non viene visualizzata l'immagine |
|
<img src="url" width="pixel" Height="pixel"> |
Definisce la larghezza e l'altezza dell'immagine in pixel. |
|
<img src="url" border="pixel"> |
Definisce il bordo dell'immagine (in pixel) |
|
<img src="url" id="pixel" vspace="pixel"> |
Definisce la quantità di spazio orizzontale e verticale attorno all'immagine (in pixel) |
In Html le tabelle si utilizzano non solo per rappresentare dati di ogni genere allineati in righe e colonne ma anche per costruire l'intera struttura di una pagina web.
|
<table></table> |
Definisce una tabella |
|
<table border="pixel"> |
Grandezza del bordo della tabella in pixel |
|
<table cellspacing="pixel"> |
Spazio tra le celle di una tabella in pixel |
|
<table cellpadding="pixel"> |
Spazio tra il bordo e il contenuto delle celle di una tabella in pixel |
|
<table width=?> ?="pixel" or "%" |
Larghezza di una tabella in pixel o in percentuale rispetto alla pagina. |
|
<tr></tr> |
Definisce una riga della tabella |
|
<tr align=?> ?=left-right-center-middle-bottom |
Definisce l'allineamento della riga |
|
<td></td> |
Definisce le colonne della tabella |
|
<td width=?> ?="pixel" or "%" |
Larghezza di una colonna in pixel o in percentuale rispetto alla tabella. |
|
<td align=?> ?=left-right-center-middle-bottom |
Definisce l'allineamento della colonna. |
|
<td colspan=?> ?="colonne" |
Estende la cella attraverso il numero di colonne specificato. |
|
<td rowspan='?> '?="righe" |
Estende la cella attraverso il numero di righe specificato. |
|
<td bgcolor="#rrggbb"> |
Definisce il colore di sfondo della cella. |
|
<td> |
Forza il testo di una cella affinché non vada mai a capo. |
I frame sono un particolare tipo di struttura HTML che consente di suddividere la finestra del browser in diversi riquadri distinti:in ogni riquadro appare una pagina Html a sé stante.
|
<frameset></frameset> |
Dichiara un documento che contiene un frame. Si inserisce al posto di <body> |
|
<frameset rows=?,?></frameset> ?="pixel" or "%" or "*" |
Definisce una disposizione orizzontale dei frame. L'altezza delle righe può essere indicata in percentuale, in pixel o in senso relativo. |
|
<frameset cols=?,?></frameset> ?="pixel" or "%" or "*" |
Definisce una disposizione verticale dei frame. La larghezza delle colonne può essere indicata in percentuale,in pixel o in senso relativo. |
|
<frameset border=? ?=Numero |
Definisce lo spessore della cornice. |
|
<frameset frameborder="yes-no"> |
Indica la presenza o meno di una cornice. Può assumere il valore "yes" oppure "no" |
|
<frameset bordercolor="#rrggbb"> |
Definisce il colore della cornice. |
|
<frame> |
Definisce un frame |
|
<frame src="url"> |
Definisce il documento da visualizzare nel frame. |
|
<frame name="?"> ?=_blank-_self-_parent-_top |
Assegna un nome al frame |
|
<frame marginwidth=?> |
Definisce la larghezza dei margini (destro e sinistro) |
|
<frame marginheight=?> |
Definisce l'altezza dei margini (superiore e inferiore) |
|
<frame scrolling="yes-no-auto"> |
Definisce una barra di scorrimento sul frame. |
|
<frame frameborder="yes-no"> |
Indica la presenza o meno di una cornice del frame. Può assumere il valore "yes" oppure "no". |
|
<frame bordercolor="#rrggbb"> |
Definisce il colore della cornice del frame. |
Html fornisce i cosiddetti meta tag, che permettono di inserire particolari informazioni dedicate al dialogo della pagina web con i vari motori di ricerca. Mediante il tag <meda> si possono inserire nell'intestazione dei dati che non vengono visualizzati nella pagina ma servono al browser ai motori di ricerca per gestire i contenuti in modo più efficace.
Per inserire nell'intestazione il nome dell'autore si utilizza:
<meta name="author" content="come e cognome">
Per inserire nell'intestazione una descrizione del documento si utilizza:
<meta name="description" content="breve descrizione della pagina">
Per inserire nell'intestazione un elenco di parole-chiave che specificano l'argomento della pagina si utilizza:
<meta name="keywords" content="parola1, parola2, parola3">
Il meta tag "robots" indica al motore di ricerca se indicizzare o meno solo quella pagina e se proseguire con le altre pagine:
<meta name="robots" content="nofollow, index">
index (indicizza questa pagina)
noindex (non indicizzare questa pagina)
follow (prosegui ad indicizzare le altre pagine)
nofollow (non proseguire nell'indicizzazione)
all (indicizza tutte le pagine)
Il meta tag "content-language" indica al motore di ricerca in quale lingua è scritto il sito. La sua sintassi è:
<meta http-equiv="Content-Language" content="Italian">
All'interno della pagina Html possono essere inseriti altri tipi di linguaggi come il linguaggio Java e VB Script.
|
Privacy |
Articolo informazione
Commentare questo articolo:Non sei registratoDevi essere registrato per commentare ISCRIVITI |
Copiare il codice nella pagina web del tuo sito. |
Copyright InfTub.com 2024
