Che materia stai cercando?

Anteprima

ESTRATTO DOCUMENTO

Tag html

I browser interpretano e leggono ad uno ad uno i tag per

visualizzare la pagina in modo opportuno, provvedendo ad adattarla

alle condizioni locali (risoluzione, dimensione della finestra, ecc.)

Possono essere divisi in due grandi categorie:

– tag per la formattazione di testo;

– tag per altre finalità (inclusione di immagini, link, interazione

con l'utente, elaborazione locale, ecc.).

Struttura di un documento HTML

Documento HTML si divide in due parti fondamentali:

CORPO DEL

INTESTAZIONE DOCUMENTO

(HEAD) (BODY)

informazioni necessarie al il testo, le immagini, le

browser per una corretta applet Java, il codice

interpretazione del Javascript e altri elementi

documento, ma non visualizzati dal browser.

visualizzate all'interno

dello stesso

Struttura di un documento HTML

• Il corpo del testo è contenuto tra i tag <body> e </body>

• Gli spazi multipli vengono trattati come uno spazio singolo

• I fine linea non hanno alcun effetto di formattazione

<html>

Tutti gli elementi ed il contenuto di un documento HTML sono

compresi all'interno di questi marcatori incaricati di aprire e

chiudere il file.

Indicano al browser che il documento è marcato in HTML, anche se

i browser riescono ugualmente ad interpretare i tag successivi.

Sono tag che vanno inseriti obbligatoriamente: HTML non è

l'unico linguaggio di contrassegno presente sul WWW (e.g.XML)

e il browser rischia di mal interpretare i tag, confondendoli con

altri linguaggi di markup <head>

Sono posti immediatamente dopo l'apertura del tag <html> e

racchiudono l'intestazione vera e propria del documento

(informazioni necessarie al browser, al ai server ed ai motori di

ricerca);

All'interno di <head></head> va inserito il titolo del documento e

altre informazioni che comunque non vengono visualizzate

all’interno della pagina <title>

• è il più utilizzato all'interno del tag <head>, fornisce il titolo alla

pagina.

• il titolo viene solitamente visualizzato dai browser nell'intestazione

di pagina

• il contenuto tra i tag <title></title> è utilizzato dai motori di ricerca

per indicizzare la pagina e trovare parole chiave (vedi seo)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html> <head> <title>Titolo della pagina</title>

</head>

<body>

…… </body>

</html> <meta>

Si trovano all’inizio del documento, tra i tag <head></head> e

servono per descrivere meta informazioni relative al documento

(autore, argomento, parole chiave …)

• Il meta tag viene definito dalla coppia di attributi name (tipo di

metadato) e content (contentuto del metadato):

Ad esempio:

<head profile="http://www.acme.com/profiles/core"> <title>How

to complete Memorandum cover sheets</title> <meta

name="author" content="John Doe">

<meta name="copyright" content="&copy; 1997 Acme Corp.">

<meta name="keywords" content="corporate,guidelines,">

<meta name="date" content="1994-11-06T08:49:37+00:00">

</head> Perché i Meta TAG

Sono diventate fondamentali (prima si usavano male) sia per i

motori di ricerca (vedi seo) sia per consentire l’indicizzazione e la

categorizzazione delle informazioni negli archivi da parte di

software automatici.

Se le informazioni sono categorizzate bene allora si puo’ sfruttare

meglio il patrimonio contenutistico :

• ricercabili (il tempo di vita aumenta)

• associabili fra loro (ie gestione correlati,…)

• rivendibili a terzi (ie compro le notizie del giro d’Italia,…)

• pagine adattive rispetto al profilo degli utenti

Aumento offerta Incremento pagine

contenutistica (parità viste e conseguente

di sforzo redazionale) aumento dei ricavi

Meta: esempi

• autore della pagina:

<meta name="author" content="Nome Cognome"

• titolo che apparira' alla fine della ricerca:

<meta name="description" content="La mia prima web page">

• editor con cui il documento HTML e' stato generato:

<meta name="GENERATOR" content="Blocco note di WinXP">

• "refresh" della pagina (la pagina viene lanciata dopo un numero di

secondi che impostiamo)

<meta HTTP-EQUIV="Refresh" content="5; url=test.htm">

<link>

Simile al tag meta consente di specificare una proprietà esterna del

documento mediante gli attributi rel e href

• Stylesheet: il css di riferimento

• Index : la index della pagina

• Alternate: versioni alternative della pagina

• Next: il prossimo documento

• Prev: il precedente documento

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Chapter 2</title>

<link rel="Index" href="../index.html">

<link rel="Next" href="Chapter3.html">

<link rel="Prev" href="Chapter1.html">

</head> ...the rest of the document...

Meta: nytimes.com/

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html id="NYTD">

<head>

<link rel="stylesheet" type="text/css"

href="http://graphics8.nytimes.com/css/common/global.css" />

<style type="text/css">

<title>Porous Border With Pakistan Could Hinder U.S. Troops - … </title>

<meta name="description" content="Afghan militants are able to cross the border

with ease, according to interviews with a logistics tactician for the Taliban.">

<meta name="keywords" content="United States Defense and Military

Forces,Afghanistan War (2001- ),Taliban,Pakistan,Afghanistan">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="ROBOTS" content="NOARCHIVE">

<meta name="DISPLAYDATE" content="May 5, 2009">

<meta name="hdl" content="Porous Border With Pakistan Could Hinder …">

<link rel="alternate" media="handheld"

href="http://mobile.nytimes.com/2009/05/05/world/asia/05fighter.xml" />

<link rel="alternate" TYPE="application/rss+xml" TITLE="NYTimes.com

….. </head> <body>

Ha la funzione di mostrare gli oggetti della pagina (testo,

immagini, suoni, ecc).

• è posto in posizione immediatamente successiva alla chiusura del

tag </head> e comunque all'interno degli elementi <html></html>;

• ha un tag di apertura e uno di chiusura, e all'interno di esso si

sviluppa il corpo del documento.

• è utilizzato, oltre che per fornire al browser indicazioni sulla

posizione degli oggetti nel documento, anche per impostare vari

attributi di visualizzazione per il documento.

I titoli

Esistono sei livelli di titolo o intestazione:

– <h1> ... </h1>

– <h2> ... </h2>

– <h3> ... </h3>

– <h4> ... </h4>

– <h5> ... </h5>

– <h6> ... </h6>

L’uso delle intestazione per strutturare il documento e dare una

gerarchia ai contenuti (vedi seo).

La grandezza del font visualizzato dipende dalle impostazioni del

browser (non è esplicitata la grandezza )

Esempio: intestazioni

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN">

<html> <head> <title>Esempio per gli elementi h1 ... h6</title>

</head>

<body> <h1>Titolo principale (h1)</h1>

<p>Questo costituisce introduzione (p).</p>

<h2>Titolo primo capitolo (h2)</h2>

<p>Corpo secondo capitolo bla bla (p) </p>

<h3>Prima sottosezione del primo capitolo (h3) </h3>

<p> Corpo bla bla (p)</p>

<h2>Secondo capitolo (h2)</h2>

</body>

</html>

Come facciamo a provare?

Organizzare i contenuti

• <p> Indica l’inizio di un paragrafo (lascia una riga vuota

prima della sua apertura e dopo la sua chiusura)

• <br/> Inserisce un fine linea

• <hr/> Horizontal Rule: Inserisce una retta orizzontale

• <center>...</center>:Centra un paragrafo

• <pre>...</pre> Testo a spaziatura fissa preformattato:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html> <head> <title>Esempio di Paragrafo</title>

</head>

<body> <p>Primo Paragrafo.</p>

<pre>I got life, mother

I got laughs, sister

I got freedom, brother

I got good times, man (è importante la formattazione) </pre>

</body>

</html> <div>

Serve per assegnare degli attributi ad un blocco di testo o tag

(vedremo che e’ fondamentale per la gestione dei css). E’ un

contenitore in cui gli elementi contenuti hanno delle caratteristiche

comuni. Il blocco di testo va a capo, ma a differenza del paragrafo

non lascia spazi prima e dopo la sua apertura.

<div (attributi)>……altri tag …..</div>

• Ad esempio può essere usato per allineare o dare una formattazione

grafica (ne riparleremo)

<div align = “left|right|justify|center” > </div>

<div style="color:#00FF00">

<h3>This is a header</h3>

<p>This is a paragraph.</p>

</div>

Tag per i caratteri

Tipo (disapprovato):

<font size=n color=#rrggbb face=“tipo_font"></font>

Stile:

• Grassetto: <b> </b>

• Corsivo: <i> </i>

• A spaziatura fissa: <tt> </tt>

• Enfatizzato: <em> </em>

• Sottolineato: <u> </u>

• Apici: <sup> </sup>

• Pedici: <sub> </sub>

• Intermittente: <blink> </blink>

• Ingrandimento dimensione carattere: <big> </big>

• E riduzione: <small> </small>

Commenti

• È utile inserire commenti al codice per facilitarne la comprensione al

momento di una rilettura o di una modifica ( anche per i crowler e per

delimitare varie parti della pagina)

• Sintassi: <!-- commenti -->

• I commenti non vengono interpretati dal browser

<html> <head> <title> Pagina vuota </title>

</head>

<body bgcolor=#000000 text=#FFFFFF link=#FFFFFF>

<!– background nero, testo bianco, link bianchi­­>

</body>

</html> Immagini

• Sintassi: <img src=“percorso d’accesso”>

Come definire il percorso:

• Nome dell’immagine: (Es “immagine.jpg”)

• Percorso relativo: identifico il path a partire dalla directory in cui

effettuo la richiesta

Es. src=“sottocartella/immagine.gif”

• URL assoluto: identifico il path a partire da una radice

Es.src=“file://C:\root\universita\lezioniScienzecomunicazione\2008\le

zione5\test.jpg"

Es. src=“http://home.dsi.uniroma1.it/test/img.gif

Immagini: attributi

• align=“left”

<p><img src="sun.jpg" alt="sunburst graphic" width="32"

height="21" align="left"> This text will be flowed around the right

side of the graphic.</p>

• align="right"

<p><img src="sun.jpg" alt="sunburst graphic" width="32"

height="21" align="right"> This text will be flowed around the left

side of the graphic.</p>

Opzioni per le immagini

E' possibile definire altezza e larghezza dell'immagine con gli attributi

width ed height:

<img src="immagine.gif" width=178 height=180 alt=“testo alternativo

di esempio">

width=178 è la dimensione orizzontale (larghezza) dell'immagine

espressa in pixel

height=180 la dimensione verticale (altezza).

BORDER: assegna un bordo all'immagine. I valori sono numerici

espressi in pixel. Il valore BORDER impostato su 0 ha l'effetto di non

visualizzare alcun bordo. La sintassi è:

<img src="immagine.gif" width=178 height=180 border=2 alt=“testo

alternativo di esempio">

Esempio: Immagini

<!DOCTYPE HTML PUBLIC "­//W3C//DTD HTML 4.01 Transitional//EN"> <html>

<head>

<title>Esempio per l'elemento img</title>

</head>

<body>

<p> Una Immagine:

<br/>

<img src="test.jpg" width ="178" height ="180" alt="testo alternativo di esempio"> Il testo può poi

continuare di lato all'immagine.

</img>

<br clear=“all”/> Questo inizia una nuova riga

</p>

<p>Oppure possiamo definire un nuovo paragrafo</p>

<img src="file://C:\root\universita\lezioniScienzecomunicazione\2008\lezione5\test.jpg" width="178"

height="180" alt="testo alternativo di esempio"> path assoulto

</img>

</body>

</html> LINK: <A> </A>

• un link è indicato dall'elemento <A> e al suo interno è possibile

inserire testo, immagini o altri elementi multimediali;

• per funzionare, il tag <a> deve aver associato degli attributi. Il più

importante è href (abbreviazione di Hypertext Reference) contenente

l'URL o la pagina da raggiungere. La sintassi è:

<a href="http://www.uniroma1.it">La Sapienza</a>

Oppure Link ad un indirizzo di posta elettronica per l'invio di una e-

mail <a href="mailto:nome@dominio"> nome </a>

• può contenere sia link a risorse esterne sia link ad altri documenti

dello stesso sito o a parti interne ad uno stesso documento.

LINK- path

• URL Assoluta:

<a href="http://www.uniroma1.it/">documento esterno</a>

• URL relativa:

<a href="02-paragrafo.html">documento locale</a>

• Collegamento ad un frammento del documento corrente:

<a href="#frammento">parte del documento </a>

dove, da qualche parte è stato definito:

<p id="frammento">Questo paragrafo costituisce un

frammento del documento. </p>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html> <!-- questa e' una prova -->

<head> <title> News del giorno </title>

<meta name="keywords" Content="La news del giorno">

<meta name="author" content="Domenico Ventriglia">

</head>

<body>

<!– la presentazione dovrebbe essere gestita nel css e non html -->

<font size=10 color=black >Le notizie piu' importanti della

giornata</font> <hr size=2 width=300 align="left">

<br/> <!-- PRIMA NOTIZIA-->

<u> <h1> NOTIZIA: Dada acquisisce splinder </h1>

</u>

<i>

<h2> In mariera del tutto inaspettato l'azienda del gruppo RCS..</h2>

</i>

<p> L'andamento dell'indice NYSE

<big> grande risalita <big>a seguito dell'operazione: ...

</p> ……

<img src=images/grafici.jpg width=150 height=100 alt=“testo alternativo di

esempio" border=5>

<br/> <br/>

<h3> vedi approfondimenti alla url: </h3>

<a href="http://www.repubblica.it"> guarda il sito di repubblica

</a> <br/> <a href="http://www.corriere.it" target=_blanck> guarda il sito

del corriere </a> <br/>

<a href="esempio2.html"> quarda il blog dell'autore</a>

<br/>

<h4> Scrivi all'autore

<a href="mailto:nome@dominio"> tizio e caio </a>

</h4>

<!-- QUI INIZIA SECONDA NOTIZIA-->

</body>

</html> Gli elenchi

Gli elenchi non ordinati sono individuati dal tag <ul> ("unordered list"), e gli

elementi dell’elenco sono contraddistinti anch’essi dal tag <li> (in buona sostanza

si tratta di quello che i programmi di videoscrittura chiamano elenchi puntati).

<ul> •primo della 1a lista

<li>primo della 1a lista</li> •secondo della 1a lista

<li>secondo della 1a lista</li>

<ul> •primo della 2a lista

<li>primo della 2a lista</li> •secondo della 2a lista

<li>secondo della 2a lista</li>

<ul> •primo della 3a lista

<li>primo della 3a lista</li>

</ul>

</ul> •terzo della 1a lista

<li>terzo della 1a lista</li>

</ul> Ps utilizzando <ol> al posto di <ul> si hanno gli elenchi ordinati

Colori e Sfondo RGB

•In html i colori sono specificati mediante triple nel sistema RGB

(Red, Green, Blue)

•Il valore di ciascuna delle componenti R, G, B varia da 0 (nessun

contributo) a 255 (piena intensità)

•Pertanto, nel sistema RGB possono essere specificati in totale

256x256x256 colori, equivalente ad oltre 16.7 milioni di colori.

•Per essere sicuri che i colori utilizzati siano resi nella stessa

maniera sui browser, è stato definito un sottoinsieme di 216 colori

(cubo dei colori)

silver gray maroon green navy purple olive teal

C0C0C 80808 800000 008000 000080 800080 808000 008080

0 0

white black red lime blue yellow cyan

magenta

FFFFF 00000 FF000 00FF0 0000F FFFF0 00FFF

FF00FF

F 0 0 0 F 0 F

Colori e Sfondo

• Un immagine come sfondo

<body background="URL">

• Un colore come sfondo

<body background ="#$$$$$$">

• Colore del testo

<body text="#$$$$$$">

• Colore dei collegamenti

<body link="#$$$$$$">

• Colore dei collegamenti visitati

<body vlink="#$$$$$$">


PAGINE

66

PESO

805.50 KB

AUTORE

Atreyu

PUBBLICATO

+1 anno fa


DESCRIZIONE DISPENSA

Queste lezioni fanno riferimento alla terza parte del corso di Sistemi tecnologici e informazione online tenuto dal Prof. Ventriglia. Partendo da una presentazione del Web, si focalizza l'attenzione sul linguaggio html, cioè un linguaggio di markup con cui vengono create le pagine web. Attraverso alcuni esercizi ed esempi, vengono illustrate le caratteristiche, gli strumenti e la struttura di un documento htlm.


DETTAGLI
Corso di laurea: Corso di laurea magistrale in editoria multimediale e nuove professioni dell'informazione
SSD:
A.A.: 2010-2011

I contenuti di questa pagina costituiscono rielaborazioni personali del Publisher Atreyu di informazioni apprese con la frequenza delle lezioni di SISTEMI TECNOLOGICI E INFORMAZIONE ONLINE e studio autonomo di eventuali libri di riferimento in preparazione dell'esame finale o della tesi. Non devono intendersi come materiale ufficiale dell'università La Sapienza - Uniroma1 o del prof Ventriglia Domenico.

Acquista con carta o conto PayPal

Scarica il file tutte le volte che vuoi

Paga con un conto PayPal per usufruire della garanzia Soddisfatto o rimborsato

Recensioni
Ti è piaciuto questo appunto? Valutalo!

Altri appunti di Sistemi tecnologici e informazione online

Telefonia Mobile - Evoluzione
Dispensa
Web 2.0 - Definizioni, principi e strumenti
Dispensa
Ecosistema comunicativo
Dispensa
Fogli di stile CSS
Dispensa