Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni...
-
Upload
eleonora-manzo -
Category
Documents
-
view
227 -
download
0
Transcript of Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni...
![Page 1: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/1.jpg)
Corso di Webmaster
HTMLHyperText Markup Language
Linguaggio per marcare un’Ipertesto
Prof. Molteni Jonathan
![Page 2: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/2.jpg)
.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
![Page 3: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/3.jpg)
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
![Page 4: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/4.jpg)
![Page 5: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/5.jpg)
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
![Page 6: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/6.jpg)
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>
![Page 7: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/7.jpg)
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;
![Page 8: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/8.jpg)
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”>
![Page 9: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/9.jpg)
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”>
![Page 10: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/10.jpg)
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>
![Page 11: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/11.jpg)
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>
![Page 12: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/12.jpg)
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>
![Page 13: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/13.jpg)
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)
![Page 14: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/14.jpg)
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
![Page 15: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/15.jpg)
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%">
![Page 16: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/16.jpg)
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 -->
![Page 17: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/17.jpg)
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
![Page 18: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/18.jpg)
![Page 19: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/19.jpg)
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>
![Page 20: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/20.jpg)
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
}
![Page 21: Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare unIpertesto Prof. Molteni Jonathan.](https://reader034.fdocuments.net/reader034/viewer/2022052618/5542eb5b497959361e8c9536/html5/thumbnails/21.jpg)
DOCUMENTI SENZA CORPO: I FRAMEPag 55Pag 70 tag
http://www.w3.org/MarkUp/Guide/Style.html
http://www.w3.org/MarkUp/Guide/Advanced.html