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


فهاد الدرس الخامس من  دورة html للمبتدئين غادي نشوفوا d'autres éléments html 5 منهم les tables وغادي نشوفوا كيفاش نزيدو des vidéos و des audio كما غادي نشوفوا كيفاش نزيدو des blocs css وهي مقدمة للمرور للدورة الخاصة ب css. 


1- إضافة les tables ل document html

فباش نزيد une table ل document ديالي عندي la balise table فكاين thead لي كتعني table head لي هي la partie haute ديال la table وكاين tbody لي كتعني table body لي هو ل contenu ديال la table ولي فوسطهم عندي tag tr ولي كتمكن باش نزيد une ligne يعني سطر وعندي فوسط tag tr كاين th ولي هي colonne أي خانة وth كتمكن من أن texte لي فوسطها يكون ف centre وbold يعني غالق أما td هي ايضا colonne غير texte كيكون normal وth كتكون فأول سطر ف thead و td فل tbody وزدنا ايضا بعض les styles css لي زدنا بهم ل border ل table ل border هو سطر لكحل وشوية ديال ل padding لي كيمكن باش يكون واحد l'espace مابين texte ول border الكود هو :

                                <!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">
    <!--[if lt IE 9]>
        <script src="/js/html5shiv.js"></script>
    <![endif]-->
    <!--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>
    <table style="margin: 0 auto;border:1px solid #000;">
        <thead>
            <tr style="border:1px solid #000;">
                <th style="padding:3px;border:1px dashed #000;">
                    Nom
                </th>
                <th style="padding:3px;border:1px dashed #000;">
                    Prénom
                </th>
                <th style="padding:3px;border:1px dashed #000;">
                    Ville
                </th>
            </tr>
        </thead>
        <tbody>
            <tr style="border:1px solid #000;">
                <td style="padding:3px;border:1px dashed #000;">
                    samadi
                </td>
                <td style="padding:3px;border:1px dashed #000;">
                    samir
                </td>
                <td style="padding:3px;border:1px dashed #000;">
                    Taza
                </td>
            </tr>
        </tbody>
    </table>
    <!--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- إضافة ل audio ل document html

فباش نزيد un fichier audio ل document html عندي la balise audio لي كتاخد l'attribut controls لي كتمكن من عرض les boutons play next previous ف lecteur وفوسط la balise audio عندي source tag لي كتاخد ف src اسم ل audio لي غادي يتقرا وخصو يكون فنفس dossier وايضا le type ديالو واش mp3 ولا wav الكود باش تزيد ل audio :

                                <!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">
    <!--[if lt IE 9]>
        <script src="/js/html5shiv.js"></script>
    <![endif]-->
    <!--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>
    <audio controls>
        <source src="test.mp3" type="audio/mpeg">
    </audio>
    <!--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- إضافة ل video ل document html

فباش نزيد un fichier video ل document html عندي la balise video لي كتاخد l'attribut controls لي كتمكن من عرض les boutons play next previous ف lecteur وعندي أيضا ل width ول height لي كنحدد بهم الطول والعرض ديال lecteur فوسط la balise video عندي source tag لي كتاخد ف src اسم ل video لي غادي يتقرا وخصو يكون فنفس dossier وايضا le type ديالو واش mp4 ولا flv الكود باش تزيد ل video :

                                <!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">
    <!--[if lt IE 9]>
        <script src="/js/html5shiv.js"></script>
    <![endif]-->
    <!--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>
    <video width="320" height="240" controls>
        <source src="video.mp4" type="video/mp4">>
    </video>
    <!--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 couleurs ل document html

فباش نزيد الألوان ل titre عندي ل attribut style لي كتمكني باش نزيد ل les styles css  هنا زدنا  color:red  لل h3 لي هو اللون الأحمر وبنفس الطريقة زدنا ل color:green  لي هو اللون الأخضر لل paragraphe الكود لي زدنا هو :  

                                    <!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">
    <!--[if lt IE 9]>
        <script src="/js/html5shiv.js"></script>
    <![endif]-->
    <!--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>
    <h3 style="color:red;">texte rouge</h3>
    <p style="color:green;">texte vert Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos hic quia iure nobis sequi voluptatibus ea iusto doloremque quas, est, repellendus id quaerat fugiat. Saepe eaque accusantium dolorem blanditiis aspernatur?</p>
    <!--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- إضافة background-color ل document html

ال background-color هو اللون لي كيكون فظهر شي élément فهنا فل code المرفق زدنا لون الأحمر ك background ل h3 ول خضر ل p وهادشي لي شفنا هو فقط مقدمة لل css لي غادي يكون محور الدورة القادمة الكود لي زدنا هو :  

                                    <!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">
    <!--[if lt IE 9]>
        <script src="/js/html5shiv.js"></script>
    <![endif]-->
    <!--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>
    <h3 style="background-color:red;">texte rouge</h3>
    <p style="background-color:green;">texte vert Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quos hic quia iure nobis sequi voluptatibus ea iusto doloremque quas, est, repellendus id quaerat fugiat. Saepe eaque accusantium dolorem blanditiis aspernatur?</p>
    <!--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>