Appunti sul Linguaggio HTML

annuncio pubblicitario
•L’HTML è un linguaggio per computer
comprensibile da parte dei browser Web
•Le pagine Web sono scritte in HTML
•L’HTML è necessario sul Web per formattare
testo e immagini
•L’HTML offre un meccanismo di
collegamento tra più pagine (collegamenti
ipertestuali)
• In HTML si usano dei codici speciali che indicano la
struttura e il formato del contenuto della pagina: i
cosiddetti tag che vengono riportati tra parentesi
angolari <>
• Il principale tag è il tag <html> che identifica la
pagina come documento HTML.
• Tutto il contenuto di un documento HTML deve
essere racchiuso all’interno di due tags:
 Un tag di apertura (<html>) all’inizio pagina
 Un tag di chiusura (</html>) alla fine della pagina
I tag <head> e <body>
 Descrivono le due sezioni principali di tutte le
pagine Web
 <head> o intestazione si trova subito dopo il
tag <html> e descrive le caratteristiche generali
della pagina, come il titolo
 <body> o corpo si colloca sotto <head> e
contiene il contenuto della pagina Web
 Tutti i tag devono avere anche il corrispondente
tag di chiusura (</head>, </body>)
Struttura essenziale della pagina Web
<html>
<head>
<title> <\title>
<\head>
<body>
</body>
</html>
Gli attributi dei tag
 Un attributo è un opzione personalizzabile per
un tag (descrive le caratteristiche del tag)
 Esempio
Tag <p>,</p> è il tag che permette
l’inserimento di un paragrafo di testo: un suo
attributo è align che consente di collocare un
paragrafo dove si vuole
<p align=“left”> ……</p> allinea il paragrafo a
sinistra
Tag di Uso Comune
 <h1>….<h6> imposta la dimensione del testo
 <p></p> denota un paragrafo
 <b></b> trasforma il testo in grassetto
 <i></i> trasforma il testo in corsivo
 <img> inserisce un immagine
 <a></a> stabilisce un collegamento ipertestuale
 <ul></ul> denota un elenco puntato non ordinato
 <ol></ol> denota un elenco numerato
 <li></li> identifica un elemento all’interno di
un elenco
Scegliere il colore della pagina Web e del testo
 Il tag <body> ha l’attributo bgcolor che
permette di scegliere lo sfondo e il colore del
testo della pagina Web:
 Esempio
<body bgcolor=“green” text=“yellow”
creerà una pagina web con sfondo verde e testo
in giallo
Inserimento di un immagine
 Si utilizza il tag <img>
 Le immagini devono essere caricate sul Web
 Si utilizza l’attributo src per identificare il file che
contiene l’immagine da visualizzare
 Esempio
<img src= http://www.velaclub.com/nave.jpg
 Le immagini devono essere salvate in formato
.jpeg o .jpg
Collegamenti ipertestuali
 Un collegamento ipertestuale è una connessione
tra un elemento HTML e un’altra pagina web, un
immagine esterna o un indirizzo e-mail
 Il testo dei collegamenti ipertestuali di solito
appare in un colore diverso e sottolineato in
modo da risultare facile da distinguere dal testo
normale
Il tag <a> (“anchor”)
 Questo tag consente di creare collegamenti a testo e
immagini
 Collegamento a pagine Web:
1) collegamento con URL relativo, non viene
specificato nessun percorso per la pagina Web di
destinazione (il file collegato deve risiedere nella
stessa cartella della pagina che effettua il
riferimento;
2) collegamento con URL assoluto, è un
collegamento con un indirizzo web preciso.
Struttura del tag <a>
 Consiste di due elementi: il nome del contenuto
HTML collegato e una risorsa di destinazione
 Il contenuto HTML collegato è racchiuso all’interno
dei tag <a>,</a>.
 La risorsa di destinazione del collegamento viene
specificato con l’attributo href e consiste di un URL
che identifica la risorsa
Esempio con URL relativo
 Collegamento con URL relativo
<p>
Per avere maggiori
<a href=“info.html">informazioni:</a>
</p>
La parola informazioni è il testo di collegamento
che si collega alla pagina Web info.html
Esempio con URL assoluto
 Collegamento con URL assoluto:
<a href="http://www.bavisela.it/viewpage.php">
La Bavisela</a>
La parola La bavisela è il testo di collegamento che si
collega al sito web qui sopra specificato
Esempio in linguaggio HTML
Scarica