Cum se face un website, partea 2, site complet realizat de la 0 in HTML, CSS cu galerie de imagini – tutorial video

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 = culoareCuloarea de fond a paginii
TEXT=culoareCuloarea textului pe paginii
LINK=culoareCuloarea legaturiilor nevizitate din paginii
VLINK=culoareCuloarea legaturiilor vizitate din paginii
ALINK=culoareCuloarea legaturiilor pe durata clicului exacutat de utilizator
BACKGROUND = urlImaginea de fond pentru pagina
<P>Paragraf
<Hn> <Hn>Nivel de subtitlu al documentului (n = 1-6)
<FONT> </FONT>Specifica atribute ale textului incadrat
SIZE=nDimensiunea textului este 1-7
FACE=“a,b”Specifica fontul: a, daca este disponibil, sau b
COLOR=sCuloarea 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=xInaltimea riglei in pixeli
WIDTH=xLatimea riglei in pixeli sau in procente
NOSHADEDezactiveaza afisarea umbrei pentru rigla orizontala
ALIGN=xAlinierea riglei orizontala in pagina (left, center, right)
COLOR=xCuloarea riglei orizontale(numai pentru IE)
<A> </A>Marcaj de tip ancora
HREF=urlReferinta hipertext
HREF=#numeReferinta catre o ancora interna
Name=numeDefinitia 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=tipTipul numerotarii. Valori posibile: A, a, I, i, 1
START=xNumarul de inceput al listei ordonate
<UL Lista neordonata (marcata)
TYPE=formaForma 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=xNumarul si marimea relativa a coloanelor
ROWS=xNumarul si marimea relativa a liniilor
BORDER=xSpecifica starea “on” (activa) sau “off” (inactiva) pentru chenarul cadrului FRAMESET (1 sau 0)
FRAMEBORDER = xSpecifica marimea chenarului
FRAMESPACING = xMarimea spatiului dintre doua cadre adiacente
<FRAME>Definitia unui anumit cadru
SRC=urlURL-ul sursa pentru cadru
NAME=numeNumele cadrului (utilizat impreuna cu TARGET=nume ca parte componenta a marcajului de tip ancora <a>
SCROLLING=scrlDefineste optiunea barei de derulare.Valori posibile: on(activa), off(inactiva), auto (automat)
FRAMEBORDER=xMarimea chenarului din jurul cadrului
MARGINHEIGHT=xSpatiul suplimentar de deasupra si dedesubtul unui anumit cadru
MARGINWIDTH=xSpatiu 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=urlSursa cadrului
NAME=sNumele ferestrei (util pentru TARGET)
HEIGHT=xInaltimea cadrului inglobat
WIDTH=xLatimea cadrului inglobat

Elemente pentru tabele .

<TABLE> </TABLE>Tabel HTML
BORDER=xChenarul tabelului
CELLPADDING=xSpatiul suplimentar in cadrul celulelor tabelului
CELLSPACING=xSpatiul suplimentar intre celulele tabelului
WIDTH=xLatimea impusa tabelului
FRAME=valoareAjustarea fina a tabelului
RULES=valoareAjustarea fina a riglelor tabelului
BORDERCOLOR = culoareSpecifica culoarea chenarului tabelului
BORDERCOLORLIGHT = culoareCea mai deschisa culoare din cele doua culori specificate
BORDERCOLORDARK = culoareCea mai inchisa culoare din cele doua culori specificate
ALIGN=leftAliniaza tabelul la marginea din stanga a paginii, iar textul curge in partea dreapta
ALIGN=rightAliniaza tabelul la marginea din dreapta a paginii, iar textul curge in partea stanga
HSPACE=xSpatiu suplimetar pe orizontala in jurul tabelului
VSPACE=xSpatiu suplimetar pe verticala in jurul tabelului
COLS=xSpecifica 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=culoareSpecifica culoarea de fond pentru intreaga linie
ALIGN=aliniereAlinierea celulelor de pe linia curenta (left, center, right)
<TD </TD>Celula de date a tabelului
BGCOLOR=culoareSpecifica culoarea de fond pentru celula de date
COLSPAN=xNumarul de coloane pe care se intinde celula curenta de date
ROWSPAN=xNumarul de linii pe care se intinde celula curenta de date
ALIGN=aliniereAlinierea materialului din cadrul celulei de date.Valori posibile: (left, right, center)
VALIGN=aliniereAlinierea pe verticala a materialului din cadrul celulei de date.Valori posibile: (top, bottom, middle)
BACKGROUND=urlSpecifica imaginea de fond pentru celula tabelului
NOWRAPNu permite despartirea textului pe linii in cadrul unei celule
ALIGN=baselineAliniaza celule de date cu linia de baza a textului adiacent
ALIGN=caracterAliniaza o coloana fata de un anumit carcater (caracterul prestabilit este “.”)
ALIGN=justifyAliniaza atat marginea din stanga cat si marginea din dreapta a unui text

Elemente pentru adaugarea imaginilor.

<IMG Marcajul de introducere a imaginilor
SRC=urlSursa fisierului grafic
ALT=textTextul alternativ de afisat, daca este necesar
ALIGN=aliniereAlinierea imaginii in pagina. Valori posibile: top (sus), middle(in mijloc), bottom (jos), left (in stanga), right (la dreapta)
HEIGHT=xInaltimea imaginii (in pixeli)
WIDTH=xLatimea imaginii
BORDER=xChenarul din jurul imaginii, atunci cand aceasta este utilizata ca hiperlegatura
HSPACE=xSpatiul suplimentar pe orizontala din jurul imaginii (in pixeli)
VSPACE=xSpatiul suplimentar pe verticala din jurul imaginii (in pixeli)

Elemente pentru formulare.

<FORM> </FORM>Formular HTML activ
ACTION=urlProgramul CGI de pe serverul care receptioneaza datele
METHOD=metodaModul in care datele sunt transmise serverului(GET sau POST)
<INPUT Camp de text sau alte date de intrare
TYPE=optiuneTipul campului de intrare <INPUT>. Valori posibile: text,password,checkbox,hidden,file,
radio,submit,reset,image.
NAME=numeNumele simbolic al valorii campului
VALUE=valoareContinutul prestabilit al campului de text
CHECKED= optiuneButon/caseta marcata in mod prestabilit
SIZE=xNumarul de caractere al unui camp de text
SIZE=xNumarul maxim de caractere acceptate
<SELECT> </SELECT>Grup de casete de validare
NAME=numeNumele simbolic al valorii campului
SIZE=xNumarul de articole de meniu care se afiseaza odata (prestabilit=1)
MULTIPLE=xPermite selectia unor articole de meniu multiple
<OPTION Alegerea particulara intr-un domeniu <SELECT>
VALUE=valoareValoarea rezultanta a acestei selectii din meniu
<TEXTAREA> </TEXTAREA>Camp de intare de tip text pe linii multiple
NAME=numeNumele simbolic al valorii campului
ROWS=xNumarul de linii al casetei de text
COLS=xNumarul 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=sSpecifica alinierea legendei (explicatiei) afisate (top,bottom,left,right)
TABINDEX=xSpecifica ordinea elementelor atunci cand utilizatorul apasa tasta Tab
ACCESKEY=cSpecifica tasta care asigura comanda rapida de la tastatura asociata unui anumit element
DISABLEDElementul este inactiv, dar este afisat pe ecran
READONLYElementul este afisat pe ecran dar nu poate fi editat

Elemente avansate.

<STYLE> </STYLE>Specifica informatii referitoare modelul de stiluri
TYPE=valTipul modelului de stiluri. De regula “text/css”
<SCRIPT> </SCRIPT>Include un script de regula Javascript, in pagina Web
LANGUAGE=limbajLimbajul utilizat
EVENT=evenimentEveniment care declanseaza executia unor scripturi specifice
FOR=numeobiectNumele 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.

DOWNLOAD FISIERE TEST

realizat de Dan Constantin
tutorialegimp.blogspot.com
Get the Flash Player to see the wordTube Media Player.

Articole Similare

About Cristian Cismaru

Imi place tot ce tine de IT&C, in place sa impartasesc din experienta si informatiile pe care le acumulez zi de zi.
Invat ca sa va invat !

Comments

  1. Salut, ma puteti ajuta cu implementarea butonului read more ? Se aplica acest cod More Info intro anumita locatie ? Cum procedez? Am descarcat un template de pe net si am acest buton dar cand dau pe el imi incarca pagina din nou. Multumesc!

  2. Multumesc mult!

  3. As vrea sa recomand,pentru doritori,cartea “Learning Web Design,4th edition-Jennifer Niederst Robbins”.Este in limba engleza,dar pentru cei ce stapanesc limba engleza,e un “must-have”,parerea mea.Cartea porneste de la zero practic,avand si exercitii.

  4. Sal. Daca doresc sa modific un index.html prin modificarea unui link ex: “www.test.ro” care apare de 100 de ori in acest document, se poate selecta linkul si pasta noul link astfel incat sa se modifice in acelasi timp toate cele 100 de linkuri asemanatoare din index.html? Sau trebuie modificate fiecare in parte? Multumesc anticipat!!!

    • Editezi documentul html cu notepad, in setarile notepad ai optiunea “replace” sau “find and replace”.
      Aceasta opriune te ajuta sa schimbi orice in text, chiar si intrari multiple.

  5. Salut. Am urmat pasii din acest tutorial, dar am o mica problema in chrome,firefox merge,dar in IE nu imi afiseaza galeria foto

  6. Am o intrebare dak eu sriu pe explorer site-ul meu care lam creat de exemplu ……….. de ce nu il gasesete ???knd intru pe pagina in sus stanga imi scrie tot “http://localhost/” asta cum il schimb?

Speak Your Mind

*

Imagine cod de securitate

ArabicDutchEnglishFrenchGermanGreekHungarianItalianJapaneseKoreanPortugueseRomanianSpanish