World Wide Web

Aparitia

aplicatiei WWW Utilizarea aplicatiei WWW Functionarea aplicatiei WWW Sistemul URL Crearea paginilor Web
limbajul

HTML editoare HTML

World Wide Web

un

context hard i soft care permite accesarea facil a informaiilor rspndite pe mii de calculatoare din Internet - servere web cea mai populara aplicatie de informare din Internet

interfata accesibila, usor de utilizat asigua obtinerea unei cantitati mari de informatii intr-o forma expresiva si intr-un timp convenabil

World Wide Web - istoric

Web-ul a evoluat dintr-o aplicatie folosita pentru transmiterea datelor rezultate din experimente de fizica particulelor a aparut n 1989 la CERN - Tim Berners Lee scopul - asigurarea partajarii rapide si la distanta a rezultatelor experimentale primul prototip prezentat la conferinta Hypertex91 (decembrie), San Antonio, Texas februarie 1993 - prima interfata grafica - Mosaic - NCSA (Centru Supercalculatoare)

World Wide Web - evolutie

Marc Andersen a fondat Netscape Communications Inc., dedicata dezvoltarii softului pentru Web - Netscape Navigator Netscape a devenit companie publica in 1995 (1.5 miliarde dolari) 1994: CERN si MIT formeaza consortiul WWW, cu obiectivul de a dezvolta Web-ul

standardizarea protocoalelor, compatibilitate intr site-uri. Adresa: http://www.w3.org

Utilizarea aplicatiei WWW

Web-ul - o colectie de informatii raspandite pe serverele web, structurate in pagini si site-uri paginile pot contine legaturi catre alte pagini hipertexte, hiperlegaturi (hyperlink) click pe o hiperlegatura se aduce pagina asociata (sau se acceseaza resursa asociata) parcurgerea unor cantitati mari de informatii (limite: exclusiv temporale+viteza conectiei)

Utilizarea aplicatiei WWW

Navigatoare (browsere) - programe care permit vizualizarea paginilor web si accesarea hiperlegaturilor (a resurselor asociate) navigatoarele aduc pagina ceruta si afiseaza continutul pe ecran, interpretand comenzile de formatare si includere de obiecte elemente continute in pagini: texte, hiperlegaturi, adrese de mail, obiecte integrate (imagini, grafice, obiecte multimedia)

Utilizarea aplicatiei WWW

Navigarea - cu ajutorul hiperlegaturilor, butoanelor Back, Forward + bookmarks optiuni de configurare a navigatoarelor alte interfete: text (lynx), bazata pe voce pagini hipermedia - contin secvente multimedia (pentru anumite obiecte se pot utiliza
programe auxiliare de vizualizare / executie)

problema incarcarii imaginilor (intai textele, apoi

imbunatatirea rezolutiei; compresii)

Aplicatia WWW - pagini speciale

Harti

- permit selectarea unor portiuni si marirea / micsorarea imaginii Formulare - asigura preluarea accesibila informatiilor pe Web, prin obiecte de control
Aplicatii:

comert electronic (comenzi, tranzactii electronice, descrieri de produse), sondaje de opinie, evaluari de cunostinte, introducerea de informatii personale pentru acces la diverse servicii Internet

Aplicatia WWW
Motoare

de cautare : www.google.com, www.altavista.com, www.yahoo.com retinerea paginilor in memoria cache navigatoarele se pot utiliza de pe calculatoare conectate direct la Internet sau la un server / router din Internet, eventual chiar printr-o linie telefonica la baza transferului de informatii stau conexiunile TCP

Functionarea aplicatiei WWW

protocolul

care descrie cererile (client) + raspunsurile (server) de accesare a paginilor web HTTP (HyperText Transfer Protocol) sistemul de adresare a resurselor - URL (Uniform Resource Locator) protocol://server/resursa URL se utilizeaza pentru accesarea din navigatoare a unor resurse diverse (implicit protocolul = http)

Functionarea aplicatiei WWW

Actiunile realizate de navigator pentru transferul unei pagini web referite cu URL:

afla IP-ul serverului (specificat uzual cu DNS) si realizeaza conexiunea TCP trimite o comanda de transfer a fisierului cerut (conexiunea se elibereaza dupa transfer) afiseaza fisierul in formatul specificat (interpreteaza sursa HTML)

HTTP = protocol ASCII simplu (cereri si raspunsuri tip MIME)

Functionarea aplicatiei WWW

Serverele proxy

se utilizeaza ca si porti de comunicare intre programul de navigare si server, de exemplu in cazul in care cele 2 folosesc protocoale diferite solutia proxy - fizica si logica (programe) un server proxy poate deservi mai multe programe de navigare de pe calculatoare client, putand asigura conectarea la Internet a mai multor calculatoare dintr-o retea locala mecanisme de memorie cache pentru pagini mecanisme de restrictionare a accesului la anumite adrese prin serverele web (proxy)

Sistemul URL

Un mod de adresare a paginilor web si, mai general, a unor resurse diverse din browsere protocol://server/resursa - integreaza intr-o forma accesibila, din navigatoare, diverse servicii Internet protocolul implicit = http (pentru pagini web)

apar in bara de adresare, hiperlegaturi sau bookmarks

http://www.euro.ubbcluj.ro, http://www.ubbcluj.ro/, http://www.yahoo.com, http://www.netscape.com, http://www.microsoft.com/, http://www.unige.ch/eua

fisier implicit - index.htm (index.html)

Sistemul URL - protocoale

http - protocol nativ pentru pagini web ftp - compatibilitate cu File Transfer Protocol

ftp://ftp.ubbcluj.ro/ , ftp://ftp.utcluj.ro

file - deschiderea unui fisier local -nume+cale telnet - conectare la distanta news - acces la articole de stiri (din navigator)

news://comp.infosystems.www.providers

gopher - sistemul care a precedat web-ul mailto - deschide formular de mail

mailto:euro@euro.ubbcluj.ro

Limbajul HTML

HyperText Markup Language - un limbaj creat pentru a descrie formatul paginilor web fisierele HTML sunt interpretate de browsere bazat pe principii de marcare (marcaje, tags) <marcaj> </marcaj> fisiere text

fisierele scrise in limbaje de marcare sunt portabile, interpretarea lor fiind convenabila si similara in contexte diferite (Ex. LaTeX fata de Word)

procesoarele de documente (What You See Is What You Get) ascund marcajele

Evolutia elementelor limbajului HTML (primele 3 versiuni)

Crearea paginilor web

direct

in limbajul HTML - cu un procesor de texte. Importanta cunoasterii sintaxei si

marcajelor pentru corectari de erori, modificari

folosind

editoare HTML, care genereaza automat cod HTML in urma introducerii obiectelor dorite, intr-o interfata vizuala
Exemple:

Netscape Composer, Microsoft Front Page, Front Page Editor

folosind

facilitatile de integrare in web si salvare in format HTML ale produselor Microsoft Office

Elementele limbajului HTML

Marcaje (simple si cu parametri)

<tip_obiect> ... </tip_obiect> <tip_obiect param1=valoare1 param2=valoare2 >

Tipuri de marcaje

de baza - delimitarea paginii, titlului, corpului structurarea documentului - subtitluri, paragrafe formatarea textului si crerea listelor crearea hiperlegaturilor introducerea de obiecte - tabele, formule, imagini, obiecte multimedia, formulare in ultimele versiuni - frame-uri, applet-uri Java

Limbajul HTML

Marcaje de baza

antet <HEAD> </HEAD> ; contine titlul paginii <TITLE> </TITLE> corp <BODY> </BODY> subtitluri <H1> </H1> <H6> </H6> linie noua <BR> ; linie orizontala <HR> paragraf nou <P> </P>

Marcaje pentru structurarea documentului

Limbajul HTML
Marcaje

pentru formatarea textului caractere aldine - <B> </B>

cursive - <I> </I> caractere subliniate - <U> </U> marimea fonturilor si culori <FONT SIZE=x COLOR=y> </FONT>
caractere

Marcaje

pentru crearea listelor

de lista - <LI> </LI> liste ordonate - <OL> </OL> liste neordonate - <UL> </UL>
element

Limbajul HTML

Marcaje pentru hiperlegaturi - <A></A>

adrese URL fisiere / resurse locale (link-uri locale) link-uri interne, catre zone din document Parametri:

HREF = adresa URL sau specificarea fisierului local NAME = numele hiperlegaturii sau zonei din pagina METHODS = metodele de acces <A HREF=resursa> text </A> - link local / URL <A NAME=nume-zona> - link intern

Exemple:

Limbajul HTML
Marcaje

pentru introducerea de obiecte

<TABLE> </TABLE>

Tabele:

parametri: BORDER, RULES titlu: <CAPTION>; antet <TH> </TH> coloane: <COL> cu parametrul ALLIGN (=LEFT, CENTER, RIGHT) linie noua: <TR> ; celula <TD> (cu ALLIGN)
Imagini:

<IMG> </IMG>. Parametri:

SRC = URL-ul imaginii / calea fisierului local ALLIGN = TOP, MIDDLE, BOTTOM (alinierea) ALT = textul de afisat in locul imaginii (daca se dezactiveaza afisarea imaginilor) ; ISMAP harta parametri specifici pentru obiecte multimedia

Editoare HTML
Front

Page Editor