بسم الله الرحمن الرحيم اليوم ان شاءالله وعلى بركة الله نبدأ دورة لغة HTML في مدونة أحمد القيسي للمعلوماتية اتمنى ان تعجبكم الدورة وتستفيدون منها. قبل البدء بالدورة انا انسان مثل اي شخص قد اخطىء وقد اصيب وانا لم اولد وانا متقن لهذه اللغة واتمنى ان يوفقني الله في نشر هذه الدورة على هذه المدونة.
1-المقدمة
ــــــــــــــــ
ما معنى لغة HTML ؟
ان لغة HTML وھي اختصار لكلمة (Hyper Text Markup Language)
وھي إحدى الطرق في تصمیم صفحات على الانترنت أو تزیین الرسائل التي تبعث عبر
البریدالالكتروني.
ان لغة HTML لیست لغة برمجیة كلغة ++C أو JAVA أو C فھي لغة سھلة
وغیر معقدة ولا تحتوي على شیفرات كثیرة كذلك فھي لا تحتاج إلى مترجم . لذلك فھي
لغة بسیطة جداً، وسھلة الفھم والتعلم ولا تحتاج لمعرفة مسبقة بلغات البرمجة
والھیكلیة المستخدمة فیھا.
ــــــــــــــــ
2-الأساسيات
ــــــــــــــــ
تكتب لغة HTML برموز غریبة وكثیرة اسمھا باللغة الانجلیزیة
الـTags وتسمى باللغة العربیة الوسوم .
مثال توضيحي :
< TAG/>هنا يكتب النص< tag >
اذاً كما تلاحظون فهناك وسم في البداية ووسم في النهاية.
ان الوسم < tag > هو وسم البداية والوسم < TAG/ > هو وسم النهاية والنص يكتب بينهما ولعلك لاحظت وجود اشارة / في وسم النهاية.
ولكل كود من لغة htlml وسم بداية ووسم نهاية وسأمثلها لك في الرسم الاتي:
الوسم الأول ھو الوسم < HTML > أنه أھم الوسوم المستخدمة في بناء الصفحات المستخدم فیھا لغة HTML ،لأنه یقوم بتعریف للمتصفح أن ھذه الصفحة مصنوعة بلغة الـHTML ویوضع ھذا الوسم في أول المستند المصنوع بلغة الـHTML ولولا ھذا الوسم لظھرت محتویات الصفحة بصورة باھتة وغیر مفھومة ، وسم النھایة ھو < HTML/ > الذي یوضع أخر المستند المصنوع بلغة الـHTML .
الوسم < head > يستخدم لتعريف صاحب الصفحة واللغة ومعلومات عديدة اخرى ان شاءالله سنتطرق لها في الشروحات القادمة, ووسم النهاية الخاص به هو < head/ >.
نأتي الآن إلى الوسم < TITLE > الذي یمثل الجملة التي توضع أعلى الشاشة على الیسار ، ووسم النھایة الخاص بھ ھو < TITLE/ > ، ملاحظة یوضع ھذا الوسم بین الوسمین < HEAD > و < HEAD/ >
نأتي الآن إلى الوسم < BODY > الذي ھو محور الدروس بأكملھا ، حیث یمثل ھذا الوسم محتویات الصفحة بأكملھا حیث تضع فیھ الجداول والصور و المواضیع وكل ماتریده أن یظھر على الصفحة . سوف أبسط لك كل ما ذكرت في ھذا الدرس داخل ھذا الرسم التبیاني :
مثال:
< html >
< head >
< title >
any thing
< TITLE/ >
< HEAD/ >
< body >
any thing
< BODY/ >
< HTML/ >
ملاحظات مهمة:
ـــــــــــ
1-ملف Html يبدأ دائماً بالوسم وينتهي بالوسم .
2-الامتداد المستخدم في أسماء ملفات HTML ھو htm. أو html.
3-لا يوجود اي مشكلة في كتابة الوسوم بالاحرف الصغيرة او الكبيرة.
4-لا يهم وجود الفراغات الزائدة او عدم وجودها (الفراغات الناتجة عن زر space او enter) لذا يمكنك كتابة المثال السابق بهذه الطريقة:
< html >< head >< title > any thing< /TITLE >< /HEAD >< body > any thing < /BODY >< /HTML >
والنتيجة نفسها
الان كيف سنحدد مقدار النص الموجود في كل سطر وكيف نحدد نهاية او بداية النص الذي يليه؟
سنستخدم هذا الوسم < BR > لتحديد نهاية السطر الحالي والبدء بسطر جديد وللعلم هذا الوسم مفرد ( أي ليس له وسم بداية او نهاية).
مثال :
< html >
< head >
< title >
any thing
< TITLE/ >
< HEAD/ >
< body >
أي < BR > شيء
هنا < BR >
< BODY/ >
< HTML/ >
لاحظ اننا استخدمنا وسم < br > لتحديد نهاية فقرة أي وبداية فقرة شيء وايضاً نهاية فقرة شيء وبداية فقرة هنا.
ايضاً يمكنك استخدام وسم اخر للاشارة الى نهاية او بادية الاسطور والفرقات وهو وسم < p >
ووظيفته نفس وظيفة الوسم السابق اي انه ينهي الفقرة او السطر ويبدأ واحد جديد لكنه يترك سطر اضافي فارغ بين الفقرات.
أما الفراغات فتعتبر رموزاً خاصة لذلك لا نستطیع التحكم بھا وبعددھا إلا باستخدام الوسم &;nbsp (والأحرف ھي اختصار للعبارة Non Breakable Space). وإذا أردت إدخال عدة فراغات بین نص وآخر ما علیك إلا كتابة ھذا الوسم بنفس عدد الفراغات المطلوب. كما یجب علیك التقید بالأحرف الصغیرة ھنا.
كل ھذه الإشارات تستخدم أصلاً مع الوسوم فھي محجوزه ضمن مفردات لغة HTML ومن الخطأ استخدامھا بصورتھا الصریحة لئلا یؤدي ذلك إلى حدوث مشاكل في طریقة عرض الصفحة. كذلك فإن ھناك رموزاً غیر موجودة أساساً على لوحة المفاتیح كرمز حقوق الطبع © ورمز العلامة المسجلة R ونحتاج إلى ھذه الطریقة(طریقة الوسوم) لكتابتھا.
مثال:
مثال آخر:
الى هنا ينتهي الدرس الاول من دورة تعلم لغة html اتمنى ان تكون اعجبتكم وقد استفدتم منها والى اللقاء في درس جديد من هذه الدورة.
دورة لغة HTML : الدرس الأول المقدمة + الأساسيات
4/
5
Oleh
Ahmed alqaisi
تذكرو قول الله سبحانه وتعالى: وما يلفظ من قول الا لديه رقيب عتيد