AppuntiMania.com » Informatica » Appunti di computer » L'html

L'html

Gradito:

[ Picolo appunti ]

Il superamento delle architetture tradizionali

Il superamento delle architetture tradizionali A definire l'architettura

BIOS, Partizioni e MBR

BIOS, Partizioni e MBR La partizione di un disco consiste nella suddivisione

Il microprocessore :storia ed evoluzione

Il microprocessore :storia ed evoluzione Storia Il microprocessore nasce

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

LA FORMATTAZIONE DEL TESTO

<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 ; 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

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>

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.

Appunti su:

Appunti superiori
Università
all'Informatica