Scribd Logo
Upload

Welcome to Scribd!

  • Pagini Web Cu HTML 3.2 I

    Uploaded by

    cristeobar
    2 views6 pages

    Original Title

    Pagini Web Cu HTML 3.2 i

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    2 views6 pages

    Pagini Web Cu HTML 3.2 I

    Uploaded by

    cristeobar

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as DOC, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    Pagini WEB cu HTML 3.

    2 (I)
    Mihai Scoraru Vrei s transmitei cartea de vizit, fotografia, hobby-urile i multe altele lumii ntregi? Soluia este simpl! Nu v trebuie dect un calculator conectat la Internet, cteva cunotine privind HTML... adic trebuie s citii articolul care urmeaz. Cteva date istorice Cu mai muli ani n urm, mai muli oameni de tiin s-au gndit c ar fi bine ca cele mai importante reele de calculatoare s fie conectate ntre ele. Rezultatul a fost apariia "mamei tuturor reelelor", numit acum Internet. Pn n anul 1990 accesarea informaiilor de pe Internet era foarte dificil i reeaua nu era folosit dect de un grup restrns de oameni de tiin. Fizicianul Tim Berners-Lee a devenit celebru datorit faptului c a "inventat" link-urile (legturi, referine) hypertext. Dei aceast idee nu era nou, ea a dus la dezvoltarea unui limbaj simplu care s-a impus pn la urm ca standard. Tim Berners-Lee a numit acest limbaj Hypertext Markup Language, cunoscut sub denumirea prescurtat de HTML. Noiunea de hypertext nseamn text pstrat n format electronic cu link-uri ntre pagini. n anul 1993 n jur de 100 de calculatoare din lumea ntreag erau echipate pentru a gzdui pagini HTML. Aceste pagini interconectate au fost "poreclite" World Wide Web. Nu mult timp dup aceea au nceput s fie scrise primele browsere Web cu ajutorul crora puteau fi vizualizate pagini Web care conineau text i imagini. La ora actual paginile Web pot fi vizualizate i cu ajutorul televizorului, dar nc nu pot fi concepute fr ajutorul unui calculator. n funcie de versiunea HTML folosit, paginile Web sunt grupate n trei "generaii". Paginile din prima generaie, care foloseau HTML 1.0, conin n cea mai mare parte text i o imagine sau dou ataate textului. A doua generaie de pagini Web, proiectate cu ajutorul versiunii HTML 2.0, permite adugarea unui fundal, aranjarea textelor n tabele i posibilitatea de a comanda un produs prin intermediul Internetului (comand on-line). A treia generaie de pagini Web folosete versiunea HTML 3.2 care a devenit standardul pentru proiectarea paginilor Web. Aceste pagini pot conine culori definite de utilizator, secvene animate, sunete etc. Unelte necesare pentru crearea i vizualizarea paginilor Web Pentru a crea i vizualiza pagini Web este nevoie de un calculator conectat la Internet, un editor de texte i un browser Internet. Pentru a putea lucra n condiii acceptabile, v recomandm s folosii un calculator Pentium MMX la 166 MHz sau unul cu o configuraie superioar. Legtura Internet ar trebui s fie printr-un modem care s aib o vitez de 56 Kbps (Kilobii pe secund) pentru a asigura o ncrcare mai rapid a paginilor de pe Internet. 90% dintre cei care navigheaz pe Internet folosesc unul dintre browserele Netscape Navigator sau Internet Explorer aa c, este recomandabil ca ambele s fie prezente pe calculatorul dumneavoastr. Ele pot fi preluate gratuit de pe Internet de la adresele: http://home.netscape.com, respectiv http://www.microsoft.com. Codul HTML poate fi editat cu ajutorul oricrui editor de texte care permite salvarea fiierului n format TEXT. Pentru a vizualiza o pagin Web trebuie s folosii comanda Open din meniul File al browserului Internet pe care l folosii. n fereastra de dialog care va aprea trebuie ales fiierul care conine codul HTML corespunztor. Elemente de baz pentru un fiier HTML Un fiier HTML conine pe lng simplul text care va aprea n pagin i anumite comenzi speciale, numite tag-uri. Fiierele HTML trebuie salvate ntotdeauna cu extensia .htm sau .html dac v permite sistemul de operare. Un tag este o comand folosit pentru a indica modul de afiare a unei pagini Web. Tag-urile sunt cuvinte care ncep cu simbolul "<" i se termin cu simbolul ">". Majoritatea tag-urilor au dou pri, prima, numit opening tag indic unde ncepe fragmentul asupra cruia trebuie aplicat comanda iar a doua parte, closing tag
    1

    arat sfritul fragmentului. Closing tag-urile se disting de opening tag-uri prin faptul c imediat dup simbolul "<" apare simbolul "/". Fiecare fiier HTML trebuie s conin tag-ul <HTML> care arat c respectivul fiier descrie ntr-adevr o pagin Web. Deci orice astfel de fiier ncepe cu <HTML> i se ncheie cu </HTML>. O pagin Web trebuie s aib un antet, acesta fiind precizat n tag-ul <HEAD>; evident sfritul antetului este marcat de </HEAD>. De obicei singurul lucru coninut n antet este titlul paginii Web, titlul precizat ntre <TITLE> i </TITLE>. Dup antet urmeaz pagina Web propriu-zis, descrierea ei fiind cuprins ntre <BODY> i </BODY>. Primul exemplu va fi clasicul "Hello World!". O pagin Web care afieaz un astfel de mesaj arat astfel: Pentru a afia acest mesaj ntr-o pagin Web avei nevoie de urmtorul fiier HTML: <HTML> <HEAD> <TITLE> Hello World! </TITLE> </HEAD> <BODY> Hello World! </BODY> </HTML> Trebuie precizat c n HTML caracterele albe sunt folosite ca separatori. Astfel unul sau mai multe astfel de caractere consecutive sunt tratate ca un singur caracter alb. De exemplu pagina Web corespunztoare fiierului HTML care urmeaz, este identic cu pagina Web anterioar: <HTML> <HEAD> <TITLE> Hello World! </TITLE> </HEAD><BODY> Hello World!</BODY> </HTML> Crearea de paragrafe i trecerea la o linie nou Aa cum am spus caracterele albe sunt practic ignorate de browserul care afieaz o pagin Web, de aceea avem nevoie de comenzi speciale pentru a trece la o linie nou. Cea mai folosit astfel de comand este <BR> care nu face altceva dect s informeze browserul c textul care urmeaz va fi afiat pe o linie nou. O alt comand folosit pentru aceast operaie este <HR>. Diferena dintre cele dou tag-uri este c cea de-a doua deseneaz n plus o linie ntre cele dou linii de text desprite de <HR>. Comanda <P> are ca efect tratarea textului care urmeaz dup ea ca un paragraf nou. Singura diferen real dintre <P> i <BR> este c <P> afieaz n plus o linie vid, menit s separe paragrafele. Pentru comanda <P> closing tag-ul este opional, un paragraf ncheindu-se evident atunci cnd ncepe unul nou. Comenzile <HR> i <BR> nu au closing tag-uri. n continuare v prezentm fiierul HTML pentru o pagin Web care ar conine o poezie n care fiecare vers trebuie afiat pe o linie, iar strofele reprezint paragrafe: <HTML> <HEAD> <TITLE> Sprites </TITLE> </HEAD> <BODY> I once found a sprite, <BR> Like the Sun she was bright, <BR> One poor little creature <BR> Vanished in the future. <P> Eight centuries later <BR> You will find my shelter, <BR> Only when your light <BR> Understands my night. <P> Generations pass, <BR> And only when the grass <BR>
    2

    Brings to you my fear <BR> Real things disappear. <P> I have lost my way <BR> Even if one day <BR> Looking at the ground <BR> Another sprite I found. </BODY> </HTML> Titluri De obicei titlurile din documente apar mai mari i mai ngroate dect restul cuvintelor. n HTML exist mai multe tag-uri care arat c un anumit text va fi afiat ca un titlu. Acestea sunt <H1>, <H2>, <H3>, <H4> etc. Toate acestea au aceeai sintax, deci ajunge s ne ocupm numai de una din ele. De exemplu prima dintre ele face ca textul cuprins ntre <H1> i </H1> s fie tratat ca un titlu. Titlul va fi afiat ca un nou paragraf i textul ce urmeaz va fi i el considerat un nou paragraf. Diferena dintre <H1>, <H2> i restul tag-urilor de acest tip este mrimea fontului cu care este afiat titlul. Pentru un titlu mare trebuie folosit <H1>, titlurile corespunztoare celorlalte avnd dimensiuni tot mai mici. n practic nu se folosesc dect <H1>, <H2> i uneori <H3>, celelalte afind titluri cu dimensiuni prea mici pentru ca acestea s arate ca nite "adevrate" titluri. Dac dorim ca titlul poeziei anterioare s apar i n pagin, nu numai n bara de titlu, trebuie s adugm la nceputul corpului: <H2> Sprites </H2>. Efectul poate fi observat n imaginea urmtoare: Link-uri hypertext Link-urile hypertext sunt legturi ntre paginile Web care permit trecerea de la o pagin la alta. Faptul c unul sau mai multe cuvinte alturate din text reprezint un link este evideniat de browser prin sublinierea acelor cuvinte i afiarea lor cu o alt culoare (albastru). Dac vei muta cursorul deasupra cuvintelor ce marcheaz un astfel de link vei observa c acesta ia forma unei mini. Apsnd butonul stng al mouse-ului n acea zon vei comanda browserului s treac n zona corespunztoare acestui link. Aceast zon poate fi o alt pagin sau o anumit poziie din actuala pagin. Pentru a crea un link la o alt pagin Web trebuie s folosii tag-ul <A> care are urmtoarea sintax: <A HREF=nume_pagin> text_tag </A> Un exemplu de folosire a acestui tag este: <HTML> <HEAD> <TITLE> Exemplu link </TITLE> </HEAD> <BODY> ... pentru versiunea in limba engleza <A HREF = "english.htm"> apasati aici! </A> for the english version <A HREF = "english.htm"> click here! </A> ... </BODY> </HTML> Dac fiierul ENGLISH.HTM nu se afl n directorul curent sau nu este un fiier HTML atunci la selectarea unuia din cele dou link-uri va fi afiat un mesaj de eroare i pagina curent nu va fi schimbat. Dac se dorete ca legtura s se fac la un fiier care se afl pe un alt calculator atunci trebuie precizat ntreaga adres URL (Uniform Resource Locators), adic numele serverului, urmat de calea pn la fiierul dorit. <A HREF="http://www.microsoft.com/guests/ welcome.html"> Apsai aici! </A>
    3

    Pentru a face salturi la o anumit poziie din aceeai pagin sau la o poziie anume dintr-o alt pagin se folosete atributul NAME al tag-ului <A> pentru a marca acel loc: de exemplu <A NAME = "pozitia1"></A>. Pentru ca un link s fac un salt la aceast poziie din aceeai pagin trebuie ca n fiierul HTML s fie scris: <A HREF="#pozitia1"> Apasati aici pentru pozitia 1 </A>. Pentru ca link-ul s fac un salt la o poziie oarecare din alt pagin comanda HTML corespunztoare este: <A HREF="altapagina.html#pozitia1"> Apasati aici pentru pozitia1 din alta pagina </A>. Se recomand ca o pagin lung s aib n interiorul ei mai multe link-uri care s duc la nceputul paginii. Nu este permis s nu avei un astfel de link ntr-un spaiu care depete 2 ecrane. Este posibil crearea unor link-uri speciale care permit trimiterea unui mesaj e-mail la o anumit adres. Pentru ca navigatorul s poat trimite un e-mail la o numit adres linia HTML trebuie s arate astfel: <A HREF="mailto:office@ginfo.ro"> Trimiteti un mesaj pe adresa redactiei </A>. Cnd acest link este selectat, browser-ul va deschide o fereastr care va permite trimiterea unui mesaj e-mail. Formatarea textelor Pentru a scrie texte n format bold folosii tagul <B>, iar pentru texte n format italic tagul <I>. Textul cuprins ntre <B> i </B>, respectiv <I> i </I> va fi afiat ca bold sau italic. Putei folosi i o combinaie a acestor dou taguri astfel: <B><I> TEXT </I></B> Rezultatul va arta cam aa: TEXT. Formatul bold nu poate fi aplicat titlurilor deoarece ele sunt deja ngroate. Tag-ul <B> are ca echivalent tagul <STRONG>, iar tag-ul <I> are ca echivalent tag-ul <EM>. Tag-ul <SMALL> are ca efect micorarea dimensiunii caracterelor asupra crora are efect. Tag-ul pereche este <BIG> care mrete dimensiunea caracterelor. Tag-ul <SUP> are ca efect afiarea textului corespunztor ca indice superior. Tag-ul pereche este <SUB>, acesta avnd ca efect afiarea caracterelor ca indice inferior. Tag-ul <STRIKE> are ca efect desenarea unei linii peste text, iar tag-ul <U> determin sublinierea textului. Tag-ul <TT> are ca efect schimbarea fontului pentru textul respectiv la Courier New. Tag-ul <PRE> informeaz browserul c pentru textul respectiv caracterele albe nu mai sunt ignorate. Fontul este schimbat la Courier New. Urmtorul fiier HTML ilustreaz efectul acestor noi tag-uri. <HTML> <HEAD><TITLE> Exemplu </TITLE></HEAD> <BODY> <STRONG> BOLD </STRONG> <BR> <EM> ITALIC </EM> <BR> <TT> COURIER NEW </TT> <BR> <SMALL> MIC </SMALL> MEDIU <BIG> MARE </BIG> <BR> <U> SUBLINIAT </U> <BR> <STRIKE> TAIAT </STRIKE> <PRE> SPATIILE NU SUNT IGNORATE DE BROWSER </PRE> a<SUB>n</SUB> = 2<SUP>n</SUP> </BODY> </HTML> Pagina Web corespunztoare ar arta astfel: Alinierea textelor Unele tag-uri, dup cum s-a vzut, permit specificarea unor opiuni speciale. Pentru a alinia textul, mai multe tag-uri accept atributul ALIGN care permite alinierea textelor. Cel mai des folosit n acest scop este tag-ul <P>. Urmtoarele linii arat modul n care este folosit acest tag pentru ca textul din respectivul paragraf s fie aliniat la stnga, la dreapta sau centrat:
    4

    <P ALIGN = "center"> text </P> <P ALIGN = "left"> text </P> <P ALIGN = "right"> text </P> Atributul ALIGN poate fi folosit si cu tag-urile <H1>, <H2> etc. Pentru a seta alinierea textului pentru mai multe paragrafe sau titluri se poate folosi tag-ul <DIV> cu atributul ALIGN. Tag-ul <DIV> se numete division dar nu are nici un efect n versiunea HTML 3.2. Mai exist tag-ul <CENTER> pentru centrarea textelor, dar acesta a fost eliminat n mod oficial din standardul HTML i nu se recomand folosirea lui deoarece versiuni viitoare ale browserelor s-ar putea s nu l mai recunoasc. Setarea caracteristicilor fonturilor Pentru a seta caracteristicile fonturilor se folosete tag-ul <FONT> care admite numeroase atribute. Atributul SIZE definete mrimea caracterelor. El poate lua valori de la 1 (foarte mic) la 7 (foarte mare), valoarea normal fiind 3. Atributul COLOR poate primi ca valori una din culorile standard: black, white, red, green, blue, yellow, aqua, fuchsia, gray, lime, maroon, purple, navy, olive, silver sau real. Atributul FACE permite alegerea unui anumit font, font care va fi folosit pentru afiarea textului. Acest atribut va avea ca valoare o list de fonturi separate prin ", ", iar browserul va alege din aceast list primul font care exist instalat pe maina pe care este afiat pagina. De exemplu comanda: <FONT FACE = "ShelleyAllegro BT, Comic Sans MS"> Font </FONT> va avea ca efect: Font dac fontul ShelleyAllegro BT este instalat i Font n caz contrar. Se recomand ca n list s apar cel puin un font care se afl instalat pe majoritatea mainilor, aa cum a fost Comic Sans MS n acest exemplu. Comanda <BASEFONT> permite setarea mrimii fontului pentru tot textul care urmeaz. Comanda nu are un closing tag i nu permite alte atribute n afar de SIZE. Majoritatea fonturilor includ caractere speciale cum ar fi caracterele speciale din mai multe limbi europene, printre care i romna. De exemplu pentru a scrie cuvntul: Romnia n fiierul HTML trebuie s apar ceva de genul: Rom&#226nia. Aranjarea textului n liste Listele HTML sunt de trei tipuri: liste ordonate, liste neordonate i liste de definiii. Pentru a informa browserul c urmeaz o list ordonat se folosete tag-ul <OL>, pentru o list neordonat tag-ul <UL>. Fiecare element al acestei liste trebuie precedat de tag-ul <LI>. Lista de definiii este indicat de tag-ul <DL>, fiecare element care trebuie definit este precedat de tag-ul <DT>, iar fiecare definiie este precedat de tag-ul <DD>. Urmtorul exemplu arat modul n care sunt folosite cele trei tipuri de liste: <HTML> <HEAD> <TITLE> Exemplu liste </TITLE> </HEAD> <BODY> Cele trei tipuri de liste HTML sunt: <OL> <LI> ordonata <LI> neordonata <LI> de definitii </OL> Tag-urile HTML corespunzatoare acestor liste sunt: <UL> <LI> OL <LI> UL <LI> DL </UL> Definitii <DL> <DT> primul termen <DD> prima definitie pentru primul termen <DD> a doua definitie pentru primul termen
    5

    <DT> al doilea termen <DD> prima definitie pentru al doilea termen <DD> a doua definitie pentru al doilea termen <DD> a treia definitie pentru al doilea termen <DT> al treilea termen nu are definitii </DL> </BODY> </HTML> Pentru a crea liste imbricate nu trebuie dect s introducei o list n interiorul alteia. Browserul le va afia automat imbricate. n cazul listelor neordonate browserul va schimba i tipul caracterului afiat la nceputul rndului: astfel pentru primul nivel textul va fi precedat de o bulin plin, al doilea de un cerc iar pentru celelalte niveluri de imbricare de un ptrat plin. Efectul codului HTML n care sunt folosite trei tipuri de liste este urmtorul: Pentru listele ordonate exist posibilitatea de a preciza tipul elementelor care vor numerota lista cu ajutorul atributului TYPE al comenzii <OL>. Pentru TYPE="I" numerotarea se va face cu cifre romane; pentru TYPE="i" numerotarea se va face tot cu cifre romane, dar se vor folosi literele mici ale alfabetului; pentru TYPE="A" numerotarea se va face cu litere mari; pentru TYPE="a" numerotarea se va face cu litere mici. Poate fi precizat i valoarea de la care se va ncepe numerotarea cu ajutorul atributului START. Pentru START=6 numerotarea va ncepe, n funcie de valoarea atributului TYPE, cu 6, VI, vi, F, respectiv f. Exist i posibilitatea de a preciza pentru un anumit element al listei valoarea care l va preceda cu ajutorul atributului <VALUE> al tag-ului <LI>: <LI VALUE="12"> va face ca naintea liniei s apar 12, XII, xii, L sau l, n funcie de valoarea atributului TYPE. Pentru listele neordonate poate fi precizat tipul simbolului care va preceda elementele listei cu ajutorul atributului TYPE care poate lua valorile: "disc", "circle" sau "square". Poate fi parametru att al tag-ului <UL>, ct i al tag-ului <LI>. n cel de al doilea caz va avea efect numai asupra liniei curente.

    You might also like