Acest tutorial descrie realizarea unui site folosind limbajul html si css , parcurgand toate etapele : realizarea site-ului,
crearea unui cont pe un hosting gratuit si in final uploadarea fisierelor site-ului nostru pe acel hosting, hostingul gratuit este o metoda rapida de a pune un website onlie in citeva minute, inconvenientul acestei metode este acela ca, vom avea niste reclame afisate tot timpul in partea de sus (deasupra header-ului) .
Oricine doreste sa-si deschida un site, trebuie sa stie limbajul HTML si CSS, nu este necesar sa fii expert in HTML (Hyper Text Markup Language), insa citeva informatii despre cod sint absolut indispensabile pentru intelegerea modului in care functioneaza aceste lucruri.
Chiar daca va construieste cineva site-ul, tot trebuie sa ai habar de ce se intimpla prin acele fisiere, va fi nevoie periodic de corectarea unor erori sau de realizarea unor modificari.
Multa lume fuge de cod, multi asemuiesc codul cu heroglifele, nu este deloc asa, spunea cineva odata : ” CODUL ESTE POEZIE”, chiar avea dreptate, cind vezi ca se naste ceva din insiruirea unor linii de cod, te simti minunat, construiesti o lume virtuala doar cu tastatura si cu mouse-ul.
Am folosit foarte multa vreme aplicatii construite de companii de soft, am facut doar operare pe calculator, a venit vremea sa facem si programare, de fapt nu este un limbaj de programare, el este un “markup language” , insa noi ne vom referii la el ca la un limbaj de programare, pentru ca suna destul de ciudat ” limbaj de marcare”, HTML-ul este unul din cele mai usoare limbaje de programare (marcare) folosite in zilele noastre, HTML vedem pe orice site, multe softuri au in ele componente din HTML, acest limbaj de programare este peste tot, a venit vremea sa-l invatam.
Prima oara poate va fi putin descurajant, insa daca sinteti putin atenti veti intelege imediat ca totul nu aste asa greu, sint lucruri simple si frumoase, vom crea ceva cu miinile noastre, asta este cel mai important lucru.
Vom invata elementele de baza, dupa care vom invata cum se introduce textul intr-o pagina web, dupa aceea vom aranja si vom colora textul, vom folosi o pagina de stil CSS (cascading style sheets) cu ajutorul careia vom aseza toate elementele din pagina HTML, la vom pozitiona pe toate astfel incit pagina noastra sa para ca este facuta dintr-o bucata.
Veti invata tehnici simple, de baza din HTML si CSS, cu toate ca acestea sint lucruri de baza din HTML si CSS, vor crea o imagine de ansamblu placuta.
Pentru acest tutorial trebuie sa va inarmati cu atentie si cu rabdare, acest tutorial nu este unul la care ne permitem sa derulam putin, daca derulati citeva secunde se poate sa pierdeti ceva foarte important si ce veti vedea dupa aceea sa nu mai aiba sens, concentratia de informatie este extrem de mare si tocmai de aceea va rog sa fiti foarte, foarte atenti.
Dupa acest tutorial, chiar curs intensiv as putea spune, veti avea o idee mai buna despre ce inseamna HTML si CSS, veti putea controla codul bine si veti intelege in totalitate un document HTML, senzatia ca HTML-ul nu este decit o insiruire de heroglife se va risipi, veti stii despre ce este vorba cind veti privi un document HTML sau unul CSS.
Vom invata despre taguri (etichete), avem aici citeva exemple de taguri(etichete) pe care le puteti folosi intr-un document HTML, nu va speriati, nu trebuie sa le memorati pe toate, trebuie sa invatati doar elementele de baza din primul tabel si restul le gasiti aici pe site sau pe net cind aveti nevoie de ele.
Chiar si tabelele in care sint ordonate aceste taguri, sint realizate cu ajutorul HTML-ului.
Elemente de baza (taguri).
| <HTML> </HTML> | Defineste un fisier in format Web |
| <HEAD> </HEAD> | Antetul documentului |
| <TITLE> </TITLE> | Tilul documentului |
| <BODY> </BODY> | Corpul paginii HTML |
| BGCOLOR = culoare | Culoarea de fond a paginii |
| TEXT=culoare | Culoarea textului pe paginii |
| LINK=culoare | Culoarea legaturiilor nevizitate din paginii |
| VLINK=culoare | Culoarea legaturiilor vizitate din paginii |
| ALINK=culoare | Culoarea legaturiilor pe durata clicului exacutat de utilizator |
| BACKGROUND = url | Imaginea de fond pentru pagina |
| <P> | Paragraf |
| <Hn> <Hn> | Nivel de subtitlu al documentului (n = 1-6) |
| <FONT> </FONT> | Specifica atribute ale textului incadrat |
| SIZE=n | Dimensiunea textului este 1-7 |
| FACE=“a,b” | Specifica fontul: a, daca este disponibil, sau b |
| COLOR=s | Culoarea textului: fie un nume de culoare , fie o valoare RGB |
| <BR> | Linie noua |
| <PRE> </PRE> | Informatie preformatata |
| <!– –> | Comenatriu HTML |
| <CENTER> </CENTER> | Centreaza materialul in pagina |
| <HR> | Rigla orizontala |
| SIZE=x | Inaltimea riglei in pixeli |
| WIDTH=x | Latimea riglei in pixeli sau in procente |
| NOSHADE | Dezactiveaza afisarea umbrei pentru rigla orizontala |
| ALIGN=x | Alinierea riglei orizontala in pagina (left, center, right) |
| COLOR=x | Culoarea riglei orizontale(numai pentru IE) |
| <A> </A> | Marcaj de tip ancora |
| HREF=url | Referinta hipertext |
| HREF=#nume | Referinta catre o ancora interna |
| Name=nume | Definitia unei ancore interne |
Elemente pentru liste .
| <DD> | Descriere definitie |
| <DL> </DL> | Lista de tip definitie |
| <DT> | Termen de definitie |
| <LI> | Element de lista |
| <OL | Lista ordonata (numerotata) |
| TYPE=tip | Tipul numerotarii. Valori posibile: A, a, I, i, 1 |
| START=x | Numarul de inceput al listei ordonate |
| <UL | Lista neordonata (marcata) |
| TYPE=forma | Forma marcajului. Valori posibile: circle, square, disc. |
Elemente pentru formatarea caracterelor .
| <B> </B> | Afiseaza text cu caractere aldine |
| <I> </I> | Afiseaza text cu caractere cursive |
| <U> </U> | Afiseaza text subliniat |
| <TT> </TT> | Text cu font monospatiu |
| <CITE> </CITE> | Citare bibliogarfica |
| <CODE> </CODE> | Listing de program |
| <EM> </EM> | Stil logic de evidentiere |
| <KBD> </KBD> | Text de la tastatura |
| <STRONG> </STRONG> | Evidentiere logica puternica |
| <VAR> </VAR> | Program sau variabila |
| <BASEFONT SIZE = n> | Specifica dimensiunea implicita a fontului din pagina |
Elemente pentru cadre .
| <FRAMESET> </FRAMESET> | Definirea redactarii paginii |
| COLS=x | Numarul si marimea relativa a coloanelor |
| ROWS=x | Numarul si marimea relativa a liniilor |
| BORDER=x | Specifica starea “on” (activa) sau “off” (inactiva) pentru chenarul cadrului FRAMESET (1 sau 0) |
| FRAMEBORDER = x | Specifica marimea chenarului |
| FRAMESPACING = x | Marimea spatiului dintre doua cadre adiacente |
| <FRAME> | Definitia unui anumit cadru |
| SRC=url | URL-ul sursa pentru cadru |
| NAME=nume | Numele cadrului (utilizat impreuna cu TARGET=nume ca parte componenta a marcajului de tip ancora <a> |
| SCROLLING=scrl | Defineste optiunea barei de derulare.Valori posibile: on(activa), off(inactiva), auto (automat) |
| FRAMEBORDER=x | Marimea chenarului din jurul cadrului |
| MARGINHEIGHT=x | Spatiul suplimentar de deasupra si dedesubtul unui anumit cadru |
| MARGINWIDTH=x | Spatiu suplimetar la stanga si la dreapta unui anumit cadru |
| <NOFRAMES> </NOFRAMES> | Sectiunea de pagina afisata pentru utilizatorii care nu pot vedea un cadru |
| <IFRAME> | Cadru intern (numai pentru (IE) |
| SRC=url | Sursa cadrului |
| NAME=s | Numele ferestrei (util pentru TARGET) |
| HEIGHT=x | Inaltimea cadrului inglobat |
| WIDTH=x | Latimea cadrului inglobat |
Elemente pentru tabele .
| <TABLE> </TABLE> | Tabel HTML |
| BORDER=x | Chenarul tabelului |
| CELLPADDING=x | Spatiul suplimentar in cadrul celulelor tabelului |
| CELLSPACING=x | Spatiul suplimentar intre celulele tabelului |
| WIDTH=x | Latimea impusa tabelului |
| FRAME=valoare | Ajustarea fina a tabelului |
| RULES=valoare | Ajustarea fina a riglelor tabelului |
| BORDERCOLOR = culoare | Specifica culoarea chenarului tabelului |
| BORDERCOLORLIGHT = culoare | Cea mai deschisa culoare din cele doua culori specificate |
| BORDERCOLORDARK = culoare | Cea mai inchisa culoare din cele doua culori specificate |
| ALIGN=left | Aliniaza tabelul la marginea din stanga a paginii, iar textul curge in partea dreapta |
| ALIGN=right | Aliniaza tabelul la marginea din dreapta a paginii, iar textul curge in partea stanga |
| HSPACE=x | Spatiu suplimetar pe orizontala in jurul tabelului |
| VSPACE=x | Spatiu suplimetar pe verticala in jurul tabelului |
| COLS=x | Specifica numarul de coloane ale unui tabel |
| <COLGROUP> </COLGROUP> | Defineste un set de definitii de coloane cu ajutorul marcajului <col> |
| <COL WIDTH=x> | Defineste latimea unei coloane exprimata in pixeli |
| <THEAD> </THEAD> | Defineste titlul tabelului |
| <BODY> </TBODY> | Defineste corpul tabelului |
| <TR </TR> | Linie de tabel |
| BGCOLOR=culoare | Specifica culoarea de fond pentru intreaga linie |
| ALIGN=aliniere | Alinierea celulelor de pe linia curenta (left, center, right) |
| <TD </TD> | Celula de date a tabelului |
| BGCOLOR=culoare | Specifica culoarea de fond pentru celula de date |
| COLSPAN=x | Numarul de coloane pe care se intinde celula curenta de date |
| ROWSPAN=x | Numarul de linii pe care se intinde celula curenta de date |
| ALIGN=aliniere | Alinierea materialului din cadrul celulei de date.Valori posibile: (left, right, center) |
| VALIGN=aliniere | Alinierea pe verticala a materialului din cadrul celulei de date.Valori posibile: (top, bottom, middle) |
| BACKGROUND=url | Specifica imaginea de fond pentru celula tabelului |
| NOWRAP | Nu permite despartirea textului pe linii in cadrul unei celule |
| ALIGN=baseline | Aliniaza celule de date cu linia de baza a textului adiacent |
| ALIGN=caracter | Aliniaza o coloana fata de un anumit carcater (caracterul prestabilit este “.”) |
| ALIGN=justify | Aliniaza atat marginea din stanga cat si marginea din dreapta a unui text |
Elemente pentru adaugarea imaginilor.
| <IMG | Marcajul de introducere a imaginilor |
| SRC=url | Sursa fisierului grafic |
| ALT=text | Textul alternativ de afisat, daca este necesar |
| ALIGN=aliniere | Alinierea imaginii in pagina. Valori posibile: top (sus), middle(in mijloc), bottom (jos), left (in stanga), right (la dreapta) |
| HEIGHT=x | Inaltimea imaginii (in pixeli) |
| WIDTH=x | Latimea imaginii |
| BORDER=x | Chenarul din jurul imaginii, atunci cand aceasta este utilizata ca hiperlegatura |
| HSPACE=x | Spatiul suplimentar pe orizontala din jurul imaginii (in pixeli) |
| VSPACE=x | Spatiul suplimentar pe verticala din jurul imaginii (in pixeli) |
Elemente pentru formulare.
| <FORM> </FORM> | Formular HTML activ |
| ACTION=url | Programul CGI de pe serverul care receptioneaza datele |
| METHOD=metoda | Modul in care datele sunt transmise serverului(GET sau POST) |
| <INPUT | Camp de text sau alte date de intrare |
| TYPE=optiune | Tipul campului de intrare <INPUT>. Valori posibile: text,password,checkbox,hidden,file, radio,submit,reset,image. |
| NAME=nume | Numele simbolic al valorii campului |
| VALUE=valoare | Continutul prestabilit al campului de text |
| CHECKED= optiune | Buton/caseta marcata in mod prestabilit |
| SIZE=x | Numarul de caractere al unui camp de text |
| SIZE=x | Numarul maxim de caractere acceptate |
| <SELECT> </SELECT> | Grup de casete de validare |
| NAME=nume | Numele simbolic al valorii campului |
| SIZE=x | Numarul de articole de meniu care se afiseaza odata (prestabilit=1) |
| MULTIPLE=x | Permite selectia unor articole de meniu multiple |
| <OPTION | Alegerea particulara intr-un domeniu <SELECT> |
| VALUE=valoare | Valoarea rezultanta a acestei selectii din meniu |
| <TEXTAREA> </TEXTAREA> | Camp de intare de tip text pe linii multiple |
| NAME=nume | Numele simbolic al valorii campului |
| ROWS=x | Numarul de linii al casetei de text |
| COLS=x | Numarul de coloane (caractere) pe linie al casetei de text |
| <FIELDSET> </FIELDSET> | Imparte formularul in parti logice |
| <LEGEND> </LEGEND> | Numele asociat setului de campuri (fieldset) |
| ALIGN=s | Specifica alinierea legendei (explicatiei) afisate (top,bottom,left,right) |
| TABINDEX=x | Specifica ordinea elementelor atunci cand utilizatorul apasa tasta Tab |
| ACCESKEY=c | Specifica tasta care asigura comanda rapida de la tastatura asociata unui anumit element |
| DISABLED | Elementul este inactiv, dar este afisat pe ecran |
| READONLY | Elementul este afisat pe ecran dar nu poate fi editat |
Elemente avansate.
| <STYLE> </STYLE> | Specifica informatii referitoare modelul de stiluri |
| TYPE=val | Tipul modelului de stiluri. De regula “text/css” |
| <SCRIPT> </SCRIPT> | Include un script de regula Javascript, in pagina Web |
| LANGUAGE=limbaj | Limbajul utilizat |
| EVENT=eveniment | Eveniment care declanseaza executia unor scripturi specifice |
| FOR=numeobiect | Numele obiectului din pagina asupra caruia actioneaza scriptul |
DOWNLOAD TABELE CU TAGURI HTML
Daca doriti sa vizitati site-ul realizat in tutorial, il puteti accesa la aceasta adresa: http://www.videotutorial.150m.com .
Va recomand sa dezarhivati fisierul atasat si sa studiati cele trei fisiere html, respectiv fisierul css folosind Notepad++ sau alt program de editare a paginilor web, in felul acesta puteti face modificari cau chiar puteti aduce completari, in timpul acesta veti invata html fara sa va dati seama.
Va urezi vizionare placuta si va astept si la urmatoarele tutoriale din aceasta serie si nu numai.
View Comments (333)
Foarte frumos, tone de informatie in acest tutorial.
Acest tutorial poate fi numit: PERFUZIE CU HTML SI CSS.
Poate nu apuci sa inveti in citeva luni ce poti invata aici intr-o ora si ceva, eu l-am vazut pe tot inainte de a fi postat si pot spune ca m-a impresionat cita informatie poate incapea intr-un tutorial.
La un moment dat am simtit nevoia sa beau apa, cu toate ca eu doar urmaream tutorialul, nici nu vreu sa na gindesc, cita apa a baut Dan dupa asta.
Nu exista sa nu inveti ceva HTML sau/si CSS dupa acest tutorial.
Aoleu, ceea ce incercam cam de vreo 3 luni sa ma apuc sa invat, da tot chipurile timp n-am...
Merci mult, o sa-l vizionez cu atentie!
da ai dreptate cristi dar eu sunt dezamagit deoarece credeam ca tu vei face tutorialu :( dar oricum bravo dan foarte bun tutorialu
Nu e frumos ceea ce ai spus si sincer iti spun lucru asta , acest om s-a chinuit aproximativ o ora jumate ca sa te invete cum sa faci un site de la 0 si tu spui ca esti dezamagit deoarece nu l-a facut cristi ? Iti imaginezi cata munca a depus omu si cat timp a pierdut ca sa ne invete pe fiecare bazele html si css , gandes-te inainte sa deschizi gura ca nici tie nu ti-ar conveni sa depui munca si apoi sa iti lase altii comentarii inutile precum esti dezamagit ca nu a pus,creat altcineva acest tutorial , multumeste-te ca ai de unde invata ;)
Tu ce crezi, ca s-a terminat seria despre "Cum se face un site".
In urmatorul tutorial voi fi eu.
Pentru ca ce voi face eu in urmatorul tutorial este necesar sa fie vizionat acest tutorial realizat de catre Dan.
Ce voi prezenta eu este diferit de tutorialul realizat aza de Dan, insa informatiile din acesta vor fi indispensabile pentru intelegerea buna a lucrurilor.
Sint mai multe moduri de publicare a continutului pe web, insa toate au un numitor comun, HTML si CSS, fara ele nu se poate face nimic.
Salut Cristi, o sa vina si o serie de php sau js?
Vom vorbii despre toate, insa si PHP-ul si JS-ul se leaga cu HTML-ul, fara HTML nu se poate.
PHP-ul este folosit mai mult pentru extragerea datelor din bazele de date, paginile web tot pe HTML stau, fie ca vorbim de site-uri dinamice(php, dhtml, asp, jsp, cf) fie ca vorbim de un site static, vom folosii limbajul HTML, fara el nu se poate face nimic.
Multi fac o mare confuzie "nu mai vreau site HTML, vreau site dinamic php" , este o mare gresala, aproape peste tot este folosit HTML-ul indiferent ca vorbim de site-uri dinamice sau site-uri statice.
JS (java script) nu este tot una cu JSP (java server pages) care depinde de un server, JS-urile sint folosite pentru anumite scripturi, nu este nevoie de nici un server, scripturile JS pot rula in orice browser fara a avea nevoie de componenta server, si in acest tutorial, Dan a folosit o serie de scripturi JS (galeria foto), pentru chestii punctuale se foloseste JS, nu se fac site-uri intregi cu JS, in schimb se fac site-uri intregi cu ajutorul Java Server Pages care este cu totul altceva, cu toate ca par la fel.
Stiu ca tu te-ai apucat demult sa studiezi "codul", acest tutorial este un ajutor excelent, Dan a facut un lucru extraordinar cu acest tutorial, nici nu va dati seama ce valoros este acest tutorial, sub tutorial ai cam toate tagurile (elementele) folosite in HTML, te poti folosii de ele, mai ales ca fiecare in parte are si descriere.
Nu ta lasa ALEX, rupe codul, asta este baza.
CREDE-MA, DE POTENTIAL NU DUCI LIPSA !
wow foarte multa informatie foarte bine structurata astfel incat oricine sa poata intelege.eu personal m-am uitat la tutorial doar de dragul de a afla ceva nou ,iar pe masura ce tutorialul inainta ramaneam uimit cat de usor se poate face un site ,nu prea incarcat si foarte placut la vedere.Felicitari pentru acest tutorial dar si pentru toate celelalte.Astept cu nerabdare urmatoarea "perfuzie"(vorba lui cristi) cu informatii.
Felicitari!! Foarte frumos tutorialul, O sa fie o romanie plina de designeri Web :) (sa speram!!)
cand o sa fie un tutorial cu dreamweaver? Sau dc nu folositi dreamweaver in tutorialele voastre?
Felicitari pt toate tutorialele... sunte-ti ce-i mai tari ;)
Salut..super tare tutorialul chiar sunt ,,tone'' de informatie..si eu care ma gandesc ca eu a trebuit sa invat html-ul de baza in frontpage 98'facand zeci de teste luate din carti de la biblioteca fiindca nu aveam net pe vremea aia si acum ma pot uita la un tutorial care imi explica tot ce trebuie sa stiu..se vede ca am evoluat :)))..mi-a placut faptul ca a fost explicat pas cu pas si ca au fost puse pe site toate comenzile de baza+un exemplu pe care se poate lucra..se vede ca stiti ce faceti sunteti adevarati profesori!!
Totusi mare parte a celor ce lucreaza in web design folosesc programe care fac automat comenzile si intrebarea mea este veti mai face un tutorial cu un astfel de program??
Eu stiu ca ati facut acest tutorial pentru intelegerea comenzilor si astfel o mai buna intelegere programelor de web design..dar totusi sunt curiso sa vad cu ce veti continua seria aceasta a tutorialelor fiindca este foarte mult de vorba pe aceasta tema chiar daca unii o considera plictisitoare atunci cand vine vorba de tutoriale gen cel realizat de Dan pe care il felicit cu ocazia asta pentru tutorial...