بسم الله الرحمن الرحيم
سيكون موضوعنا لهذا الدرس عن HTML وسنتحدث عن كل ما يتعلق بهذه اللغة وما عملها في المواقع وكيفية كتابة الشفرات البرمجية الخاصة بها.
تعريف HTML :
في البداية هي إختصار لجملة (Hyper Text Markup Language ) أي لغة وصف صفحات الويب وهي أهم لغة وأبسط لغات صفحات الويب حيث تعتبر لقة لوصف صفحات الويب حيث تقوم بترجمة صفحات الويب وعرضها على المتصفح وتعتبر هذه اللغة من لغات الترميز.
إنشاء صفحة ويب:
سوف نقوم سوياً بـتصميم اول صفحة ويب و أول موقع ويب في هذه الدورة ولعمل ذلك نتبع التالي:
قم بإنشاء مجلد خاص على سطج المكتب وسمية بأي إسم وليكن (myweb) نقوم بفتح المجلد ثم نضغط بزر اليمين للفارة ثم نختار "جديد" ثم "مستند نص".
نضع إسم معين للمستند مثلاً (myfirstweb) أو أي إسم تريده نقوم بفتح المستند ونكتب التالي:
بعد الإنتهاء من ذلك وكتابة الشفرة البرمجية أو الكود البرمجي نقوم بالخطوة التالية وهي الاهم وهو طريقة حفظ المستند وتحويلة إلى صفحة نت شاهد الصورة التالية:
و أسفل إسم الملف الذي تم إنشائة مكتوب بالانجليزية حفظ نوع الملف نضغط عليها ثم نختار جميع الملفات أو All Files ثم ننتقل إلى إسم الملف بدل أن يكون نهاية الملف txt نحولة إلى html وسيكون شكل الملف كتالي myfirstwrb.html بعد الحفظ سترى أن شكل الملف قد تغير من مستند إلى شكل صفحة ويب كما سترى في الصورة التالية:
الان هذه هي اول خطوة لإنشائك أول صفحة لك وعند النقر على صفحتك ستجد ما ستشاهدة في الصورة الاتية:
بامكانك تغير النص الذي انشأتة بتغير اسمك او اي شي تريد ضهورة في الصفحة
My first parograph او my first heading جرب ذلك وسترى النتائج.
علامات الترميز:
بعد أن رأينا المثال السابق نأتي الأن لشرح ما تم عملة سابقاً:
تعمل لغة HTML بلفة الترميز وهناك تسمية أخرى ب (html tag) حيث تحتوي هذه العلامات على اوامر الـhtml سواء كان هذا الامر لكتابة نص معين أو إظهار صورة أو امر تعيين حجم النص او التحكم بشكل الصفحة...إلخ.
هناك نوعين من ترميزات صفحة الويب (ترميزات المحتويات و ترميزات الهيكل) حيث يجب على ترميزات الهيكل أن تكون متواجدة في الكود البرمجي لصفحة وإلا لن تعمل الصفحة لأنها تخبر المتصفح بأن الملف هو صفحة ويب وهذه الترميزات مثل (<html></html> وايضاً <body></body> )
ترميزات المحتوى: هذه الترميزات تعطي اوامر لسيرفر او المتصفح بعمل شي معين إما نص أو صورة او اي شي آخر حسب برمجة المبرمج.
شاهد الصورة التالية توضح ذلك:
الشكل الرئيسي لهذه العلامات أو الـtags :
1-بداية الأمر. 2- نهاية الامر وفي وسط علامة او أمر الترميز يكون المحتوى الذي سيتم تطبيق الامر علية.
<tagname>المحتوى</tagname>.
في السطر السابق هو الشكل العام لاوامر html ونعني ب tagname أي إسم الامر او الترميز المطلوب تنفيذة...
المحتوى الفراغ الموجود في وسط المثال لشكل العام الذي سنطبق علية امر الترميز سواء كان نصاً او صورة او غيرها.
</tagname>: هنا ينتهي امر الترميز ويسمى (end tag) ويشبة الاول لكن هنا تم إضافة علامة سلاش / وهي التي تميز علامة ترميز النهاية من علامة ترميز البداية.
في المثال السابق استخدمنا علامة الترميز <html> بدانا في بداية الملف الذي أنشاناه وكتبنا هذا الرمز ويشترط لأي ملف أو صفحة ويب في لغة HTML أن يبدا بهذا الرمز لانه كما قلنا انه من الانواع الهيكل التي يجب ان تتواجد في صفحة الويب.
أيضاً ريانا رمز <body> وهذا الرمز يشير إلى احد أهم عناصر ضفحة الويب ضمن هيكل الملف حيث يحتوي بداخله جميع محتويات الموقع او الصفحة:
في المثال السابق استخدمنا علامة الترميز <html> بدانا في بداية الملف الذي أنشاناه وكتبنا هذا الرمز ويشترط لأي ملف أو صفحة ويب في لغة HTML أن يبدا بهذا الرمز لانه كما قلنا انه من الانواع الهيكل التي يجب ان تتواجد في صفحة الويب.
أيضاً ريانا رمز <body> وهذا الرمز يشير إلى احد أهم عناصر ضفحة الويب ضمن هيكل الملف حيث يحتوي بداخله جميع محتويات الموقع او الصفحة:
ننتقل الان إلى ترميزات المحتوى للصفحة وسوف نأخذ امثلة على هذه الترميزات كلا منها يدل على أمر معين:
<p> النص </p>
حرف الـp الموجود داخل الترميز هو إختصار لكلمة paragraph والتي تعني نص إذاً عندما نريد عمل نص داخل الصفحة نستخدم هذا الترميزسوف نقوم بالمثال الاتي:
</p> هذا شرح عن رموز لغة HTML لتصميم المواقع<p>
مثال آخر:
<img><img/>
img هيإختصار كلمة image والتي تعني صورة لذلك نستخدم هذا الترميز لإضافة صورة داخل صفحة الويب.
سوف نتطرق إلى عناصر ترميز اكثر في شروحات القادمة.
ملاحظة:
لا يوجد فرق في كتابة حروف اوامر الـHTML بالحروف الكابتل او الصغيره فهي لغة غير حساسة لحالة الاحرف.