Html
HTML - structura unui document html - heading-uri, paragrafe, formatul textuluiIntroducere Pagina principala trebuie denumita index.html, majoritatea serverelor recunosc pagina principala dupa aceasta denumire. Pentru a crea acest fisier deschideti Notepad si salvati fisierul cu numele index.html. Acest fisier 'index.html' il puteti deschide cu orice Browser de internet. Pentru a vedea sau edita codul html dintr-un document HTML nu trebuie decat sa dati click dreapta si sa selectati View Source. Codul HTML este format din elemente de marcare numite tag-uri (etichete). Tag-urile se scriu intre semnele '<' si '>'. De exemplu tag-ul <p> da comanda de deschiderea unui paragraf, iar tag-ul </p> da comanda de inchidere a paragrafului. Tag-ul <b> da comanda de a incepe scrierea cu caractere Bold, iar tag-ul </b> da comanda de a opri scrierea cu caractere Bold. Exemplu: <p>Acesta este un paragraf</p>
<p>Aceste este un <b>paragraf</b></p> Unde cuvantul
'paragraf' este scris cu caractere Bold. Continutul fiecarui document
HTML trebuie scris intre tag-urile <html> si </html>
. <html> Structura unui document Documentele HTML au doua parti 'head' si 'body' . Prima parte Head-ul este delimitat de Tag-urile <head> si </head> si contine informatii de identificare a paginii precum si titlul paginii delimitat de tag-urile <title> si </title> ( Acesta va aparea pe bara de titlu a paginii ). Si o a doua parte Body-ul , delimitat de tag-urile <body> si </body>, body-ul este partea cea mai mare a documentului unde se va gasi continutul paginii. <html> <head> <body> </html> Nota: Aceste Tag-uri vor aparea doar o singura data intr-un document HTML. Heading-uri Heading-urile sunt unele dintre cele mai importante tag-uri .Titlurile si subtitlurile documentelor se vor marca cu Heading-uri. Tag-urile de deschidere pt Heading sunt <h1>,<h2><h6> iar tag-urile de inchidere </h1>,</h2></h6>. Cifrele reprezentand marimea , 1 fiind cel mai mare iar 6 cel mai mic . Exemplu: <h1>Heading 1</h1> Nota: Folositi heading-urile pentru titluri. Nu folositi heading-uri pentru a face textul mare sau bold. Paragrafe Paragrafele se folosesc foarte mult in HTML . Tag-urile pt paragrafe sunt <p> pt deschiderea paragrafului si </p> pt inchiderea paragrafului. <p>Acesta este un paragraf</p> Daca doriti sa treceti la un nou rand, fara a folosi un alt paragraf, folositi tag-ul <br />. <p>Acest text este<br />scris pe<br />trei randuri</p> Heading-urile si paragrafele suporta atribute de aliniere in pagina: Aliniere stanga, in centru, la dreapta. Exemplu: <h3 align='left'>Aliniere stanga</h3> <p align='center'>Aliniere centru</p> <p align='right'>ALiniere Drepata</p> Formatul textului In documentele pe care le veti crea veti folosi diferite stiluri de text pentru a pune in evidenta anumite cuvinte sau pentru a le acorda o seminficatie dorita. Cel mai usor mod de a marca un anumit stil corespunzator unor cuvinte sau a unui text in documentul dumneavoastra este de a folosi Tag-uri ca <b>,<i> si <u> care modifica stilul fontului, in tabelul de mai jos gasiti o lista cu stiluri de text:
Nota: Toate aceste tag-uri necesita tag-uri de inchidere. Culoarea si modelul Pt dimensiunea, culoarea si modelul corpului de litera folosim tag-ul <font> si </font>. <font color='#ff0000' size='2' face='arial'>Text</font> Color:
<font
color='#FF0000'>Text</font> Despre culori puteti afla mai multe la capitolul Culori
<font size='3'>Text</font> Face: <font
face='Arial'>Text</font> Linii Orizontale Liniile orizontale sunt folosite pentru a separa anumite arii intr-o pagina web. Tag-ul pentru o linie orizontala este <hr />. Acestui tag i se pot adauga anumite atribute ca : Width (lungimea liniei), Size (pentru linie ingrosata dar transparenta) sau Noshade (pentru linie ingrosata plina). Exemple : <hr width='300px' /> <hr width='30%' /> <hr size='5' /> <hr noshade='noshade' /> Se pot folosii si mai multe atribute untr-un singur tag : <hr width='200px' size='3' noshade='noshade' /> Comentariile In cadrul documentului HTML
puteti face comentarii, care nu vor fi afisate de catre browser. Exemplu: <!-- Acesta este un comentariu.--> Culori Am vazut in capitolul anterior ca textele din paginile HTML pot avea diverse culori cu un tag de tipul <font color='#00FF00'>Text</font>. Va voi prezenta in continuare sistemul de codificare a culorilor pentru paginile web. Valorile atributelor referitoare la culorile textului, fondului sau ale altor elemente se pot exprima fie prin codul hexazecimal al culorii respective, fie prin numele unei culorii ( Red, blue, yellowetc). Exemplu: <p> <font color='#000000'>Acest text
este negru</font><br /> </p> Exista 16.7 milioane de culori
diferite in sistemul de culori hexadecimal (hex) incepand de la #FFFFFF care este Alb, pana la #000000 care este Negru. Dar este de preferat ca atunci cand utilizati culori sa apelati la una din culorile standard. Iata un tabel cu nume si coduri pentru cateva culori :
Folosind acelasi sistem vom putea specifica culoarea de fundal (background) a unei pagini web, in cadrul tag-ului <body> despre care v-am vorbit la inceputul acestui curs: <body bgcolor='#00FF00'> Tag-ul <body> mai poate
contine si alte informatii legate de culori, ca de exemplu culoarea cu care vor
fi afisate link-urile catre alte pagini folosind atributele LINK si VLINK . <body bgcolor=#808080 link=#00FF00 vlink=#0000FF> Dar despre link-uri vom vorbi mai multe in capitolul Link-uri. Liste De multe ori, in redactarea
unui text ajungem in punctul in care trebuie sa
enumeram un set de elemente. Prezentarea acestora trebuie realizata in asa fel
incat relatiile dintre ele, sau dintre ele si eventualele
'subelemente' sa fie cat mai clar exprimate
din punct de vedere vizual. Pentru aceasta se folosesc
diferitele tipuri de liste. Liste neordonate Lista neordonata (nenumerotata)este probabil cea mai folosita in cadrul documentelor HTML. Pentru a marca inceputul si sfarsitul unei liste neordonate se foloseste tag-ul <ul> pentru deschidere si </ul> pentru inchiderea listei, iar pentru fiecare element prezentat in lista se folosesc tag-urile <li> si </li>. Exemple <h3>Lista neordonata 1</h3> <h3>Lista neordonata 2</h3> Cu ajutorul
atributului Type putem schimba marcajul elementelor din lista, dupa cum ati
vazut in exemplul de mai sus.
Liste Ordonate Diferenta intre lista neordonata si cea ordonata este faptul ca listele ordonate atribuie ca marcaj fiecarui element un numar sau o litera. Pentru a marca inceputul si sfarsitul unei liste ordonate(numerotate) se foloseste tag-ul <ol> pentru deschidere si </ol> pentru inchiderea listei, iar pentru fiecare element prezentat in lista se folosesc la fel ca la listele neordonate tag-urile <li> si </li>. Exemplu: <h3>Lista ordonata</h3> La fel ca la lista neordonata cu ajutorul
atributului Type putem schimba marcajul elementelor din lista. Liste de definitii O lista de definitii este o lista de elemente carora li se pot adauga o
descriere. Exemplu: <h4>Lista de definitii</h4>
Tabele Tabelele sunt unele din
cele mai provocatoare lucruri din codul HTML. Nu sunt greu de creat si de folosit dar au un cod mai lung si necesita mai multa atentie. Exemplu: <table border=1> Tag-urile de definire a
tabelelor pot avea diverse atribute, pentru formatarea tabelului. Exemplu: <table width='500'
height='50%' border=1 cellpadding=1 cellspacing=10> Dupa cum ati vazut in exemplul de mai sus, se pot folosii mai multe atribute in cadrul aceluiasi tag <table>. Adaugarea atributului rowspan='n' tag-ului
<td> permite acelei casute sa se intinda pe n
randuri. <table border=1> <table border=1> Link-uri Un element foarte
important intr-o pagina web il constituie link-urile. Este foarte util sa adaugati un link intr-o pagina iar atunci cand dati click
pe el sa fiti trimis in alta pagina sau in alta parte a aceleiasi pagini sau
chiar catre alt site. Pentru link-uri se foloseste tag-ul <a
href='locatie'> si tag-ul de inchidere </a>, tot ceea ce veti scrie intre aceste doua tag-uri va aparea in pagina colorat
si subliniat. In momentul in care veti face click pe acel text browser-ul va fi trimis catre acea locatie. Apasati <a href='Pagina 2.html'>aici</a> pentru pagina 2. Atributul target: <a href='https://notepad-plus.sourceforge.net/uk/site.htm' target='_blank'>Notepad++</a> Dupa cum puteti vedea in
exemplul de mai sus am adaugat si atributul target='_blank'. Va voi
prezenta doua valori pentru Target care sunt simple si foarte utile: O alta varianta este posiblitatea transmiterii unui e-mail. Astfel, codul de mai jos afiseaza 'Contact !', text care prin apasare va deschide o fereastra pentru transmiterea unui mesaj la adresa electronica a destinatarului mesajului. <a href='mailto:contact@gmail.com'>Contact !</a> Tot cu ajutorul link-urilor puteti da posibilitatea vizitatorului sa salveze de pe site-ul dumneavoastra un fisier sau o arhiva: <a href='program.rar'>Salveaza programul.</a> Pentru inceput este bine ca toate documentele HTML, imaginile si alte
fisiere sa fie in acelasi director cu locatia documentului index.html. Astfel
incat, atunci cand puneti link-urile sa nu fie nevoie
sa introduceti toata locatia documentului ci doar denumirea. <a href='director/program.rar'>Salveaza programul.</a> Imagini Puteti adauga
paginii dumneavoastre imagini. Tag-ul folosit pentru a
adauga o imagine este Exemplu: <img scr='imagine.jpg'> Este recomandata adaugarea atributelor height si width, acestea permit imaginii sa aiba diferite dimensiuni. <img scr='imagine.jpg' height='200' width='100'> Deasemenea folosirea atributului border=n unde n este grosimea chenarului din jurul pozei in pixeli. <img scr='imagine.jpg' height='200' width='100' border='3'> O imagine poate fi aliniata, astfel incat textul sa poata fi scris in staga sau in dreapta imaginii. Folosind atributul align='left | right'. <p> Aceasta imagine este aliniata drepata si permite scrierea textului in partea stanga a imaginii. O imagine se poate folosi si
drept link, asta inseamna ca in momentul unui click pe imaginea respectiva
sunteti trimis catre o alta pagina. Acest lucru este foarte usor de facut, intre tag-urile de adaugare link Exemplu: <a href='https://www.google.com' target='_Blank'><img scr='imagine.jpg'></a> O imagine poate fi folosita si ca fundal (Background) pentru pagina de internet. Pentru aceasta se introduce atributul background in cadrul tag-ului <body>. Exemplu: <body background='imagine.jpg'>
|