البداية مع HTML

انشأ أول صفحة HTML

لانشاء ملف HTML يعرض رسالة "Hello world" في متصفح الويب، دعنا نتبع الخطوات التالية :

الخطوة الأولى : إنشاء ملف HTML

قم بفتح محرر نصوص عادي على جهاز الكمبيوتر الخاص بك و قم بإنشاء ملف جديد

نصيحة:

نقترح عليك استخدام Notepad (في Windows) أو TextEdit (على Mac) أو اي برنامج تحرير نصوص بسيط آخر للقيام بذلك.

الخطوة الثانية : كتابة بعض اكواد HTML

ابدأ مع نافذة فارغة واكتب الكود التالي:

مثال
تشغيل
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Page Title</title>
  5. </head>
  6. <body>
  7. <p>Hello World!</p>
  8. </body>
  9. </html>

الخطوة الثالثة : حفظ الملف HTML

الآن احفظ الملف على سطح المكتب باسم "myfirstpage.html"

ملاحظة:

من المهم تحديد الامتداد .html - بعض برامج تحرير النصوص ، مثل notepad ، ستحفظه تلقائيًا بإمتداد .txt

لفتح الملف في متصفح الويب انتقل إلى الملف الخاص بك ثم انقر مرتين عليه. سيتم فتحه في متصفح الويب الافتراضي الخاص بك. إذا لم يحدث ذلك ، افتح المتصفح واسحب الملف إليه.

شرح الكود

السطر الأول <!DOCTYPE html> هو إعلان نوع الصفحة. يرشد متصفح الويب أن هذه الصفحة هو صفحة HTML5
العنصر <head>هو حاوية للوسوم التي توفر معلومات حول الصفحة ، على سبيل المثال ، يحدد الوسم <title> عنوان الصفحة.
يحتوي العنصر <body> على المحتوى الفعلي للصفحة الويب (الفقرات والارتباطات والصور والجداول وما إلى ذلك) الذي يتم عرضه في متصفح الويب وعرضه على المستخدم.

سوف تتعرف على عناصر HTML المختلفة بالتفصيل لاحقا. في الوقت الحالي ، ركز فقط على البنية الأساسية لصفحة HTML.

ملاحظة:

يظهر إعلان DOCTYPE في أعلى صفحة الويب قبل جميع العناصر الأخرى ؛ ومع ذلك ، فإن إعلان doctype نفسه ليس وسم HTML.
تتطلب كل صفحة HTML إعلان نوع الصفحة لضمان عرض صفحاتك بشكل صحيح في متصفحات الويب المختلفة.

نصيحة:

تشكل الوسوم <html> و <head> و <body> الهيكل الأساسي لكل صفحة ويب. المحتوى داخل <head> و </head> غير مرئي للمستخدمين باستثناء عنصر واحد: النص بين وسمّي <title> و </title> والذي يظهر كعنوان في علامة تبويب المتصفح.

الوسوم (Tags) والعناصر (Elements)

يتم كتابة كود HTML في شكل عناصرElements HTML تتكون من الوسوم Tags. الوسوم هي السمة الأساسية لـ HTML. تتكون كل الوسوم من كلمة أساسية ، محاطة بأقواس زاوية ، مثل <html> و <head> و <body> و <title> و <p> وما إلى ذلك.
تأتي وسوم HTML عادةً في أزواج مثل <html> و </html>. غالبًا ما يطلق على الوسم الأول في الزوج ما وسم الفتح (أو وسم البدء) < > ، ويسمي الوسم الثاني وسم الإغلاق (أو وسم النهاية) </>.
يتشابه وسم الفتح ووسم الإغلاق ، باستثناء شرطة مائلة / بعد قوس زاوية فتح وسم الإغلاق ، لإعلام المتصفح بأن الأمر قد اكتمل.
بين وسمي البداية والنهاية يمكنك وضع المحتويات المناسبة. على سبيل المثال ، سيتم كتابة فقرة ، يتم تمثيلها بواسطة العنصر p ، على النحو التالي :

مثال
تشغيل
  1. <p>This is a paragraph.</p>
  2. <!-- Paragraph with nested element -->
  3. <p>This is <b>another</b> paragraph.</p>
« التالي السابق »