القائمة الرئيسية

الصفحات

Our first responsive web page with HTML5 and CSS3



Our first responsive web page

بسم الله الرحمن الرحيم كيف حالكم ياشباب ان شاء الله الكل تكون بخير طبعا في هذه التدوينه الشرح يخص تصميم بسيط لبداية الصفحة لتطبيق الويب بشكل سريع وسهل جدا وحتى لا ياخذ منك مدة كبيرة لعمله في البداية جدا ستقوم بإنشاء ملف بأمتداد HTML وهذا الملف سيكون بداخله الكود الخاص بتصميم الصفحة من البداية اي البنية الاساسية الى حين تقسيم الموضوع بالتسلسل سنشرح الملف الاول ومن ثم ستحتاج الى ملف ثاني بأمتداد CSS هذا الملف الخاص بتنسيق هذه الصفحة.

شرح الHTML للصفحة بالتفصيل 

بداية تحتاج تنزيل برنامج تستطيع من خلاله ان تكتب الكود وهناك الكثير طبعا مثل فيجوال ستوديو كود واتوم وهذا المقال مفصل للموضوع وروابط التحميل معاه شاهد المزيد ماشاء الله الان انت بدأت تفهم الموضوع بشكل جيد تعال نكمل ماقمنا به الان تقوم بتعريف المتصفح انك تكتب HTML لذلك وضعنا هذه العلامة التي في البداية doctype html ثم حددنا اللغة وهي الانجليزية طبعا ومن ثم فتحنا الرأس بالطبع الرأس سيتحتوي على الامور التي تخص التنسيقات والربط بين الملفات وغيرها من الامور التي تنفعنا اولا مكتوب تعريف للغة العربية utf-8 ومن ثم كتابة العنوان Our first responsive web page with HTML5 and CSS3 جيد جدا الان الامور تمام خلينا نكتب الربط بشكل مباشر وتعريفه عن طريق الوسم link والمفروض تنادي على css/styles.css 
وبعدين افتح الوسم <body> طيب هذا هو الجسم الخاص بالصفحة وخلينا نضيف بداخل الجسم التالي ببساطة بأختصار ايضا سيكون رأس ومحتوى وامور جانبية
 <div class="Header"> <a href="/" class="LogoWrapper"><img src="img/SOC-Logo.png" alt="Scone O'Clock logo" /></a> <p class="Strap">Scones: the most resplendent of snacks</p> </div>
لا تخاف هذه الامور بسيطة وسهله بس تلاحظ انه يوجد اسم الرأس ومن ثم اللوجو لا شيء غير ذلك! الان نشوف ماذا بعد ذلك  ستجد الكلاس IntroWrapper ومن ثم الكلاس IntroText والكلاس MoneyShot والimg تأخذ كلاس MoneyShotImg
وبعد اكمال هذا الموضوع قمنا بإكمال التنسيق عن طريف الملف style.css والان دعنا نعرف ماهي تفاصيل التنسيق من البداية فقط شيء قليل 

HTML FILE

<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <title>Our first responsive web page with HTML5 and CSS3</title>
        <meta name="description" content="A basic responsive web page – an example from first 1">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="css/styles.css">
    </head>
    <body>
        <div class="Header">
            <a href="/" class="LogoWrapper"><img src="img/SOC-Logo.png" alt="Scone O'Clock logo" /></a>
            <p class="Strap">Scones: the most resplendent of snacks</p>
        </div>
        <div class="IntroWrapper">
            <p class="IntroText">Occasionally maligned and misunderstood; the scone is a quintessentially British classic.</p>
            <div class="MoneyShot">
                <img class="MoneyShotImg" src="img/scones.jpg" alt="Incredible scones" />
                <p class="ImageCaption">Incredible scones, picture from Wikipedia</p>
            </div>
        </div>
        <p>Recipe and serving suggestions follow.</p>
        <div class="Ingredients">
            <h3 class="SubHeader">Ingredients</h3>
            <ul>
                <li>350g self-raising flour, and a little spare for dusting</li>
                <li>¼ tsp salt</li>
                <li>1 tsp baking powder</li>
                <li>85g butter, cut into cubes</li>
                <li>3 tbsp caster sugar</li>
                <li>175ml milk</li>
                <li>1 tsp vanilla extract</li>
                <li>squeeze lemon juice (see Know-how below)</li>
                <li>beaten egg, to glaze</li>
                <li>jam and clotted cream, to serve</li>
            </ul>
        </div>
        <div class="HowToMake">
            <h3 class="SubHeader">Method</h3>
            <ol class="MethodWrapper">
                <li>Heat the oven to 220&deg;C (or gas mark 7). Tip the flour into a large bowl along with the salt and baking powder, then mix it all up. Add the butter in, then rub the butter in with your fingers until the mix looks like fine crumbs. When that is done, stir in the sugar.</li>
                <li>Put the milk into a jug and heat in the microwave for about 20-30 seconds. It should be warm but not hot. Add the vanilla and lemon juice to the milk and then put that to one side and but a baking tray in the oven to warm.</li>
                <li>Make a well in the dry mix, then add the liquid and combine it quickly with a cutlery knife – it will seem pretty wet at first. Spread some flour onto the work surface and tip the dough out. Dredge the dough and your hands with a little more flour, then fold the dough over 2-3 times until it's smoother. Now pat it into a round shape about 4cm deep.</li>
                <li>Take a 5cm cutter (Pro-tip – smooth-edged cutters tend to cut more cleanly, giving a better rise) and dip it into some flour. Plunge into the dough, then repeat until you have four scones. By this point you’ll probably need to press what's left of the dough back into a round to cut out another four.</li>
                <li>Brush the tops with beaten egg, then place onto the hot baking tray.</li>
                <li>Bake for 10 minutes until risen and golden on the top. Eat just warm or cold on the day of baking, generously (and I do mean generously) topped with jam and clotted cream. </li>
                <li>If freezing, freeze once cool. Defrost, then put in a low oven (about 160&deg;C) for a few minutes to refresh.</li>
            </ol>
        </div>
    </body>
</html>

CSS FILE

* {
    box-sizingborder-box;
}

body {
    padding1rem .5rem;
    font-size1.3rem;
    line-height1.2;
    max-width60rem;
    margin0 auto;
    color#333;
}

img {
    max-width100%;
}

.Header {
    text-aligncenter;
    border-bottom8px double #f9f9f9;
    margin-bottom2rem;
    padding-bottom1rem;
}

.Strap {
    font-size1rem;
}


.MoneyShot {
    positionrelative;
}

.MoneyShotImg {
    border6px solid #e8cfa9;
    border-radius4px;
}

.LogoWrapper {
    displayblock;
}

.ImageCaption {
    font-size.75rem;
    positionabsolute;
    bottom.5rem;
    right1rem;
}

.IntroText {
    font-size1.8rem;
    font-styleitalic;
}

.MethodWrapper li {
    padding.4rem 0;
}

.MethodWrapper li:after {
    content"✼";
    displayblock;
    text-aligncenter;
    margin1rem 0 .5rem 0;
    color#eee;
}

@media screen and (min-width50rem) {
    body {
        border-left4px solid #f9f9f9;
        border-right4px solid #f9f9f9;
        padding1rem 2rem;
    }

    .IntroWrapper {
        displaytable;
        table-layoutfixed;
        width100%;
    }

    .MoneyShot,
    .IntroText {
        displaytable-cell;
        width50%;
        vertical-alignmiddle;
        text-aligncenter;
    }

    .IntroText {
        padding.5rem;
        font-size2.5rem;
        text-alignleft;
        positionrelative;
    }

    .Ingredients {
        font-size.9rem;
        floatright;
        padding1rem;
        margin0 0 .5rem 1rem;
        border-radius3px;
        background-color#ffffdf;
        border2px solid #e8cfa9;
    }

    .Ingredients h3 {
        margin0;
    }
}

هل اعجبك الموضوع :

تعليقات