Creazione di pagine per Internet Brevi note a cura di Emanuele Lana elana@alfainfo.it
Argomenti definizione di HTML i tag i collegamenti ipertestuali gli elenchi puntati e numerati le immagini
Che cos'è l'HTML HTML: Hyper Text Markup Language Un file HTML è un file di testo che contiene dei tag I tag indicano al web browser come visualizzare la pagina Un file HTML deve avere l'estensione htm o html Un file HTML può essere creato usando un semplice editor di testo, per es. il Blocco note
La mia prima pagina HTML <head> <title>Classe Prima B</title> </head> <body> <b>Programma dell'anno</b> Italiano:... </body> </html>
Funzionamento della pagina Il primo tag è <html>. Segnala al browser che inizia un documento HTML. L'ultimo tag della pagina è </html>. Segnala al browser che finisce un documento HTML. Il testo contenuto tra il tag <head> e il tag </head> è l'informazione dell'intestazione (header). Questo testo non è visualizzato nella pagina del browser. Il testo tra i tag <title> e </title> identifica il titolo del documento. Esso viene visualizzato nel titolo della finestra del browser. Il testo compreso tra i tag <body> e </body> è il corpo principale della pagina e sarà visualizzato dal browser. Il testo tra il tag <b> e il tag </b> sarà visualizzato in grassetto.
I tag sono usati per marcare gli elementi HTML sono racchiusi tra i caratteri < e > solitamente funzionano in coppia, come i tag <b> e </b> il primo tag di una coppia è definito tag di apertura, il secondo è il tag di chiusura i tag possono essere scritti maiuscoli o minuscoli: <b> ha lo stesso significato di <B>
Gli elementi Es. di elemento: <b>Programma dell'anno</b> L'elemento: comincia con un tag di apertura: <b> finisce con un tag di chiusura: </b> il contenuto è: Programma dell'anno lo scopo del tag b è indicare al browser che quel testo dev'essere visualizzato in grassetto b sta per bold
Gli attributi dei tag forniscono ulteriori informazioni all'elemento il tag <body> definisce la parte di testo che rappresenta il contenuto della pagina l'attributo bgcolor imposta il colore di sfondo di tutta la pagina: <body bgcolor="green"> colore verde per tutta la pagina bg sta per background
I principali tag Livelli di titolo: da <h1> a <h6>, dove <h1> è il più importante, <h6> il meno importante. <h1>Divina commedia</h1> <h2>Inferno</h2> <h3>Canto I</h3> h sta per heading Paragrafi: <p>...</p> Interruzioni di riga: <br> NB: Il tag <br> non ha tag di chiusura Commenti: <!-- Modificato da EL 20-09-2006 -->
Collegamenti ipertestuali consentono la navigazione tra le pagine possono essere associati a: testo, solitamente sottolineato immagini si riconoscono perché, posizionandosi sopra, il puntatore del mouse da freccia diventa una "manina" cliccando sul testo o sull'immagine, la finestra del browser visualizzerà un nuovo contenuto
Il tag <a> viene usato per creare un collegamento a un'altra risorsa (pagina HTML, file di Word, file AVI, file PDF ecc.) con l'attributo href indica la posizione del file <a href="esami.html">Esami</a> con l'attributo target indica in quale finestra del browser aprire la destinazione <a href="esami.html" target="_blank">Esami</a> viene aperta una nuova finestra del browser in cui sarà visualizzato il contenuto della pagina esami.html
Elenchi numerati vengono definiti ordinati (ordered list): <ol> leggere il materiale preparare una sintesi in Word inviare l'allegato al docente <ol> <li>leggere il materiale</li> <li>preparare una sintesi in Word</li> </ol> li sta per list item
Elenchi puntati vengono definiti non ordinati (unordered list): latino italiano geografia <ul> <li>latino</li> <li>italiano</li> </ul> li sta per list item
Le immagini una pagina HTML può visualizzare delle immagini le immagini sono salvate in file diversi da quello HTML se una pagina HTML visualizza il logo della scuola, in realtà si tratta di due file: uno contiene il vero e proprio contenuto testuale, l'altro è l'immagine del logo
Il tag <img> le immagini sono definite dal tag img NB il tag img non ha tag di chiusura. per visualizzare l'immagine il tag img ha bisogno dell'attributo src <img src="img/logo.jpg"> L'indirizzo dell'attributo src indica la posizione in cui si trova l'immagine, in questo caso nella cartella che ha nome img. l'attributo alt visualizza una descrizione quando si passa sopra l'immagine con il mouse <img src="img/logo.jpg" alt="Logo della scuola"> src sta per search
Riferimenti Il materiale è stato liberamente adattato da: http://www.w3schools.com Tra i tanti siti di riferimento per guide, software ecc.: http://www.html.it