Che materia stai cercando?

Anteprima

ESTRATTO DOCUMENTO

Web e internet

- Browser: è un client web che consente di visualizzare pagine

web,html, video, testo, immagini,…

- Protocollo: è un insieme di regole condivise che consente la

comunicazione di computer. Ogni servizio su internet ha un

proprio protocollo: il protocollo per il web è http: Altri esempi

sono File Transfer Protocol (FTP), https,…

- Http: il protocollo di comunicazione usato per il web fra un client

ed un server web (la strada su cui viaggiano le risorse/pagine web).

- Html: è un linguaggio di markup con cui sono fatte le pagine web

(il linguaggio compreso dai browser)

http://www.w3.org/People/Raggett/book4/ch01.html

Il linguaggio HTML

Studiare il linguaggio HTML è un mattoncino fondamentale nel

nostro approccio sperimentale.

Come ogni linguaggio è formato da una grammatica e da un

vocabolario . Il linguaggio HTML

E’ un linguaggio di markup (contrassegno basato su tag ) per la

formattazione di testo su web ( definito e gestito dal W3C

www.w3.org/ ). HTML non è un linguaggio di programmazione

Link consigliati:

www.w3.org/MarkUp/Guide/ (base)

www.w3.org/MarkUp/Guide/Advanced.html (avanzato)

www.w3.org/TR/html401

Un sito italiano http://xhtml.html.it/guide/leggi/51/guida-html

Attenzione: vedremo con i css il modo corretto di usare i tag html, gli

esempi riportati in questa lezione hanno uno scopo puramente

esemplificativo. Si rimanda comunque alle guide w3c.org per una

trattazione completa

Il linguaggio HTML

W3C ha rilasciato diverse versioni di questo linguaggio (HTML

2.0, HTML 3.2, HTML 4.0,xhtml,.., html 5) (come ogni

linguaggio evolve nel tempo)

Standoci varie versioni di HTML bisogna indicare la specifica del

World Wide Web Consortium che intendiamo usare :

Ad esempio:

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

Transitional//EN">

Tipicamente i file hanno una estensione "html“o “htm” (ad

esempio miaPagina.html).

HTML: Strumenti

Strumenti semplici per visualizzare o modificare il codice html:

• Tutti i browser consentono a di visualizzare il codice html di una

pagina (Come faccio ? tipicamente opzione “visualizza codice

sorgente”)

• Editor generici come notepad ++ supportano i tag html

(http://notepad-plus.sourceforge.net/it/download.php)

• Amaya (editor html suggerito dal w3c )

http://www.w3.org/Amaya/User/BinDist.html

• Firebug (plugin firefox)

https://addons.mozilla.org/it/firefox/addon/1843

Nota : quando modifichiamo un file html in realtà stiamo lavorando su una copia locale

del file Analizzare pagine complesse

Un buon strumento è firebug, un plugin firefox, che vi consente di

analizzare/modificare porzioni di pagina

https://addons.mozilla.org/it/firefox/addon/1843

Visualizziamo

solo il pezzo di

html che ci

interessa e

volendo le posso

modificare

HTML (struttura o presentazione)

Inizialmente HTML fu pensato per delegare la presentazione

grafica dei contenuti ai browser che venivano configurati per

adattarsi al meglio allo specifico contesto (schermi piccoli, grandi,

capacità visive del lettore,…) (vedremo esempio con il tag <h1>..)

Con il passare del tempo esigenze pratiche e la mancanza di

regolamentazione hanno favorito il proliferare di “comandi” (tag)

che si occupassero sia della presentazione grafica della pagina che

della sua struttura (vedremo esempio con il tag <font …>

La standardizzazione del linguaggio e le nuove esigenze (siti di

centinai di pagine web) hanno reso indispensabile il

disaccoppiamento fra presentazione e la struttura (in realtà vi e’

una terza dimensione che è il contenuto). HTML si occupa della

struttura della pagina (elenca gli elementi presenti) mentre i css

della sua presentazione (come devono essere formattati)

Tag html

I tag html sono il vocabolario compreso dai browser <nometag ..>:

• possiedono nomi e attribuiti che servono a specificare ( <body

bgcolor="red"> )

• indicano la struttura del documento e la presentazione grafica (*)

• il tag finale è identico a quello iniziale, preceduto dal simbolo /

<H1> ... </H1>

• possono racchiudere parte del testo <H1> Ciao </H1>

• è indifferente che i tag vengano indicati in maiuscolo o in minuscolo

(meglio in minuscolo)

Tag html (annidati)

I tag possono essere annidati (uno dentro l’altro)

<TAG1 attributi>

contenuto 1

<TAG2 attributi >

contenuto 2

</TAG2>

</TAG1>

Indentazione è una buona norma per rendere più leggibile il testo

html. Si usano i caratteri di tabulazione (il tasto tab a sinistra della

lettera Q) per far rientrare il testo ogni volta che ci troviamo in

presenza di un annidamento e man mano che entriamo più in

profondità nel 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>


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