INITIERE IN HTML - GHID

Cuprins

• Introducere
• Terminologie
• Ce nu se discuta
• Versiuni HTML
• Documente HTML
• Ce este un document HTML
• Editoare HTML
• Obtinerea fisierelor pe un Server
• Explicarea Tag-urilor
• Document Minimal HTML
• Un instrument de invatare/predare
• Tag-uri de Marcare
• HTML
• HEAD
• TITLE
• BODY
• Antete (Headings)
• Paragrafe
• Liste
• Texte preformatate
• Citatii extinse (Extended Quotations)
• Adrese
• Schimbari de rand (Forced Line Breaks)/Adrese postale
• Reguli pe orizontala
• Tehnoredactarea: Caractere, tipuri de litera
• Silul Logic si Stilul Fizic
• Secvente Escape
• Legaturi (Links)
• Adresarea relativa si cea absoluta
• URL-uri
• Legaturi la sectiuni anume
• Mailto
• Imagini Inline
• Atribute privind dimensiunea imaginii
• Alinierea Imaginilor
• Alternarea textului cu imaginile
• Structura de fundal (Background Graphics)
• Culoarea de fond
• Imagini externe, Sunete, Animatie

Introducere

Terminologie

• WWW == World Wide Web
• Web == World Wide Web
• SGML == Standard Generalized Markup Language-- un standard de descriere a limbajelor de marcare
• DTD == Document Type Definition-- aceasta este specificarea formala a limbajul marcare (markup language), scris cu ajutorul SGML
• HTML == HyperText Markup Language-- HTML este un SGML DTD

In termeni practici, HTML este o colectie de forme independente de platforma de calcul (evidentiate de tag-uri markup ) care definesc diferitele componente ale unui document World Wide Web. HTML a fost inventat de Tim Berners-Lee la CERN, Laboratorul European pentru Fizica Particolelor din Geneva.

Ce nu se discuta

Se presupune ca stiti:

  cum se foloseste NCSA Mosaic, Netscape sau alt navigator (browser) Web

  in linii mari cum lucreaza un server Web si un navigator client

  si aveti aces la un server Web (sau ca doriti sa produceti documente HTML pentru uz personal in modul de vizualizare local)

Versiuni HTML

Acest ghid se refera cel mai des la HTML Versiunea 2.0-- plus unele elemente aditionale care sunt uzual si consistent implementate in navigatoarele obisnuite. Noi versiuni si noi posibilitati pentru HTML sunt in curs de realizare (in prezent circula versiunea 6.0 )

Documente HTML

Ce este un Document HTML

Documentele HTML sunt fisiere text (ASCII) care pot fi create folosind orice editor de texte (de exemplu, Emacs sau vi pe masinile UNIX ; BBEdit pe un Macintosh; Notepad pe o masina Windows, Edit sub MS-DOS). Se poate folosi chiar si un procesor de texte mai evoluat (word-processing software) precum Word Perfect sau Win Word, daca avem grije sa salvam documentul ca text curat - 'text only with line breaks.'

Editoare HTML

Exista cateva editoare WYSIWYG (de ex., HotMetal, pe mai multe platforme, sau Adobe PageMill pentru Macintosh). Puteti sa le incercati dupa ce invatati cate ceva din elementele de baza privind marcarea - etichetarea HTML (tagging). Este util sa stiti suficient de bine HTML pentru a putea realiza un document mai inainte de a putea determina eficienta unui editor WYSIWYG.

Daca nu ati ales inca softul, urmariti lista online de editoare HTML (organizata pe platforme) pentru a gasi programul cel mai potrivit.

Aducerea fisierelor pe un Server

Daca aveti acces la un Web server, la scoala sau la servici, contactati 'webmaster-ul' local (persoana ce se ocupa de server) pentru a afla cum puteti incarca fisierele dumneavoastra pe Web. Daca nu aveti acces la un server la servici sau la scoala, incercati sa aflati daca in zona se poate obtine un acces la FreeNet, sau la o alta retea ce acorda acces gratuit la Internet. In caz contrar trebuie sa apelati la un furnizor comercial local de servicii Internet, care va plasa fisierele dumneavoastra pe un server contra unui abonament. (Cautati prin ziare sau revistele de calculatoare, urmarind reclamele, sau la Camera de Comert, sa gasiti cel mai convenabil furnizor ).

Ce este Tag-ul

Un element fundamental, componenta a structurii unui document: printre exemplele de astfel de elemente avem 'heads', tabelele, paragrafele, listele. Trebuie sa le privim cam asa: se folosesc tag-uri HTML pentru a marca elementele unui fisier pentru a fi interpretate de browser. Elementele pot contine texte, alte elemente, sau combinatii ale acestora. Pentru a defini, a delimita, diferitele elemente din documentul HTML se folosesc tag-uri. Tag-urile HTML constau dintr-o paranteza ascutita deschisa (<), numele tag-ului, si o paranteza ascutita inchisa (dreapta) (>). Tag-urile sunt in mod obisnuit imperecheate: inceput si sfarsit (de exemplu, <H1> si </H1>). Tag-ul de sfarsit arata la fel cu cel de inceput, exceptand bara 'slash' (/) care precede numele tag-ului dintre paranteze. Lista tag-urilor HTML este data mai jos. Unele elemente pot include un atribut, o informatie aditionala care este inclusa in interiorul tag-ului de inceput (de start). Spre exemplu, se poate specifica alinierea unei imagini (sus, la mijloc sau jos ) prin includerea atributului corespunzator in codul HTML al imaginii sursa. Tag-urile care au atribute optionale sunt indicate in lista de mai jos.

NOTA: Limbajul HTML nu diferentiaza majusculele si minusculele din tag-uri. <title> este echivalent cu <TITLE> sau cu <TiTlE>. Exista insa cateva exceptii notate in Secventele Escape de mai jos.

Nu toate tag-urile sunt suportate de toate browserele World Wide Web. Daca un browser nu suporta un tag, atunci inseamna pur si simplu ca il ignora.

Documentul Minimal HTML

Orice document HTML trebuie sa contina cateva tag-uri HTML standard. Fiecare document consta din doua zone de text - cap si corp : 'head' si 'body'. Capul (head) contine titlul, iar corpul (body) contine textul propriu-zis, compus din paragrafe, liste, si alte elemente. Browser-ele urmaresc informatii specifice deoarece sunt programate in concordant� cu specificatiile HTML si SGML . Elementele cerute sunt vizibile in urmatorul exemplu de document simplu :

<html>


<head>


<TITLE>A Simple HTML Example</TITLE>


</head>


<body>


<H1>HTML is Easy To Learn</H1>


<P>Welcome to the world of HTML.


This is the first paragraph. While short it is still a paragraph!</P>


<P>And this is the second paragraph.</P>


</body>


</html>

Deci elementele necesare sunt tag-urile <html>, <head>, <title>, si <body>. (si tag-urile corespunzatoare de sfarsit). Din cauza ca aceste tag-uri trebuie incluse in fiecare fisier, se pot crea fisiere model ('template'). (Unele browsere vor interpreta (formata) corect fisierul HTML, chiar daca aceste tag-uri nu sunt incluse. Dar alte browsere nu! Deci asigurati-va ca le-ati inclus. Urmariti versiunea formatata a exemplului. Un alt exemplu, mai lung, este disponibil de asemeni, dar trebuie sa parcurgeti mai intai aceste randuri pentru a-l intelege. Acest exemplu, de fisier mai, cuprinde tag-uri explicate in sectiunea urmatoare.

Un instrument de invatare

Pentru a vedea o copie a fisierului parcurs de browser, ca fisier sursa, trebuie selectata pozitia 'View Source' (sau evhivalentul ei) din meniul browser-ului. Atunci continutul, cuprinsul fisierului, cu toate tag-urile HTML, este afisat intr-o noua fereastra.

Acesta este un mod instructiv de a vedea si intelege cum se foloseste HTML, si de a invata sa construim documente. Desigur, un fisier - document HTML poate sa nu fie corect tehnic. Atunci cand sistemul de scriere devine familiar, parcurgerea diferitelor documente online ne va permite sa distingem intre fisiere HTML corecte si gresite. Retineti ca, putand salva fisierul sursa HTML, cu toate codurile HTML, puteti folosi acest fisier ca model pentru una din paginile Web, modificand doar continutul ca text, pentru a corespunde intereselor d-voastra.

Tag-uri de marcare (Markup Tags)

HTML

Acest element comunica browser-ului ca fisierul contine informatii codificate HTML. Extensia fisierului (.html) indica de asemeni ca e vorba de un document HTML si este esential sa fie folosita. (Pe sistemele MS-DOS sau Windows 3.x, cu restrictia la numele de fisiere la 8.3 caractere (spre exemplu, LeeHome.htm), se foloseste doar extensia .htm .

HEAD

Elementul 'head' identifica prima parte a documentului codificat HTML, parte ce contine titlul. Titlul este folosit ca parte a ferestrei browser-ului (vezi mai jos).

TITLE

Elementul 'title' contine titlul documentului si identifica continutul sau intr-un context global. Titlul este afisat undeva in fereastra browser-ului, de obicei pe bara de sus, in afara spatiului pentru text. Titlul este memorat si folosit de browser si ca descriere in listele de URL-uri vizitate, in 'bookmark' in special. Este important deci sa alegeti un titlu descriptiv, unic, relativ scurt. Titlul este folosit de asemeni in procesul de cautare WAIS a serverului.

Spre exemplu, se poate include un titlu prescurtat al unei carti impreuna cu continutul capitolului: 'NCSA Mosaic Guide (Windows): Installation'. Precizand astfel soft-ul folosit, platforma de calcul (sistemul de operare), si titlul capitolului (pe scurt), ceea ce este mult mai util decat pur si simplu 'Installation'. In general trebuie sa limitam titlurile la cel mult 64 caractere. Trebuie evitata posibila confuzie dintre titlul documentului si titlurile folosite in cormpul sau, denumite in original 'headings'; In timp ce pentru primul se foloseste tag-ul <Title>, la celelalte intervin tag-urile <H1>, <H2>,, <H6> .

BODY

Cea de a doua parte si cea mai intinsa, a documentului HTML este corpul acestuia, denumit - marcat cu tag-ul 'body'. Acesta este continutul documentului (partea care se afiseaza in zona de text a ferestrei browser-ului). Tag-urile care urmeaza mai jos sunt toate in interiorul corpului (interne fat� de 'body') documentului HTML.

Titluri (Headings)

HTML are 6 nivele de titluri in corpul documentului, numerotate de la 1 la 6, cu 1 ca cel mai proeminent. Titlurile sunt afisate cu caractere mai mari si/sau mai intense comparativ cu textul normal din document. Primul titlu din fiecare document este marcat cu <H1>.

Sintaxa elementului titlu este:

• <Hy>Textul titlului de nivel y </Hy>
  unde y este un numar de la 1 la 6 .

Este contraindicata folosirea unui anumit nivel de titlu daca nu a intervenit inca nivelul precedent. Spre exemplu, dupa <H1> folosire lui <H3>.

Paragrafe

Spre deosebire de documentele realizate cu majoritatea procesoarelor de texte, schimbarea de rand 'carriage return' nu are nici o semnificatie in fisierele HTML. Astfel nu conteaza cat de lungi sunt randurile (desi este mai comod sa fie de cel mult 72 caractere). Browser-ul 'formateaza' textul in concordant� cu codurile HTML, fara sa tina seama, in general, de asezarea in randuri din textul sursa. Multiplele spatii dintre randuri de text sunt, in mod normal, substituite cu un singur spatiu (adica textul apare scris la 'un rand', indiferent cum era in sursa!).

In exemplul de mai sus de Document HTML Minimal, primul paragraf este codificat ca

<P>Welcome to the world of HTML.


This is the first paragraph.


While short it is


still a paragraph!</P>

In fisierul sursa exista o intrerupere a liniei (randului) din cea de a treia propozitie. Iar primele doua propozitii apar scrise pe randuri distincte. Oricare browser Web ignora aceste elemente de forma, paragraful fiind inceput doar la intalnirea tag-ului <P>.

Important: Paragrafele sunt indicate cu elemente (tag-uri) <P> . Un browser ignora orice impartire a textului in randuri, precum si eventualele linii libere din textul sursa. Fara <P>, documentul devine un singur paragraf mare (O singura exceptie o constituie cazul cand textul este marcat ca 'preformatat,' cu tag-ul <PRE>, care este explicat mai jos). Spre exemplu, urmatoarea forma a sursei produce un rezultat identic cu cel din exemplul de mai sus:

  <H1>Level-one heading</H1> <P>Welcome to the world of HTML. This is
the first
paragraph. While short it is still a paragraph! </P> <P>And this is the second
paragraph.</P>

Pentru usurinta de urmarire a fisierelor HTML, puneti titlurile pe linii separate, folosind cate o linie libera sau doua, pentru a ajuta identificarea inceputului unei noi sectiuni, separand paragrafele cu linii libere (pe langa folosirea tag-urilor <P>). Aceste extra spatii ne ajuta cand editam fisierul (dar browser-ul le ignora, avand propriul set de reguli de spatiere, care nu depind de spatiile din fisierul sursa).

NOTA: Tag-ul de sfarsit, </P>, poate fi omis. Asta deoarece browser-ele inteleg ca odata cu aparitia unui tag <P>, este limpede ca paragraful precedent s-a incheiat.

Folosirea perechii <P> si </P>, ca delimitatori ai unui paragraf, permite centrarea paragrafului prin includerea atributului ALIGN=alignment in fisierul sursa.

<P ALIGN=CENTER>


Acesta este un paragraf centrat. [Vezi versiunea formatata de mai jos.]


</P>

Listele

HTML suporta liste nenumerotate, numerotate, precum si definitii. Listele pot fi combinate (cuibarite), dar nu trebuie abuzat cu asta caci o prea complexa combinare a listelor le poate face greu de urmarit.

Liste nenumerotate

Pentru a crea o lista nenumerotata, marcata cu un semn comun (bullet),

1. incepem deschizand lista, cu tag-ul <UL> (pentru lista nenumerotata)


2. introducem (fiecare element din lista) tag-ul <LI>  urmat de componenta
individuala a listei; nu e nevoie de tag-ul de sfarsit </LI>


3. incheiem intreaga lista cu tag-ul de sfarsit de lista, </UL>

Iata un exemplu de lista cu trei elemente:

<UL>


<LI> apples


<LI> bananas


<LI> grapefruit


</UL>

La afisare avem:

• apples
• bananas
• grapefruit

Un element al listei, marcat cu <LI> poate contine mai multe paragrafe. Marcate desigur cu tag-ul <P> .

REFERAT: Programare bon - linia de vanzare, forme de plata REFERAT: Descrierea calculatorului

Liste numerotate

O lista numerotata (numita de asemeni si lista ordonata, de unde deriva numele tag-ului) este identica cu o lista nenumerotata, exceptand folosirea tag-ului <OL> in loc de <UL>. Elementele din lista sunt marcate tot cu <LI>. Astfel urmatorul cod HTML:

<OL>


<LI> oranges


<LI> peaches


<LI> grapes


</OL>

produce urmatorul afisaj:

1. oranges
2. peaches
3. grapes

Liste Definitie

O lista definitie (codificata ca <DL>) consta usual dintr-o alternare a termenului de definit (codificat cu <DT>) si respectiva definitie (codificata cu <DD>). Browser-ele Web, in general, afiseaza definitia pe o linie noua. Iata un exemplu de lista definitie:

<DL>


<DT> NCSA


<DD> NCSA, the National Center for Supercomputing Applications,


is located on the campus of the University of Illinois


at Urbana-Champaign.


<DT> Cornell Theory Center


<DD> CTC is located on the campus of Cornell University in Ithaca,


New York.


</DL>

O sa obtinem afisat:

NCSA
NCSA, the National Center for Supercomputing Applications, is
located on the campus of the University of Illinois at
Urbana-Champaign. Cornell Theory Center
CTC is located on the campus of Cornell University in Ithaca,
New York.

Intrarile listei, elementele cu <DT> si <DD>, pot cotine multiple paragrafe (indicate cu tagur-i de paragraf <P>), dar si liste, sau alte informatii definitorii.

Atributul COMPACT poate fi folosit in cazul in care termenii de definit sunt scurti. Daca, spre exemplu, este vorba de niste optiuni de operare, acestea pot incape pe aceeasi linie cu inceputul definitiei.

<DL COMPACT>


<DT> -i


<DD>invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the
path


<DT> -k


<DD>invokes NCSA Mosaic for Microsoft Windows in kiosk mode


</DL>

Vom obtine afisat:

-i

invokes NCSA Mosaic for Microsoft Windows using the initialization file defined in the path.

-k

invokes NCSA Mosaic for Microsoft Windows in kiosk mode.

Liste combinate (Nested)

Listele pot fi combinate. Putem sa avem de asemeni un numar de paragrafe, fiecare continand o lista, in cadrul unei singure pozitii dintr-o alta lista.

Iata un exemplu de astfel de combinatie de liste:

<UL>


<LI> A few New England states:


  <UL>


  <LI> Vermont


  <LI> New Hampshire


  <LI> Maine


  </UL>


<LI> Two Midwestern states:


  <UL>


  <LI> Michigan


  <LI> Indiana


  </UL>


</UL>

Lista combinata apare pe ecran in forma:

• A few New England states:
• Vermont
• New Hampshire
• Maine
• Two Midwestern states:
• Michigan
• Indiana

Texte preformatate

Folosim tag-ul <PRE> (prescurtare de la 'preformatted') pentru a genera un text intr-o forma fixata - adica exact asa cum apare el scris in sursa. In acest caz, tabulatorii, liniile avans si alte spatii libere apar afisate ca atare. Asta este util mai ales pentru listingul programelor. Spre exemplu, urmatoarele linii:

<PRE>



#!/bin/csh


cd $SCR


cfs get mysrc.f:mycfsdir/mysrc.f


cfs get myinfile:mycfsdir/myinfile


fc -02 -o mya.out mysrc.f



mya.out


cfs save myoutfile:mycfsdir/myoutfile


rm *


</PRE>

apar afisate in forma:

#!/bin/csh


cd $SCR


cfs get mysrc.f:mycfsdir/mysrc.f


cfs get myinfile:mycfsdir/myinfile


fc -02 -o mya.out mysrc.f



mya.out


cfs save myoutfile:mycfsdir/myoutfile


rm *

Tag-ul <PRE> poate fi folosit cu atributul optional WIDTH, care specifica numarul maxim de caractere pe o linie. WIDTH transmite de asemeni browser-ului sa aleaga un tip de litera (font) corespunzator si sa faca trecerea de la o linie la alta.

Intr-o secvent� <PRE> se pot folosi hiperlink-uri. Dar e bine sa evitam folosirea altor tag-uri HTML in interiorul secventei <PRE>.

Sa notam ca. deoarece semnele <, >, si & au un sens special in HTML, pentru ca ele sa apara in text trebuie sa folosim secventele escape corespunzatoare (&lt;, &gt;, si &amp;, respectiv). Vezi sectiunea cu Secvente Escape pentru detalii.

Citatii extinse (Extended Quotations)

Pentru a include citatii lungi, intr-un bloc separat de pe ecran, folosim tag-ul <BLOCKQUOTE>. Multe browser-e modifica, in general, marginile, pentru a remarca citatia in cadrul textului din zona.

Iata un exemplu:

<BLOCKQUOTE>


<P>Omit needless words.</P>


<P>Vigorous writing is concise. A sentence should contain no


unnecessary words, a paragraph no unnecessary sentences, for the


same reason that a drawing should have no unnecessary lines and a


machine no unnecessary parts.</P>


--William Strunk, Jr., 1918


</BLOCKQUOTE>

ceea ce apare afisat in forma:

  Omit needless words.

  Vigorous writing is concise. A sentence should contain no


  unnecessary words, a paragraph no unnecessary sentences, for the


  same reason that a drawing should have no unnecessary lines and a


  machine no unnecessary parts. --William Strunk, Jr., 1918

Adresele

Tag-ul <ADDRESS> este, in general, folosit pentru a specifica autorul unui document, sau o cale de a lua contact cu autorul (spre exemplu, o adresa email), si o data a ultimei revizii. In mod normal este ultimul punct dintr-un document HTML.

Spre exemplu, ultima pozitie din acest ghid, in versiunea online:

<ADDRESS>


A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu / revised April 96


</ADDRESS>

Ceea ce apare afisat in forma:

A Beginner's Guide to HTML / NCSA / pubs@ncsa.uiuc.edu / revised April 96

NOTA: <ADDRESS> nu se foloseste pentru adrese postale. Vezi 'Forced Line Breaks', mai incolo, pentru a vedea cum se formeaza adresele postale.

Forced Line Breaks/ Adresele Postale

Tag-ul <BR> forteaza o schimbare de linie fara a introduce spatii suplimentare intre linii. Folosirea elementelor <P> pentru liniile scurte de text, precum adresele postale, rezulta in spatii suplimentare nedorite. Spre exemplu, cu <BR>:

National Center for Supercomputing Applications<BR>


605 East Springfield Avenue<BR>


Champaign, Illinois 61820-5518<BR>

Are ca afisaj:

National Center for Supercomputing Applications


605 East Springfield Avenue


Champaign, Illinois 61820-5518

Reguli pe orizontala

Tag-ul <HR> produce o linie orizontala pe toata largimea ferestrei din ecran. O astfel de linie este utila pentru a separa sectiunile din cadrul documentului. Spre exemplu, multa lume adauga o linie finala, o indicatie de sfarsit a textului, inaintea informatiei <address> .

Grosimea si lungimea liniei pot fi modificate (ca procent al latimii ferestrei acoperit de ea). Experimentati pana cand sunteti satisfacuti cu modul in care apare. Spre exemplu:

<HR SIZE=4 WIDTH='50%'>

afiseaza:

Character Formatting

HTML are doua tipuri de stiluri pentru cuvintele sau propozitiile individuale: logic si fizic. Tag-urile pentru stilurile Logice aranjeaza textul in concordant� cu sensul sau, in timp ce stilurile fizice indica aparenta specifica a unei sectiuni. Spre exemplu, in propozitia precedenta cuvintele 'stiluri logice' avand sensul unei definitii ar trebui scrise cursiv (cu italice). Browser-ele moderne permit definirea tipului de litera, sau chiar interpretarea grafica a fiecarui tag. Daca vrem ca modul in care apare documentul nostru sa nu fie afectat de eventualele redefiniri din browser, vom folosi stilul fizic.

Acelasi efect (scrierea cursiva - cu italice, a unor cuvinte) il are un alt tag care 'spune' browser-ului sa 'puna acele cuvinte cu italice'.

NOTA: Unele browser-e nu ataseaza nici un 'style' tag-ului <DFN> , astfel incat nu veti vedea frazele indicate in paragraful precedent scrise cursiv.

Stiluri Logice sau Fizice

Daca stilurile (styles) fizice si logice produc acelasi rezultat pe ecran, atunci de ce sunt amandoua necesare ?

In universul SGML ideal, continutul si prezentarea documentului sunt directii separate (divortate). Astfel, spre exemplu, tag-urile SGML ale titlurilor de nivel unu specifica pozitia de titlu de nivel unu fata de restul documentului, fara a preciza tipul de litera (fontul) cu care se scrie acest titlu (24-point bold Times centered, adesea). Avantajul acestei abordari, similar in conceptie cu formatul (style sheets) in multe procesoare de text) se constata atunci cand decidem sa schimbam, spre exemplu la '20-point left-justified Helvetica' modul de aparitie al titlurilor de nivel unu, caz in care nu trebuie sa modificam decat definitia titlului de nivel unu in Web browser-ul nostru. Multe din browser-ele actuale permit definirea modului in care dorim sa apara pe ecran diferitele tag-uri HTML.

Un alt avantaj al tag-urilor logice este contributia la 'asigurarea consistentei' documentului pe care-l scriem. Este mai simplu sa marcam ceva cu un tag precum <H1> decat sa retinem si sa SCRIEM ca asta inseamna '24-point bold Times centered sau asa ceva. Spre exemplu, considerand tag-ul <STRONG>. Majoritatea browser-elor il interpreteaza cu text 'bold'. Desigur, este posibil ca un cititor sa prefere ca sectiunile respective sa fie afisate in rosu, spre exemplu. Stilurile logice ofera aceasta flexibilitate.

Dar daca dorim ca o parte a textului sa apara, spre exemplu cursiv, fara ca setarile browser-elor sa o afiseze in mod diferit, atunci folosim stilurile fizice. Stilurile fizice ofera o anumita consistent� in sensul ca documentul (sau portiunea sa) va apare exact la fel (in modul in care l-am realizat) oricarui cititor.

E bine sa ne decidem si sa fim consecventi in privinta stilului folosit. Daca folosim marcaje -tag-uri fizice, atunci sa o facem in intreg documentul. Daca folosim stiluri logice, sa le mentinem logice in tot documentul. Dar trebuie retinut ca viitoarele versiuni ale HTML se prea poate sa nu suporte stiluri fizice, adica browser-ele sa nu mai accepte (sa nu mai afiseze) codurile cu stiluri fizice.

Stiluri Logice

• <DFN>
  pentru un cuvant ce va fi definit. Tipic afisat cursiv (cu italice). (NCSA Mosaic is a World Wide Web browser.)
• <EM>
  pentru accentuare. Tipic afisat cursiv (cu italice). (Consultants cannot reset your password unless you call the help line.)
• <CITE>
  pentru titlurile de carti, filme, etc. Tipic afisat cursiv (cu italice). (A Beginner's Guide to HTML)
• <CODE>
  pentru programe (computer code). Afisat in forma fixa, asa cum a fost introdus de la tastatura. (The <stdio.h> header file)
• <KBD>
  pentru folosirea tastaturii la raspuns din partea utilizatorului. Tipic afisat cu caractere de latime constanta - de tip Courrier (Enter passwd to change your password.)
• <SAMP>
  pentru o secvent� de caractere. Afisat cu caractere de latime constanta - de tip Courrier (Segmentation fault: Core dumped.)
• <STRONG>
  pentru accentuare puternica. Tipic afisat cu bold. (NOTE: Always check your links.)
• <VAR>
  pentru o variabila, acolo unde utilizatorul va inlocui variabila cu informatii specifice. Tipic afisat cursiv, in italice. (rm filename deletes the file.)

Stiluri Fizice

• <B>

text bold

• <I>

text italic

• <TT>

text typewriter, adica cu caractere de latime constanta.

Secvente 'Escape' ( Entitati Caracter )

Entitatile caracter au doua functiuni:

• inserarea unor caractere speciale
• afisarea altor caractere, in plus fat� de setul de caractere ASCII (in principal caracterele cu semne diacritice )

Trei caractere ASCII si anume: parantezele ascutite (<), (>), si ampersantul (&) , au semnificatii speciale in HTML si prin urmare nu pot fi folosite asa cum sunt in text. (Parantezele ascutite fiind folosite pentru a indica inceputul si sfarsitul tag-urilor HTML, si ampersantul este folosit exact pentru a indica inceputul secventei escape .) Ghilimelele pot fi folosite ca atare (desi au rolul aparte in tag-uri), dar si in forma de entitate caracter (&quot;).

Pentru a folosi unul din cele trei caractere intr-un document HTML, trebuie introdusa respectiva secvent� escape, si anume:

&lt;

secventa escape pentru <

&gt;

secventa escape pentru >

&amp;

secventa escape pentru &

In plus, diferite secvente escape se folosesc pentru marcarea diacritica:

&ouml;

secventa escape pentru ' o mic cu umlaut ', ö

&ntilde;

secventa escape pentru ' n mic cu tilda ', �

&Egrave;

secventa escape pentru ' E mare cu accent grav ', É

Se pot substitui si alte litere in locul lui o, n, respectiv E de mai sus. Urmariti documentul online ce include lista extinsa a caracterelor speciale.

NOTA: Spre deosebire de restul codurilor HTML, secventele escape sunt 'case sensitive', difera in cazul folosirii majusculelor sau a minusculelor. Nu se poate, spre exemplu, sa folosim &LT; in loc de &lt;.

Legaturi (Linking)

Forta HTML provine de la abilitatea de a lega un text si/sau o imagine cu un alt document sau sectiune dintr-un document. Un browser, afisand fisierul sursa, accentueaza numele textului sau a imaginii, identificate, cu alta culoare sau prin subliniere, pentru a indica legatura 'hypertext' (adesea denumita pe scurt doar hyperlink sau link).

Exista un singur tag HTML, relativ la hipertext, anume <A>, care simbolizeaza - defineste o ancora (anchor). Pentru a include o ancora in document:

6.     incepeti cu <A (incluzand un spatiu dupa A)

7.     specificati documentul cere trebuie legat prin introducerea parametrului HREF='nume_fisier' urmat de paranteza ascutita inchiasa (>)

8.     introduceti textul care serveste ca legatura hypertext in documentul curent

9.     introduceti ancora de sfarsit, adica tag-ul: </A> (nu e nevoie de nici un spatiu separator inainte de aceasta ancora de incheiere)

Iata un exemplu de hypertext referint� intr-un document html:

<A HREF='MaineStats.html'>Maine</A>

Aici se face legatura cuvantului Maine , ca hyperlink la documentul MaineStats.html, care este in acelasi director ca si documentul initial (in care apare referinta).

Trasee Relative sau Trasee Absolute

Se pot face legaturi la documente din alti directori prin specificarea traseului relativ, fat� de cel din documentul curent. Spre exemplu, o legatura la fisierul NYStats.html plasat in subdirectorul AtlanticStates va fi:

<A HREF='AtlanticStates/NYStats.html'>New York</A>

Este o legatura numita relativa deoarece este specificat drumul spre fisierul respectiv, relativ la pozitia fisierului curent. Se poate folosi de asemeni traseul absolut ( URL-ul complet ) al fisierului, dar legaturile relative sunt mai eficiente ca acces la server.

Traseele folosesc sintaxa standard din UNIX. Astfel notatia '..' pentru directorul parinte ( directorul care-l contine pe cel curent ). (Pentru mai multe detalii as se vedea un manual introductiv de UNIX , sau un text precum 'Learning the UNIX Operating System' de la O'Reilly and Associates, Inc.)

Daca suntem in fisierul NYStats.html si referim documentul original numit US.html, atunci legatura va arata cam asa:

<A HREF='../US.html'>United States</A>

In general, sunt preferabile legaturile relative deoarece:

10. este mai simplu in cazul deplasarii intregului grup de documente intr-un alt loc (deoarece numele traseului relativ ramane acelasi)

11. este mult mai eficient in conectarea la server

12. este mai putin de scris, documentul va fi mai scurt ca fisier

Evident trebuie folosite traseele absolute pentru legaturile cu documente care nu sunt in relatie directa. Spre exemplu, consideram un grup de documente care constituie un manual utilizator. Legaturile din cadrul unui astfel de grup trebuie sa fie relative. Dar legaturile la alte documente (eventual o referint� la un pachet soft) trebuie sa foloseasca traseul complet. In acest fel, prin copierea sau mutarea manualului intr-un alt centru sau in alt director, nu va fi nevoie de nici schimbare a legaturilor.

URL-uri

World Wide Web foloseste adresele denumite 'Uniform Resource Locators' (URL-uri) pentru a specifica locul fisierelor in alte servere. Un URL include tipul de resursa care se acceseaza (spre exemplu, Web, gopher, WAIS), adresa serverului, si pozitia - locul fisierului. Sintaxa este:

schema://host.domeniu [:port]/path/ nume_fisier

unde schema este unul din cuvintele:

• file
  pentru accesul unui fisier de pe sistemul local
• ftp
  cazul unui fisier de pe un server FTP anonymous
• http
  un fisier de pe un server World Wide Web
• gopher
  un fisier de pe un server Gopher
• WAIS
  un fisier de pe un server WAIS
• news
  un newsgroup Usenet
• telnet
  o conexiune Telnet la un alt calculator din retea

Numarul portului poate fi, in general, omis. (In afara cazurilor cand este cerut in mod expres, poate fi lasat necompletat). Spre exemplu, pentru a include o legatura la documentul HTML folosit si tradus aici, scriem:

<A HREF='http://www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimer.html'>


NCSA's Beginner's Guide to HTML</A>

Asta face ca, in documentul curent textul: ' NCSA's Beginner's Guide to HTML ' sa apara ca hyperlink la fisierul HTMLPrimer.html cu URL-ul de mai sus. Pentru detalii privind URL-urile, pot fi parcurse documentele:

• WWW Names and Addresses, URIs, URLs, URNs
• A Beginner's Guide to URLs

Legaturi la Sectiuni anume

Ancorele pot fi folosite pentru salturi in cadrul aceluiasi document, sau sectiune - capitol anume dintr-un document (fie in acelasi document fie unul diferit) si pentru revenirea la inceputul documentului (pozitie predefinita). Acest tip de ancora este numita uzual 'named anchor' din cauza ca realizeaza legaturi acolo unde inseram name HTML in document.

Ghidul HTMLPrimer.html (sursa acestui text) este un bun exemplu de folosire a ancorelor cu nume (named anchors) intr-un singur document. Ghidul este construit ca un singur document, pentru a fi mai simplu de scos la imprimanta. Dar ca un singur document, de dimensiuni destul de mari, poate fi neplacuta si consumatoare de timp, parcurgerea sa secventiala, atunci cand cautam o anume informatie despre HTML. Hyperlink-urile interne sunt folosite pentru a crea o 'tabla de materii', un cuprins, la inceputul documentului. Aceste hyperlink-uri permit saltul de la o pozitie la alta, in document. (Trebuie doar sa selectati - cu 'click' hyperlink-ul 'Links to Specific Sections', din cuprins, pentru a ajunge in original la aceste explicatii.)

Se poate realiza si legatura la o anume sectiune dintr-un alt document.

Legaturi intre Sectiunile Diferitelor Documente

Presupunem ca dorim sa realizam o legatura din documentul A (documentA.html) la o anumita sectiune din alt document (MaineStats.html).

Introducem codul HTML pentru o legatura la o ancora cu nume:

documentA.html:

In addition to the many state parks, Maine is also home to <a href='MaineStats.html#ANP'>Acadia National Park</a>.

Unde caracterele de dupa diez (#) constituie o eticheta din fisierul MaineStats.html . Aceasta eticheta comunica browser-ului ce trebuie afisat in partea de sus a ferestrei, atunci cand este activata legatura. Cu alte cuvinte, prima linie in fereastra browser-ului trebuie sa fie inceputul (titlul) sectiunii despre 'Acadia National Park .

Prin urmare, trebuie creata ancora cu nume (in acest exemplu 'ANP') in fisierul MaineStats.html:

<H2><A NAME='ANP'>Acadia National Park</a></H2&GT;

Cu aceste elemente plasate se poate realiza trecerea direct, asa cum s-a dorit.

NOTA: Nu se poate crea o legatura la o anume sectiune dintr-un document decat daca avem permisiunea de a scrie in acel document, sau daca respectivul document contine deja eticheta la care se doreste saltul.

Spre exemplu, se pot include ancore cu nume in documentul HTML mentionat deja, HTMLPrimer.html , deoarece in acesta exista numeroase etichete. Pot fi vazute cu ajutorul optiunii View, Source din browser, pentru a vedea codurile). Dar daca documentul nu are nici o eticheta, atunci nu putem sa facem o legatura la un anumit paragraf deoarece nu poate fi editat fisierul original de pe serverul NCSA'

Legaturi la Sectiuni Anume in Interiorul Documentului Current

Tehnica este aceeasi, exceptand numele de fisier care este omis. Spre exemplu, pentru o legatura la ancora ANP din interiorul fisierului MaineStats, introducem:

More information about <A HREF='#ANP'>Acadia National Park</a>


is available elsewhere in this document.

Includeti (sau asigurati-va ca exista) un tag <A NAME=> in locul dorit din document unde vreti sa se faca saltul (legatura) (adica, in exemplu, <H2><A NAME='ANP'>Acadia National Park</a></H2>).

Ancorele cu nume sunt utile in particular atunci cand avem o serie de informatii scurte pe care preferam sa le punem intr-un singur fisier, sau atunci cand se ia in calcul si posibilitatea preluarii - tiparirii documentului in intregime.

Mailto

Se poate simplifica procedura de trimitere a unui e-mail de catre cititorul documentului HTML cu ajutorul atributului mailto intr-un hyperlink. Formatul este: <A HREF='mailto:emailuser@host'>Name</a> Spre exemplu,

<A HREF='mailto:pubs@ncsa.uiuc.edu'>NCSA Publications Group</a>

pentru NCSA Publications Group, adict pentru a crea o fereastra de posta configurata deja pentru adresa e-mail a 'NCSA Publications Group'. (Desigur, in document putem pune ce adresa e-mail dorim!)

Inline Images

Multe browser-e Web pot afisa imagini inline (adica, imagini adiacente textului) in format X Bitmap (XBM), GIF, sau JPEG . Exista si alte formate de imagine care sunt incorporate in Web browsers [spre exemplu, formatul 'Portable Network Graphic' (PNG) ]. Fiecare imagine consuma timp pentru a fi preluata/prelucrata si lungeste timpul de astptare. Trebuie alese cu grije imaginile si numarul lor intr-un document.

Pentru a include o imagine inline, introducem:

<IMG SRC=Nume_Imagine>

unde Nume_Imagine este URL-ul fisierului imagine.

Sintaxa pentru <IMG SRC> este identica cu cea folosita in ancora HREF. Daca fisierul imagine este un fisier GIF, atunci partea de nume fisier din Nume_Imagine trebuie sa se termine cu .gif. Pentru fisierele imagine X Bitmap trebuie sa avem terminatia .xbm; Fisierele imagini JPEG trebuie sa aiba terminatia .jpg sau .jpeg; iar fisierele 'Portable Network Graphic' trebuie sa aiba extensia .png .

Attributele Dimensiunii Imaginii

Trebuie incluse doua atribute in tag-urile <IMG> pentru a comunica browser- ului dimensiunile imaginii care se incarca impreuna cu textul. Atributele HEIGHT si WIDTH permit browser-ului sa stabileasca si sa rezerve spatiul necesar (in pixeli) pentru imagini, inainte de a le prelua, aranjand astfel rstul documentului HTML. (Dimensiunea pixelului se obtine din programele de prelucrat imagini, precum Adobe Photoshop.)

Spre exemple, pentru a include o imagine 'autoportret' intr-un fisier impreuna cu dimensiunile portretului , introducem:

<IMG SRC=SelfPortrait.gif HEIGHT=100 WIDTH=65>

NOTA: Unele browser-e folosesc atributele HEIGHT si WIDTH pentru a extinde sau a reduce o imagine pentru a se potrivi in spatiul alocat. Nu toti autorii de browser-e considera ca marirea/micsorarea constituie o idee buna. De aceea este preferabil sa se aleaga corect dimensiunile.

Alinierea Imaginilor

Exista oarecare flexibilitate in afisajul imaginilor. Putem avea imagini separate prin text si aliniate la stanga sau dreapta, sau centrate. Sau se poate alinia imaginea cu textul. Trebuie incercate diferitele variante pentru a vedea cum arata mai bine.

Alinierea Textului cu o Imagine

Din oficiu baza imaginii este aliniata cu textul ce urmeaza. Se poate alinia imaginea sus sau in centrul unui paragraf folosind atributele ALIGN= TOP si CENTER. Spre exemplu

<IMG SRC = 'BarHotlist.gif' ALIGN=TOP>

De fapt doar prima linie se aliniaza sus, iar restul textului se aliniaza la partea de jos a imaginii.

Imagini fara Text

Pentru a afisa o imagine fara text asociat (de ex. emblema organizatiei d-voastra), puneti-o ca un pargraf separat. Folositi atributul de aliniere dorit in paragraf (ALIGN= atribut) pentru a centra imaginea sau a o alinia la dreapta:

<p ALIGN=CENTER>


<IMG SRC = 'BarHotlist.gif'>


</p>

Imaginea este astfel pozitionata in centru; paragraful incepe mai jos de ea si este aliniat la stanga

Alternarea Textului cu Imaginile

Unele navigatoare World Wide Web -mai ales cele ce ruleaza pe terminale VT100 nu pot afisa imaginile. Unii utilizatori chiar opteaza pentru evitarea imaginilor din cauza timpului care se pierde cu incarcarea lor in cazul conexiunilor defectuoase. Exista un mecanism in HTML care permite o astfel de optiune, adica afisarea unui text in locul unei imagini. E vorba de atributul ALT:

<IMG SRC='UpArrow.gif' ALT='Up'>

unde, ca exemplu, UpArrow.gif este o imagine a unei sageti indreptata in sus, marcand de obicei revenirea la inceputul documentului. Cu un navigator capabil de vizualizare grafica la care imaginile sunt acceptate vom vedea sageata respectiva. Cu un navigator VT100 sau daca a fost inhibata afisarea imaginilor, va apare pe ecran cuvantul Up .

Trebuie sa avem grije sa includem un text alternativ pentru fiecare imagine folosita in documentul HTML ca o atentie fata de cititori.

Grafica de fundal

Noile versiuni de navigatoare Web pot incarca o imagine folosind-o ca fundal (background) in afisarea paginii. Unii adora imaginile de fundal in timp ce altii le detesta. In general, daca doriti sa includeti o imagine ca fundal, scrieti textul astfel incat sa poata fi citit usor si cand este afisat peste fundalul dorit.

Imaginile fundal pot fi texturi sau imagini de obiecte (o emblema, eventual). Puteti crea imaginea de fundal in acelasi mod ca pe orice alta imagine.

Desigur ca se poate sa editam doar o mica parte din imaginea dorita ca fundal si sa folosim optiunea numita 'tiling'. Navigatorul repeta acea imagine pe toata suprafata ferestrei. Aceasta operatiune se realizeaza automat in exemplul de mai jos.

Tag-ul care include imaginea de fundal (background) este inclus in comanda <BODY> ca un atribut:

<BODY BACKGROUND='filename.gif'>

Culoarea de fond (Background Color)

Normal navigatoarele afiseaza textul in negru pe un fond gri. Se poate alege-schimba culoarea de fond, precum si cea cu care se scrie textul. Unii autori selecteaza un fond colorat si il coreleaza cu culorile in care sunt scrise diferitele portiuni de text. Este necesar sa verificati cu atentie ca textul este citibil. Mai trebuie luata in seama si problema-optiunea de tiparire a paginii, fie la imprimanta obisnuita fie la una color. Se poate intampla ca la o imprimare color textul sa devina complet ilizibil! E bine sa va ganditi si la persoanele cu deficiente de vedere, evitand, spre exemplu, textul rosu pe fond negru.

In exemplul de mai jos se creaza o fereastra cu fond negru (BGCOLOR), text alb (TEXT), si legaturile (hyperlink) argintii (LINK), toate ca atribute in comanda <BODY>.

<BODY BGCOLOR='#000000' TEXT='#FFFFFF' LINK='#9690CC'>

Numerele de cate sase pozitii hexa, marcate cu semnul # , codifica culorile, reprezentand coduri in sistemul RGB (red, green, blue). Cele 6 cifre sunt de fapt 3 campuri de cate 2 caractere hexa - adica un octet pentru fiecare din cele 3 culor de baza, in ordinea rosu, verde si albastru, in plaja 00-FF. Spre exemplu, 000000 inseamna negru (nici o culoare), FF0000 este rosu stralucitor, iar FFFFFF - alb (saturare completa in toate cele 3 culori). Cu putina experimentare lucrurile se lamuresc chiar daca par la inceput criptice. O asistenta online privind alegerea combinatiei dorite de culori se poate obtine de pe serverul ColorPro.

Imagini externe, Sunete si Animatie

Putem dori sa includem deschiderea unei imagini doar ca optiune a utilizatorului, imaginea intervenind atunci ca document separat (cand utilizatorul selecteaza link-ul plasat pe un text sau pe o imagine miniaturala. Asta tot ca atentie acordata cititorilor ce nu poseda resurse suficient de puternice pentru incarcarea imaginii in documentul initial. Avem astfel o 'imagine externa', situatie utila mai ales in cazul imaginilor mari. Pentru a include o referire la o imagine externa scriem cam asa:

<A HREF='MyImage.gif'>link anchor</A>

Sau, folosind o imagine mai mica ca element de legatura la imaginea mare:

  <A HREF='LargerImage.gif'><IMG SRC='SmallImage.gif'></A>

Cititorul vede SmallImage.gif si o selecteaza (click) pentru a deschide fisierul LargerImage.gif .

Aceeasi sintaxa se foloseste pentru legaturi la fisiere sunet sau de animatie. Singura diferenta este tipul fisierului (extensia). Spre exemplu,

<A HREF='AdamsRib.mov'>link anchor</A>

marcheaza o legatura la o secventa de animatie QuickTime movie.

Iata cateva din fisierele mai uzuale si extensiile folosite:

Tipul de fisier  Extensia

Fisiere text simplu  .txt
Document HTML .html
Imagine GIF.gif
Imagine TIFF.tiff
Imagine X Bitmap .xbm
Imagine JPEG  .jpg  sau .jpeg
Fisier PostScript.ps
Fisier sunet AIFF.aiff
Fisier sunet AU  .au
Fisier sunet WAV .wav
QuickTime movie  .mov
MPEG movie .mpeg or .mpg

Ganditiva intotdeuna la publicul caruia va adresati si la posibilitatile software de care dispun cititorii. Multe statii UNIX, spre exemplu, nu pot vizualiza fisiere de tip QuickTime movie.