مقدمة إلى HTML:-
- يمكنك نشر المستندات عبر الإنترنت مع النصوص والصور والقوائم والجداول، إلخ.
- يمكنك الوصول إلى موارد الويب مثل الصور ومقاطع الفيديو أو مستندات HTML الأخرى عبر الارتباطات التشعّبية.
- يمكنك إنشاء نماذج لجمع البيانات من المستخدم مثل الاسم وعنوان البريد الإلكتروني والتعليقات وما إلى ذلك.
- يمكنك تضمين الصور ومقاطع الفيديو ومقاطع الصوت والتطبيقات ومستندات HTML الأخرى مباشرةً داخل مستند HTML.
- يمكنك إنشاء نسخة غير متصلة Offline لموقع الويب الخاص بك، والتي تعمل بدون اتصال بالإنترنت.
- يمكنك تخزين البيانات في متصفح الويب الخاص بالمستخدم والوصول إليها لاحقاً.
- يمكنك العثور على الموقع الحالي لزائر موقع الويب الخاص بك. لا تنتهي القائمة هنا، فهناك العديد من الأشياء الأخرى المثيرة للاهتمام التي يمكنك القيام بها باستخدام لغة HTML، وسوف تتعلم كل واحدة منها بالتفصيل في الفصول القادمة.
البداية باستخدام HTML:-
ملف HTML هو ببساطة ملف نصّي يتم حفظه بلاحقة .html أو .htm .
البدء باستخدام HTML
ستتعلّم في هذا الدليل التعليمي مدى سهولة إنشاء مستند HTML أو صفحة ويب، لبدء كتابة الأكواد البرمجية بلغة HTML، تحتاج فقط إلى أمرين: محرر نص بسيط ومتصفح ويب. حسناً، لنبدأ بإنشاء أول صفحة HTML.
إنشاء مستند HTML الأول الخاص بك:
دعنا نسير عبر الخطوات التالية، وفي نهاية هذا الدليل التعليمي سيكون لديك ملف HTML يعرض رسالة "Hello World" في متصفح الويب الخاص بك.
الخطوة 1: إنشاء ملف HTML
افتح محرر النص العادي للكمبيوتر الخاص بك وقم بإنشاء ملف جديد.
إرشاد: نقترح عليك استخدام تطبيق المفكرة Notepad (على أجهزة ويندوز Windows) أو تطبيق TextEdit (على أجهزة ماك Mac) أو بعض برامج تحرير النصوص البسيطة الأخرى للقيام بذلك، لا تستخدم تطبيق Word أو الدفتر WordPad! بمجرد فهم المبادئ الأساسية، يمكنك التبديل إلى أدوات أكثر تقدماً مثل Adobe Dreamweaver.
الخطوة 2: كتابة بعض تعليمات HTML البرمجية
ابدأ مع نافذة فارغة واكتب الكود التالي:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A simple HTML document</title>
</head>
<body>
<p>Hello World!<p>
</body>
</html>الخطوة 3: حفظ الملف
الآن احفظ الملف على سطح المكتب باسم "myfirstpage.html".
لفتح الملف في المتصفح، انتقل إلى الملف الخاص بك ثم انقر عليه مرتين، سيتم فتحه في متصفح الويب الافتراضي الخاص بك، إذا لم يحدث ذلك افتح المستعرض واسحب الملف إليه.
شرح الكود
قد تفكر في معنى الكود البرمجي السابق، حسناً دعنا نكتشف ذلك.
السطر الأول <!DOCTYPE html> هو إعلان نوع المستند، والذي يرشد متصفح الويب أن هذا المستند هو مستند HTML5، وهو غير حساس لحالة الأحرف في حال تم الكتابة بأحرف صغيرة أو كبيرة.
يمثل العنصر <head> حاوية للوسوم التي توفر معلومات حول المستند، على سبيل المثال يحدد الوسم <title> عنوان المستند.
يحتوي العنصر <body> على المحتوى الفعلي للمستند (الفقرات والروابط والصور والجداول وما إلى ذلك) الذي يتم عرضه في مستعرض الويب وعرضه للمستخدم.
إرشاد: تشكّل الوسوم <html> و <head> و<body> الهيكل الأساسي لكل صفحة ويب، المحتوى داخل </head> و <head> غير مرئي للمستخدمين باستثناء أمر واحد: النص بين وسمي </title> و <title> والذي يظهر كعنوان في علامة تبويب المتصفح.
وسوم وعناصر لغة HTML
يتم كتابة لغة HTML على شكل عناصر HTML تتكون من وسوم الترميز، وسوم الترميز هذه هي السمة الأساسية للغة HTML، يتكون كل وسم ترميز من كلمة أساسية محاطة بأقواس زاوية، مثل <html> و <head> و <body> و<title> و <p> وما إلى ذلك.
عادةً ما تأتي وسوم HTML في أزواج مثل <html> و <html/> وغالباً ما يسمى الوسم الأول في زوج ما بوسم الفتح (أو وسم البداية)، ويسمى الوسم الثاني بوسم الإغلاق (أو وسم النهاية).
هنالك تطابق بين وسم الفتح ووسم الإغلاق، باستثناء وجود خط مائل (/) بعد قوس الزاوية الأول لوسم الإغلاق، وذلك لإعلام المستعرض بأن الأمر قد اكتمل.
بين وسمي البداية والنهاية، يمكنك وضع المحتويات المناسبة، على سبيل المثال تتم كتابة فقرة ما والتي يتم تمثيلها بواسطة العنصر p على النحو التالي:
<!DOCTYPE html>
<html lang="en">
<head>
<title>A simple HTML document</title>
</head>
<body>
<p>This is a paragraph.</p>
<!-- Paragraph with nested element -->
<p>
This is <b>another</b> paragraph.
</p>
</body>
</html><><>
العناصر Elements
في هذا الدليل التعليمي سوف تتعلّم حول وسوم وعناصر لغة HTML.
صياغة عنصر HTML:
عنصر HTML هو مكون فردي لمستند HTML وهو يمثل دلالات أو معنى، على سبيل المثال يمثل عنصر title عنوان المستند.
تتم كتابة معظم عناصر HTML مع وسم البداية (أو وسم الفتح) و وسم النهاية (أو وسم الإغلاق) مع وجود محتوى بين الوسمين، يمكن أن تحتوي العناصر أيضاً على خاصيات تحدد خصائصها الإضافية، على سبيل المثال سيتم كتابة فقرة يتم تمثيلها بواسطة العنصر p على النحو التالي:
وسوم HTML مقابل عناصر HTML:
تقنياً، فإن عنصر HTML هو المجموعة المكوّنة من وسم البداية والخاصيات التابعة له ووسم النهاية وكل شيء بينهما، من ناحية أخرى يتم استخدام وسم HTML (سواء كان بداية أو نهاية) لتمييز بداية أو نهاية عنصر ما كما ترون في الصورة التوضيحية أعلاه.
ومع ذلك، في الاستخدام الشائع فإن مصطلحي عنصر HTML و وسم HTML قابلان للتبادل، أي أن الوسم هو عنصر يمثل وسم، من أجل البساطة في موقع الويب هذا، يتم استخدام مصطلحي "الوسم" و "العنصر" للإشارة إلى نفس الشيء - حيث إنه سيحدد شيئاً ما على صفحة الويب الخاصة بك.
الحساسية لحالة الأحرف في الوسوم والخاصيات في لغة HTML:
في لغة HTML، ليست أسماء الوسوم والخاصيات حساسة لحالة الأحرف (ولكن معظم قيم الخاصيات حساسة لحالة الأحرف)، أي أن الوسم <P> والوسم <p> يمثلان نفس الشيء في HTML وهو الفقرة. لكن في XHTML يكون هناك حساسية لحالة الأحرف، والوسم <P> مختلف عن الوسم <p>.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Case Insensitivity in HTML</title>
</head>
<body>
<p>This is a paragraph.</p>
<P>This is also a valid paragraph.</P>
</body>
</html>
إرشاد: نوصي باستخدام أحرف صغيرة للوسوم وأسماء الخاصيات في HTML، حيث يمكنك من خلال القيام بذلك جعل المستند الخاص بك أكثر توافقاً مع الترقيات المستقبلية.
<><>
الخاصيات Attributes
في هذا الدليل التعليمي ستتعلم كيفية استخدام الخاصيات لإعطاء معنى أكبر لوسوم HTML.
ما هي الخاصيات؟
تحدد الخاصيات الخصائص أو الميزات الإضافية للعنصر مثل عرض الصورة وارتفاعها، يتم تحديد الخاصيات دائماً في وسم البداية (أو وسم الفتح) وعادةً ما تتكون من ثنائيات الاسم والقيمة مثل اسم = "قيمة" أو name = "value" كما ويجب دائماً إحاطة قيم الخاصيات بعلامات اقتباس.
أيضاً، بعض الخاصيات تكون مطلوبة لعناصر معينة، على سبيل المثال يجب أن يحتوي الوسم <img> على الخاصيتين src و alt، دعنا نلقي نظرة على بعض الأمثلة على استخدامات الخاصيات: