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


فهاد الدرس الرابع من دورة ال html غادي نشوفوا الجديد ف html5 ولي هي ل version moderne فغادي نشوفوا كيفاش نزيدو ل menu ول body لي غادي يكون فيهم ل contenu وغادي نشوفوا ايضا كيفاش نخليو المتصفحات لقديمة تخدم ب html5.


1- إضافة html5 لل internet explorer

فل version الجديدة ديال html5 كاين des éléments جداد لي تزادو ولي ماشي les navigatuers كاملين كيقبلوهم فمثلا ف document ديالنا زدنا واحد script js لي هو html5shiv ولي كيمكن internet explorer باش يقبل les éléments الجداد ديال html5 ف document المرفق كاين structure de base لي شفنا قبل زدنا عليها script js لي هضرنا عليه : 

                                <!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>
    
    <!--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- إضافة menu ل document html

فباش نزيد ل menu ل document html كنزيد tag header وفيها عندي tag nav لي كتعني navigation ولي هي التصفح وفوسط tag nav عندي les liens ولي سبق شفناهم فالأجزاء السابقة وكل lien كنعطيه اسم لي كيتعرض فل affichage ديال document ويمكنلك تشوف النتيجة فالمتصفح ديالك الكود لي زدنا :

                                <!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>
    <header>
        <nav>
            <a href="#">HTML</a> |
            <a href="#">CSS</a> |
            <a href="#">JavaScript</a> |
            <a href="#">jQuery</a>
        </nav>
    </header>
    
    <!--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- إضافة ل contenu ل document html

فباش نزيد ل contenu ل document html ديالي عندي la balise main ولي فوسطها كيمكن يكون عندي section أو article أو div أو هما كاملين وفالكود المرفق زدنا main فوسطها article فوسطها section لي فيها عندي titre h2 و paragraphe p ويمكنلك تزيد اي حاجة اخرى صور او غيرهم الكود لي زدنا :

                                <!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>
    <header>
        <nav>
            <a href="#">HTML</a> |
            <a href="#">CSS</a> |
            <a href="#">JavaScript</a> |
            <a href="#">jQuery</a>
        </nav>
    </header>
    <main style="margin:30px 0;">
        <article style="width:70%;float:left">
            <section>
                <h2>Titre d'article</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magni culpa harum, voluptatem repellat omnis ad modi sit quis unde accusantium minima quaerat neque dicta facere commodi labore tempore veritatis!</p>
            </section>
        </article>
    </main>
    <!--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- إضافة ل sidebar ل document html

فباش نزيد ل sidebar ل document html ديالي عندي la balise aside ولي بها كنقسم la page ل 2 ديال الأقسام فهنا زدنا css باش نقسموا la page.
فوسط aside كيمكن يكون عندي section أو article أو div أو هما كاملين وفالكود المرفق زدنا فوسطها article فوسطها section لي فيها عندي titre h2 و paragraphe p ويمكنلك تزيد اي حاجة اخرى صور او غيرهم الكود لي زدنا :

                                    <!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>
    <header>
        <nav>
            <a href="#">HTML</a> |
            <a href="#">CSS</a> |
            <a href="#">JavaScript</a> |
            <a href="#">jQuery</a>
        </nav>
    </header>
    <main style="margin:30px 0;">
        <article style="width:70%;float:left">
            <section>
                <h2>Titre d'article</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magni culpa harum, voluptatem repellat omnis ad modi sit quis unde accusantium minima quaerat neque dicta facere commodi labore tempore veritatis!</p>
            </section>
        </article>
        <aside>
            <article>
                <section>
                    <h2>Titre d'article</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magni culpa harum, voluptatem repellat omnis ad modi sit quis unde accusantium minima quaerat neque dicta facere commodi labore tempore veritatis!</p>
                </section>
            </article>
        </aside>
    </main>
    
    <!--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- إضافة footer ل document html

فباش نزيد ل footer ل document html ديالي عندي la balise footer ولي كتعني ل bas de la page ولي غالبا كيكون فيها اسم الموقع وحقوق الملكية وكتكون فيها حتى ل menu بعض المرات الكود لي زدنا هو :

                                    <!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>
    <header>
        <nav>
            <a href="#">HTML</a> |
            <a href="#">CSS</a> |
            <a href="#">JavaScript</a> |
            <a href="#">jQuery</a>
        </nav>
    </header>
    <main style="margin:30px 0;">
        <article style="width:70%;float:left">
            <section>
                <h2>Titre d'article</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magni culpa harum, voluptatem repellat omnis ad modi sit quis unde accusantium minima quaerat neque dicta facere commodi labore tempore veritatis!</p>
            </section>
        </article>
        <aside>
            <article>
                <section>
                    <h2>Titre d'article</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magni culpa harum, voluptatem repellat omnis ad modi sit quis unde accusantium minima quaerat neque dicta facere commodi labore tempore veritatis!</p>
                </section>
            </article>
        </aside>
    </main>
    <footer>
        <p>DarijaCoding ©2018</p>
    </footer>
    <!--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>