[Tutorial HTML] Lezione 3

Admin Messaggi : 39 Data d'iscrizione : 30.05.11 Età : 33

Eccoci alla terza lezione, che sarà relativamente breve e molto divertente, in quanto è molta pratica e poca teoria.

Abbiamo imparato cosa sono i tag, vediamo come arricchirli un po'.

Gli attributi
Tutti (o quasi) i tag permettono di inserire degli attributi, ovvero delle qualità. Essi possono essere estetici (colore del testo, dimensione di un contenitore...) oppure funzionali (link dell'immagine, indirizzo per un link...).
Inserirli è facilissimo, vediamo la sintassi per i due tipi di tag che abbiamo visto (vi ricordo che ci sono quelli che si aprono e chiudono in due posti diversi e quelli che si aprono e chiudono insieme).

Codice:: <nomedeltag attributo1="valore attributo 1" attributo2="valore attributo 2"...> contenuto </nomedeltag>

Codice:: <nomedeltag attributo1="valore attributo 1" attributo2="valore attributo 2"... />

Attenzione: il valore dell'attributo è rigorosamente tra " " e gli attributi sono separati da spazio.

Vedremo più avanti un modo molto più sofisticato per inserire gli attributi: i CSS, ma per ora questo può bastare.

Adesso ci facciamo una carrellata di tag vecchi e nuovi con relativi attributi.
Exclamation

NB: non è necessario inserirli tutti, di volta in volta decidete quali vi interessano e inserite solo quelli (se ce ne sono Smile

)

Principali tag:

Paragrafo:

Codice:: Inserire qui il testo del paragrafo

Attributi:
- allineamento del testo:

Codice:: align="left/right/center/giustify"

Testo con attributi:

Codice:: Inserire qui il testo del paragrafo

Attributi:
- grandezza del testo:

Codice:: size="XXX px"

XXX è il numero di pixel
- carattere del testo:

Codice:: face="XXX"

XXX è il nome del font
- colore del testo:

Codice:: color="#XXXXXX"

XXXXXX è il colore in formato RGB
Colori RGB

Exclamation

Quando impareremo ad usare i CSS questo tag lo abbandoneremo, perchè non segue lo standard W3C, ma per ora è l'unico modo per cambiare un testo.

Testo in grassetto:

Codice:: Testo in grassetto

Testo in corsivo:

Codice:: Testo in corsivo

Testo sottolineato:

Codice:: Testo sottolineato

Testo sbarrato:

Codice:: <s>Testo sbarrato </s>

Riga:

Codice:: <hr/>

Attributi:
- colore della riga:

Codice:: color="#XXXXXX"

- grandezza:

Codice:: size="XXX px"

XXX è il numero di pixel

Per finire due tag molto importanti.
Il primo è il tag che consente di inserire link ad altre pagine:

URL:

Codice:: <a> Testo del link </a>

- collegamento:

Codice:: href="indirizzo di destinazione"

- collegamento ad una mail:

Codice:: href="mailto:e-mail"

Il secondo è un tag che avete sempre visto: il body, ovvero il corpo della pagina, quello che viene visualizzato e che tutti vedono.
C'è sempre, e ci deve essere sempre, vediamo quali attributi possiamo mettergli:

Codice:: <body bgcolor="#??????"> » Colore di sfondo del documento.
<body background="nomefile.xxx"> » Immagine come sfondo.
<body text="#??????"> » Colore del testo del documento.
<body link="#??????"> » Colore dei collegamenti ipertestuali.
<body alink="#??????"> » Colore dei collegamenti ipertestuali attivi.
<body vlink="#??????"> » Colore dei collegamenti ipertestuali già visitati.

Come al solito potete metterli tutti, nessuno o solo alcuni.

Per non mettere troppa carne al fuoco, fermiamoci e proviamo qualche esercizio.

Question

Esercitazione 3a:
Riprodurre la seguente pagina:

Spoiler:

Esercitazione 3b:
Riprodurre la seguente pagina:

Spoiler:

Esercitazione 3c:
Riprodurre la seguente pagina:

Spoiler:

Nella prossima lezione:
- le estensioni e i percorsi assoluti relativi
- il tag img
NB: tutto quello che non è espressamente quotato con fonte citata è stato scritto interamente da NetFox, pertanto è di sua proprietà, chiedere sempre il permesso per la divulgazione. Ogni abuso sarà punito. [Tutorial HTML] Lezione 3 1369397684

Titolo: Re: [Tutorial HTML] Lezione 3 22/7/2011, 00:05

Fatto

es. 3a errato
es. 3b corretto
es. 3c errato

Admin Messaggi : 39 Data d'iscrizione : 30.05.11 Età : 33

Accidenti che rapidità!
Dunque... il B va bene.
Sia nell'A che nel C controlla la chiusura dei tag, soprattutto di quelli che si aprono e chiudono nello stesso posto, perchè fai un po' di confusione a mettere lo / . Riguarda gli esempi.
Infine una nota per il C: il tag

Codice:: <a> </a>

non va messo dentro un paragrafo, e nell'indirizzo del link manca

Codice:: http://

infatti non funzionava. Molto presto parleremo in dettaglio degli indirizzi del collegamenti: assoluti/relativi/esterni.

Titolo: Re: [Tutorial HTML] Lezione 3 24/7/2011, 08:50

Li ho corretti spero vadano bene Smile

errati

Admin Messaggi : 39 Data d'iscrizione : 30.05.11 Età : 33

Guarda:

Codice::

e

Codice:: <hr attributi />

Prova a ricorreggerli!

Titolo: Re: [Tutorial HTML] Lezione 3 25/7/2011, 21:47

Speriamo in bene:
Esercizio 3a
Esercizio 3c

Toshi Messaggi : 31 Data d'iscrizione : 14.06.11 Età : 28

ecco i miei:
Esercizio 3a
Esercizio 3b
Esercizio 3c

Spoiler:

» [Tutorial HTML] Lezione 1
» [Tutorial HTML] Lezione 2
» [Tutorial HTML] Cenni preliminari