Ghidul Incepatorului pentru HTML Termeni care trebuie cunoscuti WWW - World Wide Web [Retea raspandita in toata

lumea] Web - World Wide Web [Retea raspandita in toata lumea] SGML - Standard Generalized Markup Language [Limbaj de marcare generalizat standard] DTD - Document Type Definition [Specificarea formala a unui limbaj de marcare, scrisa folosind SGML] HTML - HyperText Markup Language [HTML este un DTD tip SGML] In cuvinte obisnuite, HTML este o colectie de stiluri independente de platforma (indicate prin etichete de marcare) care definesc variatele componente ale unui document WWW. HTML a fost inventat de Tim Berners-Lee pe cand se afla la CERN, Laboratorul European pentru Fizica Particulelor in Geneva.

Ce nu este acoperit Acest abecedar presupune ca: stiti sa folositi un browser de Internet aveti cateva cunostinte generale despre modul cum functioneaza serverele de Internet si browserele aveti acces la un server de Internet (sau doriti sa creati documente HTML pentru folosire personala in modul de vizualizare locala)

Documente HTML

Ce este un document HTML Documentele HTML sunt fisiere formate din texte simple (cunoscute si sub numele de ASCII) care pot fi create folosind orice editor de text (de exemplu: Emacs pe aparatele UNIX; SimpleText pe Macintosh; Notepad pe aparatele ce folosesc Windows). De asemenea puteti folosi un program de procesare a cuvintelor daca va amintiti sa va salvati documentul ca "text only with line breaks" [doar text cu intreruperi de linie].

Editoare HTML Sunt disponibile si alte editoare WYSIWYG: Claris Home Page sau Adobe PageMill, amandoua pentru Windows si Macintosh. Poate veti dori sa incercati unul din ele dupa ce veti invata cateva lucruri de baza despre etichetele HTML. WYSIWYG este un acronim pentru "what you see is what you get" [Ce vezi este ce obtii]; adica va proiectati documentele HTML in mod vizual, ca si cum ati folosi un procesor de cuvinte, in loc sa scrieti etichete de marcare intr-un fisier format din text simplu si imaginandu-va cum va arata pagina care va rezulta. Este folositor sa cunoasteti destul HTML in cazul in care doriti sa adaugati etichete HTML pe care editorul vostru WYSIWYG nu le suporta.

Daca inca nu v-ati ales programul, vizitati pagina lui Tom Magliery despre editoare HTML http://sdg.ncsa.uiuc.edu/~mag/work/HTMLEditors/ (organizate dupa platforma) pentru a va ajuta in cautarea programului corespunzator.

Puneti-va fisierele pe un server Daca aveti acces la un server de Internet la scoala sau la munca, contactati webmasterul (persoana care se ocupa cu intretinerea serverului) pentru a vedea cum puteti sa va puneti fisierele pe Internet. Daca nu aveti acces la un server la scoala sau la munca, vedeti daca local gasiti un FreeNet, care furnizeaza acces gratuit la Internet. Daca nu gasiti asa ceva, va trebui sa contactati un furnizor de Internet local care va va pune fisierele pe Internet pentru o taxa. (Verificati ziarele locale pentru publicitate sau la Camera de Comert pentru numele firmelor.)

Etichete explicate Un element este o componenta fundamentala din structura unui document format din text. Exemple de elemente sunt titlurile-urile, tabelele, paragrafele si listele. Ganditi-va la aceasta in felul urmator: folositi etichete HTML pentru a marca elementele unui fisier pentru browserul vostru. Elementele pot contine text simplu, alte elemente sau amandoua. Pentru a indica variatele elemente intr-un document HTML, folositi etichete. Etichetele HTML constau intr-o paranteza ascutita la stanga (<), un nume al etichetei si o paranteza ascutita la dreapta (>). Etichetele de obicei se gasesc in perechi (de exemplu <H1> si </H1>) pentru a incepe si a termina instructia etichetei. Eticheta de incheiere arata ca eticheta de incepere cu exceptia liniei (/) care precede textul in paranteze. Etichetele HTML se gasesc mai jos. Unele elemente pot contine o caracteristica, ceea ce reprezinta o informatie in plus care este inclusa in eticheta de incepere. De exemplu, puteti specifica alinierea imaginilor (sus, la mijloc sau jos), incluzand caracteristica corespunzatoare in codul HTML reprezentand sursa imaginii. Etichetele care au caracterisitici optionale sunt notate mai jos. NOTA: HTML nu este sensibil la scrierea cu litere mici sau mari. <title> este echivalent cu <TITLE> sau <TiTlE>. Sunt si cateva exceptii care sunt notate in Secventele de scapare de mai jos. Nu toate etichetele sunt suportate de catre toate browserele de Internet. Daca un browser nu suporta o eticheta, pur si simplu o ignora. Totusi, textul care se gaseste intre o pereche de etichete necunoscute va fi afisat.

Documentul HTML minim Fiecare document HTML ar trebui sa contina anumite etichete HTML standard. Fiecare document consta din head si textul din body. Head-ul contine titlul [title] iar body-ul contine textul propriu-zis care este format din paragrafe, liste si alte elemente. Elementele necesare sunt aratate mai jos:

22

<html> <head> <TITLE>Un exemplu HTML simplu</TITLE> </head> <body> <H1>HTML este usor de invatat</H1> <P>Bine ati venit in lumea HTML. Acesta este primul paragraf. Desi scurt, este totusi un paragraf!</P> <P>Si acesta este al doilea paragraf.</P> </body> </html> Elementele necesare sunt <html>, <head>, <title>, <body> (si etichetele de incheiere corespunzatoare). Deoarece ar trebui sa includeti aceste etichete in fiecare fisier, ati putea lua in cosideratie sa creati un document "template" cu ele. (Unele browsere vor formata fisierul vostru HTML in mod corect desi aceste etichete nu sunt incluse. Dar unele browsere nu o vor face! Asa ca asigurati-va ca le-ati inclus.) Un instrument de invatare Pentru a vedea o copie a fisierului pe care browserul vostru il citeste pentru a genera informatiile din fereastra curenta, selectati View Source (Vezi Sursa) (sau echivalentul acesteia) din meniul browserului. (Majoritatea browserelor au un meniu "View" sub care se gaseste aceasta comanda.) Continutul fisierului, cu toate etichetele HTML apare intr-o fereastra noua. Aceasta este o modalitate excelenta pentru a vedea cum se foloseste HTML. Desigur, HTML este posibil sa nu fie corect din punct de vedere tehnic. Odata familiarizati cu HTML si dupa ce ati vazut resursele informationale despre subiect, veti putea sa distingeti intre HTML "bun" si "rau". Nu uitati ca puteti salva un fisier sursa cu coduri HTML si sa-l folositi ca un document "template" pentru paginile voastre Web sau sa-i modificati formatul pentru a se potrivi scopului vostru.

Etichete de marcare

HTML Acest element spune browserului ca fisierul contine informatie codificata in HTML. Extensia fisierului "*.html" de asemenea indica ca acesta este un document HTML si trebuie folosita. (Daca nu puteti folosi decat nume de fisiere de tipul 8.3 (de exemplu: CasaLee.htm) folositi doar extensia "*.htm". HEAD

22

Elementul head identifica prima parte a documentului codificat in HTML care contine titlul. Titlul este aratat ca parte a ferestrei browserului vostru. (vezi mai jos). TITLE [Denumirea documentului] Elementul title contine denumirea documentului si identifica continutul acestuia intr-un context global. Denumirea este afisata in bara de denumire in partea de sus a ferestrei browserului si nu in interiorul ferestrei (vezi imaginea de mai jos). De asemenea denumirea apare in lista fierbinte a unei persoane si in lista de bookmark, asa ca alegeti ceva descriptiv, unic si cat de cat scurt. De asemenea denumirea documentului este folosita pentru a identifica pagina voastra pentru motoarele de cautare. [cum ar fi: HotBot (http://www.hotbot.com/), Yahoo! (http://www.yahoo.com/) sau Infoseek (http://www.infoseek.com/)]. De exemplu, ati putea include o denumire prescurtata a unei carti impreuna cu continutul capitolului: NCSA Ghid Mosaic (Windows): Instalare. Acesta spune numele software-ului, platforma si continutul capitolului, ceea ce este mult mai simplu decat numind documentul pur si simplu Instalare. In general ar trebui sa aveti in titlu 64 de caractere sau mai putin.

BODY [Corp] A doua -- si cea mai mare -- parte a documentului HTML o reprezinta corpul, in care intra continutul documentului (afisat in zona de text a ferestrei browserului). Etichetele explicate mai jos sunt folosite in corpul documentului tip HTML. Eticheta <body> controleaza culorile, imaginile de fond si alte trasaturi. Pentru a le controla, aceasta eticheta se scrie astfel: <body bgcolor="#xxxxxx" text="#xxxxxx" link="#xxxxxx" vlink="#xxxxxx" alink="#xxxxxx"> Puteti include sau nu oricare element (bgcolor [culoare de fond], text [text], link [legatura], vlink [legatura vizitata], alink [legatura activa]). Pentru a stabili culoarea de fond, culoarea textului, legaturii, legaturii vizitate sau a celei active, inlocuiti xxxxxx cu valoarea unei culori. Nu le faceti aceeasi culoare pe toate deoarece nu veti putea vedea nimic pe pagina. Pentru valoarea unei culori cititi sectiunea Culoare pentru fond.

Titluri HTML are sase nivele de titluri, numerotate de la 1 la 6, 1 fiind cel mai mare. Titlurile in mod normal sunt afisate intr-un font mai mare si/sau mai gros decat textul normal al corpului. Primul titlu in fiecare document ar trebui sa fie format <H1>. 22

Sintaxa elementului titlu este: <Hy>Textul titlului</Hy> unde y este un numar intre 1 si 6 specificand nivelul titlului. Nu sariti peste nivele de titlu in documentul vostru. De exemplu, nu incepeti cu un titlu de nivelul 1 (<H1>) ca apoi sa folositi un titlu de nivelul 3 (<H3>).

Titlurile: <h1>Titlu de nivelul 1</h1> <h2>Titlu de nivelul 2</h2> <h3>Titlu de nivelul 3</h3> <h4>Titlu de nivelul 4</h4> <h5>Titlu de nivelul 5</h5> <h6>Titlu de nivelul 6</h6> Vor arata astfel: Titlu de nivelul 1 Titlu de nivelul 2 Titlu de nivelul 3 Titlu de nivelul 4 Titlu de nivelul 5 Titlu de nivelul 6 Paragrafe Spre deosebire de majoritatea procesoarelor de cuvinte orice cantitate de spatiu alb este in mod automat compresata intr-un singur spatiu cand documentul tip HTML este afisat in browser. Asa ca nu trebuie sa va faceti griji in privinta liniilor lungi. Intreruperea liniilor [word wrapping] poate avea loc in orice punct in documentul sursa fara sa afecteze modul de afisare al paginii. In exemplul aratat in sectiunea Documentul HTML minim, primul paragraf este codificat dupa cum urmeaza: <P>Bine ati venit in lumea HTML. Acesta este primul paragraf. Desi scurt, este totusi un paragraf!</P> In documentul sursa apare o intrerupere a liniei intre propozitii. Un browser de Internet ignora aceasta intrerupere a liniei si incepe un nou paragraf doar cand intalneste o alta eticheta <P>. Important: Trebuie sa indicati paragrafele prin elemente <P>. Un browser ignora liniile albe in textul din sursa. Fara elementele <P>, documentul devine un paragraf mare. (O exceptie o reprezinta textul formatat ca "preformatat", ceea ce se explica mai jos.)

22

Pentru a face usoara citirea documentelor HTML, puneti titlurile pe linii separate, folositi o linie goala sau doua acolo unde ajuta la identificarea inceputului unei noi sectiuni si separati paragrafele cu linii goale (pe langa eticheta <P>). Aceste extra spatii va vor ajuta cand va editati fisierele (browserul vostru va ignora aceste extra-spatii deoarece el are propriul lui set de reguli in ceea ce priveste spatiile care nu depind de spatiile pe care le faceti in documentul sursa). NOTA: Eticheta </P> de incheiere poate fi omisa. Acest lucru este posibil deoarece browserele inteleg ca atunci cand intalnesc o eticheta <P> inseamna ca paragraful anterior s-a terminat. Totusi, de vreme ce HTML permite acum includerea unor caracteristici in eticheta <P> ar fi mai bine sa o includeti. Folosind <P> si </P> pentru a arata un paragraf inseamna ca puteti include caracteristica ALIGN=aliniament in documentul vostru sursa. <TT><P ALIGN=CENTER></TT> Acesta este un paragraf centrat. [Vezi versiunea formatata mai jos.] </P> Acesta este un paragraf centrat. De asemenea este posibil sa aliniati un paragraf la dreapta incluzand caracteristica ALIGN=RIGHT; la stanga ALIGN=LEFT este alinierea de baza; daca nu este inclusa nici o caracteristica ALIGN, paragraful va fi aliniat la stanga. Caracterele mai pot fi aliniate orizontal folosind etichetele <left>...</left>,<center>...</center>,<right>...</right> De exemplu, acesta linie <center>Acesta este un text.</center> va aparea astfel: Acesta este un text. Daca textul respectiv inclus in eticheta <center>...</center> are mai mult decat o linie, toate liniile vor fi centrate. Pentru a schimba culoarea textului si marimea lui folositi eticheta: <font face="Arial" size=9 color="#ff0000">Aici este textul.</font> Legaturi

Puterea principala a HTML se trage din posibilitatea de a lega text si/sau imagini de alt document sau sectiuni din document. Un browser scoate in evidenta textul identificat sau imaginea cu culoare si/sau il subliniaza pentru a indica ca este o legatura hipertext (adesea prescurtata ca hiperlegatura sau doar legatura). 22

Singura eticheta legata de hipertext a HTML este <A>, care vine de la ancora [anchor]. Pentru a introduce o ancora in documentul vostru: incepeti ancora cu <A> (includeti un spatiu dupa A) specificati documentul de care va legati introducand parametrul HREF="filename" urmat de paranteza de inchidere ascutita la dreapta (>) introduceti textul care va servi drept hiperlegatura in documentul curent introduceti eticheta de inchidere a ancorei: </A> (fara spatiu inainte de eticheta de inchidere a ancorei) Exemplu de hiperlegatura intr-un document numit Romania.html: <A HREF="JudeteleRomaniei.html">Judete</A> Aceasta intrare face ca cuvantul Judete sa fie hiperlegatura catre documentul JudeteleRomaniei.html, care se gaseste in acelasi director cu primul document (Romania.html).

Cale relativa sau cale absoluta Va puteti lega de documente din alte directoare specificand calea relativa de la documentul vostru la documentul de care va legati. De exemplu, o legatura la un fisier JudetulBuzau.html aflat in subdirectorul Muntenia ar arata: <A HREF="Muntenia/JudetulBuzau.html">Buzau</A> Acestea se numesc legaturi relative deoarece specificati calea catre fisierul la care va legati tinand cont de locul unde se afla fisierul curent. De asemenea puteti folosi calea absoluta (intregul URL) a fisierului, dar legaturile relative sunt mai eficiente cand se acceseaza un server. De asemenea ele au avantajul de a face documentele voastre "mai portabile" -- de exemplu, puteti crea mai multe pagini de internet intr-un singur director pe calculatorul vostru, folosind legaturi relative pentru a lega o pagina de alta, si apoi uploadati intregul director cu pagini web la serverul vostru web. Paginile pe server se vor lega de alte pagini pe server, iar copiile pe hard-drive-ul vostru tot vor arata spre celelalte pagini inmagazinate acolo. Este important de retinut ca UNIX este un sistem operational sensibil la marimea literelor in ceea ce priveste numele fisierelor, in timp ce DOS si Mac-urile nu sunt. De exemplu, pe un Macintosh, "DOCUMENT.HTML", "Document.HTML", si "document.html" reprezinta aceeasi denumire. Daca faceti o legatura relativa catre "DOCUMENT.HTML", iar fisierul se numeste de fapt "document.html", legatura va functiona. Dar daca upload-ati paginile pe un server web UNIX, legatura nu va mai functiona. Asigurati-va ca ati verificat numele fisierelor inainte de upload-are. Caile folosesc sintaxa standard UNIX. Sintaxa UNIX pentru directorul parinte (directorul care contine directorul curent) este "..". (Pentru informatii suplimentare consultati un text 22

referitor la UNIX pentru incepatori cum ar fi Learning the UNIX Operating System [Invatati sistemul de operare UNIX] de O'Reilly and Associates, Inc.) Daca v-ati afla in documentul JudeteleRomaniei.html si ati face referire la documentul original Romania.html, legatura voastra ar arata astfel: <A HREF="../Romania.html">ROMANIA</A> In general, ar trebui sa folositi legaturi relative ori de cate ori posibil, deoarece: este mai usor sa mutati un grup de documente in alt loc (deoarece caile relative vor functiona) conectarea la server este mai eficienta scrieti mai putin Totusi, folositi cai absolute cand va legati de documente care nu sunt asemanatoare intre ele in mod direct. De exemplu, sa consideram un grup de documente care alcatuiesc un manual. Legaturile intre acestea ar trebui sa fie relative. Legaturile de alte documente (poate o referire la un program folositor) ar trebui sa foloseasca cai absolute. In acest fel, daca mutati manualul intr-alt director, nici una din legaturi nu va trebui adusa la zi.

URL-uri Reteaua raspandita in toata lumea [The World Wide Web] foloseste locatori de resurse uniforme [Uniform Resource Locators] (URL-uri) pentru a specifica locatia fisierelor pe alte servere. Un URL include tipul de resursa care este accesata (de exemplu, Web, gopher, FTP), adresa serverului si localizarea fisierului. Sintaxa este: schema://domeniu.gazda[:port]/calea/numele_fisierului unde schema este una din file [fisier] un fisier (document) pe calculatorul vostru ftp [File Transfer Protocol - Protocol de transferare a fisierelor] un fisier pe un server FTP anonim http un fisier pe un server de internet gopher un fisier pe un server Gopher WAIS un fisier pe un server WAIS news un grup de stiri Usenet telnet o conectare la un serviciu bazat pe Telnet 22

Numarul de port in general poate fi omis. (Adica daca nu va spune cineva altceva, nu-l folositi.) De exemplu, pentru a include o legatura catre pagina mea in documentul vostru, introduceti: <A HREF="http://www.geocities.com/cristeis/index.html">Pagina mea</A> Din aceasta reiese ca textul Pagina mea este o legatura la pagina mea de internet. Exista de asemenea o schema de trimis e-mail folosita pentru a hiperlega adresele de email, dar aceasta scheme este unica in sensul ca foloseste doar doua puncte (:) in loc de :// intre schema si adresa. Puteti citi mai multe despre aceasta mai jos. Pentru informatii suplimentare despre URL-uri, urmati legatura: http://www.w3.org/hypertext/WWW/Addressing/Addressing.html

Legaturi catre anumite sectiuni Se pot folosi ancore pentru a muta cititorul catre o anumita sectiune a unui document (ori acelasi document, ori altul) decat sa fie mutat in partea de sus, ceea ce se intampla in mod normal. Acest tip de ancora se numeste a ancora numita deoarece pentru a crea legaturi, inserati nume HTML in document. Legaturile interne sunt folosite pentru a crea un "cuprins" in partea de sus a documentului. Aceste legaturi va muta dintr-un loc in altul in cadrul acestui document. De asemenea va puteti lega de a anumita sectiune din alt document. Aceasta informatie este prezentata mai intai deoarece daca intelegeti acest lucru veti intelege cum sa va legati in cadrul aceluiasi document.

Legaturi catre sectiuni ale altor documente Sa presupunem ca vreti sa construiti o legatura de la documentul A (documentA.html) catre o anumita sectiune a altui document (Buzau.html). Introduceti codul HTML pentru o legatura catre o ancora: documentA.html: Dintre toate cartierele din Judetul Buzau, unul dintre cele mai vechi este <a href="Buzau.html#CMV">Cartierul Micro V</a>. In continuare, sa cream ancora (in acest exemplu "CMV") in Buzau.html:

22

<H2><A NAME="CMV">Cartierul Micro V</a></H2> Cu aceste doua elemente la locul lor, puteti aduce un cititor direct la locul unde se face referire la Cartierul Micro V in Buzau.html. Ancora se afla inaintea cuvintelor "Cartierul Micro V". NOTA: Nu puteti sa creati legaturi catre anumite sectiuni dintr-un document decat daca aveti permisiunea de a scrie in sursa de cod a documentului respectiv sau daca acel document contine deja ancore. De exemplu, puteti include legaturi catre acest ghid (http://www.geocities.com/cristeis/romana/ghid.html) in documentul vostru deoarece exista ancore in acest ghid (folositi View Source in browserul vostru pentru a vedea codul HTML). Dar daca acest document nu avea ancore, nu puteati crea legaturi catre anumite sectiuni deoarece nu puteti edita fisierul original de pe server.

Legaturi catre anumite sectiuni in documentul curent Tehnica este aceeasi, cu exceptia faptului ca se omite numele_fisierului. De exemplu, pentru a va lega de ancora CMV din cadrul Buzau.html, introduceti: ...Alte informatii despre <A HREF="#CMV">Cartierul Micro V</a> sunt disponibile in alta parte in acest document. Aveti grija sa includeti eticheta <A NAME=> in locul din documentul vostru unde doriti sa duca legatura (<A NAME="CMV">Cartierul Micro V</a>). Ancorele sunt in mod deosebit folositoare cand credeti ca cititorii vor tipari un document in intregime sau cand aveti o multime de informatii scurte pe care doriti sa le puneti online intr-un singur fisier.

Trimiteti e-mail Puteti face ca cititorul sa trimita usor un mesaj electronic unei anumite persoane incluzand caracteristica mailto intr-o legatura. Formatul este: <A HREF="mailto:nume@gazda">Nume</a> De exemplu, introduceti: <A HREF="mailto:cristeis@yahoo.com">Trimiteti-mi un mesaj</a> pentru a crea o fereastra de mesaj care este configurata deja sa deschida o fereastra de mesaj pentru cristeis@yahoo.com (adica pentru mine). Voi, desigur, veti introduce alta adresa de e-mail!

22

Imagini in direct

Majoritatea browserelor de internet pot afisa imaginile in direct (adica, imagini langa text), imagini care sunt in formatul X Bitmap (XBM), GIF sau JPEG. Alte formate de imagini sunt de asemenea incorporate in browserele de internet [de exemplu, formatul Grafic de Retea Portabil (Portable Network Graphic) (PNG)]. Fiecare imagine cere timpul ei pentru incarcare si incetineste afisarea initiala a unui document. Alegeti cu grija imaginile voastre si numarul de imagini intr-un document. Pentru a include o imagine in direct, introduceti: <IMG SRC=NumeleImaginii> unde NumeleImaginii reprezinta URL-ul imaginii. Sintaxa pentru URL-uri <IMG SRC> este identica cu cea folosita intr-o ancora HREF. Daca imaginea este in format GIF, atunci partea numele_imaginii din NumeleImaginii trebuie sa se termine cu .gif. Imaginile X Bitmap trebuie sa se termine cu .xbm; Imaginile JPEG trebuie sa se termine cu .jpg sau .jpeg; iar imaginile Portable Network Graphic trebuie sa se termine cu .png.

Caracteristicile marimii imaginilor Ar trebui sa includeti inca doua caracteristici in eticheta <IMG> pentru a spune browserului vostru marimea imaginilor pe care le incarca impreuna cu textul. Caracteristicile HEIGHT [Inaltime] si WIDTH [Latime] fac ca browserul sa lase gol spatiul necesar (in pixeli) pentru imagini in timp ce incarca restul documentului. (Puteti obtine marimea in pixeli din programul de procesare al imaginilor pe care-l aveti, cum ar fi Adobe Photoshop. Unele browsere vor afisa dimensiunile unei imagini in bara de titlu daca imaginea este vazuta singura fara un document HTML care s-o contina.) De exemplu, pentru a include o imagine autoportret intr-un document impreuna cu dimensiunile portretului, introduceti: <IMG SRC=Autoportret.gif HEIGHT=100 WIDTH=65> NOTA: Unele browsere folosesc caracteristicile HEIGHT si WIDTH pentru a micsora sau mari imaginea pentru a incapea in spatiul alocat cand imaginea nu se potriveste exact cu numerele caracteristicelor. Nu toti cei care produc browsere cred ca marirea/micsorarea este o ideee buna, asa ca nu toti cititorii vor avea acces la aceasta trasatura. Verificati-va dimensiunile si folositi-le pe cele corecte.

Alinierea imaginilor

22

Dispuneti de anumita flexibilitate in afisarea imaginilor. Puteti avea imagini separate de text si aliniate la stanga, dreapta sau pe centru. Sau puteti avea o imagine aliniata cu text. Incercati mai multe posibilitati pentru a vedea cum arata informatia voastra cel mai bine.

Alinierea textului cu o imagine

In mod normal partea de jos a imaginii este aliniata cu textul care urmeaza, dupa cum se vede in acest paragraf. Puteti alinia imagini in partea de sus sau pe centrul unui paragraf folosind caracteristicile ALIGN=TOP si CENTER. Acest text este aliniat cu partea de sus a imaginii (<IMG SRC = "autorul.gif"

ALT="[AUTORUL]" ALIGN=TOP>). Observati cum browserul aliniaza doar o linie si apoi sare in partea de jos a imaginii pentru restul textului.

Iar acest text este pe centrul imaginii (<IMG SRC = "autorul.gif" ALT="[AUTORUL]" ALIGN=CENTER>). Din nou, doar o linie a textului este pe centru, iar restul este sub imagine. Imagini fara text Pentru afisarea unei imagini fara nici un text asociat (de exemplu, logo-ul organizatiei voastre), faceti-o un paragraf separat. Folositi caracterisitica de paragraf ALIGN= pentru a centra imaginea sau a o adjusta in partea dreapta a ferestrei dupa cum vedeti mai jos: <p ALIGN=CENTER> <IMG SRC = "autorul.gif" ALT="[AUTORUL]"> </p> care are ca rezultat:

Imaginea este centrata; acest paragraf incepe sub ea si este aliniat la stanga.

Alternarea text pentru imagini

22

Unele browsere -- in principal cele de text cum ar fi Lynx http://lynx.browser.org/ -- nu pot afisa imagini. Unele persoane dezactiveaza incarcarea imaginilor, chiar daca programul lor poate afisa imagini (mai ales daca folosesc un modem sau au o legatura slaba). HTML furnizeaza un mecanism pentru a-i informa pe cititori ce pierd daca nu incarca imaginile. Caracteristica ALT va da voie sa specificati textul care sa fie afisat in loc de o imagine. De exemplu: <IMG SRC="sageata_sus.gif" ALT="Sus"> unde sageata_sus.gif este imaginea unei sageti care arata in sus. Folosind programe care pot vedea imagini si care au incarcarea acestora activata vedeti imaginea. Folosind un browser de text sau dezactivand incarcarea imaginilor, cuvantul Sus apare in locul acelei imagini. Ar trebui sa includeti text de alternare pentru fiecare imagine in documentul vostru, ceea ce ii va ajuta foarte mult pe ceilalti.

Imagini ca hiper-legaturi Imaginile in direct pot fi folosite ca legaturi exact ca textul. Urmatorul cod HTML: <A HREF="autorul.html"><IMG SRC="autorul.gif" ALT="[AUTORUL]"></A> Produce urmatorul rezultat:

Bordura albastra care inconjoara imaginea indica ca aceasta este o imagine legatura. Poate ca nu doriti aceasta bordura mereu. In acest caz puteti folosi caracteristica BORDER a etichetei IMG pentru a face ca imaginea sa apara normal. Adaugand caracteristica BORDER si setand-o la zero: <A HREF="autorul.html"><IMG SRC="autorul.gif" BORDER=0 ALT="[AUTORUL]"></A> Are ca rezultat (imaginea este tot o legatura):

Caracteristica BORDER poate fi setata la valori diferite de zero, chiar daca imaginea este o legatura sau nu. In acest caz bordura va aparea cu culoarea pe care o are textul in pagina. De exemplu, daca ati vrea sa puneti o bordura imaginii voastre pentru a se evidentia pe pagina, ati putea incerca: 22

<IMG SRC="autorul.gif" BORDER=6 ALT="[AUTORUL]"> Si veti obtine rezultatul:

Grafice pentru fond Versiunile mai noi de browsere pot incarca o imagine si o pot folosi ca fond cand afiseaza o pagina. Unelor persoane le plag imaginile de fond pe cand altora nu. Daca vreti sa includeti un fond, asigurati-va ca textul poate fi citit cu usurinta cand este afisat deasupra imaginii. Imaginile de fond pot fi o textura sau imaginea unui obiect (logo). Creati imaginea de fond exact cum creati orice alta imagine. Nu trebuie sa creati decat o mica parte din imagine. Folosind o caracteristica numita tiling [acoperire cu tigla], un browser ia imaginea si o repeta pana acopera fereastra. Creati o singura imagine iar browserul o multiplica de cate ori este necesar pentru a umple fereastra. Actiunea este automata cand folositi eticheta de fond aratata mai jos. Eticheta de a include o imagine de fond se include in eticheta <BODY> ca o caracteristica a acesteia: <BODY BACKGROUND="numele_fisierului.gif">

Culoare pentru fond In mod normal browserele afiseaza textul culoarea neagra pe un fond gri. Se pot schimba aceste doua elemente daca doriti. Unii autori de HTML aleg o culoare de fond si o coordoneaza cu schimbarea culorii textului. Vizionati schimbarile pentru a va asigura ca paginile pot fi citite cu usurinta. (De exemplu, multe persoane considera ca textul rosu pe fond negru este greu de citit!) In general, incercati sa evitati folosirea imaginilor contrastante sau a imaginilor care folosesc culoarea unui text din imagine. Schimbati culoarea textului, legaturilor, legaturilor vizitate si active (legaturile pe care se efectueaza un clic) folosind alte caracteristici in eticheta <BODY>. De exemplu: <BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC"> Aceasta creaza o fereastra cu un fond negru (BGCOLOR), text alb (TEXT), si legaturi argintii (LINK). 22

Combinatia de numere si cifre de sase caractere reprezinta culori, dand valoarea lor RGB (red, green, blue - rosu, verde, albastru). Cele sase caractere sunt de fapt numere de cate doua caractere, reprezentand cantitatea de rosu, verde sau albastru ca o valoare hexadecimala in gama 00-FF. De exemplu, 000000 este negru (nici o culoare), FF0000 este rosu aprins, 0000FF este albastru stralucitor, iar FFFFFF este alb (saturat la maxim cu cele trei culori). Aceste combinatii de numere si litere sunt in general criptice. Din fericire exista o sursa online care sa va ajute sa obtineti combinatia care sa reprezinte culorile dorite si de asemenea exista programe care sa faca acest lucru pentru voi: http://www.hidaho.com/colorcenter/ De asemenea puteti gasi la adresa http://www.geocities.com/cristeis/romana/culori.html 60 de culori cu valoarea lor hexadecimala. Pentru unele culori de baza -- de obicei cele din paleta standard de 16 culori a Windows 3.1 -- puteti folosi si numele culorii in loc de valoarea RGB corespunzatoare. De exemplu, "black [negru]", "red [rosu]", "blue [albastru]", and "cyan [ocru]" sunt toate valide pentru a fi folosite in locul valorilor RGB. Totusi tineti cont ca nu toate browserele suporta numele culorilor, in timp ce valorile RGB sunt suportate.

Imagini, sunete si animatii externe Poate veti dori ca o imagine sa se deschida ca un document separat cand o persoana activeaza o legatura fie pe un cuvant fie pe o versiune mai mica a imaginii inclusa in document. Aceasta se numeste o imagine externa si este folositoare daca nu doriti sa incetiniti incarcarea documentului cu imagini mari in direct. Pentru a include o referinta la o imagine externa, introduceti: <A HREF="ImagineaMea.gif">ancora legaturii</A> De asemenea puteti folosi o imagine mai mica ca o legatura catre o imagine mai mare. Introduceti: <A HREF="ImagineMaiMare.gif"><IMG SRC="ImagineMaiMica.gif"></A> Cititorul vede imaginea ImagineMaiMica.gif si efectueaza clic pe ea pentru a deschide imaginea ImagineMaiMare.gif. Folositi aceeasi sintaxa pentru legaturi catre animatii si sunete externe. Singura diferenta o reprezinta extensia fisierelor la care se face legatura. De exemplu, <A HREF="Adam.mov">ancora legaturii</A> 22

specifica o legatura catre un film QuickTime. Unele tipuri de fisiere obisnuite si extensiile lor sunt: plain text [text simplu] .txt HTML document [document HTML] .html GIF image [imagine GIF] .gif TIFF image [imagine TIFF] .tiff X Bitmap image [imagine X Bitmap] .xbm JPEG image [imagine JPEG] .jpg sau .jpeg PostScript file [fisier PostScript] .ps AIFF sound file [fisier sunet AIFF] .aiff AU sound file [fisier sunet AU] .au WAV sound file [fisier sunet WAV] .wav QuickTime movie [fisier film MOV] .mov MPEG movie [fisier film MPEG] .mpeg sau .mpg

Tabele

Inainte sa fie finalizate etichetele HTML pentru tabele, autorii trebuiau sa-si formateze cu grija informatiile tabelare in etichete <PRE>, numarand spatiile si vizionand rezultatul. Tabelele sunt foarte folositoare pentru prezentarea informatiilor tabelare si reprezinta un avantaj pentru autorii de HTML creativi care folosesc etichetele de tabel pentru a-si prezenta paginile Web. (Duceti-va la pagina NCSA - (http://www.ncsa.uiuc.edu/) pentru un exemplu excelent de folosire a tabelelor pentru a controla asternerea in pagina.) Ganditi-va informatiile tabelare in lumina codurilor explicate mai jos. Un tabel are capete in care explicati ce includ coloanele/randurile, randuri pentru informatii, celule pentru fiecare parte. In urmatorul tabel, prima coloana contine informatia titlu, fiecare rand explica o eticheta de tabel HTML iar fiecare celula contine o eticheta pereche sau o explicare a functiunii acestei etichete.

Elementele tabelului Element

Descriere 22

<TABLE> ... </TABLE> defineste un tabel in HTML. Daca caracteristica BORDER este prezenta, browserul afiseaza un tabel cu o bordura. <CAPTION> ... defineste legenda pentru titlul tabelului. Pozitia normala </CAPTION> a titlului este centrata in partea de sus a tabelului. Se poate folosi caracteristica ALIGN=BOTTOM pentru a pozitiona legenda in partea de jos a tabelului. NOTA: Se poate folosi orice cod HTML in legenda. <TR> ... </TR> specifica un rand in cadrul unui tabel. Puteti defini caracteristicile din setare pentru intregul rand: ALIGN (LEFT, CENTER, RIGHT) si/sau VALIGN (TOP, MIDDLE, BOTTOM). Vedeti Caracteristicile tabelelor la sfarsitul acestui tabel pentru informatii suplimentare. <TH> ... </TH> definesc o celula titlu a tabelului. Din setare textul in aceasta celula este ingrosat si centrat. Celulele titlu ale tabelului pot contine alte atribute pentru a determina caracteristicile celulei si/sau continutul ei. Vedeti Caracteristicile tabelelor la sfarsitul acestui tabel pentru informatii suplimentare. <TD> ... </TD> definesc o celula de date a tabelului. Din setare textul in aceasta celula este aliniat la stanga si centrat pe verticala. Celulele de date ale tabelelor pot contine alte atribute care sa determine caracteristicile celulei si/sau continutul ei. Vedeti Caracteristicile tabelelor la sfarsitul acestui tabel pentru informatii suplimentare.

Caracteristicile tabelelor NOTA: Caracteristicile definite in cadrul celulelor <TH> ... </TH> sau <TD> ... </TD> inlocuiesc alinierea din setare a <TR> ... </TR>. Caracteristica Descriere ALIGN (LEFT, Alinierea orizontala a unei celule. CENTER, RIGHT) VALIGN (TOP, Alinierea verticala a unei celule. MIDDLE, BOTTOM) COLSPAN=n Numarul (n) de coloane pe care o celula le uneste. ROWSPAN=n Numarul (n) de randuri pe care o celula le uneste. Dezactiveaza intreruperea textului la capat de rand si NOWRAP revenirea pe linia urmatoare intr-o celula.

Formatul general al unui tabel Formatul general al unui tabel arata astfel: <TABLE> <!-- inceputul definitiei tabelului --> 22

<CAPTION> continutul legendei </CAPTION> <!-- definitia legendei --> <TR> <!-- inceputul definitiei randului titlu --> <TH> continutul celulei care contine primul titlu </TH> <TH> continutul celulei care contine ultimul titlu </TH> </TR> <!-- sfarsitul definitiei randului titlu --> <TR> <!-- inceputul definitiei primului rand --> <TD> continutul primului rand si a primei celule </TD> <TD> continutul primului rand si a ultimei celule </TD> </TR> <!-- sfarsitul definitiei primului rand --> <TR> <!-- inceputul definitiei ultimului rand --> <TD> continutul ultimului rand si a primei celule </TD> <TD> continutul ultimului rand si a ultimei celule </TD> </TR> <!-- sfarsitul definitiei ultimului rand --> </TABLE> <!-- sfarsitul definitiei tabelului --> Puteti copia codul de mai sus in propriul document HTML, adaugand randuri sau celule noi. Etichetele <TABLE> si </TABLE> trebuie sa inconjoare intraga definitie a tabelului. Primul element din tabel este CAPTION, care este optional. Apoi puteti avea orice numar de randuri definite de etichetele <TR> si </TR>. Intr-un rand puteti avea orice numar de celule definite de etichetele <TD>...</TD> sau <TH>...</TH>. Fiecare rand al tabelului este, in mod esential, formatat independent de randurile de deasupra sau de dedesubt. Aceasta va permite sa afisati cu usurinta tabele ca cel de deasupra cu o singura celula, cum ar fi Caracteristicile tabelelor, unind coloane din tabel.

Tabele pentru informatii netabelare Unii autori de HTML folosesc tabele pentru a prezenta informatii netabelare. De exemplu, deoarece in celulele tabelelor se pot include legaturi, unii autori folosesc un tabel fara bordura pentru a crea "o" imagine din mai multe imagini separate. Browserele care pot afisa tabelele in mod corespunzator arata imaginile ca si cum ar fi o harta imagine (o imagine cu cadrane legaturi). Folosirea bordurilor tabelelor poate crea un afisaj impresionant. Faceti experimente si vedeti ce va place. 22

Forme

Formele permit unei persoane sa reintoarca informatii unui server de internet pentru anumite actiuni. De exemplu, sa presupunem ca strangeti nume si adrese e-mail pentru a trimite anumite informatii unor persoane care le cer. Pentru fiecare persoana care isi introduce numele si adresa, aveti nevoie de anumite informatii ca sa fie trimise iar caracteristicile celor care raspund sa fie adaugate la o baza de date. Aceasta procesare a informatiilor de intrare este de obicei indeplinita de un script sau un program scris in Perl sau alt limbaj care foloseste text, documente si informatii. Daca nu puteti scrie un program sau un script pentru informatiile de intrare, aveti nevoie sa gasiti pe cineva care sa faca acest lucru pentru voi. Formele insesi nu sunt greu de codat. Ele urmaresc aceleasi modele de cautare ca alte etichete HTML. Ceea ce ar putea fi dificil este programul sau scriptul care preia informatia trimisa prin forma de completat si o proceseaza. Datorita nevoii de scripturi specializate pentru a procesa informatiile intrate prin formele de completat, acestea nu sunt discutate in acest ghid. Verificati sectiunea cu Alte informatii pentru informatii suplimentare.

Evitarea problemelor

Evitati suprapunerea etichetelor Considerati acest exemplu de HTML: <B>Acesta este un exemplu de <I>suprapunere</B> a etichetelor HTML.</I> Cuvantul suprapunere se gaseste intre etichetele <B> si <I>. Un browser ar putea fi confuz procesand acest cod si s-ar putea sa nu afiseze lucrurile cu ati dori. Singura modalitate de a sti este sa verificati fiecare browser cunoscut. (ceea ce inseamna consum de timp si este foarte nepractic). In general, evitati suprapunerea etichetelor. Incercati sa folositi etichetele in pereche. Etichetele (cu exceptiile evidente ale elementelor ale caror etichete de incheiere pot fi omise, cum ar fi paragrafele) ar trebui folosite in pereche fara a intercala o alta eticheta intre eticheta de incepere si cea de incheiere. Uitati-va din nou la exemplul de mai sus. Nu puteti crea o pereche pentru eticheta de ingrosare fara o alta eticheta in mijloc (prima eticheta de definire).

Incrustati doar ancore si etichetele pentru caractere Protocolul HTML va permite sa incrustati legaturi in alte etichete HTML:

22

<H1><A HREF="Destinatie.html">Titlul meu</A></H1> Nu incrustati etichete HTML intr-o ancora: <A HREF="Destinatie.html"> <H1>Titlul meu</H1> </A> Desi majoritatea browserelor se descurca cu acest al doilea exemplu, specificatiile HTML oficiale nu suporta aceasta constructie si fisierul vostru probabil nu va functiona cu browserele viitoare. Codificati-va documentele in concordanta cu specificatiile HTML (vezi Alte informatii mai jos). Etichetele de caractere modifica afisarea textului in alte elemente: <UL> <LI><B>Un element de lista ingrosat</B> <LI><I>Un element de lista aplecat</I> </UL> Evitati incrustarea altor etichete de elemente HTML. De exemplu, ati putea fi tentat sa incrustati un titlu intr-o lista pentru a mari scrisul: <UL> <LI><H1>Un titlu mai mare</H1> <LI><H2>Ceva putin mai mic</H2> </UL> Pentru compatibilitate cu toate browserele evitati aceste tipuri de constructii. (Eticheta Netscape <FONT>, care va permite sa specificati cat de mare vor fi caracterele afisate in fereastra voastra, inca nu face parte din specificatiile HTML oficiale.) Care este diferenta dintre incrustarea unei etichete <B> intr-una <LI> si incrustarea unei etichete <H1> intr-una <LI>? In cadrul HTML intelesul semantic al <H1> este ca el reprezinta titlul principal al documentului si ca ar trebui urmat de continutul documentului. Deci nu are sens gasirea unei etichete <H1> intr-o lista. De asemenea etichetele pentru caractere nu pot fi adaugate. De exemplu, ati crede ca: <B><I>un text</I></B> ar produce un text ingrosat si aplecat. Unele browsere asa-l afiseaza; altele interpreteaza doar eticheta cea mai din interior.

Ultimii pasi Validati-va codul

22

Cand puneti un document pe un server de internet, asigurati-va ca ati verificat formatarea si fiecare legatura (incluzand ancorele). Ideal ar fi sa puneti pe altcineva sa faca acest lucru si sa va comenteze documentul inainte sa considerati ca l-ati terminat. Va puteti verifica documentele codificate cu unul din serviciile de validare de la adresa http://dir.yahoo.com/Computers_and_Internet/Information_and_Documentation/Data_Form ats/HTML/Validation_and_Checkers/ care va vor spune daca codul vostru este in conformitate cu specificatiile HTML. Din fericire acest serviciu va permite sa alegeti nivelul de conformitate pe care-l doriti (de exemplu, strict, nivelul 2, nivelul 3). Daca doriti sa folositi coduri care nu fac parte din specificatiile HTML aceasta optiune este folositoare. Imagini inlocuitoare Cand o eticheta <IMG SRC> este indreptata catre o imagine care nu exista, browserul afiseaza o imagine inlocuitoare. Aduceti-va fisierele la zi Daca continutul unui fisier este static (cum ar fi biografia lui George Washington), nu este nevoie de acest lucru. In ceea ce priveste documentele care dezbat subiecte schimbatoare in timp, nu uitati sa le aduceti la zi! Aducerea la zi este importanta mai ales cand fisierul contine informatii cum ar fi programul saptamanal sau data limita pentru anuntul unui program. Browserele difera Browserele afiseaza elementele HTML in mod diferit. Nu uitati ca nu toate codurile folosite in fisierele HTML sunt interpretate de browsere. Daca un browser nu intelege un cod, de obicei acesta il ignora. Ati putea petrece o gramada de timp facandu-va documentele sa "arate perfect" folosinduva browserul curent. Daca verificati documentul respectiv folosind alt browser, veti vedea ca acesta este probabil afisat diferit. De aici un sfat: codificati-va fisierele folosind HTML corect. Lasati interpretarea in seama browserelor si sperati la ce-i mai bine. Comentati-va fisierele Poate veti dori sa includeti comentarii in fisierele HTML. Comentariile in HTML sunt ca si comentariile intr-un program de calculator -- textul pe care-l introduceti nu este folosit de browser si nu este afisat. Comentariile sunt accesibile daca cineva vizioneaza fisierul sursa. Pentru a include un comentariu, introduceti: <!-- comentariul vostru aici -->

22

Alte informatii

Acest ghid reprezinta doar o introducere la HTML. Mai jos gasiti alte surse de informare.

Ghid pentru stil Sfaturi pentru scrierea unui HTML "bun": http://www.cs.cmu.edu/afs/cs.cmu.edu/Web/People/tilt/cgh/ http://www.w3.org/hypertext/WWW/Provider/Style/Introduction.htm

Alte documente introductive Acestea acopera informatii similare cu ghidul acesta: http://www.ucc.ie/info/net/htmldoc.html http://members.aol.com/htmlguru/about_html.html http://info.med.yale.edu/caim/manual/ http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtml

Alte informatii in direct

http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html http://www.w3.org/pub/WWW/MarkUp/SGML/ http://home.netscape.com/assist/net_sites/bg/index.html http://www.cc.ukans.edu/~acs/docs/other/forms-intro.shtml http://java.sun.com/

22