Lezione1: La mia prima pagina in HTML

Transcript

Lezione1: La mia prima pagina in HTML
Lezione1: La mia prima pagina in HTML
Le istruzioni o comandi dell'HTML, chiamati TAG, si devono scrivere (sintassi
del comando) nel seguente modo <nomeTag>informazione da rappresentare
</nomeTag>, oppure <nomeTag attributo=“valore”>informazione da
rappresentare </nomeTag >.
Il nome del TAG generalmente è un acronimo significativo (nella lingua
inglese) del comando associato:
ad esempio:
<u>Ciao Mondo</u>
il nome del tag <u> è l'iniziale di underline, (sottolineato) e permette di
sottolineare un testo. Nel nostro caso il browser rappresenterà:
Ciao Mondo
<b>Ciao Mondo</b>
il nome del tag <b> è l'iniziale di bold, (grassetto) e permette di rappresentare
il testo in grassetto. Nel nostro caso il browser rappresenterà:
Ciao Mondo
Una pagina HTML è costituita da due parti, l'intestazione e il corpo
<html>
<head>
intestazione della pagina contenente descrizioni generali
</head>
<body>
corpo della pagina con il contenuto vero e proprio
</body>
</html>
In dettaglio, il tag <head> contiene informazioni molto importanti, per la
maggior parte invisibili all'utente, tranne il titolo del documento che verrà
visualizzato come titolo nella finestra del browser
<head>
<title>
La mia prima pagina HTML
</title>
</head>
Nota: poiché il titolo viene usato anche per costruire gli indici automatici usati
dai motori di ricerca è importante che esso sia significativo
Il tag <body> contiene tutto quello che verrà visualizzato secondo le direttive
di formattazione.
<body>
corpo della pagina
</body>
Il tag <body> ha degli attributi importanti che permettono di stabilire l'aspetto
grafico generale della pagina. Ad esempio impostare i colori.
<body
bgcolor="colore sfondo"
text="colore testo"
background="pathname del file con immagine per lo sfondo"
link="colore link da visitare"
alink="colore link attivo“
vlink="colore link visitati">
Il colore può essere specificato con
• nomi del colore: red, green, yellow, ...
• terna di valori numerici in codice esadecimale con codifica: Rosso Verde
Blu (RGB)
es. #000000 → nero
es. #FFFFFF → bianco
es. #FF0000 → rosso
00 = valore minimo per ciascun colore
FF= valore massimo per ciascun colore
(si ricorda che il numero FF in esadecimale corrisponde al 255 in decimale e
che con la codifica RBG si possono impostare quindi 256*256*256 =
16777216 colori diversi)
Per vedere i nomi dei colori validi in HTML, visita ad esempio il sito
http://colorihtml.it/
Se non si specifica alcun attributo per il body, di default si ha: sfondo bianco,
testo nero, link da visitare blu, link attivi rossi, link visitati viola.
Per impostare una immagine di sfondo:
<body background="pathname del file con immagine per lo sfondo">
Il pathname, ovvero il nome dell'immagine da applicare allo sfondo con il
relativo percorso su dove trovarla, può essere scritto ad esempio nei modi
seguenti:
<body background="sfondo.jpg“> → è nella stessa cartella della pagina html
<body background=“img/sfondo.jpg“> → è in una sottocartella img contenuta
nella cartella che contiene la pagina html
<body background=“../img/sfondo.jpg“> → è in una cartella img che sta allo
stesso livello della cartella che contiene la pagina html
Esercitazione 1: realizzare, utilizzando un editor di testi, una pagina html con
le seguenti caratteristiche:
• nome: pagina1.html
• titolo: La mia prima pagina html
• colore di sfondo: giallo
• colore del testo: blu
• testo da visualizzare: “Hello World” in grassetto
Esercitazione 2: realizzare, utilizzando un editor di testi, una pagina html con
le seguenti caratteristiche:
• nome: pagina2.html
• titolo: La mia seconda pagina html
• immagine di sfondo: immagine a scelta libera in formato .jpg
• colore del testo: rosso
• testo da visualizzare: “Hello World” sottolineato