Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Suport de Curs HTML 2010

    Încărcat de

    Ionut Tonegariu
    44 vizualizări19 pagini

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    DOC, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    44 vizualizări19 pagini

    Suport de Curs HTML 2010

    Încărcat de

    Ionut Tonegariu

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 19

    Prof.

    Bejinaru Romeo

    UTILIZAREA LIMBAJULUI HTML PENTRU CREAREA UNUI WEB-SITE 1. Structura unui document HTML
    Un document HTML este format dintr-un set de marcaje ( tag-uri ) sau controale HTML care transmit comenzi ctre browser pentru a afia pagina ntr-un anumit mod.Un tag de nceput <nume element> i un tag de sfrit </nume element> Orice document HTML ncepe cu notaia <html> i se termin cu notaia </html>. ntre cele dou marcaje <html> i </html> vom introduce dou seciuni: -seciunea de antet <head>...</head> -corpul documentului <body>...</body>. Blocul <body>...</body> cuprinde coninutul propriu-zis al paginii HTML, adic ceea ce va fi afiat n fereastra browser-ului. Un document HTML foarte simplu ar fi : <html> <head><title>index</title></head> <body> Prima pagina WEB </body> </html> Documentul se scrie n Notepad i apoi se salveaz n dosarul unde sunt toate documentele cu care se lucreaz pentru crearea paginii WEB. 1. Se creaz dosarul WEB, iar n acest dosar se mai creaz dosare cu numele imagini respectiv sunet, documentaie, pagini. 2. Se deschide Notepad astfel: START TOATE PROGRAMELE - ACCESSORII - Notepad 3. Se scriu comenzile de mai sus, se salveaz cu numele index .html n dosarul WEB 4. La deschiderea documentului index.html se activeaz automat browser-ul Internet Explorer i n fereastra lui apare scris Prima pagina WEB (ceea ce am scris n seciunea <body>............</body>) 5. Pentru modificarea paginii (schimbare aspect, introducere texte, imagini, etc) se activeaz meniul Vizualizare iar din acest meniu se activeaz comanda Surs moment n care se deschide Notepad cu documentul index.html , iar aici se fac modificrile dorite. 6. Pentru a vizualiza efectul modificrilor n bara de butoane a browser-ului Internet Explorer se activeaz butonul REMPROSPTARE aceste comenzi se scriu n Notepad

    2. Utilizarea culorilor in HTML.


    O culoare poate fi precizat n dou moduri: Printr-un nume de culoare.Sunt disponibile cel puin 16 nume de culori: aqua, black, fuchsia, gray, green lime, maroon, navy, olive, purple, red, silver, teal, white i yellow. n hexazecimal prin construcia " #rrggbb " unde r (red), g (green), sau b (blue) sunt cifre hexazecimale i pot lua valorile: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F; Cel mai des se utilizeaz literele C i F i cifrele 3, 6 si 9 n codurile de culori - grupa rr corespunde nuanei de ROU i ia valori de la 00 la FF -grupa gg corespunde nuanei de VERDE i ia valori de la 00 la FF -grupa bb corespunde nuanei de ALBASTRU i ia valori de la 00 la FF 00 este nuana cea mai inchis iar FF este nuana cea mai deschis Nuana NEGRU are codul 000000 iar nuana ALB are codul FFFFFF Exemple de coduri pentru culori: - nuane de rou: FF0000 ; FF0033 ; FF0066 ; CC0000 ; CC0066 ; 990000 ; 990033 - nuane de verde: 00FF00; 00CC00 ; 33FF00 ; 33CC00; 33FF66; 33CC66; 99FF99 -nuane de albastru: 0000FF; 0066FF; 00CCFF; 66CCFF; 3399FF; 99CCFF; 66FFFF - nuane de galben: FFFF00; FFFF99; CCFF33 1

    Prof. Bejinaru Romeo - alte nuane: FF00FF; CC00FF; 9900FF; 990099; 00FFFF; FFCCFF; CC6699; 660033 Codul unei culori este precedat de comanda COLOR n urmtoarele contexte: - pentru o culoare de fundal se utilizeaz comanda BGCOLOR= cod culoare - pentru culoarea fonturilor (literelor) se utilizeaz comanda FONT COLOR= cod culoare - pentru culoarea unui chenar se utilizeaz comanda BORDERCOLOR= cod culoare

    3. Personalizarea aspectului general al unei pagini


    Pentru a schimba i personaliza aspectul unei pagini WEB comenzile utilizate se scriu n tag-ul <BODY> care deja este scris in codul paginii realizate anterior. Prin personalizarea paginii se stabilete: - o culoare de fond sau o textur de fond - culoarea , tipul i marimea fonturilor utilizate n pagina respectiv - culorile legturilor hipertext cu alt pagin - poziionarea coninutului paginii Web fa de marginile ferestrei browserului Pentru fiecare aciune de modificare se utilizeaz o anumit comand care se scrie n tag-ul <BODY> astfel: <BODY BGCOLOR=cod culoare TEXT=cod culoare LINK=cod culoare VLINK=cod culoare ALINK=cod culoare LEFTMARGIN="100" TOPMARGIN="50"> - BGCOLOR - stabilete culoarea fundalului paginii Dac se dorete nlocuirea culorii de fundal cu o anumit textur in locul comenzii BGCOLOR se scrie comanda BACKGROUND="imagini/textur.gif" unde: textur.gif este numele fiierului de tip gif ce va fi folosit pentru fundalul paginii (care se afl n dosarul imagini ) - TEXT- stabilete culoarea textului din pagin (anumitor paragrafe din text li se pot schimba culoarea - vezi la Formatarea textului) - LINK - stabilete culoarea textului ce reprezint o legtur hipertext(implicit-albastru) - VLINK - stabilete culoarea legturii hipertext recent vizitate(implicit purpuriu) - ALINK - stabilete culoarea legturii hipertext in timpul accesrii acesteia Observaie!!! Comenzile LINK, VLINK, ALINK deocamdat NU le utilizm, se vor scrie n tagul <BODY> ulterior (dup ce se vor face legturi hipertext ntre pagini) - LEFTMARGIN - stabilete distana dntre marginea stnga a ferestrei browserului i marginea stnga a coninutului paginii (se utilizeaz opional) - TOPMARGIN - stabilete distana dntre marginea de sus a ferestrei browserului i marginea de sus a coninutului paginii (se utilizeaz opional) Dac dorim s alegem un anumit tip de font, o anumit dimensiune sau culoare a fontului care s fie valabile pe ntreg coninutul documentului, se va utiliza marcajul BASEFONT. Acest marcaj se utilizeaza dup marcajul BODY <BODY> <BASEFONT SIZE = numar COLOR = culoare FACE = font> unde: - SIZE - stabilete mrimea fontului numr - poate fi 1, 2, 3, 4, 5, 6 sau 7; ( 1 pentru fontul cel mai mic si 7 pentru fontul cel mai mare) - COLOR - stabilete culoarea fontului culoare - este o culoare precizat prin nume sau printr-un cod hexazecimal; - FACE - stabilete tipul fontului font - poate fi un font generic ca " serif ", " san serif ", " cursive ", " monospace ", "fantasy " sau un font specific instalat pe calculator, ca " Times New Roman ", "Helvetica " sau " Arial ".Se accepta ca valoare si o lista de fonturi separate prin virgula, de exemplu: " Times New Roman, serif,monospace ".

    Prof. Bejinaru Romeo

    4. Personalizarea aspectului textului din pagina WEB.


    Pentru personaliza un text sau poriuni din text acestea se plaseaz ntre 2 tag-uri i in funcie de sintaxa tag-ului textul sa va modifica. n continuare voi prezenta cteva sintaxe de tag-uri (punctele din interior reprezint un anumit text sau poriune de text) <B> ..... </B> -textul este scris NGROAT <I> ........ </I> -textul este NCLINAT <U> ..... </U> - textul este SUBLINIAT <S> ..... </S> - textul este BARAT (tiat cu o linie orizontal) <STRONG>.....</STRONG> - textul este EVIDENIAT puternic <SUB> ...</SUB> - textul este scris ca INDICE <SUP>...</SUP> - textul este scris ca EXPONENT <BIG> ... </BIG> -textul scris este MRIT <SMALL> ... </SMALL> -textul scris este MICORAT <PRE> ... </PRE> - formatul textului rmne aa cum a fost editat <BLOCKQUOTE>...</BLOCKQUOTE> -textul este scris ca paragraf(este identat stnga sau dreapta si este scris nclinat) Urmtoarele etichete permit scrierea fragmentului de text cu caractere monospaiate ( de tipul celor folosite de o main de scris ): <CODE>...</CODE> ( " code " nseamn cod sau surs); <KBD>...</KBD> ( kbd vine de la " keyboard " = tastatur); <TT>...</TT> ( tt vine de la " teletype " = teleprinter). <FONT COLOR=cod culoare FACE= tip font SIZE=mrime font > text de modificat </FONT> stabilete culoarea, corpul de liter utilizat i mrimea fonturilor textului de modificat <FONT SIZE=+n sau FONT SIZE=-n>............</FONT> - stabilete mrimea textului cu n mai mare sau mai mic dect fontul de baz din tag-ul BASEFONT) <FONT WEIGHT="100">................</FONT> -stabilete grosimea fonturilor la 100 (valorile pot fii 100 , 200 .....900) - unde 100 este cel mai subire <Hn>...</Hn> -scrie un paragraf nou cu mrimea n (unde n ia valori de la 1 la 6) , 1 reprezint valoarea cea mai mare ). nainte i dup H se las automat un rnd liber. <CENTER>....</CENTER> -aliniaz textul la CENTRU <P ALIGN=LEFT>...</P> -aliniaz un paragraf la STNGA <P ALIGN=RIGHT>...</P> - aliniaz un paragraf la DREAPTA <NOBR>...</NOBR> -scrie textul pe o singur linie

    5. Aspectul unui document HTML


    Pentru a obine aezarea dorit a componentelor documentului n fereastra programului de navigare, se folosesc controalele de separare <BR> i <P> care determin desfaurarea coninutului pe linii i paragrafe. Astfel, pentru a marca trecerea la un nou paragraf folositi controlul <P>, iar pentru a marca trecerea la o linie nou folosii controlul <BR>. Aceste dou controale nu necesit marcaj de nchidere (terminare). Pentru a insera n document un numr oarecare de spaii libere se folosete caracterul special &nbsp; (NonBreakingSpace). Spaiile astfel inserate au proprietatea de a nu permite browserului trecerea la linie nou. Pentru o mai vizibil mprire a corpului documentului se folosete rigla orizontal marcat cu controlul <HR>. Prezena acestui control produce desenarea unei linii orizontale subiri pe toat limea documentului. 3

    Prof. Bejinaru Romeo Dimensiunile riglei pot fi controlate cu ajutorul atributelor width i size, care seteaz dimensiunile pe orizontal i, respectiv, pe vertical a liniei n pagin. Pentru a elimina aspectul tridimensional al riglei se poate utiliza opiunea noshade care elimin efectul de "umbrire" a riglei.

    6. Efecte speciale simple


    6.1. Pentru scrierea caracterelor speciale se utilizeaz: &atilde-pentru litera ; &Atilde-pentru litera ; &acirc-pentru litera ; &Acirc-pentru litera ; &icirc - pentru litera ; &Icirc - pentru litera 6.2. Pentru introducerea unui cuvnt sau text care se deplaseaz n pagin: se utilizeaz atributul <marquee> text </marquee>
    ATENIE!!! ACEST ATRIBUT ESTE RECUNOSCUT NUMAI DE BROWSER-UL INTERNET EXPLORER

    Acest atribut poate avea una sau mai multe din urmtoarele comenzi: behavior - stabilete modul de deplasare a textului o behavior="scroll" - textul se deplaseaz continuu o behavior="slide" - textul se deplaseaz dar se oprete la marginea paginii o behavior="alternate" -textul se deplaseaz continuu dinr-o extremitate n alta a paginii direction - stabilete direcia de deplasare a textului o direction="left" - textul se deplaseaz spre stnga o direction="right" - textul se deplaseaz spre dreapta o direction="up" - textul se deplaseaz n sus pe vertical o direction="down" - textul se deplaseaz n jos pe vertical scrollamount="n" - viteza de deplasare a textului este n hspace="n" - stabilete limea "n" a marginilor stnga - dreapta ntre care se deplaseaz textul pe orizontal. Cu ct "n" este mai mare cu att distana de deplasare este mai mic vspace="n" - stabilete limea "n" a marginilor sus - jos ntre care se deplaseaz textul pe vertical height="n" - stabilee limea "n" a benzii de deplasare pe vertical width="n" - stabilete limea "n" a benzii de deplasare pe orizontal

    7. Utilizarea imaginilor n paginile WEB


    7.1.Inserarea imaginilor Pentru introducerea unei imagini n pagin se utilizeaz tag-ul <IMG> care poate conine una sau mai multe din comenzile : < IMG SRC= "imagini/steag.jpg" WIDTH="n" HEIGHT="n" ALT="comentariu" ALIGN=poziie BORDER=0 HSPACE= n VSPACE= n > - SRC - stabilete adresa i numele imaginii - n cazul prezentat imaginea se afl in dosarul imagini (care este n acelai dosar cu fiierul index.html) i are numele steag.jpg - Atributele WIDTH i HEIGHT stabilesc dimensiunile suprafeei din pagina care va fi ocupat de imagine. 4

    Prof. Bejinaru Romeo WIDHT-stabilete limea (poate s lipseasc, caz n care imaginea se va ncrca cu dimensiunile care le are)- dimensiunea poate fi in pixeli(n) sau procent (n%) HEIGHT- stabilete nlimea - ALT="comentariu" - text care apare cnd cursorul mouse-lui este pe imagine - BORDER - stabilete grosimea chenarului din jurul imaginii(dac are valoarea 0 , imaginea va fi fr chenar) - ALIGN - stabilete alinierea imaginii n raport cu un text din vecintatea sa i poate lua una din valorile: bottom pentru alinierea textului la baza inferioar a imaginii (valoare implicit) middle sau center pentru alinierea textului pe centrul imaginii top pentru alinerea textului la baza superioara a imaginii left pentru a plasa imaginea n extremitatea stnga a elementului container, iar blocul de text eventual existent dup marcajul imaginii respective ocupnd spaiul liber din dreapta i de sub ea. right pentru a plasa imaginea n extremitatea dreapta a elementului container, iar blocul de text eventual existent dup marcajul imaginii respective ocupnd spaiul liber din stnga i de sub ea. n cazul ultimelor dou valori poate aparea situaia n care un bloc de text trebuie "forat s coboare" pe prima linie de sub imagine. n acest caz se foloseste atributul clear al elementului BR care apare inaintea blocului de text pe care vrem s il translatm. Valorile acestui atribut pot fi: left pentru ca textul sa fie deplasat n jos pn in poziia in care marginea din stanga este libera right pentru ca textul sa fie deplasat in jos pana in poziia n care marginea din dreapta este liber all pentru ca textul s fie deplasat n jos pn n poziia n care ambele margini sunt libere
    - HSPACE i VSPACE precizeaz distana n pixeli pe orizontal , respectiv pe vertical, dntre imagine i restul elementelor din pagin.

    7.2.Utilizarea imaginilor ca elemente de legtur. Hri de imagini. a) Elemente de legtur n documentele HTML se folosesc frecvent imaginile pe post de ancore, adic legturi ctre alte documente sau programe. Acest lucru se poate realiza foarte uor prin plasarea imaginii n interiorul unui element ancora <A> i utilizarea atributului HREF. Exemplu: < A HREF = "pag1.html"> < IMG SRC = "go.gif" ALT = "pagina1" BORDER=0> </A> - HREF - indic pagina cu care se face legtura - IMG SRC - indic imaginea prin intermediul creia se face legtura -ALT - test care apare cnd cursorul mouse este plasat pe imagine - BORDER=0 - anuleaz chenarul din jurul imaginii de legtur 5

    Prof. Bejinaru Romeo Cnd cursorul mouse plasat pe imaginea go.gif se schimb forma acestuia i dac se face clic stnga se face legtura cu pagina pag1.html b) Hri de imagine O hart de imagine este un element grafic (imagine) care dispune de una sau mai multe regiuni reprezentnd legturi cu alte document sau programe din Web. Exemplu: <a name="harta"> <img src="calc.jpg" border="0" usemap="#Sistem" align="left"> </a> <map name="Sistem"> <area shape="poly" coords="x1,y1,x2,y2,x3,y3" href="UC.html" alt="Unitatea centrala"> <area shape="rect" coords="x1,y1,x2,y2" href="Monitor.html" alt="Monitorul"> <area shape="circle" coords="x,y,r" href="Mouse.html" alt="Mouseul"> </map> - a name - se utilizeaz pentru identificarea unei hri de imagine - img src - indic imaginea care se va folosi ca hart - usemap - utilizeaz harta folosit pe imaginea precizat cu img src (deschide harta) - map name - indic numele hrii utilizate ATENIE!!! Numele indicat la map name trebuie s fie identic cu cel indicat la usemap (numele indicat la usemap trebuie s aib n fa semnul # ) - tag-ul area definete o anumit regiune activ de pe harta de imagine (regiune n care dac se plaseaz cursorul mouse acesta -i schimb forma i iar dac se face clic stnga se face legtura cu pagina indicat). Comanda area are urmtoarele atribute: -shape - care definete forma regiunii respective , poate avea valorile: - rect - regiunea activ are forma unui dreptunghi - circle - regiunea activ are forma unui cerc - poly - regiunea activ are forma unui poligon - coords - specific coordonatele regiunii active pe de pe imagine pentru rect x1,y1 - reprezint coordonatele colului din stnga sus x2,y2 - reprezint coordonatele colului din dreapta jos pentru poly x,y - reprezint coordonatele unui vrf al poligonului pentru circle x,y - reprezint coordonatele centrului iar r raza cercului - href - indic pagina cu care se face legtura cnd cursorul mouse este n zona respectiv (se schimb forma cursorului i atunci se face clic stnga) - alt - test care apare cnd cursorul mouse este plasat n zona activ Pentru a preciza coordonatele anumitor zone dintr-o imagine se procedeaz astfel: - se deschide aplicaia Paint - din meniul Fiiere se activeaz Deschidere i se deschide imaginea care se utilizeaz - cnd se deplaseaz cursorul mouse peste imagine n bara de stare (dreapta jos) se afieaz coordonatele mouse (n funcie de forma i mrimea zonei active se vor nota aceste coordonate) c) Folosirea clipurilor video in Internet Explorer Internet Explorer permite inserarea foarte simpl a fiierelor de tip "imagine dinamic" (clipuri video) n acelai mod n care se insereaz o imagine static. Astfel, pentru elementul IMG se folosesc atributele: 6

    Prof. Bejinaru Romeo dynsrc - pentru a determina adresa fiierului imagine loop - pentru a determina de cte ori va fi rulat clipul respectiv. Valoare implicit este "1". O valoare egal cu 0 sau -1 determin rularea continu a clipului start - determin momentul de start al clipului. Acesta poate fi "fileopen" ( valoare implicit) pentru pornirea clipului odat cu ncrcarea paginii n browser, sau"mouseover" pentru pornirea lui atunci cand cursorul mouse-ului este poziionat deasupra sa. Pentru a insera n document un clip video sau audio care s poat fi redat i de alte browsere se utilizeaz tag-ul <object> n care este comanda embed cu atributele: src - pentru a preciza sursa fiierului audio sau video folosit width i height- pentru a preciza dimensiunea ocupat de obiectul respectiv n document. Reuita inserrii unui astfel de clip depinde de extensia fiierului folosit i de versiunea browserului. Pentru fiierele video e preferabil s folosii extensiile "mpg" sau "mov" , iar pentru cele audio formatul "mp3". Exemplu: <html> <head><title>Inserarea unui clip video</title></head> <body bgcolor="8080FF"> <h1>I TOTUSI SE ROTETE</h1> <img dynsrc="Imagini/Globe.avi" loop="-1" start="fileopen" border="0" alt="acest videoclip poate fi vizualizat doar daca folositi Internet Explorer"> <h1>UTILIZAREA UNUI VIDEOCLIP</h1> <object> <embed src="Imagini/Sample3.mpg" width=200 height=200 > </embed> </object> </body> </html>

    8. Legturi i referine n HTML


    8.1. Legturi O legtur ctre o alt pagin prin intermediul unui text sau unei imagini se realizeaz astfel: <A HREF ="pag1.html"> GO PAGINA1</a> La activarea textului "GO PAGINA1" se face legtura la pagina "pag1.html" Dac paginile ntre care se face legtura sunt n acelai dosar nu mai trebuie scris i adresa paginii ctre care se face legtura (n cazul prezentat se face legtura ntre pagina index.html i pag1.html care sunt n acelai dosar) <A HREF="pag2.html"> <IMG SRC="imagini/GO.jpg"></A> La activarea imaginii "GO.jpg" care se afl n dosarul imagini (deorece GO.jpg nu este n acelai dosar cu pagina index.html s-a specifict i adresa imaginii) se face legtura la pagina "pag2.html" Dac dorim s facem legtura cu o pagin aflat n alt dosar, deci nu n acelai dosar cu pagina index.html de unde pleac legtura , se specific i adresa paginii , astfel: <A HREF="D:\ WEB \ prezentare.html> GO prezentare</A> Se face legtura dntre pagina index.html i pagina prezentare.html care se afl pe partiia D: n dosarul WEB Dac dorim s facem legtura ntre pagina index.html i un anumit site se specific numele siteului astfel: <A HREF="http: // www.edu.ro"> Deschide portal-ul Edu</A> Se face legtura ntre pagina index.html i portal-ul Edu.ro Pentru a trimite un e-mail la o anumit adres dintr-un anumit loc de pe pagin se scrie: 7

    Prof. Bejinaru Romeo <A HREF="mailto:vlahuta@vlahuta.netcomputers.ro"> <IMG SRC="foto/email2.gif" ALIGN= center BORDER="0" ALT="vlahuta@vlahuta.netcomputers.ro"> </A> 8.2. Ancore ntr-o pagin foarte lung pot exista puncte de reper ctre care se definesc legturi. O ancor se definete de asemenea prin eticheta <A>. Pentru a defini ancora se utilizeaz atributul NAME care primete ca valoare un nume atribuit ancorei (de exemplu "leg1"). Pentru a insera o legatur ctre "leg1" definit n aceeai pagina se utilizeaz eticheta <A> avnd atributul HREF de valoare "#leg1". Pentru a introduce o legatur catre o ancor definit n alt document (alt pagin) aflat n acelai director, atributul HREF primete o valoare de forma "nume_fisier.html#nume_ancora". Exemplu: dac dorim sa facem o legtur ntre cuvntul VLAHU scris la nceputul unei pagini i acelai cuvint VLAHU scris undeva pe aceeai pagin se va scrie cuvntul VLAHU care este la nceputul paginii ntre tag-urile: <A HREF="#VLAHU">VLAHU</A> iar cuvntul VLAHU ctre care se face legtura ntre <A NAME="VLAHU">VLAHU</A> Deci <A HREF> este legtura ctre ancora <A NAME> Pentru a revenii la nceputul unei paginii putem alege un cuvnt sau o imagine care s ne trimit la nceputul paginii care va fi ncadrat ntre tag-urile <A HREF="#top">..........</A> Ancore definite prin atributul ID Atributul ID este un atribut universal ,adic poate fi ataat oricrui element al unei pagini Web. Acest atribut va nlocui complet atributul NAME, care putea fi ataat numai anumitor elemente. Atributul ID primete ca valoare un nume (de exemplu "id1") care identific n mod unic un element. Atributul ID poate fi utilizat pe post de ancor ntr-o pagin Web conform sintaxei:
    <eticheta id = "id1"> ... </eticheta> <a href = "#id1" >Link ctre elementul

    "id1" </a>

    unde "eticheta" poate fi orice element .

    9. Liste n HTML
    9.1. Liste neordonate O list neordonat este un bloc de text delimitat de etichetele corespondente <UL>...</UL> (" ul " vine de la " unordered list " = list neordonat). Fiecare element al listei este iniiat de eticheta <LI> (list item). Lista va fi indentat fa de restul paginii Web i fiecare element al listei ncepe pe un rnd nou. Tag-urile <UL> si <LI> pot avea un atribut TYPE care stabileste caracterul afiat n faa fiecrui element al listei.valorile posibile al acestui atribut sunt: "circle" (cerc) "disc" (disc plin) (valoarea prestabilit); "square" (ptrat) Exemplu: <html> <head><title>liste neordonate</title></head> <body> <h1 align=center>Liste neordonate imbricate </h1> <hr> <ul> " se deschide lista de pe nivelul 1" <li>element 1 <ul> "se deschide lista de pe nivelul2" <li>element 1.1 8

    Prof. Bejinaru Romeo <li>element 1.2 <ul> <li>element 1.2.1 <li>element 1.2.2 </ul> <li>element 1.3 </ul> <li>element 2 <li>element 3 <ul type="square"> <li>element 3.1 </ul> </ul> </body> </html> 9.2. Liste ordonate

    "se deschide lista de pe nivelul 3"

    "se inchide lista de pe nivelul 3 i se revine la nivelul 2" "se inchide lista de pe nivelul 2 i se revine la nivelul 1" " se deschide o lista pe nivelul 2 si se specific ce marcaj se utilizeaz" "se nchide lista deschisa anterior" " se nchide lista de pe nivelul 1"

    O list ordonat de elemente este un bloc de text delimitat de etichetele corespondente <OL>...</OL> (" ol " vine de la " ordered list " = list ordonat). Fiecare element al listei este initiat de eticheta <LI> (list item). Lista va fi indentat fa de restul paginii Web i fiecare element al listei ncepe pe un rnd nou. Tag-urile <OL> i <LI> pot avea un atribut TYPE care stabilete tipul de caractere utilizate pentru ordonarea listei.Valorile posibile sunt: " A " pentru ordonare de tipul A , B , C , D etc. ( litere mari ); " a " pentru ordonare de tipul a , b , c , d etc. ( litere mici ); " I " pentru ordonare de tipul I , II , III , IV etc. ( cifre romane mari ); " i " pentru ordonare de tipul i , ii , iii , iv etc. ( cifre romane mici ); " 1 " pentru ordonare de tipul 1 , 2 , 3 , 4 etc. ( cifre arabe - optiune prestabilita );

    Numerotarea elementelor din list poate ncepe de la un anumit numr sau liter funcie de valoarea numrului scris dup comanda START="n" Exemplu: <html> <head> <title>Liste ordonate</title> </head> <body> <h2>List ordonat implicit:</h2> <ol> <li>element 1</li> <li>element 2</li> <ol> <li>element 2.1</li> <li>element 2.2</li> </ol> </ol> <ol type="A"> <li>element 1</li> <li>element 2</li> <ol type = "a"> <li>element 2.1</li> <li>element 2.2</li> </ol> 9

    Prof. Bejinaru Romeo <li>element 3</li> <ol type="I"> <li>element 3.1 <ol type="i"> <li>element 3.1.1</li> <li>element 3.1.2</li> </ol> <li>element 3.2</li> </ol> </ol> </body> </html>

    10. TABELE IN HTML.


    Definirea unui tabel n HTML se face folosind perechea de marcaje <table>...</table>. Prin intermediul acestei perechi de marcaje se definesc atribute valabile pentru ntregul tabel. Majoritatea acestor atribute pot fi ns redefinite pentru anumite celule ale tabelului. Semnificaiile atributelor marcajului <table> sunt: border - specific grosimea chenarului tabelului. Daca are valoarea 0 sau atributul lipseste, tabelul nu va avea chenar. frame - defineste modul de afiare a chenarului exterior. Funcioneaz n prezena atributului "border". Atributul frame poate avea urmtoarele valori: above - afieaz latura superioar a chenarului; below - afieaz latura inferioar a chenarului; border - afieaz chenarul complet; box - afieaz chenarul complet (la fel ca i border); hsides - afieaz prile inferioar, respectiv superioar ale chenarului; vsides - afieaz prile laterale (stang, dreapt) ale chenarului; lhs - afieaz latura stang a chenarului; rhs - afieaz latura dreapt a chenarului; void - fr bordura exterioar. rules - definete modul de afiare a chenarului interior dntre celulele tabelului. Funcioneaz n prezena atributului "border". Atributul rules poate avea urmtoarele valori: none - nu se afieaz chenar interior; groups - afieaz chenar ntre grupurile de celule definite de thead, tbody, colgroup, col, tfoot; rows - afieaz chenar ntre linii; cols - afieaz chenar ntre coloane; all - afieaz chenar ntre toate celulele interioare. width, height - specific limea, respectiv nlimea tabelului. n cazul n care valorile specificate nu sunt suficiente pentru afiarea coninutului celulelor, valorile vor fi modificate automat de ctre browser astfel nct tot coninutul s fie afiat. Valorile se pot exprima absolut, n pixeli, sau relativ la limea ecranului (width), respectiv la nlimea ecranului (height). Trebuie menionat ca atributul "height" nu face parte din specifictiile HTML. Este recomandat s lai browserul s calculeze valoarea pentru "height" n funcie de coninutul tabelului. bgcolor - specific culoarea pentru fundalul tabelului. bordercolor - specific culoarea chenarului. bordercolorlight, bordercolordark - sunt atribute utilizate pentru a crea un efect 3D asupra chenarului. Este recomandat folosirea de culori complementare pentru a obine efectul scontat. Sunt extensii Microsoft.

    10

    Prof. Bejinaru Romeo background - URL-ul imaginii care va fi utilizat ca fundal al tabelului. n cazul n care dimensiunile imaginii sunt mai mici decat cele ale tabelului, ea va fi repetat astfel ncat s acopere ntregul fundal al tabelului. Este extensie Microsoft. cellspacing - specific distana dintre celule. cellpadding - specific marginea interioar a celulelor. align - specific alinierea pe orizontal a tabelului (stnga|centru|dreapta). valign - specific alinierea pe vertical a tabelului (sus|mijloc|jos). summary - o descriere a tabelului, de obicei pentru browsere non-vizuale. Un alt marcaj care poate aparea in cadrul unui tabel este <caption>. Are urmtoarea sintax: <caption [align=top|bottom|left|center|right] [valign=top|bottom]> ... </caption> Marcajul caption adaug o scurt descriere (titlu) a tabelului. Poate fi utilizat numai n cadrul unui marcaj <table>, imediat dup acesta. Are urmtoarele atribute: align - n mod normal browser-ul va afia titlul aliniat central i deasupra/dedesubtul tabelului. n HTML 4.0 atributul align a fost abandonat n favoarea formatarii prin CSS (text-align si verticalalign). valign - precizeaz poziia titlului n raport cu tabelul (sus/jos). Marcajul <tr> defineste o linie intr-un tabel. Are urmtoarea sintax: <tr [align=left|center|right] [valign=top|middle|bottom|baseline] [bgcolor="#rrggbb"|culoare] [bordercolor="#rrggbb"|culoare] [bordercolorlight="#rrggbb"|culoare] [bordercolorlight="#rrggbb"|culoare]> Marcajul <th> definete o celul din antetul tabelului. Sintaxa este: <th [align=left|center|right] [valign=top|middle|bottom|baseline] [background="url-imagine"] [colspan=n] [rowspan=m] [bgcolor="#rrggbb"|culoare] [bordercolor="#rrggbb"|culoare] [bordercolorlight="#rrggbb"|culoare] [bordercolordark="#rrggbb"|culoare] [nowrap] [abbr="text"]> </th> Marcajul <td> definete o celul din tabel. Are urmtoarea sintaxa: <td [align=left|center|right] [valign=top|middle|bottom|baseline] [background="url-imagine"] [colspan=n] [rowspan=n] [bgcolor="#rrggbb"|culoare] [bordercolor="#rrggbb"|culoare] [bordercolorlight="#rrggbb"|culoare] [bordercolordark="#rrggbb"|culoare] [nowrap] [abbr="text"]> </td> Atributele colspan i rowspan extind o celul pe mai multe coloane, respectiv linii ale tabelului. Exemplu utilizare colspan: <table border=1 cellspacing=0 cellpadding=1 width="100" align="left"> <caption valign=top>Exemplu tabel </caption> <tr> <td><center>Celula 1.1</center></td> <td><i>Celula 1.2</i></td> 11

    Prof. Bejinaru Romeo </tr> <tr> <td colspan="2"><s>Celula 2.1</s></td> </tr> </table>

    Exemplu utilzare rowspan: <table border=1 cellspacing=0 cellpadding=1 width="100" align="left"> <caption valign=top>Exemplu tabel </caption> <tr> <td rowspan="2"><center>Celula 1.1</center></td> <td><i>Celula 1.2</i></td> </tr> <tr> <td ><s>Celula 2.2</s></td> </tr> </table> Exemplu tabel: <table width="100" height="100" border="1" align="center" bgcolor="#66CCFF" bordercolor="#FF0000" summary=""> <tr> <td colspan="5" align="center">1</td> </tr> <tr> <td align="center">2</td> <td colspan="3" align="center" height="400" > 3</td> <td align="center">4</td> </tr> <tr > <td align="center">5</td> <td align="center">6</td> <td align="center" width="100">7</td> <td align="center">8</td> <td align="center">9</td> </tr> </table> 1

    11. FERESTRE N HTML.


    12

    Prof. Bejinaru Romeo Ferestrele sau (cadrele) ne permit s definim n fereastra browserului subferestre n care s fie ncrcate documente HTML diferite. Ferestrele sunt definite ntr-un fiier HTML special , n care blocul <body>...</body> este nlocuit de blocul <frameset>...</frameset>. n interiorul acestui bloc, fiecare cadru este introdus prin eticheta <frame>. Un atribut obligatoriu al etichetei <frame> este src, care primete ca valoare adresa URL a documentului HTML care va fi ncrcat n acel frame. Definirea cadrelor se face prin mprirea ferestrelor (i a subferestrelor) n linii i coloane:

    mprirea unei ferestre ntr-un numr de subferestre de tip coloan se face cu ajutorul atributului cols al etichetei <frameset> ce descrie acea fereastr; mprirea unei ferestre ntr-un numr de subferestre de tip linie se face cu ajutorul atributului rows al etichetei <frameset> ce descrie acea fereastr; valoare atributelor cols si rows este o list de elmente separate prin virgul, care descriu modul n care se face mprirea.

    Elementele listei pot fi: 1. un numr ntreg de pixeli; 2. procente din dimensiunea ferestrei (numar ntre 1 si 99 terminat cu %); 3. n* care nseamn n pri din spaiul rmas; Exemplu 1: cols=200,*,50%,* nseamn o mprire n 4 subferestre , dntre care prima are 200 pixeli , a treia ocup jumtate din spaiul total disponibil ,iar a doua i a patra ocup n mod egal restul de spaiu rmas disponibil. Exemplu 2: cols=200,1*,50%,2* nseamn o mprire n 4 subferestre , dintre care prima are 200 pixeli , a treia ocupa jumatate din spaiul total disponibil iar a doua i a patra ocup n mod egal restul de spaiu rmas disponibil, care se mparte n trei pri egale , a doua fereastr ocupnd o parte , iar a patra ocupnd 2 pri. Observaii: - dac mai multe elemente din list sunt configurate cu * , atunci spaiul disponibil ramas pentru ele se va mpri n mod egal. - o subfereastra poate fi un cadru (folosind <frame>)n care se va incarca un document HTML sau poate fi mprit la rndul ei la alte subfereste (folosind <frameset>). <html> <head><title>fereastra1</title></head> <frameset cols="*,*"> <frame src="p1.html"> <frame src="p2.html"> </frameset> </html> n exemplul urmtor este creat o pagin Web cu trei cadre orizontale. Pentru al doilea cadru valoarea atributului src este adresa URL a unei imagini. <html> <head><title>fereastra2</title></head> <frameset rows="100,*,10"> <frame src="p1.html"> <frame src="tiled.gif"> <frame src="p3.html"> 13

    Prof. Bejinaru Romeo </frameset> </html> n exemplul urmtor este creat o matrice de 4 cadre (2 x 2).Pentru a realiza acest lucru, se folosesc simultan cele dou atribute cols si rows.
    <html> <head><title>fereastra3</title></head> <frameset rows="*,*" cols="*,*"> <frame src="p1.html"> <frame src="p2.html"> <frame src="p3.html"> <frame src="p4.html"> </frameset> </html>

    n exemplul urmtor este creat o pagina Web cu trei cadre mixte.Pentru a o crea se procedeaz din aproape n aproape. Mai nti, pagina este mprit n dou subferestre de tip coloana, dupa care a doua subfereastr este mprit n dou subferestre de tip linie.
    <html> <head><title>fereastra4</title></head> <frameset cols="20,*"> <frame src="p1.html"> <frameset rows="*,*"> <frame src="p2.html"> <frame src="p3.html"> </frameset> </frameset> </html>

    Sintez Taguri HTML 1.Marcaje de Baz <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> BGCOLOR = culoare TEXT=culoare LINK=culoare VLINK=culoare ALINK=culoare BACKGROUND = url <P> <Hn> <Hn> <FONT> </FONT> SIZE=n Definete un fiier n format Web. Antetul documentului. Titlul documentului. Corpul paginii HTML. Culoarea de fond a paginii. Culoarea textului pe pagini. Culoarea legturiilor nevizitate din pagini. Culoarea legturilor vizitate din pagini. Culoarea legturilor pe durata click-ului exacutat de utilizator. Imaginea de fond pentru pagin. Paragraf. Nivel de subtitlu al documentului (n = 1-6). Specific atribute ale textului ncadrat. Dimensiunea textului este 1-7.

    14

    Prof. Bejinaru Romeo FACE="a,b" COLOR=s <BR> <PRE> </PRE> <!-- --> Specific fontul: a, dac este disponibil, sau b. Culoarea textului: fie un nume de culoare, fie o valoare RGB. Linie nou. Informaie preformatat. Comentariu HTML.

    <CENTER></CENTER> Centreaz materialul n pagin. <HR> SIZE=x WIDTH=x NOSHADE ALIGN=x COLOR=x <A> </A> HREF=url HREF=#nume Name=nume Rigla orizontal. nlimea riglei n pixeli. Limea riglei n pixeli sau n procente. Dezactiveaz afiarea umbrei pentru rigla orizontal. Alinierea riglei orizontale n pagin (left, center, right). Culoarea riglei orizontale (numai pentru IE) Marcaj de tip ancor. Referin hipertext. Referin ctre o ancor intern. Definiia unei ancore interne.
    2.Marcaje Formatare Caractere

    <B> </B> <I> </I> <U> </U> <TT> </TT> <CITE> </CITE> <CODE> </CODE> <EM> </EM> <KBD> </KBD> <STRONG> </STRONG> <VAR> </VAR>

    Afieaz text cu caractere aldine. Afieaz text cu caractere cursive. Afieaz text subliniat. Text cu font monospaiu. Citare bibliografic. Listing de program. Stil logic de evideniere. Text de la tastatur. Evideniere logic puternic. Program sau variabil.

    <BASEFONT SIZE = n> Specific explicit dimensiunea fontului din pagin.


    3.Marcaje pentru Imagini

    15

    Prof. Bejinaru Romeo <IMG> SRC=url ALT=text ALIGN=aliniere HEIGHT=x WIDTH=x BORDER=x HSPACE=x VSPACE=x Marcajul de introducere a imaginilor. Sursa Fiierului grafic. Textul alternativ de afiat, dac este necesar. Alinierea imaginii n pagin, cu urmtoarele valori posibile: top (sus), middle(la mijloc), bottom (jos), left (in stnga), right (in dreapta). nlimea imaginii (in pixeli). Limea imaginii. Chenarul din jurul imaginii, atunci cand aceasta este utilizat ca hiperlegatur. Spaiul suplimentar pe orizontal din jurul imaginii (in pixeli). Spaiul suplimentar pe vertical din jurul imaginii (n pixeli).
    4.Marcaje pentru Liste

    <DD> <DL> </DL> <DT> <LI> <OL> TYPE=tip START=x <UL> TYPE=forma

    Descriere definiie. List de tip definiie. Termen de definiie. Element de list. List ordonat (numerotat). Tipul numerotarii. Valori posibile: A, a, I, i, 1. Numrul de nceput al listei ordonate. List neordonat (marcat). Forma marcajului. Valori posibile: circle, square, disc.
    5.Marcaje pentru Tabele

    <TABLE> </TABLE> BORDER=x CELLPADDING=x CELLSPACING=x WIDTH=x FRAME=valoare RULES=valoare BORDERCOLOR =

    Tabel HTML. Chenarul tabelului. Spaiul suplimentar n cadrul celulelor tabelului. Spaiul suplimentar ntre celulele tabelului. Limea impus tabelului. Ajustarea tabelului. Ajustarea riglelor tabelului. Culoarea chenarului tabelului. 16

    Prof. Bejinaru Romeo culoare BORDERCOLORLIGHT Cea mai deschis culoare din cele dou culori specificate. = culoare BORDERCOLORDARK Cea mai nchis culoare din cele dou culori specificate. = culoare ALIGN=left ALIGN=right HSPACE=x VSPACE=x COLS=x <COLGROUP> </COLGROUP> <COL WIDTH=x> <THEAD> </THEAD> <TBODY> </TBODY> <TR> </TR> BGCOLOR=culoare ALIGN=aliniere <TD> </TD> BGCOLOR=culoare COLSPAN=x ROWSPAN=x ALIGN=aliniere VALIGN=aliniere BACKGROUND=url NOWRAP ALIGN=baseline ALIGN=caracter Aliniaz tabelul la marginea din stnga a paginii, iar textul curge n partea dreapta. Aliniaz tabelul la marginea din dreapta a paginii, iar textul curge n partea stnga. Spaiu suplimetar pe orizontal n jurul tabelului. Spaiu suplimetar pe vertical n jurul tabelului. Specific numrul de coloane ale unui tabel. Definete un set de coloane cu ajutorul marcajului <col>. Definete limea unei coloane exprimat n pixeli. Definete titlul tabelului. Definete corpul tabelului. Linie de tabel. Specific culoarea de fond pentru ntreaga linie. Alinierea celulelor de pe linia curent (left, center, right). Celula de date a tabelului. Specific culoarea de fond pentru celula de date. Numrul de coloane pe care se ntinde celula curent de date. Numarul de linii pe care se intinde celula curenta de date. Alinierea materialului din cadrul celulei de date. Valori posibile: left, right, center. Alinierea pe vertical a materialului din cadrul celulei de date. Valori posibile: top, bottom, middle. Specific imaginea de fond pentru celula tabelului. Nu permite desprirea textului pe linii n cadrul unei celule. Aliniaz celule de date cu linia de baz a textului adiacent. Aliniaz o coloana faa de un anumit caracter (caracterul prestabilit este "."). 17

    Prof. Bejinaru Romeo ALIGN=justify Aliniaz att marginea din stanga ct i marginea din dreapt a unui text.
    6.Marcaje pentru Cadre

    <FRAMESET> </FRAMESET> COLS=x ROWS=x BORDER=x FRAMEBORDER = x FRAMESPACING = x <FRAME> SRC=url NAME=nume SCROLLING=scrl FRAMEBORDER=x MARGINHEIGHT=x MARGINWIDTH=x <NOFRAMES> </NOFRAMES> <IFRAME> SRC=url NAME=s HEIGHT=x WIDTH=x

    Definirea redactrii paginii. Numrul i marimea relativ a coloanelor. Numrul i marimea relativ a liniilor. Specific starea "on" (activ) sau "off" (inactiv) pentru chenarul cadrului FRAMESET. Specific mrimea chenarului. Mrimea spatiului dntre dou cadre adiacente. Definiia unui anumit cadru. URL-ul surs pentru cadru. Numele cadrului (utilizat mpreun cu "TARGET=nume" ca parte component a marcajului de tip ancor, <a>. Definete opiunea barei de derulare. Valori posibile: on (activ), off (inactiv), auto (automat). Mrimea chenarului din jurul cadrului. Spaiul suplimentar de deasupra i dedesubtul unui anumit cadru. Spaiu suplimentar la stnga i la dreapta unui anumit cadru. Seciunea de pagin afiat pentru utilizatorii care nu pot vedea un cadru. Cadru intern (numai pentru (IE). Sursa cadrului. Numele ferestrei (util pentru TARGET). nlimea cadrului nglobat. Limea cadrului nglobat.
    7.Marcaje pentru Caractere Speciale

    & <

    "&amp;" - ampersand. "&#732;" - tilda. "&lt;" - mai mic (less than). 18

    Prof. Bejinaru Romeo > " $ "&gt;" - mai mare (greater than). simbolul special de copyright. simbolul special pentru marc nregistrat. "&quot;" - ghilimele. simbolul special a mic cu accent ascuit. simbolul special a mic cu accent circiumflex. simbolul special n mic cu tilda. simbolul special o mic barat (slash). simbolul special $ (dolar). "&#8364;" - euro.

    19

    S-ar putea să vă placă și