كيفية إضافة مشغل صوت Mp3 مع قائمة تشغيل في بلوجر

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

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

أهم 50 كود HTML

HTML (HyperText Markup Language) هي لغة ترميز تُستخدم لإنشاء صفحات ويب وبنيتها. تعمل HTML على تنظيم محتوى الصفحات بما في ذلك النصوص، الصور، الروابط، والعناصر التفاعلية.

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

على سبيل المثال، يمكن إنشاء عناوين للنصوص باستخدام علامات <h1> حتى <h6>، وكلما زاد الرقم، قلّ حجم العنوان وأهميته. يمكن لأي مدون استخدام HTML لإنشاء مدونة جذابة وسهلة التنقل. بجانب CSS، وJavaScript..

 

هل أكوادHTML هي أكثر الأشياء شيوعًا الآن؟

نعم، أكواد HTML ("أتش تي أم أل") لا تزال واحدة من أكثر الأشياء شيوعًا في عالم تطوير الويب اليوم. هنا بعض الحقائق الهامة التي يجب عليك معرفتها عن أكواد HTML:

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

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

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

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

هذه اللغات أساسية لفهم هيكل وتصميم الصفحات على الويب. HTML تُستخدم لبناء هيكل الصفحة ووضع المحتوى، CSS تُستخدم لتنسيق وتصميم هذا المحتوى، وJavaScript تُستخدم لجعل الصفحة تفاعلية وديناميكية.

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

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

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

التعامل مع أكواد HTML في بلوجر

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

كيفية إضافة كود داخل التدوينة

لكي تضيف كود داخل مقال في مدونة بلوجر، قم بتحرير محتويات منشور قمت بإضافته إلى مدونتك عن طريق تحديد عرض "Html" ثم قم بإضافة كود "html" في المكان الذي تريده كما موضح بالصورة.

أكواد HTML الأساسية لمدونات بلوجر

أكواد النصوص والفقرات

تُعد أكواد النصوص والفقرات من أهم أساسيات HTML، حيث تُستخدم لتنسيق المحتوى النصي في المدونات.

• علامة الفقرة <p>: تُستخدم لإنشاء فقرة نصية. عادةً ما تكون الفقرة مصحوبة بمسافة فاصلة أعلى وأسفل المحتوى لتمييزها عن بقية النص.
• علامة العنوان: <h1> حتى <h6> تُستخدم لتحديد العناوين بأحجام مختلفة، حيث يكون <h1> هو الأكبر ويُستخدم عادةً للعناوين الرئيسية، بينما تُستخدم علامات العنوان الأصغر لتحديد العناوين الفرعية.
• علامة النص الغامق <strong> و<b>: تُستخدم لجعل النص أكثر سمكًا أو جريئًا. يمكن استخدام أي من العلامتين لتحقيق هذا التأثير.
• علامة النص المائل <em> و<i>: تُستخدم لجعل النص مائلًا، مما يضيف معنى تأكيديًا للنص.

أكواد الروابط والصور

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

• علامة الرابط <a href="">: تُستخدم لإضافة روابط تشعبية. يتيح هذا للزائرين التنقل إلى صفحات أخرى عند النقر على النص المرتبط.
• علامة الصورة <img src="">: تُستخدم لإدراج الصور في المدونة. يجب تحديد مصدر الصورة (URL) داخل علامات التنصيص.

أكواد HTML متقدمة لمدونات بلوجر

أكواد القوائم والجداول

تنظيم المعلومات باستخدام القوائم والجداول يُساعد في تبسيط المحتوى وجعل المدونة أكثر سهولة في الفهم.

علامات القوائم:

• القائمة المرتبة: يتم إنشاء قوائم مرتبة باستخدام علامات <ol> و<li>. يمكن تخصيص نوع الترقيم باستخدام الخاصية type في العلامة <ol>.
• القائمة غير المرتبة: تُستخدم علامات <ul> و<li> لإنشاء قوائم غير مرتبة باستخدام نقاط توضيحية.

علامات الجداول:

• علامة الجدول: تُستخدم علامة <table> لإنشاء جدول. بداخلها، يمكن إنشاء صفوف باستخدام <tr> وأعمدة باستخدام <td>.
• عناوين الجدول: يمكن استخدام علامة <th> لإنشاء عناوين للأعمدة.

أكواد التصميم والأنماط

يُمكن تخصيص مظهر المدونة باستخدام أكواد التصميم والأنماط، مثل CSS.

علامة النمط الداخلي: تُستخدم علامة <style> لتطبيق أنماط CSS مباشرة في صفحة HTML. يمكن تحديد الأنماط التي تؤثر على عناصر HTML المختلفة داخل العلامة.

علامات التحديد:

• علامة القسم: يُمكن تقسيم الصفحة إلى أقسام باستخدام علامة <div>، مما يسمح بتخصيص وتطبيق الأنماط على كل قسم.
• علامة العنصر المضمن: يُمكن استخدام علامة <span> لتمييز جزء من النص داخل عنصر آخر، مثل فقرة، لتطبيق أنماط خاصة به.

أكواد HTML تفاعلية لمدونات بلوجر

أكواد النماذج

النماذج تُعتبر وسيلة رائعة للتفاعل مع القراء.

علامة النموذج <form>: تُستخدم لإنشاء نموذج تفاعلي على المدونة. بداخلها، يمكن إضافة مدخلات باستخدام علامات مثل <input> و<textarea>.

علامات المدخلات:

• مدخلات النص: تُستخدم علامات <input type="text"> و<textarea> لإضافة حقول نصية يمكن للقراء كتابة البيانات فيها.
• الخيارات المتعددة: يمكن استخدام علامات <input type="radio"> و<input type="checkbox"> للسماح للقراء بالاختيار بين خيارات متعددة.

نص يتوسطه خط
<del>النص الخاص بك هنا</del>
<span style="color: #ff6cc7;">نص هنا</span>
<hr />
رابط Nofollowed
<a href="https://alkotantechnology.com/" rel="nofollow">نص أزرق</a>
الفقرة
<p>فقرة هنا</p>
النص الغامق
<strong>نص هنا</strong>
استخدم خطًا مختلفًا
<span style="font-family: georgia, serif;">نص هنا</span>
إضافة الكلمات الدلالية Keywords
<meta name="keywords" content="">
نص مائل
<i>هذا النص بخط مائل</i> نص عادي.
نص مؤكد
<em>تم إبراز هذا النص</em> كنص عادي.
نص مشطوب
<del>هذا النص محذوف</del> هذا ليس كذلك.
ربط في نافذة جديدة
<a href="LINKHERE" target="_blank">نص الرابط</a>
نص مسطر
<u>هذا النص مسطر</u> هذا ليس كذلك
نص مميز 
<mark>نص مميز</mark>.
تحديد لون نص معين
<p style="color: blue;">لون التدوينة أزرق.</p>
حجم الخط
<font size="10">انظر إلى حجم النص!</font>
لون الخط
<font color="blue">انظر إلى لون النص!</font>
اقتباسات
<blockquote>يرجى توسيع إجابتك على السؤال الأول. ماذا تفعل الآن؟ ماذا تعرف عن موقع القبطان؟</blockquote>
كود
<code><div class="header"></code>
نص مائل
<em>أن تكون مائلة</em>
نص متحرك من اسفل الى اعلى
<marquee direction="up" scrollamount="2"><br /><br /><font size="6"><font color="red">النص</font></font><br /><br /></marquee><br /><p><br />
نص متحرك من اعلى الى اسفل
<marquee direction="down" scrollamount="2"><br /><br /><font size="6"><font color="green">النص</font></font><br /><br /></marquee><br /><p><br />
نص ملون بلونين من الداخل والخارج
<font size="15"><table style="filter:GLOW(color=brown,strength=#+9)"><font color="yellow">النص<BR><P><BR></table></font></font>
نص متحرك من الجنب
الريل بلير (مصدر صوتي)
<p align="center"><object id="RAOCX" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" width="288" height="80"> <param name="SRC" value="العنوان"><param name="CONTROLS" value="ALL"><param name="AUTOSTART" value="TRUE"><param name="NOLABELS" value="TRUE"><param name="RESET" value="TRUE"> <embed src="" height="80" controls="Default" autostart="true" console="Clip1"></object></p><hr size="1"><center><p>
تشغيل أفلام الفلاش
<embed width="550" height="500" src="عنوان الموقع" type="application/x-shockwave-flash">
شكل اخر للريل بلير (مصدر صوتي)
<param name="BACKGROUNDCOLOR" value="#ff00ff"><embed src="العنوان" align="baseline" border="0" width="275" height="40" type="audio/x-pn-realaudio-plugin" console="Clip1" controls="ControlPanel" autostart="true"><p><br /><br />
لتغير سهم الماوس من الأعلى الى الأسفل مع الحركة
<body style="cursor:sw-resize">

أهم أكوادHTML

فيما يلي 50 كود HTML . مجموعة متنوعة من الأكواد الأساسية والمتقدمة في HTML مع شرح لكل كود ووظيفته وكيفية استخدامه.

1. هيكل HTML الأساسي

كل صفحة HTML تبدأ بهذا الهيكل:

<!DOCTYPE html>
<html>
<head>
    <title>عنوان الصفحة</title>
</head>
<body>
    محتوى الصفحة هنا
</body>
</html>

• <!DOCTYPE html>: يعلن أن الصفحة مكتوبة بلغة HTML5.
• <html>: علامة تحدد بداية ونهاية مستند HTML.
• <head>: يحتوي على معلومات حول الصفحة مثل العنوان والتعريفات.
• <title>: عنوان الصفحة الذي يظهر في شريط عنوان المتصفح.
• <body>: يحتوي على محتوى الصفحة.

2. التنسيق النصي

1. العناوين

<h1>عنوان المستوى 1</h1>
<h2>عنوان المستوى 2</h2>
<h3>عنوان المستوى 3</h3>
<h5>عنوان المستوى 4</h4>
<h5>عنوان المستوى 5</h5>
<h6>عنوان المستوى 6</h6>

العناوين تتدرج من <h1> إلى <h6>|: حيث يشير كل منها إلى مستوى مختلف من الأهمية.

2. الفقرات

<p>هذه فقرة من النص.</p>

<p>: تُستخدم لكتابة فقرة نصية.

3. القوائم

قائمة مرتبة:

<ol>
    <li>العنصر الأول</li>
    <li>العنصر الثاني</li>
    <li>العنصر الثالث</li>
</ol>

قائمة غير مرتبة:

<ul>
    <li>العنصر الأول</li>
    <li>العنصر الثاني</li>
    <li>العنصر الثالث</li>
</ul>

قائمة تعريفية:

<dl>
    <dt>العنوان</dt>
    <dd>التفسير</dd>
</dl>

• <ol>: قائمة مرتبة، تحتوي على عناصر مرتبطة بواسطة <li>.
• <ul>: قائمة غير مرتبة، تحتوي على عناصر غير مرتبة بواسطة <li>.
• <dl>: قائمة تعريفية، تتكون من تعريفات وعناوين باستخدام <dt> و<dd>.

3. الروابط والصور

1. الروابط

<a href="https://www.example.com">رابط</a>

• <a>: يُستخدم لإنشاء رابط نصي.
• href: يُحدد وجهة الرابط.

2. الصور

<img src="image.jpg" alt="وصف للصورة">

• <img>: يُستخدم لإدراج صورة.
• src: يُحدد مسار الصورة.
• alt: يُوفر وصفًا للصورة.

4. النماذج

1. نموذج أساسي

<form action="/submit" method="post">
    <label for="name">اسم:</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="إرسال">
</form>

• <form>: يُستخدم لإنشاء نموذج.
• action: يُحدد وجهة النموذج.
• method: يُحدد نوع الطلب، عادةً يكون "post" أو "get".
• <label>: يُستخدم لإنشاء تسميات لعناصر النموذج.
• <input>: يُستخدم لإنشاء حقول إدخال، مع تحديد نوع الإدخال مثل text أو submit.

5. الجداول

1. جدول أساسي

<table>
    <caption>عنوان الجدول</caption>
    <thead>
        <tr>
            <th>رأس العمود 1</th>
            <th>رأس العمود 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>البيانات 1</td>
            <td>البيانات 2</td>
        </tr>
    </tbody>
</table>

• <table>: يُستخدم لإنشاء جدول.
• <caption>: يُحدد عنوان الجدول.
• <thead>: يُحدد رأس الجدول.
• <tr>: يُحدد صف الجدول.
• <th>: يُحدد رأس العمود.
• <tbody>: يُحدد محتوى الجدول.
• <td>: يُحدد خلية البيانات.

6. المعرفات والأنماط

1. المعرفات

<div id="myDiv">هذا عنصر بمعرف</div>

id: يُستخدم لإعطاء العناصر معرف فريد يُمكن الرجوع إليه.

2. الأنماط

<div style="color: red;">هذا عنصر بنمط</div>

style: يُستخدم لإضافة أنماط CSS مُباشرة إلى العناصر.

7. العناصر الإعلامية

1. الرموز التعبيرية

<span role="img" aria-label="ابتسامة">😊</span>

• role: يُستخدم لتحديد دور العنصر في DOM.
• aria-label: يُستخدم لتوفير وصف نصي للتعرف على الرموز التعبيرية.

2. العناوين

<abbr title="لغة البرمجة هيتميل">HTML</abbr>

• <abbr>: يُستخدم لتحديد اختصار.
• title: يُقدم توضيحًا كاملًا للاختصار عند التمرير عليه.

8. الوسائط

1. الفيديو

<video controls>
    <source src="video.mp4" type="video/mp4">
    فيديوك غير مدعوم.
</video>

• <video>: يُستخدم لتضمين فيديو.
• controls: يضيف أدوات التحكم في الفيديو مثل التشغيل والإيقاف.
• <source>: يُحدد مصدر الفيديو وصيغة الفيديو.

2. الصوت

<audio controls>
    <source src="audio.mp3" type="audio/mp3">
    ملف الصوت غير مدعوم.
</audio>

• <audio>: يُستخدم لتضمين ملف صوت.
• controls: يضيف أدوات التحكم في الصوت مثل التشغيل والإيقاف.
• <source>: يُحدد مصدر الصوت وصيغة الملف.

9. العناصر التفاعلية

1. الروابط البريدية

<a href="mailto:someone@example.com">أرسل بريدًا إلكترونيًا</a>

mailto: يُستخدم لإنشاء رابط يفتح تطبيق البريد الإلكتروني الافتراضي.

2. الروابط الهاتفية

<a href="tel:123456789">اتصل بهذا الرقم</a>

tel: يُستخدم لإنشاء رابط يفتح تطبيق الهاتف للاتصال.

10. الأقسام

1. المقالات

<article>
    <h2>عنوان المقال</h2>
    <p>نص المقال هنا...</p>
</article>

<article>: يُستخدم لتحديد جزء من المحتوى المستقل مثل مقالة أو تدوينة.

2. الأقسام

<section>
    <h2>عنوان القسم</h2>
    <p>نص القسم هنا...</p>
</section>

<section>: يُستخدم لتحديد جزء من المحتوى يكون ذا صلة.

11. الخصائص الإضافية

1. البيانات المخصصة

<div data-role="custom">هذا عنصر ببيانات مخصصة</div>

data-: يُستخدم لإنشاء خصائص مخصصة تُعطي معلومات إضافية حول العنصر.

2. العناصر المخفية

<div hidden>هذا العنصر مخفي</div>

hidden: خاصية تُخفي العنصر.

12. المتغيرات البرمجية

1. الرموز

<var>متغير</var>

<var>: يُستخدم لتحديد المتغيرات البرمجية في النصوص.

2. الشيفرة البرمجية

<code>print("Hello, World!")</code>

<code>: يُستخدم لعرض شيفرة برمجية في النصوص.

13. النماذج التفاعلية المتقدمة

1. حقول الاختيار

قائمة منسدلة:

<label for="fruits">اختر فاكهة:</label>
<select id="fruits" name="fruits">
    <option value="apple">تفاح</option>
    <option value="banana">موز</option>
    <option value="orange">برتقال</option>
</select>

• <select>: يُستخدم لإنشاء قائمة منسدلة.
• <option>: يُحدد خيارات القائمة.

قائمة خيارات متعددة:

<label for="hobbies">اختر هواياتك:</label>
<select id="hobbies" name="hobbies" multiple>
    <option value="reading">قراءة</option>
    <option value="gaming">ألعاب</option>
    <option value="music">موسيقى</option>
</select>

multiple: خاصية تجعل القائمة تسمح باختيار أكثر من خيار واحد.

2. مربعات الاختيار

<label for="subscribe">
    <input type="checkbox" id="subscribe" name="subscribe">
    اشترك في القائمة البريدية
</label>

type="checkbox": يُستخدم لإنشاء مربع اختيار.

3. الأزرار

<button type="button" onclick="alert('زر الضغط!')">اضغط هنا</button>

• button: عنصر زر تفاعلي يمكن النقر عليه.
• onclick: يُحدد الحدث الذي يحدث عند النقر على الزر.

14. البيانات الزمنية

1. التاريخ والوقت

تاريخ:

<input type="date" id="birthdate" name="birthdate">

وقت:

<input type="time" id="meeting-time" name="meeting-time">

type: يحدد نوع الإدخال ليكون إدخالًا للوقت أو التاريخ.

15. البيانات الرقمية

1. نطاق الأرقام

<label for="volume">درجة الصوت:</label>
<input type="range" id="volume" name="volume" min="0" max="100">

• type="range": يُستخدم لإنشاء عنصر نطاق أرقام.
• min وmax: يُحددان الحد الأدنى والأقصى للنطاق.

2. حقل الأرقام

<input type="number" name="quantity" min="1" max="10" step="1">

• type="number": يُستخدم لإنشاء حقل إدخال رقمي.
• min وmax: يُحددان الحد الأدنى والأقصى للقيمة.
• step: يُحدد الخطوة بين القيم المتاحة.

16. النماذج المركبة

1. حقول الإدخال المركبة

<label for="contact-method">اختر وسيلة الاتصال:</label>
<select id="contact-method" name="contact-method">
    <option value="email">بريد إلكتروني</option>
    <option value="phone">هاتف</option>
</select>

<input type="email" id="email" name="email" placeholder="أدخل البريد الإلكتروني" style="display: none;">
<input type="tel" id="phone" name="phone" placeholder="أدخل رقم الهاتف" style="display: none;">

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

17. الروابط المتقدمة

1. الربط لجزء داخل الصفحة

<a href="#section2">اذهب إلى القسم 2</a>
...
<section id="section2">
    <h2>القسم 2</h2>
    <p>محتوى القسم الثاني.</p>
</section>

href="#section2": يُستخدم للربط مع جزء معين داخل نفس الصفحة.

2. الروابط المستهدفة

<a href="https://www.example.com" target="_blank">افتح موقع ويب في علامة تبويب جديدة</a>

target: يُحدد كيف سيتم فتح الرابط. _blank لفتح الرابط في علامة تبويب جديدة.

18. العناصر المضمنة

1. كود من موقع خارجي

<iframe src="https://www.example.com" width="500" height="300"></iframe>

• iframe: يُستخدم لتضمين محتوى من موقع آخر داخل صفحة الويب الخاصة بك.
• width وheight: يُحددان عرض وارتفاع الإطار.

2. كود مضمن

<embed src="https://www.example.com/video.mp4" width="500" height="300">

• embed: يُستخدم لتضمين ملف صوتي أو فيديو أو مستند في الصفحة.
• src: يُحدد مسار المحتوى الذي تريد تضمينه.

19. البيانات المرئية

1. الألوان

<label for="favcolor">اختر لونك المفضل:</label>
<input type="color" id="favcolor" name="favcolor" value="#ff0000">

"type="color: يُستخدم لإنشاء حقل إدخال لون يسمح للمستخدمين باختيار لون.

2. الرسومات التفاعلية

<canvas id="myCanvas" width="200" height="200"></canvas>

<canvas>: يُستخدم لإنشاء منطقة رسم تسمح بتنفيذ الرسومات التفاعلية باستخدام JavaScript.

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

20. خصائص HTML5 المتقدمة

1. البيانات المستمرة

<input type="text" id="username" name="username" value="username" placeholder="أدخل اسم المستخدم" required>

required: خاصية تُجبر المستخدم على ملء الحقل قبل إرسال النموذج.

2. إدخال نطاقات الأرقام

<label for="rating">تقييم:</label>
<input type="range" id="rating" name="rating" min="1" max="5" value="3" step="1">

"type="range: يُستخدم لإنشاء إدخال نطاق يسمح للمستخدمين باختيار قيمة رقمية ضمن نطاق محدد.

21. عناصر الهيكل

1. العناوين الفرعية

<header>
    <h1>عنوان الصفحة</h1>
    <nav>
        <a href="#section1">القسم 1</a> | 
        <a href="#section2">القسم 2</a>
    </nav>
</header>

• <header>: يُستخدم لتحديد رأس الصفحة أو جزء من الصفحة.
• <nav>: يُستخدم لتحديد قائمة التنقل.

2. الأقسام الجانبية

<aside>
    <p>معلومات إضافية أو محتوى جانبي.</p>
</aside>

<aside>: يُستخدم لتحديد جزء جانبي من المحتوى.

22. دعم التنسيق

1. النص المميز

<mark>نص مميز</mark>

<mark>: يُستخدم لتحديد جزء من النص على أنه مميز، عادةً يكون بإبراز النص.

2. النص البديل

<p><s>هذا النص ملغي</s></p>

<s>: يُستخدم لإظهار أن النص ملغي أو تم شطبه.

23. البيانات الرياضية والعلمية

1. المعادلات الرياضية

<math xmlns="http://www.w3.org/1998/Math/MathML">
    <mrow>
        <mi>x</mi>
        <mo>+</mo>
        <mn>3</mn>
    </mrow>
</math>

<math>: يُستخدم لكتابة المعادلات الرياضية باستخدام MathML.

2. البيانات العلمية

<sup>أعلى</sup> <sub>أسفل</sub>

• <sup>: يُستخدم لكتابة النص العلوي (مثل الأس).
• <sub>: يُستخدم لكتابة النص السفلي (مثل السفل).

24. الهيكل الدلالي

1. العناصر الدلالية

الأقسام:

<article>
    <header>مقدمة</header>
    <p>محتوى المقالة هنا.</p>
</article>

<article>: يُستخدم لتحديد جزء مستقل من المحتوى.

المناطق:

<main>
    <section>
        <h2>عنوان القسم</h2>
        <p>نص القسم هنا...</p>
    </section>
</main>

<main>: يُستخدم لتحديد المحتوى الرئيسي للصفحة.

25. البيانات الاستباقية

1. معالج النصوص

<textarea id="comments" name="comments" rows="4" cols="50" placeholder="أدخل تعليقاتك هنا"></textarea>

<textarea>: يُستخدم لإنشاء حقل نصوص متعدد الأسطر يسمح للمستخدمين بكتابة نصوص طويلة مثل التعليقات.

2. خانات البحث

<form action="/search" method="get">
    <label for="search">بحث:</label>
    <input type="search" id="search" name="q" placeholder="ابحث هنا">
    <input type="submit" value="بحث">
</form>

• "type="search: يُستخدم لإنشاء حقل بحث.
• "method="get: يُستخدم للإرسال باستخدام طريقة GET.

26. تقنيات المساعدة

1. الأنماط البيانية

<img src="chart.png" alt="الرسم البياني للبيانات" aria-describedby="chart-desc">
<p id="chart-desc">يوضح الرسم البياني توزيع البيانات.</p>

• alt: يقدم وصفًا للصورة لتحسين إمكانية الوصول.
• aria-describedby: يُربط الصورة بوصف إضافي.

2. الإشارات البصرية

<progress id="file-progress" value="50" max="100">50%</progress>

• <progress>: يُستخدم لإنشاء مؤشر تقدم مرئي.
• value: يُحدد النسبة المئوية للتقدم.
• max: يُحدد الحد الأقصى للتقدم.

27. الوسائط التفاعلية

1. الفيديو التفاعلي

<video id="video" controls>
    <source src="video.mp4" type="video/mp4">
    متصفحك لا يدعم فيديو HTML5.
</video>
<script>
document.getElementById("video").addEventListener("ended", function() {
    alert("انتهى الفيديو!");
});
</script>

• controls: يُتيح عناصر التحكم مثل التشغيل والإيقاف.
• الحدث ended: يستمع لانتهاء الفيديو ويُشغّل حدثًا مثل تنبيه.

2. البث المباشر

<iframe src="https://www.example.com/live-stream" width="560" height="315" allowfullscreen></iframe>

allowfullscreen: يُسمح للبث المباشر بالعمل في وضع ملء الشاشة.

28. التبويبات والشرائح

1. التبويبات

<div class="tabs">
    <button onclick="openTab(event, 'tab1')">التبويب 1</button>
    <button onclick="openTab(event, 'tab2')">التبويب 2</button>
</div>
<div id="tab1" class="tab-content">محتوى التبويب 1</div>
<div id="tab2" class="tab-content" style="display: none;">محتوى التبويب 2</div>

<script>
function openTab(event, tabName) {
    var i, tabContent;
    tabContent = document.getElementsByClassName("tab-content");
    for (i = 0; i < tabContent.length; i++) {
        tabContent[i].style.display = "none";
    }
    document.getElementById(tabName).style.display = "block";
}
</script>

التبويبات تُقسم المحتوى إلى أجزاء يمكن التنقل بينها باستخدام الأزرار.

• <"div class="tabs>: يُستخدم لإنشاء قائمة التبويبات.
• <"div class="tab-content>: يُستخدم لإنشاء محتوى التبويب.

29. البيانات السلوكية

1. الرسوم المتحركة

<div id="box" style="width:100px; height:100px; background-color:red;"></div>
<script>
document.getElementById("box").addEventListener("click", function() {
    this.style.animation = "move 2s forwards";
});
</script>
<style>
@keyframes move {
    from {transform: translateX(0);}
    to {transform: translateX(200px);}
}
</style>

CSS وJavaScript تعملان معًا لإنشاء رسوم متحركة عند النقر على العنصر.

2. الأحداث

<button onclick="alert('لقد نقرت على الزر!')">اضغط هنا</button>

onclick: يُحدد الإجراء الذي يحدث عند النقر على الزر.

31. بيانات التحقق من الصحة

1. التحقق من صحة البريد الإلكتروني

<input type="email" id="email" name="email" placeholder="أدخل البريد الإلكتروني" required>

• "type="email: يُستخدم لإنشاء حقل إدخال بريد إلكتروني.
• required: يُجبر المستخدم على إدخال بريد إلكتروني صالح.

2. التحقق من صحة الأرقام

<input type="number" id="age" name="age" placeholder="أدخل عمرك" min="0" max="100" required>

• "type="number: يُستخدم لإنشاء حقل إدخال رقمي.
• min وmax: يُحددان نطاق القيم المقبولة.

32. التفاعل مع الويب

1. النوافذ المنبثقة

<button onclick="alert('مرحبا!')">عرض تنبيه</button>

alert: يُستخدم لعرض نافذة تنبيهية مع رسالة للمستخدم.

2. النوافذ الجديدة

<a href="https://www.example.com" target="_blank">افتح في نافذة جديدة</a>

"target="_blank: يُفتح الرابط في نافذة جديدة.

33. الاختبارات والمعايير

1. نماذج الاختبار

<input type="text" id="test" pattern="\d{3}-\d{2}-\d{4}" placeholder="XXX-XX-XXXX" required>

• pattern: يُحدد نمطًا يجب على قيمة الإدخال اتباعه.
• required: يُلزم المستخدم بإدخال قيمة تتوافق مع النمط المحدد.

34. التحسينات البيانية

1. الرسومات المتحركة

<div id="box" style="width:100px; height:100px; background-color:blue;"></div>
<script>
document.getElementById("box").addEventListener("mouseenter", function() {
    this.style.backgroundColor = 'green';
});
document.getElementById("box").addEventListener("mouseleave", function() {
    this.style.backgroundColor = 'blue';
});
</script>

mouseenter وmouseleave: أحداث تستمع لدخول وخروج المؤشر من العنصر. تغيّر لون العنصر عند حدوث هذه الأحداث.

35. البيانات الموجهة

1. دعم الـ ARIA

<button aria-label="إرسال">إرسال</button>

aria-label: يُقدم نصًا بديلًا لوصف الوظيفة للأزرار أو العناصر.

36. الرسوم البيانية والمخططات

1. تضمين رسم بياني

<svg width="200" height="200">
    <circle cx="100" cy="100" r="50" stroke="black" stroke-width="3" fill="red" />
</svg>

• <svg>: يُستخدم لإنشاء رسومات بيانية في HTML.
• <circle>: يرسم دائرة داخل الـ <svg>.

2. المخططات البيانية

<canvas id="myChart" width="400" height="400"></canvas>
<script>
var ctx = document.getElementById('myChart').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['أحمر', 'أزرق', 'أصفر'],
        datasets: [{
            label: 'أمثلة',
            data: [12, 19, 3],
            backgroundColor: ['red', 'blue', 'yellow'],
        }]
    }
});
</script>

<canvas>: يُستخدم لرسم مخططات بيانية باستخدام مكتبات JavaScript مثل Chart.js.

37. العناصر المعقدة

1. قوائم تفاعلية

<details>
    <summary>انقر هنا لمزيد من التفاصيل</summary>
    <p>مزيد من التفاصيل هنا...</p>
</details>

• <details>: يُستخدم لإنشاء قائمة قابلة للتوسيع.
• <summary>: عنوان القائمة.

2. الخرائط المضمنة

<iframe src="https://www.google.com/maps" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

<iframe>: يُستخدم لتضمين محتوى من موقع خارجي، مثل خريطة.

38. تحسينات النصوص

1. النصوص المزخرفة

<q>هذا نص مقتبس</q>

<q>: يُستخدم لتحديد نص مقتبس.

2. النصوص المختصرة

<dfn>مصطلح</dfn>

<dfn>: يُستخدم لتحديد تعريف أو مصطلح معين في النص.

39. الجداول المتقدمة

1. الجداول القابلة للفرز

<table>
    <thead>
        <tr>
            <th onclick="sortTable(0)">الاسم</th>
            <th onclick="sortTable(1)">العمر</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>أحمد</td><td>30</td></tr>
        <tr><td>سارة</td><td>25</td></tr>
    </tbody>
</table>

<script>
function sortTable(n) {
    var table = document.getElementsByTagName('table')[0];
    var rows = Array.from(table.rows);
    rows = rows.slice(1).sort((a, b) => a.cells[n].innerHTML.localeCompare(b.cells[n].innerHTML));
    table.tBodies[0].append(...rows);
}
</script>

• الجداول مع إمكانية الفرز توفر تجربة مستخدم محسنة.
• onclick على <th> يستخدم لفرز الجداول.

40. الروابط التفاعلية

1. الروابط المعززة

<a href="#" onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'">رابط تفاعلي</a>

onmouseover وonmouseout: أحداث تحدد التغييرات المرئية عند المرور على الرابط.

2. روابط التصفح السريع

<a href="#section2">انتقل إلى القسم 2</a>

<section id="section2">
    <h2>القسم 2</h2>
    <p>محتوى القسم الثاني.</p>
</section>

الروابط تُسهّل التنقل بين أقسام الصفحة باستخدام العناوين.

41. وسائط الصوت

1. تشغيل الصوت

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    متصفحك لا يدعم تشغيل الصوت.
</audio>

• <audio>: يُستخدم لإنشاء مشغل صوت على صفحة الويب.
• controls: يضيف عناصر التحكم للتشغيل.

2. البث الصوتي

<audio controls autoplay loop>
    <source src="stream.mp3" type="audio/mpeg">
    متصفحك لا يدعم تشغيل الصوت.
</audio>

• autoplay: يبدأ تشغيل الصوت تلقائيًا عند تحميل الصفحة.
• loop: يُشغّل الصوت بشكل مستمر في حلقة.

42. الصور والوسائط

1. تحجيم الصور

<img src="image.jpg" alt="صورة" width="300" height="200">

width وheight: يُحددان عرض وارتفاع الصورة.

2. الصور القابلة للنقر

<a href="https://www.example.com">
    <img src="image.jpg" alt="صورة قابلة للنقر" width="300" height="200">
</a>

يمكنك وضع الصور داخل روابط لتصبح قابلة للنقر.

43. إدراج المحتوى الخارجي

1. المستندات المضمنة

<iframe src="document.pdf" width="600" height="800"></iframe>

• src: يحدد مصدر المستند الخارجي.
• يمكنك استخدام <iframe> لتضمين مستندات مثل ملفات PDF.

2. مقاطع الفيديو من مصادر خارجية

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQ" allowfullscreen></iframe>

• allowfullscreen: يتيح تشغيل الفيديو في وضع ملء الشاشة.
• src: يحدد مصدر الفيديو من موقع مثل YouTube.

44. إدخال القوائم

1. القوائم المنقطة

<ul>
    <li>بند 1</li>
    <li>بند 2</li>
    <li>بند 3</li>
</ul>

• <ul>: يُستخدم لإنشاء قائمة منقطة.
• <li>: يُستخدم لإنشاء بنود القائمة.

2. القوائم المرقمة

<ol>
    <li>بند 1</li>
    <li>بند 2</li>
    <li>بند 3</li>
</ol>

• <ol>: يُستخدم لإنشاء قائمة مرقمة.
• <li>: يُستخدم لإنشاء بنود القائمة.

45. جداول البيانات المتقدمة

1. الجداول القابلة للترتيب

<table>
    <thead>
        <tr>
            <th onclick="sortTable(0)">الاسم</th>
            <th onclick="sortTable(1)">العمر</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>أحمد</td>
            <td>30</td>
        </tr>
        <tr>
            <td>سارة</td>
            <td>25</td>
        </tr>
    </tbody>
</table>

<script>
function sortTable(n) {
    var table = document.getElementsByTagName('table')[0];
    var rows = Array.from(table.rows);
    rows = rows.slice(1).sort((a, b) => a.cells[n].innerHTML.localeCompare(b.cells[n].innerHTML));
    table.tBodies[0].append(...rows);
}
</script>

onclick على رؤوس الجدول يوفر إمكانية الترتيب في الجدول.

46. إدخال نماذج تفاعلية

1. قائمة الخيارات

<label for="fruits">اختر فاكهة:</label>
<select id="fruits" name="fruits">
    <option value="apple">تفاح</option>
    <option value="banana">موز</option>
    <option value="orange">برتقال</option>
</select>

• <select>: يُستخدم لإنشاء قائمة منسدلة من الخيارات.
• <option>: يُمثل خيارًا واحدًا في القائمة.

2. المربعات متعددة الاختيارات

<fieldset>
    <legend>اختر اللغات التي تتحدثها:</legend>
    <input type="checkbox" id="arabic" name="language" value="arabic">
    <label for="arabic">العربية</label>
    <input type="checkbox" id="english" name="language" value="english">
    <label for="english">الإنجليزية</label>
    <input type="checkbox" id="spanish" name="language" value="spanish">
    <label for="spanish">الإسبانية</label>
</fieldset>

• <"input type="checkbox>: يُستخدم لإنشاء مربع اختيار.
• <fieldset> و<legend>: يُستخدمان لتجميع عناصر النموذج ذات الصلة تحت عنوان محدد.

47. تحسينات للنماذج

1. أدوات الإدخال الخاصة

<label for="birthday">تاريخ الميلاد:</label>
<input type="date" id="birthday" name="birthday">

"type="date: يُستخدم لإنشاء حقل إدخال تاريخ مع واجهة التقويم.

2. الحقول المحمية

<input type="password" id="password" name="password" placeholder="كلمة المرور" required>

"type="password: يُستخدم لإنشاء حقل إدخال كلمة مرور، حيث يتم إخفاء النص المدخل.

48. تحديد الهوية والعلامات الدلالية

1. تحديد الهوية والعنونة

<div id="main-content">
    <h1>العنوان الرئيسي</h1>
    <p>هذا هو المحتوى الرئيسي.</p>
</div>

id: يُستخدم لتحديد الهوية الخاصة بعناصر HTML.

2. العلامات الدلالية

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

• <meta>: تُستخدم لتحديد البيانات الوصفية للصفحة.
• "charset="UTF-8: يُحدد ترميز الصفحة.

49. تسهيل الوصول

1. النص البديل للصور

<img src="image.jpg" alt="صورة توضيحية" width="300" height="200">

alt: يُوفر وصفًا للنص البديل لتحسين إمكانية الوصول.

2. العلامات التوضيحية لعناصر النماذج

<label for="username">اسم المستخدم:</label>
<input type="text" id="username" name="username">

for: يُشير إلى الحقل المرتبط بوصف العنصر.

50. النصوص الديناميكية

1. النصوص الديناميكية

<p id="dynamic-text">النص الأصلي.</p>
<script>
document.getElementById("dynamic-text").innerText = "النص المعدل ديناميكياً.";
</script>

innerText: يُستخدم لتغيير محتوى النص داخل عنصر HTML ديناميكياً.

2. الإسناد إلى العناصر

<a href="https://www.example.com" id="dynamic-link">رابط ثابت</a>
<script>
document.getElementById("dynamic-link").href = "https://www.new-example.com";
</script>

href: يُمكن تغيير عنوان الرابط ديناميكياً باستخدام JavaScript.

51. العناصر الرسومية

1. الرسومات البسيطة باستخدام <canvas>

<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 50);
ctx.fillStyle = 'red';
ctx.fillRect(130, 10, 100, 50);
</script>

• <canvas>: يُستخدم لرسم الأشكال الرسومية البسيطة.
• getContext('2d'): يُستَخدم للحصول على سياق ثنائي الأبعاد للرسم.

2. الرسومات المتقدمة باستخدام <svg>

<svg width="300" height="100">
    <rect x="10" y="10" width="100" height="50" fill="green" />
    <rect x="150" y="10" width="100" height="50" fill="purple" />
</svg>

• <rect>: يرسم مستطيلاً داخل <svg>.
• يمكن تخصيص الخصائص مثل الموقع (x, y)، والعرض (width)، والارتفاع (height)، واللون (fill).

52. معايير الويب الحديثة

1. استخدام data-* للعناصر

<button id="myButton" data-value="5" onclick="alert(this.dataset.value)">
    انقر هنا
</button>

• data-*: يُستخدم لتخزين البيانات المخصصة في عناصر HTML.
• يمكنك الوصول إلى البيانات باستخدام dataset في JavaScript.

2. دعم template

<template id="myTemplate">
    <p>نص داخل القالب.</p>
</template>
<div id="container"></div>

<script>
var template = document.getElementById('myTemplate').content;
document.getElementById('container').appendChild(template.cloneNode(true));
</script>

• <template>: يُستخدم لإنشاء محتوى يمكن إعادة استخدامه ديناميكياً.
• يمكن نسخ محتوى القالب باستخدام cloneNode(true).

53. التخطيط الشبكي

1. استخدام CSS Grid

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
    <div style="background-color: yellow;">خانة 1</div>
    <div style="background-color: pink;">خانة 2</div>
    <div style="background-color: lightblue;">خانة 3</div>
    <div style="background-color: lightgreen;">خانة 4</div>
</div>

• ;display: grid: يُفعّل وضع الشبكة.
• grid-template-columns: يُحدد عدد الأعمدة وعرضها.
• gap: يُحدد المسافة بين الخلايا.

2. استخدام Flexbox

<div style="display: flex; justify-content: center; align-items: center; height: 100px;">
    <div style="background-color: red; width: 100px; height: 50px;">مربع</div>
</div>

• ;display: flex: يُفعّل وضع Flexbox.
• justify-content وalign-items: يُحددان كيفية توجيه العناصر داخل العنصر الأب.

54. عناصر الوسائط

1. الصور المتجاوبة

<img src="image.jpg" alt="صورة" style="max-width: 100%; height: auto;">

;style=max-width: 100%; - height: auto: يُضمن استجابة الصورة لتغييرات حجم النافذة.

2. الفيديوهات المتجاوبة

<video width="100%" height="auto" controls>
    <source src="video.mp4" type="video/mp4">
    متصفحك لا يدعم تشغيل الفيديو.
</video>

"width="100% و"height="auto: يجعل الفيديو يتجاوب مع عرض النافذة.

أكواد JavaScript

يُمكن استخدام JavaScript مع HTML لزيادة تفاعل الزوار مع المدونة.

علامة JavaScript: تُستخدم علامة <script> لتضمين أكواد JavaScript داخل الصفحة. يُمكنك إضافة وظائف تفاعلية للمدونة باستخدام هذه العلامة.

نصائح عملية لتطبيق أكواد HTML بفعالية

تحسين سرعة المدونة وأدائها، سرعة المدونة وأدائها تعتمد على استخدام الأكواد بفعالية، لذلك يجب:

• تنظيم الكود: الحفاظ على الكود منظمًا ومنظفًا لتقليل وقت التحميل.
• تجنب الاكواد الزائدة: الابتعاد عن الاكواد الزائدة التي قد تبطئ سرعة التحميل.

ضمان التوافق مع الأجهزة المختلفة.

يجب مراعاة توافق المدونة مع الأجهزة المختلفة لضمان تجربة مريحة للقراء:

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

وفي النهاية...

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

تعديل المقال