[Tutorial HTML] Lezione 2

Dopo una lunga attesa ri-eccoci qua!
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
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

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.
La cosa importante però è che ogni tag aperto, venga chiuso.

[Per le prossime lezioni: l'icona 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 -->

Tutto ciò che è commentato non appare nella visualizzazione della pagina, ma rimane nel sorgente.
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 ]

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>

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>

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.

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

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

ok sono contento che siano giusti tutti gli esercizi!!!!e grazie della risposta

spero vada bene:
esercizio 2A
esercizio 2A
2b errato
2c corretto

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

Il resto è tutto ok

Fatto anch'io

Esercizio 2a
Esercizio 2a
esercizio 2b errato
es 2c corretto, ma non segue lo standard 3wc

rifatto l'esercizio 2b spero vada bene stavolta
esercizio 2b errato

@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

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

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

2b corretto

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

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

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

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

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)

tobari ha scritto:

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

esercizio2b

C'è un errore controlla meglio

Corretto

2b errato
2c corretto

sono corretti pier

Grazie ^_^

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

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)

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

Adesso?
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?? Mi aggiunge cose che non ho messo! E che penso siano quelle che mi danno per errato il lavoro!

C'è un tag non chiuso piermix!

Sto impazzendo: 2b corretto

Net, il mio??

esercizi 2b 2c corretti

Vedi ora Net...