دورة HTML - الدرس 1 : مقدمة حول لغة HTML
السلام عليكم ورحمة الله وبركاته أصدقاء وصديقات مدونة تكنوفيليا للمعلوميات يسعدني أن أقدم لكم سلسلة دروس دورة HTML ونبدأ على بركة الله بالدرس الأول :
1- ماذا نقصد بلغة HTML ؟
- HTML هي لغة الترميز القياسية لإنشاء صفحات الويب
- تصف لغة HTML بنية صفحات الويب باستخدام الترميز
- تعد عناصر لغةHTML هي وحدات البناء لصفحات HTML
- نمثل عناصر لغة HTML بالعلامات
- علامات لغة HTML هي أجزاء من المحتوى مثل "عنوان" و "فقرة" و "جدول" وهكذا
- لا تعرض المتصفحات علامات لغة HTML ، ولكنها تستخدم هذه العلامات لعرض محتوى الصفحة
مثال لمستند HTML :
2- مكونات مستند HTML
<DOCTYPE html !> : وهو أول عناصر لغة HTML لأنه يعرف لك نوعية المستند بمعنى أنه مستند بلغة HTML5
<html> : وهو العنصر الأساسي والجذري لصفحة HTML
<head> : يحتوي هذا العنصر على معلومات تعريف حول المستند أو ما يطلق عليها بالميتا
<title> : يحدد هذا العنصر عنوانا لمستند HTML
<body> : يتضمن هذا العنصر محتوى الصفحة المرئي
<h1> : يعرف لك هذا العنصر عنوانا كبيرا
<p> : يعرف لك هذا العنصر فقرة
3- علامات HTML
تأتي علامات HTML عادة في أزواج مثل : <p> و <p/>
العلامة الأولى في الزوج هي علامة البدء < tagname> ، والعلامة الثانية هي علامة النهاية <tagname/>
تتم كتابة علامة النهاية مثل علامة البدء، ولكن يتم إدراج شرطة مائلة قبل اسم العلامة هكذا: <tagname/>
ملاحظة : تسمى أيضا علامة البداية بعلامة الفتح، وتسمى علامة النهاية بعلامة الإغلاق.
4- متصفحات الويب
إن الغرض من متصفحات الويب : كروم، فايرفوكس أو أنترنت إكسبوري هو قراءة مستندات HTML وعرضها.
لا يعرض المتصفح علامات HTML ، ولكنه يستخدمها لتحديد كيفية عرض المستند كما في الصورة أدناه :
ملاحظة : يعرض المتصفح كنتيجة لهذه الأكواد فقط المحتوى الموجود داخل القسم <body> ( المساحة البيضاء في الصورة أعلاه )
6- استعلام < DOCTYPE !>
يمثل الإستعلام <DOCTYPE !> نوع المستند، ويساعد المتصفحات على عرض صفحات الويب بشكل صحيح
يجب أن يظهر هذا الإستعلام مرة واحدة فقط، في أعلى الصفحة قبل أي علامات HTML .
صيغة استعلام <DOCTYPE !> في لغة HTML5 هي :
< DOCTYPE html !>
7- إصدارات HTML
تغيرت العديد من إصدارات HTML مع مرور السنوات وحركية قطاع الويب وآخر إصدار هو الذي نعمل به حاليا : HTML5
هكذا نكون قد وصلنا إلى نهاية درسنا الأول من سلسلة دروس دورة HTML على مدونة تكنوفيليا للمعلوميات وإلى أن ألقاكم في الدرس الثاني بإذن الله لا تنسوا مشاركة دروسنا على منصات التواصل الإجتماعي. في أمان الله.
لاحقا - الدرس 2 : برامج تحرير HTML
1- ماذا نقصد بلغة HTML ؟
- HTML هي لغة الترميز القياسية لإنشاء صفحات الويب
- تصف لغة HTML بنية صفحات الويب باستخدام الترميز
- تعد عناصر لغةHTML هي وحدات البناء لصفحات HTML
- نمثل عناصر لغة HTML بالعلامات
- علامات لغة HTML هي أجزاء من المحتوى مثل "عنوان" و "فقرة" و "جدول" وهكذا
- لا تعرض المتصفحات علامات لغة HTML ، ولكنها تستخدم هذه العلامات لعرض محتوى الصفحة
مثال لمستند HTML :
2- مكونات مستند HTML
<DOCTYPE html !> : وهو أول عناصر لغة HTML لأنه يعرف لك نوعية المستند بمعنى أنه مستند بلغة HTML5
<html> : وهو العنصر الأساسي والجذري لصفحة HTML
<head> : يحتوي هذا العنصر على معلومات تعريف حول المستند أو ما يطلق عليها بالميتا
<title> : يحدد هذا العنصر عنوانا لمستند HTML
<body> : يتضمن هذا العنصر محتوى الصفحة المرئي
<h1> : يعرف لك هذا العنصر عنوانا كبيرا
<p> : يعرف لك هذا العنصر فقرة
3- علامات HTML
تأتي علامات HTML عادة في أزواج مثل : <p> و <p/>
العلامة الأولى في الزوج هي علامة البدء < tagname> ، والعلامة الثانية هي علامة النهاية <tagname/>
تتم كتابة علامة النهاية مثل علامة البدء، ولكن يتم إدراج شرطة مائلة قبل اسم العلامة هكذا: <tagname/>
ملاحظة : تسمى أيضا علامة البداية بعلامة الفتح، وتسمى علامة النهاية بعلامة الإغلاق.
4- متصفحات الويب
إن الغرض من متصفحات الويب : كروم، فايرفوكس أو أنترنت إكسبوري هو قراءة مستندات HTML وعرضها.
لا يعرض المتصفح علامات HTML ، ولكنه يستخدمها لتحديد كيفية عرض المستند كما في الصورة أدناه :
5- هيكل صفحة HTML: في ما يلي تصميم هيكل صفحة HTML
6- استعلام < DOCTYPE !>
يمثل الإستعلام <DOCTYPE !> نوع المستند، ويساعد المتصفحات على عرض صفحات الويب بشكل صحيح
يجب أن يظهر هذا الإستعلام مرة واحدة فقط، في أعلى الصفحة قبل أي علامات HTML .
صيغة استعلام <DOCTYPE !> في لغة HTML5 هي :
< DOCTYPE html !>
7- إصدارات HTML
تغيرت العديد من إصدارات HTML مع مرور السنوات وحركية قطاع الويب وآخر إصدار هو الذي نعمل به حاليا : HTML5
هكذا نكون قد وصلنا إلى نهاية درسنا الأول من سلسلة دروس دورة HTML على مدونة تكنوفيليا للمعلوميات وإلى أن ألقاكم في الدرس الثاني بإذن الله لا تنسوا مشاركة دروسنا على منصات التواصل الإجتماعي. في أمان الله.
لاحقا - الدرس 2 : برامج تحرير HTML
اترك تعليقك