Structura unui document HTML5

<!DOCTYPE HTML>

<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Website-ul tau</title>
</head>

<body>

	<header>
		<nav>
			<ul>
				<li>Meniu</li>
			</ul>
		</nav>
	</header>

	<section>

		<article>
			<header>
				<h2>Titlu Articol</h2>
				<p>Postat la <time datetime="2009-09-04T16:31:24+02:00">25 Ianuarie 2014</time> by <a href="#">Autor</a> - <a href="#comments">6 comentarii</a></p>
			</header>
			<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
		</article>

           </section> 
           <aside> 
                <h2>Sidebar</h2> 
                <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p> 
         </aside> 
         <footer> 
           <p>Copyright 2009 Your name</p> 
         </footer> 
     </body> 
</html>

@font-face -> Custom fonts pe site-ul tau

In primul rand, pentru a folosi un custom font pe site-ul dvs, trebuie sa il convertiti pentru a putea fi interpretat de toate browserele importante (FF, Chrome, Safari, IE). Pentru a face asta, in primul rand trebuie sa aveti fisierul cu fontul respectiv (.ttf/.otf) si apoi intrati pe Font Squirrel si convertiti-l. Presupun ca nu trebuie sa explic cum folosesti site-ul respectiv. (pentru cei ce nu se descurca, exista un buton destul de mare si de vizibil pe care scrie Add Fonts). Mai departe va scriu snippet-ul CSS si pentru HTML.

CSS

@font-face {         font-family:'MyFontFamily';
            src: url('myfont-webfont.eot?') format('eot'),
                 url('myfont-webfont.woff') format('woff'),
                 url('myfont-webfont.ttf')  format('truetype'),
                 url('myfont-webfont.svg#svgFontName') format('svg');
 }

HTML

body {        font-family:'MyFontFamily',Fallback, sans-serif;}

Ce este si ce face DOCTYPE

Cand un browser scaneaza site-ul tau, primul lucru pe care il cauta este DOCTYPE-ul sau elementul care ajuta redarea corecta a site-ului. Cand un DOCTYPE nu exista/este gresit/este depasit, codurile HTML, CSS sau DOM sunt redate asa cum au fost create in anii 90.

Un DOCTYPE descrie un DTD ( document type definition). Este un document care este citit automat (machine-readable) si care ofera browserului informatia de care are nevoie pentru a afisa pagina corect. Daca DOCTYPE se refera la „XHTML 1.0 transitional”, se va primi informatia pe care „DTD XHTML 1.0 transitional” o ofera pentru a reda corect pagina web. Continuă lectura