(Piccolo quiz -- cosa significa questa sigla? Se hai letto la precedente lezione dovresti gia' saperlo!).
<nome_tag>stringa di testo</nome_tag>Per esempio, il titolo per questa lezione usa un tag header:
<h3>Cosa sono i tag HTML?</h3>Questo tag comunica al web browser di visualizzare il testo Cosa sono i tag HTML? nello stile di intestazione di livello 3 (su queste cose ne impareremo di piu' andando avanti). I tag HTML possono dire al web browser di rendere il testo in grassetto, in corsivo, trasformarlo in un'intestazione, o farlo diventare un link ipertestuale ad un'altra pagina web. E' importante notare che il tag di chiusura,
</nome_tag>contiene il carattere "/" slash. Questa "/" barretta indica al web browser dove deve termina il testo contrassegnato dal tag aperto in precedenza. Molti tag HTML sono accoppiati in questo modo. Se ti dimentichi la barretta, il web browser continuera' a considerare il tag valido per tutta la restante parte del tuo documento, dando risultati indesiderati (come in un esperimento che potresti provare a realizzare piu' tardi).
NOTA: Un web browser non fa caso al fatto che tu possa usare maiuscole o minuscole. Per esempio, <h3>...</h3> non e' reso diverso da <H3>...</H3>Diversamente dalla programmazione informatica, se fai un errore tipografico in HTML, non ci sara' una distruzione del programma od un crash nel sistema; semplicemente, la tua pagina web sembrera'... sbagliata. E' facile e veloce ritornare al codice HTML ed apportare le giuste modifiche.
Il tuo browser ha un vocabolario piccolo ma aperto! Un aspetto interessante dell'HTML e' che se il browser non riesce a capire come si deve comportare con il tag dato, lo ignora! Per esempio, nel documento che stai osservando, il tag d'intestazione di questa sezione assomiglia veramente a questa:
<wiggle><h3>What are HTML tags?</h3></wiggle>ma dato che il tuo programma probabilmente non supporta questo <wiggle> tag (noi l'abbiamo creato, forse in futuro fara' in modo che il testo ondeggi lungo lo schermo?), esso procede con le sue conoscenze. Se stessi programmando un nuovo web browser, potrei decidere di aggiungere le funzionalita' per il tag <wiggle> nel mio software.
NOTA: Questo e' un buon punto per ricordarti che ti forniremo direttive che sono comunque generali come il nome dei menu e dei file, che potrebbero variare in base al browser che stai usando. Se le nostre istruzioni dicono "Seleziona Apri... dal Menu File" ed il tuo web browser non ha questa esatta possibilita', cerca di trovare l'equivalente piu' simile.
Cosi' potrai essere in grado di saltare comfortevolmente da una finestra ad un'altra applicazione diversa sul tuo computer. Un'altra opzione e' quella di stampare le istruzioni della lezione (ma noi non abbiamo intenzione di promuovere troppo quest'esagerato sfruttamento delle piante).
Ecco qui i passaggi necessari alla creazione di un "workspace":
NOTA: L'unica ragione per lavorare con due finestre e' che cosi' facendo puoi leggere le istruzioni per le lezioni e vedere al contempo il documento che stai creando. Non e' obbligatorio avere le due finestre aperte; rende solo il lavoro piu' semplice. Puoi anche mettere un segnalibro a questa pagina web o saltare indietro fino a qui attraverso il menu Vai a.. o Cronologia.
NOTA: Avrai necessita' di saltare indietro ed avanti tra finestre diverse per completare queste lezioni. Questa potrebbe essere una difficolta', in base alle dimensioni del tuo monitor. Potresti scegliere di ridimensionare le tre finestre in modo che si adattino al tuo schermo o farne una pila in modo che all'occorrenza tu possa portarle in primo piano semplicemente con un click.Se stai usando un programma di word processor per creare il tuo codice HTML, assicurati di salvarlo in formato solo testo (od ASCII).
Ancora, ti sara' d'aiuto la creazione di una nuova directory/folder sul computer da usare come area di lavoro. La potresti chiamare workarea o myspace o in qualsiasi altro modo; solo assicurati di conservare tutti tuoi file creati in questo unico spazio. Ti semplifichera' la vita... almeno mentre lavori a questo tutorial!
La struttura di base allora di ogni pagina HTML e':
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head> <!-- informazioni d'intestazione usate per fornireLa primissima linea:
notizie extra riguardo questo documento,
non visualizzate sulla pagina --> </head> <body> <!-- tutto l'HTML da visualizzare --> : : : : : : </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">Non e' tecnicamente richiesta, ma e' un codice che informa il browser per quale versione di HTML e' stata scritta la pagina corrente. Per maggiori informazioni, consulta le Specifiche di Riferimento W3C.
Racchiudi tutto il lavoro in HTML nei tag <html>...</html>. Dentro, per primo viene il tag <head>...</head> e poi <body>...</body>. La tua web page puo' apparire gradevole sulla maggior parte dei computer senza nessuno di questi tag. In ogni caso, usandoli, le tue web page saranno in perfetto accordo con gli standard HTML Internazionali ed assicurati per la compatibilita' con i browser del prossimo futuro.
E' una buona abitudine, come quella di lavarti i denti :o).
Nota anche i tag di commento racchiusi da <!-- blah blah blah -->. Il testo contenuto tra questi tag NON viene visualizzato nella tua pagina web ma e' per informazioni che potrebbero essere utili a te o a qualsiasi altra persona che voglia guardare a fondo il tuo codice sorgente HTML. Quando le tue pagine diventano complesse (come ti renderai conto quando ci avventureremo tra tabelle, frame, ed altre cosuccie divertenti, tra non meno di 20 lezioni!), i commenti diventeranno utilissimi nel momento in cui avrai bisogno di migliorare pagine create un sacco di tempo fa.
Questi sono i passi da compiere per creare il tuo primo file HTML. Sei pronto?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<html>
<head>
<title>Volcano Web</title>
</head>
<!-- written for the Writing HTML Tutorial
by Lorrie Lava, February 31, 1999 -->
<body>
In questa lezione userai la Rete per cercare
informazioni sui vulcani e poi scrivere il tuo
resoconto sui risultati.
</body>
</html>
NOTA: Guarda dove e' posizionato il tag <title>...</title>. E' nella parte contrassegnata da <head>...</head> e quindi non e' visibile sullo schermo. A cosa serve allora? Il tag <title> e' usato unicamente per identificare ogni documento ed e' anche visualizzato sulla barra degli strumenti del browser.Nella lezione 3 imparerai come aggiungere un titolo che appaia direttamente nella tua pagina web.
Nota anche che abbiamo inserito un tag di commento che elenca il nome dell'autore e la data in cui il documento e' stato creato. Puoi scriverci quello che piu' ti pare tra i tags di commento, ma il tutto sara' visibile solo se si guarda nel sorgente HTML della pagina web.
NOTA: Per gli utenti di Windows 3.1, si deve salvare tutti i codici HTML con nomi che terminino con l'estensione .HTM, ed in questo caso il tuo file sara' VOLC.HTM. Non preoccuparti!! Il tuo web browser e' abbastanza furbo da capire che i file con estensione .HTM sono file HTML.Usando queste estensioni, un web browser sapra' come leggere questi file di testo come HTML e visualizzare adeguatamente la web page.Puoi creare file con nomi tipo VOLC.HTML se sei un utente Windows9x o Windows NT.
Se il tuo documento era diverso dall'esempio, rivedi il testo che hai digitato nel tuo text editor.
Un problema comune e', "Non riesco a vedere il titolo!" Non puoi! Il testo contenuto tra i tag <title>...</title> NON e' visualizzato sulla pagina web; lo puoi vedere nella barra del titolo del web browser.
Tra i principianti, lo sbaglio piu' comune e' quello di provare ad usare un programma di word processing per scrivere codice e non sono capaci di aprirlo nei loro browser, o, se riescono, la pagina che risulta e' piena di caratteri indesiderati e senza senso. Quando si comincia dalle basi, e' necessario usare il text editor piu' semplice, come Windows NotePad o Simpletext per Macintosh. Avremo modo di trovare scorciatoie piu' avanti!
Tieni questo file a portata di mano, dovrai aggiungerlo nelle prossime lezioni.
Ma, ad esser sinceri, non e' molto lunga e non e' un granche' eccitante! Nella prossima lezione la modificherai e la migliorerai.
The Internet Connection at MCLI is
Alan Levine --}
Comments to mailto:alan.levine@domail.maricopa.edu?subject=Writing
HTML