premier commit
This commit is contained in:
parent
6cf9146979
commit
589e7e555f
BIN
HTML exercices/Loutre.webp
Normal file
BIN
HTML exercices/Loutre.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
129
HTML exercices/exercice-semantique.html
Normal file
129
HTML exercices/exercice-semantique.html
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Document</title>
|
||||||
|
<style>
|
||||||
|
li {
|
||||||
|
color: blue;
|
||||||
|
font: 1em sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.titre-center {
|
||||||
|
text-align: center;
|
||||||
|
background-color: aqua;
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<div class="titre-center">
|
||||||
|
<h1>Le blog informatique</h1>
|
||||||
|
</div>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li>Accueil</li>
|
||||||
|
<li>FAQ</li>
|
||||||
|
<li>A propos</li>
|
||||||
|
<li>Contact</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<section>
|
||||||
|
<h2>A la une</h2>
|
||||||
|
<article>
|
||||||
|
<img src="" alt="oups cassé">
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<h1>Sujet du post</h1>
|
||||||
|
<p>hdfijsjisjd ushdisjdpjzi shdhoijdhks ksuhdijoqiz</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>01/05/2017</span>
|
||||||
|
<span>32 commentaires</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h2>Derniers posts</h2>
|
||||||
|
<article>
|
||||||
|
<img src="" alt="oups cassé">
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<h1>Sujet du post</h1>
|
||||||
|
<p>hgdjysgdkuhs jhsgdkhqkcb bqjhdgkqh</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>12/07/2017</span>
|
||||||
|
<span>41 commentaires</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<hr>
|
||||||
|
<article>
|
||||||
|
<img src="" alt="oups cassé">
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<h1>Sujet du post</h1>
|
||||||
|
<p>hbdfjhcsbc jdscbkdshckjds kjdscksc</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>10/07/2017</span>
|
||||||
|
<span>26 commentaires</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
<hr>
|
||||||
|
<article>
|
||||||
|
<img src="" alt="oups cassé">
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<h1>Sujet du post</h1>
|
||||||
|
<p>jhdckuhdfkhb bsjdbkcshief jksdsfuh</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span>08/07/2017</span>
|
||||||
|
<span>15 commentaires</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</section>
|
||||||
|
<aside>
|
||||||
|
<h1>2017</h1>
|
||||||
|
<details>
|
||||||
|
<summary>Janvier</summary>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>Février</summary>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>Mars</summary>
|
||||||
|
</details>
|
||||||
|
<details open>
|
||||||
|
<summary>Avril</summary>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://www.helmo.be/" target="_blank">élément cliquable</a></li>
|
||||||
|
<li><a href="https://www.helmo.be/" target="_blank">élément cliquable</a></li>
|
||||||
|
</ul>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>Mai</summary>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>Juin</summary>
|
||||||
|
</details>
|
||||||
|
<details>
|
||||||
|
<summary>Juillet</summary>
|
||||||
|
</details>
|
||||||
|
</aside>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<span>© Biogie - 2017</span>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
38
HTML exercices/exercice.html
Normal file
38
HTML exercices/exercice.html
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Corrigez moi</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Exercice de validation W3C</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<h2>Liste des fruits</h2>
|
||||||
|
<article>
|
||||||
|
<h2>Pomme</h2>
|
||||||
|
<div>
|
||||||
|
<ul>
|
||||||
|
<li>Jonagold</li>
|
||||||
|
<li>Golden
|
||||||
|
<li>Pink lady
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<footer>(source: Belgique)</footer>
|
||||||
|
</article>
|
||||||
|
<article>
|
||||||
|
<h2>Poire</h2>
|
||||||
|
<div>
|
||||||
|
<ol>
|
||||||
|
<li><a href="https://fr.wikipedia.org/wiki/Conf%C3%A9rence_(poire)">Conférence</a></li>
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
<aside><img src="http://www.devosgroup.be/images/producten/conf.jpg" alt="cassé"></aside>
|
||||||
|
</article>
|
||||||
|
<aside><p> Mangez au moins 5 fruits et légumes par jour</p></aside>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
HTML exercices/images/gashy.jpeg
Normal file
BIN
HTML exercices/images/gashy.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 88 KiB |
95
HTML exercices/insciption.html
Normal file
95
HTML exercices/insciption.html
Normal file
@ -0,0 +1,95 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>Création d'un compte sur iBaie </title>
|
||||||
|
<style>
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
width: 120px;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
label::after{
|
||||||
|
content: " :";
|
||||||
|
}
|
||||||
|
label.radio {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
label.radio::after {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
input[type=text], input[type=range], input[type=date], input[type=email], input[type=password], input[type=url], textarea, select {
|
||||||
|
width: 200px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
input:required{
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
fieldset {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Création de votre compte</h1>
|
||||||
|
<form>
|
||||||
|
<input id="counter" name="counter" type="hidden" value="100">
|
||||||
|
<fieldset>
|
||||||
|
<legend>Votre profil</legend>
|
||||||
|
<label for="statut">Statut</label><input id="statut" name="statut" type="text" >
|
||||||
|
<label for="nom">Nom</label><input id="nom" name="nom" type="text" >
|
||||||
|
<label for="satisfaction">Votre satisfaction</label><input id="satisfaction" name="satisfaction" type="range" min="0" max="4" step="1">
|
||||||
|
<input type="reset" name="reset1" value="Réinitialiser">
|
||||||
|
<button type="reset" name="reset2"><u>Autre réinitialiser</u></button>
|
||||||
|
<label for="courriel">Courriel</label><input id="courriel" name="courriel" type="email" >
|
||||||
|
<label for="motPasse">Mot de passe</label><input id="motPasse" name="motPasse" type="password" >
|
||||||
|
<label for="ancienPasse">Ancien</label><input id="ancienPasse" name="ancienPasse" type="password" >
|
||||||
|
<label >Taille</label>
|
||||||
|
<label class="radio"><input id="tailleS" name="taille[]" type="checkbox" value="S">S</label>
|
||||||
|
<label class="radio"><input id="tailleM" name="taille[]" type="checkbox" value="M">M</label>
|
||||||
|
<label class="radio"><input id="tailleL" name="taille[]" type="checkbox" value="L">L</label>
|
||||||
|
<label class="radio"><input id="tailleXL" name="taille[]" type="checkbox" value="XL">XL</label>
|
||||||
|
|
||||||
|
<label for="sexe">Sexe</label>
|
||||||
|
<label class="radio"><input id="sexeF" name="sexe" type="radio" value="Femme">Femme</label>
|
||||||
|
<label class="radio"><input id="sexeH" name="sexe" type="radio" value="Homme">Homme</label>
|
||||||
|
<label class="radio"><input id="sexeA" name="sexe" type="radio" value="Autre">Autre</label>
|
||||||
|
<label for="webPerso">Votre site web</label><input id="webPerso" name="webPerso" type="url">
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
<label for="plaque">Voiture</label><input id="plaque" name="plaque" type="text" >
|
||||||
|
<label for="quantite">Quantité</label><input id="quantite" name="quantite" type="number" value="0">
|
||||||
|
<label for="livraison">Livraison</label>
|
||||||
|
<select id="livraison" name="livraison">
|
||||||
|
<option value="D" selected>A domicile</option>
|
||||||
|
<option value="M">Au magasin</option>
|
||||||
|
</select>
|
||||||
|
<label for="message">Message</label><textarea id="message" name="message" rows="3" cols="20"></textarea>
|
||||||
|
|
||||||
|
<label for="date">Livré le</label><input id="date" name="date" type="date">
|
||||||
|
<label for="heure">A partir de</label><input id="heure" name="heure" type="time">
|
||||||
|
|
||||||
|
<label for="reduction">Réduction</label>
|
||||||
|
<select id="reduction" name="reduction" multiple>
|
||||||
|
<option selected>Famille nombreuse</option>
|
||||||
|
<option>Enfant de moins de 5ans</option>
|
||||||
|
<option>Enseignant</option>
|
||||||
|
</select>
|
||||||
|
<label for="etatCivil">Etat civil</label><input type="text" id="etatCivil" name="etatCivil" list="etats">
|
||||||
|
<label for="couleur">Couleur</label><input id="couleur" name="couleur" type="color">
|
||||||
|
|
||||||
|
</form>
|
||||||
|
<datalist id="etats">
|
||||||
|
<option value="M">Marié.e</option>
|
||||||
|
<option value="V">Veuf.ve</option>
|
||||||
|
<option value="D">Divorcé.e</option>
|
||||||
|
<option value="C">Célibataire</option>
|
||||||
|
</datalist>
|
||||||
|
|
||||||
|
<label for="satisfaction">Votre satisfaction</label><input id="satisfaction" name="satisfaction" type="range" min="0" max="4" step="1">
|
||||||
|
<input type="submit" name="Valider">
|
||||||
|
<button type="submit" name="buttsub1" ><u>Autre valider</u></button>
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
45
HTML exercices/ma-fiche.html
Normal file
45
HTML exercices/ma-fiche.html
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Ma fiche personnelle</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Ma fiche personnelle</h1>
|
||||||
|
<h2>Mes coordonnées</h2>
|
||||||
|
<img src="./images/gashy.jpeg" alt="petite gashy sauvage" height="250px">
|
||||||
|
<ul>
|
||||||
|
<li>Prénom : Coralie</li>
|
||||||
|
<li>Nom : Florquin</li>
|
||||||
|
<li>Courriel : <a href="mailto:florquin43@gmail.com" target="_blank">florquin43@gmail.com</a></li>
|
||||||
|
<li>Date de naissance : 22/01/2001</li>
|
||||||
|
</ul>
|
||||||
|
<h2>Mes hobbies</h2>
|
||||||
|
<ul>
|
||||||
|
<li>Sport
|
||||||
|
<ol>
|
||||||
|
<li>Danse</li>
|
||||||
|
<li>Lecture</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
<li>lecture
|
||||||
|
<ol>
|
||||||
|
<li>La passe miroir</li>
|
||||||
|
<li>Le seigneur des anneaux</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
<li>Cuisine
|
||||||
|
<ol>
|
||||||
|
<li>quiche
|
||||||
|
<ul>
|
||||||
|
<li>oeuf</li>
|
||||||
|
<li>crème</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
51
HTML exercices/mutualite.html
Normal file
51
HTML exercices/mutualite.html
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Mutualité</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<form method="post" action=".">
|
||||||
|
<label for="champ1">Nom</label>
|
||||||
|
<input id="champ1" name="nom" type="text" required placeholder="Votre nom"> <br>
|
||||||
|
|
||||||
|
<label for="champ2">Nombre d'enfants</label>
|
||||||
|
<select id="nombre enfants" name="nombre enfants" required aria-placeholder="nombre d'enfants">
|
||||||
|
<option value="1" selected>1</option>
|
||||||
|
<option value="2">2</option>
|
||||||
|
<option value="3">3</option>
|
||||||
|
<option value="4">4</option>
|
||||||
|
<option value="5">5</option>
|
||||||
|
<option value="6">6</option>
|
||||||
|
</select> <br>
|
||||||
|
|
||||||
|
<label for="champ3">Rue</label>
|
||||||
|
<input id="champ3" name="Rue" type="text"> <br>
|
||||||
|
|
||||||
|
<label for="champ4">Numéro de maison</label>
|
||||||
|
<input id="champ4" name="Numéro de maison" type="number"> <br>
|
||||||
|
|
||||||
|
<label for="champ5">Indication de la boîte/appartement</label>
|
||||||
|
<input id="champ5" name="Indication de la boîte/appartement" type="text"> <br>
|
||||||
|
|
||||||
|
<label for="champ6">le code postal</label>
|
||||||
|
<input id="champ6" name="le code postal" type="number"> <br>
|
||||||
|
|
||||||
|
<label for="champ7">la localité</label>
|
||||||
|
<input id="champ7" name="la localité" type="text"> <br>
|
||||||
|
|
||||||
|
<label for="champ8">la province de Belgique</label>
|
||||||
|
<input id="champ8" name="la province de Belgique" type="text"> <br>
|
||||||
|
|
||||||
|
<label for="champ9">la description de la situation familiale</label>
|
||||||
|
<textarea id="champ9" cols="40" rows="3"></textarea><br>
|
||||||
|
|
||||||
|
<label for="champ10">le livret de famille</label>
|
||||||
|
<input id="champ10" type="file" name="le livret de famille" accept=".pdf, .docx"><br>
|
||||||
|
|
||||||
|
<input type="button" value="Aide"><br>
|
||||||
|
|
||||||
|
<input type="submit" name="Soumettre" value="Soumettre le formulaire">
|
||||||
|
|
||||||
|
</form>
|
||||||
|
</body>
|
||||||
30
HTML exercices/test.html
Normal file
30
HTML exercices/test.html
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr"><!-- commentaire: l'attribut "lang" indique
|
||||||
|
aux moteurs de recherche que le contenu est en français -->
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Initiation au langage HTML</title>
|
||||||
|
<link rel="stylesheet" href="default.css">
|
||||||
|
<script src="support.js"></script>
|
||||||
|
<meta name="keywords" content="html,xml,xhtml,css,w3c,internet" >
|
||||||
|
<meta name="description" content="Initiation au développement web." >
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>La structure d'une page HTML</h1>
|
||||||
|
<h2> titre 2 </h2>
|
||||||
|
<h3> titre 3 </h3>
|
||||||
|
<h4> titre 4 </h4>
|
||||||
|
<h5> titre 5 </h5>
|
||||||
|
<h6> titre 6 </h6>
|
||||||
|
<p>弈<br>鰳<br>鳓<br>䓝<br>尺</p>
|
||||||
|
<p>
|
||||||
|
On sait depuis longtemps que travailler avec du texte lisible et contenant du sens est source de distractions, et empêche de se concentrer sur la mise en page elle-même. L'avantage du Lorem Ipsum sur un texte générique comme 'Du texte. Du texte. Du texte.' est qu'il possède une distribution de lettres plus ou moins normale, et en tout cas comparable avec celle du français standard. De nombreuses suites logicielles de mise en page ou éditeurs de sites Web ont fait du Lorem Ipsum leur faux texte par défaut, et une recherche pour 'Lorem Ipsum' vous conduira vers de nombreux sites qui n'en sont encore qu'à leur phase de construction. Plusieurs versions sont apparues avec le temps, parfois par accident, souvent intentionnellement (histoire d'y rajouter de petits clins d'oeil, voire des phrases embarrassantes).
|
||||||
|
<hr>
|
||||||
|
<a href="https://the-fantasy-of-ilvanya.eu/" target="_blank">
|
||||||
|
<img src="./Loutre.webp" alt="Loutre a cessé d'exister" width="1000px" height="1000px">
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user