سنقوم اليوم بتطبيق على كل ما تم شرحة سابقاً في لغة الـHTML وسوف نقوم بإنشاء موقع مصغر بواسطة هذه اللغة الرائعة ونضيف بعض الاوامر البسيطة وسيكون شكل التطبيق كما في شكل الاتي:
خطوات التطبيق:
بعد النظر في الشكل السابق سنقوم بعمل جدول للموقع الكامل لضبط محتوياته,ويحتوي الجدول على 7 صفوف الصف الأول لدية خلية واحدة والصف الثالث كذلك واخر صف أيضاً كما يلاحظ في الصف,بقية الصفوف مكونة من خليتين او عمودين الاول على اليمين والثاني على أيسر النص.
في الصف الاول سنصمم صورة و نضعها في الخلية في راس الجدول بنفس المقاسات وشكل الموقع يعتمد على فت التصميم وجمالة وليس على حرفية الكود والبرمجة فقط.
في الجدول الثاني سنقوم بعمل عناصر القائمة كروابط عند الضغط عليها يتم الذهاب لصفحة اخرى وهي (الرئيسية-اعمالنا-حول الموقع..إلخ),كما تعرفون خلال سلسة الشروحات السابقة غير موجودة سنقوم بإنشاء صفحة لكل صفحة يحتويها الموقع مثلاً سننشئ صفحة اسمها our_works.html في رابط الزر اعمالنا.
بعد الانتهاء من تسمية روابط الصفحات الاخرى نواصل إدخال المحتويات ففي الصف الثالث في الخلية اليمنى نضع الصورة حسب المقاس المطلوب وهو إما صورة نفسها تكون بنفس المقاس او نضع صورة باي مقاس ونضبط مقاسها في الكود الخاص بالصورة ويفضل الاول حتى لا تثقل حجم الصور صفحات موقعك.
في الخلية اليسرى نقوم بعمل نص ونضع الاعدادات الخاصه بالنصوص حسب ما درسناه سابقاً,نطبق الخطوتين السابقتين على بقية الصفوف,الخطوة الاخيرة نضع فيها نص عادي بالحقوق الملكية للموقع ايضا رابط للشخص او الشركة المصممة لموقع.
الان ننتقل إلى التطبيق العملي:
الان نقوم بفتح برنامج الفوتوشوب لتصميم الصور او ضبط قياساتها مثلاً نبدا بضبط مقاسات الصورة التي في الخلية الاولى العرض(800) والطول (200 بيكسل):
نقوم بعمل اللازم في الصورة ستكون بمثابة ترويسة الموقع وتوجد هنا بعض الملاحظات او التنبيهات مثلا ماهي الفكره او الافكار التي ستحتوية الترويسة فهناك مصممين يفضلون عمل خلفية لراس الصفحة قد تكون صورة او شعار مع الاسم وهو مايفضله الكثير من مصممين المواقع.
بالامكان عمل الخلفية لون معين في الصف للجدول الخاص بالموقع افضل من الصورة ليخفف حجم تحميل الموقع على زوار موقعك,ليس شرط ان يصمم الصورة الخاصه بالموقع مصمم الموقع نفسة او المبرمج يفضل ان يقوم بتصميم الشعار او الصور الخاصه بموقعك خبير جرافيكس او شخص ذو حس فني سيكون ذلك افضل واوفر للوقت.
بعد فتح برنامج الفوتشوب سنقوم بعمل ترويسة الموقع:
نقوم بإنشاء مجلد خاص بالتطبيق الخاص بالـHTML ونسمية HTML ثم نقوم بعمل مجلد آخر ليحتوي الصور التي سنستخدمها لتطبيق نسمي المجلد باي اسم مثل imgs:
قمنا بعمل الصور الخاصه براس الموقع ونقوم بإنشاء صفحة الموقع والتي سنسميها index.html ونبدا بعمل الكود:
الجزء الثاني من الكود:
الجزء الثالث:
الجزء الرابع من الكود:
بعد كتابة الكود السابق يكون شكل الموقع بالشكل الاتي:
شرح كود التطبيق:
في السطر 1 -4 :تم كتابة الكود تلقائياً بإستخاد برنامج الدريم ويفر الذي نستخدمة فيما بعد لعمل صفحات الويب لكن هنا عليك كتابة كل سطر يدوياً وبالطريقة التي تعلمناها.
الوسم <DOCTYPE> توضع دائماً أعلى الصفحة في منطقة الراس حيث تخبر المتصفح عن نوعية الكود المستخدم في الصفحة سواء كان HTML,XHTML أو خليط بينهما حتى يتم التعامل معها بشكل صحيح و سليم لكي يظهر للمستخدم بشكل منسق وفي السطر الثاني سطر نوع اللغة المستخدمة و الداعم لها وهي شركة w3.org بعد ذلك فتحنا منطقة الـhead .
من 8-9 قمنا بفتح محتوى الموقع او جسم الموقع <body> وتم اضافة لون الخلفية وححدناها في كو اللون "bgcolor="FFFB7 في السطر التاسع قمنا بعمل جدول وبدانا بعمل الكود الخاص بالجدول <table> ثم اعطينا هذا الجدول الخصائص:
"width="800 خاصية العرض تم تعيين عرض الموقع 800 بيكسل
"align="center الخاصية اتجاه الموقع او امكانه وحددناها المنتصف.
"border="1 خاصية اتجاه سمك حواف الجدول وحددنا القيمة 1 بيكسل جرب قيم اخرى ولاحظ الفرق.
"bordercolor="FF6600 خاصية لون سمك الحواف ويمكنك تحديد اللون الذي يروق لك.
"dir="rtl خاصية بدء المحتويات من اليمين الى اليسار او من اليسار الى اليمين هنا حددنا من اليمين الى اليسار.
من السطر 11-15:
قمنا بعمل الصف الاول في الجدول والذي حدد سابقاً بانه سيكون خاص بترويسة الموقع وقمنا بفتح صف وهو الصف الاول في الجدول <tr> ثم الخلية الوحيدة في الصف <td> ثم وضعنا كود الصورة التروسية الخاصه بالموقع وحددنا اسم الصورة ومكانها داخل مجلد اسمه imgs كما في الكود <"img src ="imgs/header.jpg> ثم أغلقنا الخلية ثم الصف <td></tr/>.
لتنضيم وضبط محتوى الموقع والتسهيل وحتى لايتأثر الجدول الرئيسي بالمحتوى,قمنا بعمل جدول وكما تعلمنا فتحنا جدول وعملنا صف وفتحنا الصف ثم عملنا خليتين والثانية لنص ,اي لدينا جدول عمودين والصفوف المفتوحة لمن اراد أن يزيد , نغلق الجدول ثم الصف ثم الجدول الرئيسي,بعدها ننهي محتوى الصفحة الـHTML وهي الـ <body/> ثم <html/>.
بهذا نكمل الدروس الخاصه بلغة HTML وإبتداءً من غداً سوف نبدا بشروحات الخاصه بلغة الـCSS.