الدرس الثاني: أساسيات HTML – ابدأ ببناء أول صفحة ويب

الدرس الثاني: أساسيات HTML – ابدأ ببناء أول صفحة ويب ✨

العنوان:

خطوتك الأولى مع HTML – لغة هيكلة صفحات الويب

المقدمة:

HTML (HyperText Markup Language) هي اللغة الأساسية لتطوير صفحات الويب. وظيفتها الأساسية إنها توفر الهيكل للموقع، يعني زي ما العمود الفقري هو اللي بيدي للجسم شكله، HTML بتعمل نفس الدور للويب.

في الدرس ده، هنتعرف على أساسيات HTML، وهنكتب أول كود عملي نقدر نشوفه في المتصفح.

ما هي HTML؟

HTML مش لغة برمجة، لكنها لغة توصيفية (Markup Language). بتحدد للمتصفح إزاي يعرض المحتوى على الصفحة باستخدام "وسوم" (Tags).

أهم مكونات HTML:

الوسوم (Tags):
الوسوم هي الطريقة اللي بنستخدمها لوصف عناصر الصفحة. كل عنصر في HTML بيتكون من:
- وسم افتتاحي (Opening Tag).
- محتوى العنصر.
- وسم إغلاق (Closing Tag).
- مثال:
```
<h1>Welcome to HTML</h1>
```
  هنا <h1> هو الوسم الافتتاحي، و</h1> هو الوسم الإغلاق، والمحتوى هو النص بينهما.
العناصر (Elements):
- مجموعة الوسوم مع محتواها بتمثل عنصر.
- مثال: عنصر النص <p> يمثل فقرة.
السمات (Attributes):
- معلومات إضافية بنضيفها للوسوم لتغيير خصائصها.
- مثال:
```
<a href="https://google.com">Visit Google</a>
```
  هنا href هي سمة بتحدد رابط الوجهة.

هيكل صفحة HTML:

أي صفحة HTML لازم يكون ليها هيكل أساسي. الهيكل ده بيشمل:


<!DOCTYPE html>
<html>
  <head>
    <title>My First HTML Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is my first webpage.</p>
  </body>
</html>

شرح الهيكل:

<!DOCTYPE html>:
- تعريف نوع المستند (HTML5).
<html>:
- الوسم الرئيسي اللي بيضم كل عناصر الصفحة.
<head>:
- بيضم معلومات عن الصفحة زي العنوان (title) وبيانات الميتا (meta).
<body>:
- المكان اللي بنحط فيه كل المحتوى اللي هيظهر للمستخدم.

كتابة أول صفحة HTML:

التطبيق العملي:

افتح محرر النصوص (VS Code).

اكتب الكود التالي واحفظ الملف باسم index.html:


<!DOCTYPE html>
<html>
  <head>
    <title>صفحة HTML الأولى</title>
  </head>
  <body>
    <h1>مرحبًا بكم في عالمي!</h1>
    <p>أنا أتعلم HTML وأستمتع بكل لحظة!</p>
  </body>
</html>

افتح الملف في المتصفح وشوف النتيجة.

أهم الوسوم في HTML:

1. وسوم العناوين (Headings):

بنستخدمها لكتابة عناوين بمستويات مختلفة:
```
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
```
ملاحظات:
- <h1> هو الأكبر حجمًا، و<h6> هو الأصغر.

2. وسم الفقرة (Paragraph):

لكتابة نصوص الفقرات:
```
<p>هذه فقرة عادية.</p>
```

3. وسم الرابط (Link):

لإنشاء روابط تشعبية:


<a href="https://example.com">Visit Example</a>

4. وسم الصورة (Image):

لإضافة صور للصفحة:


<img src="path-to-image.jpg" alt="وصف الصورة">

السمات:
- src: مكان الصورة.
- alt: وصف الصورة (يظهر إذا لم تُعرض الصورة).

أفكار للتطبيق العملي:

جرب إضافة صورة ورابط لصفحتك.
استخدم عناوين بمستويات مختلفة وعبّر عن نفسك.
اكتب فقرة توضح فيها هدفك من تعلم البرمجة.

وختامًا:

النهاردة خطينا خطوة كبيرة ببناء أول صفحة ويب باستخدام HTML. في الدرس الجاي، هنضيف لمسة جمالية لصفحتنا باستخدام CSS لتنسيق العناصر وتلوينها. خلي الكود بتاعك جاهز وابقى متحمس! 🎨

تعديل المقال

WiseSyntax

الدرس الثاني: أساسيات HTML – ابدأ ببناء أول صفحة ويب