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

PDF download تنزيل المقال
PDF download تنزيل المقال

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

جزء 1
جزء 1 من 4:

إعداد مستند

PDF download تنزيل المقال
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5b\/Write-an-HTML-Page-Step-1-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-1-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5b\/Write-an-HTML-Page-Step-1-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-1-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    برنامج المفكرة (NotePad) خيار جيّد يمكن تنزيله مجّانًا. يمكنك كتابة رموز إتش تي إم إل بمعظم محرّرات النصوص، إلا أن البرامج المعقّدة التي يتوفر بها خواص تنسيق تلقائي للنص ستجعل من مهمة تنظيم صفحة إتش تي إم إل أمرًا صعبًا. [١]
    • لا يُنصح باستخدام برنامج "تيكست إيديت" (TextEdit) لأنه يحفظ الملف عادة بصيغة لا يمكن لمتصفح الإنترنت التعرّف عليها كصفحة إتش تي إم إل.
    • يمكنك أيضًا استخدام محرّر إتش تي إم إل على شبكة الإنترنت. لا يُنصح باستخدام برامج تحرير إتش تي إم إل متخصّصة للمبتدئين. [٢]
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b2\/Write-an-HTML-Page-Step-2-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-2-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b2\/Write-an-HTML-Page-Step-2-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-2-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    افتح القائمة ملف File ← حفظ باسم Save As من القائمة العلوية. غيّر صيغة الملف لتكون صفحة ويب "Web Page" أو ".html" أو ".htm". احفظ الملف في مكان يمكنك إيجاده بسهولة.
    • لا فرق بين هذه الخيارات الثلاث.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/45\/Write-an-HTML-Page-Step-3-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-3-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/45\/Write-an-HTML-Page-Step-3-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-3-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    انقر نقرًا مزدوجًا على الملف وسيؤدي ذلك لفتح صفحة ويب فارغة في متصفّحك. يمكنك أيضًا فتح المتصفّح، مثل: فايرفوكس أو إنترنت إكسبلورير، واستخدام القائمة ملف File ← فتح ملف Open File لاختيار مستند.
    • لا تتواجد هذه الصفحة على الإنترنت. يمكن عرض هذه الصفحة على جهاز الكمبيوتر فقط.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/98\/Write-an-HTML-Page-Step-4-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-4-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/98\/Write-an-HTML-Page-Step-4-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-4-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    اكتب الرمز التالي في مستند فارغ. <strong>Hello</strong> . احفظ المستند. أعِد تحميل صفحة الويب الفارغة في متصفّحك وسترى كلمة "Hello" أعلى الصفحة بخط عريض. عند رغبتك باختبار رمز HTML جديد في هذا المقال، احفظ ملف .html ثم أعِد تحميل الصفحة في المتصفّح لرؤية التغييرات الحادثة في الصفحة.
    • إن ظهرت الكلمات "<strong>" و "</strong>'' في المتصفّح، فإن الملف لا يظهر كصفحة HTML على الأرجح. جرّب برنامج تحرير نصوص آخر أو متصفّح مختلف.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/de\/Write-an-HTML-Page-Step-5-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-5-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/de\/Write-an-HTML-Page-Step-5-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-5-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    تُكتب تعليمات إتش تي إم إل على هيئة وسوم تُعلم متصفّح الإنترنت بطريقة فهم التعليمات وعرضها في صفحة الويب. تُكتب التعليمات دائمًا بين أقواس مستطيلة <كهذه>، ولا تُعرض هذه الأقواس في صفحة الويب. لقد استخدمت هذه الوسوم في المثال السابق.
    • يسمّى الوسم <strong> وسم بداية أو وسم افتتاح. يتم تعريف أي شيء مكتوب بعد هذا الوسم على أنه خط ظاهر (ويتم إظهاره بخط عريض على صفحة الويب عادة).
    • يسمّى الوسم </strong> وسم نهاية أو وسم إغلاق، ويمكنك تمييزه بالرمز / . يُظهر هذا الرمز مكان انتهاء النص الظاهر. تحتاج معظم الوسوم (وليس كلها) إلى وسم نهاية حتى تعمل بشكل صحيح، لذا تذكّر تضمين ذلك في رمزك البرمجي.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/24\/Write-an-HTML-Page-Step-6-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-6-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/24\/Write-an-HTML-Page-Step-6-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-6-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    احذف كل شيء في مستند إتش تي إم إل. ابدأ مجدّدًا بالنص التالي كما هو مكتوب بالضبط (مع تجاهل نقاط الترقيم). يقوم هذا النص بإخبار المتصفّح بنوع رمز إتش تي إم إل بلس الذي ستستخدمه، وأن الرمز البرمجي بالكامل سيكون بين الوسوم <html> و </html>. [٣]
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <html>
    • </html>
  7. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/d\/dd\/Write-an-HTML-Page-Step-7-Version-5.jpg\/v4-460px-Write-an-HTML-Page-Step-7-Version-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/d\/dd\/Write-an-HTML-Page-Step-7-Version-5.jpg\/v4-728px-Write-an-HTML-Page-Step-7-Version-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    يتم تقسيم صفحات إتش تي إم إل لقسمين. يختص قسم الترويسة (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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/5\/5d\/Write-an-HTML-Page-Step-8-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-8-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/5\/5d\/Write-an-HTML-Page-Step-8-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-8-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    لا يهم تعلّم معظم الوسوم التي تكون في الترويسة بالنسبة للمبتدئين. يسهل استخدام وسم العنوان، ويحدد هذا الوسم الاسم الذي سيظهر في لسان تبويب المتصفّح. اكتب وسوم البداية والنهاية بداخل وسم الترويسة، واكتب أي عنوان ترغب به بينهما:
    • <!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:

تنسيق النص

PDF download تنزيل المقال
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/c\/ce\/Write-an-HTML-Page-Step-9-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-9-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/c\/ce\/Write-an-HTML-Page-Step-9-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-9-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    ستعمل مع وسوم جسم الصفحة فقط في هذا القسم. سيكون النص الآخر موجودًا في مستندك، إلا أننا سنوفّر بعض المساحة عن طريق عدم تكرار النص عدّة مرّات في هذا الدليل. اكتب أي شيء ترغب بكتابته بين الوسوم <body> و </body>، وسيظهر النص المضاف كأول نص في صفحتك. على سبيل المثال:
    • <body>
    • I'm following the wikiHow guide to write an HTML page.
    • </body>
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/10\/Write-an-HTML-Page-Step-10-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-10-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/10\/Write-an-HTML-Page-Step-10-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-10-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    نظّم صفحتك بوسوم ترويسات تُعلم المتصفّح بإظهار النص الموجود بداخلها بحجم أكبر. تُستخدم هذه النصوص أيضًا بواسطة روبوتات محركات البحث والأدوات الأخرى لتحديد محتوى الصفحة وطريقة تنظيمها.<h1> </h1> أكبر ترويسة، ويمكنك إنشاء ترويسات أصغر حتّى تصل إلى الوسم <h6> </h6>. جرّب هذه الوسوم في صفحتك:
    • <body>
    • <h1>Welcome to My Web Page.</h1>
    • I'm following the wikiHow 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. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/25\/Write-an-HTML-Page-Step-11-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-11-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/25\/Write-an-HTML-Page-Step-11-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-11-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    لقد رأيت وسم النص العريض بالفعل، إلا أن هناك طرق أخرى لتنسيق النص. تعرّف على هذه الطرق، أو جرّب عدّة وسوم على نفس النص. تذكّر دائمًا أن تضيف وسم النهاية بعد الانتهاء.
    • <strong> نص مهم، يظهر كخط عريض في معظم المتصفحات. </strong>
    • <em> نص بارز، يظهر كنص مائل في معظم المتصفحات. </em>
    • <small> نص أصغر من الطبيعي قليلًا. يؤدي ذلك لتحديد المقاس تلقائيًّا عند استخدام الترويسة. [٤] </small>
    • <del> نص ملغي، ويظهر بخط في منتصفه. line. </del>
    • <ins> نص مضاف إلى نص سابق، ويظهر بخط سفلي. </ins>
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/f\/f9\/Write-an-HTML-Page-Step-12-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-12-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f9\/Write-an-HTML-Page-Step-12-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-12-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    لعلّك لاحظت أن الضغط على زر الإدخال غير كاف لإظهار النص في سطر جديد. يمكن للوسوم التالية مساعدتك على كتابة الفقرات وفواصل الأسطر أو ترتيب النصوص بطريقة مختلفة:
    • <p> اختصار لكلمة فقرة. يؤدي استخدام هذا الوسم لإظهار النص الموجود بداخله في فقرة واحدة وفصله عن بقية النص من الأعلى والأسفل. </p>
    • <br> يُؤدي ذلك لإنشاء فاصل أسطر. "لا" تكتب وسم نهاية لهذا الغرض لأنه لا يغير المحتويات الأخرى. استخدم هذا الوسم للقصائد أو لأسطر العناوين وليس لفصل الفقرات. [٥]
    • <pre> إن كنت ترغب بعرض نص بشكل دقيق جدًا، يقوم هذا الوسم بضبط النص بداخل نص محدد العرض (على أن يكون كل حرف بحجم الحروف الأخرى)، ويسمح لك بكتابة مسافات وفواصل أسطر بطريقة الكتابة العادية دون وسوم. [٦] </pre>
    • <blockquote> يحدد هذا الوسم النص المقتبس من مصدر آخر. </blockquote> يمكنك وصف المصدر بعد ذلك عن طريق استخدام <cite> وسم المصدر </cite> .
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/1\/13\/Write-an-HTML-Page-Step-13-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-13-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/1\/13\/Write-an-HTML-Page-Step-13-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-13-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    وسوم التعليقات غير ظاهرة على صفحات الويب، وتسمح لك هذه الوسوم بكتابة ملاحظات لنفسك في مستند HTML دون التدخّل في المحتوى. <!--- اكتب تعليقك بداخل الوسم. ---> ولا تُضف وسم نهاية.
    • تسمى الوسوم التي لا تحتاج إلى وسوم نهاية بالوسوم الفارغة.
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2e\/Write-an-HTML-Page-Step-14-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-14-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2e\/Write-an-HTML-Page-Step-14-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-14-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    أفضل طريقة لتذكر هذه الوسوم هي استخدامها في صفحتك الخاصة. إليك مثال على استخدام هذه الوسوم من الخطوات التي تعلّمتها حتى الآن. حاول توقّع كيفية ظهور الصفحة في المتصفّح، ثم انسخ الرمز والصقه بالمتصفّح لاكتشاف ذلك.
    • <!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>
    • <!---Note to self: remember that "h1" is a larger header than "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:

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

PDF download تنزيل المقال
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7d\/Write-an-HTML-Page-Step-15-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-15-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7d\/Write-an-HTML-Page-Step-15-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-15-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    يمكن أن تمتلك الوسوم بيانات إضافية مكتوبة بداخلها، وتسمى هذه البيانات بالخصائص. تظهر هذه الخصائص ككلمات إضافية بداخل الوسم نفسه على هيئة attribute-name="specific value ". على سبيل المثال، يمكن أن يمتلك أي وسم إتش تي إم إل خاصية العنوان (title):
    • <p title="مقدمة">اكتب فقرة المقدمة هنا.</p> يمنح ذلك الفقرة عنوانًا هو "مقدمة"، ويظهر هذا العنوان عند تحريك مؤشر الفأرى فوق الفقرة في صفحة الويب.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/31\/Write-an-HTML-Page-Step-16-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-16-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/31\/Write-an-HTML-Page-Step-16-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-16-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    استخدم الوسم <a> </a> لإنشاء رابط تشعبي يقود إلى صفحة ويب أخرى. أدخل عنوان صفحة الويب لربطها عن طريق استخدام الخاصية href. إليك مثال يربط الصفحة بالصفحة التي تقرأها الآن:
    • <a href="http://www.wikihow.com/Write-an-HTML-Page">يمكن لزوار موقعك النقر على هذا النص لاتباع الرابط.</a>
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a5\/Write-an-HTML-Page-Step-17-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-17-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a5\/Write-an-HTML-Page-Step-17-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-17-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    وسم المعرّف أحد الوسوم الأخرى التي يمكن لأي وسم من وسوم إتش تي إم إل استخدامها. اكتب id="example" بداخل أي وسم، أو استخدم أي اسم لا يتضمن مسافات. [٧] لن يمتلك ذلك أي تأثير ظاهر على الإطلاق، إلا أننا سنستخدمه في الخطوة التالية.
    • أضف ذلك إلى مستندك، على سبيل المثال: <p id="example">سأستخدم هذه الفقرة كمثال لإظهار طريقة استخدام خاصية id.</p>
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a5\/Write-an-HTML-Page-Step-18-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-18-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a5\/Write-an-HTML-Page-Step-18-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-18-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    يمكننا الآن استخدام وسم الرابط التشعبي <a> </a> للارتباط بموقع آخر في نفس الصفحة. سنستخدم الرمز # متبوعًا بالمعرّف الذي نرتبط به عوضًا عن استخدام العنوان. على سبيل المثال، <a href="#example"> سيقوم هذا النص بربط الفقرة بالمعرّف "example". </a>
    • كل قيم HTML غير حساسة لحالة الأحرف. [٨] سيقود المعرّفان "#EXAMPLE" و "#example" إلى نفس المكان.
    • إن كانت صفحتك قصيرة بما فيه الكفاية لعرضها بالكامل، قد لا تلاحظ أي تغيّر عند النقر على الرابط في متصفّحك. أعِد تحجيم النافذة حتى يظهر شريط التحريك ثم حاول مجددًا.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/49\/Write-an-HTML-Page-Step-19-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-19-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/49\/Write-an-HTML-Page-Step-19-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-19-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    وسم الصورة <img> وسم فارغ، مما يعني أنك لا تحتاج إلى وسم نهاية. سيتم إضافة كل البيانات التي يحتاجها المتصفّح لعرض الصور باستخدام الخصائص. [٩] إليك مثال سيعرض شعار wikiHow متبوعًا بوصف لكل خاصية:
    • <img src="http://pad2.whstatic.com/skins/owl/images/wikihow_logo.png" style="width:324px;height:84px" alt="wikiHow logo">
    • تُعلم الخاصية src=" " المتصفّح بمكان إيجاد الصورة. (لاحظ أن عرض صورة من موقع شخص آخر أمر فظ - وستختفي الصورة إن لم يصبح الموقع متاحا على الإنترنت).
    • يمكن للخاصية style=" " أداء الكثير من المهام، والأهم هو استخدام الخاصية لتحديد عرض وارتفاع الصورة بوحدة البكسل. (يمكنك عوضًا عن ذلك استخدام خواص عرض width=" " وطول height=" " مختلفة، إلا أن ذلك قد يؤدي إلى مشاكل تحجيم غريبة إن كنت تستخدم CSS. [١٠] )
    • الخاصية alt=" " عبارة عن وصف قصير للصورة، وسيرى المستخدم هذا الوصف إن لم تظهر الصورة. تعد هذه الخاصية أحد المتطلبات لأنه مفيد للقراء المكفوفين. [١١]
جزء 4
جزء 4 من 4:

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

PDF download تنزيل المقال
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b4\/Write-an-HTML-Page-Step-20-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-20-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b4\/Write-an-HTML-Page-Step-20-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-20-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    راجع كود برمجة صفحة الويب بلغة إتش تي إم إل بحثًا عن الأخطاء. إن لم تظهر صفحة الويب بشكل صحيح، فقد يساعدك البحث في إيجاد الأخطاء التي تسبب المشاكل. يمكن أن تستفيد من ذلك أيضًا لتعلّم المزيد عن إتش تي إم إل عن طريق تحديد الرموز التي تظهر بشكل صحيح، إلا أن ذلك أمر لا يُنصح به بسبب تحديثات قواعد إتش تي إم إل القياسية. لا يؤدي استخدام أكواد إتش تي إم إل غير صحيحة لإفساد موقعك الإلكتروني، إلا أن ذلك قد يؤدي إلى حدوث مشاكل أو عدم ثبات شكل الموقع مع المتصفحات المختلفة.
    • جرّب خدمة تحقق مجانية على الإنترنت من خلال W3C أو ابحث عن خدمة تحقق أخرى للغة HTML 5.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/37\/Write-an-HTML-Page-Step-21-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-21-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/37\/Write-an-HTML-Page-Step-21-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-21-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    هناك الكثير من وسوم وخصائص إتش تي إم إل الأخرى، وهناك أيضًا الكثير من الأماكن لتعلّمها:
    • جرّب w3schools و HTML Dog للاطلاع على مزيد من المقالات التعليمية ورؤية قائمة كاملة للوسوم.
    • ابحث عن صفحة ويب تشبه صفحتك، واستخدم خاصية استعراض المصدر (View Page) في متصفحك للاطلاع على رموز إتش تي إم إل . انسخ الرمز والصقه في مستندك ثم تلاعب به لرؤية النتائج.
    • اقرأ مقالات أخرى لتتعلم إنشاء جداول إتش تي إم إل، واستخدام الوسوم الفوقية لتحسين ترتيب نتائج البحث، واستخدام div و span للمساعدة في استخدام Css.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/94\/Write-an-HTML-Page-Step-22-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-22-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/94\/Write-an-HTML-Page-Step-22-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-22-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    اختر خدمة استضافة، ويمكنك بعد ذلك رفع كل صفحات إتش تي إم إل التي ترغب بنشرها من خلال اسم نطاقك الخاص. سيتعيّن عليك استخدام برنامج FTP لتحقيق ذلك، إلا أن الكثير من الخدمات توفّر ذلك أيضًا.
    • لا حاجة لاستخدام العنوان الكامل عند ربط الصفحات والصور بموقعك الإلكتروني. على سبيل المثال، إن كان اسم النطاق الخاص بك www.superskilledhtmlcoder.com، فتضمين الرابط <a href="/journal/monday.html"> بداخل هذه الوسوم</a> سيؤدي للارتباط بالعنوان "www.superskilledhtmlcoder.com/journal/monday.html"
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b4\/Write-an-HTML-Page-Step-23-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-23-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b4\/Write-an-HTML-Page-Step-23-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-23-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    إن كانت صفحتك تبدو عادية للغاية، جرب تعلم سي إس إس قليلًا لإضافة الألوان وتغيير الخطوط وامتلاك مزيد من التحكم بمواقع العناصر. يسمح لك ربط CSS بصفحة HTML بالقيام بتغييرات قوية بسرعة، وتعديل شكل النصوص الموجودة بوسم ما أوتوماتيكيا. يمكنك الاطلاع على مقال مفصل للتلاعب بملفات سي إس إس من خلال الرابط HTML Dog's CSS guide .
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/2a\/Write-an-HTML-Page-Step-24-Version-3.jpg\/v4-460px-Write-an-HTML-Page-Step-24-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/2a\/Write-an-HTML-Page-Step-24-Version-3.jpg\/v4-728px-Write-an-HTML-Page-Step-24-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    لغة جافا سكريبت (JavaScript) هي لغة برمجة تُستخدم لإضافة مزيد من الوظائف إلى صفحات إتش تي إم إل. أوامر جافا سكريبت أوامر يتم إدخالها بين وسوم البداية والنهاية <script> </script>، ويمكن استخدامها لإضافة أزرار تفاعلية وحساب مسائل الرياضيات وغير ذلك الكثير. احصل على مزيد من المعلومات من خلال الرابط the w3c examples .

أفكار مفيدة

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

تحذيرات

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

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

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

مقالات ذات صلة في ويكي هاو

كيفية
فتح ملفات EPUB
كيفية
استخدام تطبيق وي تشات
كيفية
استخدام برنامج الرسام في الويندوز
كيفية
التظاهر بقيامك بالقرصنة الإلكترونية
كيفية
إدراج خط منقط في برنامج وورد
كيفية
تنزيل برنامج Microsoft Word
كيفية
إزالة نص من صورة في فوتوشوب
كيفية
تقليل حجم فيديو
كيفية
قراءة أكواد باركود الدولية المكونة من 12 رقما
كيفية
تسجيل الصوت على جهاز كمبيوتر
كيفية
إدراج لون خلفية في لغة الترميز HTML
كيفية
إلغاء تثبيت برنامج ديب فريز

المصادر

  1. ↑ http://www.yourhtmlsource.com/myfirstsite/myfirstpage.html
  2. ↑ http://htmldog.com/guides/html/beginner/gettingstarted/
  3. ↑ http://www.w3.org/QA/Tips/Doctype
  4. ↑ HTML Tutorials
  5. ↑ http://www.w3schools.com/tags/tag_br.asp
  6. ↑ http://www.w3schools.com/tags/tag_pre.asp
  7. ↑ http://www.w3schools.com/tags/att_global_id.asp
  8. ↑ http://www.w3schools.com/tags/att_global_id.asp
  9. ↑ http://htmldog.com/guides/html/beginner/images/
  1. ↑ http://www.w3schools.com/html/html_images.asp
  2. ↑ http://www.w3schools.com/html/html_images.asp
  3. ↑ http://www.htmlbasictutor.ca/doctype-declaration.htm

المزيد حول هذا المقال

بلغات أخرى
تم عرض هذه الصفحة ٤٧٬٦٧٩ مرة.

هل ساعدك هذا المقال؟