docil materiale su HTML in formato PDF
download 
Reclamo Transcript
il materiale su HTML in formato PDF
HTML HyperText Markup Language (linguaggio a marcatori per ipertesto) Testi e Ipertesti • Testi: …. Beh … • Ipertesti: testi con collegamenti (links) • possono anche contenere – immagini (?) – suoni – filmati • e diventare Multimediali 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 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: “http://www.dominio.ext/racco1/racco2/nomefile.tip o • ad es: http://www.yahoo.com/index.htm 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. bruno: bruno:e.g. e.g.== “example “examplegiven” given” URLs • Assoluti: http://www.nomedominio.tipo/raccoglitore/ sottoraccoglitore/nomefile.tipo • Relativi: – nomefile.tipo e.g. pagina2.html – tools/realpresenter.htm (giù di un livello) – ../suoni/test/thx.mp3 (su-giù-giù) 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 InformationServer 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. La pagina WEB • Al contrario delle pagine di giornale, di libro etc non ha dimensioni predefinite • luuungaaaa • largaaaaa • a piacere? • Contiene codice HTML cip: cip:I Itags tagssono sono solitamente solitamenteaperti apertiee poi poichiusi chiusi HTML: struttura di pagina <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> HTML: il titolo • • • • • Appare nella cornice del browser <title> ecco la mia prima pagina </title> fondamentale! I commenti, utilissimi per l’autore. <!-- questo è un commento --> HTML: i caratteri (fonts) • • • • • • • • Tipo font <font face="Arial">testo in Arial</font> Attributi (bold, underline, italic…apice pedice strike ) <b>testo in grassetto</b> <i>testo in corsivo</i> corsivo Dimensioni colore <font color="blue">testo blu</font> • ovvero: • <font color="#0000FF">testo blu</font> HTML: i caratteri II • • • • • • Dimensioni size="5" colore <font color="blue">testo blu</font> ovvero: <font color="#0000FF">testo blu</font> 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 LINKS: esempi • Da: http://www.html.it/guida/html_22.htm • <a href=“pagina2.html”> clicca qui </a> • Le risorse per webmaster sono su <a href="http://www.html.it/">HTML.IT</a> • <a href=“foto2.jpg”> vedi l’immagine </a> • Hotlinking ovvero furto di banda HTML: tags vari • <p>: paragrafo • <p align="left">testo</p> • <br> salto riga cip: cip:Copiare Copiarealla 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 (*) (*)Dipende Dipendedal dalS.O. S.O.del delserver server (windows (windowsooUnix) 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” 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) 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 Pulsanti Autocostruiti? Animati? Easy Gif animator Shareware 30 “usi” Errori Erroritipici 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) 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=”http://www.yahoo.it/index.html”> clicca qui </a> bruno:MIDI=Musical bruno:MIDI=MusicalInstruments InstrumentsDigital 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!!!!!) cip: cip:e.g.= e.g.=Example Example Given Given HTML: risorse su internet • • • • • www.Html.it e.g. http://www.html.it/guida/html_26.htm (per le immagini) http://webspace.tiscali.it/guidahtml/ mille altri FTP e upload • A parte Altre risorse • • • • Gif animate su server \\Server\scientifico\cdsoft\gif MIDI su server \\Server\scientifico\cdsoft\suoni\midi Meta tags • Da fare 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! tags e salva il documento di testo come “index.html” • Aprilo con il browser (drag and drop) • cosa succede? (il browser è di bocca buona!) Esercizi: II • Inserisci il primo tag <html> e </html> Esercizi III Esercizi: IV • Varia il colore e le dimensioni e gli attributi del testo • inserisci il tag <title> </title> • Dove appare il titolo nel browser? cip: cip:l’MP3 l’MP3viene viene accettato accettatodal daltuo tuo provider? provider? • • • • • Esercizi: IV Inserisci oggetti nella pagina: immagini Gif immagini GIF animate immagini Jpeg suoni (midi, wav, mp3 …) 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. Esercizi: VI • Giochiamo con gli extra • cosa fa questo “target=blank” nel tag “<a href”? • <a href=”url” target="blank">frase</a> 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> 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 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 [email protected] Attenzione a: • • • • Peso oggetti urls e links assoluti/relativi maiuscole/minuscole htm/html
