Tutorial HTML,XHTML,HTML5
:: Tutoriale
Pagina 1 din 1
Tutorial HTML,XHTML,HTML5
Am creat acest site de tutoriale HTML pentru a invata programatorii principianti, dar si pe cei cu o oarecare baza in ce priveste libajul de programare HTML. Vei invata cum sa folosesti HTML pentru a realiza un website. 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 HTML si in crearea de pagini web folosind HTML. Acest limbaj de marcare sta la baza programari web. Toate sau aproape toate website-urile folosesc HTML-ul in constructia lor.
Tutorial Complet HTML - HyperText Markup Language sau pe scurt HTML.
HTML a aparut ca o modalitate de a prezenta informatia structurata pe
titluri paragrafe etc. Pentru a personaliza aceste elemente HTML va recomandam sa folositi CSS
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.
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 stii cum se formuleaza un anumit tag HTML sau pur sui simplu nu iti aduci aminte.
Html - Elemente
Principalele elemente in HTML sunt <html>, <head>, <title> si <body>. Iata si un exemplu simplu de construire a unei pagini HTML.
Cod:
<html>
<head>
<title>Prima mea pagina web folosind cateva coduri HTML!</title>
</head>
<body>
Salut Gasca! Aici voi pune mai tarziu continutul! Si voi realiza o pagina simpla folosind HTML
</body>
</html>
Html - Paragraf
Cod:
<p>Acesta este un simplu paragraf in HTML</p>
<p align="left">Acesta este un paragraf aliniat la stanga</p
Pe langa atributul align putem folosi pentru a alinia elementele HTML urmatoarele valori: left, right center si justify.
Html - Titluri
Cod:
<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 - Linebreak
Cod:
<br /> este un salt in linie in HTML - spatiul intre br si slesh face diferenta intre cod valid XHTML si HTML 4.1 de exemplu.
Html - Line Orizontala
Cod:
<hr /> se foloseste pentru a desena o linie orizontala in HTML - spatiul intre hr si slesh face diferenta intre cod valid XHTML si HTML 4.1 de exemplu..
Html - Liste
O lista simpla in HTML este de forma
Cod:
<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
Cod:
<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 mai foloseste in HTML dar merita
mentionat.
Cod:
<base href="http://www.tutorialehtml.com/">
Base href a fost scos din indexul tagurilor in HTML 5
Html - Imagini
Cod:
<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
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 un fisier.php si
eventual urcata in baza de date sau trimisa pe email.
Cod:
<form method="post" name="formular" 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
Am atasat mai jos codurile HTML folosite pentru campuri de text in functie de cerinte.
Cod:
<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..
Cod:
<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.
Cod:
<body bgcolor="#efefef">
<div bgcolor="#888888">
<table bgcolor="#000000"> - etc.
Html - Background
Puntru a pune o imagine background vom folosi urmatorul cod HTML.
Cod:
<table background="img/pattern.jpg">
Html - Comentarii
Cod:
<!-- Acesta este un comentariu simplu in Html -->
Html - Embed (Muzica)
Pentru a insera muzica intr-un document.html vom folosi folosi urmatorul rand HTML.
Cod:
<embed src="tu si tuborg.mp3" hidden="false" autostart="false" loop="false" volume="60" width="144" height="60" />
Html - Object (Video)
Pentru a insera un video intr-un document.html vom folosi urmatoarea bucata de cod HTML.
Cod:
<object width="425" height="344">
<param name="movie" value="https://www.youtube.com/v/UAq8qHNWMNw&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed
src="https://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)
Cod:
<b>text ingrosat in html</b>
<strong>text ingrosat in html</strong>
Html - Text inclinat
Cod:
<i>italic</i>
<em>emphasized</em>
<blockquote>blockquote</blockquote>
<address>address</address>
Html - Subscript, Superscript, Striketrough
Cod:
<sub>indice!</sub>
<sup>exponential!</sup>
<del>text taiat</del>
In general aceste trei tag-uri HTML nu se folosesc prea mult dar merita amintite
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.
Cod:
<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>
Ghidul Incepatorului in HTML - Pentru aceia dintre voi care sunt incepatori HTML si in crearea de pagini web folosind HTML. Acest limbaj de marcare sta la baza programari web. Toate sau aproape toate website-urile folosesc HTML-ul in constructia lor.
Tutorial Complet HTML - HyperText Markup Language sau pe scurt HTML.
HTML a aparut ca o modalitate de a prezenta informatia structurata pe
titluri paragrafe etc. Pentru a personaliza aceste elemente HTML va recomandam sa folositi CSS
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.
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 stii cum se formuleaza un anumit tag HTML sau pur sui simplu nu iti aduci aminte.
Html - Elemente
Principalele elemente in HTML sunt <html>, <head>, <title> si <body>. Iata si un exemplu simplu de construire a unei pagini HTML.
Cod:
<html>
<head>
<title>Prima mea pagina web folosind cateva coduri HTML!</title>
</head>
<body>
Salut Gasca! Aici voi pune mai tarziu continutul! Si voi realiza o pagina simpla folosind HTML
</body>
</html>
Html - Paragraf
Cod:
<p>Acesta este un simplu paragraf in HTML</p>
<p align="left">Acesta este un paragraf aliniat la stanga</p
Pe langa atributul align putem folosi pentru a alinia elementele HTML urmatoarele valori: left, right center si justify.
Html - Titluri
Cod:
<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 - Linebreak
Cod:
<br /> este un salt in linie in HTML - spatiul intre br si slesh face diferenta intre cod valid XHTML si HTML 4.1 de exemplu.
Html - Line Orizontala
Cod:
<hr /> se foloseste pentru a desena o linie orizontala in HTML - spatiul intre hr si slesh face diferenta intre cod valid XHTML si HTML 4.1 de exemplu..
Html - Liste
O lista simpla in HTML este de forma
Cod:
<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
Cod:
<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 mai foloseste in HTML dar merita
mentionat.
Cod:
<base href="http://www.tutorialehtml.com/">
Base href a fost scos din indexul tagurilor in HTML 5
Html - Imagini
Cod:
<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
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 un fisier.php si
eventual urcata in baza de date sau trimisa pe email.
Cod:
<form method="post" name="formular" 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
Am atasat mai jos codurile HTML folosite pentru campuri de text in functie de cerinte.
Cod:
<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..
Cod:
<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.
Cod:
<body bgcolor="#efefef">
<div bgcolor="#888888">
<table bgcolor="#000000"> - etc.
Html - Background
Puntru a pune o imagine background vom folosi urmatorul cod HTML.
Cod:
<table background="img/pattern.jpg">
Html - Comentarii
Cod:
<!-- Acesta este un comentariu simplu in Html -->
Html - Embed (Muzica)
Pentru a insera muzica intr-un document.html vom folosi folosi urmatorul rand HTML.
Cod:
<embed src="tu si tuborg.mp3" hidden="false" autostart="false" loop="false" volume="60" width="144" height="60" />
Html - Object (Video)
Pentru a insera un video intr-un document.html vom folosi urmatoarea bucata de cod HTML.
Cod:
<object width="425" height="344">
<param name="movie" value="https://www.youtube.com/v/UAq8qHNWMNw&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed
src="https://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)
Cod:
<b>text ingrosat in html</b>
<strong>text ingrosat in html</strong>
Html - Text inclinat
Cod:
<i>italic</i>
<em>emphasized</em>
<blockquote>blockquote</blockquote>
<address>address</address>
Html - Subscript, Superscript, Striketrough
Cod:
<sub>indice!</sub>
<sup>exponential!</sup>
<del>text taiat</del>
In general aceste trei tag-uri HTML nu se folosesc prea mult dar merita amintite
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.
Cod:
<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>
Subiecte similare
» Cum se instaleaza Windows 7? Solutia! [Video tutorial]
» Cum faci un folder invizibi?->Solutia ! [Video tutorial]
» Metoda de rezolvare a cubului RUBIK! [Video tutorial]
» Cum ici faci calculatorul sa ruleze mai rapid?->Solutia ! [Video tutorial]
» Cum inchizi calculatorul unui prietn (O farsa clasica) ->Solutia! [Video tutorial]]
» Cum faci un folder invizibi?->Solutia ! [Video tutorial]
» Metoda de rezolvare a cubului RUBIK! [Video tutorial]
» Cum ici faci calculatorul sa ruleze mai rapid?->Solutia ! [Video tutorial]
» Cum inchizi calculatorul unui prietn (O farsa clasica) ->Solutia! [Video tutorial]]
:: Tutoriale
Pagina 1 din 1
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum
|
|