أساسيات لغه Html

يعني إيه HTML وإزاي نكتب أول كود؟

HTML يعني إيه؟ بالتفصيل يا معلم

بطريقة بسيطة: HTML هيا لغة بتستخدم علامات معينة عشان توصف محتوى صفحة الويب وتحدد هيكلها. زي ما المهندس بيعمل مخطط للبيت قبل ما يتبني، HTML هي المخطط بتاع الصفحة. والمتصفح هو العامل اللي بيبني الصفحة بناءاً على المخطط ده.

طيب، يعني الكود شكله إزاي؟ شكله بيبقى زي ده:

<p>أنا نص عادي جوه فقرة</p>

شايف العلامة <p> في الأول و </p> في الآخر؟ دي اسمها "وسم" أو "tag". الوسم ده معناها "فقرة" أو Paragraph. المتصفح هيعرض اللي جوه بينهم كنص عادي.

وطبعًا في HTML في كذا وسم مختلف لكل حاجة: عناوين، صور، روابط، قوائم، جداول، الخ. لكن النقطة المهمة ان كل وسم بيفتح <اسم الوسم> وبيقفل </اسم الوسم>، والمحتوى بيكون جوههم.

إزاي أبدأ ملف جديد؟ خطوة خطوة

عشان تكتب HTML محتاج أي برنامج يسمح لك تكتب نص. أبسط حاجة عندك: "المفكرة" (Notepad) اللي موجودة في كل كمبيوتر.

لو عايز برنامج احترافي أكتر ومريح، أنصحك تنزل Visual Studio Code (بيختصروه في VS Code). ده برنامج مجاني ومصمم خصيصًا للمبرمجين، وهيسهل حياتك كتير. لكن لو لسة مبتدئ ومش عايز تنزل حاجة جديدة، المفكرة هتعملك المطلوب.

خطوات بدء الملف من الأول:
1. اضغط كليك يمين على أي مكان على الديسكتوب او في الفولدر اللي انت عايزه
2. اختار "New" ثم "Text Document" (مستند نصي)
3. هتلاقي ملف اسمو "New Text Document" او حاجة شبه كده
4. سمي الملف بأي اسم انت عايزه (مثلاً: "أول صفحة")
5. اضغط Enter عشان توافق على الاسم
6. افتح الملف دبل كليك، وهيفتح في المفكرة
7. هتلاقي صفحة بيضا. هنا هتكتب الكود.

ومتقلقش، الكود ده مجرد كلام عادي، مش هيبوظ الكمبيوتر لو غلطت. ومفيش حاجة اسمها "كود خطير" في HTML، فأنت اكتب براحتك من غير خوف.

إزاي أحفظ الملف؟ وخطورة النسيان!

لما تخلص كتابة الكود، لازم تحفظ الملف بامتداد .html. يعني: اسم الملف متبوع بـ .html.

ليه؟ عشان تعرف المتصفح ان ده ملف HTML مش مجرد ملف نصي عادي.

مثال: myfirstpage.html او اول-صفحة.html

لو نسيت تكتب .html، او كتبت extension تاني، المتصفح مش هيفهم ان ده ملف HTML وهيعتبره ملف نص عادي ومش هيعرضه كصفحة ويب. فخلي بالك من النقطة دي!

طريقة الحفظ:
1. في المفكرة، اضغط على File ثم Save As
2. في النافذة اللي هتفتح، اكتب اسم الملف والامتداد .html
3. تحت اسم الملف، تأكد ان نوع الحفظ هو "All Files" مش "Text Documents"
4. اضغط على Save

إزاي أفتح الملف في المتصفح؟ وجربه على طول!

بعد ما حفظت الملف بالامتداد الصحيح، روح على المكان اللي حفظت فيه الملف (على الديسكتوب مثلاً). هتلاقي أيقونة الملف شكلها اختلفت بقت على شكل المتصفح اللي عندك.

اضغط دبل كليك عليه، وهيفتح تلقائيًا في متصفح الإنترنت اللي عندك. فجأة هتشوف اللي كتبته بيظهر كصفحة ويب حقيقية!

لو عايز تغير في الكود، روح غير في الملف في المفكرة وحفظه تاني، بعد كده روح على المتصفح واضغط F5 عشان يحدث الصفحة ويظهرلك التغييرات.

أول كود كامل - دي اساسيات الاساسيات

يلا نكتب أول صفحة كاملة. انسخ الكود ده جوه المفكرة:

<!DOCTYPE html>
<html>
  <head>
    <title>أول صفحة HTML</title>
  </head>
  <body>
    أهلاً بيك! أنا لسه كاتب أول كود HTML في حياتي
  </body>
</html>

خلينا نفكك الكود ده عشان تفهم كل حاجة:

<!DOCTYPE html>: دي مش وسم، دي جملة تعريفية بتقول للمتصفح ان ده ملف HTML.
<html>: ده الوسم الأساسي اللي بيحط كل حاجة في الصفحة، كل الوسوم التانية بتكون جواه.
<head>: الجزء ده بيتحط فيه معلومات عن الصفحة مش محتوى الصفحة نفسها.
<title>: بيحدد عنوان الصفحة اللي بيظهر في tab المتصفح.
<body>: ده اهم جزء، جوه بيكون كل المحتوى اللي انت عايزه يظهر في الصفحة.

احفظ الملف باسم first.html، وافتحه من المتصفح. هتلاقي العنوان فوق في التاب مكتوب "أول صفحة HTML"، وجوه الصفحة مكتوب "أهلاً بيك! أنا لسه كاتب أول كود HTML في حياتي".

أمثلة كتيرة عشان تتأكد إنك فاهم

خلينا نديك أكتر من تجربة عشان تتأكد إنك فاهم وتلعب بالكود براحتك:

مثال 1: تغيير النص

<body>
  اسمي أحمد ودي أول صفحة ليا
</body>

غير النص ده واكتب اسمك، وشوف النتيجة!

مثال 2: سطرين نص

<body>
  أول سطر
  سطر جديد
</body>

هتلاقي انهم ظهروا في سطر واحد! ليه؟ عشان HTML بتحتاج وسوم خاصة عشان تعمل سطر جديد، ومش بكرة Enter بس.

مثال 3: جملة مضحكة

<body>
  الكمبيوتر مش هيولع من الكود ده، متخافش :)
</body>

جرب تكتب أي حاجة، ومتقلقش مفيش حاجة حتحصل للكمبيوتر!

مثال 4: عنوان كبير

<body>
  <h1>ده عنوان كبير جدًا</h1>
  <p>ده نص عادي تحت العنوان</p>
</body>

شوف الفرق بين الوسم <h1> للعناوين الكبيرة والوسم <p> للفقرات العادية.

صور تخيلية بالكود عشان تتخيل شكل الصفحة

تعال نرسم صورة تخيلية بالكتابة، علشان تتخيل شكل الصفحة:


+-----------------------------------+
|  عنوان المتصفح: أول صفحة HTML     |  <-- ده الجزء اللي بيتحط في <title>
+-----------------------------------+
|                                   |
| أهلاً بيك! أنا لسه كاتب كود HTML |  <-- ده المحتوى اللي في <body>
|                                   |
+-----------------------------------+

شايف؟ الكود اللي كتبته بيظهر كده قدامك. يعني أي نص تحطه بين <body> و </body> هيبان في الصفحة.

ولو حطيت روابط او صور، هتظهر في المكان اللي انت حطيت فيه الكود بتاعها. فالفكرة بسيطة: انت بتكتب وسم والمتصفح بيحوله لعنصر في الصفحة.

تمرين عملي - جرب بنفسك!

دلوقتي دورك تجرب وتلعب بالكود عشان تتأكد انك فاهم:

1. افتح المفكرة، واعمل ملف جديد
2. اكتب الكود الأساسي اللي فهمناه (<html>, <head>, <body>)
3. في الـ <title> اكتب "صفحتي الأولى"
4. في الـ <body> اكتب:
- "أنا بحب أتعلم HTML" في سطر
- "دي محاولتي الأولى" في سطر تاني
5. احفظ الملف باسم try.html. 6. افتحه في المتصفح وشوف النتيجة.

متنساش تجرب تكتب حاجات مختلفة وتشوف النتيجة!

ولو حابب تفتكر النقاط المهمة:
- HTML هيا لغة توصيف وليس برمجة
- كل وسم بيفتح <اسم> وبيقفل </اسم>
- المحتوى بيتحط بين الوسم الفاتح والوسم القافل
- لازم تحفظ الملف بامتداد .html
- المتصفح هو اللي بيحول الكود لصفحة ويب