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

Facebook Tweet Pin LinkedIn Print Email

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

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

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

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

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

من خلال معرفة أوامر HTML الأساسية عليك أن تكون قادرا على إنجاز أشياء مثل:

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

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

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

علامات 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 المميزة أعلاه.

تنسيق الخطوط

إذا كنت تريد أن تظهر أجزاء معينة من النص الخاص بك، ثم العلامات أدناه سوف تساعدك على الأحتراف، سوف تتعلم كيفية اسخدام bold، italicize، Underline.

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

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

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

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

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

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

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

على سبيل المثال، لنفترض أنك تريد الارتباط ب Doctormega.com باستخدام النص “زيارة Doctor Mega”. لتبدأ كما يلي: <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 بسيطة على موقعك. إذا كان لديك أي أسئلة حول استخدام الأوامر والعلامات أعلاه، يرجى طرح سؤالك في التعليقات أدناه لديكم خالص تحياتي :).