uNboRn Posted July 18, 2013 Posted July 18, 2013 XHTML si CSSAici 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 webCSS 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.htmlObservatie: 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 <!-- si se termina 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><!-- Reminder: Aici scrii continutul paginii web --></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.
WonkerDrg Posted July 20, 2013 Posted July 20, 2013 Foarte interesant. Si greu pe de alta parte. Mi-e greu sa si citesc...nu vreau sa incerc..imi sparg procesoru' :))
Recommended Posts