Che materia stai cercando?

Anteprima

ESTRATTO DOCUMENTO

HTML Risultato

<P ALIGN=LEFT>Testo normale, Testo normale, che si può

che si pu&ograve; eventualmente eventualmente estendere su diverse

estendere su diverse righe.</P> righe.

<P ALIGN=RIGHT>Testo normale, Testo normale, che si può

che si pu&ograve; eventualmente eventualmente estendere su diverse

estendere su diverse righe.</P> righe.

<P ALIGN=JUSTIFY>Testo Testo normale, che si può

normale, che si può eventualmente eventualmente estendere su diverse

estendere su diverse righe.</P> righe.

<P ALIGN=CENTER>Testo normale, Testo normale, che si può

che si pu&ograve; eventualmente eventualmente estendere su diverse

estendere su diverse righe.</P> righe.

Alla fine di un paragrafo, il testo va a capo.

Un altro tag per forzare un a-capo, anche se non siamo alla fine di un

paragrafo, è il tag <BR> (line BReak).

Questo è un tag che esiste solo nella versione “inizio” (non esiste il tag </

BR>).

P ARTI DEL TESTO CON SPECIALI FUNZIONI

<EM> ... </EM>: testo enfatizzato

<STRONG> ... </STRONG>: testo ancora più enfatizzato (p.es. se per

EM viene usato il corsivo per STRONG viene usato il neretto).

<CITE> ... </CITE>: testo citato da altra fonte

Esempio: HTML Risultato

<P>Testo <STRONG>normale</STRONG>, Testo normale, che si può

che si può <EM>eventualmente</EM> eventualmente estendere su

estendere su diverse righe.</P> diverse righe.

L

ISTE ED ELENCHI

Un elenco numerato (o “ordinato”) si crea con il tag <OL> ... </OL>

(Ordered List). Gli elementi dell'elenco si indicano con il tag <LI>, che

non è necessario chiudere.

Esempio: HTML Risultato

<OL> 1. Il mio primo elemento,

<LI>Il mio primo elemento, 2. il successivo,

<LI>il successivo,

<LI>e infine l'ultimo, 3. e infine l'ultimo,

</OL> 6

Un elenco non numerato si crea con il tag <UL> ... </UL> (Unordered

List). Gli elementi dell'elenco si indicano nuovamente con il tag <LI>, che

non è necessario chiudere.

Esempio: HTML Risultato

<UL> Il mio primo elemento,

<LI>Il mio primo elemento, il successivo,

<LI>il successivo,

<LI>e infine l'ultimo, e infine l'ultimo,

</UL>

Per creare un elenco di elementi con descrizioni, si usa una Description

List, tag <DL> ... </DL>.

Una description list ha due tipi di elementi:

elementi che indicano un titolo: tag <DT> (Description Title)

• elementi che esplicitano una descrizione: tag <DD> (Description Data)

Non è necessario chiuderli.

Esempio: HTML Risultato

<DL> Pavone

<DT>Pavone Un uccello che fa la ruota

<DD>Un uccello che fa la ruota Pinguino

<DT>Pinguino

<DD>Un uccello che nuota Un uccello che nuota

<DT>Pulcinella di mare Pulcinella di mare

<DD>Un uccello che nuota, Un uccello che nuota, simile al

simile al pinguino

<DD>Il pulcinella di mare però pinguino.

sa anche volare Il pulcinella di mare però sa

</UL> anche volare

T

ABELLE

Le tabelle si descrivono come segue:

<TABLE> (dati casella 1 1) (dati casella 1 2)

<TR> (dati casella 2 1) (dati casella 2 2)

<TD> (dati casella 1 1) </TD>

<TD> (dati casella 1 2) </TD>

</TR>

<TR>

<TD> (dati casella 2 1) </TD>

<TD> (dati casella 2 2) </TD>

</TR>

</TABLE>

Ossia:

Inizio e fine tabella sono segnati con i tag <TABLE> ... </TABLE>

• Inizio e fine di ogni riga della tabella sono segnati con i tag <TR> ... </

• TR> (Table Row) 7

All'interno di ogni riga, inizio e fine dei dati contenuti in una casella

• sono segnati con i tag <TD> ... </TD> (Table Data).

E

LEMENTI GRAFICI

Le immagini non si possono mettere in un file HTML.

Le immagini che vediamo in una pagina web sono file separati. Il

browser li richiede al server web, come fa con le pagine HTML.

Tali file vengono citati nel codice HTML. Il browser li visualizza

all'interno della pagina, posizionati e dimensionati in modo opportuno.

Il tag HTML per fare questo è <IMG> (IMmaGine).

Questo tag non ha la versione “fine” e richiede necessariamente di

specificare almeno un attributo, snza il quale non ha senso: tale atributo è

l'indirizzo del file immagine.

<IMG SRC=”http://www.disi.unige.it/images/topbar.gif”>

Altri attributi che posso mettere sono:

<IMG SRC=”(indirizzo)” WIDTH=100 HEIGHT=40 ALIGN=RIGHT VALIGN=TOP>

WIDTH impone la larghezza; HEIGHT l'altezza. Se impongo uno dei

due, l'altro viene calcolato per mantenere le proporzioni originali. Se

impongo tutti e due posso variare anche le proporzioni.

ALIGN impone l'allineamento orizzontale, come per il testo. VALIGN

l'allineamento verticale rispetto alla riga in cui si trova l'immagine: TOP

oppure MIDDLE oppure BOTTOM.

Un altro elemento grafico è la riga orizzontale.

Si usa il tag <HR> (Horizontal Rule).

Si può specificarne la larghezza, anche in proporzione alla pagina:

<HR WIDTH=”100”>

<HR WIDTH=”70%”>

C OLLEGAMENTI IPERTESTUALI

I collegamenti ipertestuali si indicano nel seguente modo.

Si sceglie una parte della pagina che deve essere cliccabile. Per esempio,

per inserire un collegamento che consente di tornare alla home page, si

renderà cliccabile il testo Home page.

Questo testo è la nostra ancora, ossia il punto a cui si aggancia il

collegamento.

Lo marchiamo quindi con il tag <A> ... </A> (Anchor).

Anche questo tag non ha senso senza almeno un attributo: l'indirizzo a cui

è collegato, cioè il riferimento ipertestuale.

Dovremo quindi specificare l'attributo HREF (Hypertext REFerence):

<A HREF=”http://www.disi.unige.it”>Home page</A>

8

Un esempio di pagina web completa

Codice HTML della pagina:

<html>

<head>

<title>Pagina di esempio</title>

</head>

<body>

<h1>Esempio di pagina HTML</h1>

<h2>Scopo</h2>

<p>

Questa pagina &egrave; una pagina di prova

che serve ad illustrare i tag HTML che abbiamo visto.</p>

<h2>Consigli</h2>

<p>

Occorre essere <strong>rigorosi</strong> quando si scrive

in HTML, perch&eacute; il browser perdona molti errori

e quindi non ci accorgiamo di averli fatti finch&eacute;

non succede qualcosa.</p>

<p align=center>

<em>&Egrave; particolarmente noioso

scrivere le tabelle. &Egrave; consigliabile farsi prima

un disegno su carta.</em></p>

<h2>Tre aspetti</h2>

<p>

Si pu&ograve; notare che un documento (e quindi anche

una pagina web) si deve guardare sotto tre distinti aspetti:

<ol>

<li>Il contenuto

<li>Le parti del testo

<li>L'impaginazione

</ol>

Questi aspetti possono essere descritti come segue:

<dl>

<dt>Contenuto

<dd>La sostanza del documento

<dt>Parti del testo

<dd>Come il contenuto &egrave; logicamente suddiviso

<dt>Impaginazione

<dd>Che aspetto hanno le varie parti del documento.

</dl>

<h2>Chi fa cosa?</h2>

<ul>

<li>L'autore decide il contenuto

<li>L'autore o l'<em>editor</em> decide la suddivisione logica

<li>Il browser si occupa dell'estetica

</ul>

eventualmente aggiungendo immagini come la seguente:<br>

<img src="http://www.disi.unige.it/images/home4g.gif"><br>

e link ipertestuali come quello che va alla

<a href="http://www.disi.unige.it">home page del DISI</a>

</p> 9

</body>

</html>

Quello che segue è la visualizzazione di questa pagina su un particolare

browser che fa particolari scelte estetiche.

È importante ricordare che HTML prevede solo di indicare al browser il

ruolo delle varie parti del documento. Spetta poi al browser scegliere

l'estetica di tali parti.

Un modo per influire su questa scelta si chiama CSS o Cascading Style

Sheets. Un file CSS è una serie di regole che riguardano le scelte

estetiche. È buona norma tenere tali scelte distinte dal contenuto e dalla

struttura logica. Quindi si fa un file CSS separato.

Applicazioni web

Applicazione = Programma applicativo. 10

Applicazione web = estensione di un programma applicativo che si utilizza

attraverso il www.

Quando un'applicazione deve essere usata da molte persone, la soluzione

tradizionale era il mainframe: un grosso calcolatore centrale con grandi

capacità di archiviazione e di connessione, scarse capacità di pura

elaborazione, solide garanzie di resistenza ai guasti.

Al mainframe ci si collegava attraverso linee telefoniche o rete dedicata

usando un terminale. Un terminale è poco più di una tastiera + un

monitor.

Un mainframe, 1000-10000 terminali.

Quando i calcolatori “piccoli” (PC) sono diventati “grandi”, e capaci di

elaborazione e collegamenti, si sono affiancati al calcolatore centrale

nell'esecuzione delle applicazioni. Il calcolatore centrale è stato così

sollevato da gran parte delle elaborazioni per conto degli utilizzatori

(quelle necessarie p.es. a presentare visivamente le informazioni).

Questo è il modello client-server.

Con la diffusione e crescita del www, il ruolo di interfaccia utente è stato

assunto da pagine web. Nascono così le web applications.

Un server web, 100000 o più collegamenti.

Esempi:

Sistemi informativo pubblico (es. biblioteche)

• Commercio e servizi al pubblico in rete (e-commerce)

• Servizi della pubblica amministrazione in rete (e-government)

• Coordinamento sistemi informativi interni (aziendali, ecc: intranet)

• Accesso remoto a database

• Applicazioni distribuite

• Amministrazione remota di risorse

• Formazione a distanza

• Distribuzione multimedia/entertainment

• Distribuzione in tempo reale dell'informazione

Pagine web dinamiche

Il WWW è nato per pubblicare e distribuire informazioni agli utenti:

I servizi sono essenzialmente a senso unico

(broadcast = da un emittente a molti riceventi)

I contenuti presentati sono statici (infatti si usa il concetto di pagina)

11


ACQUISTATO

1 volte

PAGINE

14

PESO

335.94 KB

AUTORE

flaviael

PUBBLICATO

+1 anno fa


DETTAGLI
Corso di laurea: Corso di laurea in lettere
SSD:
Università: Bologna - Unibo
A.A.: 2008-2009

I contenuti di questa pagina costituiscono rielaborazioni personali del Publisher flaviael di informazioni apprese con la frequenza delle lezioni di Informatica di base e studio autonomo di eventuali libri di riferimento in preparazione dell'esame finale o della tesi. Non devono intendersi come materiale ufficiale dell'università Bologna - Unibo o del prof Tomasi Francesca.

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 Informatica di base

Informatica di base - Internet, il www e i loro servizi
Appunto
Informatica di base - costruzione di una pagina web
Appunto
Informatica di base - progettazione e realizzazione di un semplice database
Appunto
Informatica di base - la firma digitale
Appunto