موقع للمبتدئين بل Html و Css


فهاد الدرس الجديد من موقع للمبتدئين بل Html و Css ولي عبارة عن Template بسيطة للمبتدئين فيها صفحة وحدة وكتضمن صفحات متعددة كنتنقلو بينها بإستعمال javascript.

نظرة سريعة بالفيديو

1- الملف header.php

ف xampp/htdocs زيد مجلد سميه لي بغيتي انا سميتو business_html وزيد فيه 3 مجلدات css,js,includes فincludes زيد ملف جديد سميه header.php فيه غادي يكون الرابط لي كيربط الملفات ديالنا مع الملف main.css ولي غادي نزيدوه من بعد وكاين واحد لfonction init فل onload ديال لbody ولي غادي نزيدوها فالملف main.js منبعد الكود ديال الملف هو:

                                <!DOCTYPE html>
<html lang="fr">
<head>
    <meta     <link rel="stylesheet" href="css/main.css">
    <title>Businness App</title>
</head>
<body onload="init();">
<main>
                            

2- الملف footer.php

دائما فincludes زيد ملف جديد سميه footer.php فيه غادي يكون الرابط لي كيربط الملفات ديالنا مع الملف main.js ولي غادي نزيدوه من بعد الكود ديال الملف هو:

                                 <footer>
        DarijaCoding ©2017 
    </footer>
</main>
<script src="js/main.js"></script>
</body>
</html>
                            

3- الملف main.css

فالمجلد css زيد ملف سميه main.css فيه الكود css لي غادي نحتاجو فكاين الكود لي كيغير الحجم ديال الخط ديال لbody ثم كاين لclass main لي هي الخاصة بdiv لي غادي يكونو فيها الصفحات ديالنا ثم كاين les styles ديال لfooter و navbar منبعد كاين لid ديال كل div ولي غادي يكون فيها لcontenu ديال كل صفحة ولي كنخبعوهوم بإستثناء لmain ولي غادي يتعرضو بإستعمال javascript الكود ديال الملف هو :

                                body{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1em;
    background: #FBF6D6;
}
main{
    margin: auto;
    background: #FFF;
    max-width: 800px;
    border-bottom: medium solid #020645;
    padding: 20px;
    margin-top: 50px;
    border-radius: 20px;
}
footer{
    text-align: center;
    border-top: thin solid #020645;
    padding-top: 10px;
    font-size: 12px;
}
nav{
    position: absolute;
    top:14px;
}
nav a{
    text-decoration: none;
    display: inline-block;
    color: #FFF;
    font-weight: bold;
    padding:7px 20px 7px 20px;
    background: #4C4D4E;
    font-size: 18px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
nav a:hover{
    background: rgba(60,60,200,.5);
    color:#000;
}
#home{
    display: inline-block;
}
#budget{
    display: none;
}
#map{
    display: none;
    text-align: center;
}
#contact{
    display: none;
}
figure{
    display: inline-block;
}
figure img{
    border: 5px solid #FFDE07;
}
figcaption{
    text-align: center;
    margin-top: 10px;
}
figcaption a{
    text-align: center;
    text-decoration: none;
}
                            

4- الملف index.php

فالمجلد الرئيسي لي هو business_html زيد ملف جديد سميه index.php ولي غادي يكون هو الصفحة الرئيسية ديالنا ولي فيها الكود ديال القائمة الرئيسية ولي كل عنصر ضغطنا عليه منها كينفد fonction سميتها tabs ولي غادي تاخد الرقم ديال العنصر لي ضغطنا عليه ثم كاين 4 ديال div كل وحدة خاصة بصفحة وكل وحدة عندها id لي غادي يمكنا بإستعمال javascript باش نعرضوها أو نخفيوها والبقية غير كان نضمو الملفين header و footer الكود ديال الملف هو :

                                    <?php include("includes/header.php");?>
    <nav>
        <a href="#" id="navHome" onclick="tabs(1);">Accueil</a>
        <a href="#" id="navBudget" onclick="tabs(2);">Services</a>
        <a href="#" id="navLocation" onclick="tabs(3);">Carte</a>
        <a href="#" id="navContact" onclick="tabs(4);">Contact</a>
    </nav>
    <div id="home">
        <h1>Accueil</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut maximus ante in tortor eleifend, maximus rutrum eros condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis a tincidunt nibh. Aenean ligula metus, pharetra fermentum eros a, pulvinar pellentesque tortor. Integer vitae eleifend enim. Ut quis ante id libero imperdiet bibendum. Donec consequat sed orci nec iaculis. Praesent turpis felis, egestas eu orci sit amet, volutpat egestas sapien. Sed ut lorem nec nisi accumsan facilisis. Sed faucibus egestas lobortis. Aenean semper diam quis lacus consectetur, eget posuere erat laoreet. Duis non aliquet odio.</p>
        <p>Nam ullamcorper sem euismod aliquam maximus. Donec eu libero mollis, malesuada urna porta, sodales sem. Ut consequat tortor laoreet est posuere maximus. Quisque sollicitudin sit amet mauris et egestas. Donec eu dui lobortis tortor ultricies sagittis et eget turpis. Donec feugiat, enim a interdum luctus, lorem libero iaculis nisl, at malesuada enim tortor ut arcu. Praesent vel dui sit amet lorem condimentum rutrum at ut est. Etiam mattis vel massa bibendum tincidunt. Ut rhoncus sem quis ipsum venenatis laoreet.</p>
    </div>
    <div id="budget">
        <h1>Nos Services</h1>
        <figure>
            <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample70.jpg" height="200px" width="150px" />
            <figcaption>
                 <a href="#">Service 1</a>
            </figcaption>
       </figure>
       <figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample106.jpg" height="200px" width="150px" />
            <figcaption>
                 <a href="#">Service 2</a>
            </figcaption>
        </figure>
        <figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample109.jpg" height="200px" width="150px" />
            <figcaption>
                <a href="#">Service 3</a>
            </figcaption>
        </figure>
    </div>
   <div id="map">
        <h1 align="left">Carte</h1>
        <iframe src="https://www.google.com/maps/embed?pb=!1m10!1m8!1m3!1d6612.392947445577!2d-5.0028769!3d34.0388309!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sfr!2sfr!4v1493761165253" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
    </div>
    <div id="contact">
        <h1>Contact</h1>
        <fieldset>
            <legend>Contact Form</legend>
            <table width="80%" cellpadding="6px">
                <tr>
                    <td align="left"><label for="name">Nom*:</label></td>
                    <td><input type="text" name="name" placeholder="Votre Nom"></td>
                </tr>
                <tr>
                    <td align="left"><label for="email">Email*:</label></td>
                    <td><input type="text" name="email" placeholder="Votre Email"></td>
                </tr>
                <tr>
                    <td align="left"><label for="date">Date*:</label></td>
                    <td><input type="date" name="date"></td>
                </tr>
                <tr>
                    <td align="left"><label for="time">Heure*:</label></td>
                    <td><input type="time" name="time"></td>
                </tr>
                <tr>
                    <td align="left" valign="top"><label for="comment">Commentaire*:</label></td>
                    <td><textarea rows="5" cols="22"></textarea></td>
                </tr>
                <tr>
                    <td align="left"></td>
                    <td><input type="submit" name="submit" value="Envoyer"></td>
                </tr>
            </table>
        </fieldset>
    </div>
  <?php include("includes/footer.php");?> 
                                

5- الملف main.js

فالمجلد js كانزيد ملف جديد سميه main.js فيه كاين لfonctions لي غادي نحتاجو فكاين init لي منبعد مكنسترجع العناصر ديال القائمة لي عندي بواسطة لid ديالهم كنزيد للقائمة الرئيسية لbackground active لي كيعطيها لون أصفر من البداية ثم كاين tabs لي كتخد الرقم ديال العنصر ديال لقائمة لي ضغط عليها المستخدم وكتردو active بينما لعناصر لخرين كتخفيهم الكود ديال الملف هو:

                                    var active = "#FFDE07";
var normal = "#4C4D4E";
var block = "block";
var none = "none";
var home,budget,map,contact;
var link1,link2,link3,link4;
function init(){
    link1 = document.getElementById("navHome");
    link2 = document.getElementById("navBudget");
    link3 = document.getElementById("navLocation");
    link4 = document.getElementById("navContact");
    home = document.getElementById("home");
    budget = document.getElementById("budget");
    map = document.getElementById("map");
    contact = document.getElementById("contact");
    link1.style.background = active;
}
function tabs(tab){
    if(tab == 1){
        link1.style.background = active;
        link2.style.background = normal;
        link3.style.background = normal;
        link4.style.background = normal;
        home.style.display = block;
        budget.style.display = none;
        map.style.display = none;
        contact.style.display = none;
    }
    if(tab == 2){
        link1.style.background = normal;
        link2.style.background = active;
        link3.style.background = normal;
        link4.style.background = normal;
        home.style.display = none;
        budget.style.display = block;
        map.style.display = none;
        contact.style.display = none;
   }
   if(tab == 3){
        link1.style.background = normal;
        link2.style.background = normal;
        link3.style.background = active;
        link4.style.background = normal;
        home.style.display = none;
        budget.style.display = none;
        map.style.display = block;
        contact.style.display = none;
   }
   if(tab == 4){
        link1.style.background = normal;
        link2.style.background = normal;
        link3.style.background = normal;
        link4.style.background = active;
        home.style.display = none;
        budget.style.display = none;
        map.style.display = none;
        contact.style.display = block;
   }
}
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد