Scaricare la presentazione
La presentazione è in caricamento. Aspetta per favore
1
HTML HyperText Markup Language Linguaggio per marcare un’Ipertesto
Corso di Webmaster HTML HyperText Markup Language Linguaggio per marcare un’Ipertesto Prof. Molteni Jonathan
2
.HTM o .HTML e le pagine Web
HTML linguaggio interpretato: il codice sorgente sempre leggibile e modificabile interpretato “al volo”, volta per volta, dal 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 file il browser Web riceve la pagina HTML, legge i riferimenti, chiede e riceve i file aggiuntivi, infine visualizza il tutto marcatori, tag, inseriti nel testo, per indicare al browser Web come deve impaginare e visualizzate la pagina Web 2
4
La mia prima pagina 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 testo Salvate il file (con estensione .html o .htm) Aprite il file con un browser Web
5
La sintassi dei tag Quasi tutti i tag sono composti da un tag di apertura e da 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>
6
Head Nell’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;
7
Body Il 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”>
8
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 il mouse) 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”>
9
Esempio <html> </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>
10
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>
11
Elenchi I 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>
12
Le tabelle Il 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)
13
I link Servono per creare connessioni navigabili
Link interni alla stessa pagina Link 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 due Ancora: <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
14
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%">
15
Caratteri speciali e commenti
Per inserire caratteri che non si trovano sulla tastiera, per es. ¥, Ç, Ø, .,… la sintassi è: &nome_carattere; < < > > ¥ ¥ e tanti, tanti altri… Per inserire commenti: <!– questo è un commento -->
16
Cascading Style Sheets
Formattazioni logica e fisica, separate Uso due file: File HTML contiene la formattazione logica File 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
18
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 class="headingsprof"> Prof. Jonathan Molteni </body> </html>
19
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-size: 14px; .headingsprof{ color: #00ff00; font-weight: bold; font-size: 14px; line-height: 19px;
20
DOCUMENTI SENZA CORPO: I FRAME
Pag 55 Pag 70 tag
Presentazioni simili
