أساسيات HTML

أساسيات HTML

وش هو HTML؟

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

تخيلها زي المخطط أو الهيكل العظمي لصفحتك. بدونها، صفحتك بتكون مجرد نص عادي.

الهيكل الأساسي لصفحة HTML

كل صفحة HTML لها هيكل معين لازم تلتزم فيه. هذا هو القالب اللي تبني عليه كل شي:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>عنوان الصفحة حقي</title>
</head>
<body>
    <!-- هنا يجي كل المحتوى المرئي لصفحتك -->
    <h1>أهلاً بك في عالم الويب!</h1>
    <p>هذي أول صفحة HTML لي.</p>
</body>
</html>

تعال نفصفصها حبة حبة:

  • <!DOCTYPE html>: هذي تقول للمتصفح إنك تستخدم أحدث إصدار من HTML.
  • <html>: العنصر الأب لكل شي في صفحتك. lang="ar" يحدد إن لغة الصفحة عربية.
  • <head>: الجزء اللي فيه معلومات عن الصفحة ما تظهر للمستخدم مباشرة. زي عنوان الصفحة، ترميز الأحرف، وملفات الـ CSS أو JavaScript.
  • <meta charset="UTF-8">: يحدد ترميز الأحرف عشان تظهر النصوص العربية صح.
  • <meta name="viewport" ...>: مهم جداً عشان صفحتك تكون متجاوبة مع أحجام الشاشات المختلفة (جوال، تابلت، كمبيوتر).
  • <title>: العنوان اللي يظهر في تبويبة المتصفح أو في محركات البحث.
  • <body>: هذا هو الجزء اللي كل شي تشوفه في الصفحة يجي فيه: النصوص، الصور، الروابط، الأزرار، كل شي.

العناوين (Headings)

تستخدم العناوين عشان ترتب محتواك وتخليه سهل القراءة. عندنا 6 مستويات من <h1> (الأكبر والأهم) إلى <h6> (الأصغر والأقل أهمية).

<h1>هذا عنوان رئيسي جداً</h1>
<h2>هذا عنوان فرعي</h2>
<h3>عنوان أصغر</h3>
<h4>عنوان فرعي فرعي</h4&n>
<h5>عنوان صغير</h5>
<h6>أصغر عنوان ممكن</h6>

نصيحة: استخدم <h1> مرة واحدة فقط في الصفحة عشان تحدد الموضوع الرئيسي. هذا يساعد في SEO.

الفقرات (Paragraphs)

عشان تحط نص عادي، تستخدم وسم <p> (paragraph). المتصفح بيضيف مسافة بين الفقرات تلقائياً.

<p>هذي فقرة بسيطة، ممكن تحط فيها أي نص تبغاه. هي الوحدة الأساسية لعرض النصوص.</p>
<p>وهذي فقرة ثانية، عشان تشوف كيف المتصفح بيفصل بينهم.</p>

الروابط (Links)

الروابط هي اللي تخلي الويب "شبكة". تستخدم وسم <a> (anchor) عشان تسوي رابط. أهم خاصية فيه هي href اللي تحدد وين يروح الرابط.

<a href="https://www.google.com">روح لقوقل</a>
<br>
<a href="another-page.html">صفحة ثانية في موقعي</a>

ممكن تضيف خاصية target="_blank" عشان يفتح الرابط في تبويبة جديدة:

<a href="https://www.youtube.com" target="_blank">افتح اليوتيوب في تبويبة جديدة</a>

الصور (Images)

الصور تخلي صفحتك أجمل! تستخدم وسم <img> عشان تحط صورة. هو وسم فردي (يعني ما يحتاج وسم إغلاق). أهم خاصيتين فيه:

  • src: مسار الصورة.
  • alt: نص بديل للصورة، يظهر لو الصورة ما تحملت أو للمستخدمين اللي يستخدمون قارئات الشاشة. مهم جداً للوصولية (Accessibility).
<img src="my-image.jpg" alt="صورة توضيحية" width="300" height="200">

تذكر تحط alt دايم! مو بس عشان الوصولية، حتى محركات البحث تستفيد منه.

القوائم (Lists)

عندنا نوعين رئيسيين من القوائم:

  1. قائمة غير مرتبة (Unordered List - <ul>): عناصرها تكون بنقاط (bullets).
  2. قائمة مرتبة (Ordered List - <ol>): عناصرها تكون بأرقام أو أحرف.

وكل عنصر في القائمة تستخدم له وسم <li> (list item).

قائمة غير مرتبة:

<ul>
    <li>تفاح</li>
    <li>برتقال</li>
    <li>موز</li>
</ul>

قائمة مرتبة:

<ol>
    <li>الخطوة الأولى</li>
    <li>الخطوة الثانية</li>
    <li>الخطوة الثالثة</li>
</ol>

تقسيم المحتوى (Divisions & Spans)

الوسمين <div> و <span> مهمين جداً عشان ترتب وتنسق محتواك بالـ CSS أو تتحكم فيه بالـ JavaScript.

  • <div> (division): وسم على مستوى الكتلة (block-level element). ياخذ عرض الشاشة بالكامل ويبدأ بسطر جديد. يستخدم لتقسيم أقسام كبيرة في الصفحة.
  • <span>: وسم على مستوى السطر (inline-level element). ياخذ فقط المساحة اللي يحتاجها وما يبدأ بسطر جديد. يستخدم لتنسيق جزء معين من النص داخل فقرة مثلاً.
<div style="background-color: lightblue; padding: 10px;">
    <p>هذا القسم كله داخل <span style="color: red; font-weight: bold;">div</span>.</p>
    <p>وهنا <span style="text-decoration: underline;">جزء من النص</span> داخل <span>span</span>.</p>
</div>

الخصائص (Attributes)

الخصائص هي معلومات إضافية تعطيها للوسوم. تجي داخل وسم الفتح على شكل name="value". شفناها كثير فوق (مثل href، src، alt، lang).

<p title="هذي تلميحة لما تمرر الماوس">مرر الماوس فوقي وشوف.</p>
<img src="image.jpg" alt="صورة" width="100" height="100">

الخصائص هي اللي تخلي وسوم HTML قوية ومرنة!

التعليقات (Comments)

التعليقات مهمة جداً عشان تخلي الكود حقك مفهوم لك ولأي مبرمج ثاني بيشتغل عليه. المتصفح يتجاهلها وما يعرضها.

<!-- هذا تعليق، المتصفح ما يشوفه -->
<p>هذا نص عادي.</p>
<!-- ممكن تستخدمها عشان تشرح جزء معين من الكود -->

خاتمة

كذا نكون غطينا أساسيات HTML. هذي هي اللبنة الأولى في بناء أي موقع ويب. تدرب عليها كثير، ومع الوقت بتشوف إن الموضوع أسهل مما تتوقع. بالتوفيق!