HTML هو العمود الفقري لإنترنت اليوم. ملايين المواقع الإلكترونية شكلت الإنترنت، حيث تُعدّ HTML حجر الأساس لجميع هذه المواقع. قبل عشرين عامًا، حتى لو كنتَ مجرد مدون هاوٍ، كان عليكَ معرفة بعض أكواد الويب لحماية نفسك أو لإضافة وظيفة بسيطة إلى موقعك. أما الآن، فمع توافر العديد من المحررات والإضافات، لم يعد حتى معرفة أساسيات HTML ضرورية.
المشكلة هنا هي أنه إذا لم تكن على دراية ببعض الأساسيات، فقد تواجه مشاكل حقيقية في مدونتك، وتضطر إلى الاستعانة بمطور مكلف لإصلاح مشكلة قد تكون بسيطة. ليس هذا فحسب، بل إن إجراء تغييرات على مدونتك، مثل إضافة أداة نصية مخصصة، يتطلب معرفة بسيطة.
وإذا كنت تواجه مشكلة في تخطيط المحتوى، فإن معرفة HTML يمكن أن تساعدك على العودة إلى المسار الصحيح.
قبل البدء – أساسيات HTML
ما هو HTML؟
HTML هو اختصار لـ Hyper Tتحويلة MArkupe Lاللغة. إنها اللغة القياسية لوضع علامات على المحتويات لمتصفحات الويب.
يُمثَّل HTML بـ "العناصر". تُعرف العناصر أيضًا باسم "العلامات".
لماذا نحتاج إلى HTML؟
لا يمكن لمتصفحات الويب عرض موقع ويب إلا إذا كان مكتوبًا باللغة التي تدعمها. HTML هي لغة الترميز الأكثر شيوعًا وتتمتع بأعلى قبول لدى متصفحات الويب.
لهذا السبب تحتاج إلى HTML.
هل HTML حساس لحالة الأحرف؟
HTML لا يتحسس لحالة الأحرف. لكن أفضل طريقة هي كتابة HTML بحالات الأحرف الصحيحة.
خطوات إنشاء ملف HTML الأول
يمكنك إنشاء ملف HTML أساسي باستخدام المفكرة على جهاز الكمبيوتر. لكن كتابة العديد من أسطر التعليمات البرمجية ستكون صعبة.
أنت بحاجة إلى محرر أكواد. محرر أكواد جيد يُسهّل كتابة وتنظيم الأكواد الكبيرة. أنصح باستخدام Notepad++ (مجاني ومفتوح المصدر) لكتابة لغات الويب. هناك محررات أكواد أخرى يمكنك استخدامها، مثل Sublime Text وAtom وغيرها.
هنا هو ما عليك القيام به:
- تثبيت محرر الكود
- افتحه
- قم بإنشاء ملف جديد
- احفظه كملف .html
1. مرحبا بالعالم!
انسخ الكود التالي والصقه في ملف HTML الجديد، ثم احفظه. شغّله الآن على متصفحك.
كود HTML
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
الإخراج:
تهانينا! لقد أنشأتَ أول ملف HTML لك. ليس عليك فهمه الآن. سنشرحه لاحقًا.
فهم بنية HTML
لكل ملف HTML بنية مكشوفة مشتركة. من هنا يبدأ كل شيء. وستصل كل صفحة كبيرة من الأكواد إلى هذه البنية بعد تقليصها.
فلنحاول فهمه من خلال شيفرة "مرحبًا بالعالم!". العناصر التالية هي الأجزاء الإلزامية لكل ملف HTML.
- = هو إعلان للمتصفح بأن هذا ملف HTML. يجب عليك تحديده قبل العلامة.
- = هذا هو العنصر الجذري لملف HTML. كل ما تكتبه يقع بين و .
- هذا هو جزء المعلومات الوصفية للمتصفح. لا تحتوي الأكواد داخل هذا الوسم على أي مُخرَجات مرئية.
- هذا هو الجزء الذي يعرضه متصفح الويب. ما تراه بالضبط على موقع الويب هو عرض الأكواد بين و .
2. علامات HTML
HTML هو نتاج تعاون مئات الوسوم المختلفة. عليك أن تتعلم كيفية عملها، وأن تتأكد من استخدامها بالطريقة الصحيحة.
عادةً ما تحتوي علامات HTML على وسمَي فتح وإغلاق. يُحاط وسم الفتح بالكلمة المفتاحية بين علامتي أصغر من (<) وأكبر من (>). أما وسم الإغلاق، فيحتوي على نفس كل شيء باستثناء شرطة مائلة للأمام (/) بعد علامة أصغر من (<).
علامات الرأس
جميع علامات الرأس تذهب بين و تحتوي على معلومات تعريفية لمتصفحات الويب ومحركات البحث. ولا تحتوي على أي محتوى مرئي تقريبًا.
يُحدد وسم العنوان عنوان صفحة الويب الظاهرة في علامة تبويب المتصفح. تُستخدم هذه المعلومات بواسطة برامج الويب ومحركات البحث. يمكنك استخدام عنوان واحد فقط لكل ملف HTML.
رمز:
<title>My first web page</title>
يربط وسم الرابط صفحة HTML بموارد خارجية. استخدامه الرئيسي هو ربط صفحة HTML بأوراق أنماط CSS. وهو وسم ذاتي الإغلاق ولا يحتاج إلى النهاية. هنا rel تعني العلاقة مع الملف و src تعني المصدر.
رمز:
<link rel="stylesheet" type="text/css" src="style.css">الميتا هي وسمة أخرى ذاتية الإغلاق تُوفر معلومات ميتا لملف HTML. تستخدم محركات البحث وخدمات الويب الأخرى هذه المعلومات. تُعد وسوم الميتا ضرورية لتحسين صفحتك لمحركات البحث.
رمز:
<meta name="description" content="This is the short description that search engines show"يُستخدم وسم البرنامج النصي لإدراج نص برمجي من جانب الخادم أو لإنشاء رابط لملف نصي خارجي. يمكن أن يحتوي وسم البداية على سمتين: النوع والمصدر (src).
رمز:
<script type="text/javascript" src="scripts.js"></script>تعمل علامة Noscript عند تعطيل البرامج النصية في متصفح الويب. فهي تجعل الصفحة متوافقة مع المتصفحات التي لا تسمح بالبرامج النصية.
رمز:
<noscript><p>Alas! Scripts are disabled.</p></noscript>علامات الجسم
جميع علامات الجسم تذهب بين و تحتوي على مخرجات بصرية. هنا يُنجز معظم العمل. عليك استخدام هذه الوسوم لتنظيم محتوى صفحتك الرئيسية.
ل
هذه هي علامات العناوين. العنوان الأهم مُعَلَّم بـ والأقل أهمية مع ينبغي عليك استخدامها في التسلسل الهرمي الصحيح.
رمز:
<h1>This is a h1 heading</h1>
<h2>This is a h2 heading </h2>
<h3>This is a h3 heading </h3>
<h4>This is a h4 heading </h4>
<h5>This is a h5 heading </h5>
<h6>This is a h6 heading </h6>الإخراج:
علامات التنسيق
يمكن تنسيق النص في ملف HTML باستخدام العديد من علامات التنسيق. سيكون ذلك ضروريًا عند إبراز كلمة أو سطر من المحتوى.
رمز:
<p>You can highlight your text in many ways.</p>
<p>You can <strong>bold</strong>, <u>underline</u>, <em>italic</em>, <mark>mark</mark>, <sub>subscript</sub>, <sup>superscript</sup> and more!</p>الإخراج:
يمكنك تعديل بعض الأكواد البرمجية باستخدام وسم التعليق. سيظهر الكود في الكود المصدري، لكن لن يُعرض. الغرض الرئيسي من هذا الوسم هو إنشاء توثيق لملفات HTML للرجوع إليها مستقبلًا.
على سبيل المثال:
<!-- <p>You can comment out any code by surrounding them in this way</p> -->علامات HTML المهمة الأخرى
المرساة وسمٌ قيّمٌ يُستخدم في كل مكان تقريبًا. لن تجد أي صفحة ويب على الإنترنت بدون رابط مرساة واحد على الأقل.
البنية واحدة. لها جزء افتتاحي وآخر ختامي . النص الذي تريد تثبيته يقع بين و .
هناك بعض السمات التي تحدد المكان وكيفية انتقال المستخدم بعد النقر عليها.
- ahref=” “ = يُحدد رابط الوجهة. يقع الرابط بين علامتي الاقتباس المزدوجتين.
- الهدف = "" = يحدد ما إذا كان سيتم فتح عنوان URL في علامة تبويب جديدة للمتصفح أو في نفس علامة التبويب. target=”_blank” هو لعلامة التبويب الجديدة و target=”_self” هو للفتح في نفس علامة التبويب.
- rel=” “ = يُحدد علاقة الصفحة الحالية بالصفحة المرتبطة. إذا لم تكن تثق بالصفحة المرتبطة، يمكنك تعريف rel=”nofollow”.
رمز:
<p><a target="_blank" href="https://www.google.com/">Click here</a> to go to Google.
It will open in a new tab.</p>
<p><a target="_self" href="https://www.google.com/">Click here</a>.
It will also take you to Google but will open in the current tab.</p>الإخراج:
علامة الصورة هي علامة أخرى مهمة لا يمكنك تخيل العديد من مواقع الويب التي تعتمد على الصور بدونها.
هي علامة ذاتية الإغلاق. لا تحتاج إلى الإغلاق التقليدي مثل هناك بعض السمات التي تحتاج إلى معرفتها قبل أن تتمكن من استخدامها بشكل صحيح.
- المصدر=” “ هذا لتحديد رابط مصدر الصورة. ضع الرابط بين علامتي الاقتباس.
- alt=” “ = هو اختصار لـ "نص بديل". عندما لا يتم تحميل صورتك، سيُعطي هذا النص للمستخدمين فكرة عن الصورة المفقودة.
- العرض=” “ = يحدد عرض الصورة بالبكسل.
- الارتفاع=” “ = يحدد ارتفاع الصورة بالبكسل.
<p>This is the Googleplex in August 2014.</p>
<p>This image has a width of 500 pixels and a height of 375 pixels.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG"
alt="Google's Headquarter in August 2014" width="500" height="375" />الإخراج:
نصائح: هل تريد إدراج صورة قابلة للنقر؟ أرفق كود الصورة بوسم. شاهد كيف يتم ذلك.
أو
تُستخدم علامة القائمة لإنشاء قائمة من العناصر. تعني القوائم المرتبة (القائمة المرقمة) و تعني القوائم غير المرتبة (النقاط).
عناصر القائمة داخل أو تم وضع علامة عليه بـ . li تعني قائمة. يمكنك الحصول على أي عدد من كما تريد داخل الوالد أو العلامة.
رمز:
<p>This is an ordered list:</p>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<p>This is an unordered list:</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>الإخراج:
تُستخدم وسمة الجدول لإنشاء جدول بيانات. هناك بعض الوسوم الداخلية التي تُحدد رؤوس الجدول والصفوف والأعمدة.
هو الكود الرئيسي الخارجي. في هذا الوسم، يرمز إلى صف الجدول، يرمز إلى عمود الجدول و تعني رأس الجدول.
رمز:
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
<tr>
<td>Jo
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</table>الإخراج:
ملاحظة: القيم داخل الأول هي عناوين. لذا، استخدمنا الذي يطبق تأثير النص الغامق على النص.
تجميع الجداول
يمكنك توسيع وظائف الجدول باستخدام عناصر تجميع الجداول. قد تحتاج أحيانًا إلى إنشاء جداول كبيرة مقسمة إلى صفحات متعددة.
بتجميع بيانات جدولك في رأس ونص وتذييل، يمكنك التمرير بشكل مستقل. سيتم طباعة الرأس والنص في كل صفحة امتد فيها جدولك.
علامات تجميع الجدول هي:
- = لتغليف عناوين الجدول. يُطبع على كل صفحة مُقسّمة من الجدول.
- = لتغليف البيانات الرئيسية للجدول. يمكنك استخدام أي عدد من حسب حاجتك. أ العلامة تعني مجموعة منفصلة من البيانات.
- = لتغليف معلومات تذييل الجدول. يُطبع في كل صفحة مُقسّمة من الجدول.
يرجى ملاحظة أن استخدام التجميع ليس إلزاميًا. يمكنك استخدامه لجعل الجداول الأكبر حجمًا أسهل للقراءة. يستخدم بعض المطورين المتخصصين هذه الوسوم بشكل ملحوظ كمحددات CSS.
فيما يلي كيفية تجميع الجدول الذي قمنا بتوضيحه في ، و :
رمز:
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Profession</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>27</td>
<td>Businessman</td>
</tr>
<tr>
<td>Carol</td>
<td>26</td>
<td>Nurse</td>
</tr>
<tr>
<td>Simone</td>
<td>39</td>
<td>Professor</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Persons:</td>
<td>3</td>
</tr>
</tfoot>
</table>الإخراج:
يُستخدم عنصر النموذج لإنشاء نماذج تفاعلية لصفحات الويب. يحتوي نموذج HTML على عدة عناصر متتالية. على سبيل المثال : ، إلخ.
سمة الإجراء في النموذج بالغة الأهمية. فهي تُشير إلى صفحة خادم أو صفحة خارجية لمعالجة المعلومات. للمعالجة، يجب عليك أولاً تحديد طريقة.
يمكنك استخدام إحدى طريقتين: الحصول (Get) أو النشر (Post). يرسل الحصول (Get) جميع المعلومات بتنسيق URL، بينما يرسل النشر (Post) المعلومات في نص الرسالة.
هناك أنواع عديدة من مُدخلات النماذج. نوع الإدخال الأساسي هو النص، ويُكتب كالتالي: يمكن أن تكون الأنواع أيضًا زر اختيار، أو مربع اختيار، أو بريد إلكتروني، وما إلى ذلك. يجب أن يكون هناك مدخل لنوع الإرسال في الأسفل لإنشاء زر الإرسال.
تُستخدم العلامة لإنشاء العلامات وربطها بالمدخلات. قاعدة ربط العلامات بالمدخلات هي أن يكون لها نفس القيمة في سمة for=” ” في العلامة ونفس قيمة سمة id=” ” في الإدخال.
رمز:
<form action="#">
<label for="firstname">First Name: </label>
<input type="text" id="firstname"><br>
<label for="lastname">Last Name: </label>
<input type="text" id="lastname"><br>
<label for="bio">Short Bio: </label>
<textarea id="bio" rows="10" cols="30" placeholder="Enter your bio here..."></textarea><br>
<label>Gender:</label><br>
<label for="male">Male</label>
<input type="radio" name="gender" id="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female"><br>
<input type="submit" value="Submit">
<form>الإخراج:
ملاحظة: لقد قمت بتوجيه الإجراء إلى قيمة فارغة لأنه لم يكن متصلاً بأي خادم لمعالجة المعلومات.
3. سمات HTML
السمات هي نوع من مُعدِّلات علامات HTML، حيث تُضيف تكوينات جديدة لها.
تبدو السمة مثل "اسم السمة" = "" وتوجد في وسم HTML الافتتاحي. قيمة السمة موجودة بين علامتي اقتباس مزدوجتين.
id=”” و class=””
المعرف والفئة هما مُعرِّفا وسوم HTML. تُسمَّى عناصر HTML المختلفة بأسماء مختلفة باستخدام المُعرِّفات. يمكنك استخدام مُعرِّف فئة واحد لعدة عناصر، ولكن لا يمكنك استخدام مُعرِّف معرف واحد لعدة عناصر.
رمز:
<h1 class="heading">This is the main title</h1>href=””
href هي اختصار لـ "مرجع النص التشعبي". تُوجِّه هذه الكلمات المستخدمين إلى روابط مرجعية. يستخدم وسم المرساة href لتوجيه المستخدمين إلى عنوان URL المقصود.
رمز:
<a href="https://www.google.com/">Google</a>المصدر=””
src هو اختصار لـ "المصدر". يُعرّف هذا الاختصار مصدر الوسائط أو الموارد التي تستخدمها في ملف HTML. يمكن أن يكون المصدر إما رابطًا محليًا أو رابطًا خارجيًا.
رمز:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" />alt=””
alt تعني "بديل". وهو نص احتياطي يُستخدم عند تعذر تحميل عنصر HTML.
رمز:
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0e/Googleplex-Patio-Aug-2014.JPG" alt="Google's Headquarter" />النمط = ""
تُستخدم سمة النمط عادةً في علامات HTML. وهي تؤدي وظيفة CSS داخل وسم HTML. توضع خصائص النمط بين علامتي اقتباس.
رمز:
<h2 style="color:red">This is another title</h2>4. عرض الكود: كتلة مقابل مضمنة
بعض العناصر تبدأ دائمًا في سطر جديد وتشغل كامل العرض المتاح. هذه هي عناصر "الكتلة".
السابق: ، ، - ، النموذج وما إلى ذلك.
بعض العناصر تشغل المساحة المطلوبة فقط ولا تبدأ في سطر جديد. هذه العناصر "مضمنة".
السابق: ، ، , , إلخ.
ستحتاج إلى التمييز بين عناصر الكتل والعناصر المضمنة عند استخدام أنماط CSS. في دليل HTML هذا، هذا ليس ضروريًا جدًا.
رمز:
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h2>This is a H2 heading. It has Block display.</h2>
<h2>This is <u>another</u> H2 heading. Here the underline tag has Inline display.</h2>
</body>
</html>الإخراج:
5. علامة الاقتباس المزدوجة مقابل علامة الاقتباس المفردة في HTML
هذا السؤال واضح جدًا. ما الذي يجب استخدامه في HTML؟ علامة اقتباس مفردة أم علامة اقتباس مزدوجة؟ يبدو أن الناس يستخدمون كليهما، ولكن أيهما الصحيح؟
في HTML، علامتا الاقتباس المفردة والمزدوجة متماثلتان، ولا يُحدثان أي فرق في النتيجة.
يمكنك استخدام أيٍّ منهما. لكن خلطهما في صفحة واحدة يُعدّ ممارسةً سيئة. يجب عليك الالتزام باستخدام أيٍّ منهما.
6. HTML الدلالي مقابل HTML غير الدلالي
HTML الدلالي هو أحدث إصدار من HTML، ويُسمى أيضًا HTML5. وهو النسخة المُطوّرة من HTML غير الدلالي وXHTML.
لماذا يُعد HTML5 أفضل؟ في الإصدارات السابقة، كانت عناصر HTML تُعرَّف بأسماء المعرفات/الفئات. على سبيل المثال: اعتبر مقالا.
في HTML5، يمثل العلامة نفسها كمقالة دون الحاجة إلى أي معرف/معرف فئة.
بفضل HTML5، أصبحت محركات البحث وتطبيقات الويب الأخرى قادرة على فهم صفحات الويب بشكل أفضل. وقد أثبتت المواقع الدلالية فعاليتها في تحسين محركات البحث.
فيما يلي قائمة ببعض علامات HTML5 الشائعة:
- =هذا لتغليف المحتوى الرئيسي الذي تريد عرضه لمشاهديك.
- =هذا مخصص لوضع علامة على جزء الرأس من المحتوى مثل العنوان أو بيانات المؤلف.
- = يحدد محتوى محددًا من قبل المستخدم أو محتوى مستقلًا لمشاهديك.
- = يُمكنه تجميع أي كود، مثل الرأس أو التذييل أو الشريط الجانبي. يُمكن القول إنه الشكل الدلالي لعنصر div.
- = هذا هو المكان الذي ينتمي إليه محتوى التذييل أو إخلاء المسؤولية أو نص حقوق الطبع والنشر.
- = يتيح لك إدراج ملفات الصوت دون أي مشكلة في المكونات الإضافية.
- = مثل يمكنك إدراج مقاطع الفيديو باستخدام هذه العلامة دون مشاكل في البرنامج الإضافي.
سيبدو هيكل HTML5 البسيط على النحو التالي:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first web page</title>
</head>
<body>
<header>
<nav>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>This is the title of the article</h2>
<p>Posted by John Doe</p>
</header>
<p>Content of the article goes here</p>
</article>
</main>
<footer>
<p>Copyright 2025 John Doe</p>
</footer>
</body>
</html>7. التحقق من صحة HTML
يقوم معظم محترفي الويب بالتحقق من صحة الكود بعد الانتهاء منه. لماذا من الضروري التحقق من صحة الكود عندما يعمل بشكل جيد؟
هناك سببان محتملان للتحقق من صحة رموزك:
- سيساعدك هذا على جعل الكود متوافقًا مع مختلف المتصفحات والمنصات. قد لا يُظهر الكود أي خطأ في متصفحك الحالي، ولكنه قد يظهر في متصفح آخر. سيُصلح التحقق من صحة الكود المشكلة.
- قد تتوقف محركات البحث وبرامج الويب الأخرى عن فحص صفحتك إذا احتوت على أخطاء. يمكنك التأكد من خلال التحقق من عدم وجود أي خطأ كبير.
W3C Validator هي الخدمة الأكثر شيوعًا للتحقق من صحة الكود. تتوفر عدة طرق للتحقق من صحة الكود. يمكنك إما تحميل ملف أو إدخال الكود مباشرةً في محرك التحقق الخاص بهم.
اتخاذ الخطوة التالية: من كتابة HTML إلى بناء موقع الويب الخاص بك واستضافته
الآن وقد اكتسبتَ فهمًا عميقًا لأساسيات HTML، فأنتَ على الطريق الصحيح لإنشاء صفحات ويب عملية ومنظمة. سواءً واصلتَ البرمجة يدويًا أو فضّلتَ أسلوبًا أكثر بساطة، ستجد العديد من الأدوات التي تساعدك على إضفاء الحيوية على مشاريعك.
إذا كنت تبحث عن إنشاء مواقع ويب دون الخوض في تفاصيل الكود، ففكر في استكشاف قائمتنا لأفضل منشئي مواقع الويب بدون أكوادتتيح لك هذه المنصات تصميم وإطلاق مواقع ويب احترافية بكل سهولة، باستخدام واجهات السحب والإفلات البديهية - وهي مثالية لتحويل أفكارك إلى حقيقة بسرعة دون التضحية بالمرونة.
لمن هم على استعداد لإطلاق مشاريع HTML الخاصة بهم، فإن اختيار خدمة الاستضافة المناسبة أمر بالغ الأهمية. اطلع على بعض أفضل مزودي استضافة المواقع الثابتة في هذا الدليل للعثور على خيارات بأسعار معقولة تكمل المواقع التي قمت ببرمجتها يدويًا بشكل مثالي.
أيًا كان مسارك، فإن الجمع بين مهاراتك في HTML والأدوات وحلول الاستضافة المناسبة سيُرسي أساس حضورك على الإنترنت. برمجة ممتعة!
