Skip to content

Instantly share code, notes, and snippets.

@gregoirenoyelle

gregoirenoyelle/balise-ouverture-fermeture.html

Last active August 29, 2022 14:49
Show Gist options
  • Save gregoirenoyelle/4011491 to your computer and use it in GitHub Desktop.
Save gregoirenoyelle/4011491 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Mod
Raw
balise-ouverture-fermeture.html
<!DOCTYPE HTML>
<html>
<head>
<title>Ma page type</title>
<meta charset="utf-8">
</head>
<body>
<!-- commentaire dans le htlm -->
<p>Mon paragraphe <br />
avec un retour chariot.</p>
<!-- ouverture de la div -->
<div class="mon-image">
<img src="__images/mon-image-1.jpg" alt="mon-image-1" width="686" height="594">
</div>
<!-- fermeture de la div -->
</body>
</html>
Raw
head-html5-n1.html
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- meta -->
<meta charset="utf-8">
<meta name="keywords" content="mots-clés">
<meta name="description" content="description">
<meta name="author" content="auteur">
<!-- css -->
<link rel="stylesheet" href="stylesheet.css">
<link rel="icon" href="favicon.ico">
<!-- script -->
<script scr="file.js"></script>
<script src="script-accueil.js"></script>
<title>Titre de la page</title>
</head>
Raw
page-base-html5.html
<!DOCTYPE HTML>
<html>
<head>
<title>Ma page type</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="wrapper">
<h1>Mon titre</h1>
<h2>Mon sous titre</h2>
<div class="partie partie-1">
<h3>Partie 1</h3>
<p>Maecenas sed diam eget <strong>risus varius</strong> blandit sit amet non magna. <br> Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. <em>Donec ullamcorper nulla</em> non metus auctor fringilla.</p>
</div><!-- fin .partie-1 -->
<div class="partie partie-2">
<h3>Partie 2</h3>
<p>Cras mattis consectetur purus sit amet fermentum. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Vestibulum id ligula porta felis euismod semper. Vivamus <strong>sagittis lacus vel</strong> augue laoreet rutrum faucibus dolor auctor.</p>
<ul>
<li>Liste 1</li>
<li>Liste 2</li>
<li>Liste 3</li>
<li>Liste 4</li>
</ul>
</div><!-- fin .partie-2 -->
</div><!-- fin #wrapper -->
</body>
</html>
Raw
page-type-html5.html
<!DOCTYPE HTML>
<!-- d'après cet article
http://www.digimantra.com/technology/html5/html5-page-structure/
par Sachin Khosla
-->
<html>
<head>
<meta charset="utf-8">
<title>Website Title</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
</header>
<section>
<article>
<header>
<h2>Title Goes here</h2>
<p>Posted on <time datetime="2012-07-28T13:00:24+01:00">July 28th 2012</time> by <a href="#">Author</a> - <a href="#comments">12 comments</a></p>
</header>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</article>
<article>
<header>
<h2>Article title</h2>
<p>Posted on <time datetime="2012-07-26T13:00:24+01:00">July 26th 2012</time> by <a href="#">Author</a> - <a href="#comments">9 comments</a></p>
</header>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</article>
</section>
<aside>
<h2>Contact Us</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p>
</aside>
<footer>
<p>Copyright 2012 DigiMantra Labs ©</p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment