الويب العربي - مدرسة الويب العربي |HTML| المقدمة إلى HTML

بسم الله الرحمن الرحيم

هذه سلسلة من المواضيع التي سيتم نشرها في مجموعة من المنتديات التطويرية منقولة عن مدرسة الويب العربي التي تترجم دروس الموقع العالمي w3Schools .

------------------------------------

اسم الدرس: المقدمة إلى HTML
وصف الدرس: درس يشرح أساسيات لغة HTML وطريقة كتابتها وكيفية تعامل المتصفح معها مع مثال مشروح.
القسم: HTML

------------------------------------

ما هو ملف HTML ؟

تشير HTML إلى Hyper Text Markup Language و تعني لغة ترميز النص المتشعبة.
ملف HTML هو ملف نصي يحتوي على أوسمة بيانات.
أوسمة البيانات تخبر متصفح الويب كيفية عرض الصفحة.
ملف HTML يجب أن يكون امتداده htm أو html.
ملف HTML يمكن إنشاءه و تحريره بأبسط محررات النصوص.

هل تريد تجربتها ؟
إذا كنت تستخدم نظام التشغيل Windows, قم بتشغيل برنامج Notepad.

إذا كنت تستخدم نظام التشغيل Mac, قم بتشغيل برنامج SimpleText.

إذا كنت تستخدم نظام التشغيل OSX, قم بتشغيل برنامج TextEdit ثم غيّر الإعدادات إلى التالي: افتح قائمة "Format" و اختر "Plain text" بدل من "Rich text", ثم افتح نافذة "Preferences" تحت قائمة "Text Edit" ثم اختر "Ignore rich text commands in HTML files". الخطوات السابقة مهمة جداً وإن لم تقم بها فمن المحتمل أن لا تعمل رموز HTML.

اكتب النص التالي:

كود:

<html>

<head>

<title>عنوان الصفحة</title>

</head>

<body>

هذه صفحتي الأولى. <b>هذا النص عريض</b>

</body>

</html>

قم بحفظ الملف باسم "mypage.html".

قم بعرض الملف عن طريق الضغط عليه مرتين متتاليتين أو عن طريق تشغيل متصفح الويب. من قائمة "ملف" اختر "فتح" (أو "فتح صفحة") سيظهر صندوق حوار. اضغط على "استعراض" (أو "اختر ملف") ثم قم بتحديد مكان ملف HTML الذي قمت بإنشائه - "mypage.html" - و اضغط "فتح". الآن ستشاهد عنوان في صندوق الحوار, على سبيل المثال "C:\My********s\mypage.html". اضغط "موافق", و سيقوم المتصفح بعرض الصفحة.

توضيح المثال
إن الوسم الأول في مستند HTML هو <html>. يخبر هذا الوسم المتصفح بأن هذه بداية مستند HTML. إن الوسم الأخير في مستند HTML هو </html>. يخبر هذا الوسم المتصفح بأن هذه هي نهاية مستند HTML.

إن النص بين وسم <head> و وسم </head> هو معلومات رأس الصفحة. معلومات رأس الصفحة لا يتم عرضها في نافذة المتصفح.

إن النص بين وسمي <title> هو عنوان المستند (الصفحة). العنوان يتم عرضه على إطار المتصفح.

إن النص بين وسمي <body> هو النص الذي سيتم عرضه في المتصفح .

إن النص بين وسمي <b> و </b> يتم عرضه على شكل نص عريض.

الامتداد HTML أو HTM ؟
عند القيام بحفظ ملف HTML, يمكن استخدام الامتداد htm أو html.

عندما تريد حفظ ملف HTML, يمكن أن تستخدم الامتداد .htm أو .html . استخدمنا الامتداد html في أمثلتنا. قد يكون استخدام الامتداد htm عادة سيئة ورثت من الماضي عندما كانت بعض البرامج المستخدمة عموماً لا تقبل امتداد أكثر من ثلاثة أحرف.

بالبرامج الأحدث نعتقد أنه من الأفضل استخدام الامتداد .html.

ملاحظة على برامج تحرير HTML :
يمكن أن تحرر ملف HTML بسهولة باستخدام محرر WYSIWYG (ما تراه هو ما تحصل عليه) مثل FrontPage, Claris Home Page, Adobe PageMill بدلاً من أن تكتب أوسمة البيانات في ملف نص عادي.

لكن إذا كنت تريد أن تصبح مطوّر ويب محترف, نوصي بقوة بأن تستخدم محرر نص عادي لتتعلم مبادئ قراءة HTML.

الأسئلة المتكررة
س: بعد ما قُمت بتحرير ملف HTML , لم أستطع مشاهدة النتيجة في متصفحي. لماذا؟
ج: تأكد بأنك قمت بحفظ الملف مع اسم و امتداد صحيحين مثل "c:\mypage.html". تأكد أيضاً بأنك تستخدم نفس الاسم عندما تفتح الملف في متصفحك.

س: حاولت تحرير ملف HTML لكن التغييرات لا تُشاهد في المتصفح. لماذا؟
ج: يحتفظ المتصفح بنسخ مخبأة من صفحاتك لذلك لن يقوم بقراءة الصفحة مرتين. عندما تقوم بعمل تغيرات على الصفحة فإن المتصفح لا يعلم بذلك, استخدم زر تحديث/إعادة تحميل لإجبار المتصفح على قراءة الصفحة مرة أخرى.

س: ما هو المتصفح الذي يجب استخدامه؟
ج: يمكنك أن تقوم بتطبيق كل التدريبات و الدروس عن طريق أغلب المتصفحات الشائعة, مثل Internet Explorer, Mozilla, Netscape, أو Opera. على أي حال, البعض من أمثلتنا المتقدمة تتطلب آخر إصدارات المتصفحات.

س: هل على حاسوبي أن يعمل على نظام Windows? ماذا عن Mac؟
ج: تستطيع أن تعمل كل التدريبات على حاسوب يعمل على نظام غير Windows مثل Mac.

المصدر الإنجليزي : W3Schools
تم الترجمة بواسطة: مدرسة الويب العربي

مدرسة الويب العربي