Notiuni de baza HTML

Informatii » scoala » informatica

biologie botanica chimie cultura didactica diverse film fotografie fizica geografie gradinita informatica istorie matematica muzica psihic sport

1. Notiuni de baza HTML

HTML(HyperText Markup Language) - set de coduri speciale care se introduc intr-un text pentru a adauga informatii despre formatare si legaturi.

Prin conventie toate informatiile HTML incep cu simbolul < si se termina cu simbolul > de exemplu <HTML>. Acest marcaj indica unui program de navigare (interpretor HTML) ca documentul este scris si formatat in limbajul HTML standard.

Multe controale HTML sunt perechi si au controale de inceput (de deschidere) si de sfarsit (de inchidere). De exmplu avem marcajul de deschidere <HTML> si cel de inchidere </HTML>. Controalele HTML nu tin cont de litere mari sau mici.

Impartirea in paragrafe si linii

Impartirea se realizeaza utilizand controlul <P> pentru un paragraf nou si respectiv <BR> pentru linie noua. Ca o sugestie pentru plasarea controalelor, cele de linie noua la sfarsitul liniei de text si marcajul de paragraf pe linie noua. Pentru indentarea datelor din ferestre se utilizeaza marcajul de informatie preformatata <PRE> care se incheie cu </PRE>. Atentie textul din textul din blocul preformatat este de tip monospatiu (fiecare litera are aceeasi inaltime).

Impartire document in sectiuni

Din motive de organizare fisierele HTML sunt impartite in doua sectiuni- antet (header) care contine informatia introductiva de formatare a paginii si corpul (body). Se utilizeaza marcajele <HEAD> si respectiv <BODY>. Recomandare - scrieti paginile Web plasand marcajele in pozitii logice astfel incat documentul sa fie usor de procesat ulterior.

Inserare titlu pagina

Pentru o pagina de Web mai elevata putem sa dam paginii un nume, controlul utilizat este <TITLE>. Acest control are o limitare deoarace unekle programe de explorare Web nu afiseaza titlul ferestrei. In schimb textul din <TITLE> este utilizat ca informatie de legatura cand se utilizeaza bookmarks sau favorites.

Informatii uzuale care se plaseaza la sfarsit

De obicei la sfarsitul unui document apar informatii de copyright si date despre autorul paginii. Marcajul utilizat este <ADDRESS>. Nu este obligatorie utilizarea acestui marcaj la paginile Web create.

Definire antete de sectiune

Daca pagina trebuie organizata pe sectiuni si subsectiuni se utilizeaza marcajele de formatare a subtitlurilor <H1-H6> unde avem H1 pentru subnivelul cel mai de sus si respectiv H6 pentru subnivelul cel mai de jos. Trebuie sa tinem cont de faptul ca fonturile, dimensiunile si efectele din prezentarea generala pot fi modificate de utilizator. Dar foarte putini oameni modifica preferintele implicite, deci daca pagina arata bine cu valorile predefinite, totul e o.k.

Linie orizontala

Pentru organizarea vizuala a unui document este util marcajul <HR> care introduce o linia orizontala subtire afisata pe intreaga latime a paginii. Acest marcaj poate fi utilizat de mai multe ori intr-un document Web, daca este folosit judicios paginile devin mai interesante.

Rezumat 1

Marcaj HTML

Marcaj inchidere

Semnificatie

</ADDRESS>

Informatii despre adresa si autor

<BODY>

</BODY>

Corp pagina HTML

<BR>

Linie noua

<HEAD>

</HEAD>

Informatie de formatare HTML

<Hn>

</Hn>

Nivel de subtitlu document (n 1-6)

<HR>

Linie orizontala

<HTML>

</HTML>

Defineste un fisier in format Web

<P>

Paragraf nou

<PRE>

</PRE>

Informatie preformatata

2. Stiluri de text

Caractere ingrosate si italice

Cuvintele sau frazele ingrosate ajuta la parcurgerea materialului si identificarea punctelor specifice. De aceea titlurile sectiunilor sunt scrise cu caractere ingrosate si nu italice. Formatarea ingrosata si inclinata necesita maracaje HTML pereche; acestea sunt <B> si </B> pentru caractere ingrosate si respectiv <I> si </I> pentru caractere inclinate.

Obs. E obligatoriu ca imediat dupa paranteza unghiulara deschisa a unui marcaj de formatare HTML sa se scrie codul de formatare- nu sunt permise spatii !!

Subliniere, caractere monospatiu, modificari de text

Se pot utiliza si alte optiuni de formatare acestea sunt: <U> </U> pentru subliniere, <STRIKE> </STRIKE> pentru taiere, indici inferiori <SUB> </SUB>, indici superiori <SUP> </SUP>, precum si marcajul monospatiu <TT> </TT> . Numele monospatiu indica faptul ca fiecare litera dintr-un font de acest tip ocupa exact aceeasi latime chiar daca litera respectiva este destul de ingusta.

OBS. Exista unele versiuni de Netscape Navigator care ignora marcajul <U>. Este bine ca in cazul in care creati documente ce contin legaturi catre alte documente legaturile sa fie afisate cu o alta culoare de obicei albastru.

Pentru introducerea formulelor matematice de obicei se utilizeaza marcajele <SUB> </SUB> si respectiv <SUP> </SUP>.

Exemplu

<H2> If you could double the amount of water on the planet - H<SUB>2</SUB>O<SUP>2</SUP> - you'd never have to worry about watering the lawn, it'd be all under the ocean !! </H2>

Dimensiuni, culori, corpuri de litera

Dimensiunea fonturilor HTML poate varia de la 1 la 7 , unde 1 este cel mai mic iar 7 cel mai mare, fiind exact invers numararii subtitlurilor. Toate modificarile caracteristicilor fintului se fac prin intermediul atributelor marcajului <FONT>. Marcajele car pot avea atribute se specifica de obicei prin perechi de forma nume valoare.

Primul atribut al marcajului de formatare este marimea. Pentru exemplificare consider urmatoare formatare

<FONT SIZE=7> un text important </FONT>

Dimensiunile fontului pot fi specificate in mod absolut (SIZE 5) sau relativ SIZE +1), (SIZE -3

Culoarea se poate stabili utilizand atributul COLOR, culorile se pot specifica prin nume iar daca doriti un control mai bun al rezolutiei culorilor se pot utiliza valori hexazecimale RGB(despre care vom discuta mai tarziu).

Exemplu

Al treilea atribut posibil este FACE pentru specificare corp de litera, dar este necesara utilizarea numelui corect al fontului de pe sistemul utilizat. ! Atentie acestea au nume diferite pe platforma diferite !

Exemplu

Aplicare stiluri logice

Cele mai cunoscute stiluri logice sunt <EM> </EM> si respectiv <STRONG> </STRONG>. Primul este utilizat pentru evidentiere (afisare cu caractere italice) iar al doilea pentru evidentiere puternica (afisare cu caractere ingrosate). Aceste marcaje logice nu sunt prea des utilizate deoarece nu stim cum va interpreta un program de navigare EM sau respectiv STRONG.

In standardul HTML sunt specificate si alte marcaje logice folosite destul de rar depoarace sunt sinonime cu marcajul de font monospatiu. Aceste marcaje logice sunt: CITE, CODE, DFN, KBD, SAMP, VAR. Ele sunt prezentate in detaliu in tabelul de la sfarsitul capitolului.

Combinare proprietati - exemplu

<HTML>

<HEAD>

<TITLE> Travels with Tintin </TITLE>

</HEAD> <BODY>

<H1><FONT COLOR= ORANGE> Excursie cu Tintin </FONT> </H1>

Din multimea de reporteri cu care am calatorit prin lume, printre care se numara si reporteri de la renumita agentie <I>Reuters</I> cel mai deosebit a fost<B>Tintin</B> un reporter din Belgia (<TT> tintin@belgium.gov</TT>)

<P>Cel mai atractiv element al excursiei a fost cainele sau, <B> Snowy</B>!

<P>

<FONT SIZE=6 COLOR=BLUE> Prima excursie: Nepal </FONT>

<P>

Dupa castigarea premiului Pulitzer pentru cartea <I>Adventure with Red Rackham's Treasure </I>, Tintin mi-a spus ca doreste o vacanta si impreuna ne-am hotarat sa vizitam Nepal-ul. Asa ca intr-o sambata dis de dimineata am pornit la drum..

</BODY>

</HTML>

!! Editati fisierul in Notepad, salvati fisierul cu extensia .HTML si realizati vizualizarea paginii folosind un program de navigare (Netscape sau Explorer) specificand calea spre fisierul dvs. !!

Rezumat 2

Marcaj HTML

Marcaj inchidere

Semnificatie

<B>

</B>

Afiseaza textul ingrosat

<I>

</I>

Afiseaza textul inclinat

<U>

</U>

Afiseaza textul subliniat

<TT>

</TT>

Text cu font monospatiu

<CITE>

</CITE>

Citare bibilografica

<CODE>

</CODE>

Listing de program

<DFN>

</DFN>

Definitie de cuvant

<EM>

</EM>

Stil logic de evidentiere

<KBD>

</KBD>

Text de la tastatura (similar cu <CODE>)

<SAMP>

</SAMP>

Exemplu de date introdus de utilizator

</STRONG>

Evidentiere logica puternica

<VAR>

</VAR>

Program sau variabila

Specifica dimensiune implicita font din pagina

<FONT>

</FONT>

Specifica atribute ale textului incadrat

SIZE=n

Dimensiune text este 1: 7 , cu 7 cea mai mare

FACE=a,b

Specifica fontul - a daca e disponibil sau b

COLOR=s

Culoare text - nume de culoare sau valoare RGB

3. Liste si caractere speciale

Liste de tip definitie

Glosarele reprezinta exemple tipice, cuvintele sunt listate in ordine alfabetica, urmate de definitii ale termenilor. Intreaga sectiune va fi gestionata printr-o lista de definitii inclusa intre marcajele <DL> si respectiv </DL>. Oa definitie se compune din 2 parti termenul de definit (<DT>) si descrierea definitiei (<DD>). Conceptul de baza al unei liste este relevat de formatul de definire si anume o pereche de marcaje in interiorul careia exista alte marcaje cu inteles special. Marcajele <DT> si respectiv <DD> sunt dependente de context si nu au sens decat daca apar in interiorul unei perechi <DL> si </DL>.

Ex.

<DL>

<DT><B> Blood pressure </B>

<DD>Balm, Black Haw, <I> Garlic</I>, Hawthorn

<DT><B> Bronchitis </B>

<DD>Angelica, <I> Aniseed, Caraway</I>, Grindelia

<DT><B> Burns </B>

<DD>Aloe, Chickweed,<I> Elder</I>

</DL>

Liste ordonate(numerotate)

Listele de tip definitie sunt utile dar sunt mult mai intalnite listele macate (neordonate). Aceste liste incep cu <UL> si se termina cu </UL> iar fiecare element al listei este definit prin controlul <LI>, avand un format asemanator cu cel al listei de tip definitie.

<UL>

<LI>Bloold pressure - Balm, Black Haw, <I>Garlic</I>, Hawthorn

<LI>Bronchitis - Angelica, <I> Aniseed, Caraway</I>, Grindelia

<LI>Burns - Aloe, Chickweed, <I> Elder</I>

</UL>

Liste neordonate(marcate)

Daca se doreste numerotarea unora dintre elementele unei liste se va utiliza o lista inrudita cu cea neordonata si anume lista ordonata <OL>, care se incheie cu marcajul </OL>. Fiecare element al listei se defineste printr-un marcaj <LI>. Semnificatia marcajului <LI> depinde de tipul listei in care se gaseste.

Caractere speciale

Entitatile pentru caractere speciale nu sunt incluse in paranteze ungiulare (<>) ele incep intotdeauna cu simbolul ampersand (&) si se termina cu punct si virgula (;). Cateva caractere speciale sunt prezentate in continuare ( &amp, &alt, &gt, &agrave, &acirc, &aring, &oslash,.)

Comentarii

Orice text incadrat de elementele <! - - si - -> este considerat comentariu si este ignorat de programele de navigare Web. Utilizarea comentariilor nu este obligatorie dar daca construiti pagini complexe ce ofera multe documente simpla datare a unui fisier este de nepretuit.

Rezumat 3

Marcaj HTML

Marcaj inchidere

Semnificatie

<DD>

Descriere de definitie

<DL>

</DL>

Lista de tip definitie

<DT>

Termen de definitie

<LI>

Element de lista

<OL>

</OL>

Lista ordonata (numerotata)

TYPE=tip

Tipul numerotarii - valori posibile: A, a, I, i,1

START=x

Numarul de inceput al listei ordonate

<UL>

</UL>

Lista neordonata (marcata)

TYPE=forma

Forma marcaj-valori posibile:circle, disc, square

<!- -

- ->

Comentariu

4. Adaugarea referintelor si legaturilor

Referinte catre alte pagini Web

Marcajul principal utilizat este cel ancora <A > impreuna cu perechea sa </A>, care trebuie sa contina atribute fara care acest marcaj nu are sens si nu afecteaza formatarea informatiei.Atributul care trebuie specificat este cel de referinta hipertext HREF valoare". Valoarea poate fi vida dar atributul trebuie specificat pentru ca lagatura sa apara activa in programul de navigare.

Ex.

Puteti vizita <A HREF="http://www.whitehouse.gov/"> Casa Alba on line!</A>

Referirea informatiilor non-Web

Se realizeaza pur si simplu folosind un URL adecvat care utilizeaza urmatoarea forma generala:

serviciu://numegazda (:port)-director (si nume fisier)

unde serviciul paote lua valorile

http protocol de transfer hipertext

mailto adresa de posta electronica

telnet telnet catre un sistem aflat la distanta

ftp fisier arhiva ftp

news server-ul de stiri usenet

Ex. Utilzare locatie gopher a Comisiei pt. protectia consumatorilor si respectiv mailto pentru trimitere mesaje

<A HREF=gopher://cpsc.gov/> U.S. Consumer Product Safety Commision</A>

<I>Am omis ceva? <A HREF=mailto:gianina@rdsor.ro> Trimite un mesaj!</A><I>

Toate referintele de tip hipertext arata la fel intr-o pagina web indiferent de tipul informatiei indicate

Exista doua moduri de a accesa documente de pe server-ul dvs. Si anume modul complica tin care se evidentiaza URL-ul complet al fiecarei pagini si modul simplu in care se specifica dora numele de document (inclusiv calea) fara informatii de prefix URL. URL-urile relative functioneaza pe baza faptului ca progamul de navigare adauga numele masinii gazda si calea paginii curente la fiecare referinta !!

Rezumat 4

Marcaj HTML

Marcaj inchidere

Semnificatie

<A>

</A>

Marcaj de tip ancora

<HREF>=url

Referinta hipertext

5. Referinte interne in cadrul documentelor

Definirea tintelor intr-un document Web

Una din problemele cu care se confrunta proiectantii de pagini Web este cand este optima plasarea unui document intr-un fisier unic HTML si cind e optima organizarea sa ca un set de fisiere. O regula empirica utilizata este urmatoarea - separarea paginilor prin puncte logice de salt si minimizarea timpului de incarcare pentru cititori.

Tintele salturilor sunt cunoscute sub nume de ancore de nume. Marcajul HTML pentru un punct-ancora este o varianta a marcajului <A> de tip <A nume=valoare> unde valoarea poate fi orice secventa de caractere, numere, semne de punctuatie. Unele programe de navigare impun ca toate caracterele din ancora sa fie litere mici- testati restrictiile !!

Ancorele sunt destinatii din cadrul paginii curente si nu legaturi catre exterior textul nu este scos in evidenta in nici un fel. Acest marcaj trebuie inchis cu marcajul pereche </A>.

Adaugare legaturi catre tinte din cadrul paginilor Web

Marcajul care defineste un salt la o legatura activa din cadrul documentului este tot o varianta a marcajului <A> caz in care atributul necesar este o referinta de tip hipertext de tip HREF dar URL-ul este inlocuit de numele ancorei in fata caruia se utilizeaza simbolul diez(#).

Ex. Utilizare referinta prin creare pagina cu reguli ce trebuie respectate la realizarea unei pagini Web

<H1> Reguli pt. proiectare pagini Web</H1></A>

<a href=#Regula1>Regula 1</a> |

<a href=#Regula2>Regula 2</a> |

<a href=#Regula3>Regula 3</a> |

<a href=#Regula4>Regula 4</a>

</Font>

<p>

</CENTER>

<DL>

<DT><B>Regula #1:</A>

<DD>Intelege intentiile utilizatorului si modul in care utilizeaza paginile Web si apoi concentreaza-te asupra modului de proiectare in functie de necesitatile si interesul acestora</B>

</DL><DL>

<DT><B>Regula #2:</A>

<DD>Sa fi cumpatat cu elementele grafice </B>

</DL><DL>

<DT><B>Regula #3:</A>

<DD>Paginile chiar cele care includ elemente grafice nu trebuie sa se incarce in mai mult de 30 de secunde</B>

</DL><DL>

<DT><B>Regula #4:</A>

<DD> Minimizeaza paleta de culori</B>

</DL>

</BLOCKQUOTE>

S-a introdus in exemplul de mai sus marcajul <BLOCKQUOTE> si </BLOCKQUOTE> utilizat pentru indentarea textului din cadrul blocului respectiv. Alt marcaj <CENTER> centreaza orizontal textul din pagina.

Salturi in cadrul listelor organizate

Ancorele si punctele de salt sunt utilizate pentru a-i ajuta pe cititori sa navigheze in liste de dimensiuni mari cu informatii sortate alfabetic.

Legaturi catre tinte din documente externe

Daca adaugam notatia de forma # ancora la sfarsitul oricarui URL putem face ca acea legatura sa refere direct un anumit punct ancora din documentul respectiv.

Sa presupunem ca pagina cu ghidul referitor la modul de creare a paginilor Web ar fi pe un sistem www.intuitive.com iar URL-ul complet al acestuia ar fi de forma http://www.intuitive.com/articole/ghid_proiectare.html, atunci apelarea se realizeaza astfel:

<A HREF="http://www.intuitive.com/articole/ghid_proiectare.html#regula4"> Minimizeaza paleta de culori</A>

Rezumat 5

Marcaj HTML

Marcaj inchidere

Semnificatie

<A>

</A>

Marcaj de tip ancora

HREF=#nume

Referinta catre o ancora interna

NAME=nume

Definitia unei ancore interne

6. Adaugarea imaginilor grafice

Diverse formate de imagine

Formatele de imagini permise de HTML sunt GIF(Graphics Interchange Format) si JPEG(Joint Photographic Expert Group). Daca aveti imagini in alt format - PICT, PCX, BMP, TIFF un utilizator poate vizualiza aceste imagini doar in cadrul unei aplicatii separate care poate fi sau nu lansata automat de catre un program de explorare. Exista un nou program grafic PNG(Portable Graphic Network) ce ofera multe din proprietatile optime ale GIF si JPEG.

Comparand performantele formatelor GIF si JPEG se constata ca imaginile GIF pot utiliza doar 256 de culori pe cand JPEG milioane de culori distincte, ambele formate comprima imaginile pentru a reduce dimensiunea fisierelor dar modul de comprimare e diferit. Motrivul pentru care formatul GIF e preferat nu este faptul ca paleta de culori e mica ci faptul ca ea poate fi redusa la un minim necesar ceea ce duce la reducere dimensiune fisier.

Formatul GIF este utilizat in general pentru butoane, banner-e si alte elemente similare datorita dimensiunii mici a fisierului.Formatul JPEG e necesar cand se doreste imitarea cat mai exacta a imaginii originale(fotografie).

Aplicatiile care pot transforma imaginile grafice in format GIF sunt urmatoarele:

GraphicConverter - http://www.lemkesoft.de/

Paint Shop Pro - http://www.jasc.com/psp.html

Lview Pro - http://www.lview.com/

Referitor la imaginile GIF animate, acestea se bazeaza pe o procedura simpla in care o secventa de imagini grafice cu trecri de la una la alta e rulata astfel incat sa apara ca o imagine animata. Puteti lua imagini GIF animate sau puteti crea chiar dvs. Cu GIF construction set care poate fi gasit la adresa - http://www.mindworkshop.com/alchemy/gifcon.html

Includere imagini

Se utilizeaza marcajul de formare <IMG> care are un singur atribut esential SRC=numegrafic si la fel ca linia orizontala nu are marcaj pereche de inchidere. De exemplu consider un fisier numit desen.gif iar pentru a include imaginea utilizez secventa

<IMGSRC="desen.gif">

La includerea imaginilor grafice trebuie sa tineti cont de regula empirica urmatoare - 1K de imagini grafice conduce la o secunda timp de incarcare - deci tineti cont de dimensiunea fisierelor.

O utilizare frecventa a imaginilor grafice este crearea butoanelor care se realizeaza prin includere marcaj IMG intr-o ancora. Consideram exemplul de mai jos unde exista doua butoane yes.gif si respectiv no.gif.

<HTML>

<HEAD>

<TITLE> Cutia neagra </TITLE>

</HEAD> <BODY>

<H1>Bine ati venit la cutia neagra!</H1>

Cred ca ati intalnit multe cutii la viata dvs, dar nici una nu a fost la fel de infricosatoare ca si <I>cutia neagra</I>!

<P>

Doriti sa continuati? <A HREF="cutie_neagra1.html">

</BODY>

</HTML>

Sfat - puteti elimina chenarul albastru din jurul unei imagini grafice care este si hiperlegatura prin adaugarea unui nou atribut BORDER=0

Alternative pt. programe de explorare de tip text

Pentru programele de navigare care nurecunosc formate grafice se utilizeaza un atribut suplimentar al marcajului <IMG> si anume ALT=text_alternativ care apare pe post de text alternativ si e afisat cand utilizatorul nu poate vizualiza imaginea.

Atat Internet Explorer cat si Navigator afiseaza textul din atributul ALT imediat dupa incarcarea paginii si apoi inlocuiesc treptat fiecare element grafic cu imaginea grafica propriu-zisa.

Ex. <IMG SRC="da.gif" ALT="<yes>"> </A>

Optiuni de aliniere imagine

Se obtin utilizand atributul ALIGN al marcajului <IMG> care ofera un control precis al alinierii. Exista trei alinieri standard acestea sunt - TOP, MIDDLE, BOTTOM. In mod implicit imaginile si alte materiale adiacente sunt aliniate la baza imaginii. Consideram exemplul de mai sus putin modificat.

Ex.

Doriti sa continuati? <A HREF="cutie_neagra1.html">

(Atentie! Ai nevoie de curaj.)

Cele trei optiuni anterior mentionate nu pot face ca textul sa curga pe ecran in jurul unui grafic fie la drepata sau la stanga. Pentru aceasta exista optiunile WIDTH pentru specificare latime si respectiv HEIGHT pentru specificare inaltime grafic inainte ca acesta sa fie incarcat. Alt atibut utilizat este BORDER care permite specificarea latimii exacte a chenarului din jurul imaginii-legatura. Alte atribute utile sunt VSPACE si HSPACE care controleaza spatiul vertical si cel orizontal din jurul fiecarei imagini grafice. Marcajele <BR> si <P> provoaca trecerea la linia urmatoare din zona curgatoare. Daca doresc intreruperea linie de text sirevenirea la marginea ecranului dupa imaginea grafica trebuie adaugat un atribut special al marcajului <BR> si anume CLEAR.

Clipart sau imagini proprii

Sursele uzuale pentru imagini rafice sunt - imagini noi creta de proiectantii de pagini Web, Clipart sau alte biblioteci de imagini, programe de prelucrare a textelor, forografii scanate, imagini preluate de pe Internet.

Imaginile creta de utilizator pot fi realizate folosind Adobe Photoshop care este destul de stufos si costisitor. Alte pachete mai simplu de utilizat sunt Paint Shop Pro si Lview Pro a caror adresa a fost prezentata anterior. Exista si alte pachete comerciale grafice pentru platforme diferite:

Windows - Adobe Illustrator, Meta Creations Painter, Canvas, Ray Dream Designer, SmartSketch, CorelDraw!, MacroModel, Elastic Reality

Unix - IslandDraw, IslandPaint, Adobe Photoshop, FusionArt. Adobe Illustrator, Visual Reality

Exista de asemenea imagini tip Clipart disponibile atat pe CDROM-uri cat si locatii cu imagini una dintre cele mai interesante fiind Art Today unde accesul se face contra unei taxe modice pe an, adresa este - http://www.arttoday.com

Exista si programe de prelucrare a textelor pentru efecte de text distractive sau interesante. Exista programe de prelucrare text la nivel de font-uri de exemplu Pixar Typestry. Adobe Photoshop este si el un editor grafic si de imagini puternic. Prin adaugarea unor extensii de filtrare provenite de la alti producatori independenti - Eye Candy se pot genera grafice tip text minunate. Si suita Adobe include un set mare de filtre - Gallery Effects care permite transformarea imaginilor grafice.

Cu ajutorul scaner-elor se pot obtine imagini foarte interesante. In cazul in care pagina mea Web va atrage utilizatori ce dispun de conexiuni Internet lente se pot utiliza mici reprezentari alb-negru ale imaginilor mari pentru ca utilizatorii care nu sunt interesati sa fie scutiti de timpul de asteptare.

Se poate realiza scanarea cu Photoshop sau orice alta aplicatie dar rezolutia cu care faceti scanarea sa fie intre 75 si 100 dpi deoarece informatia suplimentara obtinuta la o rezolutie mai mare incetineste. La adresa http://www.infomedia.net/scan puteti obtine raspunsuri la intrebaride spre procesul de scanare.

De pe Internet puteti lua imagini, arhive grafice de la urmatoarele adrese:

http://www.TheShockYone.com/

http://www.ender-design.com/rg/

http://www.geocities.com/SiliconValley/6603/

http://www.aceent.com/w2/

http://www.thedesignshoppe.com/

Culori transparente

Putem realiza inlocuirea fondului din jurul marginilor imaginii cu o culoare transparenta. Culorile transpoarente fac paginile Web mult mai atragatoare. In general toate pachetele grafice si de prelucrare a textelor permit GIF-uri transparente. Daca programul grafic pe care il utilizati nu permite acest lucru alegeti programul GIFTRANS. Documentatia despre acest program o gasiti la adresa http://www.intuitive.com/coolweb.

Audio, video si alte medii

In paginile Web pot fi introduse si fragmente audio. Inregistrarile de acest tip sunt in format micro-law (mulaw) si pot fi incluse ca butoane sau zone active.

Ascultati <A HREF="audio.au"> un extras din ultimul album .</A>

Alte formate audio raspandite sunt WAV si MIDI care pot fi utilizate. O arhiva de fisiere audio destul de mare o gasiti la adresa http://www.midifarm.com/

Filmele sunt disponibile in doua formate QuickTime si MPEG, iar formatul adecvat pentru Web este MPEG. Formatul de includere a unei secvente MPEG este:

A aparut ultimul <A HREF="video.mpg"> video muzical!</A>

O alta tehnologie aparuta este asa numita tehnologie de medii de tip flux a carui concept este urmatorul - nu se descarca intreaga secventa audio sau video deodata ci suficient cat sa asigure un avans de cateva secunde si incepe redarea. Cel mai important sustinator al acestei tehnologii este firma RealAudio - http://www.realaudio.com/ . Aceasta corporatie ofera si o tehnologie video de tip flux numita RealVideo.

Puteti insa vizita urmatoarele locatii:

http://www.polygram.com/

http://www.dotzup.com/

Rezumat 6

Marcaj HTML

Marcaj inchidere

Semnificatie

<IMG

Marcaj de includere a imaginilor

SRC=url

Sursa fisier grafic

ALT=text

Alternativa text pentru afisare daca e necesar

ALIGN=aliniere

Aliniere imagine in pagina/aliniere in jurul imaginii- valori posibile: top, bottom, middle, left, right

HEIGHT=x

Inaltime imagine (pixeli)

WIDTH=x

Latime imagine (pixeli)

BORDER=x

Chenarul din jurul imaginii cand e utilizata ca hiperlegatura

HSPACE=x

Spatiu suplimentar orizontal in jurul imaginii (pixeli)

VSPACE=x

Spatiu suplimentar vertical in jurul imaginii (pixeli)

<BR

Linie noua

CLEAR=opt

Forteaza trecerea la marginea specificata - valori posibile: left, right, all

7. Tabele si cadre

Daca se doreste existenta unor date adiacente intr-o pagina de exemplu text pe mai multe coloane solutia optima o reprezinta tabelele.

Bazele formatarii tabelelor

Trebuie inceput prin specificarea parametrilor tabelului, apoi parametrii fiecarei linii ti fiecare celula trebuie inconjurata de marcaje <TD> </TD> date de tabel.

Consideram secventa de mai jos in care datele sunt plasate pe acelasi rand delimitat de maarcajele <TD></TD>.

<B> Canale de televiziune uzuale </B>

<TR>

<TD>PROTV</TD>

<TD>ANTENA1</TD>

<TD>PRIMA</TD>

<TD>ACASA</TD>

</TR>

</TABLE>

In secventa urmatoare aceleasi date sunt organizate sub forma unui element pe fiecare rand.

<B> Canale de televiziune uzuale </B>

<TR>

<TD>PROTV</TD>

</TR>

<TR>

<TD>ANTENA1</TD>

</TR>

<TR>

<TD>PRIMA</TD>

</TR>

<TR>

<TD>ACASA</TD>

</TR>

</TABLE>

Fiecare dintre liniile de mai sus poate avea o aliniere specificata prin ALIGN= iar marcajul TABLE poate avea urmatoarele optiuni:

Marcaj

Semnificatie

BORDER=n

Latimea zonei umbrite din jurul tabelului, daca are valoarea 0 atunci se elimina caroiajul din interiorul tabelului

CELLSPACING=n

Spatierea dintre celule (pixeli)

CELLPADDING=n

Spatierea dintre chenar si continutul celulei (pixeli)

WIDTH=n

Latimea dorita, prioritara fata de latime celula (pixeli sau procente)

Controlul latimii tabelului se poate realiza cu WIDTH pentru specificare lungime exacta tabel pe ecran indiferent de continut respectiv CELLPADDING care indica spatiul in pixeli dintre marginea interioara a chenarului unei celule ti marerialul continut in celula sau CELLSPACING care se refera la latimea liniilor de caroiaj dintre celulele de date.

Ex. <B> Canale de televiziune uzuale </B>

<TR><TD>PROTV</TD></TR>

<TR><TD>ANTENA1</TD></TR>

<TR><TD>PRIMA</TD></TR>

<TR><TD>ACASA</TD></TR>

</TABLE>

In cadrul unui tabel se pot specifica antete de coloane prin intermediul marcajului TH care inlocuieste marcajul TD in definitia liniei. TH este aproape identic cu cu TD cu 2 exceptii si anume textul din cadrul unui marcaj TH este scris cu aldine si centrat orizontal intr-o celula.

Se mai poate specifica si alinierea orizontala a celulelor de date cu optiunea ALIGNcare poate lua valorile- center, right. VALIGN poate permite specificarea alinierii pe verticala - top, bottom, middle. Liniile si coloanele se pot intinde pe mai multe unitati din tabel de exemplu specificand COLSPAN=2 pot extinde o noua celula de date pe 2 coloane.

Ex.

<TR>

<TD COLSPAN=2 ALIGN=Center><FONT SIZE=5>Film & muzica</FONT></TD></TR>

<TH>Filmul</TH><TH>Ziua</TH>

<TR ALIGN=CENTER><TD>Independence Day</TD><TD>Marti</TD></TR>

<TR ALIGN=CENTER><TD>Volcano</TD><TD>Marti</TD></TR>

</TABLE>

Formatarea avansata a tabelelor

Pentru crearea tabelelor exista si optiuni suplimentare. Una dintre cele mai importante este controlul culorilor din tabele, adica culoarea de fond a celulelor. Culorile din cadrul unei celule apar in cadrul marcajului <TD>.

Ex. <TD> BGCOLOR=red>Text pe fond rosu</TD>

Atributul COLSPAN a fost discutat mai sus, pentru intelegerea utilizarii ROWSPAN -extindere celula de date pe mai multe randuri, se considera exemplul de mai jos in care in celula multilinie se include o imagine grafica.

Ex.

<TR><TD>PROTV</TD></TR>

<TR><TD>ANTENA1</TD></TR>

<TR><TD>PRIMA</TD></TR>

<TR><TD>ACASA</TD></TR>

</TABLE>

Internet Explorer adauga marcajele BACKGROUND ce permite grafice de fond in interiorul celulelor din tabele, BORDERCOLOR ce permite controlul detaliat al culorii chenarului, ofera si posibilitatea de a defini cele doua culori utilizate pentru chenar prin BORDERCOLORBLACK si BORDERCOLORLIGHT, si specificarea unei imagini grafice de fond in cadrul celulelor individuale de date prin BACKGROUND=fisier_grafic.

Ex.

<TR>

<FONT SIZE=5 COLOR=teal>Drumul e lung si pana ajung.</FONT></TD>

</TR>

</TABLE>

<HR>

</TABLE>

Exista doua atribute ce pot fi folosite pentru controlul precis al chenarului din jurul tabelelor - FRAME si al caroiajului dintre celulele de date - RULES. Valorile lor sunt prezentate in tabelul Rezumat 7.

Cadre - pagini in pagini

O notiune noua care face ca tabelele sa fie mai usor de inteles este cea de cadru. Practic cadrele raspund la intrebarea ce se intampla daca fiecare celula din tabel ar fi o pagina proprie Web deci in momentul in care avem pagini in cadrul paginilor.

Cadrul individual este specificat printr-un marcaj <FRAME> care la rindul sau este inserat intr-un specificator <FRAMESET> ce indica volumul de spatiu alocat fiecarui panou de informatie. In exemplul de mai jos se separa ecranul in doua sectiuni prima de 75 pixeli iar cealalta ocupand intreg ecranul.

EX.

<HTML>

</FRAMESET>

</HTML>

unde

sus.html jos.html

<CENTER><h2> partea de sus !</h2> <TABLE WIDTH=100% HEIGHT=100%>

</CENTER> <TR><TD ALIGN=center VALIGN=center>

</BODY> <h2>partea de jos !!</h2>

</TD></TR>

</TABLE>

</BODY>

Observati artificiul din pagina jos.html in care se specifica un tabel care are 100% din inatime si latime ecran dar informatia trebuie centrata orizontal si vertical deci cea ce trebuie afisat va apare in centul ecranului indiferent cat de mare este acesta.

Marcajul <FRAMESET> creaza un grup de cadre in care se va imparti o pagina Web. Se pot utiliza optiunile ROWS pentru impartire in panouri orizontale si COLS pentru specificare panouri verticale. Puteti utiliza in cadrul atributelor trei valori diferite - numar care specifica dimensiunea dorita in pixeli, asterisc pentu specificare rest spatiu si n% pentru specificare un procent din latime.

Ex. <HTML>

</FRAMESET>

</FRAMESET>

</HTML>

Exista cateva atribute care pot fi specificate la definirea cadrelor din care cel mai important este NAME=, prin care se atribuie cate un nume unic fiecarui cadru care poate fi utilizat ca mijloc de a controla care dintre ferestre sa fie afectata de anumite actiuni.

EX. <HTML>

</FRAMESET>

</HTML>

unde implict.html are forma

</BODY>

iar animale.html este

<B>Alege un animal</B>

</FONT>

<P>

<A HREF="caine.html" target=main> Caine</A>

<P>

<A HREF="pisica.html" target=main> Pisica</A>

<P>

<A HREF="pasare.html" target=main> Pasare</A>

<P>

</FONT>

</CENTER>

</BODY>

Observati efectul clic buton home si respectiv buton Back program de navigare pentru determinare utilitate atribut Target !!

Marcajul FRAME are doua atribute importante. Primul permite specificarea latimii unei margini a cadrului - FRAMEBORDER cu un atribut in pixeli. Al doilea SCROLLING permite fortarea unei bare de derulare sau eliminarea acesteia.

Ex. <HTML>

</FRAMESET>

</HTML>

Pentru programele de navigare care nu recunosc cadrele, pentru a ocoli problema unor pagini vide in cadrul paginii principale sa includeti o sectiune care contine optiunea NOFRAMES. Daca programul de navigare stie interpreta cadrele va ignora ce este in portiunea respectiva daca nu afiseaza materialul din zona NOFRAMES.

EX.

<HTML>

</FRAMESET>

<BODY>

<h2>Ne pare rau locatia e proiectata pentru un program de navigare cu

cadre </h2> incercati sa va actualizati soft/ul!

</CENTER>

</BODY>

</NOFRAMES>

</HTML>

Pentru mai multe detalii despre cadre - Microsoft ofera informatii despre la adresa http:// www.microsoft.com/workshop/author/newhtml/ iar lectiile Netscape despre cadre le puteti gasi la adresa http://www.netscape.com/assist/net_sites/frames.html .

Rezumat 7

Marcaj HTML

Marcaj inchidere

Semnificatie

<TABLE

</TABLE>

Tabel

BORDER=x

Chenar in jurul tabelului(pixeli sau procente)

CELLPADDING=x

Spatiu suplimentar in interiorul celulelor tabelului (pixeli)

CELLSPACING=x

Spatiu suplimentar intre celulele tabelului (pixeli)

WIDTH=x

Latimea tabelului (pixeli sau procente)

FRAME=

VOID

ABOVE

BELOW

HSIDES

LHS

RHS

VSIDES

BOX

BORDER

Controlul celulelor din tabel

Elimina toate muchiile exterioare ale tabelului

Afiseaza o muchie in partea superioara a cadrului tabelului

Afiseaza o muchie in partea inferioara a cadrului tabelului

Afiseaza cate o muchie in partea inferioara si superioara a cadrului tabelului

Afiseaza o muchie in partea stanga a cadrului tabelului

Afiseaza o muchie in partea dreapta a cadrului tabelului

Afiseaza cate o muchie in partea stanga si dreapta a cadrului tabelului

Afiseaza cate o muchie pe toate laturile cadrului tabelului

RULES=

NONE

GROUPS

ROWS

COLS

ALL

Controlul chenarelor din tabel

Elimina toate muchiile interioare ale tabelului

Afiseaza muchii orizontale intre toate grupurile din tabel - grupurile sunt specificate prin THEAD, TBODY, TFOOT, COLGROUP

Afiseaza muchii orizontale intre toate liniile tabelului

Afiseaza muchii verticale intre toate coloanele tabelului

Afiseaza muchii intre toate liniile si coloanele tabelului

BORDERCOLOR=cul

Culoarea chenarului tabelului (RGB sau nume culoare)

BORDERCOLORLIGHT=cul

Culoarea deschisa din cele 2 specificate (RGB sau nume culoare)

BORDERCOLORDARK=cul

Culoarea inchisa din cele 2 specificate (RGB sau nume culoare)

<TR>

</TR>

Linie a tabelului

BGCOLOR=cul

Culoarea de fond a celulei (RGB sau nume culoare)

ALIGN=aliniere

Alinierea celulelor din linia curenta (RGB sau nume culoare)

<TD>

</TD>

Celula de date a tabelului

BGCOLOR=cul

Culoarea de fond a celulei (RGB sau nume culoare)

COLSPAN=x

Numar de coloane pe care se va intinde aceasta celula de date

rowspan='x

Numar de linii pe care se va intinde aceasta celula de date

ALIGN=aliniere

Aliniere orizontala a materialului din celula, valori posibile - left, center, right

VALIGN=aliniere

Aliniere verticala a materialului din celula, valori posibile - top, middle, bottom

BACKGROUND=url

Specifica imaginea de fond a celulei

<FRAMESET

</FRAMESET>

Defineste impartirea imaginii in cadre

COLS=x

Numarul si dimensiunea relativa a cadrelor pe orizontala

ROWS=x

Numarul si dimensiunea relativa a cadrelor pe verticala

<FRAME

</FRAME>

Defineste un cadru specific

SRC=url

URL sursa al cadrului

NAME=nume

Numele cadrului (utilizat cu TARGE=Nume ca parte a unui marcaj de tip ancora ) <A>

SCROLLING=derulare

Definire optiuni de derulare, valori posibile - on, off, auto

FRAMEBORDER=x

Dimensiune margine din jurul cadrului

</NOFRAMES>

Sectiune a paginii afisata pentru utilizatorii ce nu pot vizualiza o pagina cu cadre

Tabele avansate

Exista si propietati suplimentare ale tabelelor care pot fi utilizate. Consideram exemplul :

<HTML>

<BODY>

De-a lungul timpului, calculatoarele s-au dezvoltat si au ajuns din ce in ce mai sofisticate. Incercam sa prezentam mai jos cateva dintre procesoarele calculatoarele care se utilizeaza in prezent si preturile acestora.

<TH>Pret</TH><TH>Procesor</TH></TR>

<TD>$200</TD><TD>Pentium 1</TD>

</TR><TR ALIGN=center>

<TD>$300</TD><TD>Pentium 2</TD>

</TR><TR ALIGN=center>

<TD>$400</TD><TD>Pentium 3</TD>

</TR><TR ALIGN=center>

<TD>$500</TD><TD>Pentium 4</TD>

</TR>

<CAPTION ALIGN=bottom>Oare sunt corecte aceste preturi?</CAPTION>

</TABLE>

<P>

<B>Evident ca nu !! </B>

<P>

Preturile din tabel au fost introduse doar pentru a putea evidentia modul de implementare al unui tabel cu atribute suplimentare. Puteti sa va informati despre preturi daca luati date direct de la producatori.

</BODY>

</HTML>

Se utilizeaza urmatoarele marcaje - <TH> marcaj de antet de tabel, <TR> in cadrul caruia s-a utilizat BGCOLOR pentru a specifica ca prima linie a tabelului sa fie prezentata pe un fond gri. De asemenea textul paginii curge in jurul tabelului datorita atributului ALIGN=left. Atributele HSPACE si VSPACE permit specificarea pixelilor suplimentari pentu chenar pentru a mari spatiul dintre tabel si textul anconjurator.atit pe verticala cat si pe orizontala. Un alt element este <CAPTION> care permite specificarea unui text explicativ pozitionat fata de tabel unde dorim prin atribut ALIGN ce poate lua valorile bottom(parte inferioara), left(partea stanga), right(partea dreapta), top(parte superioara).

Putem sa luam pentru exemplificarea propietatilor suplimentare consideram urmatorul exemplu.

<FONT size=+2><B>Locuri unde se poate manca intr-o casa</TD></TR>

<TH>Comentariu</TH></TR>

<TR><TD>Sufragerie</TD>

<TD VALIGN=top>Ce omenesc.</TD></TR>

<TR><TD>Salon</TD>

<TD VALIGN=baseline>Neasteptat, dar greu de curatat</TD></TR>

<TR><TD>Camera<br>de<br>sport</TD>

<TD>Daca nu te deranjeaza sa-ti curga transpiratia pe mancare</TD></TR>

<TR><TD>Bucatarie</TD>

<TD>Excelenta pentru mancat rapid</TD></TR>

<TR><TD>Birou</TD><TD NOWRAP>De acord este un lucru obisnuit al anilor '90 cand ajungi sa mananci in timp ce lucrezi.. </TD></TR>

</TABLE>

Elementul ROWSPAN poate fi utilizat pentru a obtine bare verticale in cadrul tabelului. Utilizand CELLPADDING inseamna ca marimea barei verticale este de 2 ori aceasta valoare (definind fiecare parte), plus 1 pixel pentru latimea in sine specificata. S-a utilizat &nbsp marcajul pentru spatiu pentru ca celula sa dispuna de un continut. Alinierea verticala s-a realizat Top pentru prima celula, Baseline pentru a doua si Center pentru restul. Atributul Nowrap forteaza programul de navigare sa nu desparta textul de pe linii in nici un fel.

Specificare numarului exact si al dimensiunii fiecarei tabele din pagina se face prin combinatii de marcaje <COLGROUP> si <COL> din carul marcajului <TABLE>. De ce trebuie specificat numarul de coloane- deoarece programul de navigare nu resa prima linie a tabelului pana nu receptioneaza fiecare element de informatie. Daca tabelul e mic o intaryiere de o secunda doua nu este sesizabila, daca tabelele sunt mari se pot utiliza marcajele de mai sus.

</COLGROUP>

<TR><TD>The</TD><TD>rain</TD><TD>in</TD><TD>SPAIN</TD></TR>

<TR><TD>falls</TD><TD>mainly</TD><TD>on</TD><TD>the</TD><TD>plain</TD></TR>

<TR><TD>and where is that plain?</TD><TD>in Spain! In Spain!</TD>

</TR>

</TABLE>

Marcajul COL este util si in specificarea latimii unei coloane. De asemenea se pot specifica si alte atribute pentru o anumita coloana ca in exmplul de mai jos.

<THEAD>

<TR><TH>Actiune<TH>Ora

<TBODY>

<TR><TD>Trezire<TD>8:30 am

<TR><TD>Merg cu masina la servici<TD>9:00 am

<TR><TD>Masa de pranz<TD>12:00

<TR><TD>Ma intorc acasa<TD>6:00 pm

</TABLE>

In exemplul de mai sus s-au omis marcajele de terminare dar au fost adaugate THEAD si TBODY. Optiunea ALIGN specifica alinierea la un caracter, cel implicit considerat este punctul zecimal.

Cadre avansate

Pentru eliminarea chenarului din jurul fiecarui cadru implementate in cadrul aceleiasi ferestre pentru Netscape Navigator se adauga atributul BORDER=0 in cadrul marcajului <FRAMESET> iar Internet Ex plorer in cadrul aceluiasi marcaj se vor utiliza atributele FRAMEBORDER=0 si FRAMESPACING=0. Daca doriti sa faceti experimente cu rezultate interesante incercati sa utilizati cele 2 atribute separat.

Daca se doreste deplasarea continutului paginii fata de marginile cadrului se vor utiliza combinatii ale atributelelor MARGINHEIGHT si MARGINWIDTH care specifica in pixeli sau procentual cat de departe de marginea superioara si cea din stanga este pozitionat continutul.

Ex. <FRAMESET COLS="40%, 60%">

</FRAMESET>

O alta optiune utila ce poat fi utilizata este atributul NORESIZE pe care il puteti specifica in cazul in care nu doriti ca utilizatorii sa nu poata redimensiona cadrul. Daca il combinati cu atributul SCROLLING=no se poate elimina o parte a unei imagini sau pagini. Cele doua atribute de mai sus se vor specifica in cadrul marcajului <FRAME>.

Pentru indicarea evenimentelor dintr-un cadru utiliyand marcajul <FRAME> prin atributul NAME= si specificare nume cadru sau folosind atribut TARGET= ca parte a lui HREF pentru a determinaca evenimentele sa afecteze cadrul specificat nu cel in care lucrati. Pentru atributul TARGET se pot utiliza valorile din tabelul de mai jos.

Nume

Semnificatie

_blank

Incarca documentul intr-o fereastra noua fara nume

_self

Incarca documentul in fereastra curenta (valoare prestabilita)

_parent

Incarca documentul in fereastra parinte(are relevanta doar daca aveti mai mult de o fereastra pe ecran)

_top

Incarca documentul in fereastra din partea superioara anuland in felul acesta toate celelalte cadre ce ar fi pe ecran

O fereastra Web cu cadre si un buton pe care scrie no frames, codul sau corespunzator paote fi urmatorul:

<A HREF="noframes.html" TRAGET=_top>no frames</A>

Cadre interne

Internet Explorer utilizeaza notiunea de cadru intern ca fiind o fereastra de cadre complet inconjurata de o fereastra exterioara. Pentru specificarea lui se utilizeaza marcajul <IFRAME> care este asemanator cu <FRAME>.

Ex. <IFRAME SRC="info.html" HEIGHT=40% WIDTH=50%>

Optiunile marcajului <IFRAME> ce se utilizeaza sunt FRAMEBORDER cu valorile 0 sau 1 in functie de dorinta de a avea sau nu chenar, MARGINWIDTH si MARGINHEIGHT ce asigura controlul fin al spatierii dintre marginile cadrului intern si continutul acestuia, SCROLLING. O alta optiune pe careo puteti utiliza este faptul ca puteti atribui cadrului intern un nume prin NAME si puteti specifica legaturi catre acesta cu ajutorul atributului TARGET.

Rezumat 7 bis

Marcaj HTML

Marcaj inchidere

Semnificatie

<TABLE

</TABLE>

ALIGN=left

Aliniare tabel la marginea din stanga pagina, textul curge in partea dreapta

ALIGN=right

Aliniare tabel la marginea din dreapta pagina, textul curge in partea stanga

HSPACE=x

Spatiu suplimentar pe orizontala in jurul tabelului (pixeli)

VSPACE=x

Spatiu suplimentar pe verticala in jurul tabelului (pixeli)

COLS=x

Specifica numarul de coloane al tabelului

<TD

</TD>

NOWRAP

Nu permite despartirea textului pe linii in cadrul unei celule !! atentie la utilizare

ALIGN=baseline

Aliniere celule de date cu linia de baza a textului adiacent

ALIGN=caracter

Aliniaza o coloana fata de un anumit caracter (caracterul prestabilit este punct)

ALIGN=justify

Aliniaza atat marginea din dreapta cat si cea din stanga a unui text

</COLGROUP>

Specifica un numar de definitii de coloane realizate cu ajutorul marcajelor COL

<COL

Definire coloana

WIDTH=x

Latimea unei coloane (pixeli, procentual sau

<THEAD>

</THEAD>

Organizare tabel - definire titlu tabel

<TBODY>

</TBODY>

Organizare tabel - definire corp tabel

<FRAMESET

</FRAMESET>

BORDER=x

Specifica starea activa (on) sau inactiva (off) pentru chenarul cadrului

FRAMEBORDER=x

Specifica marimea chenarului

FRAMESPACING=x

Marimea spatiului dintre doua cadre adiacente

<FRAME

</FRAME>

MARGINHEIGHT=x

Spatiul suplimentar de deasupra si de dedesubtul unui cadru

MARGINWIDTH=x

Spatiul suplimentar la dreapta si la stanga unui cadru

<IFRAME

</IFRAME>

Cadru intern

SRC=url

Sursa cadrului

NAME=s

Numele ferestre (util pentru TARGET)

HEIGHT=x

Inaltime cadru inglobat (pixeli, procentual)

WIDTH=x

Latime cadru inglobat (pixeli, procentual)

8. Fonduri, controale marquee, liste

Aliniere text si linii orizontale

Optiunea <CENTER> cu perechea sa </CENTER> este utilizatapentru centrarea oricarei informatii dintre aceste 2 marcaje. Acelasi lupaote fi obtinut folosnd optiunile <P ALIGN=center> . </P>. Cred ca prima optiune e mai simpla si mai usor de utilizat.

Liniile orizontale produse de marcajul <HR> sunt utile daca se utilizeaza atributele suplimentare SIZE (1 - cea subtire linie, 10 - cea mai groasa linie), WIDTH (120 pixeli sau 25%), ALIGN(left,right,center), NOSHADE(pentru eliminare aspect 3D al liniei).

In Internet Explorer se poate specifica culoarea unei linii orizontale prin adaugarea atributului COLOR=nume_culoare.

Lucrul cu liste

Daca se doreste crearea de liste multinivel este utila specificarea diverselor forme de notare pe diferite nivele. Consideram exemplul de mai jos

Introducere

1.Titlu

Autor
Institutie
Titlu provizoriu (max. 20 caractere)

2. Justificarea cercetarii

a.Ce? De ce?

b. Constatari

c. Concluzii

Corpul lucrarii

1 .Cercetari anterioare

2. Metode de cercetare utilizate

3. Rezultate, constatari

Concluzii

1.Implicatii

2. Directii viitoare de cercetare

Bibiografie

Listele ordonate au 2 extensii - TYPE ce specifica stilul de contor numeric utilizat, START -initializare contor cu valoare specificata diferita de cea implicita=1. Se poate utiliza una din cele 5 tipuri de contoare TYPE=A(litere mari alfabetice), a(litere mici alfabetice), I(cifre romane mari), i(cifre romane mici), 1(cifre arabe.)

Ex. <OL TYPE=A>

<LI> Introducere

<OL>

<LI> Titlu

<LI>Autor

<LI>Institutie

<LI>Titlu provizoriu (max. 20 caractere)

</OL>

<LI> Justificarea cercetarii

<LI>Ce? De ce?

<LI>Constatari

<LI>Concluzii

</OL>

<LI>Corpul lucrarii

<OL>

<LI>Cercetari anterioare

<LI>Metode de cercetare utilizate

<LI>Rezultate si constatari

</OL>

<LI>Concluzii

<OL>

<LI>Implicatii

<LI>Directii viitoare de dezvoltare

</OL>

<LI>Bibliografie

</OL>

Culori si imagini de fond

Culorile de fond se introduc prin marcajul BGCOLOR=nume_culoare sau BGCOLOR=#valoare_rgb iar imaginile de fond se specifica prin BACKGROUND=nume_fisier. Puteti specifica culorile printr-un triplet de valori numerice rosu-verde-albastru(RGB) de cite 2 cifre hexazecimale pentu fiecare. Urmatoarele doua tabele de mai jos cuprind valori tipice pentru culori uzuale ca valori hexa RGBsi culori tipice uzuale disponibile prin nume.

Valoare hexa culoare

Nume culoare uzuala

00 00 00

Black(negru)

FF FF FF

White(alb)

FF 00 00

Red(rosu)

00 FF 00

Green(verde)

00 00 FF

Blue(albastru)

FF FF 00

Yellow(galben)

FF 00 FF

Purple(violet)

00 FF FF

Aqua (verde marin)

Nume culoare

Culoare

AQUA

Albastru marin

BLACK

Negru

BLUE

Albastru

FUCHSIA

Violet deschis

GRAY

GREEN

Verde

LIME

Verde citron

MAROON

Maro

NAVY

Bleumarin

OLIVE

Verde oliv

PURPLE

Violet

RED

Rosu

SILVER

Argintiu

TEAL

Verde inchis

WHITE

Alb

YELLOW

Galben

Daca specificati o culoare acre nu poate fi afisata pe sistemul dvs. Programul de navigare va genera o culoare apropiata. E mai util sa specificati culorile prin valori hexa. Trebuie sa retineti faptul ca fiecare din cele trei culori de baza trebuie aleasa dintre valorile - 00,33,66,99,CC,FF

Modificare culoare text si legaturi

Pentru modificarea culorii textului si a locatiei dvs. Se utilizeaza atribute suplimentare ale marcajului BODY-TEXT,LINK,VLINK,ALINK (prezentate in tabelul Rezumat 8) care in general se utilizeaza aproape intotdeauna impreuna.

Ex.
<BODY BGCOLOR=#000000 TEXT=#FFFFFF LINK=yellow VLINK=red ALINK=green>

Derulare text cu controale specifice Internet Explorer

Controlul <MARQUEE> defineste un text care e afisat intr-o regiune animata a paginii Web. Utilizarea cea mai simpla este <MARQUEE>text ce trebuie animat</MARQUEE>.Acest control are multe atribute cel mai important fiind BEHAVIOR(comportare), ce poate fi specificat cu valorile: scroll(derulare) - face ca textul sa apara litera cu litera sa deruleze pe ecran apoi sa dispara si apoi sa reapara, slide(alunecare) - face ca textul sa alunece pe ecran si sa se opreasca in momentul in care atinge marginea opusa, alternate(alternat) - are ca efect balansarea textului inainte si inapoi in cadrul zonei animate.

Se poate specifica directia din care va fi derulat textul prin DIRECTION cu valorile posibile left si right.

Dimensiunea unui spatiu MARQUEE e definita prin atributele WIDTH(latime) si HEIGHT(inaltime) ce pot fi exprimate fie in pixeli fie in procente din dimensiunea ferestrei de afisare. Puteti specifica spatiul din jurul casetei animate prin HPACE si VSAPCE. BGCOLOR permite specificarea culorii unui spatiu MARQUEE.

Ex. <MARQUEE> WIDTH=75%>HTML nu e greu de invatat!</MARQUEE>

Alte 2 atribute utile sunt SCROLLAMOUNT care permite specificarea numarului exact de pixeli dintre fiecare afisare succesiva a textului animat si SCROLLDELAY care specifica numarul de milisecunde dintre fiecare reafisare a textului animat.

Audio integrat

Pentru a integra audio de fond puteti utiliza marcajul <EMBED> care este similar cu SRC, se va specifica sursa elementului, o latime si o lungime optionala impreuna cu orice atribut. In exemplul de mai jos se creaza un mic panou de control care va reda un fisier audio de tip WAV de indata ce pagina este incarcata in programul de navigare.

Ex. <EMBED SRC="furtuna.wav" WIDTH=145 HEIGHT=60>

Daca doriti ca panoul de control audio sa fie afisat dar redarea sa nu inceapa pana cand utilizatorul nu apasa butonul PLAY adaugati AUTOSTART=false in lista de atribute.

Mai exista un atribut HIDDEN=true pe care puteti sa il utilizati in marcajul <EMBED>. Alte atribute de interes sunt - CONTROLS ce poate primi valorile console sau smallconsole pentru a modifica aspectul panoului de redare, VOLUME ce poate fi pozitionat la o valoare intre 1(foarte incet) si 255(foarte tare), LOOP(redare ciclica) cu valorile true - reda clipul audio la nesfarsit si false - redarea se va face o singura data.

Exista trei formate audio uzuale ce sunt permise cu acest marcaj - fisiere cu secvente audio de tip WAV sau AU sau fisiere MIDI cu extensia MID. Daca sunteti interesat de fisierele MIDI puteti face o vizita la adresa http://www.midifarm.com.

Rezumat 8

Marcaj HTML

Marcaj inchidere

Semnificatie

</CENTER>

Centrare material din pagina

<HR

Linie orizontala

SIZE=x

Inaltime linie (pixeli)

WIDTH=x

Latime linie (pixeli sau procente)

NOSHADE

Elimina umbra liniei orizontale

ALIGN=aliniere

Aliniere in pagina linie orizontala, valori posibile - left, center, right

COLOR=culoare

Culoare linie orizontala (nume culoare) - doar pt. Int. Explorer

<OL

Lista ordonata

TYPE=tip

Tipul numerotarii, valori posibile- A,a, I,i,1

START=x

Numar de inceput lista ordonata

<UL

Lista neordonata

TYPE=forma

Forma marcaj, valori posibile - circle, square, disc

<BODY

</BODY>

Corp document

BGCOLOR=culoare

Culoare de fond pagina

TEXT=culoare

Culoare text din pagina

LINK=culoare

Culoare legatura nevizitata din pagina

VLINK=culoare

Culoare legatura vizitata din pagina

ALINK=culoare

Culoarea legaturii pe durata efectuarii unui clic

BACKGROUND=url

Imagine grafica de fond pentru pagina

<MARQUEE

</MARQUEE>

Control de derulare marquee - doar Int. Explorer

BEHAVIOR=opt

Comportatrea controlului marquee

DIRECTION=opt

Directia de derulare control marquee- left, right

HEIGHT=x

Inaltime control marquee

WIDTH=x

Latime control marquee

HSPACE=x

Spatiu suplimentar orizontal in jurul controlului marquee

VSAPCE=x

Spatiu suplimentar vertical in jurul controlului marquee

BGCOLOR=culoare

Culoarea de fond a controlului marquee

SCROLLAMOUNT=x

Cantitatea de material adaugata in unitatea de timp(pixeli)

SCROLDELAY=x

Intarzierea dintre afisarile controlului marquee (milisecunde)

<EMBED

Integreaza un clip audio intr-o pagina Web

SRC=url

Sursa fisier audio

WIDTH=x

Latime panou de control (daca e cazul)

HEIGHT=x

Inaltime panou de control (daca e cazul)

HIDDEN=valoare

Daca valoare=True panoul de control nu apare

CONTROLS=opt

Tipul afisarii panoului de control (console sau smallconsole)

VOLUME=x

Specificare volum sunet redat (0-255)

LOOP=x

Numarul de repetari ale clipului audio

<BGSOUND

Sunet de fond - doar pt. Int.Explorer

RSC=url

Sursa fisier audio

LOOP=opt

Numar repetari clip audio

9. Formulare si introducerea datelor de la utilizator

Formulare HTML

Formularele HTML sunt delimitate de marcajul <FORM> cu corespondentul sau </FORM> care se specifica prin <FORM ACTION=url METHOD=metoda>, unde url-ul indica fisierul sau aplicatia aflata la distanta care urmeaza sa prelucreze informatiile iar metoda se specifica prin GET sau POST. Pentru formularele Web exista 2 metode prin care informatiile pot fi transmise de la programul de navigare Web la server-ul din celalalt capat al retelei. Daca se transmit informatii cuprinse intr-un formular iar URL-ul de destinatie include informatiile pe care le-ati introdus, metoda utilizata este GET. Cealalta metoda este POST si este aceea cind se transmite informatia dar URL-ul de destinatie nu contine elemente suplimentare adaugate la sfarsit.

Marea majoritate a campurilor unui formular destinate introducerii datelor se specifica prin intermediul marcajului <INPUT> care are atribute diferite - prezentate in Rezumat 9.

Programele e navigare Web curente permit lucruri cu difertite tipuri de (<INPUT>) fiecare dintre ele determinand un tip diferit de iesire, tipurile de intrari utilizator sunt:

TEXT - este tipul stabilit cu SIZE utilizat la specificarea maarimii prestabilite a casetei ce se creaza

PASSWORD - camp de text datele utilizatorului fiind afisate cu asteriscuri sau alte simboluri , pentru securitate, se poate utiliza MAXLENGTH pentru a se specifica lungimea maxima de caractere pentru parola

CHECKBOX - asigura o singura caseta de validare, optiune CHECKED permite specificarea marcarii sau nu a a cesteia in mod prestabilit, optiunea VALUE specifica textul asociat casetei de validare

HIDDEN - permite transmiterea informatiilor programului care prelucreaza datele utilizator fara ca utilizatorul sa le vada pe ecran, utila cand pagina ce contine formularul HTML este generata automat de un script CGI.

FILE - permite utilizatorului sa transmita serverului un fisier, care poate fi specificat prin nume sau ales utilizand buton Browse.

RADIO - afiseaza un buton cu interblocare, butoanele cu interblocare diferite cu acelasi NAME=valoare sunt grupate in mod automat si un singur buton poate fi selectat

Cele mai importante tipuri <INPUT> t:

SUBMIT - detremina aparitia unui buton in formular care atunci cind e apaat transmite continutul formularului la server

IMAGE - identic cu SUBMIT dar in locul butonului puteti specifica o imagine grafica pentru transmisie date sau un buton de Enter

RESET - permite utilizatoilor stergerea continutului tuturor campurilor formularului

Marcajul <SELECT> este un meniu derulant de optiuni iar parametrul <OPTION> defineste fiecare optiune a meniului. Pentru toate marcajele utilizate in cadrul formularelor trebuie specificat parametrul NAME si toate numele trebuie sa fie unice in carul fiecarui formular. In cadrul marcajului <SELECT> parametrul SIZE se utilizeaza pentu indicarea numarului de articole de meniu ce vor fi asisate odata, iar parametrul MULTIPLE specifica dreptul utilizatorilor de a selecta mai mult de o optiune. Daca exista o valoare prestabilita trebuie adaugati SELECTED iar marcajul <OPTION> indica acea valoare.

Marcajul <TEXTAREA> permite construirea unei casete de intrare pe multiple. Acest marcaj permite definirea dimensiunii casetei de intrare de tip text prin ROWS si COL.

Daca doriti sa creati un formular prin intermediul caruia vizitatorii sa va paota transmite mesaje prin posta electronica puteti utiliza un formular ca si cel de mai jos:

<B>Va rugam transmiteti-ne parerea dumneavoasta despre site-ul nostru</B>

<P>

<P>

<P>

<B>Comentarii:</b><BR>

</TEXTAREA>

<P>

</FORM>

Daca doriti sa utilizati o imagine grafica pe post de buton de transmisie se poate utiliza INPUT TYPE=image si specificati imaginea dorita. Butonul de reinitializare trebuie sa fie nelipsit din orice formular!Exemplul e mai jos include un grup de butoane cu interblocare si un meniu derulant.

<B>Va rugam transmiteti-ne parerea dumneavoasta despre site-ul nostru</B>

<P>

<P>

<P>

<B>Ati aflat despre site-ul nostru din:</B>

<OPTION SELECTED>(alegeti o optiune)

<OPTION>Yahoo

<OPTION>HotBot

<OPTION>PC Magazine

<OPTION>CNN On Line

<Option>Other.

</SELECT>

<B>Varsta:</B>

<INPUT TYPE=radio Name=varsta VALUE="copil"> sub 18

<INPUT TYPE=radio Name=varsta VALUE="tanar"> 18-30

<INPUT TYPE=radio Name=varsta VALUE="30plus"> 30-50

<INPUT TYPE=radio Name=varsta VALUE="batran"> peste 50

<P>

<B>Comentarii:</b><BR>

</TEXTAREA>

<P>

</FORM>

Marcajul <SELECT> construieste meniul derulant iar setul de butoane e specificat prin INPUT TYPE=radio. Fiecare buton dispune de acelasi nume deci fac parte din aceeasi familie si numai unul dintre ele e selectat la un moment dat. Daca ar avea nume diferite s-ar putea selecta mai multe optiuni. Daca alegeti categoria 18-30, valoarea care va fi transmisa server-ului este varsta=tanar.

Marcajul <TEXTAREA> are diferite optiuni prima este NAME care e obligatorie, optiunile ROWS si COLS pentru dimensiune camp text rezultat. Optiunea WRAP semnifica faptul ca textul introdus de utilizator se va deplasa automat la linie noua cand textul ajunge la marginea din dreapta

Creare formular propriu

Cea mai obisnuita strategie pentru a crea formulare atractive este amplasarea acestor campuri intr-un tabel, lucru ce permite alinierea relativ usoara a tutror campurilor si casetelor de date de intrare.

Exemplul de mai jos prezinta o fereastra de conectare a unor agenti comerciali la locatia OrderEasy.

<BODY>

<IMG SRC='logo.gif'

<P>

<FONT size=7><B>Conectare agent comecial</B></FONT>

<P>

<B>Ca masura de securitate fiecare agent comercial trebuie sa se legimimeze cu numarul de agent care I-a fost atribut de administratorul Order Easy. Acest numar este de tipul 'p0502'. Aveti de asemenea nevoie de parola de acces la cont:

</B></FONT>

<P>

<TR>

<TD>Cod identificare agent:</TD>

</TR><TR>

<TD>Parola agent:</TD>

</TR>

</TABLE>

<P>

</CENTER>

</TD></TR>

</table>

</FORM></BODY>

Cautari usoare din propria pagina

Daca va conectati la pagina gazda Yahoo se poate vizualiza sursa HTML printre care si urmatoarea secventa ce defineste caseta de cautare ce e afisata in partea superoara a paginii. Secventa este urmatoarea:

<A href='http://search.yahoo.com/search/options'>Options</A>

</font>

</FORM>

Aceasta secventa o puteti utiliza in proriile pagini Web. De asemenea puteti utiliza si optiunile din exemplul de mai jos.

<FONT size=+3><B>Cautari on line?</B>

</FONT>

</CENTER>

Sunt multe locuri in care putei sa aveti acces on line la informatii din pagini Web specializate in cautarea pe domenii. Introduceti unul sau doua cuvinte cheie de cautare pentru a gasi informatia dorita!</B>

</BLOCKQUOTE>

<B>YAHOO</B>

</TD><TD VALIGN=center ALIGN=center>

<!-YAHOO -->

</FORM>

</TD></TR>

<B>EXCITE</B>

</TD><TD VALIGN=center ALIGN=center>

</FORM>

</TD></TR>

<B>InfoSeeK</B>

</TD><TD VALIGN=center ALIGN=center>

<!-InfoSeek -->

</FORM>

</TD></TR>

<B>ALTAVISTA</B>

</TD><TD VALIGN=center ALIGN=center>

<!-altavista -->

<input type=submit value='Search'

</FORM>

</TD></TR>

</TABLE>

</CENTER>

</BODY>

Daca analizati cu atentie programul observati ca multe dintre optiuni dispun de informatii suplimentare ascunde (hidden) care se transmit impreuna cu restul informatiilor.

Rezumat 9

Marcaj HTML

Marcaj inchidere

Semnificatie

<FORM

</FORM>

Formular interactiv HTML

Action=url

Programul CGI de pe serverul care receptioneaza datele

METHOD=metoda

Modul in care sunt transmise datele server-ului (GET sau POST)

<INPUT

Camp de text sau alte date de intrare

TYPE=optiune

Tipul campului de intrare INPUT, valori posibile - text, password, checkbox, hiden, file, radio, submit, reset, image

NAME=nume

Nume simbolic pentru valoarea campului

VALUE=valoare

Continut prestabilit al campului de text

CHECKED=optiune

Buton/caseta marcata in mod prestabilit

SIZE=x

Numar de caractere camp de text

MAXLENGTH=x

Numar maxim de caractere acceptate

</SELECT>

Grup de casete de validare

NAME=nume

Nume simbolic al valoarii campului

SIZE=x

Numarul de articole de meniu ce se afiseaza odata (prestabilit=1)

MULTIPLE

Permite selectia unor articole de meniu multiple

<OPTION

Alegere particulara intr-un domeniu <SELECT>

VLUE=valoare

Valoarea rezultanta a acestei selectii

<TEXTAREA

</TEXTAREA>

Camp de intrare de tip text pe linii multiple

NAME=nume

Nume simbolic al valoarii campului

ROWS=x

Numarul de linii al casetei de text

COLS=x

Numarul de coloane (caractere) pe linie al casetei de text

10. Facilitati noi HTML

Marcajul Q

Acest marcaj e o varianta a marcajului <BLOCKQUOTE> si este utilizata in cazul citatelor mici ce nu impun un delimitator de paragraf.

Ex. Mutarea in casa cea noua a decurs normal cum spunea si cel mic

<Q>Chiar suntem aici?</Q

ceea ce spunea in putine cuvinte totul

Marcare editari cu INS si DEL

Perechea de marcaje <INS> si <DEL> permit marcarea unor modificari de editare efectuate in text. Marcajele au doua atribute CITE=url care indica un document ce explica de ce a fost modificata pagina curenta si DATETIME=valoare care specifica data si ora modificarii documentului. Formatul lui DATETIME este YYYY-MM-DDThh:mm:ssTYD unde YYYY - anul, MM -luna, DD -ziua, hh - ora, mm -minutul, ss -secunda, TZD -ora locala.

Marcajul OBJECT

Este un marcaj important care tinde sa inlocuiasca marcajul <APPLET> pentru includerea programelor Java. Marcajul OBJECT este utilizat practic pentru includerea oricarui tip de informatie. Exista forte multe atribute ce pot fi specificate in nacest marcaj inclusiv cele ale marcajului IMG. Dar in primul rand marcajul OBJECT socilita un atribut CLASSID.

Ex. <OBJECT CLASSID=someurl></OBJECT>

Informatiile pe care programele de navigare nu le pot executa (vizualiza sau reda) in cazul utilizarii marcajului OBJECT se poate specifica valoarea aternativa. Marcajul OBJECT e mai special si permite specificarea unei secvente de tipuri de obiecte, programul de navigare trecand de la cel exterior la cel interior incercand sa gaseasca ceva de afisat.

Ex. <OBJECT Title="Pamantul vazut din spatiu" Classid=someurl.py>

O imagine a Pamantului !

</OBJECT>

Programul incearca sa execute programul Python, daca nu reuseste filmul MPEG sau daca nu imaginea pamant.gif, daca nu reusete nici in acest caz se va afisa textul - O imagine a Pamantului. Atributul Title este destinat programelor de navigare alternative mai ales pentru cei cu handicap vizual.

Exista un marcaj asociat care permite specificarea parametrilor de executie acesta e <PARAM> el este de forma name= si valoare= si se poate utiliza astfel:

Ex. <OBJECT classid=unurl.py>

Veti vedea o bila saltareata daca puteti utilia aplicatia Python

</OBJECT>

Se poate specifica direct si tipul de cod pentru a ne asigura ca numai programele de navigare ce pot afisa asa ceva vor pierde timpul cu incarcarea lor.

Ex. <OBJECT classid="java:program.start"

Codetype="application/octet-stream" >

</OBJECT>

Un alt lucru interesant este utilizarea atributului declare pentru a detalia ce si unde fara a incarca programul efectiv sau obiectul. In cadrul codului ce urmeaza se va specifica o referinta catre un obiect si momentul in care sa se incarce.

Ex. <OBJECT declare

Id="earth"

data="earth.mpeg"

type="application/mpeg"

Urmariti un film interesant despre Pamant >

</OBJECT>

Cand doriti sa urmariti filmul nu trebuie decat sa

<A href=#earth>il porniti</A>

Puteti utiliza marcajul OBJECT pentru a inlocui orice marcaj IMG. Acest lucru se poate obseva in doua moduri diferite prezentate mai jos.

<IMG SRC=sample.gif ALT="O imagine a produsului nostru"

height=120 width=120 id=5 vspace=5>

<OBJECT data="sample.gif" type="image/gif" height=120

width=120 id=5 vspace=5>O imagine a produsului nostru

</OBJECT>

Cu ajutorul marcajul OBJECT se poate include efectiv un alt program HTML in propria pagina. Acest lucru se realizeaza astfel:

<OBJECT > data="antet.html</OBJECT>

Se poate dispune astfel de un antet, titlu sau subsol de pagina ce pot fi incluse in alte pagini. Dar in acelasi timp de poat einclude orice formular HTML din orice locatie Web ca parte componenta a locatiei dvs. Deci puteti realiza ceva de genul:

<H1>Aici e Yahoo:</H1>

<H1>Aici e Excite:</H1>

<H1>Aici e HotBot:</H1>

Pasii ce trebuie parcursi pentru implementarea unei pagini Web

Stabilirea conceptului

Pas 1 - Stabilire scop

Pas 2 - Schitare continut

Pas 3 - Alegere structura site Web

Constructia paginii

Pas 4 - Cod, previzualizare, revizuire

Pas 5 - Adaugare legaturi interne si externe

Pas 6 - Optimizarea pentru cei mai lenti utilizatori preconizati

Testarea

Pas 7 - Tastare si revizuire locatie de catre fiecare proiectant

Pas 8 - Solicitarea verificarii si de catre alte persoane

Incarcare fisier pe server Web

Pas 9 - pregatire fisier pentru server

Pas 10 - Verificare URL propriu

Pas 11- Verificari suplimentare si aprofundate

Anuntare pagina Web creata

11. Includere aplicatii Java Script si Java

Java Script

Acesta e un limbaj de programare de tip script pentru definirea comportamentului elementelor dintr-o pagina Web. Java Script poate specifica in cateva randuri raspunsurile la actiuni sau evenimente cum ar fi deschiderea unei pagini, deplasarea mouse-ului intr-un anumit punct sau stergerea unui camp dintr-un formular.

Cea mai simpla aplicatie JavaScript esre cea care determina aparitia unui mesaj.

Ex. <HTML

<HEAD>

<!-- exemplu JavaScript

alert('Doriti sa vizualizati pagina?')

//sfarsit script -->

</SCRIPT>

</HEAD>

Click pe "OK" te-a adus aici!

</BODY>

</HTML>

Daca observati atent acest script e incadrat de cele doua marcaje <SCRIPT> si </SCRIPT> totul fiind inglobat intr-un comentariu astfel incat programele de navigare care nu interpreteaza JavaScript nu sunt derulate de scriptul in sine.

Programul urmator modifica ceea ce este afisat in linia de stare a programului dvs. de navigare in functie de zona in care se deplaseza mouse-ul.

Ex. <HTML>

<FONT SIZE=6>Evenimente JavaScript - <B>onMouseOver</B></FONT><BR>

<I>muta mouse-ul cu doua linii mai jos<BR>

si urmareste linia de stare din partea inferioara a programului de navigare</I>

</CENTER>

<P>

<A HREF="javaspt2.html"

onmouseover="self.status='nu aveti nici o stare dar aveti bananane!'; return true">

muta mouse-ul aici</A>

<P>

<A HREF="javaspt2.html"

onmouseover="self.status='nu primiti banane, a fost o gluma!'; return true">

dar mai bine muta mouse-ul aici</A>

</BODY>

</HTML>

JavaScript permite gestionarea diferitelor evenimente. In tabelul de mai jos sunt prezentate evenimentele de tip script din JavaScript.

Eveniment

Momentul desfasurarii

Handler eveniment

Blur

Utilizatorul elimina controlul de intrare de pe un element de formular

onBlur

Click

Utilizatorul executa un clic pe un element al unui formular sau pe o legatura

onClick

Change

Utilizatorul modifica valoarea unui text, a unei zone de text sau element de selectare

onChange

Focus

Utilizatorul atribuie unui element de formular control de intrare

onFocus

Load

Utilizatorul incarca pagina in programul de navigare

onLoad

Mouseover

Utilizatorul deplaseaza indicatorul de mouse deasupra unei ancore sau legaturi

onMouseOver

Select

Utilizatorul selecteaza campul de intrare al unui element de formular

onSelect

Submit

Utilizatorul transmite un formular

onSubmit

Unload

Utilizatorul abandoneaza pagina

onUnload

Puteti gasi manuale despre JavScript on line de exemplu ghidul JavaScript la Netscape - http://developer.netscape.com/library/doumentation/communicator/jsguide4/index.html. Alte locatii interesante care ofera astfel de informatii sunt: http://www.calpoly.edu/~dpopeney/javascript.html, http://javascript.developer.com, http://www.geocities.com/siliconvalley/7116

Java

Referirea microaplicatiilor Java se poate realiza utilizand marcajul APPLET sau OBJECT. Marcajul OBJECT are multi parametri, cel mai important este classid care specifica numele exact al aplicatiei dorite.

Ex. <OBJECT codetype="application/octet-stream"

classid="java:DrawStringApplet.class" width= height=100>

</OBJECT>

Puteti utiliza si marcajul APPLET caz in care exemplu anterior devine:

Ex. <APPLET code="DrawStringApplet.class" width= height=100></APPLET>

Pentru a transmite informatii unei microaplicatii Java inainte ca aceasta sa fie executata se va utiliza marcajul PARAM .

Ex. <P>

<OBJECT codetype="application/octet-stream"

classid="java:drawstringapplet.class" width=200 height=200>

Text ce trebuie afisat daca OBJECT nu este incarcat

</OBJECT>

Este mult mai util sa se utilizeze marcajul OBJECT deoarece s tinde spre eliminarea marcajului APPLET.

Rezumat 11

Marcaj HTML

Marcaj inchidere

Semnificatie

<SCRIPT

</SCRIPT>

Include un script de obicei JavaScript in pagina Web

LANGUAGE=limbaj

Limbaj utilizat de script

EVENT=eveniment

Eveniment ce declanseaza executia unor scripturi specifice

FOR=numeobiect

Numele obiectului din pagina asupra caruia actioneaza scriptul

<OBJECT

</OBJECT>

Include un obiect arbitrar in pagina

CODETYPE=optiune

Tipul obiectului -ex.application/octet-stream

CLASSID=url

Identifica obiectul sau clasa de obiecte (numai pentru Java)

WIDTH=x

Latimea spatiului din pagina necesar pentru un obiect

HEIGHT=x

Inaltimea obiectului in pagina

<PARAM

Parametrii transmisi marcajului OBJECT

NAME=nume

Numele parametrului

VALUE=str

Valoarea parametrului cu numele speciicat

12. Formulare avansate

O alta valoare pentru TYPE din cadrul marcajului INPUT este BUTTON. Practic acest tip este un buton de uz general pentru o pagina Web, care nu este asociat unui script asa cum are nevoie evenimentul click care trebuie definit de un script local.

Rezumat 12

Marcaj HTML

Marcaj inchidere

Semnificatie

<INPUT

TYPE=button

Buton de uz general

OnClick=s

Script ce se executa cand se face un clic de buton ( un script JavaScript de obicei)

<LABEL

</LABEL>

Eticheta asociata unui element de formular

FOR=s

Specifica elemetul asociat etichetei (folositi ID=s in cadrul elementului)

<FIELDSET

</FIELDSET>

Imparte formularul in parti logice

ALIGN=s

Specifica alinierea legendei (explicatiei) afisate - top, bottom,left, right

TABINDEX=x

Specifica ordinea elementelor cand utilizatorul apasa tasta TAB

ACCESSKEY=c

Specifica tasta care asigura comanda rapida de la tastatura asociata unui element

DISABLED

Element inactiv, dar afisat pe ecran

READONLY

Element afisat pe ecran dar nu poate fi editat

Documente similare

biologie

botanica

Upload!

Trimite cercetarea ta!
Trimite si tu un document!
NU trimiteti referate, proiecte sau alte forme de lucrari stiintifice, lucrari pentru examenele de evaluare pe parcursul anilor de studiu, precum si lucrari de finalizare a studiilor universitare de licenta, masterat si/sau de doctorat. Aceste documente nu vor fi publicate.