HTML. HyperText Markup Language (linguaggio a marcatori per ipertesto)

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "HTML. HyperText Markup Language (linguaggio a marcatori per ipertesto)"

Andrea Masi
7 anni fa
Visualizzazioni

1 HTML HyperText Markup Language (linguaggio a marcatori per ipertesto)

2 Testi e Ipertesti Testi:. Beh Ipertesti: testi con collegamenti (links) possono anche contenere immagini (?) suoni filmati e diventare Multimediali

3 HTML Linguaggio descrittivo per le pagine web Differente da Pascal, Basic, C ed altri linguaggi di programmazione Marcatori (tags) identificati da <XYZ > descrivono il formato della pagina

4 HTML e HTTP Il PROTOCOLLO HTTP (Hyper Text Transfer Protocol) Fa comunicare il Browser con i web servers e trasferisce i documenti HTML (e gli oggetti a cui essi fanno riferimento) Un URL è l indirizzo Internet di un oggetto Normalmente un URL (Uniform Resource Locator) è del tipo: o ad es:

5 Protocollo Insieme di regole per lo scambio di informazioni fra entità Metodo concordato per lo svolgimento delle operazioni. Dal greco: proto-kolon = prima pagina, intestazione Insieme di regole stabilite tra due parti per riuscire a comunicare in modo compatibile.

6 bruno: bruno: e.g. e.g. = example example given given URLs Assoluti: sottoraccoglitore/nomefile.tipo Relativi: nomefile.tipo e.g. pagina2.html tools/realpresenter.htm (giù di un livello)../suoni/test/thx.mp3 (su-giù-giù)

7 Oggetti e peso Immagini.gif,.jpg,.bmp.png suoni.mp3.wav.mid video.mpg.flv.avi.rm animazioni flash.swf ogni oggetto ha un peso (in KB) e un indirizzo (URL) Il peso complessivo della pagina è la somma dei pesi degli oggetti contenuti

bruno: bruno: Internet Internet Information Information Server Server Il web server È un elaboratore che ospita alcuni domini e siti e contiene le pagine, i documenti, gli oggetti etc ad

8 bruno: bruno: Internet Internet Information Information Server Server Il web server È un elaboratore che ospita alcuni domini e siti e contiene le pagine, i documenti, gli oggetti etc ad essi relativi Un programma WEB server (come IIS della Microsoft o Apache, Open Source) serve i documenti ai clients (browsers) Il web server comunica con i browsers tramite il protocollo Http.

9 La pagina WEB Al contrario delle pagine di giornale, di libro etc non ha dimensioni predefinite luuungaaaa largaaaaa a piacere? Contiene codice HTML

10 cip: cip: I I tags tags sono sono solitamente solitamente aperti aperti e poi poi chiusi chiusi HTML: struttura di pagina <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

11 HTML: il titolo Appare nella cornice del browser <title> ecco la mia prima pagina </title> fondamentale! I commenti, utilissimi per l autore.

12 Tipo font HTML: i caratteri (fonts) testo in Arial Attributi (bold, underline, italic apice pedice strike ) testo in grassetto testo in corsivo corsivo Dimensioni colore testo blu ovvero: testo blu

13 HTML: i caratteri II Dimensioni size="5" colore testo blu ovvero: testo blu

14 HTML: links I links (collegamenti) rendono Ipertestuale l Internet Esterni al dominio/sito (sempre assoluti) Interni al dominio/sito (relativi) interni alla pagina <a href="#verbale">capacità verbale</a> salta a: <a name="verbale"></a> si possono linkare testi o immagini

15 LINKS: esempi Da: <a href= pagina2.html > clicca qui </a> Le risorse per webmaster sono su <a href=" <a href= foto2.jpg > vedi l immagine </a> Hotlinking ovvero furto di banda

16 HTML: tags vari : paragrafo testo salto riga

cip: cip: Copiare Copiare alla alla grande grande HTML: Il Browser Il Browser (Internet Explorer, Netscape, Mozilla, Firefox, Chrome, Opera ) opera sul client (spesso un PC) e

17 cip: cip: Copiare Copiare alla alla grande grande HTML: Il Browser Il Browser (Internet Explorer, Netscape, Mozilla, Firefox, Chrome, Opera ) opera sul client (spesso un PC) e visualizza le pagine HTML eseguendo i comandi (in chiaro) che esse contengono In caso di documenti in altri formati (PDF, DOC,... viene lanciato il lettore appropriato Il linguaggio è interpretato

18 (*) (*) Dipende dal dal S.O. S.O. del del server server (windows o Unix) Unix) Pagine HTML nomepagina.htm o nomepagina.html Maiuscole e minuscole (ahime!) spesso contano: (*) Bruno.html diverso da bruno.html diverso da bruno.htm la pagina iniziale di un sito solitamente si chiama index.html o index.htm

19 Oggetti nella pagina Ogni oggetto è un file sul server gif, jpg, flash PDF, DOC, PPT etc etc Il browser scarica la pagina html da internet, la legge e poi richiede tutti gli oggetti contenuti (in parallelo)

20 Immagini Sfondi (piastrelle, listoni, immaginone) (attenti ai colori killer e alla leggibilità) cerca background library su google pulsanti etc. button library gif animate animated gif library autocostruite con easy gif animator (shareware 30 colpi) icone

21 Pulsanti Autocostruiti? Animati?

22 Easy Gif animator Shareware 30 usi

23 Errori Errori tipici tipici Attenzione!! Tutti i nomi e tipi di oggetti in minuscolo!!! Abbreviare i nomi troppo lunghi o complicati Senza spazi (eliminare) tipi files.jpg o.jpeg. tutti i files nello stesso raccoglitore (per siti molto semplici)

24 Attenzione!! (2) Indirizzi e links relativi!!! Assoluti solo se esterni al sito Esempio di link relativo <a href= pagina2.html > clicca qui </a> Assoluto: <a href= > clicca qui </a>

25 bruno:midi=musical bruno:midi=musical Instruments Instruments Digital Digital Interface Interface Suoni su internet: pagine musicali Formati audio WAV (pesante) MP3 (attenzione al copyright!) WMA (Windows Media) MIDI (solo note, niente voce) Audio Streaming Realaudio (WOW!!!!!)

26 cip: cip: e.g.= e.g.= Example Example Given Given HTML: risorse su internet e.g. (per le immagini) mille altri

27 A parte FTP e upload

28 Altre risorse Gif animate su server \\Server\scientifico\cdsoft\gif MIDI su server \\Server\scientifico\cdsoft\suoni\midi

29 Da fare Meta tags

30 Esercizi: I Utilizziamo il browser, e l editor di testo Crea un raccoglitore col nome del progetto Con l editor di testo scrivi una frase qualsiasi ( ciao a tutti ) senza tags! e salva il documento di testo come index.html Aprilo con il browser (drag and drop) cosa succede? (il browser è di bocca buona!)

31 Esercizi: II Inserisci il primo tag <html> e </html>

32 Esercizi III

33 Esercizi: IV Varia il colore e le dimensioni e gli attributi del testo inserisci il tag <title> </title> Dove appare il titolo nel browser?

34 cip: cip: l MP3 l MP3 viene viene accettato accettato dal dal tuo tuo provider? provider? Esercizi: IV Inserisci oggetti nella pagina: immagini Gif immagini GIF animate immagini Jpeg suoni (midi, wav, mp3 )

35 Esercizi: V Inserisci collegamenti nella pagina <A href= altrapagina.html >frase </A> A sta per Anchor, il tag A href è il tag più importante in assoluto poiché senza di esso non esisterebbero collegamenti fra le pagine (Link) è l ipertestualità scomparirebbe.

36 Esercizi: VI Giochiamo con gli extra cosa fa questo target=blank nel tag <a href? <a href= url target="blank">frase</a>

37 Esercizi: VII Cosa fà il qualificatore alt= frase nel tag img? <IMG align=middle alt= che bella foto!" height=240 src= foto.jpg" width=320>

38 Esercizio finale Prepara due-tre pagine personali con: immagine di sfondo, suoni almeno una occorrenza di ognuno dei tags della dispensa link da pagina1 a pagina2 e viceversa Almeno due links esterni almeno una immagine di ogni tipo, inserire i metadati nell immagine

39 Ancora.. Inserire almeno un commento <!commento> Fare upload su tripod segnalare l esistenza a google Inviati un contenitore ZIP con il progetto su Gmail Quanto sono stati compressi in percentuale i vari files usati? Invia l url a bruno.cipolla@gmail.com

40 Attenzione a: Peso oggetti urls e links assoluti/relativi maiuscole/minuscole htm/html

Documenti analoghi

HTML Guida base. Guida grafica essenziale all Hyper Text Markup Language I parte

HTML Guida base. Guida grafica essenziale all Hyper Text Markup Language I parte HTML Guida base Guida grafica essenziale all Hyper Text Markup Language I parte In questa breve guida imparerai come è fatta la struttura della pagina HTML impostare il titolo della pagina impostare lo