Lezione 1 Primi passi in HtML SCRIVERE TESTI di Sergio Capone
PROVIAMO ORA BLOCCO NOTE !!! Come usare Blocco Note ll linguaggio HtML non è altro che semplice testo. Dunque non è necessario usare degli editor o dei compilatori particolari per creare dei file HtML. Si possono creare questi file con gli editor più semplici, specifici o con dei convertitori o ancora con degli impaginatori. PROVIAMO ORA BLOCCO NOTE !!!
Come usare i tag L'uso dei tag è ciò che differenzia un file HtML da un normale testo. I tag vengono usati intensivamente e consentono di controllare la formattazione del testo, creare collegamenti (link) ad altri documenti nonché incorporare suoni e immagini. Es. <BODY> <body> <BoDY> sono istruzioni corrette e funzionanti. Es. <HtML> </HtML> è corretto.
Come scrivere HtML La struttura indent di base in HtML <html> <! - - commento: prova di scrittura - - > <head> <title> La mia prima pagina </title> </head> <body> Questo è il mio primo documento HtML </body> </html>
Come usare software Convertitori (approccio proprietario) Es.: Microsoft Esterni e gratuiti Interni ai software di produzione Impaginatori (NON proprietario) Tutto e di più, ma attenzione alla guerra degli standard sui linguaggi: Sun Microsoft Liberi di scegliere ciò che vi piace!
La sezione HEAD Contiene: <title> … </title> Contiene: <meta descrittore> Usato analiticamente dai search engine Contiene: applet e script Esempi: <META NAME="Author" CONTENT="Sergio Capone"> <SCRIPT LANGUAGE="JavaScript"> … (istruzioni) </SCRIPT>
La sezione BODY Il vero e proprio documento Scrivere su singole righe: descrizione e contenuto del documento </BODY> E’ indifferente archiviare con estensione: .htm (in genere Windows/Machintosh) .html (in genere workstation UNIX/LINUX…)
Le sottosezioni: HEADING Gli heading sono usati nei documenti HtML per indicare le sottosezioni di un documento. Esistono sei differenti heading <H1></H1> … <H6></H6> Gli heading vanno usati con attenzione e mantenuti brevi e concisi. L'uso più comune di un heading è per la prima riga di un documento. <H1>sottotitolo del documento</H1>
I tag di paragrafo <P> ad ogni paragrafo </P> Uno dei tag usati più frequentemente in HtML è il marcatore di paragrafo, che serve a suddividere il testo in vari paragrafi: <P> ad ogni paragrafo </P> Qualsiasi indicazione di formato inserita in Blocco note: ritorno a capo, spazi extra o tabulatori, viene ignorata dai browser di Web. Purtroppo, nonostante la sua semplicità, il marcatore di paragrafo è uno dei tag più equivocati in HtML: <P> non è un ritorno a capo forzato !?!
I caratteri speciali Come si nota potrebbe nascere un problema fra tag e carattere di testo l’HtML lo risolve con il set di caratteri ISO-Latin-1 (ISO 8859) a 8 bit. Questi caratteri prendono il nome di entità di caratteri e/o entità di caratteri numerata, esempio: " corrisponde a “ (virgolette) ü corrisponde ü (umlaut) © corrisponde a © (copyright)
Tag fisici, per i caratteri Questi tag specificano un cambiamento d’aspetto del carattere: <B></B> grassetto <I></I> italico corsivo <TT></TT> carattere monospazio <U></U> sottolineato <BIG></BIG> e <SMALL></SMALL> <SUP></SUP> e <SUB></SUB>
Tag logici, per i caratteri… Questi tag informano il browser sui contenuti del testo più che forzare fisicamente l’aspetto del testo: <EM></EM> enfasi <STRONG></STRONG> in evidenza <CODE></CODE> codice programma <SAMP></SAMP> esempio di listato <KBD></KBD> digitato dall’utente <CITE></CITE> citazione nel documento
e … ancora sui tag logici <DFN></DFN> istanza di definizione <Q></Q> ancora la citazione <AU></AU> il nome dell’autore <PERSON></PERSON> nomi <ABBREV></ABBREV> abbreviazione <ACRONYM></ACRONIM> acronimo <INS></INS> testo aggiunto <DEL></DEL> testo cancellato
Paragrafo: il formato <P>paragrafo allineato a sinistra</P> <P align=RIGHT> allineato a destra <P align=CENTER> allineato al centro <P align=JUSTIFY> marginato <P NOWRAP> disabilita i ritorni a capo <P CLEAR=left>, <P CLEAR=right> oppure <P CLEAR=all> per gestire paragrafi che contengono anche oggetti diversi dal testo: grafici, immagini ecc.
Le interruzioni di riga Le poesie, le canzoni possono richiedere particolari impostazioni: Prima <P nowrap> per togliere la gestione automatica dei ritorno a capo <BR> ritorno a capo forzato <HR> filetto orizzontale <BLOCKQUOTE></BLOCKQUOTE> separa dal resto del documento uno o più paragrafi con un rientro a sinistra e a destra del testo (sezioni di testo).
Inserimento di parti di testo Questo testo viene impostato con carattere monospazio a larghezza costante esattamente come è stato scritto (sugg.: largh. max. sui 65 caratteri). <PRE> Il testo <I><B>pre</B>formattato</I> </PRE> All’interno del testo usare solo tag fisici!
Occhei! Cerchiamo di utilizzare quanto abbiamo appreso. ESERCIZIO Creare un documento HtML che contenga tutti gli esempi esplicativi dei tag presentati nella presentazione. Si consegna alla fine della corrente lezione . Okkappakappone©