تطوير المواقع للمبتدئين ( المحتويات اولا )

المحتويات أولاً

في هذا الجزء سنتعلم اللغة الأساسية لتكوين صفحات المواقع وهي HTML

،
سنعرف ما هي هذه اللغة، وكيف تكتب،

وسنتعرف على أنواع مختلفة من عناصرها،

لكن بداية جهز أدواتك، شغل المتصفح والمحرر النصي،

هل قمت بإنشاء مجلد لكي تضع فيه ملفات الموقع؟

إن لم تفعل ذلك من قبل فأنشئ واحداً الآن ... هل فعلت ذلك؟ جميل! لنبدأ.

في المحرر النصي أكتب أي شيء،

أكتب "هذه صفحتي الأولى" مثلاً واحفظ الملفواختر له أي اسم،

ليكن مثلاً playing.html

، لاحظ أن عليك إضافة اللاحقة

html إلى اسم الملف،

إذا فعلت ذلك إذهب إلى المتصفح

واستعراض الملف الذي قمت بإنشاءه قبل قليل،

إذهب إلى قائمة ملف أو File ثم فتح أو Open واختر الملف الذي أنشأته،

ماذا عرض لك المتصفح؟ الجملة التي كتبتها، رائع!

عد مرة أخرى إلى المحرر النصي وضع أسفل الجملة الأولى

جملة ثانية تقول " يجب أن تظهر هذه الجملة في سطر ثاني" واحفظ الملف،

عد مرة أخرى إلى المتصفح

واضغط على زر إعادة عرض الصفحة أو زر F5 في لوحة المفاتيح، ماذا وجدت؟

الجملة الثانية لم تعرض في سطر لوحده، أليس كذلك؟ لماذا؟

لأن المتصفح بكل بساطة يتجاهل وجود الجملة الثانية في سطر لوحده،

المتصفح لا يفهم أن عليه عرضها بشكل منفصل،

ولكي نجعله يفهم علينا أن نتحدث بلغته

التي يفهمها وهي HTML، عد إلى الملف وأضف التالي:

<p>هذه صفحتي الأولىp>

<p>يجب أن تظهر هذه الجملة في سطر ثانيp>

لاحظ أننا أضفنا أحد عناصر لغة HTML لكل جملة، لا تقلق،

سنشرح ماذا يعني كل هذا،

لكن الآن احفظ الملف وعد إلى المتصفح وأعد عرض الصفحة، ماذا وجدت؟

نعم! كل جملة في سطر مختلف، لماذا؟

لأننا خاطبنا المتصفح باللغة التي يفهمها وقلنا له:

هذه الجملة هي فقرة لوحدها، والجملة الثانية أيضاً فقرة أخرى.

هذه هي لغة HTML، هي لغة تصف المحتويات للمتصفح

لكي يعرضها بالطريقة التي يريدها صاحب الموقع،

لغة HTML تخبر المتصفح بأن هذا النص هو فقرة،

وهناك جدول وهذا رابط وقم بعرض

صورة هنا وملف صوتي هناك، وهكذا حتى تنتهي الصفحة.

دعنا الآن نلقي نظرة على إحدى الصفحات في أي موقع،

زر موقع webstandars.org واستعرض مصدر الصفحة،

إذا كنت تستخدم متصفح إكسبلورر ستجد هذه الخاصية هنا:

نفس الخاصية ستجدها في كل المتصفحات الأخرى،

ففي متصفح فايرفوكس مثلاً يمكنك أن تجدها في قائمة View ثم اختر Page Source.

ستجد أن الصفحة تحوي العديد من العناصر،

شخصياً كنت أغلق هذه النافذة بسرعة لأنني كنت أشعر بأنها معقدة أكثر من اللازم،

لكن بعد أن تعلمت وجدت أنها بسيطة ومتكررة،

فكل صفحات المواقع يجب أن تحوي عناصر تكون الصفحة، وهي :

Doctype
html
head
title
body

هذه هي العناصر الأساسية التي تكون الصفحة،

لكي تقوم بإنشاء صفحةفارغة من المحتوى

قم بنسخ هذا القالب إلى ملف جديد وسمه

html-template.html:

“http://www.w3.org/TR/html4/strict.dtd”>

هنا توضع محتويات الصفحة ... هذه مجرد ملاحظة، قم بحذفها.

لاحظ أننا أضفنا اللاحقة html لاسم الملف، ثم اخترنا UTF-8 لخانة Encoding

إذا عرضت الملف في المتصفح فلن تجد أي محتويات فيه،

فما وظيفة كل هذه العناصر؟ السطر الأول يحوي أمر DOCTYPE

، هذا الأمر يجب أن يكون أول سطر في الملف،

لا تضع قبله أي شيء حتى مسافة فارغة،

هذا الأمر يخبر المتصفح عن اللغة التي سيستخدمها الملف،

وفي المثال اللغة التي سنستخدمها هي HTML

4.01،

لا يهم الآن أن تعرف تفاصيل هذا الأمر،

فقط ضعه في أول كل ملف ستقوم بإنشاءه.

بعد ذلك لدينا العنصر html، هنا الأمر مختلف قليلاً،

هناك قسمان لكل عنصر في HTML،

فكل عنصر له وسم بداية ووسم نهاية.

الوسم هو ترجمة لكلمة tag، وهو يبدأ بعلامة < ثم تضع اسم العنصر وينتهي بعلامة >

وكما قلنا هناك وسمان، وسم البداية وآخر للنهاية،

ولا يختلفان عن بعضهما البعض إلا في كون وسم النهاية يحوي علامة / قبل اسم العنصر.

العنصر html يخبر المتصفح

بأن محتويات الملف ستبدأ من هنا وستنتهي عند وسم النهاية

، يمكن تشبيه هذا العنصر بأنه صندوق يحوي كل محتويات الملف،

في هذا الصندوق سنجد صناديق أخرى، فلدينا أولاً رأس الصفحة head

، وهذا العنصر سيحوي كل المعلومات المتعلقة

بالصفحة والتي لن تعرض للزائر،

ففي رأس الصفحة هناك عنصر title الذي يخبر المتصفح عن اسم الصفحة،

جرب أن تضع جملة "صفحتي الأولى" في هذا العنصر بالشكل التالي:

احفظ الملف وأعد عرضه في المتصفح، هل لاحظت أي شيء؟

أنظر إلى الإطار العلوي للمتصفح،

ستجد اسم الصفحة هناك، لكنك لن تجد أي شيء في نافذة المتصفح،

هذه هي وظيفة العنصر title.

العنصر meta له وظائف كثيرة، لكننا سنستخدمه هنا لشيء واحد فقط،

وهو أن نخبر المتصفح عن صفحة المحارف أو ما يسمى encoding

، لست بحاجة لفهم ما يعني كل هذا الآن،

كل ما يجب أن تهتم به هو أن تضع هذا السطر في كل رأس صفحة من موقعك،

لماذا؟ لأن المتصفحات لن تعرض النص بشكل صحيح بدون وجود هذا السطر.

هناك العديد من العناصر الأخرى

التي يمكنك أن تضعها في قسم head،

لكن سأكتفي بهذا القدر الآن،

نأتي إلى القسم الأهم وهو body أو جسم الصفحة، وهو المكان الذي ستضع

فيه كل محتويات الصفحة،

أكتب أي شيء هنا وسيعرضه المتصفح.

بقي شيء واحد متعلق بالعنصر html، وهي

أن هناك خاصية له تسمى dir وقد وضعنا لها القيمة rtl،

ماذا يعني ذلك؟

سنشرح ماذا تعني الخاصية والقيمة لاحقاً في هذا الدرس،

المهم هنا أن تعلم أن rtl هي اختصار right to left،

أي من اليمين إلى اليسار، وهذه الخاصية تخبر المتصفح

بأن عليه عرض النص العربي بشكل صحيح،

إن كنت ستقوم بإنشاء موقع باللغة الإنجليزية مثلاً فلن تحتاج لهذه الخاصية.

ملاحظة : عندما تقوم بإنشاء صفحات جديدة استخدم القالب

لتكوين هذه الصفحات وضع المحتويات

في جسم الصفحة أي بين وسمي البداية والنهاية body.

الفقرات أساس النصوص

سبق أن تحدثت عن العنصر P

، وهو اختصار لكلمة paragraph أو فقرة، هذا العنصر يستخدم لتكوين الفقرات،

كما تعلمت في المدرسة يجب أن تنسق أي شيء تكتبه باستخدام الفقرات،

فكل فقرة تحوي مجموعة من الجمل التي تشرح فكرة واحدة،

هذه هي الفقرة، من الخطأ أن تضع كل جملة في سطر لوحده،

ومن الخطأ أن تضع كل الجمل في فقرة واحدة.

لدينا بعض العناصر التي تضيف معنى للنص مثل em وstrong

، جرب أن تضع هذه الجملة في ملف وانظر إلى النتيجة في المتصفح:

النقل يعني التكرار والاجترار،

النقل يعني الثبات والجمود

ماذا تلاحظ؟ عنصري em وstrong يستخدمان للتأكيد على المعاني،

فأنا مثلاً أريد أن أشدد على أن ممارسة النقل

- أي نقل المواضيع في المنتديات -

يعني أن الناقل يكرر ولا يجدد،

فوضعت كلمتي "التكرار والاجترار" في عنصر em وهذا العنصر يجعل النص مائلاً،

العنصر strong يؤدي نفس الوظيفة لكنه يعطي تأثيراً مختلفاً للنص.

العناوين

عندما تتصفح جريدة سترى أن كل خبر له عنوان بخط كبير،

واسم الجريدة نفسها عنوان رئيسي كبير واضح في أعلى الجريدة،

ولو قرأت الصفحات الداخلية ستجد صفحات كاملة مخصصة لموضوع واحد،

هذه الصفحات تحوي عنواناً رئيسياً للخبر أو التحقيق،

ثم مجموعة من الفقرات مقسمة باستخدام عناوين فرعية،

هذا الترتيب المنطقي يساعد على توضيح الموضوع وتقسيم الأفكار

لتكون سهلة الفهم وربما يوفر القارئ وقته بقراءة ما يريد قراءته فقط وترك الباقي.

لا يختلف الأمر كثيراً في المواقع، فاسم الموقع يجب أن يكون العنوان الرئيسي،

ثم أسماء الأقسام

أو المواضيع تكون عناوين أصغر حجماً،

والعناوين الفرعية أصغر كذلك، في HTML هناك عنصر h الذي يستخدم

لوصف العناوين والحرف

h هو اختصار heading أي عنوان،

وهناك ستة مستويات من العناوين في HTML

، فحتى نصف العنوان الرئيسي علينا أن نستخدم العنصر h1 بهذا الشكل:

العنوان الرئيسي

وإذا أردنا أن نضع عنواناً للموضوع أو للقسم نستخدم h2

، وأظن أنك خمنت بأن h3 هي للعناوين الفرعية،

يمكنك أن تستمر برفع الرقم حتى تصل إلى h6،

جرب أن تضع ستة عناوين في صفحة وانظر إلى النتيجة،

ستجد أن كل عنوان أصغر من الذي سبقه.

من المهم هنا أن أذكر بأنك غير ملزم باستخدام المستويات الستة من العناوين،

إذا كنت تريد أن تقسم المحتويات بشكل منطقي

ووجدت أنك مضطر لاستخدام أكثر من ثلاثة أو أربعة مستويات

من العناوين ففكر مرة أخرى بترتيب المحتويات وبسطها.

القوائم

في بعض الأحيان قد ترغب في كتابة نقاط على شكل قائمة،

فمثلاً قد تكتب موضوعاً تشرح فيه كيفية استخدام أداة ما

وتريد أن تذكر نصائح مهمة للاستفادة من هذه الأداة، فتكتب قائمة بهذا الشكل:

النقطة الأولى ...
النقطة الثانية ...
النقطة الثالثة ...

كيف تفعل ذلك في HTML؟ هكذا:

النقطة الأولى ...
النقطة الثانية ...
النقطة الثالثة ...

لدينا هنا عنصران الأول هو ul وهو اختصار unordered list

أي قائمة غير مرتبة وسنعرف لماذا هي غير مرتبة لاحقاً،

العنصر ul يخبر المتصفح أن عليه عرض قائمة

نقاط والتي ستكون محتوياتها بين وسم البداية

ووسم النهاية

، ثم لدينا العنصر li وهو اختصار list

item أي بند في القائمة أو نقطة في القائمة،

هذا العنصر تستخدمه

لوصف كل نقطة، وإذا كانت القائمة مكونة

من 20 نقطة فعليك أن تستخدمه عشرين مرة.

تصور أنك تريد إنشاء قائمة مرتبة من الخطوات،

فمثلاً تتحدث عن وصفة كعكة شهية وتريد من القارئ اتباع قائمة تعليمات بترتيب معين،

ماذا عليك أن تفعل؟ استخدم العنصر ol بدلاً من ul

، فهذا العنصر يعني ordered list أي قائمة مرتبة،

والفرق في شكل القائمة يكمن في كونها مرقمة:

الخطوة الأولى ...
الخطوة الثانية ...
الخطوة الثالثة ...

جرب بنفسك وقم بإنشاء قائمتين إحداهما باستخدام ul والثانية باستخدام ol

، هذه العناصر تستخدم كثيراً ويمكنها أن تقدم الكثير لمطور المواقع،

لكن سنكتفي بهذا القدر في هذا الكتاب.

الروابط

شبكة الويب لم تسمى شبكة إلا لأنها تستخدم الروابط،

هذه الفكرة البسيطة التي تتيح للمرء الانتقال من مكان إلى آخر هي أساس الشبكة،

أتذكر أول مرة قمت بإنشاء رابط بين صفحتين،

كانت لحظة رائعة ولم أصدق أنني أنا أستطيع فعل ذلك،

كنت أظن الأمر معقداً لكن مع الممارسة تبين لي أنه سهل بسيط.

قم بإنشاء ملفين،

ليكن اسم الأول

page1.html

والثاني

page2.html

، ضع هذا السطر في ملف page1.html:

هذا الرابط سينقلني إلى الملف الثاني.

وضع هذا السطر في ملف page2.html:

وهذا سيعيدني إلى الملف الأول.

قم باستعراض الملف الأول page1.html في المتصفح واضغط على الرابط،

ستنتقل إلى الملف الثاني،

إضغط على الرابط الموجود في الملف الثاني وستعود إلى الملف الأول!

لاحظ أن لدينا عنصر جديد يسمى a وهذا العنصر يستخدم لإنشاء الروابط،

في وسم البداية هناك خاصية تسمى

href وهي اختصار Hypertext REFerence

، هذه الخاصية لها قيمة وهي page1.html.

بعض عناصر HTML تحتاج إلى خصائص لتحديد وظيفة العنصر، وكل خاصية تحتاج إلى قيمة:

تصور أن لديك ثلاثة روابط في صفحة واحدة،

كيف تخبر المتصفح بأن كل رابط يقود الزائر إلى صفحة مختلفة؟ عليك أن

تستخدم الخاصية href، بعض عناصر HTML تحتاج إلى أكثر من خاصية واحدة،

وبعضها لا يحتاج أي خاصية.

الصور

لعلك كنت تنتظر هذا الجزء من الكتاب أكثر من أي شيء آخر! لا أظن أنني

بحاجة لأخبرك عن أهمية الصور، لكن علي أن أذكرك بأن الصور التي تضعها

باستخدام HTML يجب أن تكون جزء من المحتوى وليست مجرد زخارف أو زينة، إن

كنت تريد تزيين تصميم الموقع باستخدام الصور فهناك تقنية CSS التي يمكنها

أن تفعل ذلك.

لإضافة الصور في صفحة HTML عليك أن تستخدم العنصر img مع خاصيتين، تصور أن

لديك صورة في حاسوبك اسمها sunset.jpg وهي صورة لغروب الشمس، ولكي أختصر

عليك الوقت هذه صورة لغروب الشمس:

احفظ الصورة لديك أولاً، لكي تعرضها في صفحة ما يجب عليك أن تكتب هذا السطر:

هل لاحظت أن لدينا

خاصيتان؟ الأولى src وهي اختصار يعني مصدر الصورة، ومصدر الصورة هو اسمها،

من المفترض أن تكون الصورة في نفس المجلد الذي يحوي ملف HTML، إن كانت في

مجلد آخر فلا بد من وضع المسار الكامل للصورة، تصور أنك قمت بإنشاء مجلد

فرعي اسمه images لكي تضع فيه كل الصور، كيف تقوم بوضع مسار الصورة في

خاصية src؟

images/sunset.jpg"

alt="صورة لغروب الشمس"> لاحظ أننا أضفنا اسم المجلد إلى مسار الصورة،

ماذا لو قسمت مجلد images إلى مجلدات فرعية؟ تصور أن لديك أكثر من 100

صورة، ولكي تنظمها قمت بإنشاء مجلدات فرعية، فوضعت صور الطبيعة في مجلد

سميته nature، وصور الأشياء في مجلد آخر وهكذا لكل نوع من الصور مجلد خاص،

كيف تضع المسار الكامل للصورة؟

nature/sunset.jpg" alt="صورة لغروب الشمس">

كل ما فعلناه هو إضافة اسم مجلد nature.

الخاصية الثانية هي alt وهي اختصار alternative أي بديل، وقد وضعت جملة

"صورة لغروب الشمس" كقيمة لهذه الخاصية، هل خمنت وظيفة هذه الخاصية؟ هناك

من يستخدم متصفحات نصية لا تعرض الصور، وهناك من يتصفح الشبكة بدون عرض

الصور لكي يكون التصفح أكثر سرعة، وهناك أناس فقدوا نعمة البصر ويتصفحون

المواقع باستخدام أجهزة وبرامج خاصة، هؤلاء وغيرهم سيقرأون أو يسمعون النص

البديل الذي وضعته لخاصية alt، لذلك عليك أن تضع نصاً بديلاً لكل صورة

بقدر الإمكان وحاول أن تجعل النص مفيداً يشرح محتويات الصورة، هناك حالات

نادرة قد لا تستطيع فيها أن تضع نصاً بديلاً للصورة، فماذا عليك أن تفعل؟

قم بوضع خاصية alt ولا تضع لها أي قيمة، هكذا:

هكذا لن يظهر أي شيء لمن لا يستطيع

مشاهدة الصورة، لكن أريد أن أشدد على أن النص البديل ضروري فحاول أن تضيفه

لكل صورة.

هل هذا كل شيء؟!

نعم ولا، نعم لأننا لن نحتاج إلى المزيد من عناصر HTML الآن، سنحتاج

إلى تعلم بعض العناصر والخصائص الجديدة في قسم CSS وفي قسم إنشاء المدونة

الشخصية، هذا القسم هدفه أن تتعلم أساسيات HTML، وهي كما ترى سهلة بسيطة،

إن لم تفهم شيئاً ما فعليك بالممارسة والتجربة.

المصدر

» تطوير المواقع للمبتدئين ( مدخل )
» تطوير المواقع للمبتدئين ( متفرقات )
» تطوير المواقع للمبتدئين ( التصميم والألوان )
» تطوير المواقع للمبتدئين ( انشاء مدونتك الشخصية )
» تطوير المواقع مع Eye- tracking: نصائح و معلومات