تعلم ادارة الموقع الرئيسي مع نصائح HTML الأكثر شعبية

آخر تحديث بتاريخ أكتوبر 31, 2024

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

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

مع القليل من المعرفة حول ادارة الموقع وHTML، يمكنك قطع شوط طويل. ستتعرف أدناه على أساسيات HTML، وعدد قليل من خيارات تنسيق المواقع والمواقع الأكثر شعبية التي يمكنك استخدامها عند البرمجة بلغة HTML.

جدول المحتوى

ما تحتاج إلى معرفته حول HTML!

تعرف لغة HTML أيضًا باسم لغة ترميز النص التشعبي وهي لغة البرمجة الرئيسية التي تم بناء الإنترنت عليها. ولحسن الحظ، فهي واحدة من أبسط اللغات التي يمكن تعلمها!

من خلال معرفة أوامر HTML الأساسية، ستتمكن من القيام بأشياء مثل:

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

إذا كنت تستخدم نظام إدارة محتوى مثل ووردبريس، فيمكنك تحرير كود HTML عن طريق النقر فوق علامة التبويب “نص” في مقالاتك وصفحاتك.

إذا كنت لا تستخدم نظام إدارة المحتوى، فستحتاج إلى تحديد موقع ملفات HTML لموقعك، والتي يمكن العثور عليها عادة عن طريق تسجيل الدخول إلى لوحة تحكم Cpanel وتحديد موقع ملفات موقعك.

علامات HTML الشائعة

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

يبدو هكذا: <p/> هذه جملة بسيطة. <p>

يبدأ الوسوم بـ <p> الأولى بالتسلسل وتنتهي بوسوم <p/>. يعتبر الوسوم النهائي “/” علامة الإغلاق مهمة جدًا، بدون وضع وسوم او علامة الاغلاق على هذه الشريط المالئل لن تعمل بشكل صحيح وستؤدي إلى أخطاء في التنسيق البرمجي.

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

كما تتضمن بعض وسوم HTML الأكثر شعبية ما يلي:

<strong> </ strong> – سيؤدي هذه الوسم إلى خط عريض أو الاستخدام إلى العناوين الرئيسية.

<em> </em> – سيؤدي هذا إلى تغيير النص.

<body> </body> – هذا هو نص ملف HTML.

<a> </a> – سيسمح لك هذه الوسوم بإدراج روابط.

<center> </center> – سيعمل هذه الوسوم على محاذاة النص إلى وسط الصفحة.

<head> </head> – إن التعليمات البرمجية التى تضمن هنا سوف يشكلون هيدر موقعك.

هناك العشرات من وسوم HTML الأخرى التي يمكنك استخدامها لتعديل موقعك. سنعرض لك أدناه كيفية استخدام وسوم HTML الشائعة هذه.

عناوين HTML

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

وفيما يلي العناوين الأكثر شعبية التي ستستخدمها:

<h1> </h1> – سيحمل هذه الوسوم عادة أسم صفحتك أو عنوان المقالة.

<h2> </h2> – تستخدم للعناوين الرئيسية داخل المقالة.

<h3> </h3> – سيستخدم العناوين ضمن وسوم h2 وسوم h3.

سيؤدي استخدام بنية العنوان أعلاه إلى إعطاء منشآتك بنية منطقية ويسهل على القراء العثور على المعلومات التي يبحثون عنها.

تعلم ادارة الموقع مع بعض نصائح HTML والخدع للمبتدئين

الآن حان الوقت لتظهر لك كيفية وضع المعلومات المذكورة أعلاه للعمل. ستتعرف أدناه على كيفية تنسيق النص بشكل صحيح باستخدام وسوم HTML المميزة أعلاه.

تنسيق الخطوط

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

<strong> </strong> – سيؤدي هذا إلى تضخم النص.

<em> </em> – سيؤدي هذا إلى عمل مائلة للنص.

<u> </u> – سيؤدي هذا إلى إبراز النص.

يمكن استخدام العلامات أعلاه ضمن علامات الفقرات الحالية لتغيير تنسيق بعض الكلمات والعبارات، وستبدو كما يلي:

<p> هذه جملة تحتوي على <Strong> نص غامق <Strong/> و < em> نص مائل <em/> و <u> حتى قليلا من النص المسطر <p> </u/>.

أضف رابطا إلى المحتوى التابع لك

إذا كنت تكتب للويب، فمن المحتمل أن تضع الكثير من الروابط داخل المحتوى الخاص بك. لإضافة رابط، ستستخدم علامة <a href>. ستحتاج أيضًا إلى تضمين رابط URL للموقع الذي تريد الارتباط به.

على سبيل المثال، لنفترض أنك تريد الارتباط بـ Doctormega.com باستخدام النص “انتقل إلى DoctorMega”. لتبدو على النحو التالي: <a href=”https://www.doctormega.com“> انتقل إلى دكتور ميجا <a/>.

سيظهر الموقع الذي تريد الارتباط به ضمن علامتي اقتباس، بينما سيظهر النص الذي تريد الارتباط به تشعبيًا ضمن وسم <a href=””> و <a/>.

أضف صورة إلى موقعك

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

علامة الصورة <“”=img src> لاحظ أنه لا يوجد وسوم نهاية لهذا الكود!.

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

سيبدو كود الصورة النهائي كما يلي:

<”img src=”http://myimage.com/thisismyimage.jpg>

محاذاة النص

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

لمحاذاة النص يمكنك استخدام الأوامر التالية:

<p align=”left”> </p> – سيبقى هذه الوسوم محاذاة النص ضمن وسوم p.

<p align=”right”> </p> – سيعمل هذه الوسم على محاذاة النص بشكل صحيح ضمن وسوم p.

<p align=”center”> </p> – سيعمل هذه الوسوم على محاذاة النص داخل الوسوم p.

اضافة وسوم اقتباس إلى موقعك

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

استخدام مجموعة من يقتبس هى واضحة جدا. ما عليك سوى إضافة وسم <blockquote> </blockquote> إلى أي محتوى تريد تنسيقه. سيتم إعطاء كل شيء ضمن الوسوم تنسيق Blockquote.

إضافة قوائم مرتبة إلى المحتوى الخاص بك

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

لاستخدام القوائم المرتبة، ستحتاج إلى استخدام وسم <ul> لتحديد قائمة غير مرتبة، وسوم <li> لتعريف كل عنصر من عناصر القائمة. وسوف تبدو كما يلي:

<ul>

<li/>وهذا هو البند الأول الخاص بك.<li>

<li/>هذا هو البند الثاني.<li>

<li/>هذا هو البند الثالث.<li>

<ul/>

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

Facebook Tweet LinkedIn Email

قد يعجبك ايضاً