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

لغة ترميز النص التشعبي (بالإنجليزية: HyperText Markup Language وتعرف اختصارًا باسم إتش تي إم إل (HTML)، هي لغة ترميز تستخدم في إنشاء وتصميم صفحات ومواقع الويب. يمكنك أن تنشئ صفحة ويب دون تعلم لغة إتش تي إم إل، لكنك قد تواجه مشاكل مؤكدة تفرض عليك استخدامها فيما بعد لتجاوز هذه المشاكل، بغض النظر عن محرر الرموز الذي تعمل من خلاله. يوجد العديد من المواقع المتخصصة التي يمكنك من خلالها تعلّم لغة إتش تي إم إل بتفصيل أكبر، لكننا في هذا المقال نعلّمك أساسيات إنشاء موقع إلكتروني باستخدام هذه اللغة بحيث تتمكن من إنشاء صفحة ويب بسيطة من البداية حتى النهاية.

طريقة 1

طريقة 1 من 1:

استخدام إتش تي إم إل

تنزيل المقال

1
افهم طبيعة لغة إتش تي إم إل. لغة إتش تي إم إل عبارة عن لغة الرموز البرمجية المكونة لصفحات الويب، واللغة هي الهيكل المكوّن لكل صفحات الويب الموجودة. للاطلاع على شكل لغة إتش تي إم إل، توجّه إلى أي موقع إلكتروني في متصفح إنترنت اكسبلورر وانقر على الصفحة بزر الفأرة الأيمن ثم اختر خيار "عرض المصدر" لتظهر لك رموز إتش تي إم إل. هذه هي الرموز التي يراها المتصفح ليحولها إلى صفحة ويب منسقة يمكن للشخص التعامل معها.
- استخدم زر لوحة المفاتيح F12 في متصفح جوجل كروم.
- استخدم اختصار لوحة المفاتيح Ctrl + U لعرض المصدر في متصفح موزيلا فايرفوكس.
- اختر خيار "عرض←عرض المصدر" (أو استخدم اختصار لوحة المفاتيح Option + Command + U) في متصفح سفاري.
- ستجد خيار عرض المصدر بمسمى "المصدر" في قائمة العرض بمتصفح إنترنت إكسبلورر.
2
اجعل صفحة الويب المبدئية بسيطة على قدر الإمكان. ستواجه مشكلات جمة بسبب الرموز البرمجية وتراكيبها إن لم تكن صفحتك بسيطة.
- من المهم معرفة أنك ستكتب المعلومات بين وسم افتتاحي ووسم ختامي. يكون الوسم الافتتاحي بالشكل التالي: <___>، ويكون الوسم الختامي بالشكل التالي: </___>. يتم الاستعاضة عن ___ بالرمز البرمجي.
استخدام محرّر النصوص نووت باد ++ أسهل بكثير بعد اختيار لغة إتش تي إم إل حيث يتم تحويل كل شيء تكتبه إلى لون مختلف لتسهيل عملية تصحيح الأخطاء.
. اكتب في السطر الأول <!DOCTYPE>، ويجب أن يكون هذا الوسم هو الوسم الأول في رمزك دائمًا. اكتب بعد ذلك في السطر الثاني <html> حيث يُعلم هذا الوسم جهاز الكمبيوتر بأنك تكتب صفحة ويب. ستُغلق هذا الوسم في نهاية المستند، ويمكنك كتابة الوسم الختامي منه بالشكل التالي: </html>. تؤدي كتابة الوسم الختامي إلى إنهاء صفحة الويب.
. كتابة العنوان أمر مهم حيث إن ذلك يمنح المستخدمين فكرة عن محتوى الصفحة، كما يتم حفظ العنوان في قائمة العلامات المرجعية عند حفظ الصفحة كعلامة مرجعية. يتم تحديد العنوان في لغة إتش تي إم إل باستخدام الوسم <title> ويتم اختتامه بالوسم </title> ليظهر العنوان بعد ذلك في لسان التبويب دون أن يظهر بداخل الصفحة نفسها.
7
. اكتب الوسم <body> لبدء محتوى جسم الصفحة ثم اختتم المحتوى بالوسم <body/> لتكون المعلومات المكوّنة لجسم الصفحة بين الوسمين <body> و </body>.
- يمكنك إضافة تنسيق إلى جسم الصفحة لتغيير لون خلفية الصفحة، ويمكنك تغيير لون الخلفية باستخدام الوسم <body style="background-color:silver"> ويمكن تغيير اللون "silver" إلى أي اسم لون آخر أو أي رمز بالنظام الست عشري. تعرف الكلمات الموجودة بين علامات التنصيص باسم "الخصائص" ويجب أن تحاط هذه الخصائص بعلامات تنصيص.
8
اكتب نصًا بين وسوم جسم الصفحة.
- استخدم الوسم <br><br> للانتقال إلى سطر جديد (لمحاكاة الضغط على زر الإدخال في لوحة المفاتيح).
- يمكنك أيضًا إضافة نص متحرك (نص يتحرك أفقيا على الشاشة) عن طريق استخدام الوسم <marquee>اكتب النص هنا</marquee>.
إن كنت ترغب بإضافة صور من الإنترنت إلى صفحة الويب خاصتك، يمكنك استخدام وسم الصور <img src="URL"> ليكون الوسم الختامي. الوسم الختامي اختياري في هذه الحالة.

يفترض أن تكون صفحة الويب خاصتك بالشكل التالي:

<title>صفحة الويب خاصتي</title>
<body bgcolor="yellow">
أحب ويكي هاو لأنه
<marquee>أفضل موقع إلكتروني في العالم!</marquee>
<img src="http://www.wikihow.com/skins/common/images/How.com.vn_logo_5.gif"></body>

توجّه إلى خيار "حفظ باسم" واختر اسم ملف ثم امنحه الامتداد html (كأن يكون مثلًا "testfile.html"). اختر النوع "كل الملفات" أو "ملف نصي" في خانة النوع حيث لن يعمل الرمز البرمجي إن لم تفعل ذلك. توجّه بعد ذلك إلى المكان الذي حفظت فيه صفحة الويب وانقر عليها نقرًا مزدوجًا لتفتح الصفحة في متصفّح الإنترنت الافتراضي.

أفكار مفيدة

استخدم قالبًا لاختبار التغيّرات التي تُحدثها في مواقعك الإلكترونية الخاصة (مثل ماي سبيس) قبل إحداث التغيرات الفعلية.
اسبريسو من البرامج الجيدة لكتابة رموز إتش تي إم إل حيث يبسّط البرنامج كتابة الرموز عن طريق منحك اختصارات مختلفة، ويمنحك البرنامج إمكانية معاينة صفحة الويب باستخدام خاصية المعاينة دون الحاجة لتغيير الامتداد من html إلى txt.
استخدم محرّر ويب مثل مايكروسوفت اكسبريشن ويب لإنشاء مواقع أكثر تقدمًا.
يمكنك أيضًا تجربة برنامج أدوبي دريمويفر. يساعدك هذا البرنامج عند مواجهة المشاكل حيث يُظهر المشكلة وكيفية حلها.
يعلمك هذا المقال بكيفية إنشاء صفحة ويب. اطّلع على المقالات المتعلقة بهذا الموضوع على منصة ويكي هاو لمعرفة كيفية نشر صفحة الويب خاصتك.
إليك مثال على طريقة غير صحيحة لكتابة الوسوم <tag1><tag2> محتوى </tag1></tag2>.
تأكد من تصحيح كل الأخطاء.
يكسب الكثير من الأشخاص عيشهم من تصميم صفحات الويب ويمكنك تطوير قدراتك لتكسب عيشك من هذا المجال أيضًا.
لا يمكنك كتابة الوسوم الختامية في أي مكان حيث يجب اختتام آخر وسم افتتاحي كتبته قبل غيره لتكون الوسوم بالشكل التالي: <tag1><tag2> محتوى </tag2></tag1>.
ابحث عن الملف وأعِد تسميته لتغيير الامتداد من ".htm" إلى ".txt" لتعديل الرموز أو احفظ نسختين من الرمز البرمجي لتكون إحداهما بامتداد htm وتكون الأخرى بامتداد txt حيث يسمح ذلك بتحرير الرمز لاحقًا.
إنشاء صفحة ويب بسيطة خلال دقائق معدودة طريقة رائعة لإبهار أصدقائك حيث يمكنك عرض خدماتك على أحد أصدقائك مما يؤدي إلى سروره وانبهاره.
إن لم تعمل صفحة الويب الخاصة بك، انسخ رمز إتش تي إم إل السابق واحفظه بالطريقة الموضحة ثم اعرض الصفحة وعدّل الرمز واطّلع على النتائج.
يجب اختتام كل الرموز الافتتاحية التي تكتبها إلا إن كانت أحد الرموز الخاصة التي لا تحتاج إلى اختتامها مثل <img> أو <hr> واختتم الوسم إن كنت تشك في كونه يحتاج لذلك أم لا.

تحذيرات

احرص على كتابة ".html" أو ".htm" في نهاية اسم الملف واختيار "كل الملفات" أو "ملف نصي" كنوع الملف حيث لن يعمل الرمز البرمجي إن لم تفعل ذلك.
احرص على استضافة الصور بنفسك حتى لا تسرق معدّل نقل البيانات الخاص بشخص آخر ويمكنك استضافة الصور على منصات مثل فوتو باكت أو فليكر أو اميج شاك.
الوسم <marquee> ليس من وسوم إتش تي إم إل الرسمية بحسب منظمة W3C ولن يعمل على كل المتصفّحات حيث أنشئ الوسم وحصل على الدعم للمرة الأولى بواسطة متصفح انترنت اكسبلورر ثم ألغى دعمه المتصفحات الأخرى.
الخاصية "bgcolor" قديمة، والطريقة الصحيحة لتغيير لون خلفية العناصر هي استخدام رموز سي اس اس.