|
|
PASUL 1:
Va faceti un template (cu macromedia dreamweaver, macromedia fireworks, notepad, word etc) sau descarcati unul de pe internet. Template-uri gasiti pe siteuri precum www.freewebtemplates.com , www.freelayouts.com , www.webtemplateszone.com , http://freesitetemplates.com/ , sau puteti cauta pe google " Free web templates " sau "free templates" sau "free website templates" etc.
Acum voi explica cum se lucreaza intr-un editor de texte cu un fisier .html, ce trebuie sa contina acesta, cum se face un template, etc.
Luati un fisier .html gol, fara nimic. Il deschideti cu un editor de texte (de exemplu, notepad).
scrieti:
Cod:
<html>
<head>
</head
<body>
</body>
</html>
*Nota:
<html> --- in susul paginii
</html> --- in josul paginii
Apoi, intre <head> si </head> scrieti:
Cod:
<title>Titlul paginii</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<meta name="description" content="descrierea siteului">
<meta name="keywords" content="keyword1, keyword2, keyword3, etc">
Nota:
>titlul trebuie sa aiba cel putin doua caractere si cel mult 60
>descrierea trebuie sa aiba cel putin doua caractere si cel mult 150
>in spatiul ce contine "keyword-urile" trebuie sa scrieti cel putin doua caractere si cel mult 874.
Sfatul meu este sa folositi o descriere cat mai detaliata, un titlu cat mai sugestiv si cat mai multe keyword-uri, pentru a putea obtine o pozite cat mai buna in paginile de rezultate ale motoarelor de cautare. Banuiesc ca stiti ce inseamna "keyword". Totusi, pentru cei care nu stiu, "keyword" = cuvant (sau cuvinte) cheie; cuvant care descrie continutul siteului sau a paginii unde se afla keyword-ul, folosit de motoarele de cautare. Adica, nea' Ion cauta pe google "pascutul vacilor" si dumneavoastra aveti in pagina un articol despre pascutul vacilor, trebuie sa scrieti la keywords: "vaci, pascutul vacilor, iarba" si tot asa.
Puteti folosi un generator de astfel de tag-uri: http://www.scrubtheweb.com/abs/builder.html
Daca vreti, dupa tag-urile de mai sus, puteti adauga:
Cod:
<meta name="copyright" content="numele companiei sau numele dumneavoastra">
<meta name="author" content="numele dumneavoastra sau adresa de email">
<META NAME="robots" CONTENT="index,follow"> asta daca doriti ca motoarele de cautare sa indexeze si linkurile din pagina respectiva.
Cam asa ar trebui sa arate pana acum fisierul vostru .html:
Cod:
<html>
<head>
<title>Titlul paginii</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<meta name="description" content="descrierea siteului">
<meta name="keywords" content="keyword1, keyword2, keyword3, etc">
<META NAME="robots" CONTENT="index,follow">
</head
<body>
</body>
</html>
Sper ca ati inteles ceva pana acum...
Acum am terminat cu ceea ce trebuie sa puneti intre <head> si </head>. La unele javascript-uri va trebui sa mai adaugati cate ceva intre aceste tag-uri, dar nu va fi aceasta o problema, daca urmati instructiunile de folosire al scriptului respectiv.
Acum, avem ceva mai multa treaba intre <body> si </body>
Dupa <body puteti adauga: bgcolor="#000000" text="#C0C0C0" link="#C0C0C0" vlink="#C0C0C0" alink="#C0C0C0"
Bgcolor,link, vlink, si alink definesc culorile background-ului si ale linkurilor (linkurilor simple, cu cursorul peste ele si linkuri vizitate). Puteti schimba culorile cum vreti dumneavoastra, acesta este doar un exemplu. Pentru a pune o imagine pe background-ul paginii, puteti adauga dupa <body si background="linkul imaginii". Totusi, pentru imagine pe background va sfatuiesc sa folositi codul <style>body{background: black url(Linkul imaginii) fixed}</style> , pe care-l puteti pune oriunde, intre <body> si </body>.
Cam asa ar trebui sa arate prima parte:
Cod:
<body bgcolor="#000000" background="linkul imaginii" text="#C0C0C0" link="#C0C0C0" vlink="#C0C0C0" alink="#C0C0C0">
nu este absolut necesar sa puneti toate acestea, dar infrumuseteaza pagina big grin.
Intre <body> si </body> se afla continutul "vizibil" al paginii. Aici puneti textul, codurile pentru imagini si diversele coduri pentru tot felul de efecte. Coduri html, care va mai pot infrumuseta cat de cat pagina gasiti pe www.tsk.lx.ro/coduri_html.html . Sfatul meu este sa nu folositi prea multe astfel de coduri si sa incarcati paginile aiurea cu tot felul de lucruri inutile.
Acum voi da numai cateva exemple, pentru a va "initia" in html.
Ce-ar fi sa punem si niste tabele? Tabelele sunt baza oricarui template.
Codul pentru tabel este urmatorul:
Cod:
<table border=1 cellspacing=0 cellpadding=5>
<tr>
<td>Primul Rand - Celula 1</td><td>Primul Rand - Celula 2</td><td>Primul Rand - Celula 3</td>
</tr>
<tr>
<td>Al Doilea Rand - Celula 1</td><td>Al Doilea Rand - Celula 2</td><td>Al doilea Rand - Celula 3</td>
</tr>
<tr>
<td>AL treilea Rand - Celula 1</td><td>Al treilea rand - Celula 2</td><td>Al treilea rand - Celula 3</td>
</tr>
</table>
Sa analizam putin acest cod:
<table border=1 cellspacing=0 cellpadding=5>
>>>"border" denumeste conturul tabelului. Daca vreti, in loc de 1 puneti 0 si conturul va disparea. Daca in loc de 1 puneti 5, conturul va fi mai gros.
>>>"cellspacing" denumeste spatiul dintre celule
>>>"cellpadding" denumeste spatiul dintre continutul celulei si bordura
dupa cellpadding se pot introduce anumite elemente. De exemplu: style="border-collapse: collapse" (acesta este un stil pentru contur).Se mai pot introduce: bordercolor="#culoare" width="800" height="500" .
Bordercolor defineste culoarea conturului,width defineste latimea tabelului, iar height inaltimea.
Dupa <td se pot introduce: width="50%" height="100".
Cam asa ar trebui sa arate codul tabelului:
Cod:
<table border=1 cellspacing=0 cellpadding=5 style="border-collapse: collapse" bordercolor="#000000" width="800" height="10">
<tr>
<td width="50%" height="100">Primul Rand - Celula 1</td><td>Primul Rand - Celula 2</td><td>Primul Rand - Celula 3</td>
</tr>
<tr>
<td>Al Doilea Rand - Celula 1</td><td>Al Doilea Rand - Celula 2</td><td>Al doilea Rand - Celula 3</td>
</tr>
<tr>
<td>AL treilea Rand - Celula 1</td><td>Al treilea rand - Celula 2</td><td>Al treilea rand - Celula 3</td>
</tr>
</table>
Cifrele existente in acest cod sunt doar niste exemple, pot fi modificate dupa preferintele dumneavoastra. Cu imaginatie, rabdare si multe incercari, puteti face un template frumos, format numai din tabele. Bineinteles, in celulele acestor tabele va trebui sa inserati tot felul de efecte, care ii vor da "personalitate" templateului. De exemplu, dupa <td mai puteti introduce si background="linkul imaginii" pentru background numai in celula respectiva. Oricum, toate acestea pot fi facute mult mai usor si mai repede, fara prea multe cunostinte de html, cu Macromedia Dreamweaver.
PASUL 2:
Puneti toate fisierele intr-un folder. De exemplu, eu am pus fisierul index.html si folderul "images", care contine toate imaginile necesare templateului) in folderul "site" :
PASUL 3:
Daca ati descarcat template-ul de pe net, incepeti editarea acestuia. Imaginile le puteti modifica cu gimp, irfan view, photoshop, paint etc, iar fisierele html cu notepad, macromedia dreamweaver, frontpage etc.
Cu Macromedia Dreamweaver le puteti edita cel mai usor. Acest program va permite si vizualizarea sursei pagini si editarea acestea, de accea va recomand sa trageti putin cu ochiul si pe acolo pentru a analiza codurile, pentru a insera altele, etc. Asa puteti invata destul de multe...
Linkurile: daca fisierul spre care puneti linkul se afla in acelasi folder cu fisierul html (in care doriti sa inserati link-ul respective), linkul se pune folosind numele acestuia(al fisierului) si extensia.
De exemplu, in meniu, am pus linkurile astfel:
pentru Home: home.html
pentru Links: links.html (pagina links.html aflandu-se in acelasi folder cu pagina home.html)
.
.
.
Daca fisierul nu se afla in acelasi director (folder) cu documentul html, linkul se pune astfel: "numele_folderului_ce_contine_fisierul/fisier.extensie". De exemplu, daca vreau ca o imagine din folderul "images" sa apara pe pagina index.html, voi pune codul pentru imagine si linkul "images/imagine.jpg (sau ce extensie are aceasta).
ATENTIE: Aveti grija sa nu puneti fisierelor sau folderelor titlurile formate din doua sau mai multe cuvinte despartite prin "space". Intre cuvinte puneti"_", fara vreun spatiu.
De exemplu: Am o imagine intitulata "Gogu Cantaretu". Pentru a o folosi in siteul meu, ii schimb titlul in "gogu_cantaretu". Ce-i drept, in calculator la mine pot sa o folosesc si cu titlul "Gogu Cantaretu", dar aceasta nu va putea fi uploadata pe server.
Pasul 4:
Pentru a face mai multe pagini, multiplicati fisierul html principal (in cazul exemplului meu "index.html" , redenumindu-le dupa cum vreti.
Eu am facut astfel pagina links.html (pagina "Linkuri". Ma apuc sa editez aceasta pagina. Aici trebuie sa modific numai continutul principal, unde pun linkurile care vreau eu sa apara, imagini si ce mai am eu de pus. Meniul ramane intact, nu ma ating de el. Astfel, construiti toate paginile. Nu ar trebui sa fie atat de greu sa faceti asta, asa ca nu voi mai insista asupra acestor elemente. Pana la urma urmei, multe lucruri le veti descoperi singuri.
Dupa ce faceti toate paginile siteului, trebuie sa uploadati TOT siteul pe un server, exact cum il aveti in calculator, fara sa modificati denumirile folderelor sau ale fisierelor, caci nu vor mai functiona linkurile. In exemplul meu, uploadez toate fisierele din folderul "site" pe server. ATENTIE! Nu uploadez folderul "site", ci doar continutul acestuia. Directorul pricipal al serverului (root) va inlocui folderul "site". Nu mai dau alte explicatii inutile, care mai mult incurca decat ajuta...
Cateva servere (sau host-uri, cum preferati a le spune) gratuite, destul de bune, dupa parerea mea sunt:
www.lx.ro
www.xhost.ro
www.evonet.ro
www.zoom.ro
www.as.ro
etc
Pentru upload, puteti folosi un client ftp, cum este SmartFTP. De asemenea, puteti folosi Total Comander, Fillezila, etc.
Stiu ca nu am fost prea explicit, dar sper ca ati inteles cate ceva, in afara de faptul ca nu prea ma pricep la explicatii big grin. Oricum, majoritatea lucrurilor trebuie sa le aflati singuri. Acest tutorial se adreseaza celor care se pricep mai putin decat mine, sau nu se pricep deloc. Daca aveti intrebari sau completari, le puteti posta aici.
Eram sa uit: ATENTIE LA CE CODURI FOLOSITI PE SITE! UNELE NU VOR FACE DECAT SA STRICE SITEUL! Inca ceva: de o deosebita importanta sunt linile ce trebuiesc scrise intre <head> si </head>.
_______________________________________
uitate in spatele tau :P
|
|
