Unele persoane adora scrierea de cod. Standardul HTML5 ne ofera o larga gama de noi functii de care trebuie sa profitam. Asadar, urmeaza o lista cu 11 fragmente utile de cod HTML5 ce vor face deliciul utilizatorilor tai.
1. Structura de baza a unui document HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<!--[if lt IE 9]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
2. Compatibilitate cu Internet Explorer (IE)
O linie de cod utile ce asigura ca elementele de cod HTML5 vor functiona optim si in Internet Explorer (browser care uneori are probleme in acest sens)
<!--[if IE]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
3. Video HTML5 compatibile cu browsere vechi
HTML5 permite utilizatorilor sa introduca fisiere video folosind eticheta <video>. Insa, aceasta eticheta nu functioneaza pe unele browsere mai vechi ce nu sunt compatibile cu HTML5. Aceasta linie de fragment se asigura ca fisierul video va functiona si in aceste browsere, folosind Adobe Flash.
<video width="640" height="360" controls>
<source src="__VIDEO__.MP4" type="video/mp4" />
<source src="__VIDEO__.OGV" type="video/ogg" />
<object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
<param name="movie" value="__FLASH__.SWF" />
<param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" />
<img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
title="No video playback capabilities, please download the video below" />
</object>
</video>
4. Completare automata a listelor drop-down (folosind <datalist>)
Eticheta HTML5 datalist ajuta utilizatorul sa creeze o lista drop-down ce are functie de autocomplete.
<input name="frameworks" list="frameworks" />
<datalist id="frameworks">
<option value="MooTools">
<option value="Moobile">
<option value="Dojo Toolkit">
<option value="jQuery">
<option value="YUI">
</datalist>
Exemplu:
Completati urmatoarea lista folosind un cuvant ce incepe cu litera c sau r.
6. Cele mai folosite etichete input in HTML5
HTML5 defineste o varietate de noi tipuri input: slidere, numere, calendare popup, alegerea de culori, input pentru adresa de email, etc. Acum este mult mai usor sa realizezi formulare de contact sau comanda. Browserele mai vechi ce nu suporta aceste input-uri vor folosi un camp standard.
<input type="range"/> (Slider)
<input type="date"/> (Calendar Popup)
<input type="color"/> (Alegerea culorii)
<input type="email"/> (Input pentru adrese email)
<input type="url"/> (Input pentru adrese web)
<input type="tel"/> (Input pentru numar de telefon)
<input type="search"/> (Input de search)
7. Resetarea CSS in HTML5
Acest cod reseteaza CSS-ul
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, figure, footer, header, hgroup, menu, nav, section, menu,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
article, aside, figure, footer, header,
hgroup, nav, section { display:block; }
nav ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after,
q:before, q:after { content:''; content:none; }
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
/* tables still need cellspacing="0" in the markup */
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
input, select { vertical-align:middle; }
8. Camp pentru directii Google Maps
Acest fragment de cod este extrem de folositor pentru paginile de contact. Utilizatorul introduce adresa sa curenta si primeste automat directii catre locatia afacerii dorite.
<form action="https://maps.google.com/maps" method="get" target="_blank">
<label for="saddr">Enter your location</label>
<input type="text" name="saddr" />
<input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
<input type="submit" value="Get directions" />
</form>
Exemplu: Directii catre Piata Unirii, Bucuresti
9. Informatii META si Open Graph
Fragment de cod ce ofera un exemplu pentru completarea informatiilor de tip meta si open graph. Aceste informatii se regasesc in eticheta head a unui document HTML5. Informatiile de tip META sunt folosite de catre motoarele de cautare, iar cele Open Graph de catre Facebook. Este foarte important ca un site web sa completeze aceste informatii pentru optimizarea SEO.
<!DOCTYPE html>
<html>
<head>
<!-- Informatii Meta -->
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="robots" content="index,follow">
<meta name="copyright" content="">
<!-- Meta Information ends -->
<!-- Informatii Open Graph -->
<meta property="og:title" content="">
<meta property="og:type" content="">
<meta property="og:url" content="">
<meta property="og:image" content="">
<meta property="og:site_name" content="">
<meta property="fb:admins" content="USER_ID">
<meta property="og:description"
content="">
</head>
<body>
<!-- Continut site -->
</body>
</html>
10. Folosirea obiectelor Flash
Desi utilizarea flash in cadrul site-urilor nu mai este recomandata, aici aveti un cod valid ce poate preveni eventuale erori.
<object type="application/x-shockwave-flash"
data="your-flash-file.swf"
width="0" height="0">
<param name="movie" value="your-flash-file.swf" />
<param name="quality" value="high"/>
</object>
