كيفية كتابة صفحة HTML

إتش تي إم إل (HTML) لغة بسيطة لتطوير صفحات الويب، ولقد تم تطوير تلك اللغة لتكون لغة برمجة سهلة ومرنة. تُستخدم هذه اللغة لتطوير كل الصفحات الموجودة على الإنترنت تقريبًا بشكل أو بآخر (ColdFusion, XML, XSLT). يمكنك تعلّمها بسهولة، إلا أن اللغة ستجذبك للاستمرار بتعلمها لفترة طويلة إن كنت مهتمًا بوظائفها الكاملة. يمكنك أيضًا تعلّم لغة سي إس إس (CSS) لإضفاء مزيد من الألوان والإثارة على صفحاتك بعد الاعتياد على استخدام إتش تي إم إل.

جزء 1

جزء 1 من 4:

إعداد مستند

تنزيل المقال

1
افتح محرّر نصوص بسيط. برنامج المفكرة (NotePad) خيار جيّد يمكن تنزيله مجّانًا. يمكنك كتابة رموز إتش تي إم إل بمعظم محرّرات النصوص، إلا أن البرامج المعقّدة التي يتوفر بها خواص تنسيق تلقائي للنص ستجعل من مهمة تنظيم صفحة إتش تي إم إل أمرًا صعبًا.^{[١]Xمصدر بحثي}
- لا يُنصح باستخدام برنامج "تيكست إيديت" (TextEdit) لأنه يحفظ الملف عادة بصيغة لا يمكن لمتصفح الإنترنت التعرّف عليها كصفحة إتش تي إم إل.
- يمكنك أيضًا استخدام محرّر إتش تي إم إل على شبكة الإنترنت. لا يُنصح باستخدام برامج تحرير إتش تي إم إل متخصّصة للمبتدئين.^{[٢]Xمصدر بحثي}
2
احفظ الملف كصفحة ويب. افتح القائمة ملف File ← حفظ باسم Save As من القائمة العلوية. غيّر صيغة الملف لتكون صفحة ويب "Web Page" أو ".html" أو ".htm". احفظ الملف في مكان يمكنك إيجاده بسهولة.
- لا فرق بين هذه الخيارات الثلاث.
3
افتح الملف في متصفح ويب. انقر نقرًا مزدوجًا على الملف وسيؤدي ذلك لفتح صفحة ويب فارغة في متصفّحك. يمكنك أيضًا فتح المتصفّح، مثل: فايرفوكس أو إنترنت إكسبلورير، واستخدام القائمة ملف File ← فتح ملف Open File لاختيار مستند.
- لا تتواجد هذه الصفحة على الإنترنت. يمكن عرض هذه الصفحة على جهاز الكمبيوتر فقط.
4
أعِد تحميل صفحة ويب للاطلاع على التغييرات المحفوظة. اكتب الرمز التالي في مستند فارغ. <strong>Hello</strong>. احفظ المستند. أعِد تحميل صفحة الويب الفارغة في متصفّحك وسترى كلمة "Hello" أعلى الصفحة بخط عريض. عند رغبتك باختبار رمز HTML جديد في هذا المقال، احفظ ملف .html ثم أعِد تحميل الصفحة في المتصفّح لرؤية التغييرات الحادثة في الصفحة.
- إن ظهرت الكلمات "<strong>" و "</strong>'' في المتصفّح، فإن الملف لا يظهر كصفحة HTML على الأرجح. جرّب برنامج تحرير نصوص آخر أو متصفّح مختلف.
5
افهم الوسوم. تُكتب تعليمات إتش تي إم إل على هيئة وسوم تُعلم متصفّح الإنترنت بطريقة فهم التعليمات وعرضها في صفحة الويب. تُكتب التعليمات دائمًا بين أقواس مستطيلة <كهذه>، ولا تُعرض هذه الأقواس في صفحة الويب. لقد استخدمت هذه الوسوم في المثال السابق.
- يسمّى الوسم <strong> وسم بداية أو وسم افتتاح. يتم تعريف أي شيء مكتوب بعد هذا الوسم على أنه خط ظاهر (ويتم إظهاره بخط عريض على صفحة الويب عادة).
- يسمّى الوسم </strong> وسم نهاية أو وسم إغلاق، ويمكنك تمييزه بالرمز / . يُظهر هذا الرمز مكان انتهاء النص الظاهر. تحتاج معظم الوسوم (وليس كلها) إلى وسم نهاية حتى تعمل بشكل صحيح، لذا تذكّر تضمين ذلك في رمزك البرمجي.
6
إعداد المستند. احذف كل شيء في مستند إتش تي إم إل. ابدأ مجدّدًا بالنص التالي كما هو مكتوب بالضبط (مع تجاهل نقاط الترقيم). يقوم هذا النص بإخبار المتصفّح بنوع رمز إتش تي إم إل بلس الذي ستستخدمه، وأن الرمز البرمجي بالكامل سيكون بين الوسوم <html> و </html>.^{[٣]Xمصدر بحثي}
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- </html>
7
أضف وسوم الترويسة وجسم الصفحة. يتم تقسيم صفحات إتش تي إم إل لقسمين. يختص قسم الترويسة (head) بالمعلومات الخاصة، كعنوان الصفحة مثلًا. يتضمن قسم جسم الصفحة (body) محتويات الصفحة الرئيسية. أضف هذه الأقسام إلى صفحتك، وتذكر أن تُضمّن وسوم النهاية. يكون النص المضاف الجديد بخط عريض:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- </head>
- <body>
- </body>
- </html>
8
أضف عنوانًا لصفحتك. لا يهم تعلّم معظم الوسوم التي تكون في الترويسة بالنسبة للمبتدئين. يسهل استخدام وسم العنوان، ويحدد هذا الوسم الاسم الذي سيظهر في لسان تبويب المتصفّح. اكتب وسوم البداية والنهاية بداخل وسم الترويسة، واكتب أي عنوان ترغب به بينهما:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title>My first HTML page.</title>
- </head>
- <body>
- </body>
- </html>

جزء 2

جزء 2 من 4:

تنسيق النص

تنزيل المقال

1
أضف نصًا إلى جسم الصفحة. ستعمل مع وسوم جسم الصفحة فقط في هذا القسم. سيكون النص الآخر موجودًا في مستندك، إلا أننا سنوفّر بعض المساحة عن طريق عدم تكرار النص عدّة مرّات في هذا الدليل. اكتب أي شيء ترغب بكتابته بين الوسوم <body> و </body>، وسيظهر النص المضاف كأول نص في صفحتك. على سبيل المثال:
- <body>
- I'm following the How.com.vn guide to write an HTML page.
- </body>
2
أضف ترويسات إلى نصّك. نظّم صفحتك بوسوم ترويسات تُعلم المتصفّح بإظهار النص الموجود بداخلها بحجم أكبر. تُستخدم هذه النصوص أيضًا بواسطة روبوتات محركات البحث والأدوات الأخرى لتحديد محتوى الصفحة وطريقة تنظيمها.<h1> </h1> أكبر ترويسة، ويمكنك إنشاء ترويسات أصغر حتّى تصل إلى الوسم <h6> </h6>. جرّب هذه الوسوم في صفحتك:
- <body>
- <h1>Welcome to My Web Page.</h1>
- I'm following the How.com.vn guide to write an HTML page.
- <h3>My goals today:</h3>
- <h5>Completed goals:</h5>
- Learn how to use headers.
- <h5>Uncompleted goals:</h5>
- تعلّم المزيد عن ترويسات تنسيق النصوص.
- </body>
3
لقد رأيت وسم النص العريض بالفعل، إلا أن هناك طرق أخرى لتنسيق النص. تعرّف على هذه الطرق، أو جرّب عدّة وسوم على نفس النص. تذكّر دائمًا أن تضيف وسم النهاية بعد الانتهاء.
- <strong>نص مهم، يظهر كخط عريض في معظم المتصفحات.</strong>
- <em>نص بارز، يظهر كنص مائل في معظم المتصفحات.</em>
- <small>نص أصغر من الطبيعي قليلًا. يؤدي ذلك لتحديد المقاس تلقائيًّا عند استخدام الترويسة.^{[٤]Xمصدر بحثي}</small>
- <del>نص ملغي، ويظهر بخط في منتصفه. line.</del>
- <ins>نص مضاف إلى نص سابق، ويظهر بخط سفلي.</ins>
4
رتّب النص على الصفحة. لعلّك لاحظت أن الضغط على زر الإدخال غير كاف لإظهار النص في سطر جديد. يمكن للوسوم التالية مساعدتك على كتابة الفقرات وفواصل الأسطر أو ترتيب النصوص بطريقة مختلفة:
- <p> اختصار لكلمة فقرة. يؤدي استخدام هذا الوسم لإظهار النص الموجود بداخله في فقرة واحدة وفصله عن بقية النص من الأعلى والأسفل.</p>
- <br> يُؤدي ذلك لإنشاء فاصل أسطر. "لا" تكتب وسم نهاية لهذا الغرض لأنه لا يغير المحتويات الأخرى. استخدم هذا الوسم للقصائد أو لأسطر العناوين وليس لفصل الفقرات.^{[٥]Xمصدر بحثي}
- <pre> إن كنت ترغب بعرض نص بشكل دقيق جدًا، يقوم هذا الوسم بضبط النص بداخل نص محدد العرض (على أن يكون كل حرف بحجم الحروف الأخرى)، ويسمح لك بكتابة مسافات وفواصل أسطر بطريقة الكتابة العادية دون وسوم.^{[٦]Xمصدر بحثي}</pre>
- <blockquote> يحدد هذا الوسم النص المقتبس من مصدر آخر.</blockquote> يمكنك وصف المصدر بعد ذلك عن طريق استخدام <cite> وسم المصدر </cite>.
5
أضف تعليقًا نصيًا خفيًا. وسوم التعليقات غير ظاهرة على صفحات الويب، وتسمح لك هذه الوسوم بكتابة ملاحظات لنفسك في مستند HTML دون التدخّل في المحتوى.  ولا تُضف وسم نهاية.
- تسمى الوسوم التي لا تحتاج إلى وسوم نهاية بالوسوم الفارغة.
6
ضع كل شيء إلى جوار بعضه. أفضل طريقة لتذكر هذه الوسوم هي استخدامها في صفحتك الخاصة. إليك مثال على استخدام هذه الوسوم من الخطوات التي تعلّمتها حتى الآن. حاول توقّع كيفية ظهور الصفحة في المتصفّح، ثم انسخ الرمز والصقه بالمتصفّح لاكتشاف ذلك.
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <title>My first HTML page.</title>
- </head>
- <body>
- <h1>Welcome to My Web Page.</h1>
- I hope you enjoy the site!<p><strong>I made it just for you.</strong>
- <h2>Part One: How I Discovered HTML</h2>
- 
- I've been learning HTML for <del>one</del> <ins>two</ins>hours now, so I'm an expert.
- </body>
- </html>

جزء 3

جزء 3 من 4:

إضافة الروابط والصور

تنزيل المقال

1
تعرّف على الخصائص (Attributes). يمكن أن تمتلك الوسوم بيانات إضافية مكتوبة بداخلها، وتسمى هذه البيانات بالخصائص. تظهر هذه الخصائص ككلمات إضافية بداخل الوسم نفسه على هيئة attribute-name="specific value". على سبيل المثال، يمكن أن يمتلك أي وسم إتش تي إم إل خاصية العنوان (title):
- <p title="مقدمة">اكتب فقرة المقدمة هنا.</p> يمنح ذلك الفقرة عنوانًا هو "مقدمة"، ويظهر هذا العنوان عند تحريك مؤشر الفأرى فوق الفقرة في صفحة الويب.
2
الارتباط بصفحة ويب أخرى. استخدم الوسم <a> </a> لإنشاء رابط تشعبي يقود إلى صفحة ويب أخرى. أدخل عنوان صفحة الويب لربطها عن طريق استخدام الخاصية href. إليك مثال يربط الصفحة بالصفحة التي تقرأها الآن:
- <a href="http://www.wikihow.com/Write-an-HTML-Page">يمكن لزوار موقعك النقر على هذا النص لاتباع الرابط.</a>
3
أضف خاصية المعرّف ("id") للوسوم. وسم المعرّف أحد الوسوم الأخرى التي يمكن لأي وسم من وسوم إتش تي إم إل استخدامها. اكتب id="example" بداخل أي وسم، أو استخدم أي اسم لا يتضمن مسافات.^{[٧]Xمصدر بحثي} لن يمتلك ذلك أي تأثير ظاهر على الإطلاق، إلا أننا سنستخدمه في الخطوة التالية.
- أضف ذلك إلى مستندك، على سبيل المثال: <p id="example">سأستخدم هذه الفقرة كمثال لإظهار طريقة استخدام خاصية id.</p>
4
ارتبط بالعنصر من خلال المعرّف الخاص به. يمكننا الآن استخدام وسم الرابط التشعبي <a> </a> للارتباط بموقع آخر في نفس الصفحة. سنستخدم الرمز # متبوعًا بالمعرّف الذي نرتبط به عوضًا عن استخدام العنوان. على سبيل المثال، <a href="#example"> سيقوم هذا النص بربط الفقرة بالمعرّف "example".</a>
- كل قيم HTML غير حساسة لحالة الأحرف.^{[٨]Xمصدر بحثي} سيقود المعرّفان "#EXAMPLE" و "#example" إلى نفس المكان.
- إن كانت صفحتك قصيرة بما فيه الكفاية لعرضها بالكامل، قد لا تلاحظ أي تغيّر عند النقر على الرابط في متصفّحك. أعِد تحجيم النافذة حتى يظهر شريط التحريك ثم حاول مجددًا.
5
أضف صورة. وسم الصورة <img> وسم فارغ، مما يعني أنك لا تحتاج إلى وسم نهاية. سيتم إضافة كل البيانات التي يحتاجها المتصفّح لعرض الصور باستخدام الخصائص.^{[٩]Xمصدر بحثي} إليك مثال سيعرض شعار How.com.vn متبوعًا بوصف لكل خاصية:
- <img src="http://pad2.whstatic.com/skins/owl/images/wikihow_logo.png" style="width:324px;height:84px" alt="How.com.vn العربية: How.com.vn logo">
- تُعلم الخاصية src=" " المتصفّح بمكان إيجاد الصورة. (لاحظ أن عرض صورة من موقع شخص آخر أمر فظ - وستختفي الصورة إن لم يصبح الموقع متاحا على الإنترنت).
- يمكن للخاصية style=" " أداء الكثير من المهام، والأهم هو استخدام الخاصية لتحديد عرض وارتفاع الصورة بوحدة البكسل. (يمكنك عوضًا عن ذلك استخدام خواص عرض width=" " وطول height=" " مختلفة، إلا أن ذلك قد يؤدي إلى مشاكل تحجيم غريبة إن كنت تستخدم CSS.^{[١٠]Xمصدر بحثي})
- الخاصية alt="How.com.vn العربية: " عبارة عن وصف قصير للصورة، وسيرى المستخدم هذا الوصف إن لم تظهر الصورة. تعد هذه الخاصية أحد المتطلبات لأنه مفيد للقراء المكفوفين.^{[١١]Xمصدر بحثي}

جزء 4

جزء 4 من 4:

معرفة المزيد ونشر صفحتك على الإنترنت

تنزيل المقال

1
راجع كود صفحتك الإتش تي إم إل. راجع كود برمجة صفحة الويب بلغة إتش تي إم إل بحثًا عن الأخطاء. إن لم تظهر صفحة الويب بشكل صحيح، فقد يساعدك البحث في إيجاد الأخطاء التي تسبب المشاكل. يمكن أن تستفيد من ذلك أيضًا لتعلّم المزيد عن إتش تي إم إل عن طريق تحديد الرموز التي تظهر بشكل صحيح، إلا أن ذلك أمر لا يُنصح به بسبب تحديثات قواعد إتش تي إم إل القياسية. لا يؤدي استخدام أكواد إتش تي إم إل غير صحيحة لإفساد موقعك الإلكتروني، إلا أن ذلك قد يؤدي إلى حدوث مشاكل أو عدم ثبات شكل الموقع مع المتصفحات المختلفة.
- جرّب خدمة تحقق مجانية على الإنترنت من خلال W3C أو ابحث عن خدمة تحقق أخرى للغة HTML 5.
2
اعرف المزيد من الوسوم والخصائص. هناك الكثير من وسوم وخصائص إتش تي إم إل الأخرى، وهناك أيضًا الكثير من الأماكن لتعلّمها:
- جرّب w3schools و HTML Dog للاطلاع على مزيد من المقالات التعليمية ورؤية قائمة كاملة للوسوم.
- ابحث عن صفحة ويب تشبه صفحتك، واستخدم خاصية استعراض المصدر (View Page) في متصفحك للاطلاع على رموز إتش تي إم إل . انسخ الرمز والصقه في مستندك ثم تلاعب به لرؤية النتائج.
- اقرأ مقالات أخرى لتتعلم إنشاء جداول إتش تي إم إل، واستخدام الوسوم الفوقية لتحسين ترتيب نتائج البحث، واستخدام div و span للمساعدة في استخدام Css.
3
انشر صفحتك على الإنترنت. اختر خدمة استضافة، ويمكنك بعد ذلك رفع كل صفحات إتش تي إم إل التي ترغب بنشرها من خلال اسم نطاقك الخاص. سيتعيّن عليك استخدام برنامج FTP لتحقيق ذلك، إلا أن الكثير من الخدمات توفّر ذلك أيضًا.
- لا حاجة لاستخدام العنوان الكامل عند ربط الصفحات والصور بموقعك الإلكتروني. على سبيل المثال، إن كان اسم النطاق الخاص بك www.superskilledhtmlcoder.com، فتضمين الرابط <a href="/journal/monday.html"> بداخل هذه الوسوم</a> سيؤدي للارتباط بالعنوان "www.superskilledhtmlcoder.com/journal/monday.html"
إن كانت صفحتك تبدو عادية للغاية، جرب تعلم سي إس إس قليلًا لإضافة الألوان وتغيير الخطوط وامتلاك مزيد من التحكم بمواقع العناصر. يسمح لك ربط CSS بصفحة HTML بالقيام بتغييرات قوية بسرعة، وتعديل شكل النصوص الموجودة بوسم ما أوتوماتيكيا. يمكنك الاطلاع على مقال مفصل للتلاعب بملفات سي إس إس من خلال الرابط HTML Dog's CSS guide.
لغة جافا سكريبت (JavaScript) هي لغة برمجة تُستخدم لإضافة مزيد من الوظائف إلى صفحات إتش تي إم إل. أوامر جافا سكريبت أوامر يتم إدخالها بين وسوم البداية والنهاية <script> </script>، ويمكن استخدامها لإضافة أزرار تفاعلية وحساب مسائل الرياضيات وغير ذلك الكثير. احصل على مزيد من المعلومات من خلال الرابط the w3c examples.

أفكار مفيدة

نوع الترميز المستخدم في هذا المقال هو "loose HTML 4.0.1 transitional"، وهو تنسيق جيد للمبتدئين.^{[١٢]Xمصدر بحثي} استخدم (<!DOCTYPE html>) عوضًا عن ذلك ليقوم المتصفح بترجمة ذلك على أنه تنسيق HTML 5 صريح ويُنصح باستخدام هذا المقياس (على الرغم من أنه أقل شيوعًا).

تحذيرات

لغة إتش تي إم إل معدّة لعرض المحتوى بتنسيق موحّد. لا تُعنى اللغة بالتحكم في عرض صفحة الويب، كالتحكم في لون الخلفية وموقع العناصر الدقيق. على الرغم من تواجد وسوم تسمح لك بفعل ذلك، فاستخدام سي إس إس لامتلاك مزيد من التحكم بصفحة الويب أمر يُنصح به.

الأشياء التي ستحتاج إليها

محرر نصوص بسيط، مثل: المفكرة (NotePad) أو تيكست إيديت (TextEdit).
متصفح إنترنت، مثل: إنترنت إكسبلورير أو موزيلا فايرفوكس.
(اختياري) محرر إتش تي إم إل، مثل: Adobe Dreamweaver أو Aptana Studio أو Microsoft Expression Web.