 |  | |
|
| | |
|
| |
L'HTML (Comprenderlo e realizzare una pagina in HTML)
HTML HyperText Markup Language ( linguaggio non proprietario)
I documenti HTML sono in formato ASCII e possono essere creati con qualsiasi Editor di testo, dandogli estensione htm o html , o con software autore del tipo WYSIWYG (FrontPage). E'sempre possibile vedere i risultati utilizzando un qualsiasi Browser( Internet Explorer )
Il World Wide Web è un servizio di Internet basato su un'architettura client-server che utilizza il protocollo HTTP posto a livello di applicazione nella pila di protocolli del "TCP/IP"
Significati
Pubblicare= trasferire su server Web, con FTP o HTTP
URL= Uniform Resurce Locator "indirizzo della pagina" il server all'indirizzo pubblico fa corrispondere l'indirizzo del file sull'HD
tiposerver://nomehost/nomefile
Marcatori "markup tags" sono le parole chiave per indicare al Browser come deve essere mostrato il testo.Una delle caratteristiche principali dell'HTML è l'ipertestualità
Struttura di una pagina
Schema di base
<HTML> inizio documento HTML
<HEAD>
TESTATA
</HEAD>
<BODY>
CORPO DEL DOCUMENTO </BODY>
</HTML> fine documento HTML
Tag BODY
Casi semplici
<body bgcolor>
<body background="immagine.jpg">
<body bgproperties="fixed">
SINTASSI DEL TAG BODY
<BODY BGCOLOR="#xxxxxx" TEXT="#xxxxxx" LINK="#xxxxxx" VLINK="#xxxxxx" ALINK="#xxxxxx">
BGCOLOR colore dello sfondo
TEXT colore del testo del documento,
LINK colore dei caratteri per le parole linkate
VLINK colore del testo per i link già visitati
ALINK colore del testo al momento del click sul link
DETTAGLI
I colori sono espressi in RGB in formato esadecimale (ad es. #000000 corrisponde a R=0 G=0 B=0, quindi nero; #FFFFFF a R=255 G=255 B=255 quindi bianco)
Se come sfondo vogliamo utilizzare una immagine o una texture al posto di BGCOLOR si utilizza BACKGROUND="nome_file".
Sintassi
I tag vengo racchiusi da <...> e da un corrispondente </...> alla fine
Alcuni tag non hanno la chiusura
ALCUNI TAG
tag di intestazione, Headers, Hn definiscono la dimensione del carattere, n é un numero compreso fra 6 e 1
tag di Line Break (<BR>) che forza il testo su una nuova linea
tag Paragraph (<P>) che oltre a mandare a capo lascia una linea vuota
Tag hi
<CENTER>...</CENTER> centrati
<P ALIGN=right>...</P> allineati come
voluto
<BLOCKQUOTE>...</BLOCKQUOTE> rientrati di una tabulazione
Liste e Menu
Lista con punto elenco:
La sintassi per crearla
<UL TYPE=disc>
<LI>Primo elemento
<LI>Secondo elemento
</UL>
Dove TYPE definisce il tipo di punto da utilizzare (Disc, Circle, default , Square); ogni elemento della lista dev'essere preceduto dal tag <LI> (List Item)
Lista numerata
Con questa sintassi:
<OL TYPE=1 START=1>
<LI>Primo elemento
<LI>Secondo elemento
</OL>
Type è 1 = 1,2,3....; A = A,B,C...; a = a,b,c...; I = I, II, III...; i = i, ii, iii....); e START è il valore di partenza espresso come numero.
FONT COLORI E CARATTERI
|
EFFETTO |
SINTASSI |
|
Dimensione dei caratteri |
<FONT SIZE=+1>...</FONT> |
|
Corsivo |
<I>... </I> |
|
Grassetto |
<B>... </B> |
|
Sottolineato |
<U>... </U> |
|
Typewriter |
<TT>... <TT> |
|
Lampeggiante |
<BLINK>... </BLINK> |
Una comoda istruzione è <CENTER>...</CENTER> che visualizza in posizione centrata qualsiasi testo o immagine compresi fra il tag d'inizio e quello di fine istruzione
font true type
<FONT FACE="nome_font">...</FONT> Tipo di carattere
<FONT COLOR="#xxxxxx">...</FONT> Colore del carattere
TAG PER LE IMMAGINI
<IMG SRC="nomefile">
il tag completo risulta
<IMG SRC="nomefile" LOW SRC="nomefile" HEIGHT="x" WIDTH="x" ALT="nome_alternativo" ALIGN="x" ISMAP USEMAP="#nome_mappa" VSPACE="x" HSPACE="x" BORDER="x">
Significato
LOW SRC un file grafico alternativo in bassa risoluzione che verrà caricato prima dell'immagine vera e propria
HEIGHT e WIDTH le dimensioni in pixel se si desidera scalare il file
ALT il nome alternativo che verrà visualizzato dai browser non grafici
ALIGN l'allineamento dell'immagine rispetto al testo che la circonda (RIGHT, LEFT, ABSBOTTOM, ABSMIDDLE, TEXTTOP, MIDDLE, BOTTOM)
Segue
ISMAP nel caso che l'immagine sia linkata ad un file di mappa che rende l'immagine clickabile
USEMAP il nome della mappa nel caso che si utilizzi una mappa client-sided
VSPACE la distanza verticale dal testo (in pixel)
HSPACE la distanza orizzontale dal testo (in pixel)
BORDER la dimensione del bordo dell'immagine (in pixel)
LINKS
<A HREF="https://in.un.luogo.lontano"> Portami là...</A>
Il riferimento (HREF) può essere verso qualsiasi tipo di indirizzo raggiungibile col browser, o interno alla pagina per definire dei link interni bisogna compiere due operazioni, la prima consiste di definire il target (cioè il punto di arrivo del link):
<A NAME = "demo_target">questo è il target</A>
E quindi definire il link con il solito HREF secondo questa modalità:
<A HREF = "#demo_target">link verso un target interno</A>
Bisogna ricordarsi di utilizzare il simbolo # nell'HREF verso un target
SEPARATORI
Per separare logicamente le pagine si utilizzano i Rulers, linee orizzontali che possono essere inserite con
<HR ALIGN=x SIZE=x NOSHADE WIDTH="x%">
dove align e' l'allineamento del ruler rispetto alla pagina SIZE la sua altezza espressa in pixel WIDTH la sua lunghezza in percentuale della pagina e NOSHADE un flag che permette di ottenere linee piatte (il default è in 3D)
LE TABELLE
Per creare una tabella utilizzare il contrassegno <TABLE>... </TABLE> al cui interno definirete i dati
La sintassi per realizzarla
<TABLE
BORDER=3>
<TH ALIGN=center>Prima colonna</TH>
<TH ALIGN=center>Seconda
colonna</TH> <TR></TR>
<TD ALIGN=center>Prima colonna</TD>
<TH
ALIGN=center>Seconda
colonna</TD> <TR></TD>
</TABLE>
Dettagli
Abbiamo così definito una tabella con bordo (3) con degli Header (TH) e dei dati (TD), organizzata su due colonne (il tag TR permette di decidere quando andare a capo). I dati sono centrati nelle colonne (ALIGN=center).
Segue
E' inoltre possibile scegliere la profondità della tabella (Nella dichiarazione TABLE aggiungere WIDHT= seguito dalla percentuale di profondità), il Cell spacing, cioé la distanza fra testo e celle, (aggiungendo CELLSPACING=); il Cell padding, lo spessore dei divisori delle caselle, (aggiungendo CELLPADDING=)
ALLINEAMENTI
Per i dati possiamo decidere l'allineamento
orizzontale e verticale (ALLIG e VALIGN) il colspan
ed il rowspan, cioé se la
cella deve essere larga più di una cella standard (COLSPAN e ROWSPAN); inoltre
se non vogliamo che i dati vengano disposti su più righe aggiungiamo NOWRAP;
per modificare il colore della tabella si utilizza BGCOLOR (con i valori esadecimali come al solito)
Tag Di Commento
<!-- commento -->
FRAME
Le pagine contenenti frame sono di un tipo un po'particolare in quanto all'interno del loro sorgente non è più presente il tag<BODY>..</BODY>,ma un sostitutivo<FRAMESET>...</FRAMESET>
All'interno del tag frameset potranno essere presenti solo questi tag: <FRAME>, <FRAMESET>, <NOFRAMES>.
Sintassi
<FRAMESET> viene personalizzato seguendo questo schema:
<FRAMESET ROWS='value' COLS='value' BORDER='value' BORDERCOLOR='#xxxxxx' FRAMEBORDER='value'>
I FLAGS :
ROWS è una lista di valori separati da virgole, che definiscono la dimensione delle divisioni verticali della pagina, i valori possono essere espressi in percentuale, in pixel, ed un * (detto frame relativa), che occuperà il restante spazio se la somma dei pixel non è sufficiente a coprire l'ampiezza della pagina o la somma percentuale e' inferiore a 100%
COLS funziona come rows, ma divide la pagina in colonne;
BORDER definisce lo spessore del bordo in pixel
BORDERCOLOR definisce il colore del bordo
FRAMEBORDER definisce lo spessore globale per i bordi che separano le frame
Una volta definito il frameset si inseriscono all'interno, e vi si definiscono, le varie frame e le loro caratteristiche con il tag <FRAME>
<FRAMESET>
<FRAME...>
</FRAMESET>
L'esatta sintassi di FRAME
<FRAME SRC="url" NAME="nome" MARGINWIDTH="value" MARGINHEIGHT="value" SCROLLING="yes-no-auto" NORESIZE FRAMEBORDER="value" FRAMESPACING="value" BORDERCOLOR="#xxxxxx">
Significato
SRC è l'url del file che verrà mostrato nella frame
NAME il nome a cui riferirsi come target se si dovesse usare un link, per aggiornare una unica frame;
MARGINWIDTH e MARGINHEIGHT è la distanza che il documento HTML contenuto nella frame avrà dai bordi della frame stessa
SCROLLING identifica la presenza di barre di scorrimento (si, no oppure automatiche);
NORESIZE permette alla frame di non essere ridimensionabile (attraverso il trascinamento dei bordi);
FRAMEBORDER è supportato da Explorer in base al valore (0 non mostra bordi), mentre Netscape lo interpreta come yes|no, Netscape inoltre lo accetta anche nel <FRAMESET>;
FRAMESPACING è accettato solo da Explorer, e definisce lo spazio in pixel che si deve trovare attorno alla frame;
BORDECOLOR è accettato solo da netscape (anche nel <FRAMESET>) e definisce il colore del brodo della frame in base al codice esadecimale.
Dopo aver inserito le varie frames è possibile utilizzare il tag <NOFRAMES>...</NOFRAMES>, al cui interno andrà digitato il documento alternativo per quei browser che ancora non supportano le frames.
Da ricordare : Quando si aprono i link bisognerà specificare dove gli stessi devono essere aperti, lo si fa con l'attributo NAME.
Considerazioni :Prima molto usati, ora in disuso per problemi di compatibilità e problemi con i motori di ricerca.
|
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
