Noile caracteristici adaugate in HTML5 sunt bazate pe HTML, CSS, DOM, si JavaScript; si reduc necesitatea plugin-urilor externe (precum Flash).
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 />
<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>.<!doctype html>Tag-ul Meta charset e mai simplu:
<meta charset="utf-8">
<!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="https://marplo.net/" title="Home">Home</a></li> <li><a href="http://www.coursesweb.net/" title="Cursuri Web">Cursuri Web</a></li> <li><a href="https://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="https://marplo.net/html" title="Curs HTML">Curs HTML</a>.</p> </footer> </section> <section id="sidebar"> <nav> <ul> <li><a href="https://marplo.net/html" title="Curs HTML">Curs HTML</a></li> <li><a href="https://marplo.net/css" title="Curs CSS">Curs CSS</a></li> <li><a href="https://marplo.net/javascript" title="JavaScript">JavaScript</a></li> <li><a href="https://marplo.net/php-mysql" title="PHP-MySQL">PHP-MySQL</a></li> <li><a href="https://marplo.net/flash" title="Flash-ActionScript 3">Flash-ActionScript 3</a></li> <li><a href="https://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="https://marplo.net/" title="Cursuri gratuite, Jocuri, Anime">marplo.net</a></p> </footer> </body> </html>
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; }
<link rel="stylesheet" type="text/css" href="style.css" />Pentru a crea pagini web cu HTML5, ar trebui sa cunoasteti si CSS.
<form action="script.php" method="post"> ... </form>
#id { background-color: #bbfeda; box-shadow: 11px 11px 5px #7878da; }
var fruits = ["mar", "cireasa", "banana"]; fruits.shift(); alert(fruits.length); // 2
if(extension_loaded("PDO") === true) echo "PDO este valabil."
Can I listen to music? - Pot asculta muzica?
Me gustan las frutas dulces. - Imi plac fructele dulci.