De | | HTML | 13770 vizualizari
10 cele mai utile fragmente de cod HTML5

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>
tag
tag
tag
tag
Scris de:
Serban Cioclov

CEO & Founder of SCDesign.ro

Cere Oferta Gratuit

Imaginea afacerii dumneavoastra trebuie sa aiba un impact vizual aparte pentru a oferi din primul moment încredere utilizatorului. Fie ca aveti nevoie de un site web, magazin online, logo ori alt element grafic, calitatea este garantata.

Doriti o evaluare gratuita a unui proiect? Ne puteti trimite detaliile
folosind datele sau formularul de contact.

Vreau oferta

Wordpress
MySQL
cPanel
HTML5
Prestashop
Prestashop
Prestashop
Prestashop