ما هي لغة HTML؟ ولماذا تعتبر أساس بناء أي موقع؟
👋 مقدمة بسيطة:
تخيل إن عندك بيت 🏠، والبيت ده بيتكوّن من حيطان وأبواب وشبابيك.
الحيطان هي الأساس اللي بيخلي البيت واقف، صح؟
نفس الكلام بيحصل في المواقع!
كل موقع على الإنترنت عنده “الهيكل” بتاعه، والهيكل ده بيتبني بلغة اسمها HTML.
يعني باختصار:
HTML هي اللغة اللي بتبني شكل الموقع الأساسي وبتقول للمتصفح يعرض إيه في الصفحة.
💡 تعريف HTML:
كلمة HTML اختصار لـ:
HyperText Markup Language
يعني “لغة ترميز النص التشعبي”.
والمقصود بـ “ترميز” إننا بنستخدم وسوم (Tags)
علشان نقول للمتصفح إيه اللي المفروض يظهر:
- ده عنوان
- دي فقرة
- دي صورة
- ده رابط
🧱 دور HTML في المواقع:
كل موقع على الإنترنت، مهما كان شكله أو تعقيده،
بيبدأ من ملف HTML بسيط جدًا.
الملف ده بيكون هو “الأساس” اللي بيتبني فوقه كل حاجة تانية.
بعد كده بنضيف لغات تانية علشان نحسّن الشكل والحركة،
بس البداية دايمًا بـ HTML 👑
(وما تقلقش 😉، هنبدأ بـ HTML خطوة بخطوة،
وبعد ما تتقنها هنتعلم سوا اللغات اللي بتخلّي الموقع شكله أجمل ويتحرك زي CSS و JavaScript.)
✏️ أول مثال على كود HTML بسيط:
<!DOCTYPE html>
<html>
<head>
<title>أول موقع لي!</title>
</head>
<body>
<h1>مرحبًا بكم في موقعي</h1>
<p>أنا بتعلم HTML وأول مرة أعمل صفحة</p>
</body>
</html>
🔍 شرح الكود:
- <html> : بيقول إن ده ملف HTML.
- <head> : الجزء اللي بيحتوي على معلومات الصفحة (زي العنوان).
- <title> : العنوان اللي بيظهر فوق في المتصفح.
- <body> : الجزء اللي المستخدم بيشوفه في الصفحة.
- <h1> : عنوان كبير.
- <p> : فقرة نصية.
🧰 إزاي تعمل ملف HTML بنفسك؟
- افتح المفكرة (Notepad) في الكمبيوتر.
- انسخ الكود اللي فوق.
- احفظ الملف باسم:
index.html4.بعد كده دوبل كليك على الملف، وهتلاقيه فتح في المتصفح
هتشوف أول صفحة من تصميمك!
🖼️ مثال بسيط فيه صورة ورابط:
<!DOCTYPE html>
<html>
<head>
<title>صفحة بسيطة</title>
</head>
<body>
<h1>أنا بحب أتعلم </h1>
<p>اضغط على الصورة لتزور موقع جوجل:</p>
<a href="https://www.google.com" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Google_2015_logo.svg" width="200" alt="Google Logo">
</a>
</body>
</html>
🔍 شرح بسيط:
- <a> : بيعمل رابط clickable.
- “”=href : هو عنوان الموقع اللي الرابط بيروح له.
- <img> : لعرض الصور.
- src : عنوان الصورة.
- alt : نص بديل يظهر لو الصورة مش موجودة.
- width : عرض الصورة بالبكسل.
🌟 ليه HTML مهمة جدًا؟
- لأنها الأساس اللي بيتبني عليه أي موقع.
- من غيرها المتصفح مش هيعرف يعرض الصفحة.
- هي أول خطوة في طريقك لتعلم برمجة وتصميم المواقع.
💬 خلاصة الكلام:
HTML هي لغة بسيطة جدًا، بس قوية جدًا.
من غيرها مفيش موقع ممكن يتبني.
ابدأ بيها خطوة بخطوة، وهنكمّل سوا باقي اللغات اللي هتخلّي موقعك شكلًا وحركة احترافية 💪