Noile caracteristici adaugate in HTML5 sunt bazate pe HTML, CSS, DOM, si JavaScript; si reduc necesitatea plugin-urilor externe (precum Flash).

Despre sintaxa HTML5

Sintaxa HTML5 este compatibila cu HTML4 si XHTML.
- Puteti inchide elementele ce au un singur tag (META, BR, HR, INPUT, IMG) cu slash, <tag />, precum in XHTML; sau puteti sa le lasati fara sa le adaugati slash, <tag>.
- Puteti folosi litere mici, sau /si litere mari, pentru numele tag-urilor si atribute.
Astfel, toate variantele urmatoare sunt valide HTML5:

<meta charset="utf-8">

 Sau, inchis cu slash:
 
<meta charset="utf-8" />
<img src="image.jpg" alt="Text oarecare">
 Sau:
<img src="image.jpg" alt="Text oarecare" />
 Sau, cu litere mari:
<IMG src="image.jpg" ALT="Text oarecare">
<br>
 Sau:
<BR>
 Sau:
<br />

- In HTML5 puteti alege sa specificati sau nu atributul type in elementele <script>, and <style>, acesta a devenit optional:
<script type="text/javascript"><!--
 // Cod JavaScript
--></script>

 Sau:

<script><!--
 // Cod JavaScript
--></script>
<style type="text/css">
 /* Cod CSS */
</style>

 Sau:

<style>
 /* Cod CSS */
</style>
• Toate aceste variante sunt valide in HTML5, dar, ca o buna practica, este indicat sa folositi sintaxa XHTML; adica sa folositi litere mici, sa adaugati slash-ul de inchidere, si sa specificati atributul "type" in tag-urile <script>, si <style>.

Structura HTML5

Doctype in HTML5 e mai simplu:
<!doctype html>
Tag-ul Meta charset e mai simplu:
<meta charset="utf-8">

Div-urile sunt acum folosite petru stil si design, nu mai sunt necesare pentru structura; HTML5 include mai multe elemente noi pentru structurare, care ajuta la definirea si organizarea diferitelor parti in document.
Acestea sunt principalele elemente de structura care sunt folosite mai des in HTML5:
 
HTML5 vine si cu alte elemente interesante, precum <video> si <audio>, plus alte tag-uri si atribute noi si modificate, dar acest tutorial este o descriere scurta care prezinta principalele elemente de baza, ca sa intelegeti noua structura in HTML5, si sa treceti rapid de la HTML4 sau XHTML la HTML5.

Toate principalele browsere (Safari, Chrome, Firefox, Opera, Internet Explorer) continua sa adauge noile caracteristici HTML5 in ultimile lor versiuni, dar multi utilizatori inca folosesc versiuni de browser web ce nu recunosc noile elemente HTML5, precum IE7, IE8. In acest caz exista o solutie JavaScript, un script extern, html5.js (gazduit de un proiect Google) care face browser-ul IE sa recunoasca noua structura din HTML5.
Este recomandat sa includeti acest script in sectiunea HEAD a documentului HTML5, folosind acest cod:
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
Si urmatorul cod CSS, care face ca tag-urile specificate sa fie afisate ca elemente de tip bloc:
<style>header, footer, section, aside, nav, article {display: block;}</style>

Iata o structura comuna a unei pagin cu HTML5, ce contine un header in partea de sus a paginii (cu u meniu in el), o sectiune in partea stanga (cu un meniu de navigare "aside" pt. banner), o alta sectiune (cu Header, 2 articole si footer), si un footer in subsolul paginii (click pe imagine):
Structura HTML5

Puteti folosi tag-urile pentru structurare cu atributele "id" si "class", precum si <div>, <span>, <p>, si alte tag-uri HTML pentru design si organizare /aranjare continut in documentul HTML.
Mai jos sunt codurile HTML5 si CSS pentru a crea o pagina web bazata pe structura din imaginea de mai sus:

Document HTML5

<!doctype html>
<html>
<head>
 <meta charset="utf-8" />
 <title>Web Development Cursuri si Tutoriale</title>
 <meta name="description" content="Examplu document in HTML5, template, cursuri si tutoriale" />
<meta name="keywords" content="html5, tutoriale html5, cursuri" />
 <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<header id="page_header">
 <h1>Web Development Cursuri si Tutoriale</h1>
 <nav>
 <ul>
 <li><a href="http://marplo.net/" title="Home">Home</a></li>
 <li><a href="http://www.coursesweb.net/" title="Cursuri Web">Cursuri Web</a></li>
 <li><a href="http://marplo.net/forum/">Forum</a></li>
 <li><a href="../../coment/contact.php" title="Contact">Contact</a></li>
 </ul>
 </nav>
</header>

<section id="posts">
 <header id="posts_header">
 <h2>Tutoriale HTML5</h2>
 </header>
 <article class="post">
 <header>
 <h3>Invata rapid HTML5</h3>
 </header>
 <div class="ctext">
 Invata despre noile caracteristici din HTML5.<br />
 Tag-uri noi, si elemente pentru structura.
 </div>
 <aside class="post_baner">Aici poate fi un banner</aside>
 <p>
 Noile caracteristici din <b>HTML5</b> sunt bazate pe HTML, CSS, DOM, si JavaScript; si reduc necesitatea plugin-urilor externe (precum Flash).<br />
 Multe alte noi caracteristici HTML5 sunt centrate pe crearea unei mai bune platforme pentru aplicatiile web, <a href="http://marplonet.net/html/tutorial-html5.html" title="Tutorial HTML5">Cititi mai mult</a> ...
 </p>
 </article>
 <article class="post">
 <header>
 <h3>Elemente si attribute noi pentru formular in HTML5</h3>
 </header>
 <div class="ctext">
 Formularele HTML sunt folosite in general ca sa transfere date adaugate de utilizator la un script de pe server sau JavaScript, ca sa fie procesate de un limbaj de programare.
 </div>
 <p>
 HTML5 adauga mai multe tipuri de casute input noi, pentru formular (datetime, datetime-local, date, month, week, time, number, range, email, url, search, and color), <a href="http://marplonet.net/html/html5-formular-input-atribute.html" title="Elemente de formular noi">Cititi mai mult</a> ...
 </p>
 </article>
 <footer id="post_footer">
 <p>Mai multe lectii si tutoriale HTML: <a href="http://marplo.net/html" title="Curs HTML">Curs HTML</a>.</p>
 </footer>
</section>

<section id="sidebar">
 <nav>
 <ul>
 <li><a href="http://marplo.net/html" title="Curs HTML">Curs HTML</a></li>
 <li><a href="http://marplo.net/css" title="Curs CSS">Curs CSS</a></li>
 <li><a href="http://marplo.net/javascript" title="JavaScript">JavaScript</a></li>
 <li><a href="http://marplo.net/php-mysql" title="PHP-MySQL">PHP-MySQL</a></li>
 <li><a href="http://marplo.net/flash" title="Flash-ActionScript 3">Flash-ActionScript 3</a></li>
 <li><a href="http://marplo.net/jocuri" title="Jocuri Flash">Jocuri Flash</a></li>
 </ul>
 </nav>
 <aside class="sidebar_baner">Banner in sidebar</aside>
</section>

<footer id="page_footer">
 <p>De la: <a href="http://marplo.net/" title="Cursuri gratuite, Jocuri, Anime">marplo.net</a></p>
</footer>
</body>
</html>
 

Cod CSS, in fisierul style.css

body {
 width: 99%;
 margin: 2px auto;
 font-family: Arial, "MS Trebuchet", sans-serif;
 text-align: center;
}
header, footer, section, aside, nav, article { display: block; }

header#page_header {
 width: 100%;
 margin: 4px auto;
 border: 2px solid blue;
}
header#page_header nav ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#page_header nav ul li {
 display:inline;
 margin: 0 20px 0 0;
 padding: 1px;
}
section#posts {
 float: right;
 width: 79%;
 background-color: #f1f2fe;
 border: 1px solid yellow;
}
section#posts header#posts_header {
 background-color: #abcdef;
 border: 1px solid green;
}
article.post {
 margin:10px;
 background-color: yellow;
 text-align: left;
}
article.post aside {
 float: right;
 margin-top: -58px;
 width: 250px;
 height: 120px;
 background-color: #fefefe;
}
article.post p { clear: right;}
section#sidebar {
 float: left;
 width: 18%;
 background-color: #d7d8fe;
 border: 1px solid green;
 padding:5px;
}
section#sidebar nav ul {
 margin: 3px auto;
 text-align: left;
 padding: 0 0 0 15;
}
section#sidebar aside {
 width: 160px;
 height: 250px;
 margin: 10px auto;
 background-color: #fefefe;
}
footer#page_footer {
 clear: both;
 width: 100%;
 margin: 4px auto;
 border: 2px solid blue;
}

Aceste reguli CSS sunt salvate intr-un fisier extern, denumit "style.css", si este inclus in pagina HTML cu urmatorul cod adaugat in sectiunea HEAD.
<link rel="stylesheet" type="text/css" href="style.css" />
Pentru a crea pagini web cu HTML5, ar trebui sa cunoasteti si CSS.

- Click pe Examplu structura HTML5, ca sa vedeti cum apare pagina web creata cu exemplu prezentat mai sus.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag se foloseste in <table> pentru a crea celula de tip "header"?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Ce proprietate CSS seteaza distanta dintre randuri?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Care functie deschide o noua fereastra.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicati functia PHP care returneaza un array cu numele fisierelor si directoarelor dintr-un director.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Care din urmatoarele forme a verbului "sleep" (a dormi) se foloseste pentru viitor?
sleeping slept will sleep
He will sleep there.
- El va dormi acolo.
Care din urmatoarele forme a verbului "dormir" (a dormi) se foloseste pentru viitor?
dormido dormirá durmiendo
Él dormirá allí.
- El va dormi acolo.
Tutorial HTML5

Last accessed pages

  1. Jocuri Zuma (1513)
  2. Butterfly Kyodai (2101)
  3. Zuma Deluxe (2025)
  4. Lectii audio-video de limba engleza, animate (120)
  5. Clasificarea adverbelor - Adverbs classification (208)

Popular pages this month

  1. Bubbles3 (3301)
  2. Gramatica limbii engleze - Prezentare Generala (2644)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2358)
  4. Butterfly Kyodai (2101)
  5. Zuma Deluxe (2025)