Home

Prin design web (din engleza de la web design) se intelege in general realizarea de situri web, de la momentul conceperii structurii si interfetei grafice si pana la finalizarea programarii si introducerea propriu-zisa a datelor care alcatuiesc continutul sitului - imagini, text, fisiere si alte elemente.
Site-urile, in forma in care ele se afiseaza de browsere, sunt menite sa fie intelese de orice persoana, chiar fara cunostinte in domeniul informaticii sau al secventelor de cod redactate de programatori. Acestia lucreaza ori in diverse limbaje din care apoi se genereaza limbajul specific de script al internetului HTML (HyperText Markup Language), ori direct in HTML. Daca nu ar exista browserele care stiu sa interpreteze limbajul de script si sa afiseze rezultatul pe ecran, siturile ar fi doar insiruiri de texte neformatate si, cel mai probabil, fara imagini. In principiu limbajul HTML indica locul in care sa se afiseze diversele elemente vizibile, dimensiunea, culoarea, precum si alti parametri care confera unei pagini web atat aspectul cat si functionalitatea dorita
Ce este necesar pentru realizarea unui site web
Orice sit web trece in mod necesar prin mai multe etape:
1. Analiza preliminara
2. Concretizarea ideilor
3. Schitarea elementelor vizuale si compunerea structurii sitului
4. Programarea paginilor web in HTML, CSS, Javascript etc.
5. Testarea sitului
6. Schimbarea partilor care nu corespund tintei
7. Publicarea site-ului pe Internet sau pe un intranet
8. Modificarea ulterioara si relansarea pe Internet, dupa nevoile clientilor sau ale timpului

HTML este o forma de marcare orientata catre prezentarea documentelor text pe o singura pagina, utilizand un software de redare specializat, numit agent utilizator HTML, cel mai bun exemplu de astfel de software fiind browserul web. HTML furnizeaza mijloacele prin care continutul unui document poate fi adnotat cu diverse tipuri de metadate si indicatii de redare. Indicatiile de redare pot varia de la decoratiuni minore ale textului, cum ar fi specificarea faptului ca un anumit cuvant trebuie subliniat sau ca o imagine trebuie introdusa, pana la scripturi sofisticate, harti de imagini si formulare. Metadatele pot include informatii despre titlul si autorul documentului, informatii structurale despre cum este impartit documentul in diferite segmente, paragrafe, liste, titluri etc. si informatii cruciale care permit ca documentul sa poata fi legat de alte documente pentru a forma astfel hiperlink-uri (sau web-ul).
Html - Elemente
Principalele elemente in HTML sunt<html>, <head>, <title> si <body>. Iata si un exemplu simplu de construire a unei pagini HTML.
<html>
<head>
<title>Prima mea pagina web folosind cateva coduri HTML!</title>
</head>
<body>
Voi realiza o pagina simpla folosind HTML
</body>
</html>
Html - Paragraf
HTML
<p>Acesta este un simplu paragraf in HTML</p>
<p align="right">Acesta este un paragraf aliniat la dreapta</p>
Pe langa atributul align putem folosi pentru a alinia elementele HTML urmatoarele valori: left, right center si justify.
Html - Titluri
HTML
<h1>Acesta este tag-ul HTML pentru cel mai mare titlu</h1>
Alte tipuri de titluri in HTML: h2, h3, h4, h5, h6. Unde h1 este cel mai mare si h6 cel mai mic.
Html - Liste
O lista simpla in HTML este de forma

HTML
<ol>
<li>Primul element HTML din lista </li>
<li>Al doilea element HTML din lista</li>
<li>Al treilea element HTML din lista</li>
</ol>
Lista de mai sus este o lista ordonata. Alte tipuri de liste in HTML sunt liste neordonata si lista de definitii.

Html - Link-uri
HTML
<a href="http://www.tutorialehtml.com/" title="HTML 5" target="_blank" >Html 5</a>
<a href="#top">Mergi la inceput</a> (<a name="top"></a>)
<a href="mailto:admin@exemplu.com" >Nelamuriri aici</a>
<a href="http://www.tutorialehtml.com/" title="HTML 5" target="_blank" ><img src="img/html_image.jpg" alt="HTML 5" /></a>
Au fost exemplificate mai sus: un link normal in HTML, un link folosit pentru a lega doua sectiuni in aceasi pagina, un link email si un link imagine. Desi nu se prea foloseste in ultimul timp in HTML, dar merita totusi mentionat. Tagul base specifica URL-ul baza pentru toate link-urile relative.
Html - Imagini
HTML
<img src="http://www.tutorialehtml.com/img/html_image.jpg" alt="Html Image" width="100" height="50" align="center" />
Va recomand alinierea cu ajutorul CSS(vezi elemente CSS). La fel si stabilirea dimensiunilor imaginii. Ceea ce ar transforma codul HTML de mai sus in:
HTML
<img src="http://www.tutorialehtml.com/img/html_image.jpg" alt="Html Image" style="width:100px; height:50px; margin:auto;" />
De asemenea pentru o mentinere mai simpla a codului se pote folosi atributul class dupa cum urmeaza. Acest atribut aplica aceleasi proprietati tuturor elementelor unde este specificat.

HTML
<img src="http://www.tutorialehtml.com/img/html_image.jpg" alt="Html Image" class="imagine_personalizata" />
Html - Formulare
Am adaugat mai jos codul HTML folosit pentru a crea un simplu formular. Acesta este doar formularul HTML folosit de user pentru a introduce informatia dorita. Nu uita ca pentru procesarea aceste informatii, odata ce se face click pe butonul submit al formularului HTML. Informatia va fi procesata de catre server (via php, asp, pyton, ruby etc) si eventual trimisa catre baza de date sau pe email.

HTML
<form method="post" name="formular" action="fisier_care_proceseaza_formularul_html.php">
<input type="text" size="10" maxlength="40" name="nume">

<input type="submit" value="Trimite" />
<input type="reset" value="Sterge" />
</form>
Html - Campuri de text
Am atasat mai jos codurile HTML folosite pentru campuri de text in functie de cerinte.

HTML
<input type="text" size="10" maxlength="40" name="nume" /> - camp de text normal

<input type="password" size="10" maxlength="10" name="parola" /> - parola

<input type="radio" name="culoare" value="rosu" /> - buton radio

<input type="checkbox" name="da" value="da" /> - casuta de bifat

<select name="limbajdeprogramare"> - meniu drop-down
<option>Html 4.1</option>
<option>Html 5</option>
</select>
HTML - Tabele
Structura de baza a unui tabel in HTML este urmatoarea..

HTML
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
<td>Row 2 Cell 2</td>
</tr>
</table>
Html - Bgcolor
Iata folosirea atributului bgcolor in HTML. Scopul lui este acela de a stabili o culoare de fond.

HTML
<body bgcolor="#efefef">continut..</body>
<div bgcolor="#888888">continut..</div>
<table bgcolor="#000000">continut..</table>
Html - Background
Puntru a pune o imagine background vom folosi urmatorul cod HTML.

HTML
<table background="img/pattern.jpg">continut..</table>
Html - Comentarii
HTML

Html- Text ingrosat (Bold)
HTML
<b>text ingrosat in html</b>
<strong>text ingrosat in html</strong>
Html - Text inclinat
HTML
<i>italic</i>
<em>emphasized</em>
<blockquote>blockquote</blockquote>
<address>address</address>

CSS (Cascading Style Sheets) este un standard pentru formatarea elementelor unui document HTML. Stilurile se pot atasa elementelor HTML prin intermediul unor fisiere externe sau in cadrul documentului, prin elementul<style> si/sau atributul style. CSS se poate utiliza si pentru formatarea elementelor XHTML, XML si SVGL.
Cu ajutorul CSS-ului putem crea pagini web simple dar si complexe folosind efecte diverse. Cu CSS putem stabili culoarea, marimea si fontul textului, deasemenea putem crea unlayout (un suoport pentru elementele HTML) personalizat adaugand margine culoare sau imagine de fond si multe altele.
Sintaxa CSS
CSS
h1 { color: green }

CSS
body { color: black; }
CSS
p {
text-align: right;
color: green
}
CSS
tag { atribut: value; }
sau
CSS
element { proprietate: valuare; }
CSS
p { font-family: "times new roman";}
CSS
p {
text-align: right;
color: green
}
CSS
p {
text-align:right;
color:green;
font-family:"times new roman";
}
CSS
h1, h2, h3, p {
font-family:arial;
color:green;
}
Alinierea textului
CSS
h1.clasa { text-align: center; }
.clasa { text-align: center; }
CSS - font style si font weight
Font style si font weight in CSS se refera la text normal, inclinat sau ingrosat.

CSS
p { font-style: normal; }
p { font-style: italic; }
p { font-weight: bold; }
CSS - Marimea textului
Pentru a stabili marimea textului cu ajutorul CSS-ului vom folosii atributul "font-size" dupa cum urmeaza:

CSS
h1 { font-size: 30px; }
h2 { font-size: 20px; }
p { font-size: 12px; }
Incadrarea continutului
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div {
width:200px;
padding:15px;
border:5px solid;
margin:15px;
}
</style>
</head>