Curs 1 Web

Curs Programare WEB Curs 1 Elemente de baza Pentru inceput sa descoperim originea abrevierii HTML - Hypertext Markup Language
ge . Acest limbaj este folosit pentru a formata si prezenta documente pe web . HTML adauga tag-uri fisierelor ASCII astfel incat sa permita afisarea unei varietati de fonturi , imagini sau sunete prin definirea unor elemente ca header , lista , paragraph si prin implementarea si utilizarea unor legaturi ( linkuri ) catre alte documente publicate in internet . Mai clar , limbajul HTML este limbajul pe care il inteleg aplicatiile de tip browser ( ex: Internet Explorer , Netscape Communicator , Opera , etc. ) folosite pentru a naviga pe internet . Datorita acestui limbaj browser-ul poate afisa ceea ce autorul paginii web a dorit sa prezinte . Elementele de baza ale limbajului HTML sunt foarte simple si usor de retinut si apoi de utilizat ; cunoscand doar tag-urile de baza putem construi un intreg site fara probleme . TAG reprezinta o comanda in cod HTML care indica modul in care va fi interpretata informatia la care ea se refera . TAG-uri DE BAZA Orice pagina web standard trebuie sa contina 8 tag-uri de baza . Aceste tag-uri trebuie sa apara in cadrul fiecarei pagini a unui web site . Aceste tag-uri sunt prezentate mai jos si ele trebuie sa apara exact in aceasta cronologie in cadrul paginii web : <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML>
Inainte de a explica fiecare tag in parte mentionez ca tag-urile trebuie scrise in codul sursa exact in forma in care ele apar mai sus , intre semnele <> . Aceste simboluri au menirea de a transmite browser-ului ca textul dintre ele trebuie recunoscut ca un tag deci ca un cuvant cheie al limbajului , o comanda care trebuie executata . Limbajul HTML nu tine cont de litere mari sau mici in cadrul tag-ului , astfel incat <BODY> sau <body> vor fi interpretate identic . <HTML> ~ acest tag transmite browser-ului ca documentul respectiv este de fapt un document HTML , dand astfel indicatii asupra modului in care vor fi interpretate diferite partitii ale fisierului ASCII . <HEAD> ~ acest tag este in fapt tot un mesaj catre browser , continand informatii despre document ca de ex. link-uri sau pagini care trebuie incarcate in prealabil . <TITLE> ~ acest tag este folosit pentru a da o denumire paginii web create ; acest nume va apare in partea superioara a fereastrei browser-ului identificand astfel pagina respectiva . </TITLE> ~ acest tag este de fapt inchiderea celui precedent ; transmite browser-ului ca textul ce trebuie considerat ca titlu al paginii s-a incheiat . Majoritatea tag-urilor HTML folosesc tag-uri corespondente de inchidere . </HEAD> ~ tag-ul de inchidere al tag-ului corespondent <HEAD> <BODY> ~ acest tag semnaleaza deschiderea sectiunii corespunzatoare corpului paginii web . Aici se vor introduce informatiile continute in pagina , textul , grafica si elementele multimedia dorite . </BODY> ~ tag-ul de inchidere care transmite browser-ului ca nu se mai doreste adaugarea de informatie in aceasta pagina . </HTML> ~ acest tag incheie documentul HTML , semnaland browser-ului ca nu mai exista elemente care trebuie citite sau incarcate . Cu elementele prezentate mai sus putem deja crea o pagina web foarte simpla dar perfect functionala ! Codul urmator implementeaza o pagina web folosind doar tag-urile de baza : <html> <head> <title>Pagina mea proprie</title> </head> <body> Aceasta este o pagina de test . Acesta este un exemplu perfect pentru simplitatea crearii unei pagini web ! </body> </html>
OBS : Dupa cum ati vazut tag-urile sunt folosite in general in perechi complementare . Daca vreti sa folositi taguri grupate fara a avea probleme atunci ele trebuie corect grupate si nu incrucisate. Adica: <Tag1><Tag2></Tag1></Tag2> - tag-uri incrucisate care pot genera erori. <TAG1><TAG2></TAG2></TAG1> - tag-uri grupate corect.
Odata creata o prima pagina web functionala trebuie sa revenim la tag-uri pentru a aprofunda capacitatile acestora . In cadrul sectiunii <BODY> apar elementele de text si grafica ale paginii noastre . Acum sa vedem ce altceva mai putem realiza in aceasta sectiune . Unul dintre elementele cele mai puternice si des utilizate care se intalnesc in cadrul acestei sectiuni este controlul asupra culorilor , atat la nivel de text cat si de fond . Putem configura culori diferite pentru text normal , link-uri , link-uri vizitate , link-uri active sau pentru fondul paginii noastre . Pentru a specifica culoarea de fond tag-ul nostru se prezinta astfel : <Body bgcolor="blue"> Comanda anterioara face ca fondul paginii noastre sa devina albastru . Pentru a specifica o anumita culoare ( ex. negru ) si pentru textul din cadrul paginii folosim urmatoarea comanda : <Body bgcolor="blue" text="black"> La pasul urmator vom schimba culoarea link-urilor prezente in pagina in galben pentru a le diferentia mai rapid in cadrul informatiilor prezentate in pagina web : <Body bgcolor="blue" text="black" link="yellow"> In cazul in care in cadrul paginii avem mai multe link-uri ar fi util sa putem observa rapid care dintre ele au fost deja vizitate si care nu . Pentru a putea sublinia acest fapt vom introduce si atributul vlink ( = visited link ) in cadrul tag-ului : <Body bgcolor="blue" text="black" link="yellow" vlink="red"> In urma comenzii de mai sus browser-ul va afisa link-urile vizitate cu rosu . Ca un alt pas putem configura o alta culoare ( ex. verde ) pentru link-urile pe care se apasa la momentul respectiv ; aceasta culoare va apare doar in momentul in care se va da click pe link-ul respectiv iar atributul folosit va fi alink ( = active link ) : <Body bgcolor="blue" text="black" link="yellow" vlink="red" alink="green"> Revenind la controlul culorilor trebuie sa mai amintesc unele detalii . Culoarea poate fi specificata fie in limba engleza ( denumirile dintr-o lista standard ) fie in cod
hexazecimal ( ex .#0000FF ) . Formatul in care se transmite comanda este de tip RGB ( red green blue ) : RRGGBB ; comanda de mai jos : <Body bgcolor="#0000FF"> este echivalenta cu : <Body bgcolor="blue"> In cazul in care vrem ca pagina sa aiba un aspect mai personalizat putem folosi ca fond nu doar o culoare ci o imagine ( in format GIF sau JPG ) : <Body background="imagine.gif" text="black" link="yellow" vlink="red" alink="green"> Tag-ul anterior specifica utilizarea imaginii imagine.gif ca fond al paginii noastre . Trebuie mentionat ca indiferent de dimensiunile imaginii dorite aceasta va acoperi intreaga suprafata a paginii . In continuare vom aborda utilizarea diferitelor fonturi . In computer vom intalni o varietate foarte mare de fonturi in ceea ce priveste forma si marimea . Trebuie sa acordam atentie alegerii fontului utilizat in pagina noastra web pentru ca este posibil ca nu toti utilizatorii care vor incerca sa acceseze pagina vor dispune de fontul respectiv . In acest caz computerul va inlocui automat fontul nostru cu fontul default al acelui sistem ( de obicei ARIAL sau TIMES NEW ROMAN ) . Ca element practic , indiferent de fontul pe care il utilizam este necesara vizualizarea paginii si folosind fonturile default cele mai raspandite . Pentru a controla fonturile trebuie utilizat tag-ul , in cadrul sectiunii <BODY> : <Body bgcolor="blue" text="black" link="yellow" vlink="red" alink="green"> </Body> Observati ca si tag-ul necesita un tag de inchidere . Acest tag ne permite sa stabilim tipul de font , dimensiunea sa si culoarea , ca in exemplul urmator : Pentru a da flexibilitate utilizarii fonturilor limbajul HTML permite enumerarea in cadrul unei liste a fonturilor ce urmeaza a fi folosite , astfel incat in cazul in care fontul pe care il utilizati nu este disponibil atunci se va incerca automat utilizarea urmatorului font din lista : Marimea fontului poate fi stabilita in cadrul a trei tipuri de plaje : de la 1 la 7 , de la -1 la -3 si de la +1 la +4 .
In afara acestui control al fonturilor mai exista inca sase tag-uri care pot modifica fontul prezent in pagina . Aceste comenzi sunt tag-uri independente si nu apar in cadrul tag-ului . Aceste tag-uri sunt <h1 > , <h2> , <h3> , <h4> , <h5> si <h6> , cu tag-ul <h1> folosind dimensiunea cea mai mare de font iar <h6> cea mai mica dimensiune . Aceste tag-uri sunt in general folosite la inceputul paginii pentru a anunta un titlu sau in cadrul paginii pentru a diferentia dimensiunea unei portiuni de text de dimensiunea standard definita prin tag-ul . Toate aceste tag-uri necesita si complementarul de inchidere ( ex. </h1> ) . In cazul in care nu se apeleaza la tag-ul se va folosi dimensiunea default de 3. In cazul in care dorim ca in locul fontului default al browserului sa folosim alt font pentru intregul document se va apela la tag-ul BASEFONT , integrat in sectiunea HEAD a documentului : <head> <basefont face=Comic Sans MS color="red" size=+3> </head> Codul sursa de mai sus implica utilizarea ca default a noului font , cu culoarea rosie si cu o dimensiune mai mare cu 3 decat a fontului default al browserului . O alta observatie trebuie facuta legat de anumite caractere speciale care nu pot fi utilizate in mod normal ca text datorita faptului ca ele reprezinta cuvinte cheie ale limbajului HTML . Pentru a introduce aceste caractere exista posibilitatea de a folosi codul lor sau alte definitii standardizate ale acestora ca de exemplu pentru a obtine semnul de copyright : &copy -> browser-ul va afisa pe ecran semnul de copyright . In general simbolul & marcheaza pentru browser faptul ca incepem descrierea unui caracter special . Unul dintre cele mai folosite caractere speciale pentru HTML este spatiul ! In cazul in care in textul pe care dorim sa-l publicam in pagina noastra lasam un numar de 5 spatii intre doua cuvinte browser-ul va afisa doar un singur spatiu intre ele . Pentru a putea afisa mai multe spatii trebuie introdus caracterul special &nbsp : <body bgcolor="#FFFFFF"> Ceva tare ciudat. </body> Rezultatul acestei comenzi va fi : Ceva tare ciudat.
Alte caractere speciale des utilizate ar include : ( spatiu )
< ( < ) > ( > ) & ( & ) " ( " )
Recapituland , pana in acest moment am vazut cum se poate crea o pagina utilizand tag-urile de baza : <HTML>, <Head>, <Title>, </Title>, </Head>, <Body>, </Body>, </HTML> ; am aflat cum sa controlam culoarea folosita pentru fodul paginii , text , linkuri , linkuri active , linkuri vizitate , cum sa folosim o imagine ca fond al paginii si cum sa configuram fontul folosit in ceea ce priveste tipul , culoarea si dimensiunea . In continuare vom aborda alte tag-uri care aduc o imbunatatire controlului pe care il avem asupra continutului si prezentarii paginii noastre : si ~ tag-urile transforma textul din cadrul sau in text bold ( ingrosat ) . In locul acestei perechi de tag-uri se poate folosi si perechea si si ~ tag-urile transforma textul din cadrul sau in text italic ( cursiv ) . In locul acestei perechi de tag-uri se poate folosi si perechea si si ~ tag-urile transforma textul din cadrul sau in text subliniat ( underlined ) si ~ tag-urile transforma textul in superscript si ~ tag-urile transforma textul in subscript <s> si </s> ~ tag-urile transforma textul in strike . In locul acestei perechi de tag-uri se poate folosi perechea <strike> si </strike> ~ tag-ul comanda trecerea la un alt paragraf in cadrul paginii ; mai exact tag-ul comanda trecerea la linie noua si lasarea unei linii libere . Mai trebuie mentionat ca folosirea in serie a tag-ului : nu va duce la lasarea libera a trei linii , browser-ul va interpreta tag-urile ca pe unul singur . Folosit sub aceasta forma tag-ul nu necesita si complementarul de inchidere . Vom vedea imediat ca in cazul folosirii unor atribute ale tag-ului va apare si necesitatea utilizarii tag-ului complementar de inchidere In cadrul tag-ului se pot folosi atribute pentru alinierea textului la stanga ( pozitionarea default ) , la dreapta sau central . De exemplu : Acest text va fi aliniat la dreapta.
va produce : Acest text va fi aliniat la dreapta ~ tag-ul comanda trecerea la linie noua fara a incepe un nou paragraf ( = line break ) ; nu necesita tag de inchidere . In cazul in dorim trecerea la o linie noua este obligatorie folosirea tag-ului , simpla utilizare a tastei ENTER in cadrul codului sursa al paginii noastre nu are nici un efect in cadrul browser-ului . Pentru obtinerea mai multor linii libere se foloseste combinatia intre caracterul special pentru spatiu si tag-ul : <BODY BGCOLOR="#FFFFFF"> Ceva tare Ciudat. </BODY> Secventa de mai sus va duce la urmatorul rezultat in browser : Ceva tare
Ciudat. <BLOCKQUOTE> si </BLOCKQUOTE> ~ va pagina textul dintre tag-uri ca pe un citat ; mai explicit browser-ul va crea o margine libera in stanga si in dreapta textului : <BODY BGCOLOR="#FFFFFF"> <BLOCKQUOTE> Text folosit pentru a ilustra capacitatile diferitelor taguri HTML . Textul va fi folosit pentru a ilustra paginarea cu ajutorul tagului BLOCKQUOTE si apoi cu ajutorul tagului de centrare a textului in cadrul liniilor . </BLOCKQUOTE> </BODY> Secventa de mai sus va avea ca rezultat urmatoarea paginare :
Text folosit pentru a ilustra capacitatile diferitelor taguri HTML . Textul va fi folosit pentru a ilustra paginarea cu ajutorul tagului BLOCKQUOTE si apoi su ajutorul tagului de centrare a textului in cadrul liniilor . In cazul in care s-ar folosi tag-ul <center> : <center> Text folosit pentru a ilustra capacitatile diferitelor taguri HTML . Textul va fi folosit pentru a ilustra paginarea cu ajutorul tagului BLOCKQUOTE si apoi su ajutorul tagului de centrare a textului in cadrul liniilor . </center> s-ar obtine urmatoarea paginare : Text folosit pentru a ilustra capacitatile diferitelor taguri HTML . Textul va fi folosit pentru a ilustra paginarea cu ajutorul tagului BLOCKQUOTE si apoi su ajutorul tagului de centrare a textului in cadrul liniilor . <nb> ~ ( = non breaking space ) comanda introducerea unui spatiu in cadrul textului fara a duce la trecerea la alta linie . Nu se foloseste pentru introducerea unui spatiu in cadrul textului ci pentru a distanta imagini aflate pe aceeasi linie . Nu necesita tag de inchidere . <center> si </center> ~ tag-urile centreza textul dintre ele la nivel de linie . OBS : Tag-urile de formatare a textului pot fi folosite si combinat pentru a obtine efectul dorit : <center>I know how to use HTML tags!</center> <hr> ~ (= horizontal rule ) este un tag foarte folosit in cadrul paginilor web . Comanda duce la trasarea unei linii orizontale de-a lungul paginii . Acest tag poate primi mai multe atribute ce pot configura pozitia , culoare , dimensiunea liniei . <BODY BGCOLOR="#FFFFFF"> <HR WIDTH=50%> <HR WIDTH=100> </BODY> Prima comanda va trasa o linie orizontala cu lungimea de 50% din latimea paginii , de culoare albastra si centrata ; cea de-a doua instructiune va trasa o linie orizontala de 100 de pixeli . Tag-ul poate fi folosit si independent : <hr> ceea ce va duce la trasarea unei linii orizontale de lungul intregii pagini . In cadrul tag-ului <HR> se pot folosi si atributele ALIGN , SIZE si NOSHADE :
<HR WIDTH=60% ALIGN=RIGHT> <HR WIDTH=60% SIZE=8> <HR WIDTH=60% SIZE=15 NOSHADE> Atributul SIZE determina grosimea liniei iar NOSHADE face linia sa
devina solida .
<PRE> si </PRE> ~ dupa cum am aratat mai sus browser-ul nu prezinta pagina exact sub forma sub care vedem textul in momentul realizarii codului sursa al paginii ; pentru acest neajuns exista o solutie sub forma utilizarii acestor tag-uri . Sa luam exemplu urmator : <BODY BGCOLOR="#FFFFFF"> \|/ (@ @) +----oOO----(_)-----------+ | LeeView | | for | | President | +-----------------oOO-----+ |__|__| || || ooO Ooo </BODY> Acest cod sursa va rezulta dupa afisare in urmatoarea imagine : \|/ (@ @) +----oOO----(_)-----------+ | LeeView | | for | | President | +----------------oOO-----+ |__|__| || || ooO Ooo Simpla introducere a urmatorului cod sursa : <BODY BGCOLOR="#FFFFFF"> <PRE> \|/ (@ @) +----oOO----(_)-----------+ | LeeView | | for | | President | +-----------------oOO-----+ |__|__| || || ooO Ooo </PRE>
</BODY> Va duce la afisarea urmatorului rezultat :
\|/ (@ @) +----oOO----(_)-----------+ | LeeView | | for | | President | +-----------------oOO-----+ |__|__| || || ooO Ooo
IMAGINI Imaginea a devenit un element omniprezent in toate paginile web actuale . Bazat pe faptul recunoscut ca o imagine are un impact mult mai mare asupra privitorului decat un text precum si pe necesitatea oferirii unor informatii cat mai rapid si direct catre utilizator imaginea s-a impus ca elementul indispensabil oricarei prezentari a oricarui subiect . In cadrul paginilor web introducerea elementelor grafice la acest moment ne referim la imaginile de tip GIF sau JPG se face cu ajutorul tag-ului <IMG> . <IMG SRC="imagine.gif" WIDTH=82 HEIGHT=68> are ca efect introducere imaginii imagine.gif in pagina noastra , cu dimensiunile specificate in atributele WIDTH ( latime ) si HEIGHT ( inaltime ) ale tag-ului . Atributul SRC specifica sursa de unde browser-ul va incarca imaginea respectiva ; aceasta locatie poate fi in sistemul respectiv ( in directorul paginii sau in orice alt director ce va fi specificat in cale ) sau in orice alta locatie pe web ( ex. http://ura.data.ro/lectii/poza1.gif ) . In cazul in care nu se introduce o cale catre aceasta imagine ci doar numele ei atunci browser-ul va cauta in directorul curent al paginii web . Atributele WIDTH si HEIGHT pot lipsi iar browser-ul va recunoaste imaginea la dimensiunile ei originale ; chiar in cazul in care imaginea a fost special creat pe dimensiunile necesare paginii noastre este de preferat folosirea celor doua atribute care ajuta la incarcarea mai rapida a imaginii ( in caz contrar browser-ul va mai pierde timp calculand dimensiune si asezarea in pagina a imaginii respective ) . Un alt atribut care este preferabil sa fie prezent este ALT . Cu ajutorul acestui atribut putem oferi o alternativa browser-ului in cazul in care imaginea respectiva nu a putut fi incarcata :
<img src="1.gif" width=20 height=20 alt="Text in cazul lipsei pozei din calea generata"> Tag-ul anterior va face ca in cazul in care poza dorita nu este gasita browser-ul sa afiseze textul atributului ALT intr-o fereastra de dimensiunile specificate pentru imagine . Un alt atribut al tag-ului IMG este si BORDER ; cu ajutorul sau putem specifica grosimea unui chenar care inconjoara imaginea dorita . Tag-ul IMG accepta si el atributul ALIGN , intalnit de exemplu si in cadrul tag-ului . <Body> <img align=right src="1.gif" width=20 height=20 alt="Text in cazul lipsei pozei din calea generata"> Text care va apare alaturi de imagine neacoperind imaginea . </BODY> Comanda anterioara va pozitiona imaginea la dreapta liniei si va face ca textul sa apara in stanga imaginii ( analog pentru folosirea atributului ALIGN=left ) . In cazul folosirii valorii CENTER pentru atributul ALIGN se va obtine pozitionare in stanga a imaginii ( lucru default ) iar textul va incepe pe linia pozitionata in dreptul mijlocului imaginii , dupa umplerea acestei linii textul continuand pe linia urmatoare de sub imagine aceasta optiune este in general evitata . Pentru a obtine centrarea imaginii se va apela la incadrarea tag-ului IMG intre doua taguri complemetare <CENTER> si </CENTER> . Tot in cadrul atributului ALIGN mai putem intalni alte trei valori : bottom aliniaza partea inferioara a imaginii pe linia curenta top aliniaza partea superioara a imaginii cu cel mai inalt element de pe linia curenta middle aliniaza mijlocul imaginii cu linia curenta
LINKURI Mai intai sa vedem ce este un link ( sau o legatura ) . Pentru a fi cat mai simplu : un link reprezinta cuvintele subliniate in cadrul unei pagini si pe care poti da click pentru a naviga catre alte locatii . Practic orice element al unei pagini web poate fi asociat unui link : un text , o imagine sau doar o portiune de imagine . <a href="http://www.yahoo.com">Yahoo</a> Secventa anterioara reprezinta introducerea unui link catre pagina Yahoo .
<a> si </a> ~ ( = anchor ) tag-urile transmit browser-ului faptul ca urmeaza definirea unui link . Adresa link-ului se incadreaza in href= ; href vine de la Hypertext Reference si este un atribut al tag-ului <A> . Dupa incheierea tag-ului <A> urmeaza textul sau imaginea care urmeaza sa faca legatura catre linkul dorit . In cazul in care dorim realizarea unei legaturi catre o alta pagina din acelasi director se va introduce in cadrul atributului href doar numele paginii : <a href="continut.htm">Continut</a> Un alt tip comun de legatura este linkul in cadrul aceleiasi pagini . Pentru a crea un astfel de link trebuie realizati doi pasi . In primul rand trebuie sa identificam sectiunea paginii unde vrem sa putem sari si apoi sa realizam linkul . Pentru primul pas definirea zonei la care dorim sa se faca legatura avem doua posibilitati : <a name=definitie_zona> Text </a> sau Text Prima posibilitate este si cea mai corecta realizand o ancora legata de textul respectiv ; a doua posibilitate este de reprezinta de fapt definirea unui paragraf , cu ajutorul unui atribut al tag-ului . Saltul propriu-zis la aceasta zona definita se face prin intermediul urmatoarei linii de cod : <a href="#definitie_zona">Acest link va duce inapoi la zona definita</a> Saltul se poate face si combinat la o anumita zona definita in alta pagina , ca in exemplul urmator : <a href="pagina2.html#definitie_zona">Acest link va duce inapoi la zona definita in pagina 2</a> O alta intrebuintare foarte des intalnita a tag-ului <a> tine de inserarea in pagina web a unei adrese de contact , mai exact o adresa de mail . Urmatoarea linie de cod realizeaza exact acest lucru , cuvantul cheie mailto specificand browser-ului ca urmeaza o adresa de mail iar acesta va lansa clientul de mail al vizitatorului paginii cu adresa adresa@yahoo.com gata introdusa in cadrul mesajului : <a href="mailto:adresa@yahoo.com">Send E-Mail</a>
Un atribut folositor al tag-ului este si SUBJECT , mail-ul trimis de vizitator primind astfel un subiect gata definit de dumneavoastra : <a href="mailto:adresa@yahoo.com?subject=testare">Send E-Mail</a> Tot in problema linkurilor mai trebuie sa amintim si posibilitatea de a defini o adresa de baza pentru linkurile din pagina noastra . In mod normal pentru un link catre o pagina din acelasi director se foloseste doar numele paginii . Sa presupunem ca toate linkurile din pagina noastra sunt catre pagini aflate intr-un acelasi director DIRECTOR_SURSE ; in acest caz putem reduce textul presupus de introducerea acestei cai in fiecare atribut HREF in modul urmator : <HEAD> <BASE HREF=http://www.site.com/director_surse> </HEAD> Dupa utilizarea acestui cod sursa putem utiliza in cadrul atributului HREF doar numele fisierului respectiv . LISTE Listele sunt un element foarte des intalnit in cadrul paginilor web datorita in principal impactului vizual mai ridicat decat al textului simplu . In general putem discuta despre doua tipuri de liste : neordonate si ordonate . Listele neordonate prezinta elementele listei unul sub altul , cu un asa numitele bullet-uri la stanga elementului . Listele ordonate inlocuiesc aceste bullet-uri cu numerale sau litere in ordine crescatoare . LISTE NEORDONATE : <ul><li>Element 1 <li>Element 2 <li>Element 3 </ul> Aceasta comanda va duce la crearea unei liste neordonate : Element 1 Element 2 Element 3
Tag-ul <UL> poate folosi atributul TYPE cu valorile SQUARE , DISC si CIRCLE pentru a specifica formatul bullet-ului elementelor listei . Acelasi atribut TYPE poate fi utilizat si in cadrul tag-ului <LI> pentru a specifica individual formatul bulletului pentru fiecare element al listei in parte . LISTE ORDONATE <ol><li>Element 1<li>Element 2<li>Element 3 </ol> Aceasta comanda va produce urmatoarea lista ordonata :
1. Element 1 2. Element 2 3. Element 3 Tag-ul <OL> poseda doua atribute foarte folositoare : START si TYPE . Atributul START determina valoarea numarului de ordine al primului element din lista . Atributul TYPE poate avea patru valori : a ~ pentru ordonare cu ajutorul literelor mici A ~ pentru ordonare cu ajutorul majusculelor I ~ pentru ordonare cu ajutorul numeralelor romane majuscule I ~ pentru ordonare cu ajutorul numeralelor romane minuscule 1 ~ pentru ordonarea numerica ( default )
Tag-ul <LI> - care introduce un element al listei poseda si el un atribut extrem de folositor : VALUE ; cu ajutorul sau putem specifica o anumita valoare pentru numarul de ordine al acelui element ( elementele urmatoare vor fi numarate incepand cu aceasta noua valoare ) : <OL> <LI> linia 1 <LI value=7> linia 2 <LI> linia 3 </OL> Va produce urmatorul efect : 1. linia 1 7. linia 2 8. linia 3 Tag-ul <LI> poate utiliza si el atributul TYPE pentru a formata individual numerotarea elementului respectiv al listei . Un alt tip de lista intalnit destul de des este si tipul lista de definitie . <BODY BGCOLOR="#FFFFFF"> <DL> <DT>Termen de definit <DD>Definitia termenului </DL> </BODY> Tag-ul folosit este <DL> ( = definition list ) , <DT> este urmat de termenul ce urmeaza a fi definit iar <DD>
specifica definitia propriu-zisa a termenului .
OBS : In limbajul HTML este permisa folosirea comentariilor ; acestea incep cu  . Orice tag inserat intre marcajele de comentariu este ignorat de browser .

Curs 1 Web

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs 1 Web

Încărcat de

Drepturi de autor:

Formate disponibile

Curs Programare WEB Curs 1 Elemente de baza Pentru inceput sa descoperim originea abrevierii HTML - Hypertext Markup Language

Alte caractere speciale des utilizate ar include :   ( spatiu )

< ( < ) > ( > ) & ( & ) " ( " )

</BODY> Va duce la afisarea urmatorului rezultat :

\|/ (@ @) +----oOO----(_)-----------+ | LeeView | | for | | President | +-----------------oOO-----+ ||| || || ooO Ooo

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

Curs 1 Web

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curs 1 Web

Încărcat de

Drepturi de autor:

Formate disponibile

Curs Programare WEB Curs 1 Elemente de baza Pentru inceput sa descoperim originea abrevierii HTML - Hypertext Markup Language

Alte caractere speciale des utilizate ar include : &nbsp; ( spatiu )

&lt; ( < ) &gt; ( > ) &amp; ( & ) &quot; ( " )

</BODY> Va duce la afisarea urmatorului rezultat :

\|/ (@ @) +----oOO----(_)-----------+ | LeeView | | for | | President | +-----------------oOO-----+ |__|__| || || ooO Ooo

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

Alte caractere speciale des utilizate ar include : ( spatiu )

< ( < ) > ( > ) & ( & ) " ( " )

\|/ (@ @) +----oOO----(_)-----------+ | LeeView | | for | | President | +-----------------oOO-----+ ||| || || ooO Ooo