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


فهاد الدرس الأول من دورة ال html للمبتدئين غادي نشوفوا structure ديال un document  html من بعد غادي نشوفوا كيفاش نزيدو روابط css و javascript  منبعد غادي نشوفوا les tags المهمين فلغة ل html.


1- البنية الأساسية ديال ملف ل html

أول حاجة زيد dossier ف éditeur texte ديالك سميه لي بغيتي فيه زيد ملف index.html وملفين واحد style.css وواحد script.js منبعد فالملف index.html كيف كتشوف فالكود المرفق عندنا ل code html ف un document html كيبدا ب
                                                 tag <!DOCTYPE html>
لي هي لي كتحدد بلي le type هو html من بعد عندي ل balise html لي عندها attribut lang لي كتحدد اللغة ديال document فرنسية عربية ولا إنجليزية منبعد عندي ل head لي فيه كيكونوا les metas لي كيمكنوا باش نحدد نوع الحروف المستخدمة ولي غالبا كيكون charset UTF-8 منبعد عندي ل meta viewport لي كتخلي document ديالي responsive يعني كيتوافق مع جميع الأحجام سواء pc portable أو tablette أو هاتف منبعد عندي title لي هي فين كيكون عندي عنوان la page ديالي ولي كيبان ف top ديال navigateur منبعد عندي  la balise body ولي هي فين كيكون ل contenu ديال la page ديالي منبعد كنسد document html ديالي فالكود ديال la base هو :

                                <!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>
</head>
<body>
    
</body>
</html>
                            

2- إضافة ملفات css ل un document html

فباش نزيد les documents css للملف ديالي عندي la balise link لي عندها ل attribut rel لي كنحددو بها أن الملف لي ربطنا هو de type css منبعد عندي ل href لي كتاخد chemin ديال الملف لي بغيت نزيد وهنا درت نوعين كاين الأول لي كنربطو document ديالنا مع ملف style.css لي عندنا ف local يعني ف dossier projet ديالنا والثاني كيربطنا مع ملف css خارجي ولي هو ديال bootstrap 4  فهادو جوج دالانواع لي موجودة الكود بعد التعديل هو:

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

    
</body>
</html>
                            

3- إضافة ملفات javascript ل un document html

فباش نزيد les documents javascript للملف ديالي عندي la balise script لي عندها ل attribut src لي كتاخد chemin ديال الملف لي بغيت نزيد وهنا درت نوعين كاين الأول لي كنربطو document ديالنا مع ملف script.js لي عندنا ف local يعني ف dossier projet ديالنا والثاني كيربطنا مع ملف jquery خارجي فهادو جوج دالانواع لي موجودة الكود بعد التعديل هو:

                                <!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>
   
    <!--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- العناوين ف html

فباش نزيد العناوين ف document html ديالي كنخدم ب la balise h1,h2,h3,h4,h5,h6,h7 ولي كل وحدة كتعطيني حجم معين ديال الخط فمثلا h1 هي الأكبر وh7 هي الأصغر فيمكنلك تجرب الكود فالمتصفح ديالك باش تشوف كيفاش الكود خدام الكود بعد التعديل هو :

                                    <!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>
   
    <!--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 paragraphes ل document html

فباش نزيد les paragraphes ف document html ديالي كنخدم ب la balise p ولي كتمكني من إضافة العدد ديال les paragraphes لي بغيت يمكنلك تجرب فالمتصفح ديالك الكود بعد التعديل هو :

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