اساسيات في لغة html

السلام عليكم ورحمة الله وبركاته

لغة ال html أو Hyper Text Markup Language بمعنى لغة ترميز النصوص ,
هي لغة مستخدمة لانشاء صفحات الانترنت .

* ما الفرق بين ال html ولغات برمجة أخرى ؟
- أنها بسيطة ورموزها سهلة .
- أنها ليست لغة برمجة بالضبط , فهي لا تحتاج لبرنامج يترجمها للغة الحاسب وهو ما يسمى
ال compiler بل يتم تنفيذ تعليماتها مباشرة عبر متصفح الانترنت .

* لماذا نتعلم ال html وليس ال frontpage ؟
الفرونت بيج هو برنامج يقدم لنا أكواد لغة ال html على طبق من ذهب ومن الواجب تعلمه لمن
يريد انشاء موقع على الانترنت ؛ لأنه يسهل العمل كثيرا حيث أنه يحول النصوص العادية التي
نكتبها الى أكواد html جاهزة .
لكن . .إذا أردنا تعلم اللغة من أساسها , وأن نمتلك قدرات أكثر في بناء المواقع , وأن نحترف
أكثر , يغدو من واجبنا أن نتعلم ال html .. وبعد تعلُمها يصبح فهم ال frontpage
أسرع من لمح البصر .

وبعد جولة متمعنة في الانترنت , وجدتُ موقعا ممتازا باللغة الانجليزية يحوي دروساً لهذه اللغة من
أول حرف فيها . والدروس مشروحة بشكل مبسّط ومع أمثلة وفيرة ومفيدة جدا لمن يرغب
بانشاء موقع غزير الامكانيات . وسأقوم بإذن الله تعالى بترجمته في هذا الموضوع مع تمنياتي أن
يكون مفيدا . وها هو الموقع : http://www.w3schools.com/web/default.asp

وبالطبع من يجيد اللغة الانجليزية بطلاقة يمكنه التوجه لهناك مباشرة وبذلك يريح نفسه من ترجمتي المرعبة

* ألا توجد مواقع لتعلم ال html باللغة العربية ؟
بلى , توجد .. لكنها لا تحوي هذا الكم من الأمثلة والأكواد الجاهزة التي يحويها هذا الموقع .
وللوصول لمواقع عربية يمكننا استغلال محرك البحث google .

* متى سأنتهي من الثرثرة وأبدأ بالترجمة ؟
نبدأ الان على بركة الله

* ما هو نظام الشبكة العالمية www ؟
World Wide Web وتُسمى اختصارا : الشبكة web عبارة عن أجهزة كومبيوتر منتشرة في شتى أرجاء العالم ومتصلة ببعضها البعض .
تستخدم أجهزة الكومبيوتر هذه معيار اتصال يدعى http وهو اختصار ل hyper text transfer protocol.

*كيف تعمل الويب ؟
- معلومات الويب مخزنة في مستندات تُدعى صفحات الويب web pages .
- صفحات الويب هي ملفات مخزنة في أجهزة الحاسب تدعى خادمات الويب web servers .
- أجهزة الحاسب التي تقرأ صفحات الويب تدعى زبائن الويب Web clients .
- زبائن الويب تعرض لنا الصفحات عن طريق برنامج يسمى متصفح الشبكة Web browser

ومن أكثر متصفحات الانترنت شيوعا ال Internet Explorer و Netscape Navigator.

* كيف يجلب المتصفحُ الصفحات ؟
- المتصفح يحضر صفحات الانترنت من الخادم server عن طريق طلب .
- الطلب هو معيار http يحوي عنوان صفحة .
- عنوان الصفحة يكون بهذا الشكل :http://www.someone.com/page.htm

* كيف يعرض المتصفحُ الصفحات ؟
- جميع صفحات الانترنت تحوي أوامر للعرض .
- المتصفح يعرض الصفحات بواسطة قراءة هذه الأوامر .
- أكثر أوامر العرض شيوعا تُدعى مؤشرات ( أو وسوم ) html .
- مؤشرات ال html تبدو هكذا :

مثلا :نموذج كود
<p>This is a Paragraph</p>

* من يحدد معايير الانترنت ؟
- هذه المعايير لا تُحدد عن طريق المتصفح وانما عن طريق ال w3c وهي اختصار
ل World Wide Web Consortium بمعنى اتحاد الشبكة العالمية الواسعة .

* ما هو ملف html ؟
- هو ملف نص يحوي مؤشرات ترميز markup tags
- مؤشرات الترميز هذه ( تخبر) المتصفح كيف يعرض الصفحات .
- ملف ال html يجب أن يكون ذا امتداد htm أو html ( وسنتحدث عن هذا لاحقا )
- يمكن انشاء ملف html بواسطة محرر نصوص .

*ما الذي نحتاجه كي نبدأ تعلم وتطبيق لغة ال html ؟
- نحتاج لمتصفح انترنت مثل Netscape Navigator أو Internet Explorer
وأحدهما متوفر لدينا طبعا والا ما كنا لنقرأ هذا الموضوع .
- برنامح محرر نصوص : ولدينا برنامجان مشهوران :

1. برنامج word ويأتي مع ال office وهو مجموعة البرامج من انتاج شركة Microsoft
والتي تحوي البرامج شائعة الاستخدام مثل word powerpoint excel .. الخ
2 . برنامج المفكرة ال notepad وهو موجود ضمن البرامج الملحقة بنظام التشغيل
الويندوز , ويمكن الوصول له عن طريق قائمة إبدأ start.

قبل أن نبدأ بشرح رموز ال html دعونا ننشئ أول صفحة لنا بالانترنت وهنا علينا أن نتذكر أن
متصفحات الانترنت تختلف في عرض الصفحات أحيانا , وقد تظهر بعض الأمثلة بشكل مختلف من
جهاز لآخر .. أنا شخصيا لدي متصفح interner explorer الاصدار السادس .
ملحوظة مهمة يجب أن نتذكرها : أن طريقة عرض الأكواد في المنتدى تظهر الاشارة / بعد
الرمز وليس قبله ! لكن لا حاجة لتعديلها عند النسخ واللصق .

نبدأ صفحتنا الاولى :
1. نذهب الى المفكرة notepad أو الى برنامج ال word وننسخ فيه الكود التالي :
نموذج كود
<html>
<head>
<title>Title of page</title>
</head>
<body>
السلام عليكم
مرحبا بكم في منتدى برامج نت
هذه صفحتنا الاولى على الانترنت
</body>
</html>

2. بعد كتابة الكود نختار الخيار file من قائمة المفكرة ومن ثم لحفظ الملف نختار save as .
ونتذكر جيدا أين حفظنا الملف ولهذا أنصح بإنشاء مجلد جديد في المستندات my ********s
بحيث نضع فيه الملفات التي سنتعامل معها خلال هذا الموضوع.

بعد أن نختار save as علينا أن نحفظ الملف بالامتداد html أو htm وهذه نقطة مهمة , لأننا
إن لم نفعل هذا , فلن يتم تطبيق الملف على المتصفح .

3. نتوجه الى المتصفح ونختار الخيار : ملف file ومن ثم فتح open :

تظهر لنا النافذة التالية .. نضغط على استعراض أو browse :

ومنها نختار الملف الذي حفظناه . ونضغط على ok .
4. تكون النتيجة كالتالي :

ملاحظات...
- من المحبذ أن نخصص مجلدا للملفات التي سنعمل بها في هذا الموضوع .
- يجب أن نحفظ الملفات بالامتداد html أو htm .
* ماذا لو لم تظهر لنا صفحة الانترنت مثل الخطوة رقم4 ؟
في هذه الحالة علينا التأكد من أننا حفظنا الملف بالامتداد الصحيح وأننا اخترنا الملف المطلوب من
مجلداتنا في الخطوة 3 .
* هل يمكننا استخدام المتصفحين Internet Explorer و Netscape Navigator
معا ؟
نعم يمكن ذلك , لكن كما ذكرتُ أعلاه قد تظهر بعض الأمثلة بشكل يختلف عن الاخر من جهاز
لآخر .. كما يجب أن يكون المتصفح من الاصدار 3 وأعلى في كلا النوعين .
* هل تنفع هذه اللغة مع الأجهزة التي لا تملك نظام التشغيل Windows مثل الماكينتوش مثلا ؟
نعم ممكن .

وسوم html
- مستندات html هي ملفات نصية مكونة من عناصر html .
- عناصر ال html تُعرَّف بواسطة وسوم ال html .
- وسوم ال html تُستخدم لتكوين عناصر ال html
- وسوم ال html محاطة بالقوسين > و < ويسميا بالانجليزية angle brackets .
- بشكل عام تأتي وسوم html أزواجا لكن ليس دائما كما سنرى لاحقا .
- الوسم الأول في زوجي الوسوم يسمى وسم البداية والأخير يسمى وسم النهاية .
- النص بين وسمي البداية والنهاية يُسمى محتوى العنصر .
- لا فارق في الوسوم بين الحروف الكبيرة UPPERCASE أو الحروف
الصغيرة lowercase.
الان فلنتأمل المثال السابق .. نميز الوسوم التالية :

1. وسم البداية هو أول وسم في مستند ال html ويدل متصفح الانترنت لدينا أن هذا ملف html.
ووسم النهاية يدل المتصفح على أن المستند ينتهي هنا .
2. ما بين هذين الوسمين توجد معلومات عن الصفحة , وهي لا تظهر في التطبيق .
3. النص بين هذين الوسمين هو عنوان الصفحة .
4. النص بين هذين الوسمين هو ما سيظهر في المتصفح عند التطبيق .
أي أن مبنى مستند ال html يبدو هكذا :

* ما هي عناصر html ؟
مثال :
نموذج كود
<title>Title of page</title>

يبدأ هذا المثال بوسم البداية <title>
المحتوى هو هذه الكلمات : Title of page
وينتهي بوسم النهاية <title/>
إذن عنصر Html مكون من وسوم لها وظيفة معينة .

* عرفنا أنه لا فرق بين الحروف الكبيرة والصغيرة لكن من المفضل الاعتياد على الكتابة
بالحروف الصغيرة وذلك لأن النسخ القادمة من html تتطلب الكتابة بالحروف الصغيرة .
بهذا نكون تعرفنا على المبنى الأساسي لمستند html .. وفي الردود القادمة نتعرف على
المزيد من الوسومات .
يتبع إن شاء الله ..
تحياتي