HTML

اقرأ نصًا ذا علاقة بلغة ترميز النص الفائق، في ويكيبيديا.

لغة ترميز النص الفائق (HTML) هي اللغة الأساسية للويب لإنشاء الوثائق والتطبيقات للنشر من خلال شبكه الانترنت .

HTML اختصار ل HyperText Markup Language أو لغه الترميز النصى التشعبى .
تتكون من مجموعه من الاوسمه (tag) .
كل وسم من وسوم HTML يصف محتوى مختلف من الوثيقه .

إنها اللغة المستخدمة لإنشاء صفحات الإنترنت والكلمة اختصار لـ Hyper Text Markup Language وهي ليست لغة برمجة بل هي لغة تستخدم لاعطاء اوامر للمتصفح لارشاده لطريقة عرض المحتوى. فهي مثلاً لا تحتوي على جمل التحكم والدوران، وعند الحاجة لاستخدام هذه الجمل يجب تضمين شيفرات من لغات أخرى كـ Java, JavaScript, CGI . كذلك فهي لا تحتاج إلى مترجم خاص به Compiler وهي غير مرتبطة بنظام تشغيل معين، لأنه يتم تفسيرها وتنفيذ تعليماتها مباشرة من قبل متصفح الإنترنت وبغض النظر عن النظام المستخدم. لذلك فهي لغة بسيطة جداً، وسهلة الفهم والتعلم ولا تحتاج لمعرفة مسبقة بلغات البرمجة والهيكلية المستخدمة فيها. بل ربما كل ما تحتاجه هو القليل من التفكير المنطقي وترتيب الأفكار ... تتكون مفردات لغة Html من شيفرات تسمى TAGS أي الوسوم وهي تستخدم بشكل أزواج وتكتب من اليسار إلى اليمين لغة ترميز النص الفائق أو إتش تي إم إل (HTML) هي لغة حاسوب تستعمل في صناعة مواقع الويب. تشير الأحرف في اسم اللغة إلى عبارة إنجليزية : Hyper Text Markup Language ومعناها ( لغة ترميز النص التشعبي ). تتكون لغة هتمل في مجملها من وسوم (Tags) يحمل كل وسم من هذه الوسوم معني خاص لدي المتصفح .

تاريخ لغة HTML

النسخة الأولى: أنشأ النسخة الأولى من HTML تيم بيرنرز لي ، مخترع شبكة الإنترنت، في أواخر عام 1991.
الاصدار المستقر الحالى : نشرت النسة HTML 4.01 في ديسمبر كانون الأول عام 1999.
العمل الحالي والمستقبلي: يتم نشر المشروع القادم HTML5 بواسطة منظمة W3C

وسوم HTML

وسوم HTML هي كلمات (tags) محاطه بأقواس زاوية وتكون بالشكل التالي :

<tagname> المحتوى </ tagname>

علامات HTML تأتي عادة في أزواج مثل <P> و </ P>
العلامة الأولى في الزوج هي وسم البداية، والعلامة الثانية هي وسم النهاية
يكتب وسم النهايه مثل البداية، ولكن مع شرطه مائلة قبل اسم العلامة
بعض الوسوم تصنف بأنها ذاتية الإغلاق أي أنها لا تحتاج إلى وسم إغلاق مثل وسم السطر الجديد
بعض الأوسمة يمكن أن تكون متداخلة أي أن محتوى الوسم عبارة عن وسم فرعي [1]

بنية وثيقة HTML

<DOCTYPE html!>                 هذه التعلمية للإشارة على أن الملف بصيغة 5 قالب:اختص.
<html>   <script data-ad-client="ca-pub-2782149892832686" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>                       الإعلان عن بداية الوثيقة
<head>                           بداية رأس الوثيقة  
<title>Page Title</title>       عنوان الوثيقة
<head/>                         إغلاق رأس الوثيقة
<body>                          بداية جسم الوثيقة
<body/>                         إغلاق جسم الوثيقة
<html/>                         إغلاق الوثيقة

أساسيات

تعلميات أساسية

نبدأ بالتعليمة:

<DOCTYPE html!>

هذه التعلمية تستخدم للتعرف على أن الملف بصيغة 5قالب:اختص.

نعرف أن اللغة هي قالب:اختص بالوسم التالي الذي نغلقه بـ /

<html> فتح 
<html/> إغلاق

الرأس والجسد

وكما أن للإنسان رأس وجسد أيضاً لصفحة الويب رأس وجسد وأيضاً هي من الوسوم التي تفتح وتغلق :

<head>  فتح 
<head/> إغلاق
<body>  فتح 
<body/> إغلاق

فقرة

لإضافة فقرة نستخدم الوسم الذي هو من الوسوم التي تفتح وتغلق (من دون فواصل ):

إضافة النص الذي نريده
< p/>

الترويسات

الترويسات تستخدم غالباً للعناوين، فيما يلي طريقة كتابة الترويسات من الأكبر إلى الأصغر:

<h1/>ترويسة 1<h1>
<h2/>ترويسة 2<h2>
<h3/>ترويسة 3<h3>
<h4/>ترويسة 4<h4>
<h5/>ترويسة 5<h5>
<h6/>ترويسة 6<h6>

الصورة

هذه من الوسوم التلقائية الإغلاق (لاحظ إغلاقها) أما الـ src لوضع الرابط لمكان تواجد الصورة كالتالي:

<img src="image.png" alt="وصف لصورتي" />

الربط التشعبي

<a href="https://www.google.com" title="google">اضغط هنا تذهب إلى جوجل</a> <script data-ad-client="ca-pub-2782149892832686" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

القوائم الغير متسلسلة

<ul> <li>flower</li> <li>زهرة</li> <li>محمّد صلّى اللّه عليه و سلّم</li> </ul>

القوائم المتسلسلة

<ol> <li>flower</li> <li>زهرة</li> <li>محمّد صلّى اللّه عليه و سلّم</li> </ol>

نمط العناصر

<style color="red" font-family="serief" > محمّد صلّى اللّه عليه و سلّم </style>

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

<الأمر هنا>

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

إرسال الأمر نفسه مع إضافة شرطة مائلة لليمين (/) بعد القوس الأول مباشرة. هكذا :

</الأمر هنا>

و لاستخدام التنسيق على جملة نصية معينة نضع الجملة المطلوبة بين وسم بداية الأمر

و وسم نهاية الأمر. هكذا :

< الأمر هنا>

الجملة النصية المراد تطبيق التنسيق عليها

< الأمر هنا/> و بالإضافة إلى وسوم تنسيق النص فان لغة الهتمل تضم وسوما لإدراج صورة أو خط أفقي

أو جدول أو ملف فلاشي وكذلك وسوما خاصة لإدراج مكونات النماذج. كما أنها تضم وسوما خاصة ببداية كل صفحة ونهايتها.

أهم الوسوم

<html> في لغة هتمل كل صفحة تبدأ بهذا الوسم لإخطار متصفح الويب أن الصفحة التي يتعامل معها بهذه اللغة.

<html/> وسم نهاية أوامر الصفحة.

<head> يأتي هذا الوسم بعد الوسم <html> وهو مسؤول عن معلومات الصفحة (مثل الترميز وعنوان الصفحة الذي يظهر في أعلى المتصفح والكلمات المفتاحية...الخ) وينتهي هذا الوسم ب <head/> .

<body> هذا الوسم مسؤول عما يوجد داخل الصفحة (مثل النصوص والصور وترتيب الصفحة...الخ) وكأغلب الوسوم ينتهي هذا الوسم ب (/) قبل اسم الوسم هكذا: <body/> .

مراجع

* الشركة العربية لخدمات الحاسوب والانترنت

* تطوير الويب

وصلات خارجية

هناك ملفات عن HTML في ويكيميديا كومنز.