مقدمة عن لغة HTML ومكونات الصفحة

مقدمة عن لغة HTML ومكونات الصفحة

المعاينات والمرفقات

 ما هي لغة HTML ؟

HTML هي اختصار لجملة (HyperText Markup Language) أو لغة ترميز النص التشعبي

وهي اللغة الأساسية التي من خلالها تبنى صفحات الويب.

 لو قارناها بجسم الإنسان فستكون هي الهيكل العظمي الذي يتشكل عليه شكل الجسم بالكامل , بالتالي أى خلل فيها سيكون مؤثر على كل شئ في الصفحة

 

مقدمة عن لغة HTML ومكونات الصفحة

هل HTML لغة برمجية ؟

 هذا السؤال بالرغم أنك ستجد نقاشات كثيرة عنه في الإنترنت لكنه غير مهم لن يفرق في شئ هي لغة عليك تعلمها ولن تستخدم صفحات الويب دون تعلم أساسياتها

لكن لنجيب عليه بأبسط طريقة ممكنه , HTML لغة ترميز هي لغة من خلالها تصنع بنية الموقع لكن صفة أساسية من لغات البرمجة أنها تقوم بآداء مهام وأوامر وليس ترميز الصفحة , لكن في الآونة الأخيرة أصبحت لغة HTML أكثر تطوراً ويتم عمل بها أمور كانت يجب ان تصنع قديماً بلغة برمجية فيمكن أن نقول أيضاً انها تتحول الآن للغة برمجة بالإضافة لانها لغة ترميز لكن في النهاية هذا النقاش مجرد نقاش جانبي لكن قد يمر عليك فكل ما تحتاج فعله فيه أن لا تدخل فيه أصلاً

 

ما هي مكونات صفحة  HTML ؟

هذا هو التكوين الأساسي لصفحة HTML

 


<!DOCTYPE html>
<html>
<head>
    <title>صفحة بسيطة</title>
</head>
<body>
    <h1>مرحباً بالعالم!</h1>
    <p>هذه هي أبسط صفحة HTML يمكنك إنشاؤها.</p>
</body>
</html>

1- [[<!DOCTYPE html>]]

  • هذا السطر يسمى إعلان نوع المستند (Document Type Declaration).
  • يخبر المتصفح عن إصدار HTML الذي تستخدمه الصفحة. في هذه الحالة، <!DOCTYPE html> يشير إلى استخدام HTML5، وهو أحدث إصدار من HTML.
  • يجب أن يكون هذا الإعلان هو السطر الأول في مستند HTML.

 

 لاحظ أن كل كل كود بعد هذا الكو يتم فتحه وإغلاقه كود الفتح [[<>]] كود الإغلاق [[</>]] 

 

2- [[<html>]]

 هذا هو الكود الرئيسي لصفحة HTML , والذي بداخلة توضع كل المكونات فيكون هو أول كود يضاف وكود الإغلاق الخاص به هو آخر كود يضاف

 

3- [[<head>]]

هو كود معلومات ما خلف الكواليس وهي المعلومات التي لن تظهر مباشرة في الصفحة ولكن ستظهر بشكل غير مباشر يضاف فيه أكود جافا سكريبت , أكواد CSS هذه أمور سنتطرق لها لاحقاً ركز فقط فيما هو أمامك وهو وسم [[<title>]]

كما قلنا هذه معلومات خلف الكواليس بالتالي وسم [[<title>]] أو العنوان هو يخص عنوان الصفحة وهو الذي يظهر في المتصفح بالأعلى وليس في الصفحة نفسها

 

4- [[<body>]]

هذا هو جسم الصفحة ما يضاف فيه هو ما يظهر مباشرة في الصفحة ويضاف فيه كل ما تتخيله من أكواد

يضاف في أكواد HTML وكذلك CSS JS 

أنا أضفت فقط فيه عنوان [[<h1>]] وفقرة [[<p>]] لا تلتفت لهم لكن فقط لتفهم كيف تدور الأمور 


ما الفرق بين تكوين صفحة HTML وقالب بلوجر ؟

هو تكون واحد تقريباً هناك فروقات بسيطة


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<b:section id='main'/>
</body>
</html>

1-  [[<?xml version="1.0" encoding="UTF-8" ?>]]

وهو إعلان آخر ان الملف يعمل بـ XML وهو ما تقوم عليه قوالب بلوجر

 

يضاف بعض المعلومات التابعة لجوجل لكود [[<html>]]

 

2- [[<b:skin><![CDATA[]] 

وهو جزء مخصص لإضافة أكواد المظهر CSS للقالب

 

3- [[<b:section>]]  

وهو الخاص بأماكن إضافة الأدوات في بلوجر

لكن هنا ملاحظة مهمة كنا قد قلنا أن كل كود يتم فتحه يتم إغلاقه أيضاً

لكن ترى في كود [[<b:section id='main'/>]] أنه كود واحد فقط

هو ليس كود واحد في الحقيقة هو أيضاً كودين لكن في بلوجر طالما لا يوجد بيانات في الكود يكون كود واحد يتم اغلاقه في النهاية لكن ما أن تضاف فيه بيانات سيصبح كود فتح واغلاق عادي جداً هذه مجرد معلومة لن تشكل لك عائقاً حتى لو كتبت الكود بفتح واغلاق سيظل كتابة صحيحة لكن أنا نوهت فقط حتى تفهم الفكر ولا تحتار من اختلاف الشكل

للإستفسار أو شراء المنتج عبر

بايبال أو فودافون كاش

يرجى الطلب عبر النموذج التالي

تعليقات

0

مشاركتكم تهمنا!
تفاعلكم يثري المحتوى ويجعل النقاش أكثر متعة وفائدة.
شاركونا آراءكم وأفكاركم في التعليقات , ولا تترددوا في طرح الأسئلة أو إضافة تعليقاتكم، حول الموضوع.
فهذا يساهم بشكل أساسي في تطوير محتوانا ودفعنا لتقديم المزيد.