لغة ترميز النص الفائق
(أو لغة ترميز النص التشعبي) (بالإنجليزية: HyperText Markup Language) (إختصار إتش تي إم إل HTML)، هي لغة ترميز تستخدم في إنشاء وتصميم صفحات ومواقع الويب، وتعتبر هذه اللّغة من أقدم اللّغات وأوسعها استخداما في تصميم صفحات الويب. HTML هيكل صفحة الويب وتعطي متصفّح الإنترنت وصفا لكيفيّة عرضه لمحتوياتها، يمكن أن تساعده تقنيات مثل أوراق الأنماط المتتالية (CSS) ولغات البرمجة النصية مثل جافا سكريبت تستقبل متصفحات الويب مستندات HTML من خادم الويب أو من نظام الملفات وتعرضها، ووظيفة لغة HTML هي وصف بنية صفحات الويب هيكليًا.
- العناصر في HTML هي اللبنة الأساسية لبناء مستندات HTML، إذ نستطيع عبرها إضافة الصور والكائنات التفاعلية مثل النماذج أو ملفات الفيديو والصوت؛ وتستطيع أيضًا إنشاء مستندات منظمة عبر استخدام وسوم للتصريح عن الفقرات والعناوين والروابط والاقتباسات والجداول وغيرها.
- يمكن للغة HTML أن تُضمِّن برامجَ مكتوبةٍ بلغات مثل جافا سكريبت لتعديل سلوك ومحتوى صفحات الويب؛ وإضافة شيفرات أوراق الأنماط المتتالية CSS تؤدي إلى تعريف شكل وتخطيط المحتوى.
استخدامات لغة HTMl
- تستخدم HTML في توصيف صفحات الويب فهي اللغة الخاصة بتصميم المواقع وإنشائها من الأساس.
- من أساسيات البرمجة فبدونها لن تظهر المواقع بالشكل الحالي ، حيث تعرف HTML متصفح موقع الإنترنت بمواقع محتويات الموقع.
- وهذه اللغة هي اللغة التي تصمم بها مواقع وصفحات الإنترنت بسهولة من خلال الاستعانة ب notepad أو برامج مشابهة لذلك.
اساسيات لغة HTML اللغة المستخدمة في انشاء المواقع
عند انشاء اي موقع يجب كتابته بلغة برمجية اسمها html فمثلاً عندما تريد اظهار جملة معينة على صفحة ويب يجب ان يكون في البداية قد برمجت هذه الصفحة على لغة html و ليكون الشرح مفهوم سنفتح المفكرة الالكترونية و لفتحها ابحث عنها عند مكان البحث في حاسوبك الالكتروني , بعد فتحها سنبدأ كتابة اساسيات درسنا وهي هذه الاكواد :
<html>
<head>
</head>
<body>
</body>
</html>
- الآن قم بحفظ هذا الملف باسم ” index.html ” ، ثم قم بتشغيل متصفحك ، و من قائمة ملف أختر الأمر ” فتح ” و من مربع الحوار أختر الأمر “Browse” أو استعرض و ابحث عن الملف index.html الذي قمت بتحريره الآن قم باختياره ثم قم بالضغط على زر فتح أو ” Open ” … الآن يمكنك مشاهدة عنوان الملف في مربع الحوار اضغط ok سوف يقوم المتصفح بعرض الصفحة الآن … ماذا ترى ؟
شرح المثال
- من خلال المثال السابق نجد مجموعة من وسوم HTML سوف نقوم بشرحها الآن حيث نجد أن ملف HTML يجب أن يبدأ بالوسم <html> فهذا الوسم يخبر المتصفح هذا هو بداية ملف HTML ، كما يجب أن ينتهي الملف بالوسم </html> و هذا الوسم يخبر المتصفح بأن هذه هي نهاية ملف HTML.
أي أن جميع ملفات HTML يجب أن يكون لها بداية و نهاية ، البداية تكون من خلال الوسم <html> و النهاية تكون من خلال الوسم </html>.
و ملفات الـ HTML يمكن تقسيمها إلى جزئين رئيسيين هما الـ head أو ما يسمي برأس الملف و جزء الـ body أو ما يسمى بجسم الملف. - رأس الملف الـ head الجزء المحصور بين الوسمين <head> و </head> يسمى رأس الصفحة ، و النص الموجود بين هذين الوسمين هو عبارة عن معلومات رأس الصفحة ، و تلك المعلومات لا يتم عرضها داخل نافذة المتصفح. أما النص الموجود بين الوسمين <title> و </title> هو عبارة عن عنوان الصفحة ، هذا العنوان يتم عرضه عنوان المتصفح ” هو الشريط الافقي الموجود أعلى شاشة المتصفح “.
- جسم الملف الـ body الجزء الموجود بين الوسمين <body> و </body> هو ما يسمى بجسم الملف ، و النص الموجود بين هذين الوسمين هو ما يعرض داخل نافذة المتصفح . أما النص الموجود بين الوسم <b> و </b> فسوف يعرض من خلال المتصفح كخط عريض ، و هو ما سوف نتعرف عليه قريباً عند شرح الجزء المتعلق بالخطوط.
- امتداد ملفات الـ HTML عند حفظ ملفات HTML يجب أن تقوم باستخدام الامتداد .htm أو الامتداد .html ، في الماضي كنا مضطرين لاستخدام الامتداد .htm فقط نظراً لأن البرامج كانت لا تسمح إلا بثلاث حروف فقط كامتداد للملفات. و لكن مع الإصدارات الحديثة للبرمجيات فمن الأفضل أن نستخدم الامتداد .html
قائمة كاملة بجميع وسوم HTML
هذا الوسم يحدد نوع المستند
<DOCTYPE!>
وسم خاص بمعلومات صفحة الويب
<head>
يحتوي على جميع العناصر المرئية
<body>
يستخدم للروابط النصية
<a>
تعريف اختصار
<abbr>
تعريف عنوان
<address>
تحديد منطقة في الصورة
<area>
تحديد نص عريض
<b>
تثبيت رابط نصي لجميع عناصرا لصفحة
<base>
تحديد اتجاه النص
<bdo>
تحديد نص أكبر
<big>
تحديد اقتباس
<blockquote>
للنزول سطر جديد
<br>
زر قابل للنقر
<button>
شرح مجموعة عناصر في نموذج
<caption>
توسيط العناصر
<center>
تحديد عنوان للعمل الفني
<cite>
تعريف كود كمبيوتر
<code>
تحديد خصائص عمود في جدول
<col>
تحديد مجموعة أعمدة في تنسيق الجدول
<colgroup>
شرح عنصر في القائمة
<dd>
تحديد كلمة تم حذفها من المستند
<del>
تعريف مصطلح
<dfn>
عرض محتوى مجلد او ملف
<dir>
تقسيم صفحة الويب
<div>
قائمة شرح
<dl>
تعريف عنصر في قائمة
<dt>
تحديد نص مؤكد
<em>
تحديد مجموعة من العناصر مرتبط ببعضها في النموذج
<fieldset>
نموذج
<form>
عناوين
<h1> الى <h6>
عمل فاصل في الصفحة
<hr>
جعل النص مائل
<i>
عمل فريم أو نداء صفحة أخرى
<iframe>
صورة
<img>
مربع في نموذج
<input>
تحديد كلمة تمت إضافتها للنص
<ins>
كود مدخل من لوحة المفاتيح
<kbd>
توضيح عنصر في نموذج
<label>
عنصر في قائمة
<li>
عمل ارتباط مع عنصر خارجي
<link>
قائمة من الاوامر
<menu>
تحديد بيانات للصفحة
<meta>
متصفح الزار لا يدعم السكريبت
<noscript>
تضمين عنصر خارجي
<object>
تعريف قائمة مرتبة
<ol>
تعريف قائمة مرتبطة ببعضها كمجموعة
<optgroup>
عنصر في قائمة خيارات
<option>
تعريف فقرة
<p>
تعريف باراميتر لارسالها للبرامج
<param>
عنصر مسبق التنسيق
<pre>
سؤال قصير
<q>
تحديد كلمة لم تعد صحيحة
<s>
أخذ ناتج متغير من برنامج حاسوب
<samp>
عمل سكريبت في متصفح الزائر
<script>
تعريف قائمة منسدلة
<select>
تعريف نص صغير
<small>
تعريف قسم في المستند
<span>
تعريف نص في غاية الأهمية
<strong>
تعريف عناصر تنسيق للصفحة CSS
<style>
عناصر جدول
<tbody>
خلية في جدول
<td>
حقل لادخال نص
<textarea>
نهاية الجدول أو ذيل الجدول
<tfooter>
خلية رأس الجدول
<th>
بداية الجدول أو اول صف في الجدول
<thead>
عنوان الصفحة
<htitle>
تعريف صف في جدول
<tr>
عمل خط اسفل الكلمة
<u>
تعريف قائمة غير مرتبة
<ul>
تعريف متغير
<var>
هذه الوسوم خاصة بلغة HTML5
الغرض من الوسم
الوسم
مقالة
<article>
قائمة جانبية او عنصر جانبي
<aside>
الصوت
<audio>
ترتيب الكلام اذا كان باتجاهات مختلفة
<bdi>
رسم العناصر
<canvas>
يستخدم لعرض بيانات قائمة منسدلة
<datalist>
يستخدم لعرض تفاصيل أكثر عن معلومة
<details>
عرض مربع معلومات
<dialog>
تضمين عنصر خارجي
<embed>
تعريف بصورة أو نص توضيحي
<figcaption>
يحتوي النص التوضيحي
<figure>
أسفل الصفحة أو فوتر
<footer>
راس الصفحة أو هيدر
<header>
توليد شيفرة سرية تستخدم في النماذج
<keygen>
عرض المحتوى الرئيسي
<main>
عمل علامة عى نص معين
<mark>
تخصيص القائمة عند الضغط على الزر الأيمن للفأرة
<menuitem>
عرض قياسات
<meter>
عرض مخرجات تطبيق خارجي
<output>
عرض التقدم لعملية معينة
<progress>
إنشاء قسم في المقالة
<section>
تحتوي على عناصر ميديا
<source>
عمل توضيح قبل عمل <details>
<summary>
تستخدم لعرض الوقت
<time>
تعريف مقطع للفديو والصوت
<track>
تستخدم للفديو
<video>
تعريف المكان المحتمل أن يستقطع وتنزل سطر جديد
<wbr>
