CATEGORII DOCUMENTE |
Scurt istoric al HTML
Ca descendent al SGML-ului, limbajul HTML are o istorie care debuteaza cu publicarea in 1986 de catre Organizatia internationala pentru standardizare (ISO) a unui articol intitulat 'Information Processing - Text and Office Systems - Standard Generalized Markup Language (SGML)'. Dupa trei ani, Tim Berners-Lee de la CERN inainteaza o propunere - proiect ce a circulat sub numele de 'HyperText and CERN' - de sistem de documente hipertext, denumit in octombrie 1990 World-Wide Web. El scrie de asemeni prima aplicatie Web, un pachet de server Web rulind pe calculatoare NeXT. In noiembrie 1990, Nicola Pellow incepe sa conceapa un navigator (browser) text care la sfirsitul aceluiasi an era disponibil in cadrul CERN.
In mai 1991, CERN prezinta WWW la seminarul anual si browserele in mod linie pentru platforme ca VAX, RS6000 si SUN sint disponibile pe grupurile de stiri alt.hypertext, comp.sys.net, comp.text.sgml si comp.mail.multi-media (august 1991).
Dan Connolly se alatura proiectului Web, iar experienta sa in utilitare de documentare on-line si sisteme formale il ajuta sa dezvolte specificatia pentru HTML. Pe data de 15 ianuarie 1992 apare pentru prima data, disponibil prin FTP anonim, un browser text conceput de CERN, interpretind noul limbaj HTML, prezentat si la AIHEP'92 - La Londe. Proiectului Web i se alatura Jean-Francois Groff si Carl Barker.
In 1993, primul navigator grafic, numit Mosaic, rulind sub X Window este proiectat de Marc Andreesen si facut public de NCSA (luna februarie). Mosaic utilizeaza primul standardul HTML, bazat pe tag-uri, inspirat dupa SGML.
Urmeaza ulterior prezentarea standardului HTML 2.0 (IETF RFC 1866) care include abilitati de afisare mai precisa a imaginilor, utilizarea de formulare, tabele, tipuri de legaturi etc. HTML 2.0 permite dezvoltarea masiva a Web-ului si toate browserele WWW moderne il suporta fara restrictii. In fapt, standardul HTML 2.0 doar pune in ordine anumite facilitati practice aparute incepind cu anul 1994. Netscape extinde o parte din specificatiile HTML 2.0 in 1996 adaugind o serie de tag-uri utile in versiunea foarte populara Netscape Navigator 2.0.
HTML+ se dorea a fi o incercare de a extinde HTML-ul, prima data publicata de Dave Raggett in 1993 si prezentata la prima conferinta Web in 1994.
O extensie a HTML+ a fost HTML 3.0 care n-a fost niciodata standardizata. Ea a fost propusa de tinarul pe atunci Consortiu W3, format in 1994 de catre CERN si MIT cu scopul de a alcatui un standard viabil al limbajului HTML si de a ghida conceperea de pagini Web.
In luna iulie 1996, consortiul W3 anunta oficial standardul HTML 3.2 adaugind specificatii pentru tabele, imagini, applet-uri, perfect compatibil cu HTML 2.0. In ianuarie 1997, acest standard a fost aprobat si toate navigatoarele recente se asteapta a se conforma acestui standard.
Proiectantii de navigatoare (ca Netscape si, mai nou, Microsoft) au adaugat diferite facilitati care nu apar definite de nici un standard HTML. De exemplu, Netscape Navigator 3.0 ofera posibilitati de adaugare de elemente multi-media direct in paginile Web, fundaluri reprezentate de imagini, cadre (frames) etc. plus suport pentru script-uri Java interpretate direct de catre client.
Urmatoarea versiune a HTML-ului dezvoltata de consortiul W3, denumita Cougar, este standardul HTML 4.0, aparut relativ recent, in anul 1997, care aduce suport pentru accesibilitatea paginilor Web din partea persoanelor cu handicap, foi de stiluri interne, suport lingvistic si pentru formule matematice, evenimente etc. Dupa cum stipuleaza inventatorul Web-ului si directorul W3C, Tim Berners-Lee:
'Cu HTML 4.0, orice aplicatie Web va fi independenta de navigator.'
HTML 4.0 este disponibil in trei variante:
Pentru a asigura fidelitatea si corectitudinea comunicatiilor pe WWW, consortiul W3 a introdus HTML Validation Service (https://validator.w3.org/) care verifica daca un anumit document respecta standardul HTML 4.0. In prezent, nu exista inca un navigator care sa suporte acest standard, dar se asteapta aparitia noilor versiuni care se se conformeze acestuia. In fapt, Tim Berners-Lee declara ca HTML 4.0 n-a fost conceput pentru nagivatoare ci pentru aplicatii viitoare si produse Web.
Prezentare a limbajului HTML
Aceasta sectiune nu intentioneaza a fi un manual de utilizare a HTML-ului (pentru acest lucru, consultati bibliografia), ci doar o prezentare succinta a celor mai utilizate tag-uri.
Un document poate fi identificat prin urmatoarele caracteristici fundamentale: structura, continut si forma. Daca forma de vizualizare este dependenta de programul de afisare a informatiilor continute de acel document, structura si continutul sau trebuie sa aiba un format general de reprezentare, pentru a asigura portabilitatea.
Format
Formatul se specifica prin HTML, limbaj care conformindu-se SGML-ului, accepta un numar de tag-uri pentru formatarea documentului. Ca si in SGML, tag-urile se incadreaza intre < si >, putind exista tag-uri de inceput si de sfirsit. Fisierele HTML sint fisiere ASCII obisnuite avind extensia .html (sau .htm) si sint divizate in doua parti: antetul (head) si corpul (body).
Astfel, o pagina Web marcata cu tag-uri HTML are forma generala:
<html> <!-- tag obligatoriu -->
<head> <!-- inceput de antet -->
</head> < sfirsit de antet -->
<body> <!-- inceput de corp -->
</body> < sfirsit de corp -->
</html> < sfirsit de document -->
Conform specificatiei HTML 3.2 pentru a fi identificat ca document SGML un fisier HTML trebuie precedat si de linia:
<!DOCTYPE HTML PUBLIC '-//IETF//DTD HTML 3.2 Final//EN>
pentru a putea fi procesat si de analizatoarele SGML.
In cadrul antetului, printre altele, poate apare titlul documentului (al paginii Web) specificat de tag-ul <title>
<title>Faculty of Computer Science</title>
De obicei intre <head> si </head> apar definitii de rutine scrise in limbaje script (ca JavaScript) pentru a fi siguri ca sint analizate si memorate de navigator (antetul e procesat primul).
Tag-uri
In cadrul corpului pot apare diverse tag-uri:
<b> (ingrosat), <i> (inclinat), <u> (subliniat), <strong> (intensificat), <big> (mai mare), <small> (mai mic), <sub> (indice), <sup> (exponent), <font> (dimensiune si culoare font), <pre> (text preformatat), <code> (cod sursa), <center> (centrat), <blink> (clipitor)
<h1> <h6>
<div> (diviziuni), <p> (paragrafe), <hr> (linie orizontala), <br> (trecere la linie noua)
<ul> (lista nenumerotata), <ol> (lista numerotata), <li> (element de lista), <dir> (lista de directoare), <menu> (meniu)
<img>
<table> (inceput de tabel), <tr> (linie de tabel), <td> (definitie celula), <th> (antet)
<a>
<form> (definitie), <input> (cimp de interogare)
<frameset> (definire), <frame> (cadru), <noframes>
<applet> <script> <style>
<embed> (extensie Netscape)
<meta>
< > & © etc.
In continuare, vom prezenta definitiile formale pentru o parte din tag-urile de mai sus, impreuna cu atributele aferente, conform notatiei DTD.
o
o <!--========= Document Body ========-->
o
o <!ENTITY % body.content '(%heading | %text | %block | ADDRESS)*'>
o
o <!ENTITY % color 'CDATA'
o -- specificatia de culori: #HHHHHH (RGB, in hexa) -->
o
o <!ENTITY % body-color-attrs '
o bgcolor %color #IMPLIED <!-- culoare fundal -->
o text %color #IMPLIED <!-- culoare caractere -->
o link %color #IMPLIED <!-- culoare legaturi -->
o vlink %color #IMPLIED <!-- culoare legaturi vizitate -->
o alink %color #IMPLIED <!-- culoare legaturi active -->
o '>
o
o <!ELEMENT BODY O O %body.content>
o <!ATTLIST BODY
o background %URL #IMPLIED -- textura pentru fundalul documentului --
o %body-color-attrs; -- bgcolor, text, link, vlink, alink --
o >
o
o <!ENTITY % address.content '((%text;) | P)*'>
o
o <!ELEMENT ADDRESS - - %address.content>
o
o
o <!ELEMENT DIV - - %body.content> <-- tag-ul diviziune -->
o <!ATTLIST DIV
o align (left|center|right) #IMPLIED -- alinierea textului --
o >
o
o <!-- CENTER e o 'scurtatura' pentru DIV cu ALIGN=CENTER -->
o <!ELEMENT center - - %body.content>
o
o
o <!-- liste de definitii - DT pentru termen, DD pentru definitia lui -->
o
o <!ELEMENT DL - - (DT|DD)+>
o <!ATTLIST DL
o compact (compact) #IMPLIED -- stil compact --
o >
o
o <!ELEMENT DT - O (%text)*>
o <!ELEMENT DD - O %flow;>
o
o <!-- liste ordonate OL si liste neordonate UL -->
o <!ELEMENT (OL|UL) - - (LI)+>
o
o <!--
o Stil de numarare
o 1 numere arabe 1, 2, 3,
o a litere mici a, b, c,
o A litere mari A, B, C,
o i litere romane mici i, ii, iii,
o I litere romane mari I, II, III,
o
o -->
o
o <!ENTITY % OLStyle 'CDATA' -- restrins la: [1|a|A|i|I] -->
o
o <!ATTLIST OL -- liste ordonate --
o type %OLStyle #IMPLIED -- stil de numarare --
o start NUMBER #IMPLIED -- startul secventei de numarare --
o compact (compact) #IMPLIED -- compactare --
o >
o
o <!-- stiluri de 'bullet'-uri -->
o
o <!ENTITY % ULStyle 'disc|square|circle'>
o
o <!ATTLIST UL -- liste neordonate --
o type (%ULStyle) #IMPLIED -- stil --
o compact (compact) #IMPLIED -- compactare --
o >
o
o <!ELEMENT (DIR|MENU) - - (LI)+ -(%block)>
o <!ATTLIST DIR
o compact (compact) #IMPLIED
o >
o <!ATTLIST MENU
o compact (compact) #IMPLIED
o >
o
o <!-- <DIR> Lista de directoare -->
o <!-- <DIR COMPACT> Ca mai sus, compactat -->
o <!-- <MENU> Lista de meniuri -->
o <!-- <MENU COMPACT> Ca mai sus, compactat -->
o
o <!ENTITY % LIStyle 'CDATA' -- retrins la: '(%ULStyle|%OLStyle)' -->
o
o <!ELEMENT LI - O %flow -- element de lista -->
o <!ATTLIST LI
o type %LIStyle #IMPLIED -- stil --
o value NUMBER #IMPLIED -- valoare -->
o
o
o <!-- vezi si RFC 1942
o https://www.ics.uci.edu/pub/ietf/html/rfc1942.txt -->
o
o <!-- locul de amplasare orizontala a tabelului in cadrul ferestrei -->
o <!ENTITY % Where '(left|center|right)'>
o
o <!-- alinierea orizontala a continutului celulelor de tabel -->
o <!ENTITY % cell.halign
o 'align (left|center|right) #IMPLIED'
o >
o
o <!-- alinierea verticala a continutului celulelor de tabel -->
o <!ENTITY % cell.valign
o 'valign (top|middle|bottom) #IMPLIED'
o >
o
o <!ELEMENT table - - (caption?, tr+)>
o <-- un tabel e compus din titlu si rinduri -->
o <!ELEMENT tr - O (th|td)*>
o <!ELEMENT (th|td) - O %body.content>
o
o <!ATTLIST table elementul de tabel --
o align %Where; #IMPLIED -- pozitia relativa la fereastra --
o width %Length #IMPLIED -- latimea relativa la fereastra --
o border %Pixels #IMPLIED -- cadru tabel --
o cellspacing %Pixels #IMPLIED -- spatii dintre celule --
o cellpadding %Pixels #IMPLIED -- spatiere in cadrul celulelor --
o >
o
o
o <!ENTITY % Length 'CDATA' -- nn pentru pixeli sau nn% pentru procente -->
o <!ENTITY % Pixels 'NUMBER' -- lungimea in pixeli -->
o
o <!ENTITY % IAlign '(top|middle|bottom|left|right)'>
o
o <!ELEMENT IMG - O EMPTY -- Incorporeaza o imagine in document -->
o <!ATTLIST IMG
o src %URL #REQUIRED -- URL-ul imaginii --
o alt CDATA #IMPLIED -- text afisat in locul imaginii --
o align %IAlign #IMPLIED -- aliniere orizontala/verticala --
o height %Pixels #IMPLIED -- inaltimea in pixeli --
o width %Pixels #IMPLIED -- latimea in pixeli --
o border %Pixels #IMPLIED -- latimea bordurii imaginii --
o hspace %Pixels #IMPLIED -- spatiere orizontala --
o vspace %Pixels #IMPLIED -- spatiere verticala --
o usemap %URL #IMPLIED -- utilizeaza client harta de imagini --
o ismap (ismap) #IMPLIED -- utilizeaza server harta de imagini --
o >
o
Cascading Style Sheets (CSS)
Vom trece in revista in continuare citeva dintre trasaturile CSS, scopul lor fiind controlarea mai precisa a formatului elementelor HTML (pozitie si aparitie in fereastra de afisare si comportament la anumite evenimente produse de utilizator sau navigator). Intr-un document HTML putem utiliza multiple foi de stiluri, avind un anume nivel de importanta.
Aflata la cea de a doua versiune standardizata foarte recent (luna mai 1998) de Consortiul Web, specificatia CSS poate fi utilizata prin:
Fiecare tag HTML are atasat un stil de afisare (tip de font, culoare, marime etc.) , ulterior putindu-se modifica intr-o maniera dinamica:
<p style='font-size: 22pt; font-style: italic;
font-weight: extra-bold font-family: Arial'>
Students' Web Pages
</p>
Stilurile se declara intre <style> si </style>, in cadrul definirii corpului paginii Web (sectiunea <head></head>), pentru fiecare tag in parte:
<style type='text/css'>
p
h3
</style>
Am definit stiluri pentru paragrafe si titluri de tip H3.
Toate stilurile se definesc in exteriorul documentului HTML si anume in cadrul unui fisier .css care este inclus prin intermediul tag-ului <link> in pagina Web. Astfel, avem posibilitatea de a utiliza un anumit fisier .css pentru mai multe pagini, definind stilurile doar o singura data.
Citeva elemente de stil
CSS permite o afisare mai clara, mai flexibila a informatiilor stocate in cadrul unui document.
O parte din atributele noi introduse de CSS sint urmatoarele:
Nota
Din pacate, doar ultima generatie de navigatoare suporta definitiile de stiluri conform specificatiei CSS.
Complemente ale HTML
Veteran in ceea ce priveste aparitia sa pe Web, limbajul HTML, cu toata raspindirea sa impresionanta si a simplitatii, nu este extensibil, neputindu-se adauga noi tag-uri la cele existente. Mai mult, HTML este o solutie foarte buna pentru afisarea informatiei, dar nu si pentru stocarea ei, lipsind posibilitatea crearii de structuri complexe de date care sa faciliteze cautarea, validarea si interpretarea eficiente a datelor. Astfel, initial HTML a fost prevazut cu posibilitatea apelarii unor programe care sa ruleze pe serverul Web, asa-numitele aplicatii CGI (Common Gateway Interface) menite sa mareasca interactivitatea paginilor WWW. Apoi s-au adaugat tag-uri de apelare a unor parti de cod Java si JavaScript rulind pe calculatorul clientului.
XML - eXtended Markup Language
In luna noiembrie 1996 este anuntat la
XML nu-i un simplu limbaj de marcare ca HTML-ul, ci un meta-limbaj capabil a defini alte limbaje marcatoare, sub-set al limbajului SGML. Mai simplu decit SGML, XML este si el independent de platforma si de sistemul de operare, fiind astfel potrivit pentru utilizare in cadrul retelor de calculatoare neomogene.
Scopurile declarate ale XML-ului sint urmatoarele:
Elaborarea specificatiilor a fost divizata in trei faze: sintaxa, legaturi hiper-text si specificatia de stiluri, bazata pe DSSSL (Document Style Semantics and Specification Languages); la aceasta din urma inca se mai lucreaza.
Format
Formatul unui document XML este similar celui SGML. Iata un exemplu:
<?XML version='1.0' standalone='yes' ?>
<conversation>
<greetings>Hello, world!</greetings>
<response>Stop the planet, I want to get off</response>
</conversation>
Diferenta fata de SGML si HTML este ca in cazul XML conteaza modul de scriere a tag-urilor cu caractere mici sau mari (exact ca la limbajul C): <tag> va fi diferit de <Tag> sau <TAG>
Mai mult, in cazul legaturilor hiper-text, in XML exista mai multe mecanisme de conexiuni:
Spre deosebire de HTML, in XML un document trebuie insotit de specificatiile de stiluri de afisare a datelor (tip font, marime, culoare, aliniere etc.). Specificatiile se bazeaza pe DSSSL si sint definite aparte de continutul informational al documentului (in HTML aceste specificatii sint permise doar incepind cu versiunea 4.0 si sint incluse in document, bazindu-se pe Cascading Style Sheets). Astfel se asigura suport pentru conversia facila si accesibilitate pentru editoarele de texte.
Pentru garantarea utilizarii documentelor XML in orice limba, s-a hotarit sa se utilizeze doar setul de caractere UniCode Standard (ca la Java).
Aplicatii
Daca in HTML aplicatiile erau doar navigatoarele si editoarele de pagini Web, pentru XML putem dezvolta programe ca:
Viitorul va decide daca XML va avea o arie mare de raspindire sau nu, alaturi de HTML si Java, ca un limbaj complementar de dezvoltare a paginilor WWW. Oricum, exista deja o sumedenie de proiecte de cercetare si aplicatii bazate pe XML: MathML (limbaj de scriere a formulelor matematice), analizoare si editoare XML, convertoare etc.
CGI - Common Gateway Interface
Standard pentru interactiunea clientilor Web cu serverele de Web, Common Gateway Interface se afla in prezent la versiunea 1.1. Un program CGI, numit script, se executa pe serverul WWW, fie in mod explicit (apelat din cadrul paginii printr-o directiva), fie la preluarea informatiilor aflate in cadrul cimpurilor unui formular (form) sau coordonatele unei zone senzitive (image map). Acest standard confera interactivitate paginilor Web, documentele HTML putind astfel sa-si schimbe continutul si sa permita prelucrari de date.
Script-ul poate fi scris in orice limbaj, fiind interpretat (cazul
Perl, Tcl, script shell UNIX) sau compilat (C, C++,
Cele mai multe script-uri CGI sint concepute pentru a procesa datele introduse in formulare. Un formular se defineste in HTML pentru afisarea continutului si introducerea datelor de catre client (prin tag-urile <form> si <input>), iar script-ul CGI, executat de server, va prelua continutul acelui formular.
Antetul trimis serverului de catre programul CGI va respecta specificatiile MIME continind de exemplu Content-type: text/html (document HTML) sau Content-type: image/jpeg (imagine JPEG) ori Content-type: text/plain (text obisnuit).
Programului CGI i se vor transmite in diverse variabile de mediu sau in linia de comanda informatii referitoare la datele de procesat sau la clientul care a initiat cererea (de exemplu, SERVER_PORT REQUEST_METHOD SCRIPT_NAME QUERY_STRING REMOTE_HOST etc.).
Exemple:
Genereaza o pagina Web continind mesajul 'Salut!'.
salut-cgi.c
Genereaza o pagina Web continind mesajul 'Salut!'
#include <stdio.h>
void main()
Un alt exemplu, de script bash folosit pentru inregistrarea intr-o baza de date a participantilor la Colocviul studentesc de informatica InfoJunior:
bin/bash
echo 'Content-type: text/html'
echo
echo '<HEAD>'
echo '<TITLE>Multumiri</title>'
echo '</head>'
echo '<BODY>'
echo '<H1>Multumiri</h1>'
eval `/home/httpd/cgi-bin/cgiparse -form`
echo 'Va multumim, $FORM_name, pentru dorinta de a participa
la colocviul INFO JUNIOR'
echo '<P>'
printf '%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%s,%sn' '$FORM_name'
'$FORM_univ' '$FORM_depart'
'$FORM_paper1' '$FORM_words1' '$FORM_coord1'
'$FORM_paper2' '$FORM_words2' '$FORM_coord2'
'$FORM_paper3' '$FORM_words3' '$FORM_coord3'
'$FORM_conadress' '$FORM_email' '$FORM_tel' '$FORM_fax'
>> /home/httpd/infojr/database
echo '<A HREF=' https://www.infoiasi.ro/~petrea/infojr.html '>
INFO JUNIOR' 97 - Invitatie la colocviu</A>'
echo '</body>'
Politica de confidentialitate | Termeni si conditii de utilizare |
Vizualizari: 1073
Importanta:
Termeni si conditii de utilizare | Contact
© SCRIGROUP 2024 . All rights reserved