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 = 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.

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.

Speak Your Mind

*

Imagine cod de securitate

*

ArabicDutchEnglishFrenchGermanGreekHungarianItalianJapaneseKoreanPortugueseRomanianSpanish