بسم الله الرحمن الرحيم
شرح اكواد الـ HTML وخصائصها
في هذا الموضوع أنقل لكم شرح لاكواد الـ HTML وخصائصها وسيفيد هذا الموضوع من يقوم بمتابعة الدورة التي بدأت بها في تكويد استايلات احلى منتدى
وهذا الموضوع منفصل عن الدورة ونقلته لكم للفائدة
تعريف HTML
إن html هي لغة من لغات البرمجة حيث أنها تستخدم لإنشاء صفحات موقع الإنترنت والتي تُعرض عن طريق أحد برامج مستعرضات الإنترنت، ولكن يجدر بنا التنويه أنها ليست لغة برمجية بالمعنى والشكل المتعارفين عليه في لغات البرمجة الأخرى مثل لغة C، فلها نمطها الخاص حيث أنها لا تحتوي على جمل الدوران وجمل التحكم، ويجب وضعها في حال اضطرارية استخدام هذه الجمل في شيفرات من لغات أخرى مثل java ،javaScript ،C.
تتميز لغة HTML بأنها لا تحتاج إلى مترجم خاص يتضمن Compiler، لهذا فهي تعتبر لغة برمجية سهلة الفهم والتنفيذ، ولأنها لا تتطلب معرفة سابقة بلغات البرمجة، فمن متطلباتها فقط التفكير المنطقي بالإضافة إلى ترتيب الأفكار، وإن كلمة HTML هي اختصار لــ Language Markup Text Hyper.
أوامر وأكواد HTML مع الشرح
إن الأمر يكتب في بداية الكود حتى يشير إلى أن المستند مكتوباً بلغة html وإن كود هذه اللغة البرمجية يقسم إلى قسمين هما:
- head : وهو المنطقة المخصصة لكتابة معلومات المتصفح حول الصفحة مثل عنوان الصفحة.
- body : وهو المنقطة المخصصة لكتابة المحتوى الذي سيكون داخل الصفحة.
وإن أكواد لغة HTML هي:
الكود:
<DOCTYPE!> يحدد هذا الوسم نوع المستند.
<html> ويتم وضعه في بداية الملف لأنه يدل على اللغة البرمجية المستخدمة.
<head> وهو كود خاص برأس الصفحة حيث أنه يتضمن عنوان الموقع الذي سيظهر في تبويب الموقع، بالإضافة إلى أنه يحتوي على المعلومات الإضافة للصفحة مثل الكلمات المفتاحية وغيرها من الأمور التي لا تكون متضمنة ضمن المحتوى.
<title> وهو الكود المستخدم لتنسيق وكتابة عنوان نافذة الصحفة.
<body> وهو الوسم الذي يحتوي على كل مكونات الموقع، فيعتبر جسم الموقع، ويكتب فيه ما يلي:
bhcolor=”ffff00″ أو bgcolor=yellow ويستخدم لتحديد لون الصفحة لهذا يجب كتابته بالشكل التالي: <“body bgcolor=”ffff00>.
background=”نكتب اسم الصور ة أو امتداد لها”، ويعمل في تحديد صورة خلفية للصفحة ويجب كتابته بالشكل التالي مع العلم أن ما بين قوسين يتغير حسب اسم الصورة<body background=”image.jpg”.
<A> وسم خاص بالارتباط التشعبي النصي مثل <a href=”http://www.almrsal.com”>تفضل بزيارة موقع المرسال</a>.
<abbr> يعمل على تعريف الاختصار.
<address> هذا الوسم وظيفته تعريف العنوان.
<area> يعمل على تحديد منطقة محددة في الصورة.
<article> وهو وسم خاص بالمقالات.
<base> وظيفته تثبيت رابط نصي لجميع العناصر الموجودة في الصفحة.
<b> وسم لتغيير الخط وجعله سميكاً.
<br> وسم بداية سطر جديد.
<u> وهو الوسم الذي يختص بالكتابة ويضع خط تحتها.
<i> وهو الوسم الذي يجعل الخط مائلاً.
<button> وهو الوسم الخاص لإضافة زر.
<h1> وهو الوسم الخاص بترويسة العنوان الرئيسي.
<h6> وهو الوسم الخاص بترويسة العنوان الفرعي.
<bdo> يعمل على تحديد اتجاه النص.
<big> يعمل على التحكم في حجم النص وجعله أكبر.
<blockquote> يقوم هذا الوسم بتحديد اقتباس.
<caption> يعمل على شرح مجموعة من العناصر في نموذج مخصص ويتم كتابته بعد <table> ويختص بإضافة عنوان رئيسي للصفحة. .
<center> يقوم هذا الوسم بتوسيط العناصر.
<textarea> وهو الوسم الذي يقوم بعمل منطقة كتابة نص مع تحديد المسافة والمساحة.
<sub>يستخدم لجعل الكلمة أسفل السطر.
<sup> يستخدم لجعل الكلمة أعلى السطر.
<span> يعمل هذا الوسم على تنسيق كلمات داخل فقرة كاملة كتغيير اللون أو تغيير نوع الخط، بالإضافة إلى العمل على تنسيق الفقرة بأكملها ولكن تريد أن تستثني مقطع أو كلمة معينة.
<small> يعمل على كتابة النص بحجم صغير.
<s> يعمل هذا الوسم عندما نريد أن نشطب كلمة.
<q> يعمل هذا الوسم على وضع وتحديد علامات تنصيص حول الفقرة.
<pre> يعمل على وضع النص المكتوب بحجم ومسافات ثابتة، بالإضافة إلى أنه يعمل المسافات بواسطة استخدام المسطرة وعمل الفواصل.
<font> يستخدم مع النصوص ويتحكم في خصائص الخط بالإضافة إلى أنه يقوم بتلوينه.
<center> يعمل على توسيط الفقرات بشكل عام في الصفحة.
<Hn> يستخدم هذا الوسم لتمييز العناوين، بالإضافة إلى العمل على تصغير النص المتواجد بداخله.
<ol> يعمل على إضافة قوائم متسلسلة تعداد رقمي أو تعداد حرفي.
<UL> يعمل على إضافة قوائم غير متسلسلة أي تعداد نقطي.
<marquee> يعمل على تحريك النص أو الصور ونستطيع أن نضيف داخل هذا الوسم مايلي:
bgcolor=red لتحديد لون خلفية النص أو لون خلفية الصورة المتحركة.
width=”180″ يعمل على تحديد عرض مجال تحريك الصورة أو تحريك النص.
Height=”180″ يعمل على تحديد طول مجال تحريك لصورة أو النص.
align=”left” لتحديد المحاذاة العامودية للنص وممكن أن تكون لليسار أو لليمين أو في الوسط.
“vspace=”20 تحدد المسافة العامودية التي تفصل بين النص والحافة العليا والسفلى.
“Hspace=”20 يعمل على تحديد المسافة الأفقية التي ت فصل بين النص والحافة العليا والحافة السفلى.
“bahavior= “slide يحدد سلوك النص أو الصورة من جانب إلى آخر.
<table> وهو وسم أو كود تعريف الجداول وفيه نستطيع أن نكتب بعض التعليمات التي تتحكم في الإطار وعرض الجدول بالإضافة إلى طوله وتحديد المسافات ما بين خلاياه.
<td> وهذا الوسم وظيفته تعريف الخلية في الجدول.
<th> تكتب بعد <table> وهو مختص بإضافة عنوان رئيسي للصفحة.
<FORM> وهو وسم رئيسي وأساسي لأنه يعمل على إضافة النماذج.
وظائف لغة html
إن الوظيفة الأساسية للغة html هي إنشاء صفحة ويب والتي تصبح من خلال أوامر وأكواد خاصة وتسمى أيضاً بالوسوم، حيث أن هذه الصفحة تعمل بواسطة برنامج مستعرض الإنترنت التي تقوم بتنفيذ هذه الأكواد ولإظهار آثارها على صفحة المستعرض، وإن وظائف لغة البرمجة html هي:
- هي التي تعمل على وصف بنية صفحات الويب هيكلياً.
- تحتوي لغة html على عناصر نستطيع عن طريقها إضافة الصور والكائنات التفاعلية.
- تعمل على إنشاء مستندات عن طريق الوسوم التي تشير إلى الفقرات والعناوين بالإضافة إلى أنها تشير إلى الاقتباسات والجداول والروابط.
- من خلال هذه اللغة البرمجية نستطيع تنسيق الصفحة واستخدام الألوان والخلفيات.
- تسمح بإدراج الصور والرسومات بالإضافة إلى التحكم بأحجام وأبعاد هذه الصور.
- تسمح بإدراج روابط ووصلات تشعبية
جميع خصائص HTML
إن هناك مميزات وعيوب لغة HTML حيث أن من سلبيات استخدام html في برمجة صفحات الويب هو أنها لا تسمح للمستخدم بأن ينفذ المنطق، ولكن هناك خصائص ومميزات للغة البرمجة html تتجلى في:- إن هذه اللغة البرمجية لا تحتاج إلى برامج حتى يتم تصميمها، فهي تحتاج فقط إلى مفكرة أو إلى برنامج الدفتر.
- تتميز بسهولة تعلمها فهي سهلة وبسيطة.
- من خلالها يمكن إضافة أي تعديل للموقع بكل سهولة.
- تسمح بالكتابة باللغة العربية.
- تتميز بالقدرة على إضافة نصوص برمجية مثل نصوص الجافا أو نصوص DHTML.
- من خلال HTML نستطيع التحكم في خصائص صفحة الويب.
- تعمل على ترجمة النصوص البرمجية إلى اللغة العربية.
انتهى الشرح وان شاء الله تكون الفائدة عمت وقدرتوا تفهموا اللغه بشكل مبسط وجيد
منقول من موقع المرسال
بالتوفيق للجميع
والسلام ختام
