شرح عملي لكيفية استخدام العناصر الأساسية في HTML (العناوين والباراجراف)
أهلاً بيكم يا شباب! يا رب تكونوا بخير. في الدروس اللي فاتت، اتعلمنا إزاي
نكتب عناصر العناوين من h1 لحد
h6، واتعلمنا كمان عنصر الفقرة أو البراجراف
<p>. لكن لسه في نقطة مهمة جدًا وهي:
إمتى نستخدمهم وبيفيدونا في إيه؟
الهدف من الكورس بتاعنا مش إننا بس نتعلم الأكواد، لكن نعرف نستخدمها عملي في موقع حقيقي. علشان كده، النهارده هنشتغل على تطبيق بسيط نوضح فيه استخدامات العناوين والباراجراف من خلال صفحة HTML بسيطة فيها عنوان رئيسي، شوية أقسام، وكل قسم فيه عنوان فرعي ونص توضيحي.
إعداد بيئة العمل
أول خطوة هنعملها هي إننا نفتح محرر الأكواد اللي بنشتغل عليه. أنا شخصيًا بستخدم Visual Studio Code.
خطوات فتح المشروع:
-
افتح البرنامج.
-
من قائمة File اختار Open Folder.
-
اختار مكان مناسب على جهازك. يفضل مكان بعيد عن سطح المكتب، زي مثلًا بارتشن E أو D.
-
أنشئ مجلد جديد وسميه مثلًا
generzen(بالحروف الإنجليزية وبدون مسافات). -
افتح المجلد من داخل البرنامج واضغط على Select Folder.
إنشاء ملف HTML جديد
-
بعد ما تفتح المجلد، اضغط على أيقونة New File أو كليك يمين واختار New File.
-
سمي الملف
index.htmlواضغط Enter.
كتابة الهيكل الأساسي للصفحة
ابدأ بكتابة اختصار ! واضغط Enter علشان يضيف لك هيكل
صفحة HTML تلقائي.
غير اسم الصفحة من <title>
إلى اسم المشروع بتاعك، وليكن مثلًا generzen.
كتابة محتوى الصفحة
العنوان الرئيسي للموقع
اكتب داخل الـ <body>:
<h1>generzen</h1>
وده العنوان الرئيسي للموقع، وبنستخدم دايمًا h1 مرة
واحدة بس في الصفحة لمحركات البحث.
الأقسام الرئيسية
هنضيف قسمين رئيسيين باستخدام h2:
<h2>HTML</h2>
<h2>CSS</h2>عناصر فرعية داخل قسم HTML
تحت قسم HTML، هنضيف عنصرين فرعيين باستخدام h3:
<h3>Head</h3>
<h3>Body</h3>محتوى داخلي لكل قسم
داخل قسم Head:
-
تعريف بسيط:
<p>Lorem ipsum dolor sit amet consectetur.</p>-
عنصر إضافي تحت قسم Head:
<h4>Links</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>داخل قسم Body:
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quidem.</p>داخل قسم CSS:
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et.</p>تنسيقات إضافية
فصل العناصر بخط أفقي
استخدم الوسم <hr> للفصل بين العناصر:
<hr>إضافة مسافات رأسية
لو حبيت تزود مسافة بسيطة:
<br>الشكل النهائي للصفحة
هيبقى عندنا:
-
عنوان رئيسي
h1: اسم الموقع. -
قسمين رئيسيين
h2: HTML وCSS. -
القسم HTML فيه عنصرين فرعيين
h3: Head وBody.-
Head فيه تعريف (
p) وقسم فرعيh4اسمه Links وتحته باراجراف. -
Body فيه باراجراف بس.
-
-
قسم CSS فيه باراجراف مباشر.
ملاحظات مهمة
-
العنوان الرئيسي دايمًا يكون
h1ومرة واحدة بس. -
العناوين الفرعية بنستخدم فيها
h2،h3،h4حسب ترتيب الأهمية. -
كل عنصر مكتوب لازم يكون جواه
<body>. -
كل ما تنزل في الترتيب من h1 لـ h6، بتقل الأهمية البصرية والمنطقية للعناصر.
الخلاصة
الدرس ده كان تطبيق عملي بسيط جدًا لفهم طريقة استخدام عناصر العناوين والنصوص في HTML، وده بيساعدنا نفهم إزاي نبني هيكل منطقي وواضح لأي موقع ويب.
أتمنى تكونوا استفدتوا من شرح النهارده، وأشوفكم في الفيديو الجاي بإذن الله.