درس

تطوير الويب 

مقدمة إلى HTML

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

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

هيكل HTML: القالب الأساسي

يتبع كل مستند HTML هيكلاً أساسيًا. يخبر هذا الهيكل المتصفح أنه يقرأ ملف HTML ويوفر العناصر الأساسية للصفحة. إليك قالب HTML بسيط:

            
<!DOCTYPE html>
<html>
<head>
    <title>عنوان الصفحة</title>
</head>
<body>
    <!-- Page content goes here -->
</body>
</html>

دعنا نفصّل كل جزء:

  • <!DOCTYPE html>: يخبر هذا الإعلان المتصفح أن المستند هو مستند HTML5. يجب أن يكون دائمًا أول شيء في ملف HTML الخاص بك.
  • <html>: هذا هو العنصر الجذر للصفحة. كل شيء آخر يذهب داخل هذا الوسم.
  • <head>: يحتوي هذا القسم على معلومات وصفية حول مستند HTML، مثل العنوان ومجموعة الأحرف وروابط أوراق الأنماط.
  • <title>: يحدد عنوانًا لصفحة HTML (الذي يظهر في شريط عنوان المتصفح أو علامة التبويب).
  • <body>: هذا هو المكان الذي يذهب إليه كل محتوى صفحة الويب الخاصة بك – النصوص والصور والروابط وكل شيء آخر يراه المستخدمون.

وسوم HTML: العناصر والسمات

يستخدم HTML الوسوم لتحديد العناصر. تأتي معظم الوسوم في أزواج: وسم فتح ووسم إغلاق. على سبيل المثال، <p> هو وسم الفتح للفقرة، و </p> هو وسم الإغلاق.

بعض الوسوم ذاتية الإغلاق، مما يعني أنها لا تحتاج إلى وسم إغلاق منفصل. مثال على ذلك هو الوسم <br>، الذي ينشئ فاصل سطر. يمكن أن تحتوي الوسوم أيضًا على سمات، والتي توفر معلومات إضافية حول العنصر. على سبيل المثال، يستخدم الوسم <img> (للصور) السمة src لتحديد مصدر الصورة.

العناوين: من <h1> إلى <h6>

تُستخدم العناوين لتنظيم المحتوى الخاص بك وتسهيل قراءته. يوفر HTML ستة مستويات من العناوين، من <h1> (الأكثر أهمية) إلى <h6> (الأقل أهمية). عادةً ما يُستخدم <h1> للعنوان الرئيسي للصفحة.

إليك مثال:

            
<h1>هذا عنوان من المستوى الأول</h1>
<h2>هذا عنوان من المستوى الثاني</h2>
<h3>هذا عنوان من المستوى الثالث</h3>

الفقرات: <p>

تُستخدم الفقرات لعرض كتل من النص. يحدد الوسم <p> الفقرة.

مثال:

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

القوائم: <ul> و <ol>

يوفر HTML نوعين من القوائم: القوائم غير المرتبة (<ul>) والقوائم المرتبة (<ol>). تُستخدم القوائم غير المرتبة للعناصر التي ليس لها ترتيب محدد، بينما تُستخدم القوائم المرتبة للعناصر التي تحتاج إلى أن تكون في تسلسل معين. تُحدد عناصر القائمة باستخدام الوسم <li>.

إليك أمثلة على كليهما:

            
<ul>
    <li>العنصر 1</li>
    <li>العنصر 2</li>
    <li>العنصر 3</li>
</ul>

<ol>
    <li>العنصر الأول</li>
    <li>العنصر الثاني</li>
    <li>العنصر الثالث</li>
</ol>

الروابط: <a>

تسمح الروابط للمستخدمين بالتنقل بين صفحات الويب المختلفة أو الأقسام داخل نفس الصفحة. يحدد الوسم <a> ارتباطًا تشعبيًا. أهم سمة هي href، التي تحدد عنوان URL للرابط.

مثال:

            
<a href="https://www.example.com">زيارة Example.com</a>

يمكن استخدام السمة target لتحديد مكان فتح المستند المرتبط. target="_blank" يفتح الرابط في علامة تبويب أو نافذة جديدة.

الصور: <img>

يُستخدم الوسم <img> لتضمين الصور في صفحة الويب. تحدد السمة src مسار ملف الصورة. توفر السمة alt نصًا بديلًا للصورة، والذي يتم عرضه إذا تعذر تحميل الصورة وهو مهم لإمكانية الوصول.

مثال:

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

بناء تخطيط صفحة ويب بسيط

الآن، دعنا نجمع كل ما تعلمناه لإنشاء تخطيط صفحة ويب أساسي. سنقوم بتضمين عنوان، فقرة، قائمة، رابط، وصورة.

إليك كود HTML الكامل:

            
<!DOCTYPE html>
<html>
<head>
    <title>صفحتي الويب الأولى</title>
</head>
<body>
    <h1>مرحبًا بك في صفحتي الويب!</h1>
    <p>هذه صفحة ويب بسيطة تم إنشاؤها باستخدام أساسيات HTML.</p>
    <ul>
        <li>تعلم HTML</li>
        <li>ممارسة البرمجة</li>
        <li>بناء مواقع ويب رائعة</li>
    </ul>
    <a href="https://www.google.com" target="_blank">زيارة جوجل</a>
    <img src="placeholder.jpg" alt="صورة نائبة">
</body>
</html>

تذكر استبدال "placeholder.jpg" بالمسار الفعلي لملف الصورة. احفظ هذا الكود كملف HTML (مثل "index.html") وافتحه في متصفح الويب الخاص بك لرؤية النتيجة. لديك الآن صفحة HTML تعمل بكامل طاقتها!



-/- ✔: 0, ✖: 0