دورة html للمبتدئين الدرس الثالت


فهاد الدرس الثالت من دورة html للمبتدئين غادي نشوفوا كيفاش نزيدو des boutons ل document html ديالنا باش نديرو submit للفورم يعني نرسلوا المعلومات لي دخلنا ل serveur منبعد غادي نشوفوا d'autres éléments html لي من بينهم les listes وغادي نشوفوا أيضا les divs وles spans.


1- إضافة textarea ل document html

ف textarea هي حقل لي كياخد cols و rows لي كتعني des colonnes و des lignes ولي كيمكن باش نخزنوا des paragraphes فقواعد البيانات ديالنا ف textarea حتى هي كتاخد name و id و placeholder بحال ل input de type texte الكود بعد التعديل هو :

                                <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--titre de la page-->
    <title>Document</title>
    <!--liens css-->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <!--h tags-->
    <h1>Darija Coding</h1>
    <h2>Darija Coding</h2>
    <h3>Darija Coding</h3>
    <h4>Darija Coding</h4>
    <h5>Darija Coding</h5>
    <h6>Darija Coding</h6>
    <h7>Darija Coding</h7>
    <!--paragraph tags-->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque velit, laboriosam libero distinctio ratione nobis numquam ullam eius quam, a vel fugit voluptates commodi nemo consectetur beatae ab debitis obcaecati.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur nulla deserunt amet ea voluptatum expedita impedit eum! Odio odit eaque labore suscipit quia, hic, unde aliquid commodi sed ipsa culpa?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos aperiam modi nisi reprehenderit officiis impedit maiores culpa fuga. Impedit autem, quasi nisi nemo ut rerum minus iste eius harum pariatur.</p>
    <!--ajouter les images-->
    <img src="img.jpg" width="50" height="50" alt="image 1">
    <img src="https://picsum.photos/200/300"  alt="image 2">
    <!--ajouter des liens-->
    <a href="https://google.com">google</a>
    <a href="test.html">test</a>
    <!--ajouter un formulaire-->
    <form action="#" method="#">
        <label for="nom">Nom</label>
         <!--input type text-->
        <input type="text" name="nom" id="name" placeholder="Nom">
         <!--input type email-->
         <input type="email" placeholder="Nom">
         <!--input type password-->
         <input type="password" name="" id="" placeholder="Mot de passe">
         <!--input type tel-->
         <input type="tel" name="" id="" placeholder="Tél">
        <!--input type tel-->
        <input type="number" name="" id="" placeholder="Age">
        <!--input type heure-->
        <input type="time" name="" id="">
        <!--input type tel-->
        <input type="date" name="" id="">
        <!--input type fichier-->
        <input type="file" name="" id="">
        <!--select -->
        <select name="" id="">
            <option value="Bac">Bac</option>
            <option value="License">License</option>
        </select>
        <!--checkbox -->
        <input type="checkbox" name="" id="" value="Cinema">Cinema
        <input type="checkbox" name="" id="" value="Sport">Sport
        <input type="checkbox" name="" id="" value="Voyage">Voyage
        <!--radio button -->
        <input type="radio" id="" name="sex" value="homme">Homme
        <input type="radio" id="" name="sex" value="femme">Femme
        <input type="radio" id="" name="sex" value="autre">Autre
         <!--textarea  -->
         <textarea name="" id="" cols="30" rows="10"></textarea>
    </form>
    <!--liens javascript-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>
                            

2- إضافة les boutons ل document html

فباش نزيد les boutons للفورم لي قادينا فالدرس السابق عندي ل input de type submit لي كتمكني باش نزيد bouton لي كت valider لفورم  فهاد ل bouton كيمكن تاخد name و id و value لي هي la valeur لي كتعرض فل bouton ومنبعد مكنكليكي عليها كتدير submit للفورم وعندنا ايضا input de type reset لي كت annuler l'envois ديال لفورم وكتخوي les champs ولي حتى هي بحال submit  كيمكن تاخد name و id و value لي هي la valeur لي كتعرض فل bouton الكود ديال الملف بعد التعديل هو :

                                <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--titre de la page-->
    <title>Document</title>
    <!--liens css-->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <!--h tags-->
    <h1>Darija Coding</h1>
    <h2>Darija Coding</h2>
    <h3>Darija Coding</h3>
    <h4>Darija Coding</h4>
    <h5>Darija Coding</h5>
    <h6>Darija Coding</h6>
    <h7>Darija Coding</h7>
    <!--paragraph tags-->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque velit, laboriosam libero distinctio ratione nobis numquam ullam eius quam, a vel fugit voluptates commodi nemo consectetur beatae ab debitis obcaecati.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur nulla deserunt amet ea voluptatum expedita impedit eum! Odio odit eaque labore suscipit quia, hic, unde aliquid commodi sed ipsa culpa?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos aperiam modi nisi reprehenderit officiis impedit maiores culpa fuga. Impedit autem, quasi nisi nemo ut rerum minus iste eius harum pariatur.</p>
    <!--ajouter les images-->
    <img src="img.jpg" width="50" height="50" alt="image 1">
    <img src="https://picsum.photos/200/300"  alt="image 2">
    <!--ajouter des liens-->
    <a href="https://google.com">google</a>
    <a href="test.html">test</a>
    <!--ajouter un formulaire-->
    <form action="#" method="#">
        <label for="nom">Nom</label>
         <!--input type text-->
        <input type="text" name="nom" id="name" placeholder="Nom">
         <!--input type email-->
         <input type="email" placeholder="Nom">
         <!--input type password-->
         <input type="password" name="" id="" placeholder="Mot de passe">
         <!--input type tel-->
         <input type="tel" name="" id="" placeholder="Tél">
        <!--input type tel-->
        <input type="number" name="" id="" placeholder="Age">
        <!--input type heure-->
        <input type="time" name="" id="">
        <!--input type tel-->
        <input type="date" name="" id="">
        <!--input type fichier-->
        <input type="file" name="" id="">
        <!--select -->
        <select name="" id="">
            <option value="Bac">Bac</option>
            <option value="License">License</option>
        </select>
        <!--checkbox -->
        <input type="checkbox" name="" id="" value="Cinema">Cinema
        <input type="checkbox" name="" id="" value="Sport">Sport
        <input type="checkbox" name="" id="" value="Voyage">Voyage
        <!--radio button -->
        <input type="radio" id="" name="sex" value="homme">Homme
        <input type="radio" id="" name="sex" value="femme">Femme
        <input type="radio" id="" name="sex" value="autre">Autre
        <!-- ajouter des boutons-->
        <input type="submit" value="valider">
        <input type="reset" value="annuler">
    </form>
    <!--liens javascript-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>
                            

3- إضافة les listes ل document html

فبالنسبة ل les listes فعندنا جوج ديال الأنواع كاين les listes ordonnées وles listes non ordonnées يعني لي مرتبة ولي لا فعندنا tag ul لي كتمكنا باش نزيدو liste non ordonnée ولي عندها child li ولي فيها كتكون المعلومات لي بغيت نعرض وعندي ايضا tag ol لي كتعرض une liste numérotée يعني مرقمة كتبدا من واحد وهي مشا ولي حتى هي عندها child li فيمكن تجرب فالمتصفح ديالك باش تشوف النتيجة الكود ديال الملف بعد التعديل :

                                <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--titre de la page-->
    <title>Document</title>
    <!--liens css-->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <!--h tags-->
    <h1>Darija Coding</h1>
    <h2>Darija Coding</h2>
    <h3>Darija Coding</h3>
    <h4>Darija Coding</h4>
    <h5>Darija Coding</h5>
    <h6>Darija Coding</h6>
    <h7>Darija Coding</h7>
    <!--paragraph tags-->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque velit, laboriosam libero distinctio ratione nobis numquam ullam eius quam, a vel fugit voluptates commodi nemo consectetur beatae ab debitis obcaecati.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur nulla deserunt amet ea voluptatum expedita impedit eum! Odio odit eaque labore suscipit quia, hic, unde aliquid commodi sed ipsa culpa?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos aperiam modi nisi reprehenderit officiis impedit maiores culpa fuga. Impedit autem, quasi nisi nemo ut rerum minus iste eius harum pariatur.</p>
    <!--ajouter les images-->
    <img src="img.jpg" width="50" height="50" alt="image 1">
    <img src="https://picsum.photos/200/300"  alt="image 2">
    <!--ajouter des liens-->
    <a href="https://google.com">google</a>
    <a href="test.html">test</a>
    <!--ajouter un formulaire-->
    <form action="#" method="#">
        <label for="nom">Nom</label>
         <!--input type text-->
        <input type="text" name="nom" id="name" placeholder="Nom">
         <!--input type email-->
         <input type="email" placeholder="Nom">
         <!--input type password-->
         <input type="password" name="" id="" placeholder="Mot de passe">
         <!--input type tel-->
         <input type="tel" name="" id="" placeholder="Tél">
        <!--input type tel-->
        <input type="number" name="" id="" placeholder="Age">
        <!--input type heure-->
        <input type="time" name="" id="">
        <!--input type tel-->
        <input type="date" name="" id="">
        <!--input type fichier-->
        <input type="file" name="" id="">
        <!--select -->
        <select name="" id="">
            <option value="Bac">Bac</option>
            <option value="License">License</option>
        </select>
        <!--checkbox -->
        <input type="checkbox" name="" id="" value="Cinema">Cinema
        <input type="checkbox" name="" id="" value="Sport">Sport
        <input type="checkbox" name="" id="" value="Voyage">Voyage
        <!--radio button -->
        <input type="radio" id="" name="sex" value="homme">Homme
        <input type="radio" id="" name="sex" value="femme">Femme
        <input type="radio" id="" name="sex" value="autre">Autre
        <!-- ajouter des boutons-->
        <input type="submit" value="valider">
        <input type="reset" value="annuler">
    </form>
    <!-- ajouter des listes non ordonnés-->
    <ul>
        <li>Taza</li>
        <li>Fes</li>
        <li>Rabat</li>
    </ul>
    <!-- ajouter des listes ordonnés-->
    <ol>
        <li>Taza</li>
        <li>Fes</li>
        <li>Rabat</li>
    </ol>
    <!--liens javascript-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>
                            

4- إضافة les divs ل document html

عندنا ايضا tag div لي كتعني division ولي كتمكن من تقسيم la page ديالنا لأجزاء وكل جزء كيكونوا فيه des titres و des paragraphes وفل html moderne استعمال tag div ولا حاجة لا مفر منها الكود بعد التعديل :

                                    <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--titre de la page-->
    <title>Document</title>
    <!--liens css-->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <!--h tags-->
    <h1>Darija Coding</h1>
    <h2>Darija Coding</h2>
    <h3>Darija Coding</h3>
    <h4>Darija Coding</h4>
    <h5>Darija Coding</h5>
    <h6>Darija Coding</h6>
    <h7>Darija Coding</h7>
    <!--paragraph tags-->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque velit, laboriosam libero distinctio ratione nobis numquam ullam eius quam, a vel fugit voluptates commodi nemo consectetur beatae ab debitis obcaecati.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur nulla deserunt amet ea voluptatum expedita impedit eum! Odio odit eaque labore suscipit quia, hic, unde aliquid commodi sed ipsa culpa?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos aperiam modi nisi reprehenderit officiis impedit maiores culpa fuga. Impedit autem, quasi nisi nemo ut rerum minus iste eius harum pariatur.</p>
    <!--ajouter les images-->
    <img src="img.jpg" width="50" height="50" alt="image 1">
    <img src="https://picsum.photos/200/300"  alt="image 2">
    <!--ajouter des liens-->
    <a href="https://google.com">google</a>
    <a href="test.html">test</a>
    <!--ajouter un formulaire-->
    <form action="#" method="#">
        <label for="nom">Nom</label>
         <!--input type text-->
        <input type="text" name="nom" id="name" placeholder="Nom">
         <!--input type email-->
         <input type="email" placeholder="Nom">
         <!--input type password-->
         <input type="password" name="" id="" placeholder="Mot de passe">
         <!--input type tel-->
         <input type="tel" name="" id="" placeholder="Tél">
        <!--input type tel-->
        <input type="number" name="" id="" placeholder="Age">
        <!--input type heure-->
        <input type="time" name="" id="">
        <!--input type tel-->
        <input type="date" name="" id="">
        <!--input type fichier-->
        <input type="file" name="" id="">
        <!--select -->
        <select name="" id="">
            <option value="Bac">Bac</option>
            <option value="License">License</option>
        </select>
        <!--checkbox -->
        <input type="checkbox" name="" id="" value="Cinema">Cinema
        <input type="checkbox" name="" id="" value="Sport">Sport
        <input type="checkbox" name="" id="" value="Voyage">Voyage
        <!--radio button -->
        <input type="radio" id="" name="sex" value="homme">Homme
        <input type="radio" id="" name="sex" value="femme">Femme
        <input type="radio" id="" name="sex" value="autre">Autre
         <!--textarea  -->
         <textarea name="" id="" cols="30" rows="10"></textarea>
    </form>
    <!-- ajouter des listes non ordonnés-->
    <ul>
        <li>Taza</li>
        <li>Fes</li>
        <li>Rabat</li>
    </ul>
    <!-- ajouter des listes ordonnés-->
    <ol>
        <li>Taza</li>
        <li>Fes</li>
        <li>Rabat</li>
    </ol>
    <!--ajouter des divs-->
    <div class="class">
        <h2></h2>
        <p></p>
    </div>
    <!--liens javascript-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>
                                

5- إضافة span لل document html

كاين أيضا tag span ولي كتمكنا باش نزيدو des classes css لأجزاء معينة من la page ديالنا فهنا فالمثال لي زدنا عندنا h1 لي فل contenu ديالو كاين جملة la vie est belle وبفضل tag span تمكنا من إضافة des classes css مختلفة لكل جزء من الجملة اختاريناه دون المساس ب structure ديال الجملة الكود بعد التعديل :

                                    <!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--titre de la page-->
    <title>Document</title>
    <!--liens css-->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
    <!--h tags-->
    <h1>Darija Coding</h1>
    <h2>Darija Coding</h2>
    <h3>Darija Coding</h3>
    <h4>Darija Coding</h4>
    <h5>Darija Coding</h5>
    <h6>Darija Coding</h6>
    <h7>Darija Coding</h7>
    <!--paragraph tags-->
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque velit, laboriosam libero distinctio ratione nobis numquam ullam eius quam, a vel fugit voluptates commodi nemo consectetur beatae ab debitis obcaecati.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur nulla deserunt amet ea voluptatum expedita impedit eum! Odio odit eaque labore suscipit quia, hic, unde aliquid commodi sed ipsa culpa?</p>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quos aperiam modi nisi reprehenderit officiis impedit maiores culpa fuga. Impedit autem, quasi nisi nemo ut rerum minus iste eius harum pariatur.</p>
    <!--ajouter les images-->
    <img src="img.jpg" width="50" height="50" alt="image 1">
    <img src="https://picsum.photos/200/300"  alt="image 2">
    <!--ajouter des liens-->
    <a href="https://google.com">google</a>
    <a href="test.html">test</a>
    <!--ajouter un formulaire-->
    <form action="#" method="#">
        <label for="nom">Nom</label>
         <!--input type text-->
        <input type="text" name="nom" id="name" placeholder="Nom">
         <!--input type email-->
         <input type="email" placeholder="Nom">
         <!--input type password-->
         <input type="password" name="" id="" placeholder="Mot de passe">
         <!--input type tel-->
         <input type="tel" name="" id="" placeholder="Tél">
        <!--input type tel-->
        <input type="number" name="" id="" placeholder="Age">
        <!--input type heure-->
        <input type="time" name="" id="">
        <!--input type tel-->
        <input type="date" name="" id="">
        <!--input type fichier-->
        <input type="file" name="" id="">
        <!--select -->
        <select name="" id="">
            <option value="Bac">Bac</option>
            <option value="License">License</option>
        </select>
        <!--checkbox -->
        <input type="checkbox" name="" id="" value="Cinema">Cinema
        <input type="checkbox" name="" id="" value="Sport">Sport
        <input type="checkbox" name="" id="" value="Voyage">Voyage
        <!--radio button -->
        <input type="radio" id="" name="sex" value="homme">Homme
        <input type="radio" id="" name="sex" value="femme">Femme
        <input type="radio" id="" name="sex" value="autre">Autre
         <!--textarea  -->
         <textarea name="" id="" cols="30" rows="10"></textarea>
    </form>
    <!-- ajouter des listes non ordonnés-->
    <ul>
        <li>Taza</li>
        <li>Fes</li>
        <li>Rabat</li>
    </ul>
    <!-- ajouter des listes ordonnés-->
    <ol>
        <li>Taza</li>
        <li>Fes</li>
        <li>Rabat</li>
    </ol>
    <!--ajouter des divs-->
    <div class="class">
        <h2></h2>
        <p></p>
    </div>
    <!--ajouter des spans-->
    <div class="class">
        <h2><span class="class-1">la vie</span><span class="class-2">est belle</span></h2>
    </div>
    <!--liens javascript-->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="script.js"></script>
</body>
</html>