xHTML si CSS pentru incepatori.

GoldCs Team
GoldCs Team All for Counter strike 1.6 and more WWW.GoLDCs.3XFORUM.RO WWW.GoLDCs.3XFORUM.RO WWW.GoLDCs.3XFORUM.RO WWW.GoLDCs.3XFORUM.RO FREE DOWNLOAD - Jocuri full download , jocuri gratis , jocuri full , muzica noua , muzica romaneasca , hacking , torrent , jocuri free download , free download cfg silent aim ,dll , aimbot for counter strike 1.6 free download, scripts aim , eac , voiplay , VaC WWW.GoLDCs.3XFORUM.RO WWW.GoLDCs.3XFORUM.RO FREE DOWNLOAD . ! .@@ PerTa Contact : PerTa_unique@yahoo.com !

Nu sunteti logat.
Lista Forumurilor Pe Tematici

Nou pe simpatie:
Lolo pe Simpatie.ro

Femeie
24 ani
Galati
cauta Barbat
25 - 52 ani

GoldCs Team Reguli Inregistrare Login Poze

GoldCs Team / « Tutoriale » / xHTML si CSS pentru incepatori.

Autor

Mesaj

Pagini: 1

PgL^dS*
Vizitator

Aici e prima parte a unui tutorial pentru incepatori ce te va invata sa-ti faci propriul website!

Acest tutorial iti va da posibilitatea sa inveti sa creezi un website de la A la Z.
Vei descoperi doua limbaje, numite XHTML si CSS.
Pentru inceput cateva explicatii despre ce sunt xhtml si css:

Pentru a-ti crea un website trebuie sa-i comunici informatii computerului. Nu e de ajust doar sa scrii textul ce va fi in site, trebuie sa ai posibilitatea de a pozitiona textul, de a-l aranja, de a introduce imagini, de a face legaturi, etc..
Pentru a-i comunica computerului si ce anume doresti trebuie sa folosesti un limbaj pe care acesta il intelege.
Sunt deja limbaje utilizate in crearea programelor, cum ar fi C++ sau Java. Acestea sunt destul de complexe si doar pentru oameni ce deja au o intelegere buna a computerului.
XHTML si CSS ajuta exact la crearea de website-uri si au fost create intr-o forma foarte usoar de utilizat.

E posibil sa-ti pui semne de intrebare pentru ca vei invata doua limbaje in acelasi timp, sa te intrebi daca nu e prea mult pentru tine. O sa vezi ca lucrurile o sa mearga fara probleme. Fiecare limbaj din cele doua face un lucru specific, dar ele sunt complementare si la final impreuna formeaza un website.

XHTML: vine de la eXtensible HyperText Markup Language. Acesta e limbajul ce-ti permite scrierea continutului in website. Contine informatii logice: cum i-ai spune calculatorului urmatoarele exemple: "Acesta e titlul paginii, acessta e meniul paginii, acesta e textul din contentul paginii, asta e o poza..." samd.
Ai auzit sigur si de HTML. De fapt, XHTML si HTML sunt foarte similare si pot face aproape aceleasi lucruri, utilizate la crearea paginilor web. Virtual sunt identice, dar XHTML urmeaza mai multe reguli mai stricte decat HTML-ul.
Pe scurt, daca stii sa programezi in XHTML, vei sti sa programezi si in HTML, de aceea tutorialul va fi pentru XHTML.

CSS: vine de la Cascading Style Sheets ( 'Stylesheet' ). Acest limbaj este folosit doar pentru a prezenta o pagina web. In CSS noi spunem computerului : "Copyright-ul meu e scris cu rosu si cu underline, textul meu e scris cu fontul Arial, numele meu e centrat, meniul meu are un background alb ..." samd.
Cu acest limbaj, poti usor si rapid sa creezi layout-ul site-ului tau. Ar trebui sa-i faci o prezentare frumoasa chiar daca esti sau nu esti expert in grafica.

Pe scurt:
XHTML scrie continutul paginii web
CSS aranjeaza contitutul paginii web.

Aceste limbaje sunt complementare si functioneaza "mana in mana". Daca tii minte ca XHTML e folosit pentru a scrie continutul si CSS e folosit pentru a-l prezenta, deja ai priceput marea parte din idee.

In prima parte nu vom vorbi despre/utiliza CSS. Fara CSS se poate crea o pagina web, dar va fi urata asa ca rabdare. Odata ce se ajunge la partea a doua vom introduce CSS, si se vor observa imbunatatiri la pagina web aproape fara efort.

Observatie:XHTML este utilizat pentru a crea un website static unde fiecare pagina e creata in html.Un calculator se conecteaza la server si face un request pentru o pagina. Aceasta e direct "servita", e deja tinuta intr-un mod pregatit pe server.
Un site dinamic este un website in care paginile sunt generate dinamic la cerere. Conceptul e obtinut combinand un limbaj de programare si o baza de date. Cele mai utilizate sunt PHP pentru limbaj si MySQL pentru baza de date.

O intrebare pe care sigur ti-o pui: "Ce software sa folosesc pentru a-mi crea website-ul?"

Software-uri ce pot crea un website sunt tone intregi. Dar dece sa alegi un shareware complicat cand ai totul deja available?!

Da, totul se poate face in Notepad.
Trebuie sa ma credeti cand zic, acest software Notepad e mai mult decat suficient pentru a crea un website. Daca ai Mac ai un editor de text si acolo asa ca mai simplu nu se poate.

Teoretic Notepad e suficient. Dar cu putina documentatie, descoperi un program foarte folositor, ce-ti coloreaza XHTML-ul si CSS-ul pentru o mai buna intelegere si pentru a scapa de erori. E un software free numit Notepad++.
Cu asta se incheie si introducerea. O sa scriu separat pentru XHTML si CSS, deci cand voi termina cu XHTML vom trece mai departe la CSS.

XHTML The tags and attributes :

Intradevar intr-o pagina XHTML, pe langa mult text, vei descoperi alte elemente numite tag-uri.
Un tag incepe cu "<" si se termina cu ">". De exemplu:
<tag>

Aceste taguri sunt invizibile pentru vizitator, si servesc drept markere pentru a indica ceva browserului. De exemplu un tag poate specifica daca acest text este titlul paginii, alt text este un "quote" s.a.m.d.

Sunt doua tipuri de tag-uri: unele apar in pereche, altele sunt contra lor insine adica taguri cu continutul "incorporat". ( o sa explic mai jos )
Tagurile in pereche, care sunt cele mai multe, se scriu in felul urmator:
- scriem primul tag, scriem textul, apoi rescriem tagul cu un slash inainte "/". De exemplu:

<title>Bine ai venit pe XHTML si CSS</title>

Primul tag <title> indica inceputul titlului, si e mai departe inchis cu </title>
Browserul citeste ce e intre tagurile pereche <title> si </title> ca fiind titlul site-ului tau.

Tagurile continute sunt mai rare, sunt in general utilizate pentru a introduce un element in pagina.
Acest tip de taguri se termina mereu cu un slash "/", dar de aceasta data slash-ul este la sfarsitul tag-ului. De exemplu, tag-ul ce introduce o imagine:

<img />

De observat ca am pus un spatiu, acesta nu trebuie uitat face parte din cunostintele basic .

Atribute: Atributele au rolul de a conditiona tagul. Acestea sunt folosite si la taguri pereche si la taguri independente.
De exemplu, luam tagul <image />. E ok sa spunem ca insereaza o imagine, dar nu-i este indicata ce imagine. O sa facem asta adaugandu-i un atribut:

<image name="sun.jpg" />

Aici atributul este "name" si are valoarea "sun.jpg". Asta indica faptul ca imaginea pe care doresti sa o inserezi se numeste "sun.jpg".
OBSERVATIE: atributul acesta pentru tagul image nu exista, a fost doar un exemplu.
Asa ca hai sa facem un test, cum sa scriem un cod, sa-l salvam si sa obtinem prima pagina. In cateva cuvinte hai sa pregatim un fisier page.html
Observatie: acest fisier trebuie sa aiba extensia .html ( sa nu se faca greseala de ai pune page.html ( ca nume ) urmat de extensia .txt .!!

Pentru inceput copy paste la codul urmator in Notepad++ ( intr-o fila/fisier noua nesalvata ) :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="us" >
<head>
<title>Bine ai venit pe site-ul meu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
</head>
<body>
</body>
</html>

apoi in notepad++ in meniu selectati language -> H -> HTML. Cu aceasta ultima selectie cod-ul se va colora corespunzator. Acum mergi in meniu la Files -> Save as si scrie de exemplu text.html, sugerez sa va faceti un folder unde puteti salva toate paginile de test pentru a evita dezordinea de fisiere pe desktop, odata salvat mergeti la fisier si dati dublu click pe el si se va deschide pagina web in browserul setat default.
Acum iti dai seama ca ai scris o gramada de cuvinte si caractere si nimic n-are sens ca nu se afiseaza nimic. Asta-i doar un exemplu de pagina html fara continut si mai departe voi explica exemplul de mai sus:
Pe prima linie este declarat DOCTYPE-ul. E un tag particular si e singurul ce nu functioneaza dupa regulile mentionate mai devreme. Acest tag este folosit pentru ai comunica browserului ca tu creezi o pagina XHTML, si folosesti versiunea 1.0 a XHTML ( la fel ca la programe existe versiuni ).
Dupa asta urmeaza <html>. Acesta este tag-ul principal ce va contine toata pagina XHTML. Dupa cum se observa dupa inchiderea acesteia cu </html> nu mai este nimic, aceasta indicand finalul paginii XHTML.
Tagul <html> are doua atribute:

xmlns : acest atribut este obligatoriu si indica adresa unde se verifica codul XHTML. Nu va ganditi la asta si lasati-l asa, nu ne prea intereseaza.
xml:lang : acest atribut este utilizat pentru a indica in ce limba este scrisa pagina ta web. Daca scrii o pagina web in Franceza pui "fr", daca scrii o pagina in engleza pui "us", pentru italiana "it", spaniola "es" samd.

Tagul <head> contine informatii referitoare la headerul paginii web. Se inchide putin dupa.
In interiorul tagului <head> includem tagul <title>. Este foarte important: contine titlul paginii web. In exemplul nostru titlul este "Bine ai venit pe site-ul meu" dar pentr pagina ta pui ce titlu doresti.
Apoi observam tagul <meta />. Sunt multe de acest tip, dar o sa o explic pe aceasta pentr ca e indispensabila. Doar cea din exemplu e esentiala : este folosita pentru a indica faptul ca o sa folosesti o limba din Europa Centrala sau de Est. ( Exista o lista completa pentru aceste coduri ).
La final dupa ce se inchide tagul <head> se deschide un nou tag: <body>
Intre <body> si </body> scrii contentul paginii web. E clar ca in interiorul acestor taguri petrecem 99% din timp.
Pentru moment, nu e nimic intre aceste doua taguri, asa ca pagina web nu va afisa nimic. ( este o pagina alba cum s-a observat mai devreme ).

Comentarii :

Inainte de a trage concluzii in acest capitol bogat in noi cunostinte, o sa va zic pe scurt despre comentarii.

Feedback-ul reprezinta informatia pe care o scrii pentru tine. Comentariile nu apar pentru vizitatori. De exemplu poti folosi comentarii pentru a marca bucati reprezentative daca pagina ta XHTML este foarte mare sau pentru a-ti aduce aminte anumite lucruri in anumite locuri.

Un comentariu este un tag special ce incepe cu 
Aici este un exemplu de cod cu comentarii :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="us" >
<head>
<title>Bine ai venit pe site-ul meu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
</head>
<body>

</body>
</html>

Daca salvezi acest cod o sa observi ca nu este nici o diferenta fata de primul exemplu de cod. Comentariul meu nu apare nicaieri.

In general acesta contine feedback-uri foarte scurte, dar voiam sa va arat cum se foloseste pentru a nu fi surprinsi cand veti intampina unul.
Cam atat pentru prima parte a acestui tutorial. Sper ca s-au priceput chestii.

Spor la citit.

PgL^dS*
Vizitator

Lectia 2:

Mai sus am vazut care este structura principala a unei pagini html si ne-am oprit la tag-ul <body></body>.

Primul pas pentru a-ti "umple" site-ul este sa scrii text in el, sa-i oferi content.
Vedem ca sa scrii texte e destul de simplu, doar ca trebuie separate diferitele tipuri de text.
Ce o sa scoatem in evidenta mai jos :

Cum sa scrii paragrafe
Cum sa lucrezi cu titluri
Cum sa oferi o anumita importanta doar catorva cuvinte dintr-un text

Si pe final vom vedea cateva tag-uri mai putin folosite, dar nu stii niciodata de ce vei avea nevoie in viitor.

Deci vrei sa scrii text in pagina ta web, dar nu stii cum ?
In XHTML lucrurile sunt simple, acesta lucreaza in paragrafe. Fiecare sectiune poate fi inclusa in tagurile <p> </ p> ( ce inseamna paragraph ) dupa exemplul:

<p>salutare tuturor, sunt un paragraf scris intr-o pagina html</p>

<p> reprezinta startul paragrafului, iar </p> reprezinta sfarsitul paragrafului.
Hai sa adaugam acest paragraf in codul de la prima lectie si-o sa obtinem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="us" >
<head>
<title>Bine ai venit pe site-ul meu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
</head>
<body>
<p>salutare tuturor, sunt un paragraf scris intr-o pagina html</p>
</body>
</html>

Poti incerca asta, si-o sa vezi ca nu mai e o pagina goala. Nu e nici o "grozavie", dar cu siguranta e un inceput.
Hai sa facem un alt test, sa incercam sa scriem un paragraf mai lung pe 2 linii sau 3. Ai incercat? Se observa acum ca prin folosirea tastei "Enter" pentru a trece pe randul urmator nu are nici un efect si textul continua pana la sfarsitul paginii.
Pentru a evita asta folosim tagul <br /> dupa exemplul urmator:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="us" >
<head>
<title>Bine ai venit pe site-ul meu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
</head>
<body>
<p>salutare tuturor,<br />
acesta e primul meu test, invatand xhtml pas cu pas pentru ca la final <br />
sa-mi pot face propriul website
</p>
</body>
</html>

Teoretic poti adauga cate taguri <br /> vrei pentru a trece pe linia urmatoare, dar normal nu o sa mai ai nevoie de ele cand vei invata CSS.
Concluzie:
<p> </ p> : ajuta la organizarea textului in paragrafe
<br /> : ajuta la trecerea pe o noua linie.

Titluri
Sa scrii textul e ok, dar sa-i adaugi un titlu textului tau e mult mai bine.
In XHTML acest lucru e diferentiat, are posibilitatea de a scrie 6 nivele de titluri diferite.
Adica poti spune : "Acesta e un titlu foarte important" , "Acesta e un titlu mai putin important", "Acesta e un titlu si mai putin important"...
Pentru titluri avem 6 taguri diferite pe care le putem folosi:
<h1> </ h1> reprezinta un titlu foarte important. De obicei e folosit pentru titlul paginii de sus.
<h2> </ h2> reprezinta un titlu important, se pot folosi pentru organizarea paragrafelor dandu-le titluri.
<h3> </ h3> poate fi considerat mai putin important, un subtitlu.
<h4> </ h4> si mai putin important
<h5> </ h5> nu e chiar important
<h6> </ h6> deloc important

Observatie: A nu se confunda cu tag-ul <title> </title>. Acesta afiseaza titlul paginii web in "title-bar"-ul browserului. Titlurile <h1>...<h6> sunt folosite pentru a afisa titluri in continutul paginii web.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="us" >
<head>
<title>Bine ai venit pe site-ul meu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
</head>
<body>
<h1> super important</h1>
<h2> important </h2>
<h3> mai putin important, folosit drept subtitlu</h3>
<h4> si mai putin important</h4>
<h5> nu e chiar important </h5>
<h6> deloc important </h6>
</body>
</html>

Incearca si tu.
Acum un exemplu complet cu toate tagurile pe care le-am invatat pana acum :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="us" >
<head>
<title>Bine ai venit pe site-ul meu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
</head>
<body>
<h1>bine ai venit in scoala de html CS16 !</h1>
<p>
poftiti inauntru, acest tutorial e scris de FTW<br />
si lectiile te-nvata XHTML
</p>
<h2>Tutoriale pentru incepatori</h2>
<p>
sunt lectii pas cu pas, asa ca cititorul poate intelege foarte usor XHTML.
</p>
<p>
e un tutorial pentru cei ce nu au cunostinte in crearea website-urilor <br />
acest tutorial te va invata despre tot ce ai nevoie sa stii.
</p>
<h2>comunitate activa</h2>
<p>
E ceva ce nu intelegi?<br />
esti liber sa pui orice fel de intrebare te macina.
</p>
</body>
</html>

Highlight pe text

Daca in interiorul unui paragraf tu vrei sa scoti in evidenta anumite cuvinte, XHTML iti ofera 2 tag-uri pentru asta:
Pentru un usor highlight pe textul tau folosesti tag-urile <em> </ em>. Utilizarea e simpla, cuprinzi cuvintele pe care le doresti sa iasa in evidenta usor in aceste tag-uri.
De asemenea exista si tag-ul <strong> </strong>.
Tag-ul <em></em> va face cuvintele din interiorul sau scrise italic, iar tag-ul <strong></strong> va face cuvintele bold-uite.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="us" >
<head>
<title>Bine ai venit pe site-ul meu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
</head>
<body>
<h1>bine ai venit in scoala de html CS16 !</h1>
<p>
poftiti inauntru, acest tutorial e scris de FTW<br />
si lectiile te-nvata XHTML
</p>
<h2>Tutoriale pentru <em>incepatori</em></h2>
<p>
sunt lectii pas cu pas, asa ca cititorul poate intelege foarte usor XHTML.
</p>
<p>
e un <strong>tutorial</strong> pentru cei ce nu au cunostinte in crearea website-urilor <br />
acest tutorial te va <em>invata</em> despre <strong>tot ce ai nevoie sa stii</strong>.
</p>
<h2>comunitate activa</h2>
<p>
E ceva ce nu intelegi?<br />
esti liber sa pui<strong> orice fel </strong>de <em>intrebare</em> te macina.
</p>
</body>
</html>

Alte taguri mai rar utilizate (dar folostoare!)

Sunt convins ca sunt multe taguri noi in aceasta lectie, dar sunt necesare daca vreti sa aveti propriul website.
Sincer sunt foarte usor de retinut si "va intrati in mana" usor cu foarte putina practica.
Daca cele pe care vi le-am prezentat pana acum sunt foarte comune, folosite des(paragrafe, titluri, etc ), cele pe care o sa le prezint acum sunt mai putin folosite. Asa ca nu e obligatoriu sa le tineti minte.
Nu explic toate tagurile existente deoarece ar fi prea lung acest tutorial, si sincer pentru asta avem google. Cele importante sunt aici.

Acum o sa vorbesc despre urmatoarele:

superscript sau subscript
quotations
acronime

superscript si subscript
un exemplu concret ar fi :

<p>
x<sub>n</sub> = x<sub>n - 1</sub> - 2x<sub>n-2</sub>
</p>

vezi imaginea :
Posted Image
Se pot folosi in principal celor ce vor sa foloseasca formule matematice, dar nu se stie niciodata. Se poate folosi si la ranguri de genul : 1st , 2nd dupa exemplul : 1<sub>st</sub> etc

Quotations

Putem face doua tipuri de quotations:
-scurte in interiorul unui paragraf. Citatul scurt se face in interiorul paragrafului, si se include in tagul <q> care lucreaza la fel ca <em>,<strong>,<sub> etc... Avem mai jos un exemplu scurt cu un citat in mijlocul paragrafului:

<p> Ti-aduci a minte fraza faimoasa spusa de Neil Armstrong la primul sau pas pe luna?
<q>'one small step for man, one giant leap for mankind </q>. A fost in Iulie 20, 1969 ...</p>

Aici <q></q> a adaugat duble " " la ce a spus Armstrong.

- citate lungi. Daca vrei sa scrii un citat lung ar trebui sa folosesti <blockquote>. Aici trebuie sa pui tag-urile de paragraf <p> in interiorul tagului de <blockquote> dupa exemplul:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>blockquote</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
</head>
<body>
<h1> La steaua</h1>
<p> Aici avem una dintre poeziile scrise de <em> Mihai Eminescu </ em>: </ p>
<blockquote>
<p>
La steaua care-a rasarit <br />
E-o cale-atât de lunga, <br />
Ca mii de ani i-au trebuit <br />
Luminii sa ne-ajunga. <br />
<br />
<br />
<br />
Poate de mult s-a stins în drum <br />
În departari albastre, <br />
Iar raza ei abia acum <br />
Luci vederii noastre. <br />
<br />
<br />
<br />
Icoana stelei ce-a murit <br />
Încet pe cer se suie; <br />
Era pe când nu s-a zarit, <br />
Azi o vedem, si nu e. <br />
<br />
<br />
<br />
Tot astfel când al nostru dor <br />
Pieri în noapte-adânca, <br />
Lumina stinsului amor <br />
Ne urmareste înca. <br />
</p>
</blockquote>
</body>
</html>

In XHTML avem 2 tipuri de tag-uri:

Taguri inline : acestea se folosesc in interiorul unui paragraf. Acestea includ : <strong>, <em>, <q> etc..
Taguri de tip "block": acestea se folosesc pentru a structura pagina in block-uri ( sa zicem casute ). Primul invatat este <p>, dar avem si tagurile de tip titlu <h1> , <h2> , <blockquote> etc.. Nu se pune niciodata un titlu sau un citat lung in interiorul unui paragraf, fiecare fiind un block separat.

Acronime

Un acronim e o serie de initiale folosite de obicei la scurtarea numelor, cum ar fi XHTML, FBI, MAE etc...
Problema cu acestea e ca de multe ori nu se stie ce reprezinta prescurtarea. Pentru ca vizitatorii sa inteleaga ce reprezinta fiecare acronim, le putem include intr-un tag <acronym>.
E important ca pentru acest tag sa folosim atributul title pentru a explica ce reprezinta acronimul.

<p> <acronym title="eXtensible HyperText Markup Language"> XHTML </ acronym> este limbajul folosit pentru a crea un website. </ p>

Dupa cum se poate observa dupa includerea acestui cod in pagina html creata anterior, daca se pune pointerul mouse-ului peste XHTML va aparea descrierea acestuia.
OBSERVATIE: tag-ul <acronym> nu functioneaza pe INTERNET EXPLORER mai vechi.

Atat pentru lectia numarul 2. Data viitoare o sa vorbesc despre crearea link-urilor in XHTML.

PgL^dS*
Vizitator

Lectia 3:

In lectia precedenta s-a invatat crearea unei pagini XHTML simpla. Desi urata, tot o pagina html este. Pentru a va da timp sa procesati tot ce am scris mai sus, aceasta lectie e mai "usoara" sau mai "light" decat cele de dinainte.
In aceasta vom invata sa facem linkuri intre pagini.

Banuiesc ca toti stiti ce-i un link.
O spun oricum : un link este un text pe care poti da click pentru a merge pe o alta pagina. Poate fi un link catre o pagina, din pagina a.html sa mergi in b.html, dar te poate directiona si catre un alt website. In ambele cazuri se procedeaza la fel.

Inainte sa incep sa vorbesc despre codul XHTML pentru linkuri o sa explic diferente dintre link-uri absolute si link-uri in relatie.

Absolute si Relationale
Dupa cum am precizat in introducere sunt 2 tipuri de linkuri:

Link-uri interne din site : normal site-ul tau ar contine mai multe pagini. Daca vrei sa faci un link dintr-o pagina in alta, o sa folosesti cel mai des link-uri relative. Un link relativ este un link scurt, de exemplu: "file/ftw.html".
Link-uri catre alte site-uri : Pentru acestea exemple pot fi : "http://cs16.ro/" sau catre un fisier particular "http://forum.cs16.ro/index.php". Acestea se numesc linkuri absolute si spre deosebire de primele acestea incep cu http://

Acum sa presupunem ca ai 2 pagini XHTML in acelasi folder pe hdd-ul tau.

c:\site\sursa.html
si
c:\site\ftw.html

Acum sa facem un link din sursa.html catre ftw.html. E destul de simplu pentru ca fisierele sunt in acelasi folder.
Daca fisierul tau "paginamea.html" este intr-un subfolder de exemplu:
c:\site\subfolder\paginamea.html
va trebui sa adaugam "subfolder/paginamea.html"
Daca este in 2 sau mai multe subfoldere se scrie in felul urmator " folder1/folder2/paginamea.html ".
E simplu, dar stiu ca nu s-a prins nimeni.
Observatie: A nu se confunda slash-ul "/" cu backslash-ul "\". Cel de-al doilea este specific Windows-ului. Primul este pentru internet.
Daca fisierul tau "paginamea.html" este intr-un folder parinte : c:\paginamea.html poti scrie cu un slash in fata "/paginamea.html".

Si incepem:
Un link catre o alta pagina

hai sa incepem cu un exemplu:

<p>Salut! Bine ai venit pe CS16 Forum alis: <a href="http://forum.cs16.ro">cs16</a><br />
aici va invatam limbaje de programare web si e extrem de <em>cool</em> si isi merita efortul din plin </p>

Destul de simplu nu crezi?! Se pune textul linkului intre tag-urile <a></a> si specifici adresa pagini in atributul href dupa exemplul href="exemplu".
Ce am facut noi aici este un link absolute catre un alt website ("http://...". Acum vedem cum se face unul relational.

Am dat exemplu mai devreme de 2 fisiere:
sursa.html si ftw.html
sursa.html contine un link catre ftw.html si aceste doua pagini sunt in acelasi folder. Uite cum procedam:
codul pentru sursa.html:

<h1> sursa.html </ h1>
<p> Esti in sursa.html <br />
Ai vrea sa mergi pe <a href="ftw.html"> fisierul ftw.html </a>?</p>

codul pentru ftw.html:

<h1> ftw.html </h1>
<p> Bravo! Doar ce ai "poposit" pe ftw.html </p>
<p>Vrei sa mai incerci o data? atunci <a href="sursa.html">click here</a></p>

Tare nu?
Dar daca vreau ca linkul meu sa se deschida intr-o pagina noua?

Simplu! Adaugi la tag-ul tau de link <a> atributul target="_blank".
Dupa un timp o sa aflati ca acest atribut nu va functiona pe un XHTML 1.1 sau XHTML 1.0 strict. ( Nu trebuie tinuta minte aceasta regula ).

Hai sa facem un link ce permite trimiterea unui email.
Daca vrei ca vizitatorii sa-ti trimita un email poti folosi linkuri "mailto". Nu se schimba nimic la tagul <a> doar se modifica valoarea atributului href dupa exemplul:
href = "mailto: "
Asa ca incepi linkul cu mailto: si adaugi adresa de email unde vei fi contactat. Un exemplu:

<h2> Mail rapid </ h2>
<p> Pentru a-mi trimite un mail, <a href="mailto: "> click aici </a></p>

Daca dai click pe link, un mesaj nou blank se va deschide, pregatit pentru a trimite un email.

Anchor
O ancora e un fel de semn de marcaj pe care o poti pune in interiorul paginii tale XHTML imense.
De fapt, daca pagina ta e foarte lunga ar fi folositor sa duci vizitatorul in josul paginii acolo unde acesta e interesat sa ajunga.
Pentru a crea un "anchor", adaugam atributul "id" unui tag ce va fi folosit ca referinta. Aici vorbim de orice tag, un titlu de exemplu (h1,h2 ).
Folosesti apoi id-ul pentru a da nume la "anchor", ce va servi apoi la directionarea catre aceasta ancora.
Si pentru a intelege exact asta uite un exemplu:

<h2 id="my_anchor"> Title </h2>

Apoi doar faci un link ca de obicei, dar de data aceasta atributul href va contine un hash ( # ) urmat de numele anchorei mele, dupa exemplul:
<a href="#my_anchor"> Anchor </a>

Normal, dupa ce dai click pe link iti face scroll in jos in aceeasi pagina ( asta daca ancora nu este vizibila si sunt existente scroll-bar-urile browserului ).
Uite un exemplu ce-ti ofera o mai buna intelegere:

<h1>anchor test</h1>
<p>
mergi exact la : <br />
<a href="#primul">primul</a><br />
<a href="#aldoilea">al doilea </a><br />
<a href="#ftw">vezi pe ftw</a><br />
</p>
<h2 id="primul">Primul</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec pharetra volutpat nisl. Nullam sollicitudin nulla eget justo. Maecenas urna dui, mollis ut, tristique sit amet, adipiscing nec, neque. Praesent bibendum tempor metus. Sed vitae tellus mollis magna luctus ultrices. Mauris sollicitudin aliquet nunc. Aenean urna. Duis lorem. Proin augue. Quisque interdum felis eu diam.</p>
<p>Etiam pede lectus, facilisis sit amet, varius a, malesuada varius, nisl. Aenean aliquam, odio quis semper cursus, nisl lacus rutrum ipsum, a laoreet neque ante vitae tortor. In hac habitasse platea dictumst. Ut at neque interdum enim pharetra commodo. Curabitur erat mi, congue ut, volutpat vel, semper ac, wisi. Sed non metus vel massa pharetra euismod. Nunc quis quam. Curabitur non libero a libero semper tincidunt. Mauris vehicula dui a wisi. Quisque nisl dolor, tempus nec, tristique vitae, eleifend eget, nunc. Duis dapibus, lectus eget egestas consectetuer, nibh metus pharetra nisl, vitae rutrum mi tellus placerat nulla. Praesent sed libero non enim suscipit aliquet. Proin tincidunt pede sit amet eros.</p>
<p>Phasellus sed nisl. Integer rhoncus risus vitae arcu. Praesent sed diam non justo sagittis vulputate. Etiam faucibus posuere tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam porta. Vestibulum lectus ante, laoreet a, condimentum sit amet, dictum ac, sapien. Ut et tortor. Aliquam vitae lacus. Vestibulum non pede eget ante elementum elementum. Quisque accumsan wisi id quam. Integer tortor justo, cursus volutpat, vehicula ut, pellentesque ultrices, neque. Aenean eu tortor vitae dui pretium molestie. Sed dui nibh, rhoncus ut, egestas quis, commodo id, magna. Morbi gravida tellus id diam. Nunc nonummy leo nec velit. Curabitur id lacus a ipsum lacinia accumsan.</p>
<h2 id="aldoilea">Al doilea</h2>
<p>Nunc ullamcorper imperdiet lorem. Aliquam convallis, sapien sit amet malesuada dignissim, sem tortor interdum risus, vel scelerisque sapien est ac justo. Sed varius nisl lacinia libero accumsan luctus. Nam luctus leo. In hac habitasse platea dictumst. Donec eget massa. Vivamus arcu ante, condimentum eu, imperdiet et, pulvinar vel, neque. Morbi auctor. Sed ac ligula. Pellentesque adipiscing orci id ipsum. Fusce ipsum. Cras eget neque. Nulla at sapien ornare augue tempor viverra. Praesent vulputate. Mauris mi. Quisque quam. Cras fermentum orci non risus. Phasellus quis augue vitae felis tincidunt dignissim. Vestibulum ut nulla at eros sagittis ullamcorper.</p>
<p>Sed vel erat. Aenean a massa. Quisque ultricies, dolor non rutrum ullamcorper, lorem ligula blandit pede, malesuada volutpat magna dolor et ante. In tellus felis, tincidunt eget, adipiscing eu, gravida sit amet, lorem. Proin dolor. Proin vel elit. Morbi vel enim. Aenean congue enim sed ipsum. Praesent tristique. Ut placerat metus sed nibh. Sed sit amet urna. Morbi et lorem. Sed a erat eget dolor sollicitudin ornare. Maecenas nibh. Quisque tincidunt. Sed odio diam, dapibus a, interdum non, convallis id, pede. Donec condimentum eros eu nunc consequat commodo. Donec tempus fringilla eros.</p>
<p>Mauris mollis luctus urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse consectetuer sem at urna. Aliquam dui magna, congue non, porttitor vitae, varius a, lacus. Duis nec enim. Quisque malesuada, lectus vel laoreet egestas, lorem nibh ultricies elit, et varius velit erat vel risus. Maecenas pellentesque nibh et purus. Nulla commodo justo vitae odio. Sed ornare. Quisque at tortor. Donec mi. Vestibulum consectetuer congue purus. Aenean pulvinar.</p>
<h2 id="ftw">Asta e FTW</h2>
<p>Nam vel arcu quis justo condimentum egestas. Aliquam dictum wisi. Nam lorem. Ut scelerisque. In velit tortor, venenatis eget, ultricies id, mollis nec, dui. Morbi nec ante vitae libero fermentum aliquam. Ut non quam. Cras ac urna. Aenean sollicitudin turpis sit amet quam. Quisque lacinia. Proin mollis. Vestibulum dapibus, nulla sit amet lacinia dapibus, est odio condimentum lorem, id aliquam lorem enim vitae nibh. Nulla tortor. Nunc pulvinar. Vestibulum malesuada wisi et urna.</p>

Nota: Daca nu se intampla nimic inseamna ca nu e text de-ajuns in pagina. Se poate adauga prin multiplicare, asta doar pentru a intelege exemplul, sau se poate micsora fereastra browserului pentru a aparea scroll-urile.

Atributul id este folosit pentru a-i da un nume unic unui tag, pentru a fi folosit ca referinta. Si sa ma credeti cand spun ca o sa fie folosit foarte mult acest atribut. Aici e folosit ca referinta pentru o ancora, dar in CSS va fi folositor pentru a indentifica tag-urile.

Link catre o ancora ce se afla intr-o alta pagina XHTML :

Ideea e de a face un link ce te duce intr-o alta pagina XHTML, si apoi te directioneaza catre o ancora ce se afla in acea pagina. E destul de simplu doar scrii numele paginii, urmat de un hash (#), urmat de numele ancorei tale.
De exemplu :

<a href="anchor.html#ftw">

te va duce in pagina anchor.html direct la ancora numita #ftw
Uite un alt exemplu:

<h1>CS16 <sup>TM</sup></h1>
<p>
Rendez-vous intr-o alta pagina cu anchor :<br />
<a href="anchor.html#primul">Primul</a><br />
<a href="anchor.html#aldoilea">Al doilea</a><br />
<a href="anchor.html#FTW">Uite-l pe FTW</a><br />
</p>

Atat pentru lectia asta. Ne vedem la lectiile urmatoare unde vom discuta despre Imagini in XHTML .
O zi buna.

PgL^dS*
Vizitator

Lectia 4 :

Imagini

Adaugarea unei imagini intr-o pagina web? E foarte usor atata timp ce ai inteles cum sta treaba cu adrese relative din lectia anterioara. Aceasta lectie e floare la ureche.
Asa ca pentru a incepe acest mic studiu, o sa spunem cateva despre tipurile de imagini ce pot fi folosite intr-o pagina web ( jpeg, png, gif, ... )

Aceasta e ultima lectie din partea I a acestui tutorial. In partea a II -a o sa introducem in sfarsit CSS-ul ce o sa aduca o gramada de lucruri noi, asa ca bucurati-va cu aceasta ultima lectie

.
In general, in prima parte a tutorialului am invatat lucrurile de baza din (x)HTML, iar in partea a doua o sa vedem lucrurile de baza din CSS, iar in partea a III-a o sa vedem "grozavia" combinarii xhtml cu css; acolo se va observa cu adevarat ce pot aceste doua limbaje. Desi au si ele limite, poti crea o pagina completa doar cu aceste doua limbaje.

Diferite formate de imagini
Nu o sa vorbesc preae mult despre formatul imaginilor doar de utilizarea acestora in functie de format intr-o pagina web.
Despre formatul acestora stiti si voi destule.

jpeg: e in special folosita la poze, wallpapers, imagini de background ce sunt poze. Type este JPEG si are extensia "jpg" dar cateodata se mai gaseste cu extensia jpeg (sunt acelasi tip de fisier).
Uite un exemplu de poza jpeg.
Posted Image
PNG: e cel mai nou format de imagine. Acesta e potrivit la orice nu e poza. Avantajul major pe care acest tip de imagine il are este ca poate folosi transparenta, aceasta e signifianta intr-o pagina web.
PNG-ul vine in doua versiuni:
1. 8-bit PNG : versiune PNG limitat la 256 de culori. 256 de culori nu sunt de ajuns cand stim ca JPEG suporta milioane de culori. Dar e suficient pentru imagini cu putina grafica cum este exemplul :
Posted Image

2. 24-bit PNG : acest tip e mult mai avansat, suporta milioane de culori la fel ca tipul JPEG. Aditional acestui tip fata de jpeg este faptul ca are transparenta. Se pot crea efecte frumoase cu ajutorul transparentei pe grafica usoara, aici includem si grafica site-ului tau. Acum e si un mic dezavantaj: browserele mai vechi cum ar fi Internet Explorer 6 are o mare probleme cand vine vorba de transparenta. O sa afiseze poza dar fara transparenta acesteia. Si exemplul:
Posted Image
GIF format: e destul de vechi, dar inca foarte utilizat. In ziua de azi, png-ul inlocuieste imaginile gif si e o solutie mult mai buna, plus transparenta acestuia ii ofera inca un plus. Asa ca va recomand png-urile.
Gif-ul este limitat la 256 de culori pe cand PNG-ul are milioane de culori disponibile. Cu toate astea, GIF-ul inca are un avantaj asupra PNG-ului, si acesta este animatia. Gif-ul poate fi animat:
Posted Image

Alte formate de imagini nu au fost mentionate , cum ar fi bitmap ( *.bmp ), deoarece acestea nu sunt "compressed" deci prea mari, nu sunt potrivite pentru web.
Ca sa concluzionam uite cum ar trebui sa alegi formatul imagini pentru a o folosi pe pagina web:
a. pentru o poza sau o imagine cu multe culori foloseste JPEG.
b. un grafic cu putine culori ( mai putin de 256 ) foloseste 8-bit PNG daca se poate.
c. O imagine animata : un gif animat.

Insereaza o Imagine

Acum hai sa facem HTML.

Pentru a insera o imagine trebuie sa folosim tag-ul <img />.
E un tag simplu. ( la fel ca <br /> )
Suporta mai multe atribute, dar doua dintre acestea sunt esentiale:

src : indica unde este imaginea pe care vrei sa o inserezi. Poti folosi fie o cale absoluta ( eg: http://forum.cs16.ro...Gaming/logo.png ) sau pui calea de pe serverul local, asa ca daca imaginea e intr-un subfolder numit images calea ta va fi : src="images/logo.png"
alt : acest tag reprezinta textul alternativ. Trebuie folosit mereu pentru a avea text alternative imaginii puse de exemplu alt="O floare"

Stiu ca pare plictisitor acest atribut "alt" deoarece nu pare vital acestui tag. Este vital validarii site-ului din punct de vedere XHTML, si astfel site-ul ar fi detectat ca "non-compliant". Ar fi mai bine sa-l utilizati mereu.
Un exemplu:

<p>
un curcubeu frumos si deosebit :<br />
<img src="images/rainbow.jpg" alt="imagine cu un curcubeu" />
</p>

Evitati mereu accenturile, literele mari si spatiile in numele imaginilor si folderelor ce contin aceste imagini. Uite un exemplu ce va crea probleme : "Images of the site or any image bête.jpg". Trebuie sa scapati de spatii sau sa le inlocuiti cu "_", sa scapati de accente si sa treceti totul in "lowercase" ( litere mici ), ceva de genul:
imagini_folosite_pe_site/imagine_cu_un_curcubeu.jpg

Tooltip:
Acest atribut este folosit pentru a arata un tooltip asemanator link-urilor, si se numeste "title". Acest atribut este optional ( spre deosebire de "alt" ).
Uite cum se foloseste:

<p>
un curcubeu frumos si deosebit :<br />
<img src="images/rainbow.jpg" alt="imagine cu un curcubeu" title="curcubeu cu culori" />
</p>

Imagine pe care poti da click:

Ca si textul, imaginile pot fi folosite ca linkuri. In locul unui text pus in interiorul tagurilor <a> </a>, poti foarte usor sa pui un tag <img /> !

<p>
un curcubeu frumos si deosebit :<br />
<a href="http://forum.cs16.ro"><img src="images/rainbow.jpg" alt="imagine cu un curcubeu" title="curcubeu cu culori" /></a>
</p>

Atentie:

Tagul <a> </a> s-a inchis imediat dupa tagul <img />, si defapt tagul <img /> este inclus intre tag-urile : <a> </a>

In urmatoarea lectie, ce va fi Lectia I din Partea II-a : o sa vorbim despre modificarea proprietatilor imaginilor.
Atat pentru azi si pentru aceasta prima parte introductiva despre (x)HTM

Pagini: 1

Mergi la