مقدمة تعلم لغة HTML من الصفر

تعليق واحد / بواسطة / html articles, تصميم ويب
 
 
  • لغة 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

 

انتهينا اليوم من مقالتنا وشكرا لكم . يتبع

اشترك فى القائمة البريدية

عن الكاتب

مؤسس مطور

شارك على وسائل التواصل

مقالات متعلقة

1 فكرة عن “مقدمة تعلم لغة HTML من الصفر”

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

ستة + 7 =