English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

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

وسائل الاعلام في HTML

دليل مرجعي لـ HTML

دليل الأساسيات في HTML5

API في HTML5

وسائل الاعلام في HTML5

ما هو HTML

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>دليل الأساسيات(oldtoolbag.com)</title>
</head>
<body>
<h1>عنوان صفحتي الأولى</h1>
<p>فقرة صفحتي الأولى.</p>
</body>
</html>
اختبار لرؤية <</-->

تحليل المثال

  • يُستخدم <!DOCTYPE html> لتعريف مستند HTML5

  • تعتبر علامة <html> عنصر جذور صفحة الويب HTML

  • تتضمن علامة <head> بيانات المستند (meta) مثل <meta charset="utf-8"> التي تعرف تنسيق تشفير الصفحة على utf-8.

  • ت�述 علامة <title> عنوان المستند

  • تتضمن علامة <body> محتويات الصفحة المرئية

  • تعرف علامة <h1> على عنوان كبير

  • تعرف علامة <p> على فقرة

ملاحظة: في مساحة الويب الفارغة، اضغط بزر الماوس الأيمن وأختر "مصدر صفحة الويب" أو اضغط على مفتاح F12 لفتح وضع التتبع، يمكنك عرض مصدر الصفحة.

ما هو HTML?

يُستخدم HTML لوصف لغة صفحات الويب.

  • HTML تعني لغة العلامات التفاعلية: HyperText Markup Language

  • HTML ليس لغة برمجة، بل هو لغة علامات

  • اللغة العلاماتية هي مجموعة من علامات العلامات (markup tag)

  • يستخدم HTML علامات العلامات لوصف صفحات الويب

  • يحتوي مستند HTML على علامات HTML ومحتويات النص

  • يُسمى مستند HTML أيضًا بصفحة الويب

علامات HTML

تُسمى علامات العلامات عادةً بعلامات HTML (HTML tag).

  • تكون علامات HTML محاطة بعلامات التكوين، مثل <html>

  • عادة ما تكون علامات HTML تظهر كزوجين، مثل <b> و </b>

  • العلامة الأولى في زوج العلامات هي علامة البداية، والثانية هي علامة النهاية

  • تسمى علامات البداية والنهاية أيضًا بعلامات المفتوحة والخلفية

<علامة>محتوى</علامة>

عناصر HTML

"علامة HTML" و "عنصر HTML" تعبران عادة عن نفس المعنى.

لكن بصراحة، عنصر HTML يحتوي على علامة البداية والنهاية، مثل مثال التالي:

عناصر HTML:

<p>هذا هو سطر.</p>

المتصفح الويب

المتصفح الويب (مثل متصفح جوجل، إنترنت إكسبلورر، فيرفوكس، سافاري) هو مخصص لقراءة ملفات HTML وإظهارها كصفحات ويب.

المتصفح لا يعرض علامات HTML مباشرة، ولكن يمكن استخدامه لتحديد كيفية عرض محتويات صفحة الويب للمستخدمين:


بنية صفحة الويب HTML

إليك هيكل صفحة HTML المرئي:

<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>
<h1>هذا هو عنوان.</h1>
<p>هذا هو سطر.</p>
<p>هذا هو سطر آخر.</p>
</body>
</html>
فقط منطقة <body> (الجزء الأبيض) ستعرض في المتصفح.

إصدارات HTML

منذ ظهور الإنترنت في بدايته، ظهرت العديد من إصدارات HTML:

الإصدارتاريخ الإصدار
HTML1991
HTML+1993
HTML 2.01995
HTML 3.21997
HTML 4.011999
XHTML 1.02000
HTML52012
XHTML52013

إعلان !DOCTYPE

يعد إعلان !DOCTYPE مفيدًا لعرض الصفحة بشكل صحيح في المتصفح.

هناك العديد من الملفات المختلفة على الإنترنت، إذا تم إعلان إصدار HTML بشكل صحيح، يمكن للمتصفح عرض محتويات الصفحة بشكل صحيح.

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

<!DOCTYPE html> <!DOCTYPE HTML> <!doctype html> <!Doctype Html>

إعلان عام

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

رؤية نوع الإعلان الكامل للصفحةدليل DOCTYPE。

ترميز النص الصيني

في معظم المتصفحات، إذا كتبنا نصاً صينياً مباشرة، قد يظهر بهلوانية، في هذه الحالة نحتاج إلى إعلان النص كـ UTF-8 أو GBK في رأس الصفحة.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>صفحتي بترميز UTF-8 (oldtoolbag.com)</title>
</head>
<body>
　
<h1>عنوان صفحتي الأولى بترميز UTF-8</h1>
　
<p>فقرة صفحة UTF-8 الإ编码 الأولى.</p>
　
</body>
</html>
اختبار لرؤية <</-->

محررات HTML الشائعةتعليمية HTML الأساسية