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

الصفحات

مكونات صفحة الويب | خطوات إنشاء صفحة ويب بلغة 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 .

 ثم يأتى بعده :

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

وسم التايتل <title> : حيث يقوم بتعريف العنوان للصفحة .

والعنصر <meta> : الذي يضبط ترميز الصفحه .

والعنصر <link> : الذي يربط هذه الصفحه بلغة CSS .

وأيضا العنصر <script> : والذي يربط هذه الصفحه بلغة الجافا سكريبت Javascript .

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

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

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

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



reaction:

تعليقات