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


فهاد الدرس الثاني من دورة html للمبتدئين غادي نشوفوا كيفاش نزيدوا الصور ل document html ديالنا وأيضا غادي نشوفو كيفاش نزيدو les liens لي كيمكنونا من التنقل بين الصفحات ومنبعد غادي نشوفوا les forms ولي كيمكنوا المستخدم من إدخال معلومات وإرسالها ل serveur.


1- إضافة الصور ل document html

فباش نزيد الصور ل document html ديالي عندي la balise img لي كتمكني باش نضيف صورة فل attribut src لي كتعني source فهنا فالكود لي زدنا عندنا جوج أنواع ديال الإضافات فكاين الداخلية ولي كتمكنا من إضافة صورة من dossier projet ديالنا ولي كنعطيها ل width ول height ولي هما الطول والعرض ديال الصورة وعندي ايضا ل attribut alt ولي هو واحد texte alternative كتاخدو الصورة في حالة مكان شي مشكل ف chargement ديالها وعندي النوع الثاني ولي كيضيف صورة خارجية فهنا خدمنا بواحد الموقع لي كيقدم des images gratuites فكنحط الرابط ف src وكتبان الصورة ولي حتى هي كنعطيها ل alt ويمكن نزيدلها حتى الطول ولعرض لي بغيت الكود بعد التعديل هو :

                                <!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">
<!--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- إضافة روابط التنقل بين الصفحات

فباش نزيد des liens لي كيمكنوا من التنقل ما بين الصفحات لي عندي  فكاين la balise a لي عندها ل attribut href ولي كياخد la page لي غادي يدينا ليها الرابط فهنا عندنا جوج دالأنواع  التنقل الداخلي لي كيديني ل page interne كينا ف dossier projet فمثلا درنا test.html فخص تكون عندنا page سميتها test.html وايضا la balise a كتاخد اسم الرابط لي كيتعرض  فهنا عطيناه test وعندنا ايضا الروابط الخارجية لي كتدينا لصفحات خارجية وفالمثال الثاني عندنا رابط لي كيدينا ل غوغل الكود بعد التعديل هو :

                                <!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>
<!--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 formulaires ل document html الجزء الأول

فباش نزيد les formulaires ل document html عندي la balise form لي كتاخد ل action ولي هي la page لي غادي يت traita فيها les infos لي ترسلوا ول method ولي كتكون post ولا get ولي غادي نشوفوهم من بعد ثم عندنا label لي هي texte لي كيكون حدا لحقل وعندي ل input لي هي لحقل ديالي فهاد الجزء عندنا الحقل de type text ولي كياخد ل contenu text فعندو ل attribut name ولي هي لاسم ديال الحقل ول id ولي حتى هو كيتحتاج ف javascript ولي غادي نشوفوها من بعد وعندو ل placeholder ولي هو texte par défaut لي كيبان فالحقل وكاين ايضا ل value ولي هي القيمة لي بغينا تكون عندوا فيمكنلك تجرب فالمتصفح ديالك باش تزيد تاخد معلومات الكود بعد التعديل هو :

                                <!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">
</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>
                            

4- إضافة les formulaires ل document html الجزء الثاني

فهاد الجزء الثاني من  إضافة les formulaires ل document html غادي نشوفو أنواع أخرى من الحقول من غير الحقل text لي شفنا فعندنا الحقل de type email لي كيمكن من إضافة email ولي يلا مكانش الحقل كيتضمن email كيعرض رسالة تنبيه وعندي ايضا le type password ولي كيمكن من إدخال كلمة مرور ولي كتكون مخفية وعندي ايضا le type tel لي كيمكن من إدخال رقم الهاتف وعندي ايضا le type number ولي كيمكن من إدخال رقم بحال العمر مثلا وعندي le type time لي كيمكن من إدخال التوقيت وعندي le type date لي كيمكن من إدخال la date وعندي le type file لي كيمكن من إدخال fichier صورة ولا document word ou pdf ودائما يمكنلك تجربهم فالمتصفح ديالك الكود بعد التعديل هو :

                                    <!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="">
</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>
                                

5- إضافة les formulaires ل document html الجزء الثالت

فهاد الجزء الثالت من  إضافة les formulaires ل document html غادي نشوفو أنواع أخرى من الحقول فعندنا select box لي كيمكن من اننا يكونوا عندنا des choix فعندو des options لي كل واحد فيهم كياخد une valeur كتكون هي نفسها لي كتعرض و select بحال باقي لحقول كياخد name و id منبعد عندي le type checkbox ولي كيمكن من عرض des choix فهنا يمكن للمستخدم يعزل اكثر من اختيار بحال ل option حتى checkbox كل واحد فيهم كياخد une valeur كتكون هي نفسها لي كتعرض وعندنا ايضا le type radio لي كيمكن من عرض مجموعة من الإختيارات الفرق بينو وبين checkbox هو انه كيمكن من اختيار اختيار واحد فقط وكنعطي ل radio button لي عندي كاملين نفس name باش كنتمكن من اختيار واحد فقط يمكن تجرب فالمتصفح ديالك الكود بعد التعديل هو :

                                    <!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
    </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>