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

Condividere | 
 

 [Tutorial HTML] Lezione 2

Vedere l'argomento precedente Vedere l'argomento seguente Andare in basso 
Vai alla pagina : 1, 2  Seguente
AutoreMessaggio
NetFox
Admin
Admin
avatar

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

MessaggioTitolo: [Tutorial HTML] Lezione 2   5/7/2011, 07:03

Dopo una lunga attesa ri-eccoci qua! Rolling Eyes
Mi dispiace avervi fatto aspettare tanto, ma un po' che l'altra volta ho perso quasi tre ore per preparare questa lezione e non l'ha inviata, un po' che ho dovuto preparare un esame e anche quello devo rifarlo...insomma l'umore non è stato dei migliore Crying or Very sad
E anche ora ho preferito dare importanza alle cose del forum (raduni, novità...) prima di tornare qui.

Ma adesso ci siamo e da questa settimana ricominciamo a metterci sotto con lo studio dell'html study

Questa lezione sarebbe dovuta partire come l'avevo preparata l'altra volta: con qualche conoscenza in più sugli strumenti di editor dell'html, ma visto la lunga attesa, per non farvi annoiare troppo, ho deciso di cambiare e cominciare subito con un po' di pratica. Riprenderemo la teoria un po' più in là.
Quindi parleremo delle estensioni nella lezione sulle immagini, parleremo degli ambienti di sviluppo quando cominceremo ad usarli, per ora blocco note e la tecnica dell'altra volta ci basta e ci avanza.

Iniziamo quindi con un concetto basilare: i TAG
Come vi ho detto, l'html non è un linguaggio procedurale, bensì descrittivo. La differenza sta nel fatto che un linguaggio procedurale permette di FARE delle operazioni, un linguaggio descrittivo permette di VISUALIZZARE degli elementi. Il primo tipo lo incontreremo quando parleremo, alla fine del corso, di javascript.
Per quanto riguarda l'html esso permette di strutturare delle pagine web. Per la precisione, pagine web statiche. Non so se arriveremo mai a parlare di quelle dinamiche (servono linguaggi come asp, php etc).
Nelle pagine ci sono degli oggetti come potete vedere: i testi sono degli oggetti, i titoli sono degli oggetti, le immagini sono degli oggetti, i bottoni, i link....
Per inserire un oggetto è necessario mettere, nel codice della nostra pagina, un tag.
I tag sono di due forme:
Codice:
<nomedeltag> contenuto </nomedeltag>
oppure:
Codice:
<nomedeltag />

Giusto per fissare le idee potete vedere questi due esempi:
Codice:
<span>This is a text</span>
Codice:
<br/>

Come vedete il primo si apre e si chiude in un secondo tempo, il secondo fa tutto insieme.
Exclamation La cosa importante però è che ogni tag aperto, venga chiuso. Exclamation

[Per le prossime lezioni: l'icona Exclamation indica osservazioni particolarmente importanti].

Prima di andare avanti, soffermiamoci su un tag molto particolare: il commento!
Esso è della forma:
Codice:
<!-- Inserisci qui il commento -->
e può stare anche su più righe:
Codice:
<!-- Commento
su
più
righe -->
Exclamation Tutto ciò che è commentato non appare nella visualizzazione della pagina, ma rimane nel sorgente.Exclamation
Perchè è così importante? Per 2 motivi: io lo userò per commentare i codici che via via vi invierò, voi potrete usarlo per capire qualcosa nelle vostre pagine. Per ora sembra inutile, ma su pagine con centinaia di righe di codice, vedrete che sarà indispensabile.
Anche il commento va chiuso, come vedete dagli esempi sopra.

Bene, ora che sapete cosa sono i tag, almeno in teoria, cominciamo a vederne qualcuno molto semplice, giusto per poter iniziare a fare qualcosa.

[Ogni nuovo tag verrà indicato con l'icona @ ]
@ Paragrafo
Per inserire un paragrafo, si può utilizzare il tag:
Codice:
<p> Inserisci qui il testo del paragrafo </p>

E' del primo tipo, ed è molto semplice.

@ Contenitore semplice
Per inserire un semplice contenitore si usa il tag:
Codice:
<span> Contenuto </span>

Ancora non vi è molto chiaro cosa sia un contenitore. In pratica un contenitore è un oggetto che contiente altri oggetti e ne definisce delle proprietà. Per farvi un esempio molto semplice, un menù è un contenitore che contiene dei link a delle pagine e definisce il colore di sfondo, il colore dei link, la dimensione etcetc per tutto il suo contenuto. Per ora ci limitiamo a metterci del testo dentro, in tal caso:
Codice:
<span>Inserisci qui il testo.</span>

@ Andare a capo.
Se state scrivendo del testo, dentro ad un qualsiasi tag, per andare a capo non basta premere l'invio della tastiera. Nel sorgente andrete a capo, ma quando visualizzerete la pagina ciò non succederà. Per andare a capo dovete inserire questo tag:
Codice:
<br/>


Bene, facciamo un po' di esercizi per fissare le idee?
[Gli esercizi saranno introdotti dall'icona Question ]

Question Esercitazione 2a: capiamo meglio questo ultimo tag visto: provate a creare queste due pagine e guardate la differenza:
Codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Esercitazione 2a</title>
</head>
<body>
<span>proviamo ad andare a capo CON il tag
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
cosa succede?</span>
</body>
</html>

e questa:
Codice:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Esercitazione 2a</title>
</head>
<body>
<span>proviamo ad andare a capo senza il tag





cosa succede?</span>
</body>
</html>

Question Es. 2b: Il seguente codice contiene diversi errori, riuscite a correggerlo? Provate a visualizzare la pagina quando l'avete corretta, così vedrete se il risultato è corretto o meno!
Codice:
<!-- ATTENZIONE IGNORATE QUESTA PRIMA PARTE -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>Esercitazione 2B</title>
</head>
<body>

<!-- ATTENZIONE: COMINCIATE A CORREGGERE DA QUI!-->
<p>Questo è un paragrafo.<p>
</p>Questo è un altro paragrafo</p>
<span>Questo testo è dentro un contenitore.</ span>
<span>Questo <br/>
<br/>
è un testo <br/>
su più >br />
linee.
<!-- Questo invece è un commento
<p> Questo è l'ultimo <br/>
paragrafo,<br/>
su più linee. <br/>
<span>Questo è l'ultimo contenitore>
<!-- ATTENZIONE: QUI FINISCE LA CORREZIONE -->

</body>
</html>

Question es2c: chiudiamo con un esercizio che vi proporrò molto spesso: vi faccio vedere l'immagine di una pagina e voi dovete riprodurla:
Spoiler:
 

Buon lavoro!

Nella prossima lezione:
- alcuni nuovi tag
- gli attributi dei tag

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.

_________________






Tornare in alto Andare in basso
Vedi il profilo dell'utente http://www.hollow.it
XxLightYagamixX
Utente
Utente
avatar

Messaggi : 41
Data d'iscrizione : 14.06.11
Età : 21

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   5/7/2011, 08:30

ok net ho fatto ecco le pagine
esercioni 2A
esercizio 2A
2b corretto
2c corretto


P.S.
net ma il posto di scrivere
Codice:
<br/>
si può fare a meno di scrivere lo slash vero??? perchè io nella pagina da creare non ne ho messi per andare a capo
Tornare in alto Andare in basso
Vedi il profilo dell'utente http://www.mine254.forumfree.it
NetFox
Admin
Admin
avatar

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

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   5/7/2011, 09:51

Vanno bene tutti. Complimenti. Ho levato il link agli ultimi per evitare copie.

Per rispondere alla tua domanda? Lo / è necessario?
No, non lo è. Funziona anche senza, ma il mio obiettivo non è solo quello di insegnarvi l'html ma, e ne parleremo più avanti, anche quello di fare pagine html secondo lo standard w3c. Vedi l'intestazione degli html che vi ho fornito.

In conclusione, per fare buone pagine (vederemo poi i vantaggi di fare buone pagine), dovete mettere i tag e le regole come ve le dico Wink

_________________






Tornare in alto Andare in basso
Vedi il profilo dell'utente http://www.hollow.it
XxLightYagamixX
Utente
Utente
avatar

Messaggi : 41
Data d'iscrizione : 14.06.11
Età : 21

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   5/7/2011, 10:44

ok sono contento che siano giusti tutti gli esercizi!!!!e grazie della risposta
Tornare in alto Andare in basso
Vedi il profilo dell'utente http://www.mine254.forumfree.it
tobari
Toshi
Toshi
avatar

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

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   5/7/2011, 11:53

spero vada bene:
esercizio 2A
esercizio 2A
2b errato
2c corretto
Tornare in alto Andare in basso
Vedi il profilo dell'utente
NetFox
Admin
Admin
avatar

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

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   5/7/2011, 12:16

controlla meglio il 2b, guarda per bene tutti i tag.

Il resto è tutto ok Wink

_________________






Tornare in alto Andare in basso
Vedi il profilo dell'utente http://www.hollow.it
Piermix94
Spammer +
Spammer +
avatar

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

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   5/7/2011, 12:48

Fatto anch'io

Esercizio 2a
Esercizio 2a
esercizio 2b errato
es 2c corretto, ma non segue lo standard 3wc
Tornare in alto Andare in basso
Vedi il profilo dell'utente
tobari
Toshi
Toshi
avatar

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

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   5/7/2011, 13:38

rifatto l'esercizio 2b spero vada bene stavolta
esercizio 2b errato
Tornare in alto Andare in basso
Vedi il profilo dell'utente
NetFox
Admin
Admin
avatar

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

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   6/7/2011, 13:51

@piermix: il b presenta ancora alcuni errori
il c va bene, ma come ho detto a light, lo standard 3wc prevede che ci sia lo /
quindi usa:
Codice:
<br/>
d'ora in poi, ok?

@tobari: controlla la seconda riga cyclops

_________________






Tornare in alto Andare in basso
Vedi il profilo dell'utente http://www.hollow.it
NetFox
Admin
Admin
avatar

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

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   6/7/2011, 13:53

PS: fra oggi e domani preparo la prossima lezione e nel fine settimana la posto.

_________________






Tornare in alto Andare in basso
Vedi il profilo dell'utente http://www.hollow.it
tobari
Toshi
Toshi
avatar

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

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   6/7/2011, 20:33

corretto l'errore, speriamo che stavolta sia giusto^^

2b corretto
Tornare in alto Andare in basso
Vedi il profilo dell'utente
Kraysen
Spammer +
Spammer +
avatar

Messaggi : 71
Data d'iscrizione : 16.06.11
Età : 28
Località : Palermo

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   8/7/2011, 02:24

Ecco i miei! In ritardo perchè non ho avuto molto tempo! Cmq, una lezione bellissima e interessante! *_* Spero di aver fatto giusto Sad

Prima Esercitazione 2A
Seconda Esercitazione 2A
2b errato
2c corretto

_________________






__________________________________________________________________________________________________

Tornare in alto Andare in basso
Vedi il profilo dell'utente
Cardino96
Spammer +
Spammer +
avatar

Messaggi : 35
Data d'iscrizione : 14.06.11
Età : 21
Località : StoCazzoLandia

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   8/7/2011, 13:04

Ecco i miei... Scusate il ritardo ^_^

Esercizio 2A
Esercizio 2A (2)
2b errato
2c errato

_________________
Tornare in alto Andare in basso
Vedi il profilo dell'utente http://mircocardino.blogspot.com/
XxLightYagamixX
Utente
Utente
avatar

Messaggi : 41
Data d'iscrizione : 14.06.11
Età : 21

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   8/7/2011, 13:29

cardino controlla meglio l'ultimo esercizio ho notato un errore...(scusa net per averti rubato il lavoro) e kray ho controllato i tuoi e vanno bene...almeno da quanto ho notato io( scusa net ti ho rirubato il lavoro)
Tornare in alto Andare in basso
Vedi il profilo dell'utente http://www.mine254.forumfree.it
XxLightYagamixX
Utente
Utente
avatar

Messaggi : 41
Data d'iscrizione : 14.06.11
Età : 21

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   8/7/2011, 13:30

tobari ha scritto:
corretto l'errore, speriamo che stavolta sia giusto^^

esercizio2b
C'è un errore controlla meglio
Tornare in alto Andare in basso
Vedi il profilo dell'utente http://www.mine254.forumfree.it
Piermix94
Spammer +
Spammer +
avatar

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

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   8/7/2011, 13:51

Corretto

2b errato
2c corretto
Tornare in alto Andare in basso
Vedi il profilo dell'utente
XxLightYagamixX
Utente
Utente
avatar

Messaggi : 41
Data d'iscrizione : 14.06.11
Età : 21

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   8/7/2011, 13:53

sono corretti pier
Tornare in alto Andare in basso
Vedi il profilo dell'utente http://www.mine254.forumfree.it
Kraysen
Spammer +
Spammer +
avatar

Messaggi : 71
Data d'iscrizione : 16.06.11
Età : 28
Località : Palermo

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   8/7/2011, 14:56

Grazie ^_^

_________________






__________________________________________________________________________________________________

Tornare in alto Andare in basso
Vedi il profilo dell'utente
NetFox
Admin
Admin
avatar

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

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   8/7/2011, 20:34

L'esercizio 2b ha veramente fatto delle vittime silent Meglio così, vuol dire che è istruttivo! alien

Facciamo il punto:
- tobari va bene, bravo!
- kraysen controlla meglio il 2b
- cardino controlla la chiusura dei tag in entrambi gli esercizi
- piermix ricontrolla il 2b (vedi 2° riga)

_________________






Tornare in alto Andare in basso
Vedi il profilo dell'utente http://www.hollow.it
Piermix94
Spammer +
Spammer +
avatar

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

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   8/7/2011, 21:28

Mi era sfuggito!!!!
Eccolo speriamo che sta volta vada bene!!
2b errato

Tornare in alto Andare in basso
Vedi il profilo dell'utente
Kraysen
Spammer +
Spammer +
avatar

Messaggi : 71
Data d'iscrizione : 16.06.11
Età : 28
Località : Palermo

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   8/7/2011, 23:54

Adesso? Sad
2B corretto

C'è una cosa che con capisco...perchè quando vado a vedere la sorgente della pagina, me lo dà diverso da come l'ho scritto sul blocco note?? Sad Mi aggiunge cose che non ho messo! E che penso siano quelle che mi danno per errato il lavoro! Sad

_________________






__________________________________________________________________________________________________

Tornare in alto Andare in basso
Vedi il profilo dell'utente
NetFox
Admin
Admin
avatar

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

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   9/7/2011, 17:37

C'è un tag non chiuso piermix!

_________________






Tornare in alto Andare in basso
Vedi il profilo dell'utente http://www.hollow.it
Piermix94
Spammer +
Spammer +
avatar

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

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   9/7/2011, 20:49

Sto impazzendo: 2b corretto
Tornare in alto Andare in basso
Vedi il profilo dell'utente
Kraysen
Spammer +
Spammer +
avatar

Messaggi : 71
Data d'iscrizione : 16.06.11
Età : 28
Località : Palermo

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   9/7/2011, 21:15

Net, il mio?? Sad

_________________






__________________________________________________________________________________________________

Tornare in alto Andare in basso
Vedi il profilo dell'utente
Cardino96
Spammer +
Spammer +
avatar

Messaggi : 35
Data d'iscrizione : 14.06.11
Età : 21
Località : StoCazzoLandia

MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   10/7/2011, 19:28

esercizi 2b 2c corretti

Vedi ora Net...

_________________
Tornare in alto Andare in basso
Vedi il profilo dell'utente http://mircocardino.blogspot.com/
Contenuto sponsorizzato




MessaggioTitolo: Re: [Tutorial HTML] Lezione 2   

Tornare in alto Andare in basso
 
[Tutorial HTML] Lezione 2
Vedere l'argomento precedente Vedere l'argomento seguente Tornare in alto 
Pagina 1 di 2Vai alla pagina : 1, 2  Seguente
 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-
Andare verso:  
Tutto i contenuti del forum sono Copyright© by Ikkitousen Italia

Powered by NetFox
Creare un forum | © phpBB | Forum gratis di aiuto | Contatto | Segnala un abuso | Crea il tuo blog gratuito