هل تريد أن تتعلم كيفية ادارة الموقع الكتروني الخاص بك؟ سيساعدك فهم أساسيات 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 للمبتدئين
- ما يجب أن يعرفه كل مبتدئ عن HTML: كيفية عمل HTML خطوة بخطوة
- كيف تعمل عناوين HTML على تحسين السيو وسهولة الاستخدام
نأمل أن تساعدك هذه المقالة على تعلم كيفية ادارة الموقع الكتروني الخاص بك باستخدام نصائح HTML الأكثر شعبية المذكورة أعلاه. للبدء في إجراء تغييرات HTML بسيطة على موقعك. إذا كانت لديك أي أسئلة حول تعلم ادارة الموقع الكتروني الخاص بك واستخدام الأوامر والوسوم المذكورة أعلاه، فيرجى طرح سؤالك في التعليقات أدناه. مع أطيب التحيات.
المنشورات الاخيرة
كيفية استخدام Dashicons في ووردبريسأبريل 20, 2025- أفضل 6 اضافات عداد الزوار ووردبريس لعام 2025أبريل 1, 2025
اترك تعليقاً