HTML-CSS-JS/index.html at master · yanick228/HTML-CSS-JS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon premier site web</title>
</head>
<body>
<!-- Titre en HTML -->
<h1 id="premier">Voici un tres grand titre</h1>
<h2>Voici un autre titre</h2>
<h3>un autre titre mais petit</h3>
<h4>un autre titre</h4>
<h5>un autre titre</h5>
<h6>un dernier titre</h6>

<!-- Texte: Paragraphes , etc -->
<p>Bonjour, voici un Paragraphes <strong>Texte gras</strong></p>
<p>Hey, je suis le dernier <i>paragraphes</i></p>

<!-- Ajouter des listes -->
<!-- Liste ordonnée -->
<ol>
    <li>Premiere element</li>
    <li>Second element</li>
    <li>#e element</li>
</ol>
<!-- Liste non cordonée -->
<ul>
    <li>Premiere element</li>
    <li>Second element</li>
    <li>#e element</li>
</ul>
<!-- Les liens en HTML -->
<!-- Liens interne -->
<a href="apropos.html">Visiter a propos </a> <br>
<!-- Liens externe du site web -->
<a href="https://esiba.tg">Visitez le site de Esiba</a>
<a href="index2.html">Visitez le site de Drcdm</a>
<!-- Lien interne a une page -->
<p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore ipsa earum asperiores tenetur animi qui molestiae exercitationem repellendus ipsum dicta non est, neque debitis recusandae! Illum error voluptas minus recusandae fuga, aliquam placeat minima ex id non unde sunt tenetur velit earum, nihil consequuntur ut cupiditate pariatur asperiores hic perferendis. Quia sint quaerat iste est dignissimos! Mollitia odit similique dicta iste quidem itaque esse ab nisi asperiores in, ducimus ea rerum magni laboriosam pariatur rem a sit expedita assumenda corrupti dolorum? Qui laboriosam illum commodi quaerat explicabo sunt molestiae, sed minima. Molestias, dolorem enim! Incidunt nostrum ipsum placeat voluptates dignissimos, labore quidem, iste ea sint aut voluptatem optio, reprehenderit doloremque quasi quod. Aliquam asperiores nostrum itaque, doloremque quam consequatur nobis exercitationem, eaque fugiat alias mollitia explicabo delectus ea ipsum, cum dolore ratione! Reprehenderit ipsa dolor vitae ab modi rem earum incidunt iusto vel explicabo nulla nisi necessitatibus, placeat natus error pariatur labore fuga! Corrupti sequi autem culpa aliquid quis eaque aspernatur, adipisci esse ex dolorem ratione ducimus dolor molestias neque nisi exercitationem saepe,
    repellendus non illum quisquam. Culpa
    quibusdam, modi odit impedit placeat
    assumenda eveniet porro accusantium aperiam possimus nihil volupt
    atem, nam reprehenderit non natus
    obcaecati perferendis
    aliquid ex, tempora ipsum. Blanditiis
     maxime sed omnis mol
    litia dolorem, ducimus soluta fuga
    tempora ipsum
    usantium quo expedita quisquam tenetur laboriosam?
     distinctio perspiciatis ipsam officia veniam

</p>

    <a href="#premier">Monter en haut</a>

    <!-- Autres types de liens  -->
    <a href="mailto:assogbayanick2003@gmail.com">Contactez-nous</a>
    <a href="tel:+22890528047">Nous appelez</a>

    <!-- Les medias en HTML -->
    <!-- Images -->
    <img src="assets/web-img.png" width="400px">
    <!-- <img src="https://www.freecodecamp.org/news/content/images/size/w2000/2021/06/javascriptfull.png" alt=""> -->
    <!-- Video -->
    <video src="assets/video.mp4" width="300px" height="300px" controls ></video>

    <!-- Audio -->
    <audio src="assets/Asake - Dull.mp3" controls ></audio>

    <!-- Formulaire -->
    <form>

        <label> Votre nom</label>
        <input type="text" placeholder="saisir le nom" required>
        <label>Votre mail</label>
        <input type="email" placeholder="test@gmail.com" required>
        <label>Votre numero</label>
        <input type="tel" placeholder="00228 90528047" required>
        <label >Votre Date de naissance</label>
        <input type="date" required>
        <label>Votre Couleur préferée</label>
        <input type="color" required>
        <label >Votre Mots de Passe</label>
        <input type="password" placeholder="mot de passe" required>

        <input type="submit" value="Soumettre">

    </form>
</body>
</html>