الرئيسية › منتديات › مجلس تقنية المعلومات › تعلم لغة HTML (للمبتدئين)
- This topic has 6 ردود, 4 مشاركون, and was last updated قبل 14 سنة، 11 شهر by بلسم الروح.
-
الكاتبالمشاركات
-
13 مارس، 2002 الساعة 2:56 م #9469alnadabiمدير عام
السلام عليكم
في هذا الموضوع سوف أقوم بطرح كل ما يتعلق بلغة HTML التي تعتبر اللغة الأم لقراءة الصفحات عبر الشبكة ……. وبعد قراءة الموضوع سوف تتعلم النقاط التالية :
1. تعريف لغة HTML
2. الأوامر الأساسية للغة .
3. أمثلة في كتابة الأوامر .
4. كيفية إنشاء ملف لصفحة الويب مع المثال .نبذة مختصرة عن لغة HTML:
تعريف لغة HTML : هي لغة تركيز النصوص التشعيبية ( HyperText Markup Language )
وهي عبارة عن رموز يتعرف عليها برنامج المتصفح .. لكي يقوم بتحويل تلك اللغة إلى صفحات مقروءة وبأساليب منظمة لكي يتناولها القارئ أو المتصفح بكل سهولة …. فهذه اللغة ليست لغة معقدة وصعبة …. بل هي لغة منطقية وبسيطة يمكنك ان تتعامل معها عن طريق كتابة رموز محددة تلبي مطلوبك وماذا تريد لبرنامج المتصفح ان يعرضه لك أو للزوار …… ولهذا تعتبر لغة HTML من أسهل لغات البرمجة التي يستطيع الشخص العادي أن يتعلمها وفي فترة قصيرة جداً ……
أساسيات لغة HTML:
هناك بعض الأساسيات التي يجب أن تتواجد في حالة برمجة هذه اللغة …… وسوف أقوم بعرض هذه الأساسيات وذكر مثال بسيط عن كل منها ……
أولاً : يجب أن نعلم بأن لغة HTML تعتمد إعتماد كلي على هذين القوسين < > وبهذا القوسين يستطيع المتصفح تحديد ما هي الأوامر التي بداخل تلك الأقواس … مع مراعاة بأن تلك الأقواس بها بداية الأمر ونهايته ……. وسوف تلاحظ بأن جميع الأوامر في هذه اللغة تحتوي على هذين القوسين …. وسوف نوضح ذلك بالمثال التالي :
نص الأوامر هنا
في المثال أعلاه ….. سوف نلاحظ بأننا قد فتحنا القوسين وكتبنا بداخلهما الأحرف HTML … هذا يوضح للمتصفح بأنها بداية لبرمجة تلك اللغة …… ولذلك في كل صفحة من صفحات الإنترنت …. سوف تشاهد في بداية الصفحة وفي نهاية الصفحة نقوم بإضافة علامة / يعني نهاية الأوامر في تلك الصفحة ….
وبهذا المثال فقط إستوضح لدينا بان جميع أوامر هذه اللغة يجب أن تكون بين القوسين <>
وبعد هذا المثال سوف نعرض لكم الأوامر الأساسية التي غالباً ما تكون في كل صفحة من صفحات الويب “الشبكة” ….. وتعريف كل أمر :
أمر فتح صفحة جديدة في صفحات الويب :
يتوسط هذا الأمر باقي الأوامر
أمر فتح أوامر غير مرئية للمتصفح أو للقارئ
يتوسط هذا الأمر جميع الأوامر التي تكون غير ظاهره للقارئ وعادة ما تشمل بيانات الصفحة مع عنوان الصفحة وبيانات أخرى ..
داخل هذا الأمر يمكنك إضافة أمر عنوان الصفحة بالنفس … مثال :
إكتب عنوان الصفحة هنا أمر بنية الصفحة
يتوسط هذا الأمر جميع البيانات التي سوف تظهر أمام القارئ حين يتصفح الصفحة .
ملاحظة : يمكن إضافة في هذا الأمر مجموعة أوامر فرعية تشكل البنية الخارجية لصفحة الويب ….. فمثلاً يمكن إضافة خلفية ويمكنك إضافة لون للخلفيه … وكذلك لون الخط …. وهذه هي بعض الأوامر الفرعية التي يمكن إضافتها في الأمر الأساسي BODY
background = “عنوان الصوره”
bgcolor = “عنوان الصوره”
Font Face = “نوع الخط”
link = “لون الوصلة قبل الزيارة”
vlink = “لون الوصلة التي قمت بزيارتها”
فمثلاً يمكن أن تكون مجموعة من الأوامر للبنية التي سوف تحدد الشكل الخارجي لصفحة الويب كالمثال التالي :
في قائمة الأوامر أعلاه ….. سوف تكون شكل الصفحة على النحو التالي :
لون الخلفية : أخضر
صورة الخلفية : pic.gif
لون الخط : أبيض
لون الوصلة قبل الزيارة : أحمر
لون الوصلة بعد الزيارة : أزرق
لون الوصلة عند الضغط عليها : أصفرالأوامر التي تتبع بنية الصفحة
هناك عدة أوامر أخرى ….. تستطيع إدراجها بعد إستخدام بنية الصفحة أو BODY ولذلك سوف نقوم بتصنيفها حسب الأهمية :
أولاً : الأمر لإنشاء وصلة في الصفحة : Site Name
يمكنك إستبدال الكلمتين AnySite و Site Name بعنوان الموقع وإسم الموقع الذي تود إنشاء وصلة له …. مثال على ذلك :
وهكذا سوف يظهر لك شكل الوصلة بهذه الطريقة : Majalisna WebSite
ثانياً : الأمر لإدراج صورة في الصفحة :
في الأمر أعلاه إستبدل بكل من :
ImageURL : العنوان الكامل أو الوصلة الكاملة للصورة .
Size : حجم الإطار في الصورة ….. يمكنك إضافة العدد صفر (0) لإخفاء الإطار أو إضافة أي عدد بين 1 إلى 10 أو حتى أكثر .Your Comment : تعليق بسيط يظهر عادة عندما يكون مؤشر الماوس على الصورة ……
أوامر مساعدة أخرى
هنالك اوامر تسهل لك وضع عنوان بحجم خط معين ومنها
…
لعنوان خطه وسط
…
لعنوان خطه كبير
…
لعنوان خطه أكبر
الأمر :
هذا الامر مفيد جدا وهو أمر انهاء السطر وهو لا يحتاج لأمر اغلاق ويكون الامر هذا في نهاية السطر
الأمر : …
اذا كنت تريد ان يكون الخط عريض فيمكنك ذلك من خلال هذا الامر البسيط
الأمر : …
هذا الأمر جعل الخط مائل
الأمر : …
أمر مفيد لتحدد مكان الوسط لأي كائن ما
الأمر : …
أمر تسطير الخط
الأمر : …
هذا الأمر يستخدم لكي تنشئ هامش في صفحة الويب
الأمر :
لوضع خط فاصل في الصفحة كهذا——————————————————————————–
هذا الامر ينشأ لك هدف فإذا كانت صفحتك طويلة يمكنك تعيين هدف (أو فهرس) معين ولصنع هدف تحتاج إلى أمرين
1-وضع الهدف المراد الوصول اليه
مثال
2-وضع رابط الى هذا الهدف وتضع اسم الهدف وتضع علامة # قبله
مثال
هذه هي الأوامر الأساسية في لغة HTML …… والآن سوف نقوم بتوضيح كيفية إنشاء ملف HTML على برنامج الكتابة العادية NotePad
هذه هي الخطوات :
1. إذهب إلى Start ومن ثم Run ….
2. إكتب في سطر الأوامر إسم البرنامج NotePad
3. سوف تفتح لك نافذه للبرنامج وتلقائياً سوف يكون إسم الملف Untitled
4. يمكنك الآن كتابة لغة HTML في هذا البرنامج …. وسوف نقوم بمساعدتك في إدراج نص بسيط ليسهل فهمة .. قم بإلصاق نص الأوامر للغة HTML في برنامج Notepad :
الدرس الأول في إنشاء الصفحات
بسم الله الرحمن الرحيم
هذا مثال مفيد جدا للذين يريدون ان يتعلموا لغة الهتمل
تستطيع تسطير خط ما هكذا
وتستطيع ان تميل خط ما هكذا
وتستطيع كتابة موضوع كهامشانها طريقة سهلة في التحكم في الصفحة عن طريق هذه اللغة البسيطة
5. بعد أن تقوم بإلصاق نص الأوامر أعلاه ….. إذهب إلى File ومن ثم Save … سوف تظهر لك نافذة صغيرة تستطيع تحديد إسم الملف ومكان تخزينة ….. إكتب في خانة File Name هذا الإسم test.html …. ثم قم بحفظ الملف في ملجد تستطيع الذهاب إليه بسهوله …. مثلاً My Documents…..
إنتهينا ……. يمكنك الذهاب إلى المجلد الذي تم حفظ الملف به …. سوف تلاحظ بأن أيقونة الملف تحمل نفس الشكل الذي يحمله أيقونة المتصفح الذي تستخدمه …. بعد ذلك قم بالضغط على الملف ضغطه مزدوجه …… بعدها سوف ترى الصفحة في متصفحك ….. وبالطريقة التي تودها أن تظهر ….. مع ملاحظة بأنك تستطيع فتح ذلك الملف مره أخرى وإضافة أو تعديل ما تشاء فيه … وحفظه مره أخرى ……
سوف نتوقف في هذه المرحلة من تعلم لغة HTML للمبتدئين …… وفي المرحلة القادمة سوف أقوم بطرح كيفية عمل الأوامر التالية :
1. إنشاء الجداول .
2. النصوص المتحركة .
3. إضافة مؤثرات صوتية .إذا كان لديكم أي إستفسار حول هذا الموضوع …… أتمنى أن تطرحه هنا ……
تحياتي لكم
بدر الندابي13 مارس، 2002 الساعة 5:06 م #363307أبوسيـــــــافمشاركأخى العزيز الندابي …شكرا جزيلا على هذا الايضاح عن لغه html والحقيقه جيت في وقتك لأنى كنت اريد اسالك في هذى اللغه والحمدالله على كل حال لأنه هذا الفصل يدرسونا في لغه html وعدة لغات..وهناك استفسار لو سمحت ..كما تعلم هذا هو الفصل الاخير لى وطبعا فيه مشروع تخرج لنا والمشروع عباره عن التجاره الاكترونيه ..وقد طلب منا تصميم صفحه نقوم فيها بالاعلان عن المنتجات والبضائع ونستخدم فيها عده لغات منها html ولغه VBScript ولغه JavaScript …فهل ممكن بعد ماتنتهى من لغه html بأن توضح لنا لغه JavaScript لأنى اجهل هذى اللغه تماما …فالرجاء مساعدتى في مشروع التخرج وجزاك الله ألف خير…تحياتي لك اخوك ابوسياف
15 مارس، 2002 الساعة 10:12 ص #363487alnadabiمدير عامالأخ أبوسياف ….
تحية طيبة وبعد …
إن شاء الله سوف أحاول بقدر إستطاعتي أن أوفر لك نبذة شاملة عن هذه اللغة وكذلك لغة الجافا
كما أتمنى لك التوفيق في دراستك
تحياتي
بدر13 يوليو، 2009 الساعة 11:17 ص #1303650بلسم الروحمشاركإنشاء قائمة