أهم أساسيات HTML يجب أن يتقنها كل مستخدم بلوجر
سواء كنت تريد أن تنشئ مدونة أو تمتلك مدونة بالفعل ، فإن HTML مهم في كل جانب من جوانب المدونات. سوف أشارككم اليوم أهم أساسيات HTML التي يجب أن يعرفها كل مستخدم Blogger. تفيد أساسيات HTML هذه لكل من المدونين سواء في منصة بلوجر أو ووردبريس.
ما هو HTML؟
يشير HTML إلى لغة ترميز النص التشعبي : Markup Language. نستخدم HTML لإنشاء صفحات الويب أو مواقع الويب. تتم كتابة أي صفحة ويب تراها على الإنترنت باستخدام رمز HTML. يتم تمثيل جميع عناصر HTML بعلامات HTML (مثل <title>). لا يعرض المتصفح علامات HTML هذه ، ولكن بمساعدة علامات HTML ، فإنها تعرض محتوى الصفحة. دعونا ننتقل إلى "أساسيات HTML المهمة التي يجب أن يتقنها كل مدون في بلوجر ؟"
علامات وأكواد HTML الأساسية
علامات HTML هي اسم عنصر محاط بأقواس زاوية. أثناء تعديل مشاركة داخل مدونتك ، سوف تستخدم العديد من علامات HTML. علامات HTML الأساسية هي:
1. إعلان HTML وعنصر الجذر - HTML Declaration & Root Element
من أجل التصريح بأن المستند عبارة عن HTML ، نستخدم علامة تعريف في بداية كود HTML. يتم تمثيله كـ <! DOCTYPE html>. يمكنك مشاهدة مثال عملي لهذه العلامة في بداية كود HTML في محرر HTML داخل مظهر Blogger.
العنصر الجذر لصفحة HTML عند البداية هو <html> ، وعند النهاية هو </html>. يحتوي كل عنصر في HTML على علامة البداية (<tagname>) وعلامة النهاية (</tagname>). يبدأ عنصر الجذر في بداية كود HTML وينتهي عند نهاية كود HTML.
2.علامة <head>
يتم تضمين البيانات الوصفية لأي صفحة ويب أو مشاركة تدوينة بين العلامات الرئيسية (أي <head> و </head>). أنه يحتوي على وصف التعريف ، الكلمات الرئيسية ، كل شيء حول صفحة الويب. لا تعرض المتصفحات المحتوى داخل علامات head، ولكنها تساعد محركات البحث في العثور على صفحة الويب الخاصة بك.
3. علامة <body>
هذه علامة مهمة جدًا حيث يتم عرض جميع البيانات بين علامات النص (<body> & </body>) في متصفح الويب. يحتوي على عناوين ، عناوين فرعية ، فقرة ، إلخ. يبدأ بعد نهاية علامة head.
يتكون هيكل صفحة HTML كما يلي:<!DOCTYPE html><html><head><title>Page Title HERE</title></head><body><h1>Heading goes here</h1><p>Paragraph goes here.</p></body></html>
4. عناوين HTML والفقرة - HTML Headings and Paragraph
داخل علامة النص ، أثناء استخدام العناوين ، نستخدم علامة <h1> للعنوان الأكثر أهمية ، <h2> للعنوان المهم التالي وهكذا <h3> للعناوين الأقل أهمية.
<h1> العنوان 1 يذهب هنا </ h1><h2> العنوان 2 يذهب هنا </ h2>……..وهكذا.
بطريقة مماثلة ، يمكننا استخدام علامات HTML للفقرات. علامة البداية الفقرة هي <p> وعلامة النهاية هي </ p>.
<p> Paragraph goes here.</p>
5. استخدام علامة فارغة
العناصر الفارغة هي تلك العلامات التي لا تحتوي على أي محتوى. يمكننا تمثيل علامة فارغة كـ: <br>. ليس لها علامة نهاية. يمكنك استخدامه لعرض المسافة بين السطور.
6. روابط HTML
لاستخدام الروابط في محتوى النص الخاص بك ، يجب عليك تحديد الروابط باستخدام علامات <a> كما هو موضح أدناه:
<a href=”https://www.agdeztech.com“> المحترف للتقنية</a>
هنا يظهر الرابط باللون الأزرق ونص الرابط باللون الأحمر.
7. صور HTML
استخدام العلامات في صور HTML هو نفسه كما هو الحال في روابط HTML. هنا نستخدم السمة <img>.
<img src=”image.png” alt=”Image” width=”104” height=”142“>
هنا ، يتم تمثيل عنوان الصورة باللون الوردي ، وعنوان بديل باللون الأحمر ، وعرض الصورة باللون الأزرق وارتفاع الصورة باللون البرتقالي.
8. أزرار HTML
تُستخدم أزرار HTML بشكل أساسي لإرسال البيانات أو إعادة تعيينها. العلامات المستخدمة لإنشاء أزرار HTML هي <button> و </button>.
<button> انقر هنا </ button>
9. قوائم HTML
هناك نوعان من القوائم: i) قائمة غير مرتبة (قائمة نقطية) ii) قائمة مرتبة (قائمة رقمية)
لإنشاء قائمة غير مرتبة ، يجب عليك تحديد HTML بهذه الطريقة:
<ul><li>Cricket</li><li>Football</li><li>Hockey</li></ul>
و بالمقابل، إذا كان علينا إنشاء قائمة مرتبة ، فإننا نعرّف HTML على أنه:
<ol><li>Cricket</li><li>Football</li><li>Hockey</li></ol>
10. اقتباسات HTML
بالإضافة إلى علامات <blockquote> لعروض إقتباس HTML ، يمكنك أيضًا استخدام السمة cite لإعطاء الفضل للمصدر الأصلي للاقتباس. من الأفضل إظهاره في المثال أدناه:
<blockquote cite = ”https://www.agdeztech.com">تتميز مدونة المحترف للتقنية بمجموعة من المقالات و المواضيع في مجالات التقنية تجعل القارئ يغوص في هذا المجال</blockquote>
أخيرًا ، هذه هي 10 أساسيات HTML ، يجب أن يعرفها كل مدون.