Post on 02-May-2015
Corso di Webmaster
HTMLHyperText Markup Language
Linguaggio per marcare un’Ipertesto
Prof. Molteni Jonathan
.HTM o .HTML e le pagine Web
Il linguaggio HTML è interpretato: il codice sorgente resta sempre leggibile e modificabile e viene interpretato “al volo”, volta per volta, dal programma utilizzato per leggere il file (browser)
linguaggio di impaginazione detto “a marcatura”Pagina Web: pagina HTML + ulteriori file
(immagini, suoni,video ecc.)La pagina HTML contiene i riferimenti a questi fileIl browser Web riceve la pagina HTML, legge i
riferimenti, chiede e riceve i file aggiuntivi, infine visualizza il tutto
tagSi usano particolari marcatori, tag, inseriti
nel testo, per indicare al browser Web come deve impaginare e visualizzate la pagina Web nel suo insieme
Il browser Web interpreta i tag, formatta la pagina Web e ne genera la rappresentazione grafica: il rendering
La mia prima pagina HTML<html>
<head><title>Questo è un esempio</title>
</head><body>Ciao! Questo èun esempio di pagina HTML</body>
</html>Scrivete il file con un editor di testoSalvate il file (con estensione .html o .htm)Aprite il file con un browser Web
La sintassi dei tagQuasi tutti i tag sono composti da un tag di
apertura eda un tag di chiusura:
<nome_tag>testo sul quale il tag agisce</nome_tag>Es.: <title>Questo è un esempio</title>
Alcuni tag non hanno la corrispondente chiusura:<nome_tag>Es.: <br>
Per molti tag è possibile specificare degli attributi:<nome_tag nome_attributo="valore_attributo">Es.: <body bgcolor="red"> … </body>
HeadNell’intestazione del documento vengono
introdotti i tag che identificano il titolo del documento e altre informazioni facoltative circa la natura e il contenuto della pagina
<META>: mediante questo tag e i suoi attributi si possono specificare alcune caratteristiche della pagina, tra cui le parole chiave relative ai contenuti del testo utilizzate dai motori di ricerca per classificare il sito;
BodyIl corpo del documento ospita il contenuto
vero e proprio della pagina, quello che verrà visualizzato nella finestra del browser
Il tag <BODY> può essere utilizzato in forma semplice oppure se ne possono specificare attributi.<BODY BGCOLOR=”#008000”><BODY TEXT=”#FFFF80”>
Attributi del Body<BODY LINK=”#FFFF00”>: i link
appaiono di colore giallo;<BODY ALINK=”#FF8000“>: i link attivi
(nel momento in cui li si seleziona con ilmouse) appaiono di colore arancione;<BODY VLINK=”#808080”>: i link già
visitati appaiono di colore grigio.<BODY BGCOLOR=”#008000”
TEXT=”#FFFF80” LINK=”#FFFF00”><BODY
BACKGROUND=”.../immagine.gif”>
Esempio<html>
<head><title>Questo è un esempio</title>
</head><body>
<h1>Titolo principale</h1><h2>Titolo secondario</h2><p>Testo all'interno <em>di un</em><strong>paragrafo</strong></p><p>Altro paragrafo</p>Testo al di fuori di un paragrafo<p>indirizzo: <address>Via Italia 34/5,Como</address></p>
</body></html>
STRUTTURA “A MATRIOSKA” I comandi sono contenuti l’uno dentro l’altro e ognuno va a
influenzare solo la porzione di testo racchiusa tra il rispettivo tag di apertura e quello di chiusura.
1. <I> = tutto quello che verrà scritto da qui in poi sarà in corsivo;2. <U>= tutto quello che verrà scritto da qui in poi sarà
sottolineato;3. <B>= tutto quello che verrà scritto da qui in poi sarà in
grassetto;
4. </B>= qui finisce ciò che dev’essere visualizzato in grassetto;5. </U>= qui finisce ciò che dev’essere visualizzato in
sottolineato;6. </I>= qui finisce ciò che dev’essere visualizzato in corsivo.
Es: Nel mezzo del <B><I>cammin</I></B> di nostra vita…Es: <I>Nel mezzo del <U>cammin di nostra
<B>vita</B></U></I>
ElenchiI seguenti tag servono per specificare vari
tipi di elenchi:Elenco puntato: <ul>
<ul type="square"><ul type="disc"><ul type="circle">
Elenco numerato: <ol><ol type="a"><ol type="A"><ol type="i"><ol type="I">
Ogni voce dell’elenco è racchiusa da <li>…</li>
Le tabelleIl testo (e in generale qualsiasi elemento
grafico)può essere formattato sotto forma di tabella:
Tabella: <table>Titolo: <th>Riga: <tr>Colonna: <td>
E’ possibile specificare alcuni attributi: spessore del bordo, distanza tra le celle, margine ll’interno delle celle (Vedi esempio: es04tabelle.html)
I linkServono per creare connessioni navigabili
Link interni alla stessa paginaLink tra pagine
Link: <a href="indirizzo">qualsiasi cosa</a> Facendo click su qualsiasi cosa, il browser Web apre la
pagina che si trova a indirizzo Indirizzo può essere una URL o un’ancora o una
combinazione delle dueAncora: <a name="nome">
Definisce una etichetta alla quale un link può puntare Di solito è usata per far spostare il browser Web in un
altro punto, all’interno della stessa pagina che contiene il link
Vedi esempio: link.html
Le immagini
Includere immagini:<img src="indirizzo e nomefile immagine">
Alcuni attributi permettono di modificare le dimensioni dell’immagine:<img src="a.gif" height="50" width="70"><img src="a.gif" height="50%“
width="5%">
Caratteri speciali e commentiPer inserire caratteri che non si trovano
sulla tastiera, per es. ¥, Ç, Ø, .,… la sintassi è: &nome_carattere;< <> >¥ ¥e tanti, tanti altri…
Per inserire commenti:<!– questo è un commento -->
Cascading Style SheetsFormattazioni logica e fisica, separateUso due file:
File HTML contiene la formattazione logicaFile CSS contiene la formattazione fisica:
indica al browser Web come visualizzare i tag logici
In questo modo è più facile cambiare la formattazione fisica (lo stile) di una pagina HTML
Esempio CSS: pagina html<html>
<head><title>Pagina con CSS</title><link rel="StyleSheet" href="stile.css"
type="text/css"></head><body>
<div class="headingscourse">I.S.I.S Paolo Carcano
</div><div class="headingsgest">
Corso di WebMaster</div><div class="headingsprof">
Prof. Jonathan Molteni</div>
</body></html>
Esempio CSS: file stile.css. .headingscourse{
color: #Red; font-style: normal;font-weight: bold; font-size: 18px; line-height: 24px;font-family: Verdana, Geneva, Arial, sans-serif;text-align: center
}
.headingsgest{color: #FF0099; font-style: normal;font-weight: bold; font-size: 14px; line-height: 24px;font-family: Verdana, Geneva, Arial, sans-serif;text-align: center
}
.headingsprof{color: #00ff00; font-style: normal;font-weight: bold; font-size: 14px; line-height: 19px;font-family: Verdana, Geneva, Arial, sans-serif;text-align: center
}
DOCUMENTI SENZA CORPO: I FRAMEPag 55Pag 70 tag
http://www.w3.org/MarkUp/Guide/Style.html
http://www.w3.org/MarkUp/Guide/Advanced.html