| Pagine: 1 2 |
anx
Posting Freak
Risposte: 13566
Registrato il: 1-2-2004
Provenienza: Castelli romani
Utente offline
Modalità: jedi
|
|
Inviato il 12-3-2004 at 10:55 AM
|
|
|
HTML Pratico
Benvenute care net-canaglie alla prima lezione sullo sviluppo di un sito web fatto in casa. Cominciamo con due righe di teoria su ciò che è intenet,
ed in particolare il web. Solitamente queste due parole sono confuse ed utilizzate indifferentemente per identificare quel mondo di pagine che apriamo
tutti i giorni con il nostro browser.
Internet
Internet è una rete globale di computer che comprende elaboratori di diverse dimensioni e potenza di calcolo. Fondamentalmente abbiamo due grandi
categorie di elaboratori interconessi da questa grande rete:
- Server
- Client
Un server, è un computer che fornisce uno o più servizi ai client a lui connessi, ed è rappresentabile come il centro di una stella a cui sono
collegati gli elaboratori (ad es. il nostro pc di casa) che fruiscono di tali servizi.
Web
Il world wide web (orgoglio Europeo !) è uno dei tanti servizi che legano server e client, come l'FTP, la posta elettronica, lo streaming audio/video
ecc. Il web, in particolare, si basa sul protocollo di comunicazione HTTP per trasferire informazioni tramite "pagine" web (HTML) ai computer che ne
fanno richiesta.
Un sito web
Le pagine web sono le componenti fondamentali di un sito web (es. www.linux.it), la cui pagina principale è chiamata "Home Page". In questa lezione,
impareremo a creare la primissssima pagina del nostro sito, prendendo confidenza con i tool più diffusi per la generazione di pagine.
- Macromedia DreamWeaver
- Micro$oft FrontPage
Tool WYSIWYG (What you see is what you get), che semplificano enormemente la creazione, rendendola immediata al pari della composizione di un
documento Word.
(scusate la parolaccia  )
ANX: ma il pollo voleva veramente attraversare la strada o è stato costretto?  |
|
|
anx
Posting Freak
Risposte: 13566
Registrato il: 1-2-2004
Provenienza: Castelli romani
Utente offline
Modalità: jedi
|
|
Inviato il 12-3-2004 at 11:08 AM
|
|
|
Importante !!!
E' fondamentale che abbiate almeno uno di questi due tool (Front Page è in Office) per iniziare... Ci sono problemi da questo punto di vista ???
Fatevi sentire, please
ANX: ma il pollo voleva veramente attraversare la strada o è stato costretto?
|
|
|
gorgoroth
Moderator
Risposte: 8958
Registrato il: 11-8-2003
Provenienza: Marche
Utente offline
Modalità: ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn!
|
|
Inviato il 12-3-2004 at 11:57 AM
|
|
|
Prima di passare all'utilizzo di strumenti visuali per la composizione delle vostre paginette, sarebbe opportuno conoscere un pò come è fatta una
pagina HTML.
HTML è un acronimo di HyperText Markup Language.
Tramite l'utilizzo di tag forniti dall'HTML è possibile definire l'aspetto della pagina.
Se analizziamo quindi il sorgente di una pagina HTML scopriamo che basilarmente esso è formato così :
| Codice: |
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
|
ovvero il tag <HTML> indica l'inizio del documento e </HTML> la fine. Normalmente in HTML l'inizio di qualcosa è definito
con un tag del tipo "<nome>" mentre la fine da "</nome>" (notare lo slash davanti al nome).
Tra i tag <HEAD> e </HEAD> vanno inserite delle direttive che modificano il comportamento del browser o aggiungono
informazioni alla pagina. Ma queste le vedremo successivamente.
Il succo avviene tra i tag <BODY> e </BODY>. Qui in mezzo in pratica va inserito tutto il contenuto
(tag,immagini,link,testo,tabelle etc etc) che apparirà effettivamente ad un utente che apre la pagina HTML.
Concentriamoci quindi su quello che si può inserire tra questi due tag.
- Testo: chiaramente si può inserire del testo e applicarvi dei tag per formattarlo (colore,stile,dimensione,fonte). Es
<BODY>Testo pagina</BODY> mostrerà quella scritta all'utente che apre la pagina
- Immagini. Per inserire immagini in una pagina si utilizzeranno il tag <IMG>
- Link. Per creare i link ad altre pagine del sito o di altri siti si utilizza il tag <A></A>
- Tabelle. Le tabelle sono utilissime per ordinare in maniera tabulare il contenuto della pagina. Senza di essere sarebbe difficile dare
un'impostazione ordinata. Si utilizzano i tag <TABLE></TABLE>
- Division. le division sono utilizzate per applicare al loro contenuto particolari attributi. I tag sono <DIV> e </DIV>.
Successivamente vedremo ognuno di questi oggetti e ne capiremo l'utilizzo.
 | Chi più sa, più dubita. (Enea Silvio Piccolomini)
Quando insegni, insegna allo stesso tempo a dubitare di ciò che insegni. (Ortega y
Gasset) | |
|
|
|
anx
Posting Freak
Risposte: 13566
Registrato il: 1-2-2004
Provenienza: Castelli romani
Utente offline
Modalità: jedi
|
|
Inviato il 12-3-2004 at 01:02 PM
|
|
|
Ogni tag (in italiano: marcatore) HTML permette di definire una o più proprietà sul testo compreso fra <TAG> e </TAG>
ad esempio:
- <b>ciao</b> genererà in output la scritta "ciao" in grassetto
ciao
- <i>ciao</i> genererà un output corsivo
ciao
Gli effetti di possono essere combinati "annidando" un tag dentro l'altro
- <i><b>ciao</b></i> rende corsiva la scritta grassettata "ciao"
ciao
ANX: ma il pollo voleva veramente attraversare la strada o è stato costretto?
|
|
|
issoB
Posting Freak
Risposte: 2377
Registrato il: 5-22-2004
Utente offline
Modalità: Nessuna modalità
|
|
Inviato il 12-3-2004 at 01:26 PM
|
|
|
Ciao carissimi webmasters!!!!!!
I problemi, per ciò che concerne Front Page e Dreamweaver, ci sono. Insomma, li ho entrambi ma nessuno dei due funziona.
Ma non c'è alcuna problema almeno per il momento...
ora vedo un po' di impararmi la teoria... e in seguito verrà anche il momento della pratica....
Finora le prime nozioni sono ok, grazie 1000!!!
Aspetto altre news!!!!!!!! 
Ciao,
issoB 
|
|
|
anx
Posting Freak
Risposte: 13566
Registrato il: 1-2-2004
Provenienza: Castelli romani
Utente offline
Modalità: jedi
|
|
Inviato il 12-3-2004 at 01:45 PM
|
|
|
Ci sono alcuni tag che non definiscono alcuna proprietà sul testo che racchiudono, ma permettono di eseguire alcune semplici operazioni sulla
pagina.
il tag </br> ad esempio, informa il browser che in quel punto dovrà posizionare un ritorno a capo.
se scrivo <b>ciao</b></br><i>ciccio</i> il browser interpreterà il testo come:
ciao
ciccio
Altri tag, informano il broser sull'inserimento in determinati punti di un'immagine. Se nella pagina compare:
<img src="http://http://www.jrinternationalinc.com/Images/gigio/topo_gigio_11.jpg">
Il browser saprà che all'indirizzo specificato, troverà un'immagine da scaricare e mostrare all'interno della pagina:
ANX: ma il pollo voleva veramente attraversare la strada o è stato costretto?
|
|
|
gorgoroth
Moderator
Risposte: 8958
Registrato il: 11-8-2003
Provenienza: Marche
Utente offline
Modalità: ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn!
|
|
Inviato il 12-3-2004 at 01:51 PM
|
|
|
TESTO
Se digitate del testo tra i tag <BODY> e </BODY> questo apparirà sulla pagina. Ma normalmente è necessario dare un qualche
effetto al testo per rendere la pagina più accattivante.
Per dare degli attributi al testo si utilizzano sempre dei tag:
grassetto
Il testo compreso fra i tag <B> e </B> sarà visualizzato in grassetto (bold). Es: <BODY>testo normale
<B>testo grassetto </B> testo normale </BODY>
corsivo
Il testo compreso fra i tag <I> e </I> sarà visualizzato in corsivo (italic). Es: <BODY>testo normale
<I>testo corsivo</I> testo normale </BODY>
sottolineato
Il testo compreso fra i tag <U> e </U> sarà visualizzato in sottolineato (underline). Es: <BODY>testo normale
<U>testo sottolineato</U> testo normale </BODY>
testo centrat0
il testo compreso tra i tag <CENTER> e </CENTER> sarà centrato rispetto ai bordi. Es. <BODY>testo normale
<CENTER>testo centrato</CENTER> testo normale </BODY>
A capo
Per andare a capo si utilizza il tag <BR />. Qesto tag non ha un corrispettivo tag di chiusura, infatti vediamo che c'è uno slash prima
del simbolo '>' finale. Es: <BODY>prima riga<BR />seconda riga</BODY>
Paragrafi
Il testo compreso fra i tag <P> e </P> è considerato un paragrafo. Il tag finale non è obbligatorio ma metterlo non fa male.
Es: <BODY><P>paragrafo 1</P><P>Paragrafo 2</P></BODY>
font
Per cambiare il font del testo si utilizzano i tag <FONT> e </FONT>. Il tag <FONT> ha ulteriori attributi per
selezionare il colore, il font e la dimensione.
Es: <BODY><FONT face="arial" color="red" size="+7">testo grande di colore
rosso</FONT></BODY>.
Come si nota i valori degli attributi vanno racchiusi tra doppie apici (questo valre per tutti i tag).
L'attributo face indica il nome del font.
L'attributo color indica chiaramente il colore. Tale attributo può assumere dei nomi di colore (Es red,black,yellow,blue,gray,orange,green) o si può
specificare il colore indicando le quantità di ross,verde e blue.
L'attributo size indica la dimensione del carattere. Può assumere i valori da 1 a 7.
riga di separazione
Il tag <HR> serve per disegnare una riga orizzontale utilizzata per separare ad esempio due parti di un testo. Questo tag non ha il
corrispettivo tag di chiusura. Ha due attributi:
WIDTH che indica quanto deve essere lunga la riga. Tale valore può essere espresso in pixel o in percentuale (es WIDTH="100" o WIDTH="50%"). Nel
caso della percentuale dell'esempio esso indica che la riga deve essere lunga il 50% della larghezza della pagina.
SIZE indica l'altezza della riga.
Es: <BODY>prima riga<BR /><HR>seconda riga</BODY>
titoli
I tag da <H1> a <H6> servono per formattare il testo tra loro contenuto in maniera predefinita dal browser. Si usano
normalmente per indicare dei titoli. Es. <BODY><H1>titolo 1</H1> <BR /> <H6>titolo
6</H6></BODY>
| Chi più sa, più dubita. (Enea Silvio Piccolomini)
Quando insegni, insegna allo stesso tempo a dubitare di ciò che insegni. (Ortega y
Gasset) | |
|
|
|
gorgoroth
Moderator
Risposte: 8958
Registrato il: 11-8-2003
Provenienza: Marche
Utente offline
Modalità: ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn!
|
|
Inviato il 12-3-2004 at 01:59 PM
|
|
|
IMMAGINI
Per inserire delle immagini nella vostra pagina si utilizza il tag <IMG>.
Es: <BODY><IMG src="immagine.jpg"></BODY>
Il tag <IMG> ha i seguenti attributi.
SRC. Indica l'url dove prelevare l'immagine da visualizzare. Può essere un percorso che sta nel sito stesso (es SRC="immagini/foto.jpg") o fare
riferimento a un'immagine presente in un altro sito (es SRC="http://www.canaglia.it/immagini/foto.jpg")
BORDER. Indica la presenza di un bordino intorno all'immagine. Il valore di questo attributo è lo spessore di tale bordo. es BORDER="1"
WIDTH. La larghezza in pixel con cui voglio visualizzare l'immagine. Se omesso l'immagine verrà mostrata con la sua larghezza originale. Es.
WIDTH="100"
HEIGHT. Come WIDTH ma si riferisce all'altezza.
| Chi più sa, più dubita. (Enea Silvio Piccolomini)
Quando insegni, insegna allo stesso tempo a dubitare di ciò che insegni. (Ortega y
Gasset) | |
|
|
|
gorgoroth
Moderator
Risposte: 8958
Registrato il: 11-8-2003
Provenienza: Marche
Utente offline
Modalità: ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn!
|
|
Inviato il 12-3-2004 at 02:13 PM
|
|
|
COLLEGAMENTI IPERTESTUALI
Per inserire dei collegamenti ad altre pagine del sito o di altri siti all'interno della vostra pagina si utilizza il tag <A>. Il testo
compreso fra <A> e </A> viene così evidenziato per far capire all'utente che cliccando sopra di esso verrà richiesta
un'altra pagina.
Es:
<BODY><A HREF="www.sitox.com/home.html">Clicca qui</A></BODY>
il tag <A> ha i seguenti attributi
HREF. E' l'url della pagina da caricare quando si clicca sopra il collegamento.
BORDER. Eventuale bordo intorno al collegamento.
ANCORE
Le ancore sono una variante di collegamente ipertestuale che servono a posizionarsi su un punto diverso della pagina stessa. (avete presente le tre
freccette in alto a destra e in basso a destra in canaglia che servono per andare velocemente a inizio o fine pagina ?).
Per creare un' ancora si deve utilizzare l'attributo NAME nel tag <A> invece dell'attributo HREF. Naturalmente NAME indicherà il nome
dell'ancora.
Es: <A NAME="finepagina"></A>
Ora che abbiamo definito un'ancora come facciamo a posizionarci in quel punto ? Per fare ciò si utilizza una variante dell'attributo HREF. In HREF
va specificato un valore del tipo '#nomeancora' dove nomeancora è il nome dell'ancora dove andare quando si clicca.
es <A HREF="#finepagina">Clicca qui per andare a fine pagina</A>
es completo:
| Codice: |
<BODY>
<H3>TITOLO</H3>
<A HREF="#finepagina">Clicca qui per andare a fine pagina</A>
<P>Questo è un paragrafo.</P>
<P>Questo è un paragrafo.</P>
<P>Questo è un paragrafo.</P>
<P>Questo è un paragrafo.</P>
<P>Questo è un paragrafo.</P>
<A NAME="finepagina"></A>
Testo a fine pagina
</BODY>
|
| Chi più sa, più dubita. (Enea Silvio Piccolomini)
Quando insegni, insegna allo stesso tempo a dubitare di ciò che insegni. (Ortega y
Gasset) | |
|
|
|
issoB
Posting Freak
Risposte: 2377
Registrato il: 5-22-2004
Utente offline
Modalità: Nessuna modalità
|
|
Inviato il 12-3-2004 at 02:26 PM
|
|
|
Finora benissimo!!!!
Grazie veramente.
Ciao 
|
|
|
gorgoroth
Moderator
Risposte: 8958
Registrato il: 11-8-2003
Provenienza: Marche
Utente offline
Modalità: ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn!
|
|
Inviato il 12-3-2004 at 02:58 PM
|
|
|
TABELLE
Per organizzare la pagina in maniera ordinata si utilizzano le tabelle. Una tabella è un oggetto che è composto di R righe e C colonne. In ogni cella
della tabella posso inserire lo stesso contenuto che posso inserire tra <BODY> e </BODY> e quindi anche un'altra tabella.
Ad esempio potrei avere una tabella di una riga e due colonne. Nella prima cella potrei mettere il testo e nella seconda della immagini in modo dare
un'impostazione ordinata alla pagina invece di mischiare testo e foto.
Per creare una tabella è necessario utilizzare i tag <TABLE> e </TABLE>.
All'interno di questi due tag devono essere inserite le righe con i tag <TR> e </TR> (table row).
All'interno di una riga si possono inserire le colonne con i tag <TD> e </TD>
Es:
| Codice: |
<TABLE>
<TR>
<TD>
cella riga 1 colonna 1
</TD>
<TD>
cella riga 1 colonna 2
</TD>
</TR>
<TR>
<TD>
cella riga 2 colonna 1
</TD>
<TD>
cella riga 2 colonna 2
</TD>
</TR>
</TABLE>
|
vedi esempio
é necessario che il numero di colonne indicate per ogni riga sia lo stesso altrimenti si possono creare tabelle non corrette.
Il tag TABLE ha i seguenti attributi:
WIDTH indica la largezza della tabella, che può essere espressa sia in percentuale che in pixel.
HEIGHT indica l' altezza della tabella anch' essa può essere espressa sia in percentuale che in pixel.
ALIGN indica l' allineamento della tabelle rispetto alla pagina che, può essere "left", 'right" o "center".
BORDER determina lo spessore del bordo della tabella.
BACKGROUND permette di inserire un immagine come sfondo della tabella. Il suo valore è quindi l'url di tale immagine.
BGCOLOR indica il colore di sfondo della tabella.
BORDERCOLOR indica il colore del bordo.
BORDERCOLORDARK indica il colore della parte del bordo più scura.
BORDERCOLORLIGHT indica il colore della parte del bordo più chiara.
CELLPADDING indica lo spazio che c'è tra il contenuto delle celle e il bordo delle celle.
CELLSPACING indica lo spazio tra le varie celle.
Es
| Codice: |
<TABLE WIDTH="50%" HEIGHT="50%" ALIGN="center" BORDER="1" BGCOLOR="blue" CELLPADDING="5" CELLSPACING="2">
<TR>
<TD>
cella riga 1 colonna 1
</TD>
<TD>
cella riga 1 colonna 2
</TD>
</TR>
<TR>
<TD>
cella riga 2 colonna 1
</TD>
<TD>
cella riga 2 colonna 2
</TD>
</TR>
</TABLE>
|
vedi esempio
anche i tag <TD> che indicano l'inizio di una cella all'interno di una riga hanno i loro attributi:
WIDTH indica la largezza della cella, che può essere espressa sia in percentuale che in pixel. Chiaramente tale larghezza è relativa alla larghezza
della tabella.
HEIGHT indica l' altezza della cella anch' essa può essere espressa sia in percentuale che in pixel. Chiaramente tale altezza è relativa
all'altezza della tabella.
ALIGN indica allineamento orizzontale del contenuto della cella. Può essere "left", "center" o "right"
VALIGN indica allineamento verticale del contenuto della cella. Può essere "top", "middle", "bottom" o "baseline"
NOWRAP indica che il contenuto della cella non deve andare a capo automaticamente. Non ha nessun valore ma basta specificare l'attributo.
BACKGROUND permette di inserire un immagine come sfondo della cella. Il suo valore è quindi l'url di tale immagine.
BGCOLOR indica il colore di sfondo della cella.
es
| Codice: |
<TABLE WIDTH="50%" HEIGHT="50%" ALIGN="center" BORDER="1" BGCOLOR="blue" CELLPADDING="5" CELLSPACING="2">
<TR>
<TD WIDTH="60%" ALIGN="center">
cella riga 1 colonna 1
</TD>
<TD WIDTH="20%">
cella riga 1 colonna 2
</TD>
</TR>
<TR>
<TD WIDTH="60%">
cella riga 2 colonna 1
</TD>
<TD WIDTH="20%">
cella riga 2 colonna 2
</TD>
</TR>
</TABLE>
|
vedi esempio
Tutte le celle di una stessa colonna devono avere la stessa larghezza. Nell'esempio precedente sarebbe stato un errore dare "60%" come larghezza
della prima cella della prima riga e un valore diverso alla prima della della seconda riga. Ovvero normalmente il browser considera il valore più
grande.
Se è necessario creare delle tabelle non simmetriche (ovvero con ad esempio la prima riga con una sola cella e la seconda con due celle, oppure con la
prima colonna di una cella e la seconda colonna con due celle) si utilizzano gli attributi COLSPAN e ROWSPAN.
COLSPAN indica che la cella relativa occupa in realtà il numero di celle specificato invece di una cella sola.
| Codice: |
<TABLE WIDTH="50%" HEIGHT="50%" ALIGN="center" BORDER="1" BGCOLOR="blue" CELLPADDING="5" CELLSPACING="2">
<TR>
<TD WIDTH="60%" ALIGN="center" COLSPAN="2">
cella riga 1 colonna 1 + cella riga 1 colonna 2 che occupa due colonne
</TD>
</TR>
<TR>
<TD WIDTH="60%">
cella riga 2 colonna 1
</TD>
<TD WIDTH="20%">
cella riga 2 colonna 2
</TD>
</TR>
</TABLE>
|
vedi esempio
nell'esempio precedente ho una tabella in cui la prima riga ha una sola cella mentre la seconda ha due celle. Specificando COLSPAN="2" nella cella
ho detto al browser che quella cella occupa in realtà due colonne. Ho quindi omesso la definizione della seconda cella della prima riga.
Analogamente con ROWSPAN
| Codice: |
<TABLE WIDTH="50%" HEIGHT="50%" ALIGN="center" BORDER="1" BGCOLOR="blue" CELLPADDING="5" CELLSPACING="2">
<TR>
<TD WIDTH="60%" ALIGN="center" ROWSPAN="2">
cella riga 1 colonna 1 + cella riga 2 colonna 2 che occupa due righe
</TD>
<TD WIDTH="20%">
cella riga 1 colonna 2
</TD>
</TR>
<TR>
<TD WIDTH="60%">
cella riga 2 colonna 1
</TD>
</TR>
</TABLE>
|
vedi esempio
In questo caso ho indicato al browser che la prima cella occupa due righe. Quindi nella seconda riga ho indicato una cella solo essendo l'altra
inglobata nella prima cella.
| Chi più sa, più dubita. (Enea Silvio Piccolomini)
Quando insegni, insegna allo stesso tempo a dubitare di ciò che insegni. (Ortega y
Gasset) | |
|
|
|
greenmen
Moderator
Risposte: 5700
Registrato il: 4-3-2004
Utente offline
Modalità: deciso e sicuro
|
|
Inviato il 12-4-2004 at 11:17 AM
|
|
|
bene ragassuoli appena posso
mi studio questa lezione e poi vi faccio sapere.
ottimo direi ,
proprio quello che io e molti altri cercano.
|
|
|
Federico76
Junior Member
Risposte: 88
Registrato il: 12-5-2004
Utente offline
Modalità: A vostra completa disposizione.
|
|
Inviato il 12-5-2004 at 09:03 PM
|
|
|
Davvero ammirevole la vostra iniziativa.. Io, che sviluppo siti da non molto, la trovo davvero interessante. Pensavo che si potrebbero organizzare
corsi simili su vari argomenti...
Federico
|
|
|
anx
Posting Freak
Risposte: 13566
Registrato il: 1-2-2004
Provenienza: Castelli romani
Utente offline
Modalità: jedi
|
|
Inviato il 12-5-2004 at 09:44 PM
|
|
|
Ottima idea Federico ! Vedo che sei entrato subito nel vivo della community ! Ogni idea è la benvenuta se può dare aiuto alle canagliette volenterose
di imparare. Ci vediamo sul forum !
Antonello
ANX: ma il pollo voleva veramente attraversare la strada o è stato costretto?
|
|
|
Francuccio
Junior Member
Risposte: 15
Registrato il: 12-6-2004
Utente offline
Modalità: Nessuna modalità
|
|
Inviato il 12-6-2004 at 04:38 PM
|
|
|
Ciao ragazzi, mi ha invitato qui Discoletto, dicendomi che ci sono dei corsi su html e sviluppo siti.
Sono molto interessato a questi corsi, anche se sono praticamente bianco in materia e mi piacerebbe imparare.
Grazie anticipatamente 
Francuccio
|
|
|
greenmen
Moderator
Risposte: 5700
Registrato il: 4-3-2004
Utente offline
Modalità: deciso e sicuro
|
|
Inviato il 12-6-2004 at 05:08 PM
|
|
|
ciao francuccio
benvenuto tra noi .
|
|
|
anx
Posting Freak
Risposte: 13566
Registrato il: 1-2-2004
Provenienza: Castelli romani
Utente offline
Modalità: jedi
|
|
Inviato il 12-6-2004 at 05:10 PM
|
|
|
benvenuto anche da parte mia Francuccio !
spero che le lezioni siano interessanti !
ANX: ma il pollo voleva veramente attraversare la strada o è stato costretto?
|
|
|
antonio
Super Moderator
Risposte: 5570
Registrato il: 6-27-2002
Provenienza: Alba
Utente offline
Modalità: Nessuna modalità
|
|
Inviato il 12-6-2004 at 05:36 PM
|
|
|
Ciao Francuccio benvenuto tra noi
Antonio
Se vuoi contribuire a far crescere il forum di Canaglia.it acquista i tuoi libri su iBS cliccando QUI
Guadagna soldi e ricchi premi compilando sondaggi retribuiti. Pagati per esprimere opinioni CLICCA QUI.
Il tuo provider ti ha stancato? Ti consiglio di cambiare musica. Passa a QUESTO |
|
|
gorgoroth
Moderator
Risposte: 8958
Registrato il: 11-8-2003
Provenienza: Marche
Utente offline
Modalità: ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn!
|
|
Inviato il 12-7-2004 at 09:22 AM
|
|
|
Blocchi
I tag <DIV> e <SPAN> sono detti contenitori. Ovvero all'interno di questi tag può essere inserito tutto quello che
normalmente si inserisce nella pagina.
I due tag sono molto simili. La differenza è che <DIV> è un elemento di blocco mentre <SPAN> è un elemento in linea. Quindi
tutto quello che viene inserito tra <DIV> e </DIV> risulta andare a capo mentre quello racchiuso tra <SPAN> e
</SPAN> rimane sulla stessa riga. Es:
riga1 <SPAN>riga2</SPAN><SPAN>riga3</SPAN> da come risultato a video "riga1 riga2 riga3"
riga1 <DIV>riga2</DIV><DIV>riga3</DIV> da come risultato a video :
"riga1
riga2
riga3"
Come si nota qando si usa la <DIV> il suo contenuto va automaticamente a capo, molto similmente a <P></P> (vedi
sopra). Solamente che con il tag <P> viene lasciato uno spazio prima e dopo del blocco:
riga1 <P>riga2</P><P>riga3</P> da come risultato a video :
"riga1
riga2
riga3
"
Il tag <DIV> ha l'attributo ALIGN (allineamento orizzontale del contenuto) che può assumere i valori LEFT, RIGHT, CENTER, JUSTIFY.
Questi due tag sono molto utilizzati in combinazione con i fogli di stile e con l'HTML dinamico, cose che vedremo in futuro.
| Chi più sa, più dubita. (Enea Silvio Piccolomini)
Quando insegni, insegna allo stesso tempo a dubitare di ciò che insegni. (Ortega y
Gasset) | |
|
|
|
Francuccio
Junior Member
Risposte: 15
Registrato il: 12-6-2004
Utente offline
Modalità: Nessuna modalità
|
|
Inviato il 12-8-2004 at 12:32 PM
|
|
|
Grazie per il benvenuto.
Vi seguo con molto piacere.
Quindi se voglio fare un elenco:
Elenco dati:<DIV>Nome</DIV><DIV>Cognome</DIV><DIV>Data di
nascita</DIV><DIV>Età</DIV> Ecc..
A video vedremo:
Elenco dati:
Nome
Cognome
Data di nascita
Età Ecc..
Se vogliamo fare qualcosa di più carino, possiamo fare così:
Elenco dati:<p><DIV>Nome</DIV><DIV>Cognome</DIV><DIV>Data di
nascita</DIV><DIV>Età</DIV> Ecc..
E il risultato sarà il seguente:
Elenco dati:
Nome
Cognome
Data di nascita
Età Ecc..
Giusto?
|
|
|
anx
Posting Freak
Risposte: 13566
Registrato il: 1-2-2004
Provenienza: Castelli romani
Utente offline
Modalità: jedi
|
|
Inviato il 12-8-2004 at 08:20 PM
|
|
|
Per fare un elenco puoi utilizzare il tag apposito per la crezioni di liste (numerate e non) come:
1) Nome
2) Cognome...
oppure
- Nome
- Cognome
il tag è <ol> per le liste ordinate (numericamente), mentre si usa <ul> per le liste non ordinate.
<ol>Nome</ol>
<ol>Cognome</ol>
oppure
<ul>Nome</ul>
<ul>Cognome</ul>
Se poi, l'effetto che vuoi ottenere è molto più semplice, puoi semplicemente porre il tag di fine riga dopo ogni elemento
Nome<br>
Cognome<br>
ecc.
Anto
ANX: ma il pollo voleva veramente attraversare la strada o è stato costretto?
|
|
|
gorgoroth
Moderator
Risposte: 8958
Registrato il: 11-8-2003
Provenienza: Marche
Utente offline
Modalità: ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn!
|
|
Inviato il 12-9-2004 at 09:55 AM
|
|
|
In realtà la forma corretta dovrebbe essere
Liste non ordinate (puntate)
<UL>
<LI>opzione 1</LI>
<LI>opzione 2</LI>
<LI>opzione 3</LI>
</UL>
Liste ordinate (numerate)
<OL>
<LI>opzione 1</LI>
<LI>opzione 2</LI>
<LI>opzione 3</LI>
</OL>
Il tag <OL> accetta gli attributi:
START="numero"
Indica il numero di partenza della lista
TYPE="voce"
Indica il tipo di numerazione:
Attributo omesso: un numero ordinale
I numero romano maiuscolo
i numero romano minuscolo
A lettera maiuscola
a lettera minuscola
Il tag <LI> accetta gli attributi
VALUE="numero"
Numero di partenza. Ovvero a partire da questa opzione i numeri proseguiranno da "numero"
TYPE="voce"
Come per il tag <OL>. Cambia il tipo di numerazione per l'opzione corrente.
Naturalmente puoi creare elenchi annidati (nota: gli spazi di indentazione non contano. Li ho messi io per chiarezza)
| Codice: |
<OL>
<LI>opzione 1</LI>
<OL>
<LI>opzione 1</LI>
<LI>opzione 2</LI>
<LI>opzione 3</LI>
</OL>
<LI>opzione 2</LI>
<LI>opzione 3</LI>
</OL>
|
| Chi più sa, più dubita. (Enea Silvio Piccolomini)
Quando insegni, insegna allo stesso tempo a dubitare di ciò che insegni. (Ortega y
Gasset) | |
|
|
|
anx
Posting Freak
Risposte: 13566
Registrato il: 1-2-2004
Provenienza: Castelli romani
Utente offline
Modalità: jedi
|
|
Inviato il 12-9-2004 at 09:59 AM
|
|
|
Ooooooooops errore mio. Grazie per la precisazione gor
Sempre preciso ed esauriente
ANX: ma il pollo voleva veramente attraversare la strada o è stato costretto?
|
|
|
gorgoroth
Moderator
Risposte: 8958
Registrato il: 11-8-2003
Provenienza: Marche
Utente offline
Modalità: ph'nglui mglw'nafh Cthulhu R'lyeh wgah'nagl fhtagn!
|
|
Inviato il 12-9-2004 at 10:09 AM
|
|
|
Stavo pensando che per evitare intrecci, si potrebbe fare un topic dove la gente pone le domande, lasciando questo per le lezioni. Chi ha dubbi può
quindi andare a leggere lì.
| Chi più sa, più dubita. (Enea Silvio Piccolomini)
Quando insegni, insegna allo stesso tempo a dubitare di ciò che insegni. (Ortega y
Gasset) | |
|
|
|
anx
Posting Freak
Risposte: 13566
Registrato il: 1-2-2004
Provenienza: Castelli romani
Utente offline
Modalità: jedi
|
|
Inviato il 12-9-2004 at 10:13 AM
|
|
|
D'accordo con te gor. Usiamo l'altro topic ? Quello della proposta del corso
ANX: ma il pollo voleva veramente attraversare la strada o è stato costretto?
|
|
|
| Pagine: 1 2 |
