0

ابني منزلك الرقمي دليلك لبناء الهيكل الأساسي لموقعك بـ HTML

عادل محمد عادل محمد

في هذا الدرس الأول من سلسلة "ابنِ منزلك الرقمي"، ستتعلم أساسيات HTML بطريقة عملية ومبسطة، وتبني أول صفحة ويب حقيقية بيدك خطوة بخطوة، حتى لو لم تكتب سطر كود واحد من قبل.

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

قبل اختيار ألوان الطلاء أو نوع الأثاث، لا بد أولاً من وضع الأساسات، ثم بناء الأعمدة، ثم رفع الجدران. بدون هذه الخطوات، لا يمكن لأي منزل أن يقف بثبات.

في عالم الويب

  • الجدران والأعمدة: هي لغة HTML، وهي ما سنعمل عليه في هذا الدرس.
  • الدهان والديكور: هو CSS، وسنتعلمه في الدروس القادمة.

لذلك لا تقلق إذا بدت نتيجة اليوم بسيطة أو غير منسقة. نحن الآن نبني الهيكل العظمي القوي الذي سيحمل موقعك لاحقًا، ومع كل درس جديد سنضيف طبقة جديدة من الاحتراف.

ابني منزلك الرقمي دليلك لبناء الهيكل الأساسي لموقعك بـ HTML

ماذا تحتاج لتبدأ؟

  • أنشئ مجلدًا جديدًا على جهازك وسمّه: My-Portfolio.
  • افتح برنامج كتابة الأكواد، ويُفضّل استخدام VS Code.
  • داخل المجلد، أنشئ ملفًا جديدًا باسم: index.html.

معلومة مهمة: المتصفحات تبحث دائمًا عن ملف باسم index لتعتبره الصفحة الرئيسية لأي موقع ويب.

أهداف التعلم

  • فهم دور HTML في بناء صفحات الويب.
  • التعرف على مفهوم الوسوم (Tags) وكيفية استخدامها.
  • بناء أول صفحة ويب شخصية بهيكل صحيح.

ما هي الوسوم (Tags)؟

الوسوم هي أوامر نكتبها للمتصفح لنحدد نوع المحتوى، مثل العناوين، الفقرات، الصور وغيرها. أغلب الوسوم تتكون من وسم افتتاح ووسم إغلاق. 

<h1>Hello World</h1>

وقت الكود: بناء الموقع خطوة بخطوة

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

الخطوة 1: الهيكل الأساسي (Boilerplate)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Personal Portfolio</title>
</head>
<body>

</body>
</html>

شرح هيكل الصفحة

  • <head>: يحتوي على إعدادات الصفحة مثل الترميز والعنوان، وهذه العناصر لا يراها الزائر مباشرة.
  • <body>: كل ما يظهر داخل الموقع للزائر نكتبه داخل هذا الوسم.

الخطوة 2: رأس الصفحة (Header)

داخل وسم <body>، سنبدأ بإضافة رأس الموقع. هذا الجزء يحتوي عادةً على اسم الموقع وقائمة التنقل التي تساعد الزائر على الانتقال بين أقسام الصفحة. 

<header>
  <h3>MyPortfolio</h3>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

ملاحظة: استخدمنا وسم <h3> بدل <div> لأن العناوين لها معنى دلالي أفضل (Semantic HTML)، وهو أمر مهم لمحركات البحث وإمكانية الوصول.

الخطوة 3: قسم الترحيب (Hero Section)

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

<section id="home">
  <img src="https://placeholdit.com/150x150/dddddd/999999" alt="Profile Picture" width="150">
  <h1>Hello, I'm Adel!</h1>
  <p>
    I am a beginner Web Developer learning HTML and CSS
    and building my first website from scratch.
  </p>
  <button>Contact Me</button>
</section>

تأكد من تغيير الاسم الموجود في المثال إلى اسمك الحقيقي قبل حفظ الملف.

الخطوة 4: تذييل الصفحة (Footer)

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

<footer>
  <p>Made with love by Adel</p>
</footer>

النتيجة النهائية (تجميع الكود)

إذا تاهت منك الخطوات السابقة، لا تقلق. يمكنك الاعتماد على الكود الكامل التالي. انسخه بالكامل واستبدل به كل ما داخل ملف index.html. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Personal Portfolio</title>
</head>
<body>

    <header>
        <h3>MyPortfolio</h3>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <hr>

    <section id="home">
        <img src="https://placeholdit.com/150x150/dddddd/999999" alt="Profile Picture" width="150">
        <h1>Hello, I'm Adel!</h1>
        <p>I am a passionate developer building my first website from scratch.</p>
        <button>Download CV</button>
    </section>

    <hr>

    <footer>
        <p>Made with love by Adel</p>
    </footer>

</body>
</html>
ابني منزلك الرقمي دليلك لبناء الهيكل الأساسي لموقعك بـ HTML

كيف تشاهد موقعك؟

  1. احفظ الملف باستخدام Ctrl + S.
  2. اذهب إلى المجلد الذي يحتوي على ملف index.html.
  3. اضغط مرتين (Double Click) على الملف.
  4. سيتم فتح الصفحة مباشرة في المتصفح (Chrome أو Edge).

صدمة الواقع (وهذا طبيعي)

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

أنت الآن بنيت الهيكل أو ما يمكن تسميته "العظم" الخاص بالموقع. في الدرس القادم، سننتقل إلى CSS لنضيف الألوان، التناسق، والشكل الاحترافي الذي يحول هذا الهيكل البسيط إلى موقع جذاب.

اختبار تطبيقي

السؤال:

ما هو الدور الأساسي للغة HTML؟

عرض الإجابة الصحيحة

✅ الإجابة الصحيحة: بناء هيكل الصفحة

لغة HTML مسؤولة عن إنشاء بنية الصفحة وتحديد عناصرها، بينما يتم استخدام CSS للتنسيق وJavaScript لإضافة التفاعل.

تحدي الأسبوع

لا تكتفِ بالمشاهدة فقط، التعلم الحقيقي يبدأ عندما تكتب الكود بنفسك.

المطلوب منك:

  • أضف قسمًا جديدًا بعد قسم الترحيب (Hero Section).
  • سمِّ القسم باستخدام الوسم التالي:
<section id="about">
</section>

داخل هذا القسم، أضف فقرة <p> تتحدث فيها عن نفسك أو عن هواياتك واهتماماتك.

إذا أنهيت هذا التحدي، فأنت بالفعل بدأت تفكر وتعمل كمطور ويب حقيقي.

الخاتمة

أحسنت، في هذا الدرس تعلمت:

  • ما هي لغة HTML ودورها في الويب.
  • كيف تبني صفحة ويب بهيكل صحيح.
  • كيف تفكر كمطور ويب، لا كمشاهد فقط.

أسئلة المراجعة

  1. ما هو وسم HTML؟
    عرض الإجابة

    ✅ هو أمر يُستخدم لإخبار المتصفح بنوع المحتوى، مثل تحديد أن هذا النص هو "عنوان" أو "فقرة" أو "صورة".

  2. أين نكتب المحتوى الذي يظهر للزائر؟
    عرض الإجابة

    ✅ داخل وسم <body> فقط. أي شيء خارجه لن يظهر داخل صفحة الويب.

🏅شهادة الإنجاز: الأسبوع الأول – أساسيات HTML

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

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

مقالات قد تهمك

تعليقات



    function initializeIntersectionObserver(elements,options={threshold:0.1,rootMargin:'0px 0px -50px 0px'}){const observer=new IntersectionObserver((entries)=>{entries.forEach(entry=>{if(entry.isIntersecting){entry.target.style.opacity='1';entry.target.style.transform='translateY(0)'}})},options);elements.forEach(el=>{el.style.opacity='0';el.style.transform='translateY(30px)';el.style.transition='opacity 0.6s ease, transform 0.6s ease';observer.observe(el)})} function initializeSmoothScrolling(){document.querySelectorAll('a[href^="#"]').forEach(anchor=>{anchor.addEventListener('click',function(e){e.preventDefault();const target=document.querySelector(this.getAttribute('href'));if(target){target.scrollIntoView({behavior:'smooth',block:'start'})}})})} function initializeLazyLoading(images){const imageObserver=new IntersectionObserver((entries,observer)=>{entries.forEach(entry=>{if(entry.isIntersecting){const img=entry.target;img.src=img.dataset.src||img.src;img.classList.remove('lazy');imageObserver.unobserve(img)}})});images.forEach(img=>{img.dataset.src=img.src;img.classList.add('lazy');imageObserver.observe(img)})} function debounce(func,wait){let timeout;return function executedFunction(...args){const later=()=>{clearTimeout(timeout);func(...args)};clearTimeout(timeout);timeout=setTimeout(later,wait)}} document.addEventListener('DOMContentLoaded',()=>{initializeSmoothScrolling();initializeLazyLoading(document.querySelectorAll('img'));initializeHeroSection();initializeFeaturedLessons();initializeBeginnersGuide();initializeRecentProjects();initializeNewsletter();initializeFAQ();initializeLatestArticles()})