Limbajul  HTML  si  pagini  Web

  Reteaua WWW (WORLD  WIDE  WEB)

     Definitie

     Hipertext (in engleza hypertext) este o scriere nesecventiala care contine elemente de referiri (hiperlegaturi- hyperlink) care  la randul lor reprezinta o descriere  nesecventiala pentru transmiterea de informatii complete si utile pentru un utilizator-client care le utilizeaza prin intermediul unui calculator conectat la sistemul Internet realizandu-se conexiuni intre diverse documente si fisiere aflate in diverse locuri..

Conceptul de hipertext a fost introdus pentru prima data de Ted Nelson in cartea sa Literary Machines, concept care a fost preluat de Tim Berners-Lee pentru  elaborarea proiectului CERN (Conseil Europeen pour la Recherche Nucleaire) si care a dus la dezvoltarea retelei WWW (anul 1989).

           Hipertextul a fost folosit in cadrul mediului Internet pentru realizarea unei interfete unice si deosebite dintre utilizatorul-client care trebuia sa acceseze informatii de oriunde in lume, si sistemul Internet care trebuia sa stocheaza , prelucreaze si sa transmita informatii de diverse categorii: baze de date, rapoarte, documentatii tehnice, imagini, sunete, animatie, etc.

           Definitie.

           O pagina Web este un sistem de fisiere (de tip .html, .htm, .gif, .jpg, .zip, .xbm, , .wav, .mid, .au, etc.) in format hipertext ce formeaza pagini de prezentare in reteaua WWW si care poate fi accesata de orice utilizator cuplat la sistemul Internet din orice loc si la orice moment.

            Elaborarea (generarea) paginilor Web se face pe baza unui limbaj specific de descriere -inventat de Tim Berners-Lee-  numit limbaj de marcare hipertext HTML (HyperText Markup Language).

            Orice pagina Web trebuie sa reflecte scopul pentru care a fost creata.Textul, imaginile si sunetele trebuie sa comunice utilizarorului-client mesajul care se doreste a fi transmis. De aici, importanta conceperii paginilor Web pentru reteaua WWW ce poate fi accesata de orice utilizator-client.

            Definitie.

            Un document HTML este un fisier text (ASCII) scris in limbajul HTML si care contine diferite formatari de text. formatari de imagini, module pentru sunete, module pentru animatie, precum si hiperlegaturi pentru alte documente HTML.

            Un document HTML - de fapt o pagina Web- poate fi accesat de orice utilizator-client conectat la sistemul Internet prin intermediul programelor de navigare/explorare Web ( in engleza browsers), de exemplu Netscape Communicator, Internet Explorer, Mosaic ( pentru Windows), Lynx  (pentru Linux/Unix).

     Astazi, aceste programe ofera si module (editoare) pentru generarea codurilor HTML in urma elaborarii unei pagini Web.

     Versiunea HTML 4.0 a introdus conceptul de tip de media prin care un document HTML poate fi "vizualizat".

     Definitie

Un tip de media este orice dispozitiv(suport)  prin intermediul caruia pot fi obtinute informatiile continute intr-o pagina Web: text, imagini, secvente video si audio, animatie.

     Tipurile fundamentale de media sunt: ecranul, hartia. Tipurile de media sunt definite de specificatiile CSS (Cascading Style Sheets).

     Limbajul HTML care este utilizat la crearea paginilor Web se bazeaza pe limbajul de descriere a redactarii programelor si documentelor si care este denumit SGML (Standard Generalized Markup Language). S-au definit si alte limbaje de tip script mai simple si eficiene (de exemplu JavaScript).

Explorarea retelei WWW

      Accesarea paginilor Web cu ajutorul unui browser se realizeaza prin intermediul protocolului http (HyperText Transfer Protocol) care este implementat pe diverse servere, numite servere http.

Programul de navigare/explorare trimite mesaj catre serverul respectiv, prin care solicita ca anumite documente sau servicii sa fie puse la dispozitia utilizatorului care a cerut aceste  documente sau servicii. La randul sau, serverul accesat, raspunde cererilor prin transmiterea inapoi -catre statia de lucru a utilizatorului- a documentului sau serviciului utilizand protocolul http, iar programul de navigare/explorare il receptioneaza, il interpreteaza, in scopul solicitarii cerute.

            Calea de comunicatie dintre browser (program de navigare/explorare) si un server din sistemul Internet care gazduieste pagini Web se numeste interfata CGI (Common Gatway Interface).

Prin accesarea unei pagini Web, programul browser utilizat acceseaza(deschide) de fapt un document HTML. Acesta contine diverse formatari de texte sau imagini, secvente video si audio, precum si hiperlegaturi catre alte documente HTML.    

     Definitie.

O adresa URL (Uniform Resource Locators), numita locatia uniforma de resurse, este folosita de reteaua WWW pentru a specifica(localiza) fisierele ce contin paginile Web sau diverse informatii stocate pe un anumit server din sistemul Internet in vederea accesarii lor de catre utilizatorii-clienti.

      O adresa URL include tipul de resursa accesat ( de exemplu WWW, Gopher, WAIS, news, telnet, etc.), adresa serverului si calea(path) fisierului accesat.

       Sintaxa pentru a descrie o adresa(locatie) URL:

<scheme >://host.domain/path/file    ,

unde <scheme> poate reprezenta unul din elementele:

file - pentru un fisier local (din sistemul utilizatorului);

ftp  - pentru un fisier de pe un server  FTP anonim;

http - pentru un fisier de pe un server WWW;

gopher - pentru un fisier de pe un server Gopher;

wais -  pentru un fisier de pe un server WAIS;

news - pentru un grup (group) de stiri UseNet;

telnet - pentru o conexiune la un serviciu bazat pe Tenet.

Accesarea paginii Web a Institutului de Matematica al Academiei Romane:

       Pagini Web

     Reteaua WWW gestioneaza pagini Web (documente HTML) ce sunt stocate pe diverse servere din sistemul Internet si care pot fi accesate printr-o adresa URL de orice utilizator-client in orice moment si din orice loc prin intermediul unei statii de lucru (calculator) conectat la mediul Internet.

Conceperea si elaborarea paginilor Web pot fi realizate de specialisti sau utilizatori care au cunostinte minime despre calculatoare si mediul Internet, tinand seama ca astazi produsele software ofera facilitati moderne de utilizare, documentare  si invatare.

       Textul sursa pentru o pagina Web este un fisier ASCII ce contine coduri HTML si care poate fi interpretat de de un browser (Netscape Communicator, Internet Explorer, etc.). Din acest punct de vedere, proiectarea, elaborarea unei pagini Web ar insemna o activitate de programare, activitate care ar necesita o anumita pregatire.

      Experienta si rezultatele obtinute in domeniul informaticii au codus la implementarea unor editoare care sa ocoleasca operatia de programare si sa genereze codul HTML in functie de cerintele utilizatorului care are diverse optiuni in conceperea si elaborarea unei pagini Web. Aceste editoare sunt oferite astazi de orice program de navigare/explorare. De asemenea, unele procesoare de texte (de exemplu Word 97) ofera coversia unui document Word intr-un document HTML.

     Limbajul HTML ofera posibilitatea sa se incorporeze in textul sursa al unei pagini Web, secvente scrise in limbajele de programare Java, JavaScript, Visual Basic.

Elaborarea unei  pagini Web se poate realiza in urmatoarele variante:

direct - in cod HTML ; in acest caz trebuie sa se cumoasca limbajul HTML;

indirect - prin utilizarea programului Word si conversia in cod HTML;

editoare profesionale - Netscape Navigator Gold, Microsoft Front Page;

cu un browser - Netscape Communicator, Internet Explorer;

cu Formula Graphics - Multimedia System; dezvoltare de aplicatii multimedia.

      Definitie

      Un document HTML ce descrie o pagina Web este compus din punct de vedre a structurii, din elemente ce reprezinta: titluri, subtitluri,  paragrafe, liste,  definitii,  citate, tabele,  imagini, secvente audio-video, frame-uri, animatie si nume de hiperlegaturi ce fac referiri la alte documente HTML.

Exemplu: Pagina Web a revistei Gazeta de Informatica se acceseaza prin adresa URL https://www.ginfo.ro. Articolele aparute in revista pot fi consultate prin Internet.

      Exercitiu.

     Obtinerea de informatii despre activitatea didactica si de cercetare de la Catedra Chimie-Fizica, Facultatea de Chimie, Universitatea Bucuresti.

      Adresa URL pentru pagina Web: https://www.gw-chimie/

      Se apeleaza programul Netscape Communicator si pentru Location se      introduce   adresa URL precizata.

          Definitie.

           Un frame (cadru) este o fereastra (zona dreptunghiulara) in cadrul unei fereste afisata de un browser, zona in care este afisata o pagina Web, in timp ce alte pagini Web sunt afisate in alte zone din fereastra browser-ului.

Frame-urile au fost introduse in scopul vizualizarii in acelasi timp a mai multor pagini Web.

      Orice utilizator isi poate elabora propriile lui pagini Web pentru diverse scopuri (profesionale, sociale, culturale, generale, etc.).

      Exemplu.

      Domnul Mihai Budiu, a scris unele pagini Web pentru reteaua WWW in scopul unor discutii privind diverse articole de informatica.

       Exercitiu. Crearea unei pagini Web cu un browser

       Se lanseaza in executie un browser, de exemplu Netscape Communicator, se selecteaza functia Communicator, si apoi subfunctia Composer care afiseaza fereastra Composer (editor pentru pagini Web).

Se  editeaza continutul paginii conform cu dorintele utilizatorului si la terminare se va salva intr-un documemt HTML (extensia .htm sau .html). Elaborarea unei pagini Web simple si vizualizarea ei cu browser-ul Netscape Communicator.

            Fisier HTML care se genereaza automat: vlada.htm

           Exercitiu. Inserarea unei imagini ca element al paginii Web ce se elaboreaza

Fisierul generat in cod HTML : vlada1.html

            Limbajul HTML

Limbajul HTML (HyperText Markup Language) sa afla la baza descrierii paginilor Web.Un browser care acceseaza o pagina Web printr-o adresa URL deschide si interpreteaza un fisier text (ASCII) ce contine un cod HTML pentru a-l transmite tipului de media dorit de utilizator (ecran, imprimanta, etc.).

              Definitie.

Un document (fisier) HTML este un fisier text (ASCII) ce contine elementele de descriere pentru o pagina Web. Elementele de descriere sunt compuse din etichete de marcare. Orice document HTML trebuie sa contina unele etichete HTML standard. Fiecare document este constituit din antet (head) si un corp (body). Antetul contine un titlu, iar corpul contine diferite elemente: text, paragrafe, liste, tabele, imagini, secvente audio-video, legaturi.

     O eticheta de marcare HTML este constituita dintr-o parte de inceput(begin) si o parte de sfarsit (end) sub urmatoarea forma sintactica:

<descriere-begin>

       </descriere-end>       ,

unde descriere-begin este un nume sau o specificatie pentru un atribut corespunzator(de exemplu, pentru text indicatii de formatare, pentru imagini, indicatii de pozitionare), iar descriere-end este numele din descriere-begin.

     Principalele nume de etichete de marcare utilizate in limbajul HTML sunt:

html   - indica format de document HTML;

head   - identifica numele ce apare in partea de sus a ferestrei browser-ului;

title     - indica numele documentului;

body  - corpul documentului care interpretat de un browser va aparea in fereastra de afisare;

hn   - indica un titlu de nivel n (1,2,3,4,5,6);

p     - indica un paragraf;

ul    - lista nenumerotate (unnumbered list), marcata cu buline; se utilezeaza eticheta <li> fara marcaj final, pentru elementele listei (list item);

ol    - lista numerotata (orderer list), marcata cu numere arabe; se utilizeaza eticheta <li> fara marcaj final, pentru elementele listei (list item);

dl   - lista de definitie care contine mai multe descrieri ce utilizeaza eticheta <dt>, pentru termen de definit si <dd> pentru descrierea termenului, ambele etichete fiind fara marcaj de sfarsit;

pre  - text preformatat, de exmplu un text de program;

address   - indica adresa E-mail a autorului;

br  - delimitator de linii (forced break line);

hr  - linie orizontala;

a    - hiperlegatura;referinta la un alt document HTML;

img   - includerea unei imagini;

table  - tabele

       Exercitiu. Generarea unei pagini Web cu urmatorul continut:

Cursul de INFORMATICA

Lect. Dr. Marin Vlada

Volumul I

 SISTEME :

Calcul;

Operare;

Rezolvare;

Internet.

Volumul  II

ELABORARE:

Algoritmi;

Programe;

Aplicatii.

          Fisierul in cod HTML scris cu un editor ASCII trebuie sa aiba urmatorul continul:

            Programul Formula Graphics - Multimedia System

     Definitie.

Programul Formula Graphics este  un sistem multimedia pentru dezvoltarea aplicatiilor interactive multimedia prin utilizarea bazelor de date si a informatiilor din sistemul Internet  oferind utilizatorilor-clienti prelucrari in hypertext si grafica.

Programul prelucreaza imagini, animatie si sunete, si ofera un limbaj de programare pentru elaborarea de aplicatii multimedia. Ofera instrumente Java pentru elaborarea de pagini Web.

     Cu ajutorul programului Formula Graphics se elaboreaza urmatoarele produse:

Project - constituit din ecrane (screen), fiecare ecran din elemente; un element poate fi bachground, rectangle, picture, animation, animation si sound, video;

Script - cod in Script, Hypertext, HTML, Text.

La definirea unui ecran trebuie sa se percizeze parametri de identificare, un parametru fiind numele ecranului. Fiecare ecran se elaboreaza prin definirea de diverse elemente. Asupra fiecarui element se pot realiza operatii corespunzatoare tipului de element

      Exemplu. Proiectul sample.fgx este constituit din mai multe ecrane, denumite prin Pictures, Intro, HTML, Animation, Hypertext, etc. In imaginea de mai jos este prezentat ecranul HTML cu elementele din care este constituit. Pentru demonstratie a fost selectat elementul HTML Back. S-a afisat fereastra corespunzatoare acestui element in care sunt prezentate meniuri si butoane pentru identificarea lui si realizarea de operatii asupra lui.

File

        New Project

        Open Project

        New Script     (Script, Hypertext, HTML, Text)

        Open Script

               Save As

         Save

         Load Bitmaps

         Substract Bitmap

         Save Bitmap As

         Other  (load Palette, save palette)

          Load PSD ( Photoshop)

          Recent Bitmaps

          Recent Projects

          Recent texs

          Exit

Project

                  Project Options

                  Project Archives

                  Project Installation

                  New screen

                  Display Elements

                  Undisplay Elements

                   Display All elements

                   Undisplay All Elements

                   Play Screen

                   Play project

                   Play Internet

                   Stop Playing

Element

        Background

        Rectangle

        Picture

                Animation

        Animation+sound

        Video

               Sounds ( Sound, MIDI, CD, Audio)

               Text (text, HTML, Hypertext)

               Dialogs (Edit Box, List Box, Combo Box, Menu Box)

               Specials (Director, Explorer, Graph, Message, Progress Bar, Timer

        Input

         Wait

         Action

         Control

         Debug

Tools

                General Options

                 Bitmap Convert

                 Vector Convert

                 Animation Convert

                 Binary Convert

          Optimize Palette

          Animation Play

         Screen Capture

Window

              Arange All

               Close All

               Save All

               Open Graphics Windows

               Clear Graphics Windows

        Print Graphics Windows

        Project

        Graphics

        Language

        Result    

Help

Se utilizeaza urmatoarele ferestre (windows):

Fereastra Project - afiseaza  doua subfereste ( Screen si Element);

Fereastra Graphics - afiseaza continutul ecranului selectat in subfereasta Screen;

Fereastra Luanguage - scrierea de cod;

Fereastra Result - afiseaza rezultatul unor actiuni asupra elementelor.

     Pentru elaborarea unui proiect se selecteaza File New Project

Se va indica un nume pentru ecranul ce trebuie generat.

     Pentru fiecare ecran definit se genereaza elementele dorite folosind Element

   Dupa elaboararea proiectului, acesta trebuie salvat intr-un fisier.

        Exemplu. Fisierul  vlada1 din c:\fgx97 este un proiect constituit dintr-un ecran cu numele screen 1 si 5 elemente (ball_blu.gif, earth.gif, groovy97.gif, int_bld.gif, int_b2d.gif).

Continutul directorului c:\fgx97

© Universitatea din Bucuresti 2002.
No part of this text may be reproduced in any form without written permission of the University of Bucharest,
except for short quotations with the indication of the website address and the web page.
Comments to: Vlada Marin; Text editor: Vladimir Ioan Vararu and Magdalena Bostan; Last update: November