Curs HTML - Crearea unei pagini web

In acest tutorial veti invata sa creati o pagina HTML. Vom lua ca exemplu modelul din imaginea de mai jos:

Lucruri importante (pentru incepatori) care sunt mentionate in tutorial:
1. Cum faci un link
2. Cum inserezi o imagine
3. Cum aplici culori textelor, paginii, etc.
4. Cum faci un tabel
5. Cum aliniezi un text/imagine

Resurse necesare:
I. Macromedia Dreamweaver , Link: Descarca! (Serial: WPD800-54434-44132-66107)
II. Fotografie RBD, Link: Descarca !

1. Pregatirea pentru crearea paginii web
- cream in Desktop (Spatiul de lucru) un folder numit site, iar in acesta cream un alt folder imagini in care punem imaginea rbd.jpg (cea descarcata)
- intram in Dreamweaver [selectati Designer daca sunteti la întâia utilizare] > in mijloc, sub Realizate New efectuati clic pe HTML
- apasati de la tastatura Ctrl + S sau in meniu File > Save si salvati pagina sub numele index.html in folderul site
* Daca aveti afisat in fata doar cod efectuati clic pe DESIGN ca in imaginea de mai jos:

* acea steluta de langa index.html inseamna ca ati facut modificari in document dar nu ati salvat; numaidecât dupa ce faceti salvarea va dispare

2. Inceperea crearii paginii
a)- Inapoi in Dreamweaver, avem o pagina goala. Sus unde scrie Title punem titlul paginii (ex: .:: ReBelDe ::.). Jos dam click pe Page properties si ne apare o fereastra cu optiuni unde introducem la Background color: #99CC33. Observati un patratel in stanga unde tocmai ati introdus valoarea respectiva. Daca dati clic pe el va apare o tabela de culori din care puteti alege. La urma apasam Apply > Ok. Observam ca s-a schimbat culoarea fundalului !

- apoi selectam din meniul Insert > Table, completam Rows: 3, Columns: 1 si apasam Ok. Deci tocmai am construit un tabel cu 3 linii si 1 coloana. Il selectam facand clic stanga pe una din bordurile acesteia (daca nu este deja selectat). Jos la Properties (Proprietati) completam:
Bg color: #e28e14; W: 940; CellPad: 0; CellSpace: 0; Border: 0; Align: Center si ca sa intelegeti ce ati facut:
Bg color - prescurtare din en. Background color - Alură fundal (#e28e14)
W - din en. Width - Latime (940 pixeli)
CellPad & CellSpace - Spatiu intre celule (0)
Align - aliniere (pe centru)
Dupa aceea efectuati un clic in interiorul primei linii din tabel si jos la Proprietati puneti H: 100 (Height - Inaltime)

- acum vom introduce un alt tabel tot in prima linie, selectam Insert > Table cu 1 linii si 1 coloane apoi apasam Ok. Jos la proprietati completam W: 100 (si imediat in dreapta selectam %), H: 35, Bg color: #4871c1, CellPad: 0, CellSpace: 0, Border: 0.

b)- facem clic in interiorul linii a 2-a din tabelul initial, mergem la Insert > Image si cautam Desktop > Site > Imagini > rbd.jpg si o introducem in pagina.

- facem un alt clic in linia a 2-a dar NU pe imagine si jos la Proprietati selectam Horz: Center (in ro. aliniere Orizontal: Centrat)

c)- pe linia a 3-a tastam textul: Copyright 2006, Site realizat de EU, Multumesc eXtreamPortal.com!
- la Proprietati selectam culoarea textului #666666, fundalul liniei #999933 si alinierea pe centru ca in imagine:

- daca culoarea textului nu s-a schimbat il selectati si ii dati culoarea necesara

d) - revenim la prima linia in care avem un tabel. In acesta tastam:
Pagina principala | CV | Album foto | Jocuri | Legaturi | Scripturi | Formular | Pagina mea
- apoi facem ceva asemanator ca in imaginea de mai sus; selectam intreg textul si ii aplicam: aliniere pe centru, culoare text: #99CC66 si in plus Size: Large (in ro. Dimeniunea: Larga)
- urmatorul pas este sa cream linkurile; pentru aceasta se selecteaza un cuvant sau paragraf si punem jos la Link locatia unde vrem sa ne duca.
ex: Link: despremine.html
Target: _blank (la clic se deschide o pagina noua!)

3. Vizualizarea paginii web
- salvati (Alt + S sau File > Save)
- deschideti pagina index.html intr-un rasfoitor (Internet Explorer, Firefox, etc.)

Cam atat cred..sper sa va iasa bine pagina, daca nu astept intrebari...

*In semn de multumire, cine doreste, poate lasa un mic banner sau link catre site-ul nostru. Banner aici: www.extreamportal.com/images/exlogo.jpg