- لغة HTML هى لغة مخصصة لبناء الهيكل العام للموقع , مثل الازرار والقوائم والروابط و النصوص وغيرها .
- لا يوجد موقع يعمل بدون HTML فهى اساسية فى اي موقع .
- لغة HTML سهلة كونها لغة تصف الصفحة ولا تملك المفاهيم الاساسية للغات البرمجة المتقدمة .
محتويات المقالة :
- الهيكل العام
- نبذة عن اللغة
- التعليقات فى اللغة
- بعض قواعد اللغة
- العناوين headings
- فقرات النصوص paragraphs
- الروبط links
- الصور images
- خواص الوسوم Attributes
- تنسيق النص text formating
- الاقتباس blockquote
- الالوان colors
- الروابط links
محتوي المقال
النظرة الاولى
ناخد مثال على كود بسيط بلغة HTML
<!DOCTYPE html> <html> <head> <title> صفحة تجريبية</title> </head> <body> <h1>مرحبا بك</h1> <p>HTML5 <em>ليست</em>صعبة ابدًا</p> </body> </html>
اي من هذه الثنائيات <html></html> , <title></title> تسمى تاج Tag او وسم ومحتوي الوسم يكتب بين وسم البداية بدون / ووسم النهاية الذى يحتوي على رمز /
هيكل صفحة الويب الاساسية
<!DOCTYPE html> تمثل اعلان ان الصفحةهى بلغة HTML5
<html> هو التاج الاساس لصفحة الويب
<head> يحتوي على التعريفات الازمة لصفحة الويب
<title> يحتوي عنوان صفحة الويب
<body> يحتوي جسم صفحة الويب
<h1> عناوين رائيسية فى الصفحة وتشير إلى اهمية النص بداخلها
<p> تشير إلى نص بداخلها
<em> تقوم بتفخيم النص بداخلها
معاينة الكود الخاص بنا
لغة HTML يمكن قراءتها بواسطة المتصفح اذا كل ما عليك فعله هو كتابة اكواد HTML فى اي محرر نصوص مثل notepad الخاص بالويندوز ويمكنك ايجاده فى قائمة start او من خلال widows + R و اكتب notepad ثم اضغط Enter , او يمكنك محرر نصوص متقدم مثل notepad ++ .
بعد كتابة الكود يتم حفظه مع امتداد .html مثلا لو اسم ملفك home.txt غيره إلى home.html , ثم افتح الصفحة home.html مع متصفحك المفضل ومبروك عليك اول صفحة ويب .
نبذة بسيطة عن HTML
نحن الان مهيئين لمعرفة نبذة بسيطة على عن HTML , اول اصدار من HTML كان فى عام 1991 وتوالت الاصدارات وصولًا ل XHTML فى عام 2000 قبل وصول التحديثات الاخيرة فى عام 2014 تحت مسمى HTML5 .
التعليقات
التعليقات فى داخل صفحة الويب هى نصوص يقوم كاتب الكود باضافتها حتى توضح له بعض الامور ولا يراها المتصفح ولا تظهر على صفحة الويب .
طريقة كتابة التعليقات فى صفحة HTML
<!– comment here –>
بعض قواعد لغة HTML
غير حساسة لحالة الاحرف
مثال :
<h1>اهلا بالعالم</h1> <H1>اهلا بالعالم</H1>
السطرين السابقين متساوين تمامًا
ولكن يفضل الكتابة فى lowercase
حساسة للمسافة المفردة ولكن لاترى tab او السطر الجديد
مثال :
<strong>T e s t o f s p a c e s </strong> <strong>T e s t o f s p a c e s </strong> <strong>T e s t o f s p a c e s </strong>
لاحظ الخرج فى الثلاثة اسطر
اساسيات HTML
العنوانين Heading
تتدرج العنوانين من h1 إلى h6 وفق الاهمية
لنجرب هذا الكود لتوضيح الفكرة
<!DOCTYPE html> <html> <body> <h1>العنوان 1</h1> <h2>العنوان 2</h2> <h3>العنوان 3</h3> <h4>العنوان 4</h4> <h5>العنوان 5</h5> <h6>العنوان 6</h6> </body> </html>
وبعد الحفظ بامتداد .html كما ذكرنا سابقا وليكن home.html الان لنجرب فتح الملف مع متصفحين مختلفين وليكن chrome و edge او firefox الان انظر الفرق .
الكود على فيرفوكس
نفس الكود على كروم
الان لدينا ملاحظتين :
ان شكل الكود مختلف فى المتصفحين من حيث حجم العناوين المختلفة والمسافات الرأسية بينهم و السبب ان كل متصفح يضيف بعض الاستيل الافتراضى من عنده طالما لما تقم بعمل اي استيل عن طريق CSS ولا تقلق سنتعرف قريبا على CSS .
والملاحظة الاخرى لماذا كل هذه الوسوم ؟ والاجابة ان اهمية هذه النصوص هى لمحركات البحث فمحركات البحث عندما تقوم بارشفة الصفحة ستعرف ان h1 هو الاكثير اهمية فى الصفحة فمنه يمكنها معرفة عما تتحدث الصفحة بشكل عام حتى تظهرها فى نتائج البحث , h2 اقل اهمية و هكذا . فلا يصح ان تستخدم h1 مثلا فقط لجعل النص اكبر ! وانما على حسب اهمية النص .
فقرات النص
يتم وضع فقرات النصوص بعد وسم <p>
مثال :
<p>نص تجريبى نص تجريبى نص تجريبى نص تجريبى </p>
بعض الملاحظات على الوسم <p>
لايرى ايقاف السطر وبداية سطر جديد ولكن علينا استخدام <br> لبداية سطر جديد
مثال :
<p> نص تجريبى <br> نص تجريبى<br> نص تجريبى<br> نص تجريبى<br> </p>
يمكننا استخدام وسم اخر لنفس الغرض وهو pre ومعنى هذه الخاصية انها ان تتجاهل المسافات الفارغة او السطر الجديد وسيخرج النص كما كتبتها تمام .
مثال :
<pre> نص تجريبى نص تجريبى نص تجريبى نص تجريبى </pre>
الروابط
يتم وضع الراوبط فى بعد وسم <a>
وتشير الخاصية href إلى المكان الذى يذهب اليه الرابط
مثال :
<a href=”https://www.motwr.com”>motwr</a>
الصور
يتم تحديد الصور بالوسم <img>
ويتم تحديد مصدر الصورة فى الخاصية src
يتم تحديد النص البديل فى حال عدم وجود الصورة فى الخاصية alt
ويتم تحديد الطول والعرض فى الخاصتين height , width
مثال :
<img src="motwr.jpg" alt="motwr.com" width="104" height="142">
لاحظ ان الوسم <img> لايحتوي على وسم نهاية </img>
الخط الافقى
يتم استخدام <hr> لرسم خط افقى
مثال
<hr>
الخوص Attributes
اي عنصر من عناصر HTML يمكن ان يحتوي attribute او خاصية هذه الخاصية تضيف ميزة لهذا العنصر ويكتب بهذه الطريقة name=”value” حيث name هو اسم الخاصية و value هو القيمة وسنتعرف خلال الدروس على الكثير من الخواص و فائدة كل منها .
من المثال :
<img src="motwr.jpg" alt="motwr.com" width="104" height="142">
يمكن ملاحظة ان كل من alt , width , height , src هى خواص كل منها له اهمية كما سبق شرحها .
مثال اخر الخاصية title وتستخدم فى اعطاء عنوان وهذا العنوان يظهر عن الوقوف بالموس على العنصر .
مثال :
<h1 title=”motwr.com”>motwr</h1>
تنسيق النصوص text formating
تستخدم بعض الوسوم من اجل تنسيق النص بطريقة معينة إليك اشهرهم
<b> واضح
<strong> مهم لمحركات البحث
<i> مائل
<em> مائل
<mark> عليه علامة
<small> صغير
<del> ملغى
<ins> مدرج
<sub> منخفض
ملاحظة الفرق بين strong وb الاثنين نفس الشكل ولكن الفرق ان strong يضيف اهمية لمحركات البحث .
الاقتباس blockquote
يستخدم للاقتباس من مصدر اخر ومعظم المتصفحات تضيف مسافة بادئة بشكل افتراضى , وتستخدم الخاصية cite لتحديد المصدر.
<p>this example of blockquote:</p> <blockquote cite="https://www.motwr.com/"> this some dummy text for example </blockquote>
الالوان colors
يوجد العديد من الطرق للتعبير عن اللون
اسم اللون
مثال :
Red
Green
Blue
Black
ويوجد 140 اسم لالوان مدعومة من HTML يمكنك الاطلاع عليها من هنا
طريقة RGB
وهى نسب الالوان الاحمر و الاخضر والازرق على الترتين وتكتب بالطريقة التالية
rgb(255,255,255)
حيث اقصى قيمة للون هى 255 واقلها هى 0
اللون فى النظام السداسى عشرى
اللون فى هذا النظام مكون من ستة خانات
مثال #F0F8FF
وكل شفرة تشير الى لون معين على حسب نسبة الاحمر والاخضر و الازرق فى هذا اللون
فميثل كل زوج ارقم من اليسار نسب الاحمر والاخضر والازرق بالترتيب
الروابط links
كما تعرفنا بشكل سريع قبل ذلك على الراوبط
مثال :
<a href=”https://www.motwr.com”>motwr</a>
ملاحظة href يمكن ان تقود إلى عنوان ويب او مسار لملف اخر فى المشروع
مثال :
<a href=”pages/about.html”>motwr</a>
حيث المسار pages/about.html موجود إلى جانب الصفحة المكتوب بها هذا السطر
سنتعرف الان على بعض الخواص الاضافية للرابط :
الخاصية target
تستخدم فى تحديد كيفية فتح الرابط وتاخذ القيم :
_blank وتعنى فى تبويب جديد
_self وتعنى فتح الرابط فى نفس الصفحة وهى الافتراضية
_parent تفتح الرابط فى الايطار الذى يحيويه
_top تفتح الرابط فى الايطار الرئيسي
استخدام الصورة كرابط
يمكن استخدام الصور لتعمل كرابط
مثال :
<a href="default.html"> <img src="logo.png" alt="HTML tutorial"> </a>
فى المثال السابق اللصورة logo.png تعمل كرابط يقود إلى الصفحة default.html
انتهينا اليوم من مقالتنا وشكرا لكم . يتبع
من افضل الموقع التي تشرح البرمجة ببساطة ارجوا دعم هذا الموقع لاستكمال مسيرته