» Cum sa-ti faci un site propriu folosind programe gratuite? Tutorial (3)

Cum sa faci un site folosind numai programe gratuite (3)
Autor: Adrian Sandu | adrian.sandu(at)ksd.ro

[Partea I] [Partea II] [Partea III]

~~

Îti place acest tutorial? Te-a ajutat cu ceva? Vrei sa-l continuam si sa vorbim si despre cum trebuie gândit un layout, cum trebuie gândita cromatica sau cum se promoveaza un site? Atunci avem o mica rugaminte la tine. Spune-le si prietenilor tai despre el. Pune pe site-ul tau un link:

<a href="http://www.ksd.ro/news/cum-sa-faci-un-website-1.php">Tutorial de web design</a>

~~

Dupa ce ne-am "înarmat" cu programele care ne trebuie pentru a construi website-ul dorit, urmeaza sa trecem propriu-zis la lucru. Chiar daca nu e nevoie sa fim niste maestri ai penelului, trebuie sa stim totusi câte ceva despre limbajul HTML, în special, si despre site-urile web, în general.

Limbajul HTML (sau XHTML, cum i se spune la ora actuala ultimei sale variante) se remarca prin simplitate. Este un limbaj pe baza de marcaje (sau tag-uri), fiecare marcaj putând suporta mai multe atribute. De exemplu, pentru a scrie îngrosat sau italic textul din interiorul unui anumit paragraf, trebuie sa folosim marcajele <p></p> - pentru a delimita paragraful, respectiv <b></b> (bold)si <i></i> (italic) pentru formatele speciale.

Codul paragrafului precedent, de exemplu, arata astfel:

<p>Limbajul HTML (sau XHTML, cum i se spune la ora actuala ultimei sale variante) se remarca prin simplitate. Este un limbaj pe baza de <i>marcaje</i> (sau <i>tag</i>-uri), fiecare marcaj putând suporta mai multe <i>atribute</i>. De exemplu, pentru a scrie <b>îngrosat</b> sau <i>italic</i> textul din interiorul unui anumit paragraf, trebuie sa folosim marcajele <code><p></p></code> - pentru a delimita paragraful, respectiv <code><b></b><code> (<b>b</b>old)si <code><i></i><code> (<i>i</i>talic) pentru formatele speciale.</p>

O pagina web are 3 parti principale. Fiecare dintre aceste parti trebuie tratata cu atentie, daca doriti ca site-ul sa fie reusit. Aceste parti sunt:

  • Declaratia de conformitate, care defineste tipul documentului creat. În cazul unui document XHTML, aceasta este <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">. Oricum, nu e nevoie sa o scrieti dumneavoastra. Editorul HTML va sti sa o introduca singur.
  • Antetul (head), care contine meta-marcajele necesare clasificarii si indexarii corecte a paginilor pe internet. Urmeaza imediat dupa declaratia de conformitate si este delimitat în interiorul marcajului <head></head>. Cele mai importante meta-marcaje continute în antet sunt <title></title> - titlul paginii, <meta name="description" content="" /> - descrierea paginii si <meta name="keywords" content="" /> - cuvintele-cheie care descriu cel mai bine continutul paginii.
  • Pagina propriu-zisa, delimitata de marcajul <body></body>. Aici apar toate celelalte marcaje folosite.

Exista câteva sute de marcaje HTML, dar cele mai folosite sunt aproximativ 20:

  • marcajele pentru blocuri de continut: <p></p> - paragrafe, <div></div> - diviziuni
  • marcajele pentru formate de text: <b></b> - bold, <i></i> - italic
  • marcajele pentru liste: <ul></ul> - lista cu marcatori, <ol></ol> - lista cu numere, <li></li> - rând în lista
  • marcajele titlu: <h1></h1> - titluri foarte importante, <h2></h2> - titluri importante ... <h7></h7> - subtitluri putin importante
  • marcajele semantice: <strong></strong> - evidentiere puternica, <em></em> - evidentiere
  • marcajele pentru tabele: <table></table> - tabel, <tr></tr> - rând de tabel, <td></td> - celula
  • marcajele pentru obiecte: <img src="" /> - imagine, <object></object> sau <embed></embed> - animatii flash, <applet><applet> - aplicatii Java
  • alte marcaje importante: <a href=""></a> - link (legatura), <span></span> (continut în linie), <hr /> - despartitor orizontal

Editorul HTML va va ajuta sa introduceti automat aceste marcaje, fara sa mai fie nevoie sa le scrieti de mâna. De exemplu, daca doriti sa scrieti cu caractere-bold un anumit text, selectati acel text si apasati butonul de "bold" (de obicei un B mare, ca în Word) de pe bara de instrumente. Veti observa ca textul dorit este încadrat cu marcajul <b></b>. În cazul în care doriti sa introduceti o imagine, editorul va va ajuta sa selectati imaginea de pe hard disk si sa o introduceti în locul dorit.

Marcajele pot contine, ele însele, diverse atribute care sa le rafineze întelesul. De exemplu, în cazul unei imagini, putem întâlni atributele width (latime în pixeli), height (înaltime în pixeli) si alt (text alternativ): <img src="" width="" height="" alt="" />

În interiorul site-ului, paginile sunt legate între ele prin hiperlinkuri, sau legaturi, iar informatia este organizata exact ca în Windows - sub forma de fisiere si directoare. Sa presupunem ca site-ul dvs. este www.site.ro. Pentru ca pagina A sa contina o legatura (un link) la pagina B, codul acesteia va putea fi:

  • absolut: de tipul <a href="http://www.site.ro/cale/paginaB.html"></a>;
  • relativ: <a href="cale/paginaB.html"></a>. Daca pagina B este asezata, ierarhic, înainte de pagina A (adica într-un director mai aproape de baza site-ului comparativ cu pagina A), atunci linkul din A catre B va contine doua puncte ("..") pentru orice director superior ierarhic (de ex., <a href="../paginaB.html"></a>)

Cea mai simpla modalitate de a învata limbajul HTML este sa faceti încercari în editorul HTML si sa vedeti ce iese. În câteva ore veti ajunge sa cunoasteti tot ceea ce va trebuie pentru a întelege functionarea corecta a marcajelor. Fireste, de la a cunoaste la a aplica este o cale lunga - dar cel putin veti putea sa realizati cu usurinta o pagina web care, desi lipsita de complexitate, va arata simplu si la obiect.

___________________

© 2004-2005 Kevin Software & Design

 
logo mic KSd

Home / Web design / Prețuri web design / Angajări / Noutăți / Despre noi / Contact
Produse: Magazinosaurus Rex / Floare la ureche CMS / 1001 Locuri de munca / Kataremata

© 2003-2008 Kevin Software & Design srl | J40/11894/2002 | RO15028859