Bine ai venit



Am creat acest site de tutoriale html pentru a invata programatorii principianti, dar si pe cei cu o oarecare baza in programarea web, cum sa foloseasca HTML pentru realiza un web site. Va invitam sa incepeti cursurile de programare intr-o secunda. Dar mai intai, "meniul"...

Ghidul Incepatorului in HTML - Pentru aceia dintre voi care sunt incepatori crearea de pagini web folosin HTML 

Tutorial Complet HTML - HyperText Markup Language sau pe scurt  HTML. Acest limbaj sta la baza programari web. Toate sau aproape toate website-urile folosesc HTML-ul in constructia lor.

Tutorial Complet XHTML - eXtensible HyperText Markup Language, sau pe numele lui mic XHTML, este o versiune mult mai stricta si mai curata a HTML

Tutorial complet CSS - CSS este prescurtarea de la Cascading Style Sheets sau in traducere libera, foi de stil. Folosind CSS poti formata toate elementele HTML fara a incarca prea mult documentul HTML. In acest fel vei minimiza timpul de incarcare (loading) si vei putea schimba infatisarea paginii modificand un singur fisier.


Cuvant inainte

Va invit sa parcurgeti tutorialele mai sus mentionate unul cate unul, cu un pix si o hartie la-ndemana. Creati deasemenea un nou document de text pe care sa practicati. O bucata de pizza si un pahar cu apa nu strica niciodata.

Sunteti bineveniti sa comentati acolo unde ceva va este neclar sau pur si simplu ati gasit o greseala. O sa va rog totusi sa aveti rabdare pentru aprobarea comentariului si pentru raspunsul cerut acolo unde este cazul. V-as ruga deasemenea sa lasati comentariile la sectiunea unde se incadreaza (o intrebare despre titluri la tutorialul despre titluri culori la culori s.a.m.d.)

Acestea fiind spuse, nu ramane decat sa va urez succes.

Catalin.


Adaugari ulterioare

03 feb 2010 - A fost adaugata optiunea de "instiintare noi comentarii". Va rog bfati daca comentariul vostru cere un raspuns. Veti fi instiintat deindata ce apare un comentariu nou.

*Inca nu am reusit sa aplic si functia de dezabonare dar va fi disponibila in cava zile. Multumesc pentru intelegere.

18 feb 2010 - Inca nu am reusit sa fac scriptul de dezabonare. In cazul in care vrei sa te dezabonezi la "instiintare noi comentarii" trimite un email la adresa tutorialehtml[at]gmail[dot]com specificand acest lucru. Imi cer scuze pentru deranj

Html pe scurt

Am incercat mai jos sa fac o scurta lista cu cele mai folosite coduri html. Poti sa adaugi aceasta pagina la favorite pentru a avea la-ndemana acesta lista de coduri html atunci cand nu sti cum se formuleaza un anumit tag HTML sau pur sui simplu nu iti aduci aminte.

Html - Elemente

Principalele elemente in html sumt html head title si body. Iata si un exemplu simplu de contruire a unei pagini html.

<html>
<head>
<title>
Prima mea pagina web!</title>
</head>

<body>
Salut Gasca! Aici voi pune mai tarziu continutul!
</body>

</html>


Html - Paragraf

<p>Acesta este un simplu paragraf in HTML</p>

<p align="left">Acesta este un paragraf aliniat la stanga</p>

Alte atribute de aliniere left right center si justify


Html - Titluri

<h1>Headings</h1>

Alte tipuri de titluri in HTML: h2, h3, h4, h5, h6. Unde h1 este cel mai mare si h6 cel mai mic.


Html - Linebreak

<br /> este un salt in linie in HTML - spatiul intre br si slesh face diferenta intre cod valid XHTML si un cod dezordonat.


Html - Line Orizontala

<hr /> se foloseste pentru a desenao linio orizontala in HTML - spatiul intre hr si slesh face diferenta intre cod valid XHTML si un cod dezordonat.


Html - Liste

O lista simpla in HTML este de forma

<ol>
<li>Linie </li>
<li>Sa iau bani multi </li>
<li>Sa ma mut in alt oras </li>
</ol>

Lista de mai sus este o lista ordonata. Alte tipuri de liste sunt liste neordonata si lista de definitii.


Html - Link-uri

<a href="http://www.tutorialehtml.com/" title="HTML 4.1" target="_blank" >Html 4.1</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 4.1" target="_blank" ><img src="img/html_image.jpg" /></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. Nu se mai foloseste dar merita mentionat.

<base href="http://www.tutorialehtml.com/">


Html - Imagini

<img src="img//html_image.jpg" alt="Html Image" width="100" height="50"  align="center" />

Va recomand alinierea cu ajutorul css. La fel si stabilirea dimensiunilor imaguinii. Ceea ce ar transforma codul HTML de mai sus in:

<img src="img//html_image.jpg" alt="Html Image" style="width:100px; height:50px; margin:auto;" />


Html - Formulare

<form method="post" action="fisier_care_proceseaza_formularul_html.php">

.................campurile de text care vor prelua informatia.........

<input type="submit" value="Trimite">

<input type="reset" value="Sterge" />

</form>


Html - Campuri de text

<input type="text" size="10" maxlength="40" name="name"> - 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..

<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

<body bgcolor="#efefefe">

<div bgcolor="#888888">

<table bgcolor="#000000"> - etc.


Html - Background

<table background="img/pattern.jpg">

Html - Comentarii

<!-- Acesta este un comentariu simplu in Html -->


Html - Embed (Muzica)

<embed src="tu si tuborg.mp3" hidden="false" autostart="false" loop="false" volume="60" width="144" height="60" />


Html - Object (Video)

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/UAq8qHNWMNw&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/UAq8qHNWMNw&hl=en&fs=1" type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344">
</embed>
</object>


Html- Text ingrosat (Bold)

<b>text ingrosat in html</b>
<strong>text ingrosat in html</strong>


Html - Text inclinat

<i>italic</i>

<em>emphasized</em>

<blockquote>blockquote</blockquote>

<address>address</address>


Html - Subscript, Superscript, Striketrough

<sub>indice!</sub>

 <sup>exponential!</sup>

 <del>text taiat</del>


HTML - Upload si Campuri ascunse

Exemplul de mai jos este campul folosit pentru a urca un fisier pe server. Tine minte ca este doar partea HTML a formularului.

<form method="post" action="fisier_care_proceseaza_formularul_html.php">

        <input type="hidden" name="MAX_FILE_SIZE" value="500" />

         < input type="file" />

<input type="submit" value="Trimite">

<input type="reset" value="Sterge" />

</form>