كيفية إنشاء صفحة HTML

إذا كنت ترغب في إنشاء صفحة الويب الخاصة بك, يجب أن يكون لديك فهم لـ HTML. تشرح هذه المقالة كيفية إنشاء صفحة HTML. أيضا, سوف تتعلم كيفية إنشاء خريطة موقع xml وكيفية إضافة صورة ورابط. من المهم أيضًا إنشاء خريطة موقع بتنسيق xml, والتي يمكن أن تساعدك في تنظيم موقعك وزيادة حركة المرور الخاصة بك. الخطوة التالية هي اختيار قالب.

إنشاء صفحة html

HTML هي لغة ترميزية. يتم تمثيل كل عنصر في صفحة الويب بعلامة. يتم تحديد العلامة بأقواس زاوية, وكل عنصر له علامة واحدة أو أكثر. تتطلب بعض العناصر علامة واحدة فقط; قد يتطلب البعض الآخر اثنين. تحتوي علامتا الفتح والإغلاق على شرطة مائلة للأمام (/). فمثلا, يتم تمثيل عنصر الفقرة بعلامة p. النص بين علامتي الفتح والختام هو نص الفقرة.

لإنشاء مستند HTML, سوف تحتاج إلى استخدام محرر نصوص. تحتوي معظم أجهزة الكمبيوتر على محرر نصوص افتراضيًا. سيستخدم مستخدمو Windows Internet Explorer, بينما يمكن لمستخدمي Mac استخدام TextEdit. يمكنك تثبيت محرر نصوص خيالي لإنشاء صفحة ويب ذات مظهر احترافي, ولكن لصفحة HTML الأولى الخاصة بك, ليس من الضروري. يمكنك أيضًا استخدام محرر نصوص بسيط وأي متصفح ويب. إذا لم تكن متأكدًا من البرنامج الذي تريد استخدامه, حاول تنزيل محرر HTML مجاني.

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

إنشاء خريطة موقع بتنسيق xml

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

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

بمجرد نشر صفحة HTML الخاصة بك, أرسله إلى Google Search Console. يمكنك استخدام أي امتداد للملف وتسمية خريطة موقع XML الخاصة بك. يمكنك إرسال خريطة موقع XML إلى Google, لكنها ليست ضرورية. تعد برامج الزحف الخاصة بـ Google جيدة بشكل عام في اكتشاف محتوى جديد, ولست بحاجة إلى تقديم خريطة موقع لهم. يمكنك أيضًا إرساله إلى محركات البحث الأخرى, ولكن هذا لا يضمن أن تكتشفك Google.

ليس من الضروري إضافة خريطة موقع XML إلى صفحة الويب الخاصة بك, ولكنه سيزيد من تحسين محركات البحث لموقعك على الويب. تستخدم محركات البحث خرائط المواقع لمساعدتها على فهرسة الصفحات التي لا ترتبط مباشرة بصفحة ويب. تساعد خرائط المواقع أيضًا في تحسين إمكانية الوصول إلى محتوى الوسائط الغنية. يمكن أن تساعد إضافة خريطة موقع إلى موقع الويب الخاص بك في تسهيل وصول روبوتات محرك البحث إلى موقعك.

إضافة صورة

في HTML, يمكنك إضافة صورة إلى صفحة باستخدام علامة img. تحتوي هذه العلامة فقط على الصورة والسمات الخاصة بها; لا يتطلب علامة إغلاق. يجب إدراج علامة الصورة هذه في قسم النص الأساسي لمستند HTML. بالإضافة إلى عرض الصورة وارتفاعها, يجب عليك تضمين سمة بديل تصف الصورة. يجب كتابة علامة alt كما لو كنت تكتب وصفًا لشخص لا يمكنه رؤيته.

تتطلب إضافة صورة إلى مستند HTML القليل من معرفة CSS و HTML. يعد حجم الصورة ودقتها من أهم العوامل التي يجب مراعاتها. سيحدد حجم الصورة كيفية ملاءمتها لمحتوى المستند. إذا كنت تفضل استخدام دقة أو نسبة عرض إلى ارتفاع مختلفة, يمكنك أيضًا محاولة تغيير حجم الصورة. لكن, تذكر أن القياس لا يعمل دائمًا كما تتوقع.

من القواعد الأساسية الجيدة لضبط حجم الصورة زيادة عرضها. يجب أن يكون العرض أصغر من الارتفاع بمقدار بكسل واحد على الأقل. إذا كانت الصورة صغيرة جدًا بحيث لا يمكن عرضها, يمكنك إضافة حد, ثم اضبطه ليناسب حجم الصورة. يمكنك أيضًا ضبط حدود الصورة بإضافتها إلى سمة الحدود. سمك الحد هو القيمة الافتراضية, ولكن يمكنك ضبطه على أي قيمة. تأكد من أن الصورة لها سمة src.

إضافة ارتباط

يمكنك إضافة ارتباط بتنسيق HTML إلى المستند الخاص بك باستخدام ملف> علامة مع السمة href. سيؤدي هذا إلى إنشاء إشارة مرجعية للمستند وفتحه في علامة تبويب جديدة. يمكنك أيضًا استخدام سمة href لإدراج صورة في المستند. يمكنك أيضًا استخدام رابط مع كود JavaScript لتحويل زر HTML إلى رابط. بمجرد أن تفعل هذا, يمكنك تصميم الرابط الخاص بك باستخدام كود CSS أو JavaScript.

الارتباط هو اتصال من مصدر ويب إلى آخر. يتكون من طرفين, نقطة ارتساء مصدر ووجهة ارتساء. يمكن أن يكون الارتباط أي شيء من صورة إلى ملف نصي. تستخدم معظم مواقع ومواقع الشبكات الاجتماعية روابط لتوجيه المستخدمين إلى عنوان URL معين. يمكن أيضًا استخدام HTML لتحديد موقع الارتباط. انه’ السمة تسمح لك بربط عناصر التعليمات البرمجية بعنوان URL.

عند تصميم الارتباط, تأكد من التفكير في كيفية استخدام الزوار للمحتوى. يجب أن يكون نص الرابط وصفيًا, حتى يعرفوا بالضبط ما يجب أن يتوقعوه. يعد تكرار نفس عنوان URL أمرًا قبيحًا لقارئات الشاشة, ولا يقدم لهم أي معلومات مفيدة. كما تخبر برامج قراءة الشاشة المستخدمين عند وجود الروابط من خلال جعلها ذات نمط مختلف أو تحتها خط. في هذا الطريق, يمكنهم بسهولة العثور على المعلومات التي يحتاجونها.

إضافة جدول

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

يمكنك إضافة رأس جدول وبيانات جدول مع عنصر td, الذي يحدد الفرد “مربعات” للمحتوى. تعد إضافة رأس الجدول الخطوة الأولى لعرض البيانات على صفحة ويب, ويجب عليك إضافة أول واحد إذا كنت ترغب في ذلك. يجب أن يحتوي الجدول أيضًا على ثلاثة عناوين صفوف. يجب أن يكون رأس واحد فارغًا. إذا كان الجدول الخاص بك يحتوي على أعمدة, يجب عليك أيضًا إنشاء رؤوس صفوف لكل عمود.

يمكنك أيضًا إضافة تسميات توضيحية إلى جدولك. التسمية التوضيحية هي عنصر اختياري يصف الغرض من الجدول. التسميات التوضيحية مفيدة أيضًا لإمكانية الوصول. يمكن أن يحتوي الجدول أيضًا على خلايا تصف مجموعات البيانات. أخيراً, يمكنك إضافة عنصر thead لتحديد مجموعة من الصفوف والأعمدة. يمكنك استخدام كلا العنصرين معًا أو بشكل منفصل. يمكنك حتى استخدامها معًا, لكن التسمية التوضيحية هي الأهم.

مضيفا div

تتيح لك إضافة div إلى ملف HTML إضافة قسم من صفحة الويب الخاصة بك دون إعادة كتابة الصفحة بأكملها. عنصر div عبارة عن حاوية خاصة للنص, الصور, وعناصر أخرى. يمكنك تسمية أي شيء تريده وتغيير سماته لتناسب احتياجاتك. يمكنك أيضًا إضافة فئة أو هامش لإنشاء مسافة بين div والعناصر الأخرى على صفحتك.

يمكنك أيضًا استخدام سمة innerHTML لإدخال رمز داخل ملف div. تقبل هذه الطريقة التعليمات البرمجية المضمنة في سلسلة, وإذا لم يكن داخل div, ستتم إزالة المحتوى. يجب تجنب إدخال رمز في div بهذه الطريقة, لأنه قد يعرض موقع الويب الخاص بك إلى نقاط ضعف البرمجة النصية عبر المواقع. إذا كنت تستخدم لغة برمجة مثل JavaScript, يمكنك استخدام سمة innerHTML.

div هي علامة HTML أساسية تُستخدم لتجميع التعليمات البرمجية داخل مستند. يمكن أن تحتوي على فقرة, اقتباس كتلة, صورة, صوتي, أو حتى رأس. يتيح لك موقعها تطبيق أسلوب ولغة موحدين على أقسام مختلفة من الصفحة. تُستخدم عناصر Div بشكل أفضل لترميز الدلالات الشائعة لمجموعات العناصر المتتالية. يجب استخدام div عندما تريد إضافة نمط إلى قسم دون الحاجة إلى إعادة كتابة الصفحة بأكملها.