Skip to content

Instantly share code, notes, and snippets.

@nicolaskempf57

nicolaskempf57/01-minimal.html

Last active October 29, 2021 06:43
Show Gist options
  • Save nicolaskempf57/328122019656c76c5af9303cf7086a41 to your computer and use it in GitHub Desktop.
Save nicolaskempf57/328122019656c76c5af9303cf7086a41 to your computer and use it in GitHub Desktop.
Download ZIP
Initiation au HTML
Raw
01-minimal.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Le titre</title>
</head>
<body>
<!-- contenu de la page -->
</body>
</html>
Raw
02-charset.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Page de présentation de Nicolas KEMPF</title>
<meta charset="utf-8"/>
</head>
<body>
Je m'appelle Nicolas KEMPF.
J'écoute du jazz.
Il fait 21&#8451;
</body>
</html>
Raw
03-contenu.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Initiation à l'HTML</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>Initiation à l'HTML</h1>
<h2>L'encodage</h2>
<p>&lt;h1&gt;Un titre&lt;/h1&gt;</p>
<h2>Les balises de contenu</h2>
<h3>Les titres</h3>
<p>Les titres permettent de hiérarchiser son contenu.</p>
<p>Ils vont de h1 à h6.</p>
<h3>Les listes</h3>
<p>Il existe 3 types de listes :</p>
<ul>
<li>les listes non ordonnées (ul)</li>
<li>les listes ordonnées (ol)</li>
<li>les listes de description (dl)</li>
</ul>
<p>En détails</p>
<dl>
<dt>Liste non ordonnée</dt>
<dd>Liste avec des points, cercles ou carrés pour chaque élément.</dd>
<dt>Liste ordonnée</dt>
<dd>Liste avec un numéro ou une lettre devant chaque élément.</dd>
<dt>Liste de description</dt>
<dd>Une liste particulière qui permet d'avoir des détails pour chaque élément.</dd>
</dl>
<p>Une liste de description est toujours constituée de :</p>
<ol>
<li>titre (dt)</li>
<li>description (dl)</li>
</ol>
<img
src="https://upload.wikimedia.org/wikipedia/commons/b/b6/Image_created_with_a_mobile_phone.png"
alt="Utiliser son téléphone pour capturer une image du monde extérieur"
style="width: 100%;"
/>
</body>
</html>
Raw
05-table.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Initiation à l'HTML</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>Initiation à l'HTML</h1>
<table>
<caption>Un tableau récapitulatif</caption>
<thead>
<tr>
<th scope="col">Balise</th>
<th scope="col">Signification</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">table</th>
<td>Entoure tout le contenu d'un tableau</td>
</tr>
<tr>
<th scope="row">caption</th>
<td>Légende ou titre du tableau</td>
</tr>
<tr>
<th scope="row">thead</th>
<td>En-tête du tableau</td>
</tr>
<tr>
<th scope="row">tbody</th>
<td>Corps du tableau</td>
</tr>
<tr>
<th scope="row">tr</th>
<td>Une ligne (row) du tableau</td>
</tr>
<tr>
<th scope="row">th</th>
<td>Cellule d'entête pour un ensemble de cellule</td>
</tr>
<tr>
<th scope="row">td</th>
<td>Cellule d'un tableau qui contient des données</td>
</tr>
</tbody>
</table>
</body>
</html>
Raw
06-indent.html
<html lang="en"><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>The Best HTML Examples and HTML5 Examples</title>
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta
name="description" content="HTML provides the structure of websites. Here are some examples of how to use HTML syntax to build websites, including some examples of newer HTML5 features. The A Href Attribute ExampleThe <a href> attribute refers to a destination provided by a link. The a (anchor) tag is dead">
<style id="fit-vids-style">.fluid-width-video-container{flex-grow: 1;width:100%;}.fluid-width-video-wrapper{width:100%;position:relative;padding:0;}.fluid-width-video-wrapper iframe,.fluid-width-video-wrapper object,.fluid-width-video-wrapper embed {position:absolute;top:0;left:0;width:100%;height:100%;}</style></head>
<body class="post-template tag-html tag-html5">
<div class="site-wrapper">
<nav class="site-nav nav-padding">
<div class="site-nav-left">
</div>
<div class="site-nav-middle">
<a class="site-nav-logo" href="https://www.freecodecamp.org/news"><img src="/news/content/images/2019/11/fcc_primary_large_24X210.svg" alt="freeCodeCamp.org"></a>
</div>
<div class="site-nav-right"><div class="nav-group"><a class="nav-forum" id="nav-forum" rel="noopener noreferrer" target="_blank" href="https://forum.freecodecamp.org/">Forum
</a>
</div>
</div>
</nav>
<a class="banner" id="banner" rel="noopener noreferrer" target="_blank" href="https://www.freecodecamp.org/">
<p>
Learn to code — <span>free 3,000-hour curriculum</span>
</p>
</a>
<div id="error-message"></div>
<main id="site-main" class="site-main outer">
<div class="inner">
<article class="post-full post tag-html tag-html5 ">
<header class="post-full-header">
<section class="post-full-meta">
<time class="post-full-meta-date" datetime="November 24, 2019">November 24, 2019</time>
<span class="date-divider">/</span><a href="/news/tag/html/">#HTML
</a>
</section>
<h1 class="post-full-title">The Best HTML Examples and HTML5 Examples</h1>
</header>
<div class="post-full-author-header">
</div>
</div>
<hr>
<p class="social-row">
If this article was helpful, <a id="tweet-btn" class="cta-button">tweet it.</a>
</p>
<div class="learn-cta-row">
<p>
Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. <a class="cta-button" id="learn-to-code-cta" rel="noopener noreferrer" target="_blank" href="https://www.freecodecamp.org/learn/">Get started</a>
</p>
</div>
</section>
</article>
</div>
</main>
</div>
</body></html>
Raw
07-form.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Initiation à l'HTML</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>Initiation à l'HTML</h1>
<p>par <a href="https://nicolaskempf.gumroad.com/">Nicolas KEMPF</a>. Je suis joignable par <a href="mailto:nicolas@conciergerie.dev">email</a>.</p>
<h2>Les formulaires</h2>
<form>
<fieldset>
<legend>Informations personnelles</legend>
<label>Prénom: <input required="required" name="firstname" type="text" placeholder="John"/></label>
<label>Nom: <input required="required" name="name" type="text" placeholder="Doe"/></label>
<label for="description">Description:</label>
<textarea id="description" name="description" placeholder="Une description"></textarea>
<input type="submit" value="Envoyer avec un input"/>
<button type="submit">Envoyer avec un boutton</button>
<button type="reset">Remettre à zéro</button>
</fieldset>
</form>
</body>
</html>
Raw
08-style.css
.alert {
color: red;
}
Raw
08-style.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Les styles — Initiation à l'HTML</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="assets/style.css" />
<link href="https://fonts.googleapis.com/css2?family=Andada+Pro:ital,wght@0,400;1,700&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Andada Pro', serif;
}
.text-red {
color: red;
}
</style>
</head>
<body>
<h1>Les styles</h1>
<p>par <a href="https://nicolaskempf.gumroad.com/">Nicolas KEMPF</a>. Je suis joignable par <a href="mailto:nicolas@conciergerie.dev">email</a>.</p>
<h2>Les styles</h2>
<p>Un texte simple</p>
<p style="color: red;">Un texte simple en rouge</p>
<p class="text-red">Un texte en rouge via class</p>
<p class="alert">Un texte en rouge via class depuis un fichier externe</p>
</body>
</html>
Raw
09-script.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Les scripts — Initiation à l'HTML</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>Les scripts</h1>
<p>par <a href="https://nicolaskempf.gumroad.com/">Nicolas KEMPF</a>. Je suis joignable par <a href="mailto:nicolas@conciergerie.dev">email</a>.</p>
<h2>Les scripts</h2>
<p>Un texte simple</p>
<p onclick="alert('Bonjour')">Un texte simple qui réagit aux clics.</p>
<button onclick="console.log('clic')">Clic moi !</button>
<script>
document.write('<p>Nouveau contenu ajouté en JS</p>')
console.log('page loaded')
</script>
<script src="./assets/script.js"></script>
</body>
</html>
Raw
09-script.js
console.log('log from a file')
document.write('<p>Nouveau contenu ajouté en JS depuis un fichier</p>')
Raw
10-css-basics.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Le CSS — Initiation à l'HTML</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="assets/style-course.css" />
</head>
<body>
<h1>Le CSS</h1>
<p>par <a href="https://nicolaskempf.gumroad.com/">Nicolas KEMPF</a>. Je suis joignable par <a href="mailto:nicolas@conciergerie.dev">email</a>.</p>
<p class="alert">Un texte en rouge via classe depuis un fichier externe avec @import</p>
<div class="alert">Un autre texte en rouge avec la meme classe</div>
<div id="special">Un texte en vert via id</div>
<form>
<fieldset>
<legend>Informations personnelles</legend>
<label>Mot de passe: <input required="required" name="password" type="password" placeholder="password"/></label>
</fieldset>
</form>
</body>
</html>
Raw
10-style-course.css
@import 'style.css';
h1 {
color: royalblue;
}
#special {
color: green;
}
input[type="password"] {
border: 1px solid black;
}
.alert:hover {
font-weight: bold;
}
.alert:focus {
font-size: 3rem;
}
Raw
11-text.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Les styles de texte — Initiation à l'HTML</title>
<meta charset="utf-8"/>
</head>
<body>
<h1>Les styles de texte</h1>
<p>par <a href="https://nicolaskempf.gumroad.com/">Nicolas KEMPF</a>. Je suis joignable par <a href="mailto:nicolas@conciergerie.dev">email</a>.</p>
<p>Un paragraphe</p>
<p style="font-size: 2rem;">Un paragraphe</p>
<p style="font-style: italic;">Un paragraphe</p>
<p style="font-weight: lighter;">Un paragraphe</p>
<p style="text-decoration: underline;">Un paragraphe</p>
<p style="text-transform:capitalize;">Un paragraphe</p>
<p style="text-align: center;">Un paragraphe</p>
</body>
</html>
Raw
12-selector.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Les formulaires — Initiation à l'HTML</title>
<meta charset="utf-8"/>
<style>
#outer a {
background-color: red;
}
#outer #inner a {
background-color: blue;
}
#outer div ul li a {
color: yellow;
}
#outer div ul .nav a {
color: white;
}
div div li:nth-child(2) a:hover {
border: 10px solid black;
}
div li:nth-child(2) a:hover {
border: 10px dashed black;
}
div div .nav:nth-child(2) a:hover {
border: 10px double black;
}
a {
display: inline-block;
line-height: 40px;
font-size: 20px;
text-decoration: none;
text-align: center;
width: 200px;
margin-bottom: 10px;
}
ul {
padding: 0;
}
li {
list-style-type: none;
}
</style>
</head>
<body>
<div id="outer" class="container">
<div id="inner" class="container">
<ul>
<li class="nav"><a href="#">One</a></li>
<li class="nav"><a href="#">Two</a></li>
</ul>
</div>
</div>
</body>
</html>
Raw
13-float.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Les floats — Initiation à l'HTML</title>
<meta charset="utf-8"/>
<style>
.w-50 {
width: 50%;
float: left;
}
.clearfix {
clear: both;
}
</style>
</head>
<body>
<h1>Le CSS</h1>
<p>par <a href="https://nicolaskempf.gumroad.com/">Nicolas KEMPF</a>. Je suis joignable par <a href="mailto:nicolas@conciergerie.dev">email</a>.</p>
<div>Un paragraphe</div>
<div>Un autre paragraphe</div>
<div class="w-50">Un demi paragraphe qui est vraiment plus grand que l'autre................................................</div>
<div class="w-50">Un autre demi paragraphe</div>
<div class="w-50">Un 3e demi paragraphe</div>
<div class="w-50 clearfix">Un 4e demi paragraphe</div>
</body>
</html>
Raw
14-inlineblock.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Les floats — Initiation à l'HTML</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="assets/style-course.css" />
<style>
.inline-block {
display: inline-block;
}
.inline {
display: inline;
}
</style>
</head>
<body>
<h1>Le CSS</h1>
<p>par <a href="https://nicolaskempf.gumroad.com/">Nicolas KEMPF</a>. Je suis joignable par <a href="mailto:nicolas@conciergerie.dev">email</a>.</p>
<div>Un paragraphe</div>
<div class="inline-block">Un demi paragraphe qui est vraiment plus grand que l'autre................................................</div>
<div class="inline-block"><p>Un autre demi paragraphe</p><p>et dedans un p</p></div>
<div class="inline-block">Un 3e demi paragraphe</div>
<div class="inline-block">Un 4e demi paragraphe</div>
<br />
<!-- La même chose ne fonctionne pas avec un display inline -->
<div class="inline">Un demi paragraphe qui est vraiment plus grand que l'autre................................................</div>
<div class="inline"><p>Un autre demi paragraphe</p><p>et dedans un p</p></div>
<div class="inline">Un 3e demi paragraphe</div>
<div class="inline">Un 4e demi paragraphe</div>
</body>
</html>
Raw
15-flexbox.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Flexbox — Initiation à l'HTML</title>
<meta charset="utf-8"/>
<style>
.container {
display: flex;
flex-wrap: wrap;
}
.container div {
background-color: wheat;
border: solid;
padding: 10px;
flex: 1;
}
.container .important-content {
flex: 2;
}
</style>
</head>
<body>
<h1>Les flexbox</h1>
<p>par <a href="https://nicolaskempf.gumroad.com/">Nicolas KEMPF</a>. Je suis joignable par <a href="mailto:nicolas@conciergerie.dev">email</a>.</p>
<div class="container">
<div class="important-content">L'avantage de flexbox, c'est qu'il n'y a rien à faire.</div>
<div>Par défaut, les éléments vont prendre toute la place disponible en largeur. S'il n'y a plus place disponible sur la ligne, le contenu continue à s'afficher de haut en bas.</div>
<div>Autre particularité, tous les enfants ont la même hauteur par défaut</div>
<div>Autre particularité, tous les enfants ont la même hauteur par défaut</div>
<div>Autre particularité, tous les enfants ont la même hauteur par défaut</div>
<div>Autre particularité, tous les enfants ont la même hauteur par défaut</div>
<div>Autre particularité, tous les enfants ont la même hauteur par défaut</div>
<div>Autre particularité, tous les enfants ont la même hauteur par défaut</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment