Let’s be real. When most of us started our first blog, we didn’t sign up to learn how to code—I know I didn’t. I was excited to express myself, learn a ton and maybe even get a job out of it.
Once I joined Shareaholic and began blogging more often, I realized that I needed to get myself in gear and learn some basic HTML. And here’s a reality check: you do too. No matter how many pageviews you have, having an understanding of HTML is key to having a successful blog.
Need to force an image to stay on the right of your post instead of drifting to the middle? HTML.
Need to install analytics to track your success? HTML.
Don’t want to bother your web designer with the small stuff? HTML.
You don’t need to be a coding genius to rock your blog, but you should have a basic understanding of the terminology and a few tags up your sleeve to take your blog posts to the next level.
Understanding HTML
لنتحلى بالواقعيّة، عندما بدأت غالبيتنا بكتابة أوّل مُدوّنة، لم نُفكِّر بشيء اسمه رموز codes بل اهتمت بالكتابة أو نشر ما يُرغَبُ بنشره على المستوى الشخصي كما المهنيّ.
لكن ما إن بدأتُ في التدوين، حتى انتبهتُ إلى أهمية تكوين معرفة بلغة توصيف النص الفائق HTML، حيث إن امتلاك معرفة جيدة لهذه اللغة، سيساهم بتحسين المدونة وإنجاحها أكثر. فمثلاً، إذا احتجت إلى نشر صورة بجهة اليمين او اليسار أو الوسط فأنت بحاجة إلى لغة HTML.
تحتاج إلى تثبيت تحليلات ما للمُدونة فأنت بحاجة إلى لغة HTML. لا ترغب بأن يهتم مُصمِّم مدونتك أو موقعك بأشياء صغيرة فأنت بحاجة إلى لغة HTML. لا حاجة للتحوُّل إلى خبير في هذه اللغة، بل يجب امتلاك فهم أولي لمُصطلحات وبعض العلامات لنقل تدويناتك إلى مستوى آخر.
فهم لغة HTML
قبل الدخول في العلامات، تحتاج لمعرفة بعض المصطلحات العامة الهامة بهذه اللغة، وسيساعدك هذا على فهم كل ما سيلي في هذا الموضوع.
علامات البداية والنهاية او علامات فتح وإغلاق
في أيّ قطعة رموز piece of code، يجب وجود بداية ونهاية (فتح وإغلاق). تبدأ علامة الفتح المتتالية مع قوس يساري زاوي، عبارة عن قوس (أو قوسين) ويعني ما الذي ستعمله، وقوس زاوي يميني أي على الشكل < >. أما علامة الإغلاق فهي تُنهي المتتالية بذات الطريقة – أي مثل أقواس الفتح مع فارق يتمثل بإضافة خط مائل slash قبل الحرف أي على الشكل < / >. وإليكم مثال عملي توضيحي:
بفضل علامات البداية والنهاية (الفتح والإغلاق) يمكن وضع أيّ نص بينهما ليخرج على صيغته المكتوبة تماماً بين تلك العلامات. يخضع أيّ شيء في لغة HTML لهذه العلامات دوماً. من المهم معرفة الأقواس الواجب استعمالها بالإضافة إلى كيفية وضع العناصر بينهما.
فكل شيء يبدأ برموز وينتهي بنصوص وصور. لديك فكرة الآن عن كيفية تحويل أفكارك باستخدام هذه اللغة إلى مواد منشورة عن طريق لغة HTML.
عشرة علامات HTML يتوجب عليك معرفتها
1. بنية الموقع / الصفحة / المُدوَّنة
يبدأ مع العلامة:
<head> </head>
تعكس أعلى الصفحة في الموقع والمُدوّنة. يوجد بينهما معلوات تطال الصفحة المرئية من الموقع أو المُدوّنة (بما فيها عنوان الموقع أو المُدوّنة) وأيّ عنصر قد أدرجته فيها، بالإضافة إلى رموز التصميم لباقي الصفحة. يمكن أن تعتبر أن قسم لغة HTML هذا كتوصيف لصفحتك.
ننتقل إلى العلامة:
<body> </body>
يوجد بينهما النص الرئيسي في موقعك أو مُدونتك، هو ما سيراه القرّاء والزوّار كعنصر أساسيّ مرئيّ. إذاً هو يضمّ كل التدوينة والأشياء التي تراها الناس مباشرة. لا حاجة للصق هذه العلامة في تدويناتك، لأنها تُشكِّل جزء من بنية الموقع أو المُدوّنة وهي جاهزة لا تحتاج أيّة إضافات.
2. تنظيم العناوين
|
رمز HTML |
كيفية ظهور العنوان |
|
</h1>فينيق ترجمة <h1> |
فينيق ترجمة |
|
</h2>فينيق ترجمة <h2> |
فينيق ترجمة |
|
</h3>فينيق ترجمة <h3> |
فينيق ترجمة |
يوجد طرق عديدة لكتابة عناوين تدويناتك بأشكال وأحجام متنوعة. يوجد أعلاه ثلاث قياسات مختلفة من الأكبر إلى الأصغر. يُنصَحُ بعدم استعمال قياسات مختلفة لعناوين التدوينات لأنه قد يُشتّت القرّاء.
3. خلق رابط يحتوي تدوينة هامة أو خاصة
|
رمز HTML |
كيفية ظهور الرابط |
|
<a href="https://ateismoespanarab.blogspot.com/2020/12/except-messenger-of-god-excepto-el.html">إلا رسول الله؟</a>
|
ربما تكون هذه العلامة الأهمّ بالنسبة للمُدونين. حيث يمكن وضع أيّ مدونة بأيّ مكان من المُدوّنة بغض انظر عن الإضافات التقليدية التي توفّر هذه الخدمة دون إضافة أية رموز أو اكواد.
الفراغ بين a وhref هام جدا ولا يجب وضعهما ملتصقين ببعض.
4. تضمين صور
لأجل تضمين صورة في أيّ مكان من المُدوّنة، نستخدم العلامة:
5. تضمين صورة حين تضغطها تنقلك إلى موقع معين أو موضوع محدد ضمن مدونتك أو خارجها
لأجل تحقيق هذا الأمر، نستخدم العلامة التالية:
<a href="رابط الموقع أو الموضوع المرغوب بالوصول إليه">
<img src="رابط الصورة المطلوب ظهورها"></a>
الفراغ بين a وhref هام جدا ولا يجب وضعهما ملتصقين ببعض.
6. تموضع الصور والنصوص
|
رمز HTML |
كيف يظهر النص |
|
<p align=”left”>نص يساري</p>
|
نص يساري |
|
<p align=”center”>نص بالوسط</p>
|
نص بالوسط |
|
<p align=”right”>نص يميني</p>
|
نص يميني |
تفيد هذه العلامة بتحديد تموضع النصوص أو الصور في اليسار والوسط واليمين. هناك من ينصح باستخدام اللغة المستخدمة في التصميم CSS لتغيير موضع النصوص والصور، لكن لديكم الآن خيار آخر بلغة HTML ولا يشكو من أيّة علّة.
7. اقتباس أو قول لمرجع مهم
|
رمز HTML |
كيف يظهر الاقتباس أو القول |
|
<blockquote> ”كلنا للوطن والوطن لبضعة لصوص - محمد الماغوط”></blockquote> |
"كلنا للوطن والوطن لبضعة لصوص – محمد الماغوط" |
نُكرّر بأنه يوجد ضمن قوالب بلوجر وغيرها مواد جاهزة لإضافة كثير من الأشياء؛ لكن بلحظة معطاة قد نحتاج إلى هذه الأكواد أو العلامات حصراً ولا تنفع الإضافات الجاهزة.
8. قوائم مرتبة عددياً
|
رمز HTML |
كيف تظهر القائمة |
|
<ol> <li>1. عنصر أول بالقائمة</li> <li>2. عنصر ثاني بالقائمة</li> <li>3. عنصر ثالث بالقائمة</li> </ol> |
1. عنصر أول بالقائمة 2. عنصر ثاني بالقائمة 3. عنصر ثالث بالقائمة |
بإمكانك استعمال هذه العلامة لوضع قائمة ومهما بلغ عدد بنودها، يمكنك التحكُّم بالعدد بنسخ ولصق الرمز فقط ليصبحوا أربعة وخمسة وستة ....الخ بنود.
9. قوائم مع دوائر سوداء صغيرة
|
رمز HTML |
كيف تظهر القائمة |
|
<ul> <li>عنصر أول بالقائمة</li> <li>عنصر ثاني بالقائمة</li> <li>عنصر ثالث بالقائمة</li> </ul> |
. عنصر أول بالقائمة . عنصر ثاني بالقائمة . عنصر ثالث بالقائمة |
هكذا يمكن تحضير قوائم دون أرقام ببساطة وبتغيير بسيط في العلامة والرموز.
10. تهيئة حروف الطباعة
|
رمز HTML |
كيف يظهر النص |
|
</strong>نص غامق اللون<strong> أو </b>نص غامق اللون<b> |
نص غامق اللون أو نص غامق اللون |
|
</em>نص مائل<em> أو </i>نص مائل<i> |
نص مائل أو نص مائل |
|
<u>نص تحته خط</u> |
نص تحته خط |
مع هذه العلامات يمكننا وضع جزء من أيّ نص باللون الغامق لتمييزه أو بأحرف مائلة أو بوضع خط تحته.
ليست هناك تعليقات:
إرسال تعليق