Tutorials

Introducere HTML
Ce este WWW

WWW= World Wide Web , adesea numit Web. Web-ul este o retea de computere din toata lumea. Toate computerele folosesc un standard de comunicare numit HTTP.

Cum functioneaza WWW-ul?

Informatia Web este stocata in documente numite pagini html. Paginile html sunt fisiere stocate in computere numite servere web. Computerele care citesc paginile html sunt numite clienti web. Clientii web vad paginile cu un program numit browser web. Cele mai populare browsere sunt Internet Explorer si Mozilla Firefox (il recomand pe cel din urma).

Cum afiseaza browser-ul paginile html?

Toate paginile html contin instructiuni despre cum sa fie afisate. Browser-ul afiseaza pagina citind aceste instructiuni. Cele mai obisnuite instructiuni de afisare sunt numite taguri HTML. Tagurile HTML arata astfel: <p> </p>

Cine face standardele Web?

Standardele Web nu sunt facute de Netscape sau Microsoft. Ele sunt facute de catre W3C. W3C inseamna World Wide Web Consortium. Cele mai importante standarde web sunt HTML, CSS si XML.Pentru o mai buna intelegere voi folosi culori de distingere… .

Structura HTML

Creare pagina html

Pentru inceput trebuie sa ne asiguram ca avem extensiile fisierelor afisate.

Apoi pe desktop se creaza un fisier text "new text document" si i se schimba numele in index.html . Prima pagina a unui site se numeste index.html (Nu este obligatoriu ca extensia sa fie .html . De exemplu daca folositi PHP in pagina de index pagina se va numi index.php ) . Pagina se deschide cu Notepad unde se scrie codul html (poti copia exemplul cu structura de mai jos), salveaza fisierul, inchide-l, apoi deschide-l cu internet explorer. Internet Explorer = IE (prescurtat)

Structura unei pagini

Orice pagina incepe si se sfarseste cu tagurile: :< HTML> </HTML>

O pagina trebuie sa aiba tagurile
<head> </head> -contine informatii despre pagina respectiva;
<body> </body> -contine corpul paginii;

O structura a unei pagini HTML :

<html>

<head>

<title>AICI SE PUNE TITLUL PAGINI</title>

</head>

<body>

INTRE ACEST BODY ESTE CORPUL PAGINI

</body>

</html>

Atribute HTML
Atributele sunt ca o descriere pentru taguri, ele mereu au nume si o valoare. Un atribut se scrie sub forma: nume=”valoare”si se introduce in tag sub forma:

Ex: La tagul body < body> </body>

putem sa adaugam atributul bgcolor cu valoarea yellow sub forma:

<html>

<head>

<title>AICI SE PUNE TITLUL PAGINI</title>

</head>

AICI ESTE CORPUL PAGINI

</body>

</html>

Daca puneti acest tag in pagina care ati creat-o veti abserva ca pagina are culoarea galben. Tocmai ati schimbat culoarea de fundal.

Atentie , tagul <body> se pune o singura data intr-o pagina, nu de mai multe ori!

Atributul bgcolor schimba fundalul unei pagini. Puteti sa-i dati ca valoare orice culoare in limba engleza. Cum ati vazut si mai sus coluarea yellow din exemplu, in engleza inseamna galben.
Atributul align pozitioneaza un element. Ex: <h1 align="center"> - pune un text antet pe centru

EXEMPLU:

<html>

  <head>

    <title>AICI SE PUNE TITLUL PAGINI</title>

  </head>

  <body>

    <h1 align="center">HEADER CENTRAL</h1>

  </body>

</html>

align="center" - aliniaza in centru
align="left" - aliniaza la stanga
align="right" - aliniaza la dreapta

Dupa cum vedeti atibutul si valoarea se adauga unde se deschide tagul.

De retinut ca:
-un tag poate sa aiba oricate atribute;
-unele taguri suporta doar anumite atribute;
-atributele au valori standard;
-exista diferente intre cum vad browserele atributele, adica Mozilla Firefox poate afisa pagina diferit de IE sau de alte browsere.

Text HTML
Textul se poate introduce si fara taguri. Dar daca dorim sa avem un text de o anumita forma atunci in bagam in taguri ca si cele de mai jos:

<font> </font> -intre ele se pune ce vrei sa scrii pe pagina (acest tag nu va schimba deloc forma textului)
<b> </b> -defineste text ingrosat sau- <ingrosat> </ingrosat>
<big> </big> -defineste text mare;
<mic> </mic> -defineste text mic;
<em> </em> -defineste text accentuat;
<i> </i> -defineste text italic;

Anteturi:
HTML adauga automat o linie goala in plus inainte si dupa un antet.
<h1> </h1> -defineste un antet de cea mai mare marime;
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6> -defineste antetul de cea mai mica marime;

Tagul <br> este folosit cand doriti sa intrerupeti un rand/linie , dar nu vreti
sa incepeti un nou paragraf , forteaza o rupere de linie oriunde este asezat .
Poate fi folosit pentru a lasa un rand liber . El este nepereche , neavand
nevoie de tag de inchidere .

  -este folosit ca spatiu
© -copyright- ©
® -marca inregistrata- ®

 -cu acest tag se scrie un comentariu in html
source code , comentariu este ignorat de browser , pentru a vedea html
source code apasa click right pe o pagina web si selecteaza "page source" .

Linkuri HTML
HTML foloseste un hiperlink pentru a se lega de alt document web. HTML

foloseste tagul ancora sau <a> pentru a crea un link catre alt document . O
ancora poate duce catre orice resursa de pe Web: o pagina HTML, o
imagine, un fisier sunet, un film etc .

<a href="url"> Textul ce va fi afisat </a>

Cu atributul target, puteti indica unde sa deschideti documentul catre care
se face link-ul. Linia de mai jos va deschide documentul intr-o noua fereastra
de browser:

<a href= "url" target= "_self" > Textul ce va fi afisat </a >

target= "_self" Incarca noul document in aceeasi fereastra cu ancora (implicit).
target= "_parent" Incarca noul document in cadrul cadrul de baza .
target= "_top" Incarca noul document in intreaga fereastra de browser.
target= "_blank" Incarca noul document intr-o fereastra noua.

Puteti sa combinati tag-ul imagine cu cel de ancora si sa puneti un link pe imagine, puteti face un buton.

<a href= "url" target= "_self" ><img src=""> </a >

Link catre o sectiune:
<a name= "Paragrafele"> Paragrafele </a>(se pune unde este sectiunea pt a marca)
<a href=”url”target=”-self”><img src=””> </a>

Mail link:
<a href= "mailto:dumitru-gatitu@yahoo.com" >Send Mail <a >

Culori HTML
Fundal

Tagul <body> are doua atribute unde puteti specifica fundalurile. Acestea
pot fi o culoare sau o imagine.
Atributul bgcolor seteaza fundalul drept o culoare.

<body bgcolor="#FFFFFF">

Atributul background seteaza fundalul drept o imagine.

<body background="fundal.jpg">
Valori pentru culori

Cateva culori:

Color	Cod Color
	#000000
	#FF0000
	#00FF00
	#0000FF
	#FFFF00
	#00FFFF
	#FF00FF
	#C0C0C0
	#FFFFFF

Imagini HTML
Cu HTML puteti afisa imagini intr-un document. In HTML, imaginile se definesc
cu tagul <img>. Tagul <img> nu are tag de inchidere. Pentru a afisa o
imagine pe o pagina, trebuie sa folositi atributul src. Src inseamna "sursa".
Valoarea acestui atribut este adresa imaginii pe care vreti s-o afisati pe pagina.
URL-ul duce catre locatia unde imaginea este stocata.

html>

  <head>

    <title>AICI SE PUNE TITLUL PAGINI</title>

  </head>

  <body>

    <h1 align="center">HEADER CENTRAL</h1>

    <img src="adresa + imagine" alt="">

  </body>

</html>

Atributul alt ii spune celui ce vede pagina ce se afla in locul imaginii daca
browser-ul nu poate incarca imagini.

Tabel HTML

Cu HTML se pot crea tabele. Tabelele se definesc cu tagul <table>.
Un tabel este divizat in randuri (cu ajutorul tagului <tr>) si fiecare rand
este impartit in celule de date (cu ajutorul tagului <td>). Td inseamna
"table data" si este continutul unei celule de date. O celula de date poate
contine text, imagini, liste, paragrafe, formulare, linii orizontale, tabele etc.

<html>

<head>

<title>AICI SE PUNE TITLUL PAGINI</title>

</head>

<body>

<table border="1">

<tr>

<td>randul 1, celula 1 </td>

<td>randul 1, celula 2 </td>

</tr>

<tr>

<td>randul 2, celula 1 </td>

<td>randul 2, celula 2 </td>

</tr>

</table>

</body>

</html>

randul 1, celula 1	randul 1, celula 2
randul 2, celula 1	randul 2, celula 2

Daca border="0" tabelul va exista dar va avea border-ul invizibil.
Si cu cat nr border-ului va creste border-ul va fi mai ingrosat.

<table>Defineste un tabel.
<th>Defineste o celula cap de tabel.
<tr>Defineste un rand de tabel.
<td>Defineste o celula din tabel.
<captation>Defineste un camp asociat tabelului pentru introducerea unei explicatii.
<colgroup>Defineste grupuri de coloane ale tabelului.
<col>Defineste valorile atributului pentru una sau mai multe coloane dintr-un tabel.
<thead>Defineste un cap de tabel care nu se va derula.
<tbody>Defineste corpul unui tabel care se desfasoara in interiorul
unui cap de tabel fixat si subsolul tabelului.
<tfoot>Defineste un subsol de tabel care nu se va derula.

Liste HTML
Html suporta liste neordonate si ordonate.
Ex de lista neordonata:

<html>

<head>

<title>AICI SE PUNE TITLUL PAGINI</title>

</head>

<body>

<ul>

<li>element1 </li>

<li>element2 </li>

</ul>

</body>

</html>

Prin <ul type=""> semnul din fata poate fi modificat.
<ul type="disc"> , <ul type="circle"> , <ul type="square">

Ex de lista ordonata:

<html>

<head>

<title>AICI SE PUNE TITLUL PAGINI</title>

</head>

<body>

<ol>

<li>element1 </li>

<li>element2 </li>

</ol>

</body>

</html>

Initial in fata va aparea 1. , 2. .Prin
type"A" se va schimba in A. , B. , C. ,etc.
type"a" se va schimba in a. , b. , c. ,etc.
type"I" se va schimba in I. , II. , III. ,etc.
type"i" se va schimba in i. , ii. , iii. ,etc.

Cadre HTML
Cu ajutorul cadrelor, se poat afisa mai multe pagini web in aceeasi fereastra

de browser. Fiecare document HTML poarta numele de cadru (frame) si fiecare
cadru este independent de celelalte.

<html>

<head>

<title>AICI SE PUNE TITLUL PAGINI</title>

</head>

<body>

</frameset>

</body>

</html>

<frameset> Defineste un set de cadre.
<frame> Defineste o sub-fereastra (un cadru).
<noframes> Defineste o sectiune noframei.
<iframe> Defineste o sub-fereastra inline.

Formulare HTML
Formularele HTML sunt folosite pentru a selecta diferite moduri de introducere a datelor de catre utilizator. Se pot introduce informatii ca: (campuri text, meniuri ce se pot derula, butoane radio, casute de validare, etc.).

Un formular se defineste cu tagul <form>.

Text:

<form>

Nume: <input type="text" name="nume">

<br>

Prenume: <input type="text" name="prenume">

</form>

Radio buton:

<form>

<input type="radio" name="sex" value="male"> Male

<br>

<input type="radio" name="sex" value="female"> Female

</form>

Checkbox:

<form>

Am un caine:

<br>

Am o pisica:

</form>

Formular cu actiune:

<form name="input" action="html.php" method="get">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>

Comentarii HTML
Comentariile in HTML au acelasi rol ca in orice limbaj de programare.

Ele sunt folosite pentru a pune o descriere unei sectiuni din codul, pentru a explica ce face acea sectiunea. Multi programatori le folosesc pentru a comenta un intreg fragment de cod. De exemplu avem o sectiune cod care nu ne mai foloseste, dar nici nu vrem sa o stergem, pentru ca este posibil sa o folosim in viitor sau in cazul in care ne razgandim.

In HTML sau CSS nu comentati niciodata parole sau alte informatii confidentiale. Chiar daca comentariile nu sunt afisate in browser ele apar in sursa paginii incarcate in browser.

Css HTML

Introducere CSS

CSS a fost creat pentru a usura munca programatorilor. Ca sa faci un design la site, trebuia sa scrii la majoritatea tagurilor multe atribute care sa afiseze tagul sub o anumita forma. Trebuia sa pozitionezi tagul sau sa-i dai culoare sau sa pui un font la text ca atribut al tagului care vroiai sa fie intr-un anumit fel. Era necesar sa faci aceste lucruri pentru fiecare tag chiar daca erau doua taguri la fel, trebuia sa-i scrii si celui de-al doilea aceleasi atribute. Problema cea mare are daca aveai multe pagini la un site, scriai la fel pentru toate paginile.

CSS rezolva aceste probleme. Paginile unui site au acelasi still, acelasi design, CSS separa stilul tagurilor de taguri si da posibilitatea de a pune toate stilurile in sectiunea HEAD a unei pagini HTML sau intr-un fisier extern style.css la care se leaga paginile HTML .

Acum daca avem stilul tagurilor unei pagini intr-un fisier style.css putem sa legam toate paginile site-ului la acel fisier.

Exemplu fara CSS:

Acelasi exemplu cu CSS:

Binenteles daca utilizati CSS nu inseamna ca nu puteti sa-l folositi si pentru fiecare tag in parte. Exista cazuri in care e mai bine sa folositi css langa tag.

<font style="color:#0000CC;font-family:Arial;font-size:+1;"

>Text 1</font><br>

SE VEDE FOARTE BINE SIMPLIFICAREA MULT LA EDITARE IN MOMENTUL FOLOSIRII CSS

TITLURI CUPRINS:

1 INTRODUCERE HTML

2 STRUCTURA HTML

3 ATRIBUTE HTML

4 TEXT HTML

5 CULORI HTML

6 IMAGINI HTML

7 LINK HTML

8 TABEL HTML

9 LISTE HTML

10 CADRE HTML

11 FORMULARE HTML

12 COMENTARI HTML

13 CSS+HTML

CSS

Index CSS

Daca ati citit Tutorialu HTML sau Tutorialul CSS ati vazut cum se foloseste css in acelasi fisier cu cel de html.

Cand ne apucam de crearea unui site vom folosi css intr-un fisier extern pentru a putea sa adaugam acel fisier in toate paginile.

In acelasi folder cu fisierul index.html care l-ati la Tutorialul HTML mai creati un fisier si numiti-l style.css .

Ca sa legati fisierul HTML de cel cu CSS trebuie sa adaugati in fisierul HTML urmatoarea linie:

Acesta linie trebuie adaugata in sectiunea HEAD a paginii imediad dupa titlu.

<html>

<head>

<title> AICI SE PUNE TITLUL PAGINI</title>

</head>

<body>

ACESTA ESTE CORPUL PAGINI

</body>

</html>

Id CSS

Id este folosit pentru a identifica un singur tag dintr-o pagina. Puteti asemana id cu CNP-ul unei persone, este unic.

Puteti sa-i dati orice nume dar nu incepeti id cu un numar nu este recunoscut pentru unele browsere.

In HTML adaugati la tag atributul id="" si cu numele care doriti iar in CSS incepeti cu # si numele ales.

#menu{

color:#ff0000;

}

</style>

Class CSSClasa reprezinta un grup de taguri care au acelasi stil. Spre deosebire de id intr-o pagina puteti avea cate clase doriti si mai multe taguri cu acelasi nume de clasa. Exemple in lumea reala ar fi clasa de studenti, clasa de parinti, clasa de copii, toate sunt clase pentru persoane.

In HTML o clasa se denumeste cu atributul class="" iar in CSS cu . (punct) si numele clasei.

.menu{

color:#ff0000;

}

</style>

Fundal CSS
Fundal folosind o culoare

Pentru exemple vom folosi tagul body, daca punem fundal la tagul body punem fundal la toata pagina. Modul de folosire se aplica pentru orice alt tag.

body{

background-color:#cccccc;

}

Fundal folosing o imagine

Imaginea trebuie sa fie in acelasi folder cu fiserul css si cel html. Imaginea este pusa la dimeniunea reala iar daca este mai mica o puteti pune sa se repete cu "repeat".

body{

background-image:url(imagine.jpg);

background-repeat:repeat;

}

Text CSS
Culoare text

Culoarea poate fi un nume de culoare in engleza, o valoare RGB sau o valoare HEX.

h1{

color:red;

}

h2{

color:#ff0000;

}

h3{

color:rgb(255,0,0);

}

Aliniere text

Puteti alinia textul orizontal la stanga, centru sau dreapta sau pe toata lungimea randului.

h1{

text-align:left;

}

h2{

text-align:center;

}

h3{

text-align:right;

}

h4{

text-align:justify;

}

Decorare text

Decorarea este folosita adesea pentru a scoate linia de sub un link si pentru a o pune la "mouse over". Sau la preturi cand vreti sa taiati pretul vechi si sa afisati pretul nou.

text-decoration:none;

}

a:hover{ /* a:hover selecteaza linkul cu mouse over */

text-decoration:underline;

}

.pret{

text-decoration:line-through;

}

Transformare text

Puteti transforma toate literele unui text in litere mari sau litere mici sau prima litera a fiecarui cuvant mare si restul mici.

h1{

text-transform:uppercase;

}

h2{

text-transform:lowercase;

}

h3{

text-transform:capitalize;

}

Identare text

Se foloseste pentru a pune un spatiu in fata primei linii a unui text.

text-indent:40px;

}

sâmbătă, 24 martie 2012

chat

miercuri, 10 august 2011

bonus free!!!!!!!!

hiden jobs

1000 bucks in 3 days - 1000 Bucks In 3 Days.flv

luni, 1 august 2011

Introducere HTML+CSS