Html

Materie:	Appunti
Categoria:	Informatica
Voto:	1.3 (3)
Download:	463
Data:	04.08.2008
Numero di pagine:	5
Formato di file:	.doc (Microsoft Word)

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
inizio documento HTML

TESTATA

CORPO DEL DOCUMENTO

fine documento HTML
Tag BODY
Casi semplici

SINTASSI DEL TAG BODY
• 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 (
) che forza il testo su una nuova linea
• tag Paragraph () che oltre a mandare a capo lascia una linea vuota
Tag hi
LA FORMATTAZIONE DEL TESTO
... centrati
... allineati come voluto
... rientrati di una tabulazione
Liste e Menu
Lista con punto elenco:
La sintassi per crearla
Primo elemento
Secondo elemento
Dove TYPE definisce il tipo di punto da utilizzare (Disc, Circle, default , Square); ogni elemento della lista dev'essere preceduto dal tag (List Item)
Lista numerata :
Con questa sintassi:
Primo elemento
Secondo elemento
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
...
Corsivo
...
Grassetto
...
Sottolineato
...
Typewriter
...
Lampeggiante
...
Una comoda istruzione è ... che visualizza in posizione centrata qualsiasi testo o immagine compresi fra il tag d'inizio e quello di fine istruzione
font true type
... Tipo di carattere
... Colore del carattere
TAG PER LE IMMAGINI
il tag completo risulta
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
Portami là...
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):
questo è il target
E quindi definire il link con il solito HREF secondo questa modalità:
link verso un target interno
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
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 ... al cui interno definirete i dati
La sintassi per realizzarla
Prima colonna
Seconda colonna
Prima colonna
Seconda colonna
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:

FRAME
Le pagine contenenti frame sono di un tipo un po'particolare in quanto all'interno del loro sorgente non è più presente il tag..,ma un sostitutivo...
All'interno del tag frameset potranno essere presenti solo questi tag: , , .
Sintassi
viene personalizzato seguendo questo schema:
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
L'esatta sintassi di FRAME
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 ;
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 ) e definisce il colore del brodo della frame in base al codice esadecimale.
Dopo aver inserito le varie frames è possibile utilizzare il tag ..., 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.