6 Pagina Principala 1

verde.
ro - cu noi internetul este simplu Page 1 of 1
CAP VI - Pagina principala (1)
acum avem elementele grafice necesare, asa ca putem incepe sa lucram la codul html propriu-zis. deschide notepad, prietenul
cel mai bun al unui webdesigner. ca de obicei, vom scrie codul direct in notepad. fisierul la care lucram acum va fi salvat cu
numele index.html.
in acest capitol vom prezenta acea parte din codul html care contine numai notiunile pe care le-am prezentat in primul ghidul
html de pe acest site. in capitolul urmator vor veni noutatile. pana atunci, copiaza urmatoarea bucata de cod in notepad:
<html>
<head><title>alternative travel services</title></head>
<body bgcolor=#eeeeee>
<table width=100% height=100%><tr><td align=center valign=center>
<table width=750 border=0 cellspacing=0 cellpadding=25>
<tr>
<td bgcolor=#666666 valign=top align=left>
<img src=poza.jpg><br>
<img src=but.jpg><a href=eat.html><img src=but1.jpg border=0></a><a
href=play.html><img src=but2.jpg border=0></a><a href=relax.html><img src=but3.jpg
border=0></a><br>
</td>
<td bgcolor=#666666 valign=top align=left>
<br><img src=titlu1.jpg><br><br>
<font face=verdana,arial size=2 color=#ffffff>
Dear customers, <br><br>
Welcome to the the official website of Alternative Travel Services. Our company specializes
in
leisure and business travel, both domestic and international.<br><br>
Our dedicated staff is here to assist you and provide all the necessary information. ATS is
the travel company of choice for millions of people from all over the world.<br><br>
We offer convenient and affordable packages that will meet all your expectations, and
surpass them.
<br><br>John Doe, Manager.
</font>
</td>
</tr>
</table>
</td></tr></table>
</body>
</html>
salveaza fisierul rezultat cu numele de index.html in acelasi folder in care ai salvat si fisierele jpg create in capitolele
anterioare. deschide-l apoi in Internet Explorer ca sa iti admiri munca. daca din diverse motive ai preferat sa nu creezi singur
acele fisiere, atunci salveaza-le din aceasta pagina (click cu butonul din dreapta pe fiecare link iar apoi save picture as...):
poza.jpg, poza2.jpg, but.jpg, but1.jpg, but2.jpg, but3.jpg, but4.jpg, but5.jpg, but6.jpg, but7.jpg, titlu1.jpg, titlu2.jpg, titlu3.jpg,
titlu4.jpg. daca ti-ai creat singur fisierele in photoshop, poti da click pe link-urile precendente pentru a vedea daca acele fisiere
ti-au iesit cum trebuie (se deschid in ferestre noi).
acum cateva explicatii pentru codul de mai sus. in primul rand, toate elementele folosite ar trebui sa fie notiuni cunoscute deja
(parca suntem la scoala). se remarca cele doua sectiuni ale unui fisier html: head si body. prima sectiune specifica titlul paginii,
intre tag-urile <title> si </title>. urmeaza apoi tag-ul <body> care marcheaza inceperea codului pentru pagina, si care contine
atributul bgcolor ce specifica o culoare gri foarte deschis pentru fondul paginii.
ca si structura, am folosit un tabel inclus intr-un tabel. primul tabel contine o singura celula, delimitata de tag-urile <table
width=100% height=100%><tr><td align=center valign=center> (al patrulea rand din codul de mai sus) si
</td></tr></table> (al treilea rand de la sfarsit in codul de mai sus). prin atributele width=100% height=100% acest tabel
ocupa toata suprafata disponibila a ecranului. rolul lui este de a pozitiona cel de-al doilea tabel (ce contine continutul propriu-
zis) in centrul ecranului, prin atributele align=center valign=center. aceasta este un mecanism utilizat destul de des pentru a
pozitiona continut in centrul ecranului.
in acest prim tabel se afla cel de-al doilea tabel, cel cu continutul propriu-zis al paginii. acesta este delimitat de tag-urile <table
width=750 border=0 cellspacing=0 cellpadding=25> (al cincilea rand de sus din cod) si </table> (al patrulea rand de jos din
cod). acest tabel are un singur rand (delimitat tag-urile <tr> pe randul 6 de sus si </tr> pe randul 5 de jos). acest rand contine
doua celule. prima celula are ca fond un gri inchis (atributul bgcolor=#666666), iar continutul sau este centrat pe verticala si
aliniat la stanga pe orizontala (atributele valign=top align=left). ca si continut, aceasta celula contine imaginea cu zgarie-norii
(poza.jpg); sub aceasta se afla randul de butoane - simbolurile: but.jpg, but1.jpg, but2.jpg si but3.jpg. pe but.jpg nu se poate
apasa, acesta avand doar rol ornamental. celelalte trei butoane se folosesc pentru a accesa paginile eat.html, play.html si
relax.html de care ne vom ocupa intr-un capitol ulterior. fii atent sa nu introduci nici un spatiu suplimentar in codul
corespunzator acestor butoane (in principal nu trebuie sa ai nici un spatiu intre caracterele > si < din codul pentru butoane).
cea de-a doua celula are aceleasi caracteristici (culoare fond si aliniere) si drept continut titlul (fisierul titlu1.jpg) si un text scris
cu font verdana de marime 2 si culoare alba. ca sa observi mai bine structura tabelelor de mai sus, incearca sa adaugi atributul
border=1 in tag-urile <table>.
prin utilizarea atributului cellspacing=0 in definitia tabelului, am facut ca cele doua celule ale acestuia sa formeze un bloc
complet, fara spatiu intre ele. in rest, notiuni cunoscute. mai departe, sa vedem niste imbunatatiri.
http://www.verde.ro/ghid2/7.html 30.04.2004

6 Pagina Principala 1

Î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

6 Pagina Principala 1

Încărcat de

Drepturi de autor:

Formate disponibile

verde.

ro - cu noi internetul este simplu Page 1 of 1

CAP VI - Pagina principala (1)

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