IkkiTousen Italia
Benvenuto Visitatore!
Utilizza i tasti sottostanti per effettuare la Connessione o per Registrarti al forum.
Se vuoi accedere come Ospite clicca su 'Non esporre più'.


Tutto su IkkiTousen e il mondo dell'ecchi: Queen's Blade, Tenjho Tenge e molto altro ancora. In più tutti i manga e anime più famosi (Bleach, Naruto, One Piece...) e una vasta sezione giochi / off-topic.
 
IndiceFAQCercaCalendarioLista UtentiGruppiRegistratiAccedi

Condividi | 
 

 [Tutorial HTML] Lezione 3

Andare in basso 
AutoreMessaggio
NetFox
Admin
Admin
avatar

Messaggi : 39
Data d'iscrizione : 30.05.11
Età : 28

MessaggioTitolo: [Tutorial HTML] Lezione 3   21/7/2011, 13:44

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"... />

Exclamation 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:
<p> Inserire qui il testo del paragrafo </p>
Attributi:
- allineamento del testo:
Codice:
align="left/right/center/giustify"

@ Testo con attributi:
Codice:
<font> Inserire qui il testo del paragrafo </font>
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:
<b>Testo in grassetto </b>

@ Testo in corsivo:
Codice:
<i>Testo in corsivo</i>

@ Testo sottolineato:
Codice:
<u>Testo sottolineato </u>

@ 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:
 

Question Esercitazione 3b:
Riprodurre la seguente pagina:
Spoiler:
 

Question 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.

_________________








Ultima modifica di NetFox il 22/7/2011, 21:10, modificato 1 volta
Torna in alto Andare in basso
Visualizza il profilo http://www.hollow.it
Piermix94
Spammer +
Spammer +
avatar

Messaggi : 155
Data d'iscrizione : 14.06.11
Età : 24
Località : Soul Society

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

Fatto Smile

es. 3a errato
es. 3b corretto
es. 3c errato
Torna in alto Andare in basso
Visualizza il profilo
NetFox
Admin
Admin
avatar

Messaggi : 39
Data d'iscrizione : 30.05.11
Età : 28

MessaggioTitolo: Re: [Tutorial HTML] Lezione 3   22/7/2011, 21:15

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.

_________________






Torna in alto Andare in basso
Visualizza il profilo http://www.hollow.it
Piermix94
Spammer +
Spammer +
avatar

Messaggi : 155
Data d'iscrizione : 14.06.11
Età : 24
Località : Soul Society

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

Li ho corretti spero vadano bene Smile
errati
Torna in alto Andare in basso
Visualizza il profilo
NetFox
Admin
Admin
avatar

Messaggi : 39
Data d'iscrizione : 30.05.11
Età : 28

MessaggioTitolo: Re: [Tutorial HTML] Lezione 3   25/7/2011, 21:00

Guarda:
Codice:
<br/>
e
Codice:
<hr attributi />
Prova a ricorreggerli!

_________________






Torna in alto Andare in basso
Visualizza il profilo http://www.hollow.it
Piermix94
Spammer +
Spammer +
avatar

Messaggi : 155
Data d'iscrizione : 14.06.11
Età : 24
Località : Soul Society

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

Speriamo in bene:
Esercizio 3a
Esercizio 3c
Torna in alto Andare in basso
Visualizza il profilo
tobari
Toshi
Toshi
avatar

Messaggi : 31
Data d'iscrizione : 14.06.11
Età : 22

MessaggioTitolo: Re: [Tutorial HTML] Lezione 3   26/7/2011, 20:00

ecco i miei:
Esercizio 3a
Esercizio 3b
Esercizio 3c
Spoiler:
 
Torna in alto Andare in basso
Visualizza il profilo
Contenuto sponsorizzato




MessaggioTitolo: Re: [Tutorial HTML] Lezione 3   

Torna in alto Andare in basso
 
[Tutorial HTML] Lezione 3
Torna in alto 
Pagina 1 di 1
 Argomenti simili
-
» Amigurumi, come imparare - Tutorial primi passi
» Ricamo - Tutorial punti
» Piccolo Tutorial sulla tornitura
» tutorial e pubblicità-pay with a tweet
» Pagliaccio in fimo con tutorial

Permessi di questa sezione del forum:Non puoi rispondere agli argomenti in questo forum
IkkiTousen Italia :: Off-Topic :: Grafica :: Guide-
Vai verso:  
Tutto i contenuti del forum sono Copyright© by Ikkitousen Italia

Powered by NetFox
Forumattivo.com | © phpBB | Forum gratis di aiuto | Contatto | Segnala un abuso | Avere un blog