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

الصفحات

 Layout responsive

Learn how to build a responsive web page architecture for all devices


اولا يجب الاخذ بنظر الاعتبار انه صفحات الويب لم تكن كالسابق تقتصر في تصميمها فقط من دون ان يكون هناك تجاوب جيد مع الهواتف لضمان تجربة مستخدم جيدة ولأن الموضوع هذا مهم جدا ولا يمكن التخلي عنه في المشاريع نحن في هذا الشرح شيء بسيط او نموذج بسيط لهيكلية الصفحة النقطة الاولى ستحتاج الى انشاء ملف بسيط وليكن يحمل الاسم index.html وهذا الملف سيحمل بداخله الكود لهيكلية الصفحة دعنا نتحدث قليلا عن اهم العناصر التي سيحتويه الكود في البداية سنوضح للمتصفح انه التعامل يكون مع html لذلك سنفتح وسم html وايضا سيكون بداخله الرأس الذي سيأخذ الوسم head وسيحتوي بدوره على اهم الاشياء التي تقوم بربط التنسيقات او الشكل العام ولانه نحن هنا سنحتاج فقط شيء بسيط لذلك سنقوم ايضا بانشاء ملف ثاني يحمل الاسم style.css وهذا الملف سيكون من خلاله تنسيق جميع ما يحتوي عليه الbody داخل صفحة index.html جيد جداً لنرى ما يحتوي اولا ملف الHtml وما يحمل ملف أل Style css ومن ثم نقوم بشرحهم.

HTML FILE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout responsive </title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="FlexWrapper">
        <div class="FlexItems FlexContent">content</div>
        <div class="FlexItems FlexSideOne">slide one</div>
        <div class="FlexItems FlexSideTwo">slide tow</div>
        <div class="FlexItems FlexHeader">header</div>
        <div class="FlexItems FlexFooter">footer</div>
    </div>
    
</body>
</html>

هنا نلاحظ وجود <!DOCTYPE html> وهذا ما نقصده بتعريف الصفحة انه نحن سنتعامل مع الHTML وبعدها قد وضعنا الوسم الخاص به بالتأكيد سيكون <html lang="en"> جيد جدأ هنا تلاحظ اننا قد حددنا اللغة الانجليزية والتي تختصر بالEN ومن ثم فتحنا الوسم الذي قلنا عنه يحمل ارتباط التنسيقات وغيرها ويسمى <head> اول عنصر يحمله الميتا charset="UTF-8" التي سيتعرف عليها انها تحمل اللغة العربية ايضا وكذلك الميتا meta name="viewport" content="width=device-width, initial-scale=1.0 والتي تخص التوافق وقبوله مع الهواتف <title>Layout responsive </title> تعريف اسم الصفحة وهذا امر مهم جدا وهنا لانه عملنا فقط ظهور صفحة هيكل اذا سيكون Layout responsive واما هذا <link rel="stylesheet" href="styles.css"> فهو لربط التنسيقات بالملف الذي قلت لكم في البداية تحتاجه ويسمى style.css 
هل اعجبك الموضوع :

تعليقات