اساسيات لغة HTML شرح دروس الحاسوب
ما لغة Language Markup Text Hyper (HTM؟
HTML هي لغة الترميز القياسية المستخدمة في انشاء صفحةويب Page Web أو مجموعة صفحات موقع ويب Site Web إذ تعد لغة HTML من اقدم اللغات واوسعها انتشارا في وصف النصوص و الصور وغيرها من محتويات صفحات الويب التي يعرضها متصفح الإنترنت على شاشة المستخدم.
هيكلية HTML:
يعتمد بناء التعليمات البرمجية Codes في لغة HTML على الوسوم التي تصف محتوى معين في صفحة الويب. يُستخدم الوسم بشكل منفرد او على شكل زوج من الوسوم احدهما للبداية >Tag> يُحاط بعلامة الأكبر وعلامة الأصغر ووسم آخر للنهاية >/Tag>
مع وجود الخط المائل المعروف بـ Slash.
مثالــــــــــ:
عندما نريد اظهار عبارة (السلام عليكم) بخط عريض Bold في صفحة الويب التي ننشئها فاننا نحتاج إلى كتابة العبارة داخل زوج الوسوم الخاصة بذلك.
يمكن تقسيم هيكلHTML على ثالث مناطق :
1. منطقة <html> هي بمثابة إطار يحيط بجميع الوسوم المستخدمة في مستند HTML ].
< html>
<head>
.........
<head>
<head>
.........
<head>
<\btml>
2. منطقة رأس الصفحة >head>
تضم عنوان الصفحة Title Page
ومعلومات لاتعرض في صفحة الويب
مثلاً مختصر عن محتويات الصفحة
واسم الجهة الناشرة.
3. منطقة جسم الصفحة <body >تضم
المحتويات كافة التي تظهر في متصفح
الإنترنت عندما نعرض الصفحة.
كيفية إنشاء وحفظ مستند HTML؟
يوجد العديد من محررات النصوص التي
يمكن استخدامها في انشاء مستندات HTMLوحفظها. إذ يستخدم برنامج محرر النصوص Notepad الذي يوفره نظام التشغيل Windows عن طريق البحث عن اسمه في ايقونة البحث ، وعند فتح المحرر ستظهر الواجهة الرئيسة له، بعدها نتبع الخطوات الآتية لحفظ مستند HTML فارغ:
1 -نختار القائمة File.
2 -نختار الأمر As Save.
3 -نكتب في حقل Name File اسما للمستند مع تحديد الامتداد html.
4 -من الحقل As Save نختار (*.*) Files All.
5 -من الحقل Encoding نختار 8-UTF لكي يتم دعم حروف ورموز اللغة العربية.
6 -اختيار الأمر Save لحفظ المستند.
تعديل مستند HTML
عند النقر المزدوج على مستند HTML الذي أُنشئ في الخطوات السابقة، يستَعرض بواسطة احد برامج متصفحات الإنترنت المتوفرة في الحاسوب مثل Chrome Google وليس بواسطة محرر النصوص Notepad وبهذه الطريقة فلن نتمكن من اجراء اي تعديل. وعليه نحتاج إلى فتح مستند HTML بواسطة محرر النصوص عبر الخطوات الآتية :
1 -النقر بالزر الأيمن للفأرة على مستند HTML.
2 -اختيار With Open.
3 -اختيار Notepad.
وبذلك يفتح مستند HTML الذي يمكن التعديل عليه ومن ثم إجراء الحفظ Save قبل الإغلاق .
كيف يمكن انشاء صفحة ويب؟
صفحة الويب عبارة عن مستند Document مكتوب بلغة HTML
يمكن الوصول اليه واستعراض محتوياته بواسطة متصفح الانترنت .
لإنشاء صفحة ويب تحتوي في عنوانها على عبارة صفحتي الخاصة وتضم في المحتوى عبارة انا اكتب اول صفحة ويب سنستخدم محرر النصوص لكتابة مستند الصفحة ثم نحفظه بصيغة html
نشاط
كيف أميز بين حفظ وتعديل مستندHTML؟
1 - أُنشئ مستند HTML ً فارغا بواسطة محرر النصوص وأحفظه باسم محدد.
2 - أفتح المستند بواسطة متصفح الإنترنت .
3 - أحاول إضافة عبـارة السالم عليكم( إلى صفحة الويب المعروضة، هل هذا ممكن؟
4-أعاود فتح المستند بواسطة محرر النصوص أُضيف عبارة السلام عليكم وأ َحفظ التعديل على المستند وأُغلقه.
5 -أفتح المستند بواسطة متصفح الانترنت.
شرح لبعض الوسوم المستخدمة في المثال :
1!<-html DOCTYPE ُ >لتحديد االصدار المستخدم وهو HTML5.
2< -html >لوصف بداية مستند HTML.
3< -rtl= dir body >لوصف بداية جسم الصفحة ولتحديد اتجاه الكتابة ليكون من اليمين إلى اليسار )rtl ،)
مع ملاحظة امكانية جعلها من اليسار إلى اليمين بواسطة الخاصية )ltr.)
4< -h1 >لعرض العنوانات الرئيسة في الصفحة بشكل مميز، مع مالحظة امكانية تغيير حجم الكتابة من الأكبر h1 إلى الأصغر h6
أختبر معلوماتي
1ّ .عر ْف لغة HTML واذكر الفائدة منها.
2 . ً ارسم مخططا يمثل المناطق الرئيسة الثالث في هيكلية HTML مع توضيح لكل منطقة.
3.اُكتب برنامج بلغة HTML إلنشاء صفحة ويب يكون عنوانها اسم مدرستك وتضم في المحتوى العبارات الآتية :
أ- عبارة: الصفوف الدراسية تكون على شكل عنوان رئيس يعرض بشكل مميز.
ب- العبارات الثلاث الآتية : الصف الرابع – الصف الخامس – الصف السادس عرض كل عبارة على سطر جديد
ُ ج - كتابة وصف مختصر عن المدرسة وموقعها وعدد الشعب الموجودة فيها وغيرها من المعلومات.
تفكير ناقد
1.كيف يمكن عمل بعض التعديالت على مستند HTML موجود مسبقا على حاسبتك؟ ناقش إمكانية استرجاع حالة المستند الأصلي قبل التعديل؟
2 .استخدم متصفح اإلنترنت في فتح موقع وزارة التربية العراقية، ثم احفظه على حاسوبك بصيغة مستند HTML ،استخدم أداة البحث (F+Ctrl )للبحث في داخل المستند عن بداية الوسم title ،الآن
كيف يمكن تعديل عنوان الصفحة الرئيسة ليكون عنوان معدل لصفحة الويب.