Bonsoir,
A défaut d'avoir un projet précis, je m'entraîne au langage HTML et CSS en refaisant des sites que je trouve sur freehtml5template. Là je suis en train de faire celui-ci : http://freehtml5templates.com/downloads/free/elegantpress/
J'ai parfois eu des doutes quant à l'utilisation de certaines balises. J'aimerai avoir votre avis sur la partie HTML, qu'en pensez-vous ? :
Modifié par Macska (13 Dec 2013 - 22:46)
A défaut d'avoir un projet précis, je m'entraîne au langage HTML et CSS en refaisant des sites que je trouve sur freehtml5template. Là je suis en train de faire celui-ci : http://freehtml5templates.com/downloads/free/elegantpress/
J'ai parfois eu des doutes quant à l'utilisation de certaines balises. J'aimerai avoir votre avis sur la partie HTML, qu'en pensez-vous ? :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<title>ELEGANT PRESS</title>
</head>
<body>
<!----------------- HEADER ----------------->
<header class="vcard"><!-- hcard - appel au format hcard -->
<!-- TITLE -->
<h1 class="fn org name">ELEGANT PRESS</h1><!-- hcard - nom -->
<!-- SLOGAN -->
<h2 class="title">CLEAN WEBSITE TEMPLATE</h2><!-- hcard - slogan -->
<!-- CONTACT -->
<p class="tel">Tel : 123 333 4444 |</p><!-- hcard - telephone --> <p class="email">Mail : email@elegantpress.com</p><!-- hcard - mail -->
<!-- NAVIGATION -->
<nav>
<ul>
<li>HOMEPAGE</li>
<li>TYPOGRAPHY</li>
<li>LAYOUTS
<ul>
<li>SIDEBAR
<ul>
<li>RIGHT SIDEBAR</li>
<li>FULL WIDTH</li>
</ul>
</li>
</ul>
</li>
<li>PORTFOLIO</li>
<li>GALLERY</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
<!----------------- SLIDER ----------------->
<div id="slider"></div>
<!----------------- ARTICLE ----------------->
<section>
<!-- FIRST ARTICLE -->
<article>
<h1>Who Are We</h1>
<p>Aliquatjusto quisque nam consequat doloreet vest orna partur scetur portortis nam.
Metadipiscing eget facilis elit sagittis felisi eger id justo maurisus convallicitur.
Dapiensociis temper donec auctortortis cumsan et curabitur condis lorem loborttis leo.
Ipsumcommodo libero nunc at in velis tincidunt pellentum tincidunt vel lorem.</p>
<a href="#">Read More</a>
</article>
<!-- SECOND ARTICLE -->
<article>
<h1>Compatibility</h1>
<p>Dapiensociis temper donec auctortortis cumsan et curabitur.</p>
<ul>
<li>Condis lorem loborttis leo.</li>
<li>Portortornec condimenterdum eget consectetuer condis.</li>
<li>Puruselit mauris nulla hendimentesque elit semper nam a sapien urna sempus.</li>
</ul>
</article>
<!-- THIRD ARTICLE -->
<article>
<h1>What We Do</h1>
<p>Temperinte interdum sempus odio urna eget curabitur semper convallis nunc laoreet.
Nullain convallis ris elis vest liberos nis diculis feugiat in rutrum.
Suspendreristibulumfaucibulum lobortor quis tortortor ris sapien sce enim et volutpat sus.
Urnaretiumorci orci fauctor leo justo nulla cras ridiculum eu id vitae.</p>
<a href="#">Read More</a>
</article>
</section>
<!----------------- DOWNLOAD ----------------->
<section>
<h1>Like it ? Download it for free !</h1>
<p>At <a href="#">http://www.priteshgupta.com/templates/elegant-press</a></p>
<a href="#">Download</a>
</section>
<!----------------- IMAGE ----------------->
<section>
<!-- FIRST IMAGE -->
<figure>
<img src="images/....png" />
<figcaption>
<h1>First Featured Title</h1>
<p>Orciint erdum condimen terdum nulla mcorper elit nam curabitur laoreet met prae senean et iac ulum. Metridiculis cons eque quis iaculum aenean nunc aenean.</p>
</figcaption>
</figure>
<!-- SECOND IMAGE -->
<figure>
<img src="images/....png" />
<figcaption>
<h1>Second Featured Title</h1>
<p>Orciint erdum condimen terdum nulla mcorper elit nam curabitur laoreet met prae senean et iac ulum. Metridiculis cons eque quis iaculum aenean nunc aenean.</p>
</figcaption>
</figure>
<!-- THIRD IMAGE -->
<figure>
<img src="images/....png" />
<figcaption>
<h1>Third Featured Title</h1>
<p>Orciint erdum condimen terdum nulla mcorper elit nam curabitur laoreet met prae senean et iac ulum. Metridiculis cons eque quis iaculum aenean nunc aenean.</p>
</figcaption>
</figure>
</section>
<!----------------- LATEST NEWS / SOCIAL / LATEST IMAGE ----------------->
<aside>
<!-- LATEST NEWS -->
<div id="last-news">
<h1>From The Blog</h1>
<ul>
<li>
<h2>Lorem Ipsum Dolor</h2>
<p>Orciint erdum condimen terdum nulla mcorper elit nam curabitur...</p>
</li>
<li>
<h2>Prasent Et Eros</h2>
<p>Orciint erdum condimen terdum nulla mcorper elit nam curabitur...</p>
</li>
<li>
<h2>Suspendisse In Neque</h2>
<p>Orciint erdum condimen terdum nulla mcorper elit nam curabitur...</p>
</li>
</ul>
</div>
<!-- SOCIAL -->
<div id="social" class="vcard">
<h1>We Are Social !</h1>
<ul>
<li class="social url"><a href="#"><img src="images/facebook.png" alt="facebook" /></a></li><!-- hcard - social -->
<li class="social url"><a href="#"><img src="images/twitter.png" alt="twitter" /></a></li><!-- hcard - social -->
<li class="social url"><a href="#"><img src="images/flickr.png" alt="flickr" /></a></li><!-- hcard - social -->
<li class="social url"><a href="#"><img src="images/linkedin.png" alt="linkedin" /></a></li><!-- hcard - social -->
<li class="social url"><a href="#"><img src="images/delicious.png" alt="delicious" /></a></li><!-- hcard - social -->
<li class="social url"><a href="#"><img src="images/youtube.png" alt="youtube" /></a></li><!-- hcard - social -->
</ul>
</div>
<!-- LATEST IMAGE -->
<div id="latest_image">
<h1>Latest image</h1>
<ul>
<li><a href="#"><img src="images/image.png" /></li>
<li><a href="#"><img src="images/image.png" /></li>
<li><a href="#"><img src="images/image.png" /></li>
<li><a href="#"><img src="images/image.png" /></li>
</ul>
</div>
</aside>
<!----------------- FOOTER ----------------->
<footer>
<p>Copyright © 2013 - All Rights Reserved - <a href="#">Domain Name</a></p>
<p>Design by <a href="#">PriteshGupta.com</a></p>
</footer>
</body>
</html>Modifié par Macska (13 Dec 2013 - 22:46)
