مقدمة الاتش تي ام ال HTML في دورة التعليم

الدرس الأول من دورة تعلم لغة الاتش تي ام ال أو HTML أو هتمل و هو عبارة عن مقدمة عن لغة الاتش تي ام ال .

ما هي HTML ؟

إن الاتش تي ام ال هي عبارة عن لغة ترميز لوصف الوثائق علي شبكة الإنترنت (صفحات الويب) .

  1. HTML معناها لغة توصيف النص التشعبي و بالإنجليزية Hyper Text Markup Language .
  2. وصفت وثائق HTML بالعلامات HTML .
  3. يصف كل علامة HTML محتوى وثيقة مختلفة .

مستند هتمل HTML صغير

مثال

[code]<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>[/code]

و سوف تظهر بهذا الشكل

تعليم لغة HTML

تعليم لغة HTML

توضيح محتوي المثال

  1. <!DOCTYPE html> هي إعلان إن هذا المستند يقوم بإستخدام لغة HTML يعني إنك تقوم بالإبلاغ إنك في هذا الملف تستخدم الاتش تي ام ال .
  2. النص الموجود بين علامة <HTML> و </HTML> هو عبارة عن مستند HTML .
  3. النص بين <head> و </head> عبارة عن معلومات حول المستند .
  4. النص بين <title> و </title> عبارة عن عنوان للمستند .
  5. النص بين <body> و </body> يكون به محتوي الصفحة الذي سوف يراه الناس .
  6. النص بين <H1> و </h1> عبارة عن عنوان بداخل الصفحة التي سوف يراه الناس مثل My First Heading الموجودة بالأعلي .
  7. النص بين <P> و </P> هي عبارة عن فقرة تقوم الناس بمشاهدتها و قراءتها مثل My First Paragraph الموجودة بالمثال الذي بالأعلي .

باستخدام هذا الوصف، سوف يعرض متصفح الويب مستند مع عنوان و فقرة كما موضح بالمثال الذي بالأعلي .

علامات الـ HTML

علامات HTML كلمات (أسماء العلامات) محاطة بأقواس زاوية :

<tagname>المحتوي يكون هنا …</tagname>

  1. علامات HTML تأتي عادة في أزواج مثل <P> و </P> .
  2. العلامة الأولى في الزوج هو وسم البداية، العلامة الثانية هي وسم النهاية .
  3. يتم كتابة وسم النهاية مثل وسم البداية و لكن مغ اختلاف اضافة علامة مائلة (/) قبل اسم وسم النهاية هكذا </P> .

و تسمي وسم البداية أو علامة الافتتاح , و وسم النهاية أو علامة النهاية .

متصفحات الانترنت

الغرض من متصفحات الويب (جوجل كروم ، إنترنت إكسبلورر ، فايرفوكس ، و سفاري) هي قراءة مستندات HTML وعرضها .

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

YourColor.Net

هيكل لصفحة HTML

و هذا تصور لهيكل صفحة HTML :

تعلم لغة ال html

تعلم لغة ال html

ملاحظة مهم : يتم عرض المحتوي الموجود بين وسم <body> و </body> الموجودة بالمنطقة البيضاء فقط .

اعلان <!DOCTYPE>

إعلان <!DOCTYPE> يمثل نوع الوثيقة ، ويساعد المتصفح في عرض صفحة الويب بشكل صحيح و سليم . يجب أن يظهر مرة واحدة فقط ، في الجزء العلوي من الصفحة (قبل أية علامات HTML) .

يوجد أنواع مستندات مختلفة , لعرض صفحة الويب بشكل صحيح و سليم يجب علي المتصفح يعرف ما النوع و الإصدار المستخدم بهذه الصفحة . إعلان <!DOCTYPE> ليست حساسة لحالة الأحرف. جميع الحالات تكون مقبولة :

[code]<!DOCTYPE html>

<!doctype HTML>[/code]

إعلانات <!DOCTYPE> المشتركة

HTML5 اتش تي ام ال 5

[code]<!DOCTYPE html>[/code]

HTML 4.01 اتش تي ام ال 4.01

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

XHTML 1.0 اكس اتش تي ام ال 1.0

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

مهم : كل الدروس والأمثلة في ورشة لونك استخدام HTML5 .

إصدارات الـ HTML

الاصدار السنة
HTML اتش تي ام ال 1991
HTML 2.0 اتش تي ام ال 2.0 1995
HTML 3.2 اتش تي ام ال 3.2 1997
HTML 4.01 اتش تي ام ال 4.01 1999
XHTML اكس اتش تي ام ال 2000
HTML5 اتش تي ام ال 5 2014

الدرس التالي : برامج تحرير HTML
باقي الدروس : دورة تعلم HTML اتش تي ام ال مجانا