BIOINFO3 - Lezione 091 HTML E PAGINE WEB Hyper Text Markup Language E il linguaggio con cui sono codificate le pagine WEB che vediamo attraverso i browser.

Presentazione sul tema: "BIOINFO3 - Lezione 091 HTML E PAGINE WEB Hyper Text Markup Language E il linguaggio con cui sono codificate le pagine WEB che vediamo attraverso i browser."— Transcript della presentazione:

1 BIOINFO3 - Lezione 091 HTML E PAGINE WEB Hyper Text Markup Language E il linguaggio con cui sono codificate le pagine WEB che vediamo attraverso i browser. Quando noi chiediamo al nostro browser di visualizzarci una certa pagina web, egli in realtà chiede ad un server WEB (avente lindirizzo specificato) di fornirgli un file (avente il nome della pagina). In realtà i browser possono interpretare anche file locali residenti nel computer Il file è un comunissimo file di testo, contenente però al suo interno alcuni simboli e parole chiave di HTML. E quindi il browser ad interpretare i comandi HTML e a costruire e mostrarci le pagine nel formato a noi consueto

2 BIOINFO3 - Lezione 092 SERVER WEB Siamo ancora di fronte ad una architettura di tipo client-server. Il client è il programma browser (NETSCAPE, EXPLORER, GALEON,..) in esecuzione sul nostro computer. Il server è un programma (chiamato httpd) sempre in esecuzione su un computer avente un certo indirizzo internet, perennemente in attesa che un client gli chieda di inviargli un file. I file sono solo quelli raggiungibili dal server in una directory predefinita (tipicamente chiamata html) dellhard disk installato sulla macchina server BROWSER client HTTPD server html

3 BIOINFO3 - Lezione 093 COSA SUCCEDE NEL CLIENT? 1.Supponiamo di scrivere nella finestrella location (o address del nostro browser http://didattica.cribi.unipd.it/bioinfotre 2.Il browser capisce che deve collegarsi al server httpd che risiede allindirizzo internet didattica.cribi.unipd.it e chiedergli il file di nome index.html contenuto nella directory bioinfotre. Come in questo caso, se non si specifica il nome di un file, allora viene richiesto sempre il file index.html. 3.Attraverso internet, utilizzando un protocollo (insieme di regole che stabiliscono come deve avvenire un colloquio tra due computer collegati alla rete) chiamato TCP-IP ( Transmission Control Protocol/Internet Protocol ), il client chiede di collegarsi alla porta numero 80 del server avente lindirizzo didattica.cribi.unipd.it.

4 BIOINFO3 - Lezione 094 DEAMON Esistono molte altre porte in una macchina server, ad esempio la porta 21 per FTP (protocollo per il trasferimento di file, N.B. non interpretati e visualizzati da un browser come pagine WEB), la porta 23 per TELNET (terminale remoto), la porta 25 per la posta elettronica. HTTP è il protocollo usato per le pagine WEB. Queste porte rappresentano una sorta di presa a cui i client possono collegarsi per trasmettere richieste di servizi e ricevere i risultati A ciascuna porta è associato un programma server detto deamon. I deamon sono normalmente addormentati ma vengono risvegliati allarrivo di una richiesta e iniziano a servirla 21 23 25 80 ftpd telnetd smtpd httpd FTP TELNET SMTP HTTP Server disponibile nella rete

5 BIOINFO3 - Lezione 095 COSA SUCCEDE NEL SERVER? 4.Associato alla porta 80 del server, il programma httpd, risvegliato dalla richiesta di connessione, crea un nuovo processo figlio (un suo clone), destinato a servire solo questa richiesta e poi morire. Lhttpd padre torna invece ad addormentarsi, pronto per risvegliarsi ad ogni nuova richiesta (da altri client o ancora dallo stesso client) Lamministratore del server può stabilire il numero massimo di processi figli dellhttpd che possono essere vivi contemporaneamente, per non paralizzare il server in caso di troppe richieste. Vi è mai capitato di ricevere la risposta SERVER TOO BUSY tentando di collegarvi ad un sito web? Evidentemente in quel momento era stato raggiunto il limite!

6 BIOINFO3 - Lezione 096 COSA SUCCEDE POI? 5.Il client, ottenuta la connessione alla porta 80, invierà il seguente comando GET /bioinfotre/index.html HTTP/1.0¶¶ I due simboli ¶¶ in realtà rappresentano i due distinti caratteri di torna a inizio riga \r e vai a capo \n. Il comando chiede al server: forniscimi il file chiamato index.html che si trova allinterno della directory bioinfotre. 6.Il server (il clone che sta occupandosi personalmente del servizio) verifica lesistenza del file restituendo un messaggio derrore se il file non viene trovato. Se invece il file richiesto esiste allora lo legge e ne trasmette il contenuto al client, sempre attraverso questa sorta di aggancio presa-spina che si è creato attraverso la porta 80.

7 BIOINFO3 - Lezione 097 COME CONTINUA LA COSA? 7.Prima di trasferire il contenuto del file il server invierà al client anche lintestazione Content-type:text/html ¶¶ In pratica egli preannuncia al client che la sequenza di caratteri che sta per ricevere è letta da un file di testo contenente comandi html. (Ora i due ¶¶ sono due caratteri di vai a capo \n\n) 8.Come già anticipato, terminata la trasmissione del file, il clone del processo httpd muore, mentre il browser ha ricevuto interamente il file ed è ora in grado di mostrarci la pagina generata dai comandi HTML contenuti nel file

8 BIOINFO3 - Lezione 098 UNO SCHEMA RIASSUNTIVO 1 2 BROWSER 8 client server httpd 80 httpd Connessione a didattica.cribi.unipd.it:80 3 GET /bioinfotre/index.html HTTP/1.0 4 5 html bioinfotre index.html 6 7 Content-type:text/html Contenuto di

9 BIOINFO3 - Lezione 099 HTML Oggi sono disponibili moltissimi editor grafici di HTML che permettono di progettare in modo visuale le pagine web, senza avere alcuna conoscenza di HTML. E` comunque molto utile avere almeno una conoscenza di base dei comandi principali. I comandi HTML sono detti tag e sono racchiusi allinterno dei caratteri. Tipicamente un tag identifica linizio di un comando o di un formato particolare, mentre lo stesso tag ma con identifica la fine di quel formato o comando N.B. HTML è CaSE InsensiTIvE, ovvero i comandi possono essere indifferentemente scritti in maiuscolo e minuscolo

10 BIOINFO3 - Lezione 0910 HEAD & BODY In un file HTML solitamente si definisce una parte di intestazione (HEAD), che fornisce delle informazioni supplementari sulla pagina ed una parte di corpo (BODY) che rappresenta la pagina vera e propria. File html Inizio codifica HTML Fine codifica HTML Inizio intestazione Fine intestazione Inizio corpo Fine corpo

11 BIOINFO3 - Lezione 0911 TITLE Il tag si trova allinterno dellhead e rappresenta la frase che si vuol far comparire nella barra superiore del browser

12 BIOINFO3 - Lezione 0912 TESTO Il testo che deve apparire nella pagina viene scritto nel corpo N.B. In HTML i caratteri di vai a capo presenti nel testo sono ignorati. Si deve usare il tag

13 BIOINFO3 - Lezione 0913 HEADER E possibile definire 6 livelli di header (titoli del testo, es. capitoli, paragrafi, sottoparagrafi…)

14 BIOINFO3 - Lezione 0914 PARAGRAFI E RIGHE Un paragrafo è identificato dal tag. Per inserire una riga di separazione si usa N.B. Se in un tag vi sono dei parametri è necessario racchiuderli tra apici nel caso essi contenessero degli spazi Esempio: Se scrivessimo solo Mario sarebbe interpretato come valore del parametro font

15 BIOINFO3 - Lezione 0915 FONT E possibile specificare che font usare per una certa porzione del testo (fino al primo incontrato Size: può essere assoluta (da 1 a 7) o relativa (da -2 a +4 rispetto a quella base) Face: può essere ad esempio courier times new roman

16 BIOINFO3 - Lezione 0916 RGB Color: E formato da una terna di numeri esadecimali da due cifre ciascuno secondo lo standard RGB#RRGGBB Le tre cifre rappresentano il livello dei tre colori primari ROSSO, VERDE e BLU e variano da 00 (0) a FF (255) Ovviamente il bianco su sfondo bianco non si vede

17 BIOINFO3 - Lezione 0917 IMMAGINI Si usa il tag Src: specifica il nome di un file grafico contenente limmagine. Il file può avere un qualunque indirizzo web (assoluto) oppure risiedere sullo stesso server da cui è stata caricata la pagina che deve contenere limmagine (indirizzo relativo) Align: stabilisce lallineamento dellimmagine (bottom, top, left, right) Alt: specifica il testo visualizzato quando si passa col mouse sopra allimmagine Width e height: specificano le dimensioni da dare allimmagine. Se numeri interi vengono interpretati come pixel, se numeri col simbolo % sono interpretati come percentuale rispetto alle dimensioni reali dellimmagine

18 BIOINFO3 - Lezione 0918 CARATTERI SPECIALI Per inserire determinati caratteri speciali esiste una sintassi particolare che inizia con & e termina con ;

19 BIOINFO3 - Lezione 0919 IMPOSTAZIONI DEL BODY Si possono definire i colori dello sfondo della pagina (o addirittura impostare unimmagine come sfondo), così come i colori di default del testo, dei link e dei link già visitati Bgcolor: colore di sfondo della pagina Text: colore del testo Link: colore dei link Ulink: colore link già visitati Background: immagine da usare come sfondo

20 BIOINFO3 - Lezione 0920 RIEPILOGO Introduzione a HTML Il protocollo HTTP I tag principali di HTML: head, body, title, testo, header, paragrafi, font, immagini, caratteri speciali Lo standard RGB