اساسيات كود html

إزاي تبدأ تكتب صفحة HTML بطريقة صحيحة؟

أهلاً بيكم يا شباب، عاملين إيه؟ يا رب تكونوا بخير وسلام. في الدرس اللي فات اتكلمنا عن عناصر الـ HTML وعرفنا إنها بتتكوّن من تاجات، وشرحنا إزاي نكتب التاجات دي. دلوقتي جايين نبدأ نعمل صفحة HTML بطريقة صحيحة، وده بيحتاج نعرف شوية معلومات مهمة لازم تبقى في دماغنا.

المكونات الأساسية لأي صفحة HTML

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

نبدأ من أول وجديد

زي ما أنتم شايفين، ده المشروع اللي بدأناه. أول حاجة هنعملها هي إننا نحذف أي أكواد موجودة علشان نبدأ من الصفر. بنفتح الصفحة في المتصفح، وهتكون فاضية تمامًا، ودي بداية كويسة نشتغل منها.

تحديد إصدار HTML (DOCTYPE)

أول خطوة نعملها لما نكتب كود HTML هي إننا نحدد إصدار الـ HTML اللي هنشتغل بيه. وده بنعمله باستخدام حاجة اسمها "doctype"، وبيكون شكلها كده:

<!DOCTYPE html>

التاج ده مش بيقفل، وده معناه إنه "تاج منفرد". الغرض منه هو إنه يقول للمتصفح إننا هنكتب الكود باستخدام HTML5.

كتابة وسم الـ HTML الرئيسي

بعد ما حددنا نوع المستند، بنبدأ نكتب كود HTML نفسه، وده لازم يكون بين وسمين:

<html>
  <!-- كل كودك هيكون هنا -->
</html>

التاج ده بيكون هو الغلاف الرئيسي اللي جواه باقي الصفحة.

تقسيم الصفحة لعقل وجسم

بنقسم الصفحة لحاجتين رئيسيتين:

عقل الصفحة: وده بيتكتب داخل تاج اسمه <head>
جسم الصفحة: وده بيتكتب داخل تاج اسمه <body>

شكل الكود بيكون كده:

<html>
  <head>
    <!-- معلومات الموقع -->
  </head>
  <body>
    <!-- العناصر الظاهرة للزائر -->
  </body>
</html>

إيه اللي بيتكتب في تاج الـ Head؟

العقل أو التاج <head> بيحتوي على معلومات عن الموقع زي:

اسم الموقع (title)
وصف الموقع
روابط للملفات الخارجية (CSS، JS)
أي معلومات بتساعد محركات البحث تفهم موقعك

يعني مثلاً لو عايز تضيف عنوان للموقع بيظهر فوق في التبويب، هتكتب تاج الـ title كده:

<head>
  <title>Test</title>
</head>

ولو عملت تحديث للصفحة هتلاحظ إن العنوان فوق في التبويب بقى مكتوب فيه “Test”.

إيه اللي بيتكتب في تاج الـ Body؟

تاج <body> هو اللي بنكتب جواه كل العناصر اللي الزائر بيشوفها على الموقع، زي:

العناوين <h1>، <h2> ...
الفقرات <p>
الصور <img>
الأزرار <button>
الجداول والقوائم وغيرها

يعني أي حاجة بتظهر قدامك في المتصفح بتكون مكتوبة جوه التاج ده.

مثال عملي: كتابة عنوان في الصفحة

دلوقتي هنجرب نكتب عنوان داخل تاج الـ <body>، وهنكتب كده:

<body>
  <h1>Generaizen</h1>
</body>

وبعد ما تعمل تحديث للصفحة، هتلاقي العنوان “Generaizen” ظهر قدامك.

مثال تاني: تغيير عنوان التبويب

لو عايزين نغير العنوان اللي بيظهر فوق في التبويب، بندخل في تاج الـ <head> ونكتب:

<head>
  <title>Test</title>
</head>

وبعد التحديث، هتلاقي الكلمة “Test” ظهرت فوق.

إزاي تتأكد من الأكواد دي شغالة؟

ممكن تروح لأي موقع وتعمل كليك يمين وتختار "Inspect" أو "فحص"، وهتلاقي هناك كل التاجات اللي اتكلمنا عنها:

في البداية هتلاقي <!DOCTYPE html>
بعد كده تاج <html>
جواه <head> وفيه عنوان ووصف وصور
بعد كده <body> وده فيه كل العناصر اللي بتظهر للزائر

حتى لو فتحت موقع زي جوجل، هتلاقي نفس التكوين بالضبط، واللي بيأكدلك إن دي هي المكونات الأساسية لأي صفحة HTML.

خلاصة الدرس

أول حاجة لازم تبدأ بيها هي تحديد نوع إصدار HTML باستخدام <!DOCTYPE html>.
بعد كده تكتب تاج الـ <html> وتفتحه وتقفله.
جواه بتحط تاج الـ <head> وفيه معلومات عن الموقع، وتاج الـ <body> اللي فيه كل العناصر اللي بتظهر للزائر.
أي عنصر بيظهر في الصفحة لازم يكون جوا تاج الـ <body>، والعناصر اللي بتوصف الموقع بتتحط في الـ <head>.

سؤال الدرس

إيه هي الصيغة الصحيحة لتحديد إصدار HTML5؟

اختاروا من الاختيارات اللي ظهرت في الفيديو، واكتبوا إجابتكم في التعليقات.

لو عايزني أفرغ باقي فيديوهات HTML بنفس الشكل أو تنسقها كـ سلسلة دروس، قولّي بس وأنا جاهز أكمّل معاك.

ولمزيد من التفاصيل شاهد فيديو توضيحي

وفي النهاية اتمني يكون الموضوع افادكم فلا تنسي متابعتي علي قناة اليوتيوب
ولكم جزيل الشكر ❤️❤️

دروس اونلاين بلس

اساسيات كود html - تعلم Html