السلام عليكم ورحمة الله وبركاته
كنت قد اعتقدت أن عبارة "بعد قليل" ستعني دقائق معدودة وقد تصل لساعة أو ساعتين... لكن لأربع وعشرين... فلم تكن في الحسبان
مع أني أؤمن بضرورة وأهمية دقة المواعيد... إلا أنني أعذر من يتأخر -إذا كان في سورية-... لذلك تجاوزوا.. تجاوز الله عن أخطائكم....
المهم نبدأ الآن...
بلمحة بسيطة عن لغة الـ html
هي لغة بسيطة جداً وهي عبارة عن الأكواد التي يفهمها المتصفح ويحولها لكلمات او صور او تقسيمات معينة للصفحة
شكلها العام يتألف من قسم فيه معلومات عن الصفحة يسمى الرأس Head وقسم فيه محتوى الصفحة يسمى الجسم Body
في الرأس من الممكن أن نضع معلومات عن اللغة المستخدمة في كتابة محتوى الصفحة أو لتضمين ملفات معينة خاصة بالشكل style أو الحركات أو السكريبتات المضافة script او معلومات عن المصنع أو المنتج وإضافات أخرى قد تهم محركات البحث التي قد تؤرشف الصفحة لديها
أما في الجسم مثلاً نضع تقسمياً للصفحة.. باستخدام الكود Table
أو تلويناً للنص المكتوب باستخدام الكود font
وندرج المثال الأول عن الشكل العام لصفحة الـ html
في قسم الـ body نستخدم الوسوم...
الوسوم: هي الأجزاء التي تحدد كيف سيظهر المحتوى فهي تصف المحتوى من حيث التنسيق.
مثال على ذلك هذا السطر من لغة HTML ..
الكود
HTML is a Great Language
وعند استخدام المتصفح في مشاهدة السطر السابق سيظهر هكذا ..
الكود
HTML is a Great Language
نسيت أنكم لن تلاحظوا الفرق لأن الخط المستخدم في كامل النص هو bold !!!
في المثال السابق تبدو أجزاء ملف الـ HTML واضحة، المحتوى الذي يتمثل في عبارة HTML is a Great Language، والوسوم المحاطة بعلامتي < و >، في المثال السابق استخدمنا وسما يدعى b وهو اختصار لكلمة bold (عريض)، ويأتي في صورة زوج من الوسوم، وسم للفتح ووسم للإغلاق، ويتميز وسم الإغلاق عن وسم الفتح في أنه يحتوي على علامة ( / ) قبل اسم الوسم، وسم الفتح يعني أن المتصفح يجب أن يطبق الوصف الموجود في الوسم على جميع النصوص الذي تلي الوسم وحتى يصل إلى وسم الإغلاق، مثل التشغيل والإطفاء .. وسم الفتح يشغل ميزة الخط العريض ووسم الإغلاق يطفأ هذه الميزة، وكما أن هنالك وسما للخط العريض .. هنالك وسم للخط المائل، وآخر لتغيير الخط، ووسوم أخرى للجداول والصور، جميع عناصر ملف HTML يتم إدراجها عن طريق الوسوم، وتحدد خصائصها أيضا عن طريق الوسوم.
إذا أردت مثلا أن تغير الخط في كلمة Great في مثالنا السابق، سنحتاج إلى استخدام الوسم Font، حيث سنستخدم الوسم Font بأن نضبط خاصية لون الخط في كلمة Great إلى اللون الأحمر، ويتم هذا كالتالي ..
HTML is a
Great Language
حيث ستبدو هكذا ..
HTML is a
Great Language
في المثال السابق يتضح لنا أمر آخر، وهو أنه حتى نضبط خصائص أحد الوسوم فإننا نقوم بوضع إسم الخاصية بعد اسم الوسم بين علامتي الـ< والـ> ونفصل بين اسم الوسم والخاصية بمسافة بيضاء، وتكون الخصائص في صورة إسم="قيمة" أي إسم الخاصية ثم علامة المساواة ثم قيمة الخاصية بين أقواس الإقتباس المزدوجة، في المثال السابق قمنا بضبط الخاصية color للوسم font عند القيمة red، وإذا كان هنالك أكثر من خاصية يمكننا إضافتها أيضا في نفس المكان، بحث نفصل كل خاصية والأخرى بمسافة، مثلا ..
الكود
HTML is a Great Language
التي ستظهر هكذا ..
الكود
HTML is a Great Language
أمور إضافية يجب أن تعرفها عن HTML ..
- لغة HTML لا تراعي حالة الأحرف من حيث كونها كبيرة أو صغيرة، أي أنه في HTML وضع
لا يختلف عن .
- يمكن إحاطة قيم الخصائص بعلامة إقتباس مزدوجة ( " ) أو مفردة ( ' )، ويمكن أيضا عدم إحاطتها بأي منها إذا كانت القيمة تتألف من كلمة واحدة دون مسافات.
- بعض الوسوم تحتاج إلى وسم إغلاق وبعضها لا يحتاج إليه.
- قد وقد لا يحتوي وسم الفتح على خصائص إضافية، ولكن وسم الإغلاق لا يحتوي أبدا على هذه الخصائص.
- لغة HTML لا تراعي المسافات البيضاء، وتعتبرها جميعا مسافة واحدة، أي أن وضع مسافة واحدة بين كلمتين، يساوي وضع مسافتين، ويساوي وضع ثلاثين مسافة، ويساوي وضع سطر جديد، ويساوي وضع جدولة tab، كلها تترجم إلى مسافة.
- توضع التعليقات بين أي أن المتصفح يتجاهل أي شيء بينهما وكأنه غير موجود.
مثال منوع
[php]
My First Page
Here My Html Page...
Next Line!!
what about some red color?
Or bold type...
try this Hi Every Body
!!!!
المهم هذه كلها على سبيل المثال...
left alignment |
right alignment |
|
center alignment |
left alignment |
|
END OF BAGE...
Smile this our forum header..!!
[/php]
تكلمنا سابقاً أنه من الممكن أن نكتب أكواد لغة الـ HTML بداخل تعليمة الـ print في لغة الـ php
أو من الممكن أن نغلق بيئة الـ php بكود النهاية ونكتب أكواد الـ HTML في أي مكان خارج بيئة الـ php كما في هذا المثال...
[php]
[/php]
وأيضاً من الممكن أن نتجاهل التقسيمة الافتراضية لصفحة الـ Html كلها ويظهر كل شيء بشكل سليم... لكن ليس هذا بالعمل الاحترافي أو النظامي....
وبعد هذه المعلومات عن لغة الـ Html ننتقل لقسم مهم منها يدعى النماذج Forms
يتبع..