docBasi HTML part1
download 
Reclamo Transcript
Basi HTML part1
Reverse engineering
!! Vai
alla pagina: http://www.paroledautore.net/fiabe/
classiche/grimm/cappuccettorosso.htm
!! Scarica
il sorgente
!! Leggi e stampa il sorgente
!! Decifralo
Reverse engineering
<head>
<title>Parole d'Autore - Cappuccetto Rosso (versione dei Grimm) </title>
</head>
<body> …
<ul>
<li><a href="http://www.paroledautore.net/home.htm" title="Home">Home</a></li>
<li><a href="http://www.paroledautore.net/novelle”title=”Novelle">Novelle</a></li>
</ul>
…
<p>C'era una volta una bambina tanto carina e dolce …
<p><b>Cappuccetto Rosso</b> se ne tornò a casa
…
</body>
</html>
Reverse engineering
<head>
<title>Parole d'Autore - Cappuccetto Rosso (versione dei Grimm) </title>
</head>
<body> …
<ul>
<li><a href="http://www.paroledautore.net/home.htm" title="Home">Home</a></li>
<li><a href="http://www.paroledautore.net/novelle”title=”Novelle">Novelle</a></li>
</ul>
…
<p>C'era una volta una bambina tanto carina e dolce …
<p><b>Cappuccetto Rosso</b> se ne tornò a casa
…
</body>
</html>
Notare la struttura annidata
HTML?
!! HyperTest
Markup Language
!! Linguaggio di specifica che usa i
marcatori:
<nomeMarcatore>
elemento
</nomeMarcatore>
e che permette di visualizzare Ipertesti.
TAG
Definizione
Si definisce TAG generalmente una parola
(elemento) racchiusa tra parentesi angolate
<>
es. <caramella>, <html>, <body> ….
!!
In HTML il testo racchiuso da < > è già definito (lo
vedremo man mano), mentre in altri linguaggi di Markup
il testo può essere definito dall’utente (XML).
WEB BROWSER
!!
!!
Un browser (o navigatore) legge documenti HTML
e li visualizza come pagine web
Il browser non visualizza i tag, che usa invece
come direttive per visualizzare correttamente i
contenuti
TAG (apertura e chiusura)
!!
In HTML tutto ciò che deve essere
visualizzato deve essere racchiuso tra il TAG
di apertura e il TAG di chiusura
TAG di apertura
<html>
<title>
<body>
TAG di chiusura
</html>
</title>
</body>
<HTML>
!! Tutti
gli elementi e il contenuto di un
documento HTML sono compresi tra
<html> e </html>
!! Dopo <html> si procede con i due tag che
dividono il documento in due parti
fondamentali:
"!L’intestazione
(<head>)
"!Corpo (<body>)
Tag di struttura
!!
Un semplice documento HTML
======= <HTML>
======= <HEAD>
======= </HEAD>
======= <BODY>
======= </BODY>
======= <HTML>
Not case sensitive
<html>
<head>
</head>
<body>
</body>
</html>
Meglio tuttavia usare lettere minuscole
Titoli
!!
!!
In un testo generalmente si evidenziano i
titoli dal resto
In HTML ci sono 6 possibilità di formattare i
titoli cioè possiamo scrivere:
Titolo1
Titolo2
Titolo3
Titolo4
Titolo5
Titolo6
Usando un <hy>.
<hy>
!!
Abbiamo sei
possibilità:
y = {1,2,3,4,5,6}
<hy> Titolo </hy>
Nota:
1) Tag di chiusura!
<hy> cont...
!!
!!
!!
Stilisticamente, un buon creatore di pagine
HTML non passa mai da un
titolo3 a un titolo1
È bene rispettare la gerarchia dal titolo più
grande (h1) al più piccolo (h6)
Nota: non usare hy per la grandezza del
carattere. I motori di ricerca usano le
intestazioni per l’indicizzazione delle pagine
web.
Paragrafi
At the same time, there began to take form a system of numbering, the
calendar, hieroglyphic writing, and a technically advanced art, all of
which later influenced other peoples.
Within the framework of this gradual evolution or cultural progress the
Preclassic horizon has been divided into Lower, Middle and Upper
periods, to which can be added a transitional or Protoclassic period.
!!
Testo suddiviso in due paragrafi (P1, P2) in
HTML è possibile usando <p>
Con <p>
P1
P2
Senza <p>
Elementi senza tag di chiusura
!! <br>:
per introdurre una interruzione di
linea.
Usando <br /> si fornisce anche la chiusura
!! <hr>: per introdurre una linea
orizzontale
Usando <hr /> si fornisce anche la chiusura
Commenti in HTML
<!– Questo è un commento -->
!! I
commenti servono per rendere il
codice HTML più comprensibile.
!! I commenti sono ignorati dal browser e
quindi non vengono visualizzati.
Liste
Non numerate
<ul>
<li>il primo elemento della lista</li>
<li>il secondo elemento</li>
<li>il terzo elemento</li>
</ul>
!! Numerate
<ol>
<li>il primo elemento della lista</li>
<li>il secondo elemento</li>
<li>il terzo elemento</li>
</ol>
!!
Liste di definizioni
<dl>
<dt>primo elemento</dt>
<dd>definizione</dd>
<dt>secondo elemento</dt>
<dd>definizione</dd>
<dt>terzo elemento</dt>
<dd>definizione</dd>
</dl>
Collegamenti
!!
!!
Per i collegamenti si usa il tag <a> con
attributo href il cui valore è l’URL della
pagina che vogliamo collegare.
<a href="http://...">Pagina collegata</a>
l’indirizzo è un attributo (v. dopo)
Il testo tra <a> e </a> è il testo del
collegamento che normalmente sarà
visualizzato in blu e sottolineato dai browser:
Pagina collegata
Link assoluti e relativi
Link esterni: URL completo
<a href="http://comunicazione.humnet.unipi.it/">CPS</a>
!! Link interni
<a href=“/archivio_bacheca.asp">Bacheca avvisi</a>
!! Si presuppone di essere già in
http://comunicazione.humnet.unipi.it
!!
Collegamenti interni
!!
!!
!!
Sono possibili anche collegamenti che ci portano all'
interno di una pagina piuttosto che all’inizio: è
necessario predisporre un’àncora
Salto all’interno della stessa pagina
<a name="qui"><h3>Sezione 3</h3></a>
<a href="#qui">Sezione 3</a>
Salto nel mezzo di una pagina diversa
<a href="http://sito/pag.html#su">Salta su</a>
dove è stata predisposta un’àncora:
<a name=”su">Inizio testo</a>
Immagini
!! Le
immagini consentite nel linguaggio
HTML sono:
!! .gif
!! .jpg
!! .png
In genere si adoperano le .gif quando servono
immagini animate o con trasparenze, ma il .jpg
risulta il più veloce da caricare e quindi il più
conveniente da usare.
Immagini
!! Inserire
un immagine
<img src=”torre.jpg" />
<img src=”torre.gif" width="278"
height="278" alt=”torre pendente" />
Immagini come link:
<a href="file.html">
<img src=”torre.jpg" />
</a>
Varie (stili logici)
Citazioni: <blockquote>…</blockquote>
"! Indirizzi: <address> … </address>
"! Testo preformattato: <pre> … </pre>
"! Acronimi: <acronym>H.T.T.P.</acronym>
"!Abbreviazioni: … <abbr>G.</abbr>Clooney
"!
