10. WEB 1.0 - HTML

WEB 1.0

HTML e dintorni

Informa7ca 2014/15 1

World Wide Web La data di nascita del World Wide Web viene comunemente

indicata nel 6 agosto 1991, giorno in cui l'informa7co inglese Tim Berners-Lee pubblic il primo sito web dando cos vita al fenomeno "WWW" (deMo anche "della tripla W").


World Wide Web Il conceMo del Web ha integrato mol7 diversi sistemi

informa7vi dispara7, creando uno spazio immaginario astraMo in cui le dierenze tra essi fossero ininuen7.

Il Web doveva includere ogni sorta di informazione su qualunque sistema. Lunica idea comune necessaria a meMere ci assieme fu iden7care un documento tramite lo Universal Resource Iden1er (URI).

DireMamente da ci sono come piovute architeMure (design) di protocollo (come h-p) e di forma7 di da7 (come HTML) che hanno permesso ai computer di scambiarsi informazioni mappando i propri forma7 locali in standard in grado di orire interoperabilit globale.


Storia del Web WEB 1.0 (Web dei da7)

Pagine web i cui contenu7 sono crea7 dai tecnici del web Motori di ricerca basa7 su parole chiave

WEB 2.0 (Web dei da7) Si7 i cui da7 vengono crea7 dagli uten7 stessi del web

eBay Wikipedia Blog

Motori di ricerca Web 3.0 (web dei signica7)

Web seman7co?


5

Denizioni

WWW -- una infrastruMura soaware costruita sopra Internet

HTTP -- HyperText Transport Protocol, u7lizzato per trasmeMere le pagine web

HTTPS -- HTTP Sicuro (usa la cifratura) HTML -- HyperText Markup Language, linguaggio per descrivere le pagine web

Informa7ca 2014/15

HTML HyperText Markup Language

Sviluppato al CERN dal 1989 Pubblicato nel 1991

Browser: Mosaic Web rende i servizi esisten7 obsole7

WAIS, Hytelnet, Gopher

HTML


HTML LHTML un linguaggio di marcatura per la creazione di

ipertes7 (Hyper-Text Markup Language) LHTML non un linguaggio di programmazione. LHTML un

linguaggio di descrizione della struMura e delle pagine di un documento web.


Strumen7

Browser Ha il compito di mostrare le pagine HTML Esempi:

Internet Explorer, Firefox, Safari, Opera, Chrome

Editor Crea e modica le pagine HTML. Esempi:

Notepad, TextPad, editor HTML Informa7ca 2014/15 8

Editor HTML Editor HTML Online:

hMp://www.quackit.com/html/online-html-editor/

hMp://htmledit.squarefree.com


Funzionamento (1) 1. La visione di una pagina web inizia digitandone l'URL

nell'apposito campo del browser web oppure cliccando su un collegamento ipertestuale presente in una pagina web precedentemente visualizzata o in altra risorsa come ad esempio un'e-mail. Il browser web a quel punto dietro le quinte inizia una serie di messaggi di comunicazione con il web server che ospita quella pagina con lo scopo di visualizzarla sul terminale utente.

2. Per prima cosa la porzione di server-name dell'URL risolta in un indirizzo IP usando il database globale e distribuito conosciuto come Domain Name System (in sigla DNS). Questo indirizzo IP necessario per inviare e ricevere pacchem dal server web.


Funzionamento (2) 3. A questo punto il browser richiede le informazioni inviando

una richiesta a quell'indirizzo. In caso di una 7pica pagina web, il testo HTML di una pagina richiesto per primo ed immediatamente interpretato dal browser web che, successivamente, richiede eventuali immagini o le che serviranno per formare la pagina deni7va.

4. Una volta ricevu7 i le richies7 dal web server, il browser formaMa la pagina sullo schermo seguendo le speciche HTML, CSS, o di altri linguaggi web. Ogni immagine e le altre risorse sono incorporate per produrre la pagina web che l'utente vedr.


Principi di HTML


Elemen7 e tag Gli elemen5 forniscono la struMura di un documento HTML e

dicono come il browser dovr visualizzare il tuo sito web. In generale gli elemen7 sono forma7 da un marcatore (tag) iniziale, del contenuto e un tag nale.

Tag sono le e7cheMe che si usano per marcare l'inizio e la ne di un elemento.

Tum i tag hanno lo stesso formato: iniziano con il segno minore di "".

I tag di apertura: e i tag di chiusura:


Testo da formaMare Tag di

Apertura

Tag di Chiusura

Marcatori di formaMazione senza testo.

Un tag pu avere degli aMribu7

Esempio L'elemento b viene usato per i caraMeri in grasseMo. TuMo il

testo tra il tag di apertura e il tag di chiusura viene visualizzato sul browser con caraMeri in grasseMo. ("b" l'abbreviazione della parola inglese "bold".)

This text must be bold.

This text must be bold.


Esempio Gli elemen7 h1, h2, h3, h4, h5 e h6 vengono usa7 per i 7toli

(h l'iniziale della parola inglese "heading"), dove h1 il primo livello e normalmente il testo pi grande, h2 il secondo livello e normalmente un testo leggermente pi piccolo, e h6 il sesto e ul7mo livello della gerarchia dei 7toli e normalmente viene rappresentato con un testo piccolo.

This is a headingThis is a subheading

This is a heading!This is a subheading


HTML LHTML un linguaggio di marcature che ci permeMe di

rendere visibili le nostre informazioni sul web formaMando i nostri tes7 allinterno di pagine web




Marcatori HTML Informa7ca 2014/15 18



Possiamo formaMare il testo in grasseMo (B = BOLD) o in

corsivo (I = ITALICS)



rendere visibili le nostre informazioni sul web formaMando I nostri tes7 allinterno di pagine web

Possiamo suddividerlo in paragra ()



rendere visibili le nostre informazioni sul web formaMando I nostri tes7 allinterno di pagine web

E allinearlo a destra (aMributo ALIGN) ALIGN = right


Approfondimen7 Esistono pochi elemen7 che hanno l'apertura e la chiusura

nello stesso tag. Ques7 elemen7 vengono chiama7 elemen7 vuo7. Non sono collega7 a specici passaggi nel testo, ma piuMosto sono e7cheMe isolate, come per esempio, a linea vuota che si indica con .

A mol7 browser non interessa se scrivi i tag tum maiuscoli, tum minuscoli o mis7. , o normalmente forniscono lo stesso risultato. In ogni caso il modo corre-o quello di scriverli tum con i cara-eri minuscoli.

Un sito web con7ene uno o pi documen7 HTML. La navigazione sul Web consiste nellaprire diversi documen7 HTML.


StruMura di un documento HTML


24

HTML Page Format

Qis web! Hello World

Informa7ca 2014/15

Il tag opzionale Il tag pu contenere:

Il Tag

The global structure of an HTML Document

Pi Meta Tags

Il tag delimita il corpo del documento. Alcuni AMribu7:

background = uri Denisce lURI di una immagine da usare come sfondo per la pagina. text = color Denisce il colore del testo.

bgcolor= color In alterna7va a background denisce il colore di sfondo della pagina

Il Colore: #RRGGBB

Red = "#FF0000

Blue = "#0000FF"

Black = "#000000

Yellow = "#FFFF00

Il Linguaggio HTML: Body


Headings

27

text -- largest of the six text text text text text -- smallest of the six

ALIGN="posi1on" --lea (default), center or right

Informa7ca 2014/15

Headings

Document Headings Samples of the six heading types: Level-1 (H1) Level-2 (H2) Level-3 (H3) Level-4 (H4) Level-5 (H5) Level-6 (H6)


Il Tag delimita un paragrafo:

Quel ramo del lago di Como, che volge a mezzogiorno, tra due catene non interroMe di mon7, tuMo a seni e a gol, a seconda dello sporgere e del rientrare di quelli, vien, quasi a un traMo, a ristringersi, e a prender corso e gura di ume, tra un promontorio a destra, e un'ampia cos7era dall'altra parte; e il ponte, che ivi congiunge le due rive, par che renda ancor pi sensibile all'occhio questa trasformazione, e segni il punto in cui il lago cessa, e l'Adda rincomincia, per ripigliar poi nome di lago dove le rive, allontanandosi di nuovo, lascian l'acqua distendersi e rallentarsi in nuovi gol e in nuovi seni.

AMribu7 del Tag :

align = lea|center|right|jus7fy

Il Linguaggio HTML: Paragra


30

CaraMeri speciali

Character Use

< <

> >

& &

" "

Space

Informa7ca 2014/15

FormaMazione del testo:

monospaced text monospaced text italic text italic text bold text bold text

big text big text small text small text underlined text underlined text

Il Linguaggio HTML: Font Style


This is the text of line one Line two contains this text

33

S7li di caraMere: sico

Physical Character Styles Bold Italic Teletype (Monospaced) Underlined Subscripts: f0 + f1 Superscripts: x2 + y2 Smaller Bigger Strike Through Bold Italic Big Monospaced Small Italic Gray Delete Insert

Informa7ca 2014/15

Logical Character Styles Emphasized Strongly Emphasized Code Sample Output Keyboard Text Definition Variable Citation Emphasized Code Gray Citation JDK Acronym

S7li di caraMere: logico


Ordered (Numbered) Lists

35

Item one Item two Sublist item one Sublist item two Sub-sublist item one Sub-sublist item two

Informa7ca 2014/15

Liste non ordinate: Type: disc,circle,square Unordered informa7on. Ordered informa7on. Deni7ons.

Unordered informa7on. Ordered informa7on. Deni7ons.

Liste ordinate: Type: 1 (1,2,..), a (a,b,..), A (A,B,..), i (i,ii,..), I (I,II,..) Unordered informa7on. Ordered informa7on. Deni7ons.

I. Unordered informa7on. V. Ordered informa7on. VI. Deni7ons.

Liste di denizione: UL Unordered List. OL Ordered List.

UL Unordered List. OL Ordered List.

Il Linguaggio HTML: Liste


Il Link il costruMo di base dellipertesto. Il Link una connessione fra una risorsa Web ed unaltra. ConceMo semplice, ma chiave per laermazione dellHTML Link due estremi dem anchors e una direzione source anchor des7na7on anchors Il des7na7on anchors pu essere una qualsiasi risorsa web (un immagine, un video, un eseguibile, un documento HTML)

La risorsa di des7nazione si omene visitando il link

Il Linguaggio HTML: Links


Anchors (HyperLinks)

38

Link a URL assoluta: If you get spam, contact Microsoa to report the problem. Link a URL rela5va: See these

Hyperlinks Welcome to Computer Science at the University of Virginia.


40

Il Linguaggio HTML: Immagini

Tag: AMributo SRC (obbligatorio) WIDTH, HEIGHT possono essere in pixel o percentuali dellimmagine WIDTH="357" HEIGHT="50%"

Limmagine viene scalata per rispeMare le dimensioni

Informa7ca 2014/15

Il Linguaggio HTML: Tabelle

41

table tag op7onal table 7tle table row table column header table data element

Informa7ca 2014/15


42

Table Caption Heading1Heading2 Row1 Col1 DataRow1 Col2 Data Row2 Col1 DataRow2 Col2 Data Row3 Col1 DataRow3 Col2 Data

Informa7ca 2014/15

A test table with merged cells Average Redeyes heightweight Males1.90.00340% Females1.70.00243%



Il Linguaggio HTML: Tabelle - Esempio


CSS


LHTML nato in ambien7 scien7ci Linguaggio orientato pi ai contenu7 che alla presentazione

Sono state faMe forzature per aggirare le limitazioni Estensioni proprietarie Conversione del testo in immagini Uso di immagini per il controllo degli spazi bianchi Uso delle tabelle per la formaMazione

Le forzature presentano spesso eem collaterali Scopo degli Style sheets risolvere parte di tali limitazioni CSS = Cascading Style Sheet

Il Linguaggio HTML: Style sheets


AMributo id id = name assegna un nome univoco ad un elemento

id u7lizzato per: seleMore per gli style sheet des7na7on anchor reference per gli script client side

AMributo class class = list assegna una classe o un set di classi ad un elemento

Il Linguaggio HTML: id e class


CSS Forma generale:

selector {property: value} oppure selector {property1: value1; property2: value2; ... propertyn: valuen }

selector denito come: Nome del tag Nome del tag . class Nome del tag #id


CSS

H1 {text-align: center; color: blue; font: Arial, Times New Roman} P {text-align: left; color: red; font-family: Tahoma, Arial Narrow; font-style: italics}


CMS

Content Management Systems


Un Content Management System (CMS)

un sistema utile alla gestione dinamica di contenuti informativi

come ad esempio: (articoli, rubriche, notizie, faq, etc) da pubblicare su siti e portali web

Cos un CMS ?


Un Content Management System permette quindi, di gestire l'aggiornamento ed il flusso delle informazioni attraverso soluzioni software che rendono semplici ed affidabili i processi di gestione e di aggiornamento dei contenuti, e cio: linserimento di notizie, news ed immagini Il controllo degli accessi e gestione di aree riservate Disponibilit di mezzi di interazione (chat, forum, ecc.) Report dettagliati

Cos un CMS ?


Quali sono le caratteristiche che deve avere un buon CMS? Aggiornamento e gestione del sito via browser web Gestione di ruoli distinti degli utenti Database separato per larchiviazione dei contenuti testuali e grafici Facile integrazione con contenuti provenienti da altri sistemi informatici presenti sul WEB Gestione di mailing list e messaggistica Gestione e classificazione di link, notizie, faq, eventi, immagini Funzionalit avanzate di interrogazione e ricerca interna Personalizzazione dei criteri grafici di presentazione dei contenuti.

Cos un CMS ?


Quindi con un CMS, chiunque pur non

conoscendo l'HTML o il PHP, pu arrivare a

gestire la creazione, la modifica e la rimozione di contenuti di un sito web e

di renderlo interattivo, senza aver bisogno delle conoscenze tipiche di un

webmaster!

Cos un CMS ?


Vantaggi: Aggiornamento automatico dei contenuti senza intervenire sul codice pagina; Gestione decentralizzata da un normalissimo browser come Explorer; Accessi e ruoli degli utenti altamente configurabile; ogni utente pu cambiare solo

i contenuti che autorizzato a cambiare e non pu intervenire su altri; Ambiente facilitato per autori di contenuti non particolarmente esperti; Il CMS favorisce e facilita la cooperazione nella creazione di contenuti a pi mani;

Pi utenti possono lavorare alla stessa pagina: uno sui testi, un altro sulle foto, ecc)

Contenuti gestibili per tempo e durata (funzione scheduling) Contenuti memorizzati in un database che pu essere interrogato da fonti esterne;

gli stessi contenuti possono essere riutilizzati in altre aree del sito in maniera assolutamente automatica e dinamica;

Il Webmaster pu essere affiancato facilmente da altre figure che lo assistono per la gestione di alcune aree in particolare ecc

Sono possibili ulteriori implementazioni di funzioni in modo semplice da pannello di controllo che le abilita o disabilita (ad es. Chat, forum, mail, ecc)

Cos un CMS ?


Svantaggi: Occorre una certa manualit informatica nella gestione del CMS, non quindi

adattissimo a chi inizia a mettere le mani nella costruzione di siti web; ma una volta presa manualit riesce a restituire grandi soddisfazioni

I maggiori CMS lavorano con linguaggi lato-server come il PHP; tali linguaggi non consentono di lavorare visivamente come si fa con lHTML e quindi risultano pi ostici nella modifica della grafica e delle funzioni.

Linstallazione stessa comporta un minimo di complessit dovuta anche alla presenza del database MySql che deve essere richiesto assieme allo spazio web al provider, al momento dellacquisto dellhosting.

Struttura visiva abbastanza rigida che fa uso di templates grafici reperibili anche gratuitamente sul web e che conferiscono aspetti simili a siti anche diversi tra loro; per evitare questo problema il webmaster, che voglia ottenere una nota di originalit, si deve impegnare in una ristrutturazione grafica del layout grafico del sito.

Cos un CMS ?


Tirando le somme: Possibilit di distribuire

lamministrazione dei contenuti Sistema di autorizzazione alla

pubblicazione Archiviazione strutturata Scalabilit di funzioni ed add-on Motore di ricerca affidabile Contentuto svincolato dal

contenitore (con il database) Interattivit e dinamicit dei

contenuti

Cos un CMS ?


CMS Esempi:

OpenCms open source basato sulla piaMaforma Java e tecnologia XML

Drupal scriMo in linguaggio PHP e distribuito soMo licenza GNU GPL. Joomla! scriMo completamente in linguaggio PHP. pubblicato con

licenza open source GNU GPL v.2. nato nel seMembre 2005 da una scissione dal codice del CMS Mambo

Mambo stato rilasciato lul7ma volta nel 2008, dopodich gli uten7 hanno preferito i suoi fork, principalmente Joomla e MiaCMS

WordPress una piaMaforma soaware di "personal publishing" e CMS, sviluppata in PHP e che usa come database MySQL. Creata da MaM Mullenweg, distribuita con la licenza GNU General Public License.


10. WEB 1.0 - HTML

Documents

Transcript of 10. WEB 1.0 - HTML