القائمة الرئيسية

الصفحات

خطوات إنشاء صفحة ويب بلغة html | مكونات صفحة الويب

خطوات إنشاء صفحة ويب بلغة html | مكونات صفحة الويب. في هذا المقال سوف نتعرف على تكوين صفحات اتش تى ام ال. والتي تتكون عاده من وسم بداية، ووسم نهاية أو ما يسمي بالوسوم (Tags). ويكون بين وسمي البداية والنهاية والمحتوي النصي (content). ويمكن إضافة بعض الخاصيات (ِAttribute) بعضها اختياري، والأخر إجباري داخل وسم البداية لتغيير شكل العنصر أو ضبطه.

مكونات صفحة الويب | خطوات إنشاء صفحة ويب بلغة html

خطوات إنشاء صفحة ويب بلغة html 

لكى نقوم بإنشاء موقع إلكتروني نقوم أولاً بعمل صفحات HTML أو التعديل عليها لابد من استخدام أحد برامج تحرير النصوص. وأشهرها برنامج فيجوال إستوديو كود VS Code. وهو برنامج  مفتوح المصدر من شركة مايكروسوفت يعمل على الويندوز ولينكس وماك.

كما نحتاج إلى متصفحات الإنترنت لتجربة صفحات الويب التي يتم إنشاؤها على محرر النصوص، ثم تكون جاهز لتطبيق الخطوات التالية. 


خطوات إنشاء صفحة ويب بلغة HTML

1- قم بفتح برنامج محرر النصوص الذى تستخدمه واختيار إنشاء صفحة جديدة html وستجد أن هناك أكواد أساسية في هيكل الصفحة تسمى بنية لغة اتش تي ام ال. تظهر كما بالشكل التالي:-

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Untitled Document</title>

</head>

<body>

</body>

</html>

2- في جسم الصفحة بعد وسم  <body> قم بكتابة أي نص تريد ثم من قائمة (File). قم بحفظ الملف بصيغة html في أي مكان على جهازك.

3- يمكنك الآن تشغيل الصفحة التي أنشأتها بواسطة متصفحات الانترنت وسترى النص الذى كتبته داخل صفحة الـ HTML.

ولكى تكون قادراً على إتباع خطوات إنشاء صفحة ويب بلغة html باحترافية أكبر، كان لابد من التعرف على مكونات صفحة الويب. وشرح كود بنية لغة اتش تي ام ال السابق ذكره.

تكوين الصفحات في لغة HTML - مكونات صفحة الويب


1-  الوسوم في لغة html: وتسمى (Tags) وتكون على هيئة رمز الزاوية أو رموز أكبر من وأصغر من.

ويتكون من  وسم بداية (Start tag) ويكون بهذا الشكل {< >}.

ووسم نهاية (End tag) ويكون بهذا الشكل {</>}.

وما بين وسم البداية والنهاية يكون المحتوى النصي Content الذي تكتبه.


2- الخاصيات (Attribute): قد تحتوي العناصر علي خاصيات وبعضها اختياري. والآخر إجباري داخل وسم البداية لتغيير شكل العنصر أو ضبطه. ويمكن أن تتشعب بعض العناصر داخل بعضها البعض، وتكون بكتابه اسم الخاصية، ثم القيمة.


3- بنية لغة اتش تي ام ال HTML Structure 

الديكوتايب Doctype وهو ما يجعل المتصفح يتعرف علي أكواد HTML.

ثم يليه وسم الافتتاح <html>: وهو جذر الصفحة. ويشير أن الصفحة مكتوبه بلغة HTML.

 ثم يأتي بعده:

1- وسم الهيد <head>: ويشير الي البيانات الوصفية التي تعبر عن الصفحة. ويحتوي على:-

  • وسم التايتل <title>: حيث يقوم بتعريف العنوان للصفحة.
  • والعنصر <meta>: الذي يضبط ترميز الصفحة.
  • والعنصر <link>: الذي يربط هذه الصفحة بلغة CSS.
  • وأيضا العنصر <script>: والذي يربط هذه الصفحة بلغة الجافا سكريبت Javascript.

العنصر <body>: يشير الي محتوي الصفحة. والذى كتبنا بداخلة النص في المثال السابق.

وأخيراً وسم الإغلاق </html>: ويشير إلي انتهاء الصفحة. ويجب التأكد من وجود الـ Slash (/)، لكى يتم حفظ مكونات صفحة الويب بطريقة صحيحة.

وإلى هنا نكون قد وصلنا لنهاية هذا الموضوع والذى كان بعنوان (مكونات صفحة الويب ، خطوات إنشاء صفحة ويب).


4- التعليقات في صفحات الويب (Comment): ويستخدم داخل الصفحة لكتابة الملاحظات الخاصة بنا لفهم الأكواد. ولا يظهر للمستخدم ولكتابة تعليق في لغة HTML  نكتب كالتالي <!-- هنا نكتب التعليق  -->.


تعليقات