lnx.brescianet.com Sito didattico - Prof. Sechi Marco 3M - 1 Modulo Appunti illustrati in classe HTML ==> Hyper text Markup language

Transcript

1 lnx.brescianet.com Sito didattico - Prof. Sechi Marco FAQ Cerca Lista degli utenti Gruppi utenti Profilo Non ci sono nuovi messaggi Logout [ ] 3M - 1 Modulo Indice del forum -> Classe 3M - 1 Modulo Precedente :: Successivo Autore Messaggio Inviato: 16 Set :51 am Oggetto: 3M - 1 Modulo Appunti illustrati in classe Inviato: 16 Set :52 am Oggetto: 16/09/2006-3M HTML ==> Hyper text Markup language I file HTML sono file testuali caratterizzati dalla presenza di TAG ovvero parole "Chiave" comprese tra i simboli < > esempio <TABLE> I file HTML sono di tipo testuale (sequenze di caratteri ASCII) per via della loro alta portabilità. I files ascii possono essere letti da qualsiasi sistema operativo. Per formato si intende la modalità di registrazione di un certo documento. Solo l'applicativo che conosce il formato di un file è in grado di aprire quel file. Ogni prg ha il proprio formato per salvare i propri documenti Presentato cosa succede se rinomino un file di excel e poi tento di aprirlo con WORD.

2 http ==> hyper text transfer protocol ==> insieme di regole che definisce il trasferimento di files ipertestuali (file dotati di tag) --> mezzo di trasmissione per le pagine html I client http sono quei prg capaci di ricevere da un server HTTP le pagine WEB e di visualizzarli. Sono detti anche interpreti HTML. Client HTTP: Firefox, Internet Explorer, Netscape, Opera Le regole di definizione dell'html vengono fatte da un particolare ente w3c Le differenti versioni (rilasci) di HTML generano errori qualora un browser (client http) non supporti una determinata versione. I browser oltre a riconoscere i formato HTML sono in grado di interpretare dei linguaggi di programmazione (esempio JavaScript, VBScript etc.) VB Script è usato solo da IE - JavaScript ha un meccanismo insito nella sua struttura che gli impedisce di arrecare danni alla macchina ricevente (client http) riprendere con gli editor e le pagine statiche/dinamiche Inviato: 20 Set :46 am Oggetto: 3M - 20/09/2006 dinamica: cambia a secondo dell'input dell'utente: richiedono una programmazione lato server Le pagine statiche sono immutabili nel tempo - Quelle dinamiche invece cambiano a secondo dell'input dell'utente Le pagine statiche possono essere prodotte mediante editor (frontpage - dreamweaver - golive) I files html hanno estensione.htm o html (le 3 lettere seguono da un vincolo del dos che prevedeva nei nomi dei file una estensione di 3 caratteri) Un documento HTML inizia col tag <HTML> e finisce con </HTML>

3 tra <BODY> e </BODY> inseriremo il contenuto della ns pagina html Nella sezione <TITLE> </TITLE> avrò il titolo del documento Tra <HEAD> </HEAD> (testata) ho i meta tag. Consentono una classificazione del documento utilizzato da alcuni motori di ricerca, la definizione dell'autore e così via Il browser non considera le sequenza multiple di spazi od invii e le sostituisce sembre con un singolo spazio I documenti html sono ipertestuali poichè consentono di passare a documenti collegati mediante semplici click I tag sconosciuti vengono ignorati dal browser. Questo comportamento ha origine nell'esigenza di mantenere la portabilità tra le diverse versioni html esempio è il tag per sottolineare - I browser che non conoscono tale tag lo ignorano e non vanno in errore - gli altri faranno vedere la frase sottolineata riprendere da pagina 3 Inviato: 23 Set :51 am Oggetto: 3N - 23/09/2006 tenere il vademecum come riferimento I tag presentano generalmente delle direttive che ne modificano il comportamento di default (predefinito) esempio allineamento a sinistra con una riga al termine del paragrafo allineamento del testo centrato Alcuni tag pur andando in disuso rimangono attivi nei browser per compatibilità retroattiva (ovvero possono leggere vecchie pagine html prodotte tanti anni fa) Un tag non chiuso rimane attivo da quel momento in poi I codici iso sono composti da &@<codifica ascii>; I TAG e le direttive non risentono del maiuscolo/minuscolo

4 P ==> tag align ==> direttiva center ==> valore della direttiva (talvolta il minuscolo e maiuscolo danno risultati differenti) L'aspetto delle pagine HTML è legato alle impostazioni del client (browser) (vedi menu visualizza-carattere) I css (fogli di stile) garantiscono allo sviluppatore di pagine web di avere un'impaginazione invariante dalle impostazioni di IE gestione dei colori Scala rgb ==> rosso-verde-blu 0-->255 hex ==> codifica esadecimale (simboli disponibili 16 ==> 0,1,.9,A,.. F 0 ==> 00 1 ==> ==> ==> 0A 11 ==> 0B 12 ==> 0C 13 ==> 0D 14 ==> 0E 15 ==> 0F 16 ==> ==> ==> FF #FF0000 ==> rosso #00FF00 ==> verde #0000FF ==> blu #FFFF00 ==> giallo #FFFFFF ==> bianco # ==> nero Nella valorizzazione delle direttive non è obbligatorio usare il doppio apice a meno che il valore non presenti al suo interno degli spazi esempio Testo -----

5 riprendere con le trasformazioni hex-dec e pagina 5 Inviato: 27 Set :51 am Oggetto: 3M - 1 Modulo 2^24 ==> numero di colori FE digit ==> simboli usati nella notazione di un numero 1 digit==> 1 simbolo a sinistra 2 digit==> 1 simbolo a destra 0 ==> 0 1 ==> ==> 9 10 ==> A 11 ==> B 12 ==> C 13 ==> D 14 ==> E 15 ==> F hex==> dec <1 digit>*16+<2 digit> FF==>15*16+15 (F è 15 in decimale) FE ==> 15*16+14 (E è 14 in decimale) A0 ==> 10*16+0 (E è 14 in decimale) dec ==> hex N è un numero intero espresso in notazione decimale esempio 255 Il resto della divisione per 16 è 15 che in hex è F ==> 2 digit la divisione intera tra 255 e 16 è 15 che in hex è F ==> 1 digit

6 esempio 81 in dec corrisponde a 51 in hex Il primo digit è il simbolo esadecimale corrispondente alla divisione intera tra il numero N e 16 Il secondo digit è il simbolo esadecimale corrispondente al resto della divisione tra il numero N e 16 Da fare esercizio 9 x la prossima lezione Nella valorizzazione delle direttive non è obbligatorio usare il doppio apice a meno che il valore non presenti al suo interno degli spazi esempio Testo <hr width=100 align=right size=15 noshade> Ciao e come scrivere Ciao carattere monospaziato : esempio courier ==> ogni carattere occupa il medesimo spazio. Generalmente lo spazio viene allargato o ristretto per ottenere allineamenti giustificati Liste ordinate ==> order list <OL> Liste non ordinate ==> unorder list <UL> elementi della lista <LI> (list item) <DL>==> definition list (unico con chiusura) <DT> definition term <DD> definition description <OL> <LI>Cap 1 <OL> <LI>Par 1.1 <LI>Par 1.2 <UL> <LI>Nota 1.2.a <LI>Nota 1.2.b </UL>

7 <LI>Par 1.3 </OL> <LI>Cap 2 <OL> <LI>Par 2.1 <LI>Par 2.2 </OL> </OL> Inviato: 30 Set :03 am Oggetto: 3M - 30/09/2006 fare esercizi 3 e 4 Le dimensioni sono espresse in pixel (punto luminoso del monitor) oppure in % Se in % la dimensione è riferita alla larghezza ed altezza della finestra del browser <IMG SRC="fldclose.GIF" width=100 height=100 border=3 alt="titolo"> La direttiva ALT (alternate text) consente di classificare l'immagine (utile nei motori di ricerca). L'effetto è quello di un tooltip (rettangolino giallo a scomparsa che appare per fornire un breve help all'utente) che contiene il valore assegnato a tale direttiva Le dimensioni dell'immagine vanno generalmente aggiunte. Chi naviga con cellulari solitamente x questioni di velocità disabilita il download delle immagini. Pertanto il layout (aspetto) della pagina quando non sono inserite le dimensioni cambia totalmente (ogni singola immagine viene sostituita con un quadratino 16x16) Non è opportuno utilizzare il ridimensionamento per ottenere immagini + piccole poichè le dimensioni in byte dell'immagine rimane inalterata Nei percorsi dei files.. indica la cartella precedente a quella corrente Nei percorsi dei files. indica la cartella corrente per cartella corrente si intende la cartella del documento html che contiene il tag <IMG> <img src=./pippo.gif> è equivalente a <img src=pippo.gif> i percorsi che fanno riferimento a... o niente (images/pippo.gif) si dicono relativi esercizio 10 (spiegato) <img src=/pippo.gif> supponiamo che pippo.gif sia sul floppy - la sua unità logica è a: a:\ ==> indica la radice di a:

8 se page1.html è su c: (disco fisso) allora scrivere <IMG SRC=/pippo.gif> è equivalente a <img src="c:\pippo.gif"> a:\ ==> radice di a: a:\pippo.gif ==> pippo.gif è nella radice di a: a:pippo.gif ==> è relativo alla cartella corrente di A: i percorsi con / iniziale si dicono assoluti e fanno riferimento sempre all'unità logica corrente del documento html Nei nomi del file devo stare attento al maiuscolo/minuscolo se il server dove pubblico le pagine è di tipo unix Inviato: 07 Ott :52 am Oggetto: 3M - 7/10/2006 HREF="/pippo.htm" fa riferimento alla document root di quel web server (detta anche radice) (riferimento assoluto --> risentono degli spostamenti) HREF="pippo.htm" fa riferimento alla cartella corrente del documento che contiene il tag <A> (riferimento relativo) usare sempre quelli relativi - Non risentono degli spostamenti nelle cartelle del vs HardDisk index.htm ==> nome del documento predefinito (directory index) ovvero il documento che verrà caricato quando non si specifica nel percorso un nome di file è equivalente a eser 5 e 6 x martedì fatto veder come si ottiene effetto traparenza (immagini gif + photo Editor (strumento simile ad una matita)) Segnalibri <A HREF=#CAP1>capitolo 1</A> questo link vi porterà al segnalibro CAP1 (# ==> sharp) - Qui sotto il segnalìbro <A NAME=CAP1>Capitolo 1</A> link a segnalibro esterno <A HREF=hhh.htm#CAP3>Capitolo 3 di HHH.HTM</A> ^^^^ riprendere dal link con la mail

9 Inviato: 11 Ott :07 am Oggetto: 3M - 11/10/2006 <A HREF="mailto:molinam@gsnet.it">Paolo Rossi</A> Il collegamento ad una casella di posta fatto in questo modo è efficace solo per quegli utenti che stanno navigando sul vs sito con il loro PC con OUTLOOK (client di posta predefinito) già configurato. Generalmente è preferibile usare una pagina lato server come: spiegato come ottimizzare l'immagine di sfondo sfruttando il comportamento di riempimento della direttiva background del tag BODY La direttiva SIZE del tag FONT è relativa all'impostazione del browser (far vedere dove è impostata) Riprendere dai font TrueType (spiegare differenze) TT ==> TrueType ==> font vettoriali ovvero descritti mediante equazioni matematiche ==> non presentano deformazioni se ingranditi A ==> Font Bitmap ==> descritti come punti ==> ingrandendo i punti aumentano di dimensione e si presentano con un effetto "scalettatura" courier (monospaziato), arial, tahoma, verdana, times new roman nelle tabelle non superate gli 800 pixel nelle dimensioni (direttiva width) pubblicare l'esercizio 2 e 5 x sabato sul forum spiegati i motivi per cui non risultano + gestite le chiusure </TD> e a</tr> (voi le dovete comunque sempre inserire) <table border=1 BGCOLOR=#ff0000 cellspacing=10 cellpadding=10 width=50%> <tr height=50%><th>col 1</th><th>Col 2</th></tr> <tr><td width=100>col 1</td><td>Col 2</td></tr> <tr><td>1,1</td><td BGCOLOR=#ffff00>1,2</td></tr> <tr><td>2,1</td><td>2,2</td></tr> </table> P ==> align==> left, right, center, justif Inviato: 18 Ott :22 am Oggetto: 3M - 18/10/2006

10 ... impedisce il ritorno a capo automatico <blink> non va in Internet Explorer (IE) i tag non riconosciuti dal browser vengono ignorati Mostra prima i messaggi di: Tutti i messaggi Prima i vecchi Vai Indice del forum -> Classe 3M - 1 Modulo Tutti i fusi orari sono GMT Pagina 1 di 1 Controlla questo Topic Vai a: Classe 3M - 1 Modulo Vai Puoi inserire nuovi Topic in questo forum Puoi rispondere ai Topic in questo forum Puoi modificare i tuoi messaggi in questo forum Puoi cancellare i tuoi messaggi in questo forum Puoi votare nei sondaggi in questo forum Puoi moderare questo forum Administration Panel Powered by phpbb , 2002 phpbb Group