|
Wiki
Tools
Categorie
Help
edit SideBar
|
|
Utenti.HTMLStruttura History
Hide minor edits - Show changes to output
Changed line 41 from:
!!!Lavorare con l'editor di testo to:
Changed line 70 from:
Dopo aver salvato la pagina, è possibile aprirla con il browser per verificarne l'aspetto, facendo doppio clic sull'icona del file. Se invece si desidera riaprirla con l'editor, basta selezionare il file col tasto destro, evidenziare la voce [@Apri con@] dal menu contestuale, e quindi cliccare sull'icona dell'editor testuale. to:
Dopo aver salvato la pagina, è possibile aprirla con il browser per verificarne l'aspetto facendo doppio clic sull'icona del file. Se invece si desidera riaprirla con l'editor, basta selezionare il file col tasto destro, evidenziare la voce [@Apri con@] dal menu contestuale, e quindi cliccare sull'icona dell'editor testuale.
Changed line 72 from:
[[Lezione Precedente: Nozioni di Base->HTMLNozioni]] | [[Prossima Lezione: Testi e ipertesti->HTMLStruttura]] to:
[[Lezione Precedente: Nozioni di Base->HTMLNozioni]] | [[Prossima Lezione: Testi e ipertesti->HTMLTestiIpertesti]]
Added lines 1-74:
(:title Corso rapido HTML: Struttura:)
%titolo%''':: Corso rapido HTML: Struttura ::'''
!!!Struttura di un file HTML
Il codice sorgente di una pagina web si estende tra i due tag di apertura e chiusura '''<HTML>''' e '''</HTML>''', che segnalano al browser di considerare il testo che delimitano come istruzioni HTML e non come testo. Il codice si divide ora in due sezioni:
* l' '''intestazione''', compresa tra i tag '''<HEAD>''' e '''</HEAD>'''. Contiene una serie di informazioni che non vengono visualizzate nella finestra di navigazione, ma che descrivono alcune caratteristiche della pagina e quali script o fogli di stile devono essere importati. Tra le caratteristiche ci sono ovviamente il titolo, l'autore, la descrizione e i meta tag (o parole chiave), molto utili per l'indicizzazione nei motori di ricerca;
* il '''corpo''' della pagina, contenuto tra i tag '''<BODY>''' e '''</BODY>''', dove viene scritto ciò che verrà effettivamente visualizzato nel browser: testo, collegamenti a immagini o indirizzi web, e via dicendo.
Riassumendo, avremo questa struttura:
>>color=#4169E1<<
'''<HTML>'''
->'''<HEAD>'''
->'''</HEAD>'''
->'''<BODY>'''
-->''Corpo della pagina.''
->'''</BODY>'''
'''</HTML>'''
>><<
Da notare come l'annidamento dei tag '''<HEAD>''' e '''<BODY>''' sia evidenziato con un diverso allineamento rispetto al tag in cui è contenuto ('''<HTML>'''). Questo sistema si chiama ''indentazione'' e rende i sorgenti molto più leggibili a noi umani (al browser non gliene frega niente: per lui le istruzioni potrebbero stare tutte sulla stessa riga). Altra segnalazione: l'HTML non fa distinzione tra caratteri maiuscoli o minuscoli, quindi per lui ''<BODY>'' ''<body>'' o ''<BOdy>'' sono la stessa identica cosa. Per convenzione si tende a scriverli maiuscoli per renderli più evidenti nel codice.
!!!Intestazione
Dei possibili tag che si possono includere nell'intestazione di un file HTML, riportiamo solo '''<TITLE>''', con cui si definisce il titolo della pagina web, visualizzato nella ''barra del titolo'' della finestra del browser. Questo tag richiede un'istruzione di apertura e una di chiusura, per cui la sintassi corretta è:\\
%color=#4169E1%'''<TITLE> Titolo_della_pagina </TITLE>'''
!!!Corpo della pagina
Il corpo principale del documento HTML è la sezione in cui vengono specificati tutti i contenuti da visualizzare nel browser: testi, immagini, collegamenti ipertestuali e via dicendo.
E' possibile indicare alcune caratteristiche generali della pagina scrivendole direttamente come attributo del tag '''<BODY>''' iniziale. Se ad esempio volessimo impostare un colore di sfondo alla pagina, potremo utilizzare l'attributo ''BGCOLOR'', secondo la seguente sintassi:\\
%color=#4169E1%'''<BODY BGCOLOR="#codice_del_colore">'''%%\\
, dove il codice_del_colore andrà scritto utilizzando la notazione esadecimale. Per esempio, il codice ''FFFFFF'' equivale al bianco, il codice ''000000'' al nero, il codice ''FF0000'' al rosso e così via. Per impostare uno sfondo rosso alla pagina dovrò perciò scrivere: \\
%color=#4169E1%'''<BODY BGCOLOR="#FF0000"> '''%%
Per conoscere i valori esadecimali dei vari colori, potete andare su %newwin%[[questa pagina->http://it.wikipedia.org/wiki/Lista_dei_colori]].
!!!Lavorare con l'editor di testo
Forza, creiamo una benedetta pagina HTML! Aprite un qualsiasi editor di testi - perfino ''Blocco Note'' di Windows può andar bene! - e riscrivete il codice in blu riportato qui sotto:
>>color=#4169E1<<
'''<HTML>'''
->'''<HEAD>'''
-->'''<TITLE> Red Passion </TITLE>'''
->'''</HEAD>'''
->'''<BODY BGCOLOR=”#FF0000”>'''
-->'''Una pagina molto bella e decisamente utile.'''
->'''</BODY>'''
'''</HTML>'''
>><<
Bastano queste poche righe perché la pagina sia formalmente pronta. \\
Ora salvatela, seguendo questa procedura:
# aprite il menu [@File@] e fate clic su [@Salva con Nome@];
# nella finestra di salvataggio, scegliete la posizione in cui salvare il file;
# nella stessa finestra, assegnategli un nome scrivendolo nella casella [@Nome file@]. E' necessario specificare (scrivendola per esteso) l'estensione '''.html''' o '''.htm''';
# fate clic sul pulsante [@Salva@] e il gioco è fatto.
Alcune considerazioni sul salvataggio:
* la prima pagina di un sito (la ''home page'') viene di solito chiamata ''index.html'' o ''home.html'', così da poter essere facilmente riconosciuta. Inoltre, proprio grazie al suo nome standard, potrà essere omessa dall'indirizzo; ad esempio scrivendo [@http://www.cazzomene.it/index.html@] o [@http://www.cazzomene.it@] si aprirà la stessa fantastica pagina;
* quando si assegna un nome al file occorre fare attenzione alla differenza tra maiuscole e minuscole;
* bisogna fare attenzione alla posizione in cui si salvano le pagine HTML e i file di immagini: la posizione dei file è di fondamentale importanza nel momento in cui si impostano i rispettivi ''collegamenti ipertestuali'' (i link).
Dopo aver salvato la pagina, è possibile aprirla con il browser per verificarne l'aspetto, facendo doppio clic sull'icona del file. Se invece si desidera riaprirla con l'editor, basta selezionare il file col tasto destro, evidenziare la voce [@Apri con@] dal menu contestuale, e quindi cliccare sull'icona dell'editor testuale.
----
[[Lezione Precedente: Nozioni di Base->HTMLNozioni]] | [[Prossima Lezione: Testi e ipertesti->HTMLStruttura]]
----
[[!Guide]]
|
|
