Source: http://slideplayer.it/slide/571361/
Timestamp: 2017-01-21 06:46:12+00:00

Document:
HTML il linguaggio per creare le pagine per il web Parte I: elementi di base. - ppt scaricare
PubblicatoSanto Marconi
Presentazione sul tema: "HTML il linguaggio per creare le pagine per il web Parte I: elementi di base."— Transcript della presentazione:
HTML il linguaggio per creare le pagine per il web Parte I: elementi di base 2
2 Si basa sul protocollo HTTP ed è stata la vera novità informatica degli anni 90 Sviluppato presso il CERN di Ginevra è il più potente mezzo di diffusione telematica di documenti elettronici Mezzo di comunicazione globale, interattivo, multimediale e ipertestuale ha cambiato radicalmente il modo di comunicare e di lavorare World Wide Web 3
3 lettura sequenziale pag1 pag2 pag3 pag4 pag7 pag5 pag6 Organizzazione di un testo 4
4 nodi (pagine) link anchor lettura secondo legami associativi Organizzazione di un ipertesto 5
5 browser: programma applicativo per navigare in rete page (pagina): singolo foglio di un ipertesto home-page: punto di ingresso di un sito web hotspot, hotword: porzione di una pagina che, se selezionata, permette di raggiungere un altro punto dellipertesto o una nuova risorsa Terminologia per gli ipertesti sul web 6
6 FAQ: domande ricorrenti su un certo argomento portale: sito web che offre risorse e servizi; è il punto di ingresso verso altri siti motore di ricerca: sito web che permette di districarsi nel deposito caotico di dati presenti nella rete forum: … Terminologia per gli ipertesti sul web 7
7 Il WWW usa il modello client-server per lo scambio delle informazioni Abbiamo il client (browser), programma applicativo che gira sullelaboratore dellutente il server, programma applicativo che gira sullelaboratore del fornitore di informazioni (provider) la rete Client-server 8
8 Ogni utente può richiedere delle informazioni attraverso il suo programma client La richiesta viaggia attraverso la rete fino a raggiungere lelaboratore server Il server interpreta la richiesta e restituisce allelaboratore client un file HTML contenente le informazioni desiderate (… oppure esegue uno o più programmi e restituisce una pagina generata dinamicamente) Client-server 9
10 Linguaggi di markup In un documento il markup è il codice che contiene le informazioni per la sua formattazione 11
11 Nellambito dellelaborazione elettronica dei testi sono stati creati strumenti informatici per automatizzare alcune operazioni per la creazione dei documenti Esistono programmi per lelaborazione dei testi di tipo diverso gli editor WYSIWYG gli editor che usano il concetto di markup Linguaggi di markup 12
12 Nel caso di editor che usano il concetto di markup un testo è costituito da due parti il contenuto vero o proprio le istruzioni che specificano come il contenuto deve essere rappresentato sul dispositivo (lo schermo di un PC, ma anche per esempio una stampante) In genere si racchiude il testo tra istruzioni chiamate tag (o etichette o codici) I tag sono scritti usando i normali caratteri e quindi i documenti possono essere creati usando semplici editor di testo Linguaggi di markup 13
13 File word (.doc) 14
14 Aprendo il file precedente con Blocco Note si vede il formato interno di Word e non si distinguono markup File word (.doc) 15
15 File in formato RTF (.rtf) RTF è un formato solo testo in cui si distinguono informazioni legate alla presentazione del documento e informazioni che fanno parte del contenuto 16
16 File in formato PostScript (.ps) Questo è un formato usato per la stampa. Anche in questo caso si distinguono informazioni legate alla presentazione del documento e informazioni che fanno parte del documento stesso 17
17 HTML Gli ipertesti del web sono scritti usando il linguaggio HyperText Markup Language (HTML) HTML non è un linguaggio di programmazione! HTML è un linguaggio di markup e permette di descrivere la disposizione di tutti gli elementi presenti allinterno di un documento 18
18 I documenti HTML sono dei file in formato testo (codice ASCII) Si possono creare con degli editor di testo dando lestensione.htm o.html I browser leggono i documenti HTML e li visualizzano interpretando le specifiche di formattazione in modo sequenziale HTML 19
19 WordPad (o qualunque altro editor di testo) scegliere il formato solo testo e salvare con estensione.htm (.html) documento HTML 20
20 HTML: sintassi informazioni Un documento HTML inizia sempre con il tag e termina sempre con il tag NB: il linguaggio HTML è case-insensitive e quindi,, sono tutti tag leciti (lo stesso vale per gli altri tag) Suggerimento: è meglio decidere allinizio come si scriveranno i tag ed essere consistenti 21
21 caratteristiche del documento documento HTML: sintassi 22
22 titolo del documento … HTML: 23
23 titolo del documento documento vero e proprio HTML: 24
24 NB: lordine con cui si scrivono gli attributi non è importante HTML: NB: lordine con cui si scrivono gli attributi non è importante HTML:">
25 bgcolor="red" bgcolor="yellow" bgcolor="#00ffff" text="#eeeeee" link="#ffffff" background="images/sfondo.gif" HTML: ">
26 Ogni colore può essere codificato mediante tre numeri compresi tra 0 e 255 che rappresentano le quantità di ROSSO VERDE e BLU presenti nel colore stesso Ogni numero compreso tra 0 e 255 deve essere trasformato nella rappresentazione esadecimale corrispondente (base 16) Con questa codifica si possono rappresentare più di 16,7 milioni di colori diversi HTML: RGB 27
27 nero # blu #0000ff verde #00ff00 rosso #ff0000 bianco #ffffff NB: le codifiche non si possono imparare a memoria; nei file HTML le codifiche esadecimali vanno scritte senza lasciare spazi vuoti tra le cifre decimale#esadecimale HTML: RGB 28
28 HTML: come si trovano i colori? Si può trovare il codice RGB di un colore usando la tavolozza dei colori di un programma di grafica (in questo caso Paint) 29
29 HTML: come si trovano i colori? Una volta trovato il codice RGB del colore in notazione decimale, si può usare la calcolatrice per trovare la codifica esadecimale corrispondente 30
30 In Linux si useranno altri programmi per trovare i colori ma il ragionamento da fare è sempre lo stesso: si sceglie il colore e si costruisce la sua codifica RGB in rappresentazione esadecimenle HTML: come si trovano i colori? 31
31 Il documento inserito nel viene visualizzato secondo le direttive di formattazione per scrivere titoli si possono usare titolo1 titolo2 … titolo6 per andare a capo …. HTML: titoli 32
32 Prova di documento Titolo importante Titolo meno importante Hello world hello world hello world hello world Hello world hello world hello world hello world HTML: esempio 33
33 HTML: esempio 34
34 Formato dei caratteri grassetto corsivo enfatizzato codice grassetto testo... HTML: caratteri 35
35 Allineamento testo da centrare HTML: allineamento 36
36 e (unordered list) primo elemento secondo elemento e (ordered list) primo elemento secondo elemento HTML: elenchi 37
37 Prova di documento Primo elemento della lista Secondo elemento della lista Terzo elemento della lista ……. HTML: esempio 38
38 HTML: esempio 39
39 Linee orizzontali Testo lampeggiante (solo per Netscape) questo testo lampeggia Testo scorrevole (solo per Explorer) questo testo scorre Commenti HTML: altri marcatori 40
40 NB: limmagine deve essere su un file a parte e deve essere in formato GIF, PNG o JPEG (BMP solo per Explorer) HTML: ">
41 Prova di documento HTML: esempio 42
42 HTML: esempio 43
43 Link... Gli indirizzi per trovare i documenti nel web sono detti Uniform Resource Locator (URL) e li identificano in modo univoco testo del link HTML: protocollo://indirizzo internet del server/pathname 44
44 Università di Milano HTML: protocollo indirizzo internet del server Informatica Generale protocollo indirizzo internet del serverpathname 45
45 Link interni allo stesso documento: si usa lattributo name del tag HTML: Articolo 1 Articolo 2 Articolo 3 … Articolo 20 Articolo 1 bla bla bla bla bla bla bla bla bla bla bla Articolo 2 bla bla bla bla bla bla bla bla bla bla bla ………………………………………………………. 46
46 Si devono marcare quelle porzioni del documento dove si vuole "saltare" HTML: Articolo 1 Articolo 2 Articolo 3 … Articolo 20 Articolo 1 bla bla bla bla bla bla bla bla bla bla bla Articolo 2 bla bla bla bla bla bla bla bla bla bla bla ………………………………………………………. 47
47 Per i link interni si deve usare nellattributo href il nome scelto come valore dellattributo name, preceduto dal simbolo # HTML: Articolo 1 Articolo 2 Articolo 3 … Articolo 20 Articolo 1 bla bla bla bla bla bla bla bla bla bla bla Articolo 2 bla bla bla bla bla bla bla bla bla bla bla ………………………………………………………. Articolo1 Articolo2 Articolo3 48
48 Formati audio.au.aiff.mid.wav clicca qui Attenzione alle dimensioni dei file … in rete ci mettono tempo ad essere scaricati! NB: bgsound fa partire l audio quando si entra nella pagina ma funziona solo in Explorer HTML: audio 49
49 Formati video.mpg.avi.mov clicca qui NB: dynsrc fa partire automaticamente il video ma funziona solo in Explorer HTML: video 50
50 Prova di inserimento video Fai partire il filmato dell'orologio HTML: esempio Fai partire il filmato dell'orologio HTML: esempio">
Fai partire il filmato dell'orologio HTML: esempio">
Fai partire il filmato dell'orologio HTML: esempio" title="50 Prova di inserimento video Fai partire il filmato dell'orologio HTML: esempio">
51 HTML: esempio 52
52 HTML: tabelle 53
53 Uno Due aaaaaaaaa bbbbbbbb cccccccc dddddd HTML: Uno Due aaaaaaaaa bbbbbbbb ccccccccdddddd 54
54 HTML: HTML:">
HTML:">
HTML:" title="54 HTML:">
55 HTML: HTML:">
56 …… … una tartaruga … dei pinguini ……. HTML: esempio 57
57 HTML: esempio …. …. 58
58 Le tabelle si usano principalmente per organizzare gli elementi allinterno di una pagina Per fare questo si non si visualizzano i bordi righe e colonne HTML: tabelle Scaricare ppt "HTML il linguaggio per creare le pagine per il web Parte I: elementi di base."

References: Articolo 1
 Articolo 2
 Articolo 3
 Articolo 20
 Articolo 1
 Articolo 2
 Articolo 1
 Articolo 2
 Articolo 3
 Articolo 20
 Articolo 1
 Articolo 2
 Articolo 1
 Articolo 2
 Articolo 3
 Articolo 20
 Articolo 1
 Articolo 2
 Articolo1
 Articolo2
 Articolo3