المحتوى

• خطوات
• الجزء 1: كيف اكتشفت HTML
• النصيحة
• تحذير
• ماذا تحتاج

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

خطوات

جزء 1 من 4: بناء مستند

1. 

   افتح محرر نص بسيط. NotePad هو خيار جيد ويمكن تنزيله مجانًا. يمكنك كتابة HTML باستخدام معظم برامج تحرير النصوص ، ولكن البرامج الأكثر تعقيدًا ذات إمكانات التنسيق التلقائي قد تجعل من الصعب تنظيم صفحة HTML الخاصة بك.
   • لا تستخدم TextEdit ، لأنه عادةً ما يحفظ الملف بتنسيق قد لا يتعرف عليه متصفحك بتنسيق HTML.
   • يمكنك أيضًا استخدام محرر HTML عبر الإنترنت. لا ينصح ببرامج تحرير HTML المخصصة للمبتدئين.

2. 

   
   
   احفظ الملف كصفحة ويب. اختر ملف ← حفظ باسم في القائمة بالأعلى. قم بتغيير تنسيق الملف إلى "صفحة ويب" أو ".html" أو ".htm". احفظ الملف حيث يمكنك العثور عليه بسهولة.
   • لا يوجد فرق بين هذه الخيارات الثلاثة.

3. 

   افتح الملف في المتصفح. انقر نقرًا مزدوجًا على الملف ، وسيفتح تلقائيًا كصفحة ويب فارغة في متصفحك. بدلاً من ذلك ، يمكنك فتح مستعرض ، مثل Firefox أو Internet Explorer ، ثم استخدام File → Open File لتحديد المستند.
   • هذا الموقع ليس على الإنترنت. يمكن مشاهدته فقط على جهاز الكمبيوتر الخاص بك.

4. 

   
   
   قم بتحديث صفحة الويب وشاهد التغييرات التي تم إجراؤها. اكتب ما يلي في مستندك الفارغ: مرحبا. احفظ المستند. قم بتحديث صفحة الويب الفارغة في متصفحك ، وسترى كلمة "مرحبًا" بالخط العريض تظهر في أعلى الصفحة. متى أردت اختبار HTML الجديد الخاص بك أثناء هذا البرنامج التعليمي ، احفظ مستند .htm ، ثم قم بتحديث نافذة المتصفح لترى كيف يتم تجميع HTML.
   • إذا رأيت الكلمات ""و"يظهر في المستعرض الخاص بك ، لم يتم تجميع الملف بشكل صحيح بتنسيق HTML. جرب محرر نصوص مختلف أو متصفح مختلف.

5. 

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

6. 

   بناء المستند الخاص بك. احذف كل شيء في مستند HTML الخاص بك. ابدأ من جديد بالنص التالي ، تمامًا كما هو مكتوب (باستثناء النقاط النقطية). يخبر كود HTML هذا المتصفح بنوع HTML الذي تستخدمه ، وأنه سيتم وضع كل HTML الخاص بك داخل العلامات. و .

7. 

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

8. 

   امنح صفحتك عنوانًا. معظم البطاقات الموجودة في قسم الرأس ليست مهمة للتعلم مع المبتدئين. ومع ذلك ، فإن علامة العنوان سهلة الاستخدام ، وستحدد ما يظهر كاسم نافذة المتصفح أو في علامة تبويب المتصفح. ضع علامتي بداية ونهاية العنوان داخل علامات الرأس ، واكتب أي رؤوس تريدها بين هذه العلامات:
   الإعلانات

جزء 2 من 4: تنسيق النص

1. 

   أضف نصًا إلى جسمك. في هذا القسم ، سنعمل فقط مع علامات الجسم. سيظل النص الآخر موجودًا في المستند ، لكننا سنوفر مساحة من خلال عدم تكراره في هذا البرنامج التعليمي. اكتب ما تريد بين البطاقات و ، وسيظهر كأول محتوى في صفحتك. فمثلا:
   • لقد اتبعت تعليمات wikiHow لكتابة صفحة HTML.

2. 

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

   • لقد اتبعت تعليمات wikiHow لكتابة صفحة HTML.

   • هدفي اليوم:

   • الأهداف المكتملة:

   • تعلم كيفية استخدام العناوين.

   • أهداف غير مكتملة:

   • تعرف على المزيد من علامات تنسيق النص.

3. 

   تعرف على المزيد من علامات تنسيق النص. لقد رأيت بالفعل العلامة "القوية" ، ولكن هناك الكثير من الطرق الأخرى لتنسيق النص الخاص بك. جرب هذه العلامات ، أو بعلامات متعددة في وقت واحد لنفس السلسلة النصية. تذكر أن تضيف علامات النهاية في الخلف!
   • نص هام ، معروض بخط عريض في المتصفح.
   • نص مؤكد ، معروض بخط مائل في المتصفح.
   • نص أصغر قليلاً من المعتاد. سيتم تغيير حجم هذا النص تلقائيًا إذا تم استخدامه في عنوان.
   • لم يعد النص ملائمًا ، ويتم عرضه بشرطة نصية.
   • يتم إدراج النص بعد المستندات الأخرى ، ويتم عرضه مع تسطير.

4. 

   تنظيم النص على صفحتك. ربما لاحظت أن الضغط على مفتاح "الإدخال" لا يكفي لظهور النص في سطر آخر. يمكن أن تساعدك هذه العلامات في إنشاء فقرات وفواصل أسطر ، أو ترتيب النص بطرق أخرى:

   • اختصارًا لـ "فقرة" ، علامة (فقرة) ستحتفظ بكل النص الموجود بين هذه العلامات في فقرة ، وتفصله عن النص أعلاه وأسفله.

   • 
     هذه العلامة سوف تولد فواصل أسطر. لا تضف علامة نهاية إليها ، لأنها لا تتعارض مع أي محتوى آخر. استخدم هذه العلامة في القصائد أو سطور العناوين وليس الفقرات.

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

   • تحدد هذه العلامة نوع النص المقتبس من المصدر.

     يمكنك وصف المصدر لاحقًا باستخدام بطاقة الاستشهاد.

5. 

   أضف نص تسمية توضيحية غير مرئي. لا يتم عرض علامات التعليق على صفحة الويب. إنها تسمح لك بالتعليق على مستند HTML دون التأثير على المحتوى. لا تضف علامة نهاية.
   • البطاقات التي تذهب وحدها بدون علامات نهائية تسمى "علامات فارغة".

6. 

   اجمعهم معًا. أفضل طريقة لتذكر هذه العلامات هي استخدامها على موقع الويب الخاص بك. فيما يلي مثال على استخدام البطاقات في الخطوات التي تعلمتها حتى الآن. حاول أن تتنبأ بكيفية ظهورها في المتصفح ، ثم انسخها إلى المستند الخاص بك واكتشف ذلك.
   • مرحبا بكم في موقع الويب الخاص بي.

   • أتمنى أن تستمتع بهذه الصفحة!

     لقد صنعته من أجلك فقط.

   • الجزء 1: كيف اكتشفت HTML

   • لقد تعلمت HTML بالفعل في واحد اثنانساعات ، لذلك أنا الآن خبير.
   الإعلانات

جزء 3 من 4: إضافة روابط وصور

1. 

   تعرف على السمات. يمكن أن تحتوي العلامات على معلومات إضافية مكتوبة بداخلها ، تسمى السمات. يتم تمثيل هذه السمات بواسطة كلمات إضافية داخل العلامات نفسها ، في النموذج اسم الخاصية = "قيمة محددة". على سبيل المثال ، يمكن أن تحتوي أي علامة HTML على سمة العنوان:

   • فقرة المقدمة هنا.

     ضع عنوانًا للفقرة "مقدمة" ، والتي ستظهر عندما تحوم فوق الفقرة الموجودة على صفحة الويب.

2. 

   روابط لمواقع أخرى. استخدام البطاقات لإنشاء ارتباط تشعبي إلى أي صفحة ويب أخرى. أدخل عنوان URL لصفحة الويب للارتباط باستخدام سمة href. إليك مثال يرتبط بصفحة الويب التي تقرأها:
   • يمكن لزوار موقع الويب الخاص بك النقر فوق هذا النص لمتابعة الارتباط.

3. 

   أضف سمة معرف إلى العلامة. السمة الأخرى التي يمكن أن تستخدمها أي علامة HTML هي عنصر "id". في أي بطاقة ، اكتب معرف = "vidu" أو استخدم أي اسم لا يحتوي على مسافات. لا ينتج عنه أي تأثير مرئي ، لكننا سنستخدمه في الخطوة التالية.
   • على سبيل المثال ، أضف ما يلي إلى المستند الخاص بك:

     تُستخدم هذه الفقرة كمثال لوصف كيفية عمل سمة المعرف.

4. 

   الارتباط بعنصر بمعرف معين. الآن يمكننا استخدام علامة الارتباط التشعبي ، ، للارتباط بموقع آخر على نفس الصفحة. بدلاً من عنوان URL ، سنستخدم الرمز # ، متبوعًا بقيمة المعرف التي نريد الارتباط بها. فمثلا، سيرتبط هذا النص بالنص بالمعرّف "vidu".
   • جميع قيم HTML حساسة لحالة الأحرف. سيرتبط كل من "#VIDU" و "#vidu" بنفس الموقع.
   • إذا كانت صفحتك قصيرة بما يكفي لعرض الصفحة بأكملها مرة واحدة ، فمن المحتمل ألا تلاحظ أي شيء يحدث عند النقر فوق الارتباط في متصفحك. قم بتغيير حجم النافذة حتى يظهر شريط التمرير ، ثم حاول مرة أخرى.

5. 

   إضافة الصور. بطاقة هي علامة فارغة ، مما يعني عدم الحاجة إلى علامة نهاية. تتم إضافة جميع المعلومات التي يحتاجها المتصفح لعرض الصورة باستخدام السمات. فيما يلي مثال لعرض شعار wikiHow ، مع وصف لكل سمة خلفها:
   • 
   • الخصائص src = "" يخبر المتصفح بمكان الصورة. (لاحظ أن نشر صورة من موقع شخص آخر يعتبر غير لائق - وستختفي الصورة عندما لا تكون الصفحة نشطة.)
   • الخصائص النمط = "" يمكنه القيام بالعديد من الأشياء ، ولكن الأهم من ذلك أنه يستخدم لتعيين عرض وارتفاع الصورة بالبكسل. (يمكنك أيضًا استخدام السمات المنفصلة width = "" and height = "" بدلاً من ذلك ، ولكن هذا قد يؤدي إلى مشاكل غريبة في تغيير الحجم إذا كنت تستخدم CSS.)
   • الخصائص alt = "" هو وصف موجز للصورة سيرى المستخدم إذا فشل تحميل الصورة. يعتبر هذا من المتطلبات ، حيث يتم استخدامه لقارئات الشاشة لزوار الموقع المكفوفين.
   الإعلانات

جزء 4 من 4: تعرف على المزيد حول إضافة موقع الويب الخاص بك والحصول عليه عبر الإنترنت

1. 

   قم بتأكيد HTML الخاص بك. يتحقق التحقق من صحة HTML من وجود أخطاء في التعليمات البرمجية الخاصة بك. إذا لم يتم عرض موقعك بشكل صحيح ، يمكن أن يساعدك التحقق في العثور على الخطأ الذي يسبب المشكلة. يمكنه أيضًا أن يعلمك المزيد عن HTML من خلال تحديد أن الكود يبدو جيدًا في العرض ، ولكن لم يعد موصى به بسبب التحديثات الجديدة في معيار HTML. لا يؤدي استخدام HTML غير صالح إلى جعل موقعك عديم الفائدة ، ولكنه قد يتسبب في حدوث مشكلات أو عرضه غير مستقر على متصفحات مختلفة.
   • جرب خدمة تحقق مجانية عبر الإنترنت من W3C أو ابحث عن أداة أخرى للتحقق من صحة HTML 5 عبر الإنترنت.

2. 

   تعرف على المزيد من العلامات والسمات. هناك العديد من علامات وسمات HTML الأخرى والعديد من الأماكن لتعلمها:
   • جرب w3schools و HTML Dog لمزيد من البرامج التعليمية وقوائم العلامات الكاملة.
   • ابحث عن صفحة ويب تعجبك بالشكل الذي تبدو عليه ، ثم استخدم وظيفة "عرض مصدر الصفحة" في المتصفح للحصول على كود HTML بنفسك. قم بنسخه في المستند الخاص بك ودراسة كيفية عمله.
   • اقرأ مقالات أخرى وتعرف على كيفية إنشاء جداول بتنسيق HTML ، واستخدام العلامات الوصفية لزيادة فرصك في العثور عليها من خلال محركات البحث ، أو استخدام التقسيم. قم بتعيين منطقة على الصفحة) وامتداد (يُستخدم لتحديد نمط عنصر النص) للمساعدة في النمط عبر CSS.

3. 

   احصل على موقع الويب الخاص بك على الإنترنت. اختر خدمة لاستضافة موقع الويب الخاص بك ، وبعد ذلك يمكنك تحميل العديد من صفحات HTML كما تريد إلى مجال الويب الشخصي الخاص بك. للقيام بذلك ، ستحتاج إلى استخدام برنامج تحميل FTP ، لكن العديد من خدمات تأجير الويب تقدم هذه الخدمة أيضًا.
   • عند الارتباط بصفحات أو صور موجودة مباشرة على موقعك ، ستحتاج إلى استخدام العنوان الكامل. على سبيل المثال ، إذا كان اسم المجال الخاص بك هو www.chuyengiahtmlsieudang.com ، إذن النص في هذه العلامات سيرتبط بـ "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"

4. 

   أضف أنماطًا باستخدام CSS. إذا كانت صفحة HTML الخاصة بك تبدو رتيبة بعض الشيء ، فحاول تعلم أساسيات CSS لإضافة ألوان وخطوط مختلفة وتحكم أفضل في مكان وضع العناصر. سيسمح لك ربط "ورقة أنماط" CSS بصفحة HTML بإجراء تغييرات قوية على الفور ، وضبط نمط كل النص تلقائيًا داخل علامة معينة. يمكنك التلاعب بطبقة التنسيق الأساسية قليلاً هنا ، أو الغوص في المزيد من البرامج التعليمية التفصيلية في البرنامج التعليمي لـ HTML Dog's CSS.

5. 

   أضف JavaScript إلى موقع الويب الخاص بك. JavaScript هي لغة برمجة تُستخدم لإضافة الكثير من الوظائف إلى صفحات HTML الخاصة بك. يتم إدراج أوامر JavaScript بين علامتي البداية والنهاية ، ويمكن استخدامه لإضافة أزرار تفاعلية وحساب مسائل الرياضيات والمزيد. اكتشف المزيد في أمثلة w3c. الإعلانات

النصيحة

• إعلان نوع المستند (إعلان نوع المستند المستخدم) المستخدم في هذا البرنامج التعليمي "HTML 4.0.1 انتقالي فضفاض" (HTML 4.0.1 ليس انتقالًا ضيقًا) ، تنسيق سهل. للمبتدئين للاستخدام. استعمال () بديل لقيام المتصفح بترجمته بتنسيق HTML 5 صارم ، وهو النمط القياسي الموصى به (وإن كان أقل استخدامًا).

تحذير

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

ماذا تحتاج

• محرر نصوص بسيط ، مثل NotePad أو TextEdit
• مستعرض ويب ، مثل Internet Explorer أو Mozilla Firefox
• (اختياري) محرر HTML مثل Adobe Dreamweaver أو Aptana Studio أو Microsoft Expression Web