جدول المحتوى

كيفية تنسيق الموقع الإلكتروني باستخدام تعليمات HTML

يُعد تنسيق الموقع الإلكتروني خطوة أساسية في عملية تصميم وتطوير صفحات الويب، حيث تحدد البنية العامة للمحتوى وكيفية ظهوره للمستخدم. وتعتمد هذه العملية بشكل رئيسي على لغة ترميز النص التشعبي (HTML)، والتي تشكّل العمود الفقري لأي موقع ويب. من خلال تعليمات HTML يمكن تحديد العناصر الأساسية للصفحة، مثل العناوين، الفقرات، الصور، الروابط، الجداول، القوائم، وأقسام الهيكل العامة. هذا المقال يتناول بشكل موسّع وشامل كيفية تنسيق الموقع الإلكتروني باستخدام تعليمات HTML، من المبادئ الأساسية وحتى التقنيات المتقدمة التي توفّر مرونة في التنظيم وعرض المحتوى بشكل متناسق وجذاب.

1. أساسيات لغة HTML

لغة HTML (HyperText Markup Language) هي اللغة الأساسية التي تُستخدم في بناء صفحات الويب. تتكوّن من عناصر (Tags) توضع بين أقواس زاوية < > وتُستخدم لتحديد البنية والمحتوى داخل الصفحة.

أبسط مثال لهيكل صفحة HTML:

html
html>
<html>
  <head>
    <title>عنوان الصفحةtitle>
  head>
  <body>
    <h1>مرحباً بك في موقعيh1>
    <p>هذه فقرة نصية.p>
  body>
html>

شرح المكوّنات الأساسية:

: تعريف نوع المستند HTML5.
: العنصر الجذر الذي يحتوي على جميع عناصر الصفحة.
: يحتوي على معلومات غير مرئية للمستخدم، مثل عنوان الصفحة وروابط CSS.
: يحتوي على المحتوى الذي يظهر على صفحة الويب مثل النصوص والصور والعناوين.

2. استخدام العناوين والفقرات لتنسيق النصوص

تُستخدم العناوين لتحديد بنية المحتوى وتُكتب باستخدام الوسوم من

إلى

. العنوان

هو الأهم والأكبر، بينما

هو الأصغر.

مثال:

html
<h1>عنوان رئيسيh1>
<h2>عنوان فرعيh2>
<h3>عنوان فرعي أقلh3>

أما الفقرات فتُستخدم الوسوم

لكتابة النصوص:

html
<p>هذه فقرة تحتوي على نص توضيحي.p>

ويمكن إضافة فواصل أسطر باستخدام وفواصل أفقية باستخدام

3. تنسيق النصوص باستخدام الوسوم

لإبراز أو تغيير شكل النص داخل صفحة الويب، تستخدم HTML وسوماً متخصصة:

التنسيق	الوسم	الوظيفة
غامق	أو	لتأكيد أهمية النص أو جعله غامقاً
مائل	أو	لتأكيد معنوي أو جعل النص مائلاً
خط تحت النص		لرسم خط أسفل النص
نص مشطوب	أو	لتمييز النص المحذوف أو المشطوب
نص مرتفع		لعرض النص بشكل مرتفع (مثال: 10²)
نص منخفض		لعرض النص بشكل منخفض (مثال: H₂O)

4. إضافة الصور والوسائط

تُستخدم الوسوم مثل لإضافة الصور داخل الموقع، وهي وسوم لا تحتاج إلى وسم إغلاق.

مثال:

html
<img src="image.jpg" alt="وصف الصورة" width="500" height="300">

المعلمات:

src: مصدر الصورة.
alt: النص البديل في حال لم يتم تحميل الصورة.
width و height: تحديد أبعاد الصورة.

يمكن كذلك تضمين مقاطع فيديو باستخدام ومقاطع صوتية باستخدام :

html
<video controls width="600">
  <source src="video.mp4" type="video/mp4">
video>

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
audio>

5. استخدام الروابط التشعبية

لإضافة روابط إلى مواقع أو صفحات أخرى، يُستخدم الوسم :

html
<a href="https://www.example.com" target="_blank">اذهب إلى الموقعa>

المعلمات:

href: عنوان الرابط.
target="_blank": لفتح الرابط في نافذة جديدة.

6. القوائم المنظمة

HTML توفّر نوعين من القوائم: مرتبة (رقمية) وغير مرتبة (نقطية):

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

html
<ul>
  <li>العنصر الأولli>
  <li>العنصر الثانيli>
ul>

قائمة مرتبة:

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

7. الجداول وتنظيم البيانات

تُستخدم الجداول في HTML لتنظيم البيانات في صفوف وأعمدة. يتكوّن الجدول من الوسوم التالية:

الوسم الوظيفة



إنشاء جدول




صف في الجدول




عنوان العمود (خلايا رأس الجدول)




خلية بيانات داخل الصف








مثال:
html
<table border="1">
  <tr>
    <th>الاسمth>
    <th>العمرth>
  tr>
  <tr>
    <td>أحمدtd>
    <td>25td>
  tr>
  <tr>
    <td>ليلىtd>
    <td>30td>
  tr>
table>


8. تقسيم الصفحة باستخدام أقسام HTML
من أجل تنظيم الصفحة بشكل احترافي، تُستخدم الوسوم الحديثة في HTML5 لتقسيم المحتوى:





الوسم
الوظيفة






رأس الصفحة أو القسم




شريط التنقل أو الروابط الداخلية




قسم محدد ضمن الصفحة




مقالة أو محتوى مستقل




محتوى جانبي مثل شريط الأخبار أو الإعلانات




تذييل الصفحة








مثال:
html
<header>
  <h1>موقعي الشخصيh1>
header>

<nav>
  <a href="#home">الرئيسيةa> |
  <a href="#about">من نحنa>
nav>

<section>
  <h2>مقدمةh2>
  <p>مرحباً بك في موقعي.p>
section>

<footer>
  <p>جميع الحقوق محفوظة © 2025p>
footer>


9. دمج HTML مع CSS لتنسيق التصميم
بينما تُستخدم HTML لبناء الهيكل، تُستخدم CSS (صفحات الأنماط الانسيابية) لتنسيق شكل العناصر مثل الألوان، الأحجام، المسافات، وتوزيع المحتوى.
إضافة CSS داخل صفحة HTML يتم بإحدى الطرق التالية:
1. CSS داخلي (داخل الوسم 

																				
									
										
																					
																					
																					
																												
																	
																				
																						Facebook

كيفية حذف حساب إنستقرام نهائيًا

كيفية تشغيل الكاميرا على الكمبيوتر

الاحتراق التام وغير التام

أخطاء يجب تجنبها عند تعلم بايثون

تشاد: كل ما تحتاج معرفته

مفهوم الدولة المدينة وأثرها

الفساد وأثره على الفقر

الإنترنت وتطور العالم الرقمي

التبادل التجاري: الأنواع والأثر الاقتصادي

الإرشاد التربوي وأهميته التعليمية

تنسيق المواقع بتعليمات HTML