Lezione HTML

CORSO BASE

•Il Browser

•LO Standard HTML

•I TAG

•Annidamento e Identizione

•I commenti

•Case unsensitive

•Struttura pagina-DOCTYPE

•HEAD

•BODY

•Ipertesti•Immagini•Suoni•Tabelle•Form

Maria A.R. Consoli Corso HTML

BY, NC, SA Attribuzione - Non commerciale - Condividi allo

stesso modo : Commons Deed | Legal Code)

Maria A.R. Consoli Corso

HTML

2

L'HTML è il linguaggio con cui potete indicare come i vari elementi vanno disposti in una pagina Web.

Un documento html non è nient'altro infatti che un file di testo con delle indicazioni sul colore delle scritte, sulla posizione delle immagini all'interno della pagina, su come far scorrere il testo, e altre cose di questo genere.

Maria A.R. Consoli Corso

HTML

3

Il Browser è il programma che usate quando navigate nel Web.

scarica i vari files che si trovano su un computer remoto (il server)

legge i documenti scritti in html

visualizza la pagina

Internet Explorer

Netscape Navigator

Mozilla (open source)

Opera


4

CACHE: cartella in cui vengono memorizzati i files scaricati dal web .Internet Explorer visualizza così il percorso della cacheStrumenti > Opzioni Internet > Generale > Impostazioni > Visualizza file

rendering della pagina: visualizzazione di un file html da parte del browser.

Motore di rendering: sezione del browser che si occupa di mostrare sul video la pagina.

HTML:acronimo di Hypertext Markup Language ("Linguaggio di contrassegno per gli Ipertesti")

W3C: (World Wide Web Consortium (http://www.w3.org/)) organismo che si occupa di standardizzare la sintassi del linguaggio HTML

Maria A.R. ConsoliCorso HTML

5

Il W3C ha rilasciato diverse versioni di questo linguaggio (HTML 2.0, HTML 3.2, HTML 4.0); l'HTML si è evoluto in XHTML.

l'HTML verrà utilizzato ancora per diversi anni come linguaggio principe delle pagine web.Alcuni concetti dell'XHTML richiedono già una certa comprensione dei problemi che si acquisisce solo con l'esperienza.L'HTML è più immediato e consente di incominciare subito a produrre documenti web;Chi conosce l'XHTML non può non conoscere l'HTML. La conoscenza dell'HTML è infatti il prerequisito essenziale di ogni webmaster. Le differenze tra i due linguaggi non sono così marcate e passare dall'uno all'altro non dovrebbe richiedere molta fatica.

Maria A.R. ConsoliCorso HTML

6

uno o più browserun editor testuale per scrivere il codice HTML

CREARE IL FILE1. Aprite in editor testuale, per

esempio “Blocco note”;2. Scrivere il codice di una pagina;3. Salvare con l’estensione "html",

ad esempio miaPagina.html;4. Chiudete l’editor5. Troverete il file con l’icona del

browser e si aprirà in automatico cliccandoci su due volte.

MODIFICARE IL FILE1. utilizzate i comandi Visualizza

> HTML,2. cambiate il codice,3. salvate,4. utilizzate il pulsante "aggiorna"

del browser5. visualizzare le modifiche.

Maria A.R.ConsoliCorso HTML

7

Questo avviene perché l'estensione non è .html, ma .html.txt

Per visualizzare l'estensione del file in sistemi Windows andate in una cartella e quindi:

Strumenti > Opzioni cartella > Visualizzazione

E poi togliere la spunta da: "Nascondi le estensioni dei file per i tipi di file conosciuti"

infine premere il pulsante:

"Come cartella corrente”


8

Questo succede perché la pagina visualizzata è sempre quella vecchia memorizzata nella cache.

Ricordatevi di impostare la cache del vostro browser in modo che il file html venga ricaricato ogni volta che richiamate la pagina. In Internet Explorer:

Strumenti > Opzioni Internet > Generale > Impostazioni >Ricerca versioni più recenti delle pagine memorizzate: all'apertura della pagina

9

Hanno il compito di visualizzare le diverse parti di una pagina web.Hanno differenti nomi a seconda della loro funzione.

I tag vanno inseriti tra parentesi uncinate (<TAG>)

la chiusura del tag viene indicata con una "/" (Quindi: </TAG>).

Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma:

<TAG attributi> testo </TAG>

la struttura di un attributo è: attributo="valore"

Quindi in definita la struttura di un tag sarà:

<TAG attributo1="valore1" attributo2="valore2"> testo </TAG>

Maria A.R.Consoli Corso HTML

10

Alcuni particolari tag non hanno contenuto - perché ad esempio indicano la posizione di alcuni elementi (come il tag delle immagini) -, conseguentemente questi tag non hanno neanche chiusura.

La loro forma sarà dunque:<TAG attributi>

Ecco un esempio di immagine:

<IMG widht="20" height="20" src="miaImmagine.gif" alt="alt">

come si vede il tag non viene chiuso. Questo tipo di tag viene detto "empty", cioè "vuoto".

11

L'annidamento ci permette di attribuire formattazioni successive al testo che stiamo inserendo.

esempio:<TAG1 attributi> contenuto 1 <TAG2> contenuto 2 </TAG2></TAG1>

Apertura e chiusura del tag si trovano allo stesso livello, mentre il contenuto viene spostato verso destra di un tab: Questa procedura si chiama indentazione, e grazie ad essa il codice HTML risulta più leggibile

esempio:

 testo 1 testo 2

12

indicazioni significative per il webmaster, ma invisibili al browser.

Inserendo i commenti in punti specifici del documento ci permette di mantenere l'orientamento anche in file molto complessi e lunghi.

Sintassi

esempio:

13

L'HTML è "case unsensitive”

Questo significa che è del tutto indifferente se scrivere i tag in maiuscolo o in minuscolo.

 e vengono letti allo stesso modo dal browser.

Per aumentare la leggibilità del codice è buona norma scrivere in maiuscolo il nome del tag (es: ) e in minuscolo gli attributi (es: align="right").

Quindi:

L'XHTML è "case sensitive"per abituarsi già al linguaggio che verrà è consigliabile scrivere tutto in minuscolo.

Maiuscolo e minuscolo, in ogni caso non costituiscono errore.

14

Una apagina HTML è suddivisa in tre sezioni:

Specifiche Inizio codice Testata Fine testata Corpo Fine corpo Fine codice

esempio:

SPECIFICHE<html> <!– Inizio codice --> <head>  Qui il nostro contenuto </head> <!– Fine testata--> <body>  Qui il nostro contenuto </body> <!– Fine corpo --> </html> <!– Fine codice -->

15

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">specifica il tipo di documento. E’ la prima riga da inserire.

HTML: il tipo di linguaggio utilizzato è l'HTML

PUBLIC: il documento è pubblico

W3C: il documento fa riferimento alle specifiche rilasciate dal W3C

DTD HTML 4.01 Transitional: il documento fa riferimento a una DTD ("Document Type Definition" cioè "Definizione del tipo di documento");la versione di HTML supportata è la 4.01 "transitional"

IT: la lingua con cui è scritta la DTD è l‘italiano (EN: la lingua con cui è scritta la DTD è l'inglese)

16

Contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato. Questo è il luogo dove scriverei meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, fogli di stile

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese).

<title>Nome del sito</title>Il title è il titolo della pagina e compare in alto sulla barra del browser.

<base href=“indirizzo url ">Il percorso assoluto a cui fare riferimento per trovare tutti i files a cui si fa riferimento.

<meta name="keywords" content=“parole da inserire nei motori di ricerca"> indica alcuni contenuti relativi al sito stesso. Le keywords compaiono separate da virgola, da punto e virgola, oppure senza alcun segno di interpunzione.

Esempio


17

SfondoMarginiLinguaColori del testo e dei linkTitoliBlocchi di testoAllineamentoAndare a capoStileFont, Colore, dimensioneElenchi

Qui è racchiuso il contenuto vero e proprio del documentoIl contenuto della pagina verrà formattato a seconda dei tag utilizzati:

18

Imposta lo sfondo con un colore

Sintassi: <body bgcolor=“colore">

Bgcolor =background color

Colore= uno dei colori indicati nella tabella

colore parola chiave

notazione esadecimale

arancione orange #FFA500

blu blue #0000FF

bianco white #FFFFFF

giallo yellow #FFFF00

grigio gray #808080

marrone brown #A52A2A

nero black #000000

rosso red #FF0000

verde green #008000

viola violet #EE82EE

NOTA BENE

Il numero di colori che l’utente ha a disposizione dipende dalla scheda video. Poiché non c’è modo di sapere quale scheda video abbia l’utente, i webdesigner fanno riferimento alla "palette sicura" dei 256 colori (palette web safe).

Esempio1

19

Imposta lo sfondo con una immagine

Sintassi: <body background=“IMMAGINE">

ESEMPIO

Se l’immagine “imgsfondo.gif” si trova nella stessa cartella della nostra pagina

<body background="imgSfondo.gif">

Se la sua posizione è diversa indicare il percorso assoluto<body background=“www.itcdefelice.it/immages/imgSfondo.gif">

Se nella <HEAD> abbiamo dichiarato il tag “base”<body background=“immages/imgSfondo.gif">

NOTA BENE

L’immagine di sfondo verrà ripetuta in orizzontale e in verticale.

E’ possibile abbinare i due tag:

<body bgcolor="#0000ff" background="imgSfondo.gif">

Esempio2

20

Imposta i margini

Sintassi: <body rightmargin =“n” leftmargin=“n" topmargin=“n“ downmargin=“n”>

ESEMPIO

<body leftmargin=“2" topmargin=“3“ >

NOTA BENE

Il testo della pagina inizia al confine con il margine superiore, le eventuali immagini di sfondo inizieranno sempre dal bordo pagina.

Se si utilizza un logo è bene eliminare i margini

<body bgcolor="#0000ff" background="imgSfondo.gif">

Esempio3

21

Imposta la linguaspecifica ai motori di ricerca e al browser dell’utente quale lingua

stiamo utilizzando

Sintassi: <body lang=“sigla lingua">

ESEMPIO

<body lang="it">

NOTA BENE

Si tratta di un attributo che vi sarà utile soprattutto se vi capiterà di sviluppare dei siti multilingua

22

Impostare il colore del testo per tutta la pagina

Sintassi: <body text=“colore">

ESEMPIO

<body text="red"> oppure <body text="#ffffff">

NOTA BENE

Usate la tabella vista per il colore dello sfondo

Esempio4

23

Impostare il colore del link per tutta la pagina

Sintassi: <body link=“colore" alink=“colore" vlink=“colore">

link =collegamento a riposo (di default i link sono blu (#0000FF))

alink=collegamento attivo

vlink=collegamento visitato(di default i vlink sono (#800080).

ESEMPIO

<body link="red" alink=“brown" vlink="green">

NOTA BENE

Usate la tabella vista per il colore dello sfondo

Esempio5

24

Elemento di blocco

Sintassi: <hx>titolo </hx>

“h“=heading(titolo)

X=numero da 1 a 6 (grandezze del titolo). Si tratta dunque di un elemento di blocco

ESEMPIO

<h3>titolo 3 </h3>

NOTA BENE

Il tag <hx> risulta in grassetto e lascia una riga vuota prima e dopo di sé

Le dimensioni del carattere dipendono dall’impostazione utente

Esempio6

25

Elemento di blocco

Sintassi: paragrafo 

ESEMPIO

esempio di paragrafo 

NOTA BENE

Il tag lascia una riga vuota prima della sua apertura e dopo la sua chiusura.

Esempio7

26

Elemento di blocco

Sintassi: <div>testo</div

ESEMPIO

<div>Blocco di testo</div>

NOTA BENE

Il blocco di testo va a capo, ma - a differenza del paragrafo – non lascia spazi prima e dopo la sua apertura.

Esempio8

27

Elemento di blocco

Sintassi: contenitore

ESEMPIO

ESEMPIO DI SPAN

NOTA BENE

non va a capo

Esempio9

28

Elemento di blocco

Sintassi: testo

“Orientamento” =“left” oppure “right” oppure “justify”

ESEMPIO

testotestotesto

NOTA BENE

L’attributo "align" è disapprovato dal W3C

Esempio10

29

Sintassi: (a capo) oppure <hr attributi> (a capo con una linea)

attributi:noshade sfuma la linea

"size" l’altezza in pixel,

"width" larghezza in pixel

ESEMPIO

 

<hr noshade size="5" width="50%" >

Esempio11

30

STILI FISICI

definiscono graficamente lo stile del carattere

Esempio12

testo grassetto

testo corsivo

testo sottolineato

<strike>testo</strike> tagliato

testo apice

testo pedice

RENDERINGtestotestotesto

testo

testo

Testo

31

STILI LOGICI

forniscono informazioni sul ruolo svolto dal contenuto

SENZA RENDERING

<abbr>abbreviazione</<abbr> abbreviazione

<acronym>acronimo</acronym> acronimo

<code>codice</code> linguaggio di progr.

<q>citazione all’interno della frase</q> breve citazione

32

STILI LOGICI

forniscono informazioni sul ruolo svolto dal contenuto

Esempio13

CON RENDERING<address>indirizzo</address>

<blockquote>blocco di citazione</blockquote> citazione: rientrato a destra

<cite>citazione</cite> citazione: corsivo

<dfn>definizione</dfn> definizione: corsivo

enfasi enfasi: corsivo

<kbd>keyboard</kbd> digitazione: spaziatura fissa

<samp>esempio</samp> esempio: spaziatura fissa

rafforzamento con forza: grassetto

<var>variabile</var> una variabile: corsivo

33

testo in Arial testo in Arialtesto in Verdana testo in Verdana

Sintassi: testo

NOTA BENE

IL TAG è disapprovato dal W3C. Il "font" di default è il "Times".

Non è possibile far sì che l’utente visualizzi un testo in un carattere fantasioso scelto da noi. Allo stato attuale dell’arte l’utente che naviga in internet può visualizzare solo i caratteri che sono installati nel suo S.O.: in Windows si tratta dei caratteri presenti in: Pannello di controllo > Tipi di caratteri


34

Le famiglie di font

Verdana, Arial, Helvetica, sans-serif Verdana e caratteri simili

Arial, Helvetica, sans-serif Arial e caratteri simili

Times New Roman, Times, serif Times e caratteri simili

Courier New, Courier, mono Curier e caratteri simili

Georgia, Times New Roman, Times, serif Georgia e caratteri simili

Geneva, Arial, Helvetica, sans-serif Geneva e caratteri simili

35

ESEMPIOtesto blu 

Sintassi: testo 

NOTA BENE

Usate la tabella vista per il colore dello sfondo.

Questo tag viene utilizzato se si intende usare un colore diverso da quello stabilito con il tag <text>.

Di solito si utilizza in abbinamento col tag 

Esempio:

36

ESEMPIOtesto di grandezza 5 testo di grandezza 5

Sintassi: testo di grandezza n

n= misura del carattere da 1 a 7 oppure + o – n (relativamente a 3)

NOTA BENE

La dimensione del carattere di default nel browser Internet explorer è 3

La dimensione del carattere dipende dalle impostazioni del browser dell’utente .

Di solito si utilizza in abbinamento col tag 

Es.: 

Esempio14

37

•Elenchi ordinati

•Elenchi non ordinati

•Elenchi di definizioni

Sintassi

<elenco> <elemento>nome del primo elemento <elemento>nome del secondo elemento ……….

……

</elenco>

38

Elenchi ordinati

Sintassi

<ol> <li>nome del primo elemento <li>nome del secondo elemento ……….

……

</ol>

ol= order list

li=list item

Esempio

<ol> <li> primo elemento <li>secondo elemento <li>terzo elemento

</ol>

Testo fuori lista

39

Elenchi ordinati

Sintassi

<ol type=“attributo”> <li>nome del primo elemento <li>nome del secondo

</ol>

ol= order list

li=list item

Attributo:1=numeri arabi; a=alfabeto minuscolo; A=alfabeto maiuscolo;

i=romani minuscoli;

I=romani maiuscoli

Esempio

<ol type=“a”> <li> primo elemento <li>secondo elemento <li>terzo elemento

</ol>

Testo fuori lista

Esempio15

40

Elenchi non ordinati

Sintassi

<ul>type=“attributo”> <li>nome del primo elemento <li>nome del secondo

</ul>

ul= unorder list

li=list item

Attributo:disc=pallino pieno; circle=pallino vuoto;

square=quadrato pieno;

Esempio

<ul type=“circle”> <li> primo elemento <li>secondo elemento <li>terzo elemento

</ul>

Testo fuori lista

Esempio16

41

Elenchi di definizioni

Sintassi

<dl>> <attr>nome del primo elemento <attr>nome del secondo

</dl>

dl= definition list

Attributo: dt=senza rientro;

dd= con rientro;

Esempio<dl> <dd>nome del primo elemento <dd>nome del secondo</dl>

Esempio17

42

I link sono "il ponte" che consente di passare da un testo all’altro

Sono formati da:

•la risorsa verso cui il collegamento punta

•contenuto che "nasconde“ il collegamento (non importa se si tratta di testo, di immagine o di files)

Esempio18

Sintassi: <a href=“risorsa">contenuto</a>

ESEMPIO

<a href=“www.cataniaedintorni.it">notizie su Catania e non solo</a>

Nota bene

Per motivi di sicurezza non è possibile eseguire un file ".exe" direttamente dal web; l’utente dovrà sempre prima scaricarlo sul proprio PC.


43

Nota beneE’ opportuno dividere il sito in varie sezioni, in modo da avere tutti i documenti dello stesso tipo all’interno di un contesto omogeneo.Per creare collegamenti verso i documenti più reconditi, destreggiandoci tra le strutture più ramificateesistono due tecniche:indicare un percorso assolutoViene utilizzato per far riferimento ad un percorso certo(se si è già in possesso di un proprio sito)

http://www.itcdefelice.it/corsi/programmatori/materie.html

indicare un percorso relativo Viene utilizzato per far riferimento ad un percorso ancora da definire(se non si è già in possesso di un proprio sito) Esempio percorso relativo

44

Servono per muoversi rapidamente in una pagina che non entra in una schermata. Ad una àncora viene assegnato un nome con:

<a name=“nome ancora"> testo </a>

Alla hotword si definisce il link con:

<a href="#nome dell’ancora"> testo </a>

Per creare un indice interno alla pagina si procede dunque in due fasi distinte:creazione dell’ancora a cui puntare (<a name="mioNome">) creazione del collegamento all’ancora appena creata e riferimento attraverso il cancelletto (<a href="#mioNome">) È bene non confondere le due fasi.

o SEGNALIBRI

Esempio19

45

Nota beneL’attributo title è molto importante per descrivere l’elemento a cui fa riferimento

il link ed è anche utilissimo per migliorare la propria presenza nei motori di ricerca, che ne vanno a leggere il contenuto.

Esempio 20

Sintassi:<a title=“commento" href=URL" > testo</a>

L’attributo title è molto importante, e serve per descrivere l’elemento a cui fa riferimento il link.

46

ESEMPIO:

<head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>ISTITUTO TECNICO COMMERCIALE DE FELICE CATANIA</title> <base href="http://www.itcdefelice.it/miaCartella"> <meta name="keywords" content=“scuola, istituto, tecnico, superiore, commerciale, de felice, catania"> </head>

47

•Per far riferimento a un file che si trovi all’interno della stessa directory basta linkare il nome del file

<a href="paginaDaLinkare.html">pagina</a>

•Per far riferimento a un file contenuto in una cartella di livello inferiore alla posizione corrente, nominare la cartella seguita dallo "slash", e poi il nome del file.<a href="prima/interna/interna.html">pagina interna</a>

•Per tornare su di un livello, è sufficiente utilizzare la notazione

<a href="../../index.html">pagina interna</a>

Lezione HTML

Education

Transcript of Lezione HTML