ghid pentru html-buun

GGhhiidduull nncceeppttoorruulluuii

ppeennttrruu

HHTTMMLL

CUPRINS

PORNII LA DRUM ............................................................................................. 1

Termeni care trebuie cunoscuti ........................................................................................ 1 Ce nu este acoperit .......................................................................................................... 1

DOCUMENTE HTML ............................................................................................. 2

Ce este un document HTML ............................................................................................. 2 Editoare HTML ................................................................................................................. 2 Punei-va fiierele pe un server ........................................................................................ 2 Etichete explicate ............................................................................................................. 2 Documentul HTML minim ................................................................................................. 3

ETICHETE DE MARCARE ..................................................................................... 4

HTML ............................................................................................................................... 4 HEAD ............................................................................................................................... 4 TITLE [Denumirea documentului] ..................................................................................... 4 BODY [Corp] .................................................................................................................... 4 Titluri ................................................................................................................................ 5 Paragrafe.......................................................................................................................... 5 Liste .................................................................................................................................. 7 Liste nenumerotate .......................................................................................................................... 7

Liste numerotate .............................................................................................................................. 7

Liste de definire ............................................................................................................................... 8

Liste incrucisate ............................................................................................................................... 9

Text preformatat ............................................................................................................... 9 Citate extinse .................................................................................................................. 10 ntreruperi forate de linie/Adrese potale ....................................................................... 10 Linii orizontale ................................................................................................................ 11

FORMATAREA CARACTERELOR ........................................................................ 12

Stil logic sau fizic ............................................................................................................ 12 Stiluri logice .................................................................................................................................. 12

Stiluri fizice .................................................................................................................................... 13

Secvene de scpare (sau Entitati de caractere) ............................................................ 13

LEGATURI ......................................................................................................... 15

Cale relativa sau cale absoluta ....................................................................................... 15 URL-uri ........................................................................................................................... 16 Legaturi ctre anumite seciuni ....................................................................................... 17 Legaturi ctre seciuni ale altor documente .................................................................... 17 Legaturi ctre anumite seciuni in documentul curent .................................................... 17 Trimitei e-mail ................................................................................................................ 18

IMAGINI IN DIRECT ......................................................................................... 19

Caracteristicile mrimii imaginilor ................................................................................... 19 Alinierea imaginilor ......................................................................................................... 19 Alinierea textului cu o imagine ...................................................................................................... 19

Imagini fara text ............................................................................................................................ 20

Alternarea text pentru imagini ...................................................................................................... 20

Imagini ca hiper-legaturi .............................................................................................................. 20

Grafice pentru fond ......................................................................................................... 21 Culoare pentru fond ........................................................................................................ 22 Imagini, sunete si animaii externe ................................................................................. 22

TABELE ............................................................................................................. 24

Elementele tabelului ....................................................................................................... 24 Element .......................................................................................................................................... 24

Descriere ....................................................................................................................................... 24

Caracteristicile tabelelor ................................................................................................. 25 Caracteristica ................................................................................................................................ 25

Descriere ....................................................................................................................................... 25

Formatul general al unui tabel ........................................................................................ 25 Tabele pentru informaii netabelare ................................................................................ 26

FORME .............................................................................................................. 27

EVITAREA PROBLEMELOR ................................................................................ 28

Evitai suprapunerea etichetelor ..................................................................................... 28 Incrustai doar ancore si etichetele pentru caractere ...................................................... 28 Ultimii pai ...................................................................................................................... 29 Validai-va codul ........................................................................................................................... 29

Aducei-va fiierele la zi ................................................................................................................ 29

Browserele difer .......................................................................................................................... 29

Comentai-va fiierele ..................................................................................................... 30

ALTE INFORMATII ............................................................................................ 31

Ghid pentru stil ............................................................................................................... 31 Alte documente introductive ........................................................................................... 31 Alte informaii in direct .................................................................................................... 31

* 1 *

http://cristeis.go.ro [email protected]

Pornii la drum

Termeni care trebuie cunoscui

WWW - World Wide Web [Reea rspndita in toata lumea]

Web - World Wide Web [Reea rspndita 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 obinuite, HTML este o colecie 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 cnd se

afla la CERN, Laboratorul European pentru Fizica Particulelor in Geneva.

Ce nu este acoperit

Acest abecedar presupune ca:

stiti sa folosii un browser de Internet

avei cteva cunostinte generale despre modul cum functioneaza serverele de Internet si browserele

avei acces la un server de Internet (sau dorii sa creai documente HTML pentru folosire personala in modul de vizualizare locala)

* 2 *


Documente HTML

Ce este un document HTML

Documentele HTML sunt fiiere 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 putei folosi un program de procesare a cuvintelor daca va amintii sa

va salvai documentul ca "text only with line breaks" [doar text cu ntreruperi de linie].

Editoare HTML

Sunt disponibile si alte editoare WYSIWYG: Claris Home Page sau Adobe PageMill, amndou pentru Windows si

Macintosh. Poate vei dori sa incercati unul din ele dup ce vei invata cteva lucruri de baza despre etichetele

HTML. WYSIWYG este un acronim pentru "what you see is what you get" [Ce vezi este ce obii]; adic va

proiectai documentele HTML in mod vizual, ca si cum ai folosi un procesor de cuvinte, in loc sa scriei etichete de

marcare intr-un fiier format din text simplu si imaginndu-va cum va arata pagina care va rezulta. Este folositor sa

cunoasteti destul HTML in cazul in care dorii sa adaugati etichete HTML pe care editorul vostru WYSIWYG nu le

suporta.

Daca inca nu v-ai ales programul, vizitai pagina lui Tom Magliery despre editoare HTML

http://sdg.ncsa.uiuc.edu/~mag/work/HTMLEditors/ (organizate dup platforma) pentru a va ajuta in cutarea

programului corespunztor.

Punei-va fiierele pe un server

Daca avei acces la un server de Internet la coala sau la munca, contactai webmasterul (persoana care se ocupa cu

intretinerea serverului) pentru a vedea cum putei sa va punei fiierele pe Internet. Daca nu avei acces la un server

la coala sau la munca, vedei daca local gasiti un FreeNet, care furnizeaz acces gratuit la Internet. Daca nu gasiti

aa ceva, va trebui sa contactai un furnizor de Internet local care va va pune fiierele pe Internet pentru o taxa.

(Verificai ziarele locale pentru publicitate sau la Camera de Comer 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 urmtor: folosii etichete HTML pentru a

marca elementele unui fiier pentru browserul vostru. Elementele pot conine text simplu, alte elemente sau

amndou.

Pentru a indica variatele elemente intr-un document HTML, folosii etichete. Etichetele HTML constau intr-o

paranteza ascuita la stnga (). Etichetele de obicei se

gsesc in perechi (de exemplu si ) pentru a ncepe si a termina instrucia etichetei. Eticheta de ncheiere

arata ca eticheta de ncepere cu excepia liniei (/) care precede textul in paranteze. Etichetele HTML se gsesc mai

jos.

Unele elemente pot conine o caracteristica, ceea ce reprezint o informaie in plus care este inclusa in eticheta de

ncepere. De exemplu, putei specifica alinierea imaginilor (sus, la mijloc sau jos), incluznd caracteristica

corespunztoare in codul HTML reprezentnd sursa imaginii. Etichetele care au caracteristici opionale sunt notate

mai jos.

NOTA: HTML nu este sensibil la scrierea cu litere mici sau mari. este echivalent cu sau .

Sunt si cteva excepii care sunt notate in Secvenele de scpare de mai jos.

Nu toate etichetele sunt suportate de ctre toate browserele de Internet. Daca un browser nu suporta o eticheta, pur si

simplu o ignora. Totui, textul care se gaseste intre o pereche de etichete necunoscute va fi afiat.

http://sdg.ncsa.uiuc.edu/~mag/work/HTMLEditors/

* 3 *


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 conine titlul [title] iar body-ul conine textul propriu-zis care este format din paragrafe,

liste si alte elemente.

Elementele necesare sunt artate mai jos:

Un exemplu HTML simplu

HTML este uor de invatat

Bine ai venit in lumea HTML.

Acesta este primul paragraf.

Dei scurt, este totui un paragraf!

Si acesta este al doilea paragraf.

Elementele necesare sunt , , , (si etichetele de ncheiere corespunztoare). Deoarece ar

trebui sa includei aceste etichete in fiecare fiier, ai putea lua in cosideratie sa creai un document "template" cu ele.

(Unele browsere vor formata fiierul vostru HTML in mod corect dei aceste etichete nu sunt incluse. Dar unele

browsere nu o vor face! Aa ca asigurai-va ca le-ai inclus.)

Un instrument de invatare

Pentru a vedea o copie a fiierului pe care browserul vostru l citete pentru a genera informaiile din fereastra

curenta, selectai View Source (Vezi Sursa) (sau echivalentul acesteia) din meniul browserului. (Majoritatea

browserelor au un meniu "View" sub care se gaseste aceasta comanda.) Coninutul fiierului, cu toate etichetele

HTML apare intr-o fereastra noua.

Aceasta este o modalitate excelenta pentru a vedea cum se folosete HTML. Desigur, HTML este posibil sa nu fie

corect din punct de vedere tehnic. Odat familiarizai cu HTML si dup ce ai vzut resursele informaionale despre

subiect, vei putea sa distingei intre HTML "bun" si "ru".

Nu uitai ca putei salva un fiier sursa cu coduri HTML si sa-l folosii ca un document "template" pentru paginile

voastre Web sau sa-i modificai formatul pentru a se potrivi scopului vostru.

* 4 *


Etichete de marcare

HTML

Acest element spune browserului ca fiierul conine informaie codificata in HTML. Extensia fiierului "*.html" de

asemenea indica ca acesta este un document HTML si trebuie folosita. (Daca nu putei folosi dect nume de fiiere

de tipul 8.3 (de exemplu: CasaLee.htm) folosii doar extensia "*.htm".

HEAD

Elementul head identifica prima parte a documentului codificat in HTML care conine titlul. Titlul este artat ca

parte a ferestrei browserului vostru. (vezi mai jos).

TITLE [Denumirea documentului]

Elementul title conine denumirea documentului si identifica coninutul acestuia intr-un context global. Denumirea

este afiata 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, aa ca alegei ceva

descriptiv, unic si cat de cat scurt. De asemenea denumirea documentului este folosita pentru a identifica pagina

voastr pentru motoarele de cutare. [cum ar fi: HotBot (http://www.hotbot.com/), Yahoo! (http://www.yahoo.com/)

sau Infoseek (http://www.infoseek.com/)].

De exemplu, ai putea include o denumire prescurtata a unei carti mpreuna cu coninutul capitolului: NCSA Ghid

Mosaic (Windows): Instalare. Acesta spune numele software-ului, platforma si coninutul capitolului, ceea ce este

mult mai simplu dect numind documentul pur si simplu Instalare. In general ar trebui sa avei in titlu 64 de

caractere sau mai puin.

BODY [Corp]

A doua -- si cea mai mare -- parte a documentului HTML o reprezint corpul, in care intra coninutul documentului

(afiat in zona de text a ferestrei browserului). Etichetele explicate mai jos sunt folosite in corpul documentului tip

HTML.

Eticheta controleaz culorile, imaginile de fond si alte trasaturi. Pentru a le controla, aceasta eticheta se scrie

astfel:

http://www.hotbot.com/http://www.yahoo.com/http://www.infoseek.com/

* 5 *


Putei include sau nu oricare element (bgcolor [culoare de fond], text [text], link [legtura], vlink [legtura vizitata],

alink [legtura activa]). Pentru a stabili culoarea de fond, culoarea textului, legturii, legturii vizitate sau a celei

active, inlocuiti xxxxxx cu valoarea unei culori. Nu le facei aceeai culoare pe toate deoarece nu vei putea vedea

nimic pe pagina.

Pentru valoarea unei culori citii seciunea 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 afiate

intr-un font mai mare i/sau mai gros dect textul normal al corpului. Primul titlu in fiecare document ar trebui sa fie

format .

Sintaxa elementului titlu este:

Textul titlului

unde y este un numr intre 1 si 6 specificnd nivelul titlului.

Nu sariti peste nivele de titlu in documentul vostru. De exemplu, nu incepeti cu un titlu de nivelul 1 () ca apoi

sa folosii un titlu de nivelul 3 ().

Titlurile:

Titlu de nivelul 1

Titlu de nivelul 2

Titlu de nivelul 3

Titlu de nivelul 4

Titlu de nivelul 5

Titlu de nivelul 6

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 spaiu alb este in mod automat compresata

intr-un singur spaiu cnd documentul tip HTML este afiat in browser. Aa ca nu trebuie sa va facei griji in privina

liniilor lungi. ntreruperea liniilor [word wrapping] poate avea loc in orice punct in documentul sursa fara sa afecteze

modul de afiare al paginii.

In exemplul artat in seciunea Documentul HTML minim, primul paragraf este codificat dup cum urmeaz:

Bine ai venit in lumea HTML.

Acesta este primul paragraf.

Dei scurt, este totui un paragraf!

* 6 *


In documentul sursa apare o ntrerupere a liniei intre propoziii. Un browser de Internet ignora aceasta ntrerupere a

liniei si ncepe un nou paragraf doar cnd intalneste o alta eticheta .

Important: Trebuie sa indicai paragrafele prin elemente . Un browser ignora liniile albe in textul din sursa.

Fara elementele , documentul devine un paragraf mare. (O excepie o reprezint textul formatat ca "preformatat",

ceea ce se explica mai jos.)

Pentru a face uoara citirea documentelor HTML, punei titlurile pe linii separate, folosii o linie goala sau doua

acolo unde ajuta la identificarea nceputului unei noi seciuni si separai paragrafele cu linii goale (pe lng eticheta

). Aceste extra spatii va vor ajuta cnd va editai fiierele (browserul vostru va ignora aceste extra-spatii deoarece

el are propriul lui set de reguli in ceea ce privete spatiile care nu depind de spatiile pe care le facei in documentul

sursa).

NOTA: Eticheta de ncheiere poate fi omisa. Acest lucru este posibil deoarece browserele inteleg ca atunci

cnd ntlnesc o eticheta nseamn ca paragraful anterior s-a terminat. Totui, de vreme ce HTML permite acum

includerea unor caracteristici in eticheta ar fi mai bine sa o includei.

Folosind si pentru a arata un paragraf nseamn ca putei include caracteristica ALIGN=aliniament in

documentul vostru sursa.

Acesta este un paragraf centrat.

[Vezi versiunea formatata mai jos.]

Acesta este un paragraf centrat.

De asemenea este posibil sa aliniai un paragraf la dreapta incluznd caracteristica ALIGN=RIGHT; la stnga

ALIGN=LEFT este alinierea de baza; daca nu este inclusa nici o caracteristica ALIGN, paragraful va fi aliniat la

stnga.

Caracterele mai pot fi aliniate orizontal folosind etichetele ...,...,...

De exemplu, acesta linie

Acesta este un text.

va aprea astfel:

Acesta este un text.

Daca textul respectiv inclus in eticheta ... are mai mult dect o linie, toate liniile vor fi centrate.

Pentru a schimba culoarea textului si mrimea lui folosii eticheta:

Aici este textul.

Textul va arata astfel:

Aici este textul.

Ca sa facei textul sa clipeasc, folosii eticheta ....

De exemplu:

Acest text clipeste!

* 7 *


Liste

HTML suporta liste nenumerotate, numerotate si de definire. Putei intercala listele dar folosii acesta opiune cu

grija deoarece vei urmri cu greu elementele listelor.

Liste nenumerotate

Pentru a crea o lista nenumerotata, cu semne, incepeti cu o eticheta de ncepere a listei (pentru liste

nenumerotate) scriei eticheta (parte a listei) urmata de partea individuala; nu este necesara eticheta de

nchidere incheiati lista cu o eticheta de ncheiere

Mai jos este o lista model cu trei pari:

mere

banane

grep

Aceasta se va vedea astfel:

mere banane grep

Elementele pot conine paragrafe multiple. Indicai paragrafele cu o eticheta de paragraf .

Liste numerotate

O lista numerotata (numita si lista ordonata, de unde deriva si numele etichetei) este identica cu o lista

nenumerotata, excepie fcnd folosirea etichetei in locul etichetei . Partile listei vor fi formate folosind

tot .

Urmtorul cod HTML:

portocale

piersici

struguri

va fi afiat pe ecran astfel:

1. portocale 2. piersici 3. struguri

* 8 *


Liste de definire

O lista de definire (codificata ca ) de obicei consta din alternarea termenului definiiei (codificat ca ) si o

definire a definiiei (codificata ca ). Browserele in general formateaza definiia pe o linie noua si las un spaiu

la nceputul ei.

In continuare vei gsi un exemplu de lista de definire:

CNAS

CNAS, Centrul Naional pentru Aplicaii

Supercomputerizate, este localizat pe campusul

Universitatii din Illinois, in Urbana-Champaign.

Centrul Teoriei Cornell

CTC este localizat pe campusul Universitatii

Cornell din Ithaca, New York.

Rezultatul va arata astfel:

CNAS

CNAS, Centrul Naional pentru Aplicaii Supercomputerizate, este localizat pe campusul Universitatii din Illinois, in

Urbana-Champaign.

Centrul Teoriei Cornell

CTC este localizat pe campusul Universitatii Cornell din Ithaca, New York.

Etichetele si de ncepere pot conine paragrafe multiple (indicate prin etichetele de paragraf ), liste,

sau alte informaii despre definiie.

Caracteristica COMPACT poate fi folosita deseori daca termenii definiiei sunt foarte scuri. Daca, de exemplu,

aratati nite opiuni pentru calculator, opiunile pot fi scrise pe aceeai linie cu nceputul definiiei.

-i

invoca Mosaic-ul CNAS pentru Microsoft Windows

folosind fiierul de iniializare definit in poteca.

-k

invoca Mosaic-ul CNAS pentru Microsoft Windows in

modul chiosc.

Rezultatul va arata astfel:

-i invoca Mosaic-ul CNAS pentru Microsoft Windows folosind fiierul de iniializare definit in poteca.

-k invokes NCSA Mosaic for Microsoft Windows in kiosk mode.

* 9 *


Liste incrucisate

Listele pot fi incrucisate. De asemenea putei avea un anumit numr de paragrafe, fiecare continand o lista

incrucisata intr-un singur element al unei listei.

Urmeaz un model de lista incrucisata:

Cteva state din Noua Anglie:

Vermont

New Hampshire

Maine

Doua state din vestul mijlociu:

Michigan

Indiana

Lista incrucisata apare astfel:

Cteva state din Noua Anglie: Vermont New Hampshire Maine

Doua state din vestul mijlociu: Michigan Indiana

Text preformatat

Folosii eticheta (care vine de la "preformatat") pentru a genera un text intr-un font cu mrime fixa. Aceasta

eticheta de asemenea face sa apar spatiile, noile linii si taburile -- spatiile multiple apar ca spatii multiple iar liniile

se ntrerup in acelai loc ca in fiierul sursa HTML. Aceasta este foarte folositoare pentru listrile de programe.

De exemplu, liniile urmtoare:

#!/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 *

* 10 *


apar astfel:

#!/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 *

Eticheta poate fi folosita cu o caracteristica WIDTH care specifica numrul maxim de caractere pentru o

linie. De asemenea WIDTH semnaleaz browserului sa aleag fontul corespunztor pentru text.

Hiper-legaturile pot fi folosite in cadrul seciunilor . Ar trebui sa evitai folosirea altor etichete HTML in

cadrul seciunilor .

Deoarece si & au inteles special in HTML, trebuie sa folosii secvenele lor de scpare ( si &)

pentru a utiliza aceste caractere. Vezi seciunea Secvene de scpare pentru mai multe informaii.

Citate extinse

Folosii eticheta pentru a include citate lungi intr-un bloc separat pe ecran. Majoritatea

browserelor schimba marginile citatului pentru a-l separa de textul nconjurtor.

In exemplul:

Omiteti cuvintele fara rost.

Scrisul viguros este concis. O propoziie ar trebui

sa nu contina cuvinte inutile, un paragraf propoziii inutile,

din acelai motiv din care un desen nu ar trebui sa aib

linii inutile si o maina piese inutile.

--William Strunk, Jr., 1918

rezultatul este:

Omitei cuvintele fara rost.

Scrisul viguros este concis. O propoziie ar trebui sa nu contina cuvinte inutile, un paragraf propoziii inutile, din

acelai motiv din care un desen nu ar trebui sa aib linii inutile si o maina piese inutile.

--William Strunk, Jr., 1918

ntreruperi forate de linie/Adrese potale

Eticheta forteaza o ntrerupere de linie fara nici un spaiu (alb) intre linii. Folosirea elementelor pentru

linii scurte de text cum ar fi adresele potale are ca rezultat un spaiu alb nedorit, in plus.

De exemplu, pentru:

Centrul Naional pentru Aplicaii Supercomputerizate

Bulevardul East Springfield, nr. 605

Champaign, Illinois 61820-5518

* 11 *


Rezultatul este:

Centrul Naional pentru Aplicaii Supercomputerizate

Bulevardul East Springfield, nr. 605

Champaign, Illinois 61820-5518

Linii orizontale

Eticheta produce o linie orizontala lata cat fereastra browser-ului. O linie orizontala este folositoare pentru

separarea seciunilor importante ale documentului.

Putei modifica latimea (grosimea = size) si lungimea (procentul de fereastra acoperit de linie = width) unei linii. De

asemenea se poate controla alinierea cu eticheta align=left/right/center (stnga/dreapta/centru). Pentru crearea unei

linii negre se adaug eticheta noshade. Experimentai cu setrile pana cnd suntei mulumit de prezentare.

De exemplu:

este afiata astfel:

Nota: liniile artistice folosite pe multe pagini web (cum este si cea de mai jos) nu sunt fcute cu eticheta . Ele

sunt imagini.

* 12 *


Formatarea caracterelor

HTML are doua tipuri de stiluri pentru cuvintele sau propoziiile individuale: logic si fizic. Stilurile logice [Logical

Styles] formateaza textul conform intelesului sau, in timp ce stilurile fizice [Physical Styles] indica aparenta specifica

a unei seciuni. De exemplu, in propoziia anterioara, cuvintele "stiluri logice" au fost formatate ca "scoatere in

evidenta = emphasis". Acelai efect (formatarea acelorai cuvinte in stil aplecat) ar fi putut fi obinut printr-o eticheta

diferita care spune browserului sa "pun aceste cuvinte in forma aplecata".

Stil logic sau fizic

Daca stilurile fizice si cele logice au acelai rezultat pe ecran, de ce exista doua?

In universul SGML ideal, coninutul difer de prezentare. Astfel SGML marcheaz un titlu [heading] de nivelul unu

ca titlu de nivelul unu, dar nu specifica ca titlul de nivelul unu ar trebui sa fie, de exemplu, mare de 24 de puncte,

ingrosat, centrat si cu fontul Times [24-point bold Times centered]. Avantajul acestei apropieri (este similara in

concept cu foile de stil din multe procesoare de cuvinte) este ca daca va hotarati sa schimbai titlurile de nivelul unu

sa fie mari de 20 de puncte, aezat la stnga si cu fontul Helvetica [20-point left-justified Helvetica], nu trebuie dect

sa schimbai definirea titlului de nivelul unu din browserul vostru de internet. Intr-adevr, in ziua de astzi multe

browsere va las sa definii cum dorii sa fie afiate pe ecran diferite etichete HTML, folosind aa numitele

cascading style sheets [foi de stil in cascada], sau CSS. CSS este mai avansat dect HTML totui, si nu va fi acoperit

in acest ghid. (Putei afla mai multe despre CSS la adresa de internet CSS World Wide Web Consortium

http://www.w3c.org/Style/.)

Alt avantaj al etichetelor logice este ca ele sunt mai simple. Este mai simplu sa marchezi ceva ca dect sa-ti

aminteti ca titlurile de nivelul unu sunt mari de 24 de puncte, centrate, ingrosate si cu fontul Times, sau orice alt

ceva. De exemplu, considerai eticheta . Majoritatea browserelor o afiseaza printr-un text ingrosat.

Totui, este posibil ca o persoana sa doreasc ca aceste seciuni sa fie afiate in culoarea roie. (Acest lucru este

posibil folosind un cascading style sheet local pe calculatorul persoanei respective.) Stilurile logice ofer aceasta

flexibilitate.

Desigur, daca dorii ca ceva sa fie afiat aplecat (de exemplu) si nu vrei ca setarea browserului sa-l afieze altfel, ar

trebui sa folosii stilurile fizice. Deci, daca folosii stilurile fizice, marcnd ceva intr-un anumit fel, ntotdeauna acel

lucru va fi afiat in acel fel pentru cei care citesc documentul vostru.

Incercati sa folosii un singur fel de stil. Daca incepeti folosind stilurile fizice, folosii-le pana la sfarsit. Daca la

folosii pe cele logice, folosii-le doar pe acestea. Nu uitai ca viitorul HTML e posibil sa nu suporte anumite stiluri

logice, ceea ce nseamn ca browserele nu vor afia codificarea voastr cu stiluri logice. (De exemplu, eticheta

-- prescurtare pentru "definition [definiie]", si de obicei afiata in litere aplecate -- nu este suportata peste tot

si va fi ignorata daca browserul cititorului nu o intelege.)

Stiluri logice

pentru un cuvnt care este definit. In mod normal este afiat aplecat. (NCSA Mosaic este un browser de internet.)

pentru scoatere in evidenta. In mod normal este afiat aplecat. (Consultanii nu va pot reseta parola dect daca

sunai la linia de ajutor.)

pentru titluri de carti, filme, etc. In mod normal este afiat aplecat. (Ghidul nceptorului pentru HTML)

pentru cod de calculator. Afiat intr-un font cu latimea fixa [fixed-width font]. (Fiierul titlu )

pentru introducere de la tastatura. In mod normal afiat intr-un font cu latimea fixa simplu. (Introducei parola pentru

a va schimba parola.)

http://www.w3c.org/Style/

* 13 *


pentru o secvena de caractere literale. Afiat intr-un font cu latimea fixa. (Eroare de segmentare: Miez pierdut.)

pentru scoatere in evidenta puternica. In mod normal afiat ingrosat. (NOTA: ntotdeauna verificai-va legaturile.)

pentru o variabila, unde vei nlocui variabila cu o informaie specifica. In mod normal afiata cu litere aplecate.

(rmnumeledocumentului terge documentul.)

Stiluri fizice

text ingrosat: text apare text

text aplecat: text apare text

text subliniat: text apare text

text de maina de scris, de ex. font cu latimea fixa.

Secvene de scpare (sau Entitati de caractere)

Entitatile de caractere au doua funcii:

nlocuirea caracterelor speciale afiarea altor caractere care nu sunt disponibile in setul de caractere simple ASCII (caractere primare cu semne

diacritice)

Trei caractere ASCII -- paranteza ascuita la stnga (), si ampersand-ul (&) -- au

inteles special in HTML si de aceea nu pot fi folosite "cum sunt" ["as is"] in text. (Parantezele ascuite sunt folosite

pentru a indica nceputul si sfarsitul etichetelor HTML, iar ampersand-ul este folosit pentru a indica nceputul unei

secvene de scpare.) Semnele de citare duble pot fi folosite cum-sunt dar se poate folosi si o entitate de caracter (").

Pentru a folosi unul din cele trei caractere intr-un document HTML, trebuie sa introducei secvena lui de scpare [its

escape sequence]:

<

secvena de scpare pentru <

>

secvena de scpare pentru >

&

secvena de scpare pentru &

Alte secvene de scpare suporta caractere accentuate, cum ar fi:

un o mic cu doua puncte deasupra:

un n mic cu un "aproximativ" deasupra:

un E mare cu accent grav:

Putei substitui literele o, n si E de deasupra cu altele. Vizitai World Wide Web Consortium pentru o lista completa

cu secvene de scpare la adresa

http://www.w3.org/hypertext/WWW/MarkUp/html-spec/html-spec_13.html.

http://www.w3.org/hypertext/WWW/MarkUp/html-spec/html-spec_13.html

* 14 *


sau vizitai adresa

http://cristeis.go.ro/ghid-pt-HTML/secvente.html

pentru o lista cu 95 de caractere de scpare pe care am pus-o eu acolo pentru cine are nevoie.

Pentru a scrie caracterele in documentul vostru copiai secvena corespunztoare si lipii-o (paste) in documentul

vostru sursa.

NOTA: Spre deosebire de restul HTML, secvenele de scpare sunt sensibile la mrimea literelor (litere mari sau

mici). De exemplu, nu putei folosi &LT; in loc de )

3. introducei textul care va servi drept hiperlegatura in documentul curent 4. introducei eticheta de nchidere a ancorei: (fara spaiu nainte de eticheta de nchidere a ancorei)

Exemplu de hiperlegatura intr-un document numit Romania.html:

Judete

Aceasta intrare face ca cuvntul Judee sa fie hiperlegatura ctre documentul JudeteleRomaniei.html, care se gaseste

in acelai director cu primul document (Romania.html).

Cale relativ sau cale absolut

Va putei lega de documente din alte directoare specificnd calea relativa de la documentul vostru la documentul de

care va legai. De exemplu, o legtura la un fiier JudetulBuzau.html aflat in subdirectorul Muntenia ar arata:

Buzau

Acestea se numesc legaturi relative deoarece specificai calea ctre fiierul la care va legai tinand cont de locul unde

se afla fiierul curent. De asemenea putei folosi calea absoluta (ntregul URL) a fiierului, dar legaturile relative sunt

mai eficiente cnd se acceseaz un server. De asemenea ele au avantajul de a face documentele voastre "mai

portabile" -- de exemplu, putei 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 upload-ati ntregul 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 nmagazinate acolo.

Este important de reinut ca UNIX este un sistem operaional sensibil la mrimea literelor in ceea ce privete numele

fiierelor, in timp ce DOS si Mac-urile nu sunt. De exemplu, pe un Macintosh, "DOCUMENT.HTML",

"Document.HTML", si "document.html" reprezint aceeai denumire. Daca facei o legtura relativa ctre

"DOCUMENT.HTML", iar fiierul se numete de fapt "document.html", legtura va funciona. Dar daca upload-ati

paginile pe un server web UNIX, legtura nu va mai funciona. Asigurai-va ca ai verificat numele fiierelor nainte

de upload-are.

Caile folosesc sintaxa standard UNIX. Sintaxa UNIX pentru directorul printe (directorul care conine directorul

curent) este "..". (Pentru informaii suplimentare consultai un text referitor la UNIX pentru nceptori cum ar fi

Learning the UNIX Operating System [Invatati sistemul de operare UNIX] de O'Reilly and Associates, Inc.)

Daca v-ai afla in documentul JudeteleRomaniei.html si ai face referire la documentul original Romania.html,

legtura voastr ar arata astfel:

ROMANIA

* 16 *


In general, ar trebui sa folosii legaturi relative ori de cate ori posibil, deoarece:

1. este mai uor sa mutai un grup de documente in alt loc (deoarece caile relative vor funciona) 2. conectarea la server este mai eficienta 3. scriei mai puin

Totui, folosii cai absolute cnd va legai de documente care nu sunt asemntoare intre ele in mod direct. De

exemplu, sa consideram un grup de documente care alctuiesc un manual. Legaturile intre acestea ar trebui sa fie

relative. Legaturile la alte documente (poate o referire la un program folositor) ar trebui sa foloseasc cai absolute. In

acest fel, daca mutai manualul intr-alt director, nici una din legaturi nu va trebui adusa la zi.

URL-uri

Reeaua rspndita in toata lumea [The World Wide Web] folosete locatori de resurse uniforme [Uniform Resource

Locators] (URL-uri) pentru a specifica locaia fiierelor pe alte servere. Un URL include tipul de resursa care este

accesata (de exemplu, Web, gopher, FTP), adresa serverului si localizarea fiierului.

Sintaxa este:

schema://domeniu.gazda[:port]/calea/numele_fisierului

unde schema este una din

file [fiier]

un fiier (document) pe calculatorul vostru

ftp [File Transfer Protocol - Protocol de transferare a fiierelor]

un fiier pe un server FTP anonim

http

un fiier pe un server de internet

gopher

un fiier pe un server Gopher

WAIS

un fiier pe un server WAIS

news

un grup de tiri Usenet

telnet

o conectare la un serviciu bazat pe Telnet

Numrul de port in general poate fi omis. (Adic daca nu va spune cineva altceva, nu-l folosii.)

De exemplu, pentru a include o legtura ctre pagina mea in documentul vostru, introducei:

cristeis HomPage

Din aceasta reiese ca textul cristeis HomePage este o legtura la pagina mea de internet.

Exista de asemenea o schema de trimis e-mail folosita pentru a hiperlega adresele de e-mail, dar aceasta scheme este

unica in sensul ca folosete doar doua puncte (:) in loc de :// intre schema si adresa. Putei citi mai multe despre

aceasta mai jos.

Pentru informaii suplimentare despre URL-uri, urmai legtura:

http://www.w3.org/hypertext/WWW/Addressing/Addressing.html

http://cristeis.go.ro/http://www.w3.org/hypertext/WWW/Addressing/Addressing.html

* 17 *


Legaturi ctre anumite seciuni

Se pot folosi ancore pentru a muta cititorul ctre o anumita seciune a unui document (ori acelai document, ori altul)

dect sa fie mutat in partea de sus, ceea ce se ntmpla in mod normal. Acest tip de ancora se numete a ancora

numita deoarece pentru a crea legaturi, inserai 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 putei lega de a anumita seciune din alt document.

Aceasta informaie este prezentata mai nti deoarece daca intelegeti acest lucru vei intelege cum sa va legai in

cadrul aceluiai document.

Legaturi ctre seciuni ale altor documente

Sa presupunem ca vrei sa construii o legtura de la documentul A (documentA.html) ctre o anumita seciune a

altui document (Buzau.html).

Introducei codul HTML pentru o legtura ctre o ancora:

documentA.html:

Dintre toate cartierele din Judeul Buzau, unul dintre cele mai vechi este

Cartierul Micro V.

In continuare, sa cream ancora (in acest exemplu "CMV") in Buzau.html:

Cartierul Micro V

Cu aceste doua elemente la locul lor, putei aduce un cititor direct la locul unde se face referire la Cartierul Micro V

in Buzau.html. Ancora se afla naintea cuvintelor "Cartierul Micro V".

NOTA: Nu putei sa creai legaturi ctre anumite seciuni dintr-un document dect daca avei permisiunea de a scrie

in sursa de cod a documentului respectiv sau daca acel document conine deja ancore. De exemplu, putei include

legaturi ctre acest ghid (http://cristeis.go.ro/Ghid-pt-HTML/Ghid_pt_HTML.html) in documentul vostru deoarece

exista ancore in acest ghid (folosii View Source in browserul vostru pentru a vedea codul HTML). Dar daca acest

document nu avea ancore, nu puteai crea legaturi ctre anumite seciuni deoarece nu putei edita fiierul original de

pe server.

Legaturi ctre anumite seciuni in documentul curent

Tehnica este aceeai, cu excepia faptului ca se omite numele_fisierului.

De exemplu, pentru a va lega de ancora CMV din cadrul Buzau.html, introducei:

...Alte informaii despre

Cartierul Micro V

sunt disponibile in alta parte in acest document.

Avei grija sa includei eticheta in locul din documentul vostru unde dorii sa duca legtura (Cartierul Micro V).

Ancorele sunt in mod deosebit folositoare cnd credei ca cititorii vor tipri un document in ntregime sau cnd avei

o mulime de informaii scurte pe care dorii sa le punei online intr-un singur fiier.

http://cristeis.go.ro/Ghid-pt-HTML/Ghid_pt_HTML.html

* 18 *


Trimitei e-mail

Putei face ca cititorul sa trimit uor un mesaj electronic unei anumite persoane incluznd caracteristica mailto intr-o

legtura. Formatul este:

Nume

De exemplu, introducei:

Trimiteti-mi un mesaj

pentru a crea o fereastra de mesaj care este configurata deja sa deschid o fereastra de mesaj pentru

[email protected] (adic pentru mine). Voi, desigur, vei introduce alta adresa de e-mail!

mailto:[email protected]

* 19 *


Imagini in direct

Majoritatea browserelor de internet pot afia imaginile in direct (adic, imagini lng 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 Reea Portabil (Portable Network Graphic) (PNG)]. Fiecare imagine cere

timpul ei pentru ncrcare si incetineste afiarea iniiala a unui document. Alegei cu grija imaginile voastre si

numrul de imagini intr-un document.

Pentru a include o imagine in direct, introducei:

unde NumeleImaginii reprezint URL-ul imaginii.

Sintaxa pentru URL-uri 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 mrimii imaginilor

Ar trebui sa includei inca doua caracteristici in eticheta pentru a spune browserului vostru mrimea

imaginilor pe care le ncarc mpreuna cu textul. Caracteristicile HEIGHT [Inaltime] si WIDTH [Latime] fac ca

browserul sa lase gol spaiul necesar (in pixeli) pentru imagini in timp ce ncarc restul documentului. (Putei obine

mrimea in pixeli din programul de procesare al imaginilor pe care-l avei, cum ar fi Adobe Photoshop. Unele

browsere vor afia dimensiunile unei imagini in bara de titlu daca imaginea este vzuta singura fara un document

HTML care s-o contina.)

De exemplu, pentru a include o imagine autoportret intr-un document mpreuna cu dimensiunile portretului,

introducei:

NOTA: Unele browsere folosesc caracteristicile HEIGHT si WIDTH pentru a micora sau mari imaginea pentru a

ncpea in spaiul alocat cnd imaginea nu se potrivete exact cu numerele caracteristicelor. Nu toi cei care produc

browsere cred ca marirea/micsorarea este o idee buna, aa ca nu toi cititorii vor avea acces la aceasta trstura.

Verificai-va dimensiunile si folosii-le pe cele corecte.

Alinierea imaginilor

Dispunei de anumita flexibilitate in afiarea imaginilor. Putei avea imagini separate de text si aliniate la stnga,

dreapta sau pe centru. Sau putei avea o imagine aliniata cu text. Incercati mai multe posibilitati pentru a vedea cum

arata informaia voastr cel mai bine.

Alinierea textului cu o imagine

In mod normal partea de jos a imaginii este aliniata cu textul care urmeaz, dup cum se vede in acest

paragraf. Putei alinia imagini in partea de sus sau pe centrul unui paragraf folosind caracteristicile ALIGN=TOP si

CENTER.

* 20 *


Acest text este aliniat cu partea de sus a imaginii (). Observai cum browserul aliniaz doar o linie si apoi sare in partea de jos a

imaginii pentru restul textului.

Iar acest text este pe centrul imaginii (). Din nou, doar o linie a textului este pe centru, iar restul este sub imagine.

Imagini fara text

Pentru afiarea unei imagini fara nici un text asociat (de exemplu, logo-ul organizaiei voastre), facei-o un paragraf

separat. Folosii caracteristica de paragraf ALIGN= pentru a centra imaginea sau a o ajusta in partea dreapta a

ferestrei dup cum vedei mai jos:

care are ca rezultat:

Imaginea este centrata; acest paragraf ncepe sub ea si este aliniat la stnga.

Alternarea text pentru imagini

Unele browsere -- in principal cele de text cum ar fi Lynx http://lynx.browser.org/ -- nu pot afia imagini. Unele

persoane dezactiveaz ncrcarea imaginilor, chiar daca programul lor poate afia imagini (mai ales daca folosesc un

modem sau au o legtura slaba). HTML furnizeaz un mecanism pentru a-i informa pe cititori ce pierd daca nu

ncarc imaginile.

Caracteristica ALT va da voie sa specificai textul care sa fie afiat in loc de o imagine.

De exemplu:

unde sageata_sus.gif este imaginea unei sageti care arata in sus. Folosind programe care pot vedea imagini si care au

ncrcarea acestora activata vedei imaginea. Folosind un browser de text sau dezactivnd ncrcarea imaginilor,

cuvntul Sus apare in locul acelei imagini.

Ar trebui sa includei text de alternare pentru fiecare imagine in documentul vostru, ceea ce ii va ajuta foarte mult pe

ceilali.

Imagini ca hiper-legaturi

Imaginile in direct pot fi folosite ca legaturi exact ca textul. Urmtorul cod HTML:

http://lynx.browser.org/

* 21 *


Produce urmtorul rezultat:

Bordura albastra care nconjoar imaginea indica ca aceasta este o imagine legtura. Poate ca nu dorii aceasta

bordura mereu. In acest caz putei folosi caracteristica BORDER a etichetei IMG pentru a face ca imaginea sa apar

normal.

Adugnd caracteristica BORDER si setnd-o la zero:

Are ca rezultat (imaginea este tot o legtura):

Caracteristica BORDER poate fi setata la valori diferite de zero, chiar daca imaginea este o legtura sau nu. In acest

caz bordura va aprea cu culoarea pe care o are textul in pagina. De exemplu, daca ai vrea sa punei o bordura

imaginii voastre pentru a se evidenia pe pagina, ai putea ncerca:

Si vei obine rezultatul:

Grafice pentru fond

Versiunile mai noi de browsere pot ncrca o imagine si o pot folosi ca fond cnd afiseaza o pagina. Unor persoane le

plac imaginile de fond pe cnd altora nu. Daca vrei sa includei un fond, asigurai-va ca textul poate fi citit cu

usurinta cnd este afiat deasupra imaginii.

Imaginile de fond pot fi o textura sau imaginea unui obiect (logo). Creai imaginea de fond exact cum creai orice

alta imagine.

Nu trebuie sa creai dect o mica parte din imagine. Folosind o caracteristica numita tiling [acoperire cu igla], un

browser ia imaginea si o repeta pana acoper fereastra. Creai o singura imagine iar browserul o multiplica de cate

ori este necesar pentru a umple fereastra. Aciunea este automata cnd folosii eticheta de fond artata mai jos.

Eticheta de a include o imagine de fond se include in eticheta ca o caracteristica a acesteia:

autorul.htmlautorul.html

* 22 *


Culoare pentru fond

In mod normal browserele afiseaza textul culoarea neagra pe un fond gri. Se pot schimba aceste doua elemente daca

dorii. Unii autori de HTML aleg o culoare de fond si o coordoneaz cu schimbarea culorii textului.

Vizionai schimbrile pentru a va asigura ca paginile pot fi citite cu usurinta. (De exemplu, multe persoane considera

ca textul rou pe fond negru este greu de citit!) In general, Incercati sa evitai folosirea imaginilor contrastante sau a

imaginilor care folosesc culoarea unui text din imagine.

Schimbai culoarea textului, legaturilor, legaturilor vizitate si active (legaturile pe care se efectueaz un clic) folosind

alte caracteristici in eticheta . De exemplu:

Aceasta creeaza o fereastra cu un fond negru (BGCOLOR), text alb (TEXT), si legaturi argintii (LINK).

Combinaia de numere si cifre de sase caractere reprezint culori, dnd valoarea lor RGB (red, green, blue - rou,

verde, albastru). Cele sase caractere sunt de fapt numere de cate doua caractere, reprezentnd cantitatea de rou,

verde sau albastru ca o valoare hexadecimala in gama 00-FF. De exemplu, 000000 este negru (nici o culoare),

FF0000 este rou aprins, 0000FF este albastru strlucitor, iar FFFFFF este alb (saturat la maxim cu cele trei culori).

Aceste combinaii de numere si litere sunt in general criptice. Din fericire exista o sursa online care sa va ajute sa

obtineti combinaia care sa reprezinte culorile dorite si de asemenea exista programe care sa fac acest lucru pentru

voi:

http://www.hidaho.com/colorcenter/

De asemenea putei gsi la adresa

http://cristeis.go.ro/ghid-pt-HTML/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 -- putei folosi si numele

culorii in loc de valoarea RGB corespunztoare. De exemplu, "black [negru]", "red [rou]", "blue [albastru]", and

"cyan [ocru]" sunt toate valide pentru a fi folosite in locul valorilor RGB. Totui tineti cont ca nu toate browserele

suporta numele culorilor, in timp ce valorile RGB sunt suportate.

Imagini, sunete si animaii externe

Poate vei dori ca o imagine sa se deschid ca un document separat cnd o persoana activeaz o legtura fie pe un

cuvnt fie pe o versiune mai mica a imaginii inclusa in document. Aceasta se numete o imagine externa si este

folositoare daca nu dorii sa incetiniti ncrcarea documentului cu imagini mari in direct.

Pentru a include o referina la o imagine externa, introducei:

ancora legaturii

De asemenea putei folosi o imagine mai mica ca o legtura ctre o imagine mai mare. Introducei:

Cititorul vede imaginea ImagineMaiMica.gif si efectueaz clic pe ea pentru a deschide imaginea

ImagineMaiMare.gif.

http://www.hidaho.com/colorcenter/http://cristeis.go.ro/ghid-pt-HTML/culori.html

* 23 *


Folosii aceeai sintaxa pentru legaturi ctre animaii si sunete externe. Singura diferena o reprezint extensia

fiierelor la care se face legtura. De exemplu,

ancora legaturii

specifica o legtura ctre un film QuickTime.

Unele tipuri de fiiere obinuite 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 [fiier PostScript]

.ps

AIFF sound file [fiier sunet AIFF]

.aiff

AU sound file [fiier sunet AU]

.au

WAV sound file [fiier sunet WAV]

.wav

QuickTime movie [fiier film MOV]

.mov

MPEG movie [fiier film MPEG]

.mpeg sau .mpg

* 24 *


Tabele

nainte sa fie finalizate etichetele HTML pentru tabele, autorii trebuiau sa-si formateze cu grija informaiile tabelare

in etichete , numrnd spatiile si vizionnd rezultatul. Tabelele sunt foarte folositoare pentru prezentarea

informaiilor tabelare si reprezint un avantaj pentru autorii de HTML creativi care folosesc etichetele de tabel pentru

a-si prezenta paginile Web. (Ducei-va la pagina NCSA - (http://www.ncsa.uiuc.edu/) pentru un exemplu excelent de

folosire a tabelelor pentru a controla aternerea in pagina.)

Ganditi-va informaiile tabelare in lumina codurilor explicate mai jos. Un tabel are capete in care explicai ce includ

coloanele/randurile, rnduri pentru informaii, celule pentru fiecare parte. In urmtorul tabel, prima coloana conine

informaia titlu, fiecare rnd explica o eticheta de tabel HTML iar fiecare celula conine o eticheta pereche sau o

explicare a funciunii acestei etichete.

Elementele tabelului

Element Descriere ... definete un tabel in HTML. Daca caracteristica BORDER este prezenta,

browserul afiseaza un tabel cu o bordura.

... definete legenda pentru titlul tabelului. Poziia normala a titlului este

centrata in partea de sus a tabelului. Se poate folosi caracteristica

ALIGN=BOTTOM pentru a poziiona legenda in partea de jos a tabelului.

NOTA: Se poate folosi orice cod HTML in legenda.

... specifica un rnd in cadrul unui tabel. Putei defini caracteristicile din setare

pentru ntregul rnd: ALIGN (LEFT, CENTER, RIGHT) i/sau VALIGN

(TOP, MIDDLE, BOTTOM). Vedei Caracteristicile tabelelor la sfarsitul

acestui tabel pentru informaii suplimentare.

... definesc o celula titlu a tabelului. Din setare textul in aceasta celula este

ingrosat si centrat. Celulele titlu ale tabelului pot conine alte atribute pentru

a determina caracteristicile celulei i/sau coninutul ei. Vedei Caracteristicile

tabelelor la sfarsitul acestui tabel pentru informaii suplimentare.

... definesc o celula de date a tabelului. Din setare textul in aceasta celula este

aliniat la stnga si centrat pe verticala. Celulele de date ale tabelelor pot

conine alte atribute care sa determine caracteristicile celulei i/sau

coninutul ei. Vedei Caracteristicile tabelelor la sfarsitul acestui tabel pentru

informaii suplimentare.

http://www.ncsa.uiuc.edu/http://www.ncsa.uiuc.edu/

* 25 *


Caracteristicile tabelelor NOTA: Caracteristicile definite in cadrul celulelor ... sau ... nlocuiesc alinierea din

setare a ... .

Caracteristica Descriere ALIGN (LEFT, CENTER, RIGHT) Alinierea orizontala a unei celule.

VALIGN (TOP, MIDDLE,

BOTTOM)

Alinierea verticala a unei celule.

COLSPAN=n Numrul (n) de coloane pe care o celula le unete.

ROWSPAN=n Numrul (n) de rnduri pe care o celula le unete.

NOWRAP Dezactiveaz ntreruperea textului la capt de rnd si revenirea pe linia

urmtoare intr-o celula.

Formatul general al unui tabel

Formatul general al unui tabel arata astfel:

coninutul legendei

coninutul celulei care conine primul titlu

coninutul celulei care conine ultimul titlu

coninutul primului rnd si a primei celule

coninutul primului rnd si a ultimei celule

coninutul ultimului rnd si a primei celule

coninutul ultimului rnd si a ultimei celule

Putei copia codul de mai sus in propriul document HTML, adugnd rnduri sau celule noi.

* 26 *


Etichetele si trebuie sa nconjoare intreaga definiie a tabelului. Primul element din tabel este

CAPTION, care este opional. Apoi putei avea orice numr de rnduri definite de etichetele si . Intr-un

rnd putei avea orice numr de celule definite de etichetele ... sau .... Fiecare rnd al

tabelului este, in mod esenial, formatat independent de rndurile 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 informaii netabelare

Unii autori de HTML folosesc tabele pentru a prezenta informaii 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 afia tabelele in mod corespunztor arata imaginile ca si cum ar fi o harta

imagine (o imagine cu cadrane legaturi).

Folosirea bordurilor tabelelor poate crea un afiaj impresionant. Facei experimente si vedei ce va place.

* 27 *


Forme

Formele permit unei persoane sa rentoarc informaii unui server de internet pentru anumite aciuni. De exemplu, sa

presupunem ca strangeti nume si adrese e-mail pentru a trimite anumite informaii unor persoane care le cer. Pentru

fiecare persoana care isi introduce numele si adresa, avei nevoie de anumite informaii ca sa fie trimise, iar

caracteristicile celor care rspund sa fie adugate la o baza de date.

Aceasta procesare a informaiilor de intrare este de obicei ndeplinita de un script sau un program scris in Perl sau alt

limbaj care folosete text, documente si informaii. Daca nu putei scrie un program sau un script pentru informaiile

de intrare, avei nevoie sa gasiti pe cineva care sa fac acest lucru pentru voi.

Formele insesi nu sunt greu de codat. Ele urmresc aceleai modele de cutare ca alte etichete HTML. Ceea ce ar

putea fi dificil este programul sau scriptul care preia informaia trimisa prin forma de completat si o proceseaz.

Datorita nevoii de scripturi specializate pentru a procesa informaiile intrate prin formele de completat, acestea nu

sunt discutate in acest ghid. Verificai seciunea cu Alte informaii pentru informaii suplimentare.

* 28 *


Evitarea problemelor

Evitai suprapunerea etichetelor

Considerai acest exemplu de HTML:

Acesta este un exemplu de suprapunere a etichetelor HTML.

Cuvntul suprapunere se gaseste intre etichetele si . Un browser ar putea fi confuz procesnd acest cod si s-

ar putea sa nu afieze lucrurile cu ai dori. Singura modalitate de a ti este sa verificai fiecare browser cunoscut.

(ceea ce nseamn consum de timp si este foarte nepractic).

In general, evitai suprapunerea etichetelor. Incercati sa folosii etichetele in pereche. Etichetele (cu excepiile

evidente ale elementelor ale cror etichete de ncheiere pot fi omise, cum ar fi paragrafele) ar trebui folosite in

pereche fara a intercala o alta eticheta intre eticheta de ncepere si cea de ncheiere. Uitai-va din nou la exemplul de

mai sus. Nu putei crea o pereche pentru eticheta de ingrosare fara o alta eticheta in mijloc (prima eticheta de

definire).

Incrustai doar ancore si etichetele pentru caractere

Protocolul HTML va permite sa incrustai legaturi in alte etichete HTML:

Titlul meu

Nu incrustai etichete HTML intr-o ancora:

Titlul meu

Dei majoritatea browserelor se descurca cu acest al doilea exemplu, specificaiile HTML oficiale nu suporta aceasta

construcie si fiierul vostru probabil nu va funciona cu browserele viitoare. Codificai-va documentele in

concordanta cu specificaiile HTML (vezi Alte informaii mai jos).

Etichetele de caractere modifica afiarea textului in alte elemente:

Un element de lista ingrosat

Un element de lista aplecat

Evitai incrustarea altor etichete de elemente HTML. De exemplu, ai putea fi tentat sa incrustai un titlu intr-o lista

pentru a mari scrisul:

Un titlu mai mare

Ceva puin mai mic

* 29 *


Pentru compatibilitate cu toate browserele evitai aceste tipuri de construcii. (Eticheta Netscape , care va

permite sa specificai cat de mare vor fi caracterele afiate in fereastra voastr, inca nu face parte din specificaiile

HTML oficiale.)

Care este diferena dintre incrustarea unei etichete intr-una si incrustarea unei etichete intr-una

? In cadrul HTML intelesul semantic al este ca el reprezint titlul principal al documentului si ca ar trebui

urmat de coninutul documentului. Deci nu are sens gsirea unei etichete intr-o lista.

De asemenea etichetele pentru caractere nu pot fi adugate. De exemplu, ai crede ca:

un text

ar produce un text ingrosat si aplecat. Unele browsere aa-l afiseaza; altele interpreteaz doar eticheta cea mai din

interior.

Ultimii pai

Validai-va codul

Cnd punei un document pe un server de internet, asigurai-va ca ai verificat formatarea si fiecare legtura

(incluznd ancorele). Ideal ar fi sa punei pe altcineva sa fac acest lucru si sa va comenteze documentul nainte sa

considerai ca l-ai terminat.

Va putei verifica documentele codificate cu unul din serviciile de validare de la adresa

http://dir.yahoo.com/Computers_and_Internet/Information_and_Documentation/Data_Formats/HTML/Validation_a

nd_Checkers/ care va vor spune daca codul vostru este in conformitate cu specificaiile HTML. Din fericire acest

serviciu va permite sa alegei nivelul de conformitate pe care-l dorii (de exemplu, strict, nivelul 2, nivelul 3). Daca

dorii sa folosii coduri care nu fac parte din specificaiile HTML aceasta opiune este folositoare.

Imagini nlocuitoare

Cnd o eticheta este ndreptata ctre o imagine care nu exista, browserul afiseaza o imagine

nlocuitoare.

Aducei-va fiierele la zi

Daca coninutul unui fiier este static (cum ar fi biografia lui George Washington), nu este nevoie de acest lucru. In

ceea ce privete documentele care dezbat subiecte schimbtoare in timp, nu uitai sa le aducei la zi!

Aducerea la zi este importanta mai ales cnd fiierul conine informaii cum ar fi programul saptamanal sau data

limita pentru anunul unui program.

Browser-ele difer

Browserele afiseaza elementele HTML in mod diferit. Nu uitai ca nu toate codurile folosite in fiierele HTML sunt

interpretate de browsere. Daca un browser nu intelege un cod, de obicei acesta l ignora.

Ai putea petrece o grmada de timp fcndu-va documentele sa "arate perfect" folosindu-va browserul curent. Daca

verificai documentul respectiv folosind alt browser, vei vedea ca acesta este probabil afiat diferit. De aici un sfat:

codificai-va fiierele folosind HTML corect. Lasati interpretarea in seama browserelor si sperai la ce-i mai bine.

http://dir.yahoo.com/Computers_and_Internet/Information_and_Documentation/Data_Formats/HTML/Validation_and_Checkers/http://dir.yahoo.com/Computers_and_Internet/Information_and_Documentation/Data_Formats/HTML/Validation_and_Checkers/

* 30 *


Comentai-va fiierele

Poate vei dori sa includei comentarii in fiierele HTML. Comentariile in HTML sunt ca si comentariile intr-un

program de calculator -- textul pe care-l introducei nu este folosit de browser si nu este afiat. Comentariile sunt

accesibile daca cineva vizioneaz fiierul sursa.

Pentru a include un comentariu, introducei:

* 31 *


Alte informaii

Acest ghid reprezint 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 acoper informaii 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 informaii 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/

Materialul de mai sus poate fi folosit liber de oricine, dar nu poate fi reprodus in alte lucrri,

publicaii de orice fel fr acordul scris al autorului.

http://www.cs.cmu.edu/afs/cs.cmu.edu/Web/People/tilt/cgh/http://www.w3.org/hypertext/WWW/Provider/Style/Introduction.htmhttp://www.ucc.ie/info/net/htmldoc.htmlhttp://members.aol.com/htmlguru/about_html.htmlhttp://info.med.yale.edu/caim/manual/http://www.cc.ukans.edu/~acs/docs/other/HTML_quick.shtmlhttp://www.w3.org/hypertext/WWW/MarkUp/MarkUp.htmlhttp://www.w3.org/pub/WWW/MarkUp/SGML/http://home.netscape.com/assist/net_sites/bg/index.htmlhttp://www.cc.ukans.edu/~acs/docs/other/forms-intro.shtmlhttp://java.sun.com/

CUPRINSPornii la drumTermeni care trebuie cunoscuiCe nu este acoperit

Documente HTMLCe este un document HTMLEditoare HTMLPunei-va fiierele pe un serverEtichete explicateDocumentul HTML minim

Etichete de marcareHTMLHEADTITLE [Denumirea documentului]BODY [Corp]TitluriParagrafeListeListe nenumerotateListe numerotateListe de definireListe incrucisate

Text preformatatCitate extinsentreruperi forate de linie/Adrese potaleLinii orizontale

Formatarea caracterelorStil logic sau fizicStiluri logiceStiluri fizice

Secvene de scpare (sau Entitati de caractere)

LegturiCale relativ sau cale absolutURL-uriLegaturi ctre anumite seciuniLegaturi ctre seciuni ale altor documenteLegaturi ctre anumite seciuni in documentul curentTrimitei e-mail

Imagini in directCaracteristicile mrimii imaginilorAlinierea imaginilorAlinierea textului cu o imagineImagini fara textAlternarea text pentru imaginiImagini ca hiper-legaturi

Grafice pentru fondCuloare pentru fondImagini, sunete si animaii externe

TabeleFormatul general al unui tabelTabele pentru informaii netabelare

FormeEvitarea problemelorEvitai suprapunerea etichetelorIncrustai doar ancore si etichetele pentru caractereUltimii paiValidai-va codulAducei-va fiierele la ziBrowser-ele difer

Comentai-va fiierele

Alte informaiiGhid pentru stilAlte documente introductiveAlte informaii in direct

ghid pentru html-buun

Documents