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

منذ 6 سنوات imadbelasri Html
HC

فهاد الدرس الرابع من دورة ال 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 &copy;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>
                                                        
                                                    

دروس ذات صلة

HC

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

فهاد الدرس الأول من دورة ال html للمبتدئين غادي نشوفوا structure ديال un document html م...


HC

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

فهاد الدرس الثاني من دورة html للمبتدئين غادي نشوفوا كيفاش نزيدوا الصور ل document html ديالنا وأيضا...


HC

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

فهاد الدرس الثالت من دورة html للمبتدئين غادي نشوفوا كيفاش نزيدو des boutons ل document html دي...


HC

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

فهاد الدرس الرابع من دورة ال html غادي نشوفوا الجديد ف html5 ولي هي ل version moderne فغادي نشو...


HC

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

فهاد الدرس الخامس من دورة html للمبتدئين غادي نشوفوا d'autres éléments html 5 منهم les tables...


HC

كيفاش تزيد les styles css ل les boutons html

فهاد الدرس الجديد من سلسلة html و css للمبتدئين غادي نشوفوا كيفاش نزيدو des styles css ل les boutons...


HC

كيفاش تزيد blockquote وتزيدلو ال style css

فهاد الدرس الجديد من سلسلة html و css للمبتدئين غادي نشوفوا كيفاش نزيدو blockquote ونزيدولو style cs...