تنزيل المقال
تنزيل المقال
نقوم باستخدام صفحات الويب بشكل يومي، فما مدى صعوبة إنشاء صفحة ويب بنفسك؟ ستتعرف في هذا المقال على كيفية إنشاء صفحة اتش تي ام ال بسيطة باستخدام برنامج المفكرة (Notepad).
الخطوات
-
افتح برنامج المفكرة. يتوفر برنامج المفكرة على كل أجهزة ويندوز تلقائيًّا ويمكنك إيجاد البرنامج في قائمة ابدأ. افتح القائمة "ملف" بعد فتح برنامج المفكرة ثم انقر على خيار "حفظ باسم" في القائمة المنسدلة واختر "كل الملفات" من قائمة نوع الملف ثم احفظ الملف بصيغة اتش تي ام ال. تُسمى الصفحة الرئيسية لأي موقع إلكتروني عادة "index.html" لتتمكن من الوصول إلى كل شيء من خلال الموقع الإلكتروني من هذه الصفحة.
-
تستخدم لغة اتش تي ام ال الوسوم. الوسوم عبارة عن نصوص تكتب بداخل <أقواس مثلثة> .
سنستخدم في هذا المقال مجموعة من الوسوم لإنشاء صفحة ويب، علمًا بأن هناك أيضًا "وسوم اختتامية" لإنهاء سطر الرموز البرمجية. تتضمن أمثلة الوسوم الختامية: </text> . تستخدم هذه الوسوم الختامية لإنهاء تطبيق تنسيقات مثل الخط العريض أو الفقرة النصية. -
يكون الوسم الأول من صفحة ويب ما يلي عادة: <html> . يمكنك وضع هذا الوسم أعلى ملف المفكرة.
-
الوسم التالي هو <head> .
يستخدم الوسم التالي، <title> ، لإعلام المتصفح بما يجب عرضه أعلى النافذة وتقوم الوسوم الفوقية الاختيارية بإعلام محركات البحث مثل جوجل بماهية الموقع. -
اكتب العنوان في السطر التالي بعد الوسم "head": <title>wikiHow HTML</title>
-
أنهِ الترويسة بعد ذلك عن طريق كتابة الوسم الختامي </head> .
-
يتبع ذلك عادة الوسم <body> . لاحظ أن هناك ألوان غير مدعومة في بعض المتصفحات (لن يُدعم اللون الرمادي الداكن على معظم المتصفحات مثلًا).
-
اكتب محتوى صفحة ويب بين وسمي جسم الصفحة، وهذا هو المحتوى الذي سيراه المستخدم. لنبدأ بترويسة. الترويسة هي جزء يحتوي على نص كبير ويُشار إليها في لغة اتش تي ام ال بالوسم <h1> حتى <h6> على أن يكون الوسم <h1> هو الأكبر حجمًا. يمكنك أن تكتب بعد وسم جسم الصفحة، أعلى صفحة ويب مثلًا، شيئًا على شاكلة <h1>أهلًا في موقعنا الإلكتروني!</h1> مع الحرص على كتابة الوسم الختامي حتى لا يصبح كل نص الصفحة ضخمًا.
-
أضف وسم الفقرة <p> إلى جسم الصفحة كذلك. يمكنك مثلًا كتابة الرمز <p> أنا أتعلم كيفية إنشاء موقع إلكتروني! بقواعد ويكي هاو! </p> بينما إن كنت ترغب في إضافة سطر جديد، استخدم الوسم <br> (وسم الفاصل).
-
لا تكتفِ باحتواء صفحة الويب على النصوص المكتوبة بنفس التنسيق فقط. لنقم بإضافة بعض التنسيق المختلف على النص إذًا. يستخدم الوسم <b> لجعل النص عريضًا، بينما يستخدم الوسم <i> للخط المائل ويستخدم الوسم <u> لوضع خط تحت النص. لا تنسَ الوسوم الختامية!
-
استخدم الصور لجعل الموقع الإلكتروني مثيرًا للاهتمام. حتى مع تنسيق النص، هل ترغب بالنظر إلى قدرٍ لا متناهٍ من الكلمات؟ استخدم الوسم <img> لإضافة صورة، ولكن لاحظ أنه سيحتاج لإضافة مزيد من المعلومات كما هو الحال مع وسم جسم الصفحة. يكون وسم الصورة بالشكل التالي: <img alt=dog src="dog.jpg" width=200 height=200> . يكون جزء المصدر (src) من الرمز هو اسم الصورة ويُشار إلى طول وعرض الصورة بوحدة بكسل.
-
لقد أوشكت على الانتهاء! لعلك ترغب في تنقل الزوار بين أكثر من صفحة على الموقع، لذا يمكنك إنشاء روابط بالشكل التالي: <a href="otherpage.html">صفحة أخرى</a> . النص الموجود بين الوسوم هو ما سينقر عليه المستخدم للوصول إلى الصفحة التالية والجزء "href" هو الوجهة التي يُوجَه المستخدم إليها عند النقر. يمكنك السماح للمستخدمين بالتحرك بسهولة شديدة في موقعك الإلكتروني باستخدام تلك الوسوم.
-
لإنهاء المهمة، يجب أن تختتم جسم الصفحة بالوسم </body> وأن تختتم الصفحة بالكامل بالوسم </html>
-
احفظ عملك وتأكد من حفظ الملف بامتداد ".html". افتح ملف اتش تي ام ال في متصفح الإنترنت الذي تفضله للاطلاع على شكل الصفحة. هنيئًا لك! لقد أنشأت صفحة ويب للتو.
-
إن كنت ترغب بنشر صفحة ويب، ابحث عن مقال إرشادي يعلّمك كيفية نشر موقع إلكتروني على اسم نطاق تمتلكه.
أفكار مفيدة
- يمكنك معرفة مزيد من الوسوم عن طريق البحث على شبكة الإنترنت. يوجد الكثير من المواقع الإلكترونية الجيدة التي تساعد الناس على إنشاء المواقع الإلكترونية ومن الأمثلة الجيدة لهذه المواقع "W3Schools".
- تذكّر الوسوم الختامية.
- احرص دائمًا على كتابة <!DOCTYPE html> في أول سطر قبل وسم <HTML> فهذا الوسم يُعلم المتصفح بأن صفحة الويب من نوع اتش تي ام ال 5.
- يمكنك تغيير الخط عن طريق كتابة <font face="N"></font> قبل <html> وبعد </html> مع تغيير الحرف N باسم نوع الخط ("Verdana" مثلًا).
- إن كنت ترغب باستخدام أقواس مثلثة على موقعك الإلكتروني، استخدم < و > و &.
- قم بتسمية مجلدات وملفات ويب بحروف صغيرة دائمًا ولا تضمنها أي مسافات وفق مقالات لغة اتش تي ام ال. يسمح نظام ويندوز في الحقيقة بتضمين مسافات في الأسماء، إلا أن العديد من خدمات الاستضافة لا تسمح بذلك وستوفر الكثير من الوقت والمجهود عند تسمية الملفات والمجلدات بطريقة صحيحة من البداية.
