إنشاء عداد في هتمل هو مهمة بسيطة يمكن القيام به مع عدد قليل من العناصر الأساسية والرمز. عادة ما يتم استخدام العداد لتتبع عدد الزيارات أو الأحداث على موقع الويب ، وهو أداة مفيدة جدا لمراقبة نشاط المستخدم.
واحدة من أسهل الطرق لإنشاء عداد في هتمل هو استخدام عنصر في تركيبة مع شفرة جافا سكريبت صغيرة. أولا ، يجب عليك إنشاء عنصر على صفحة الويب الخاصة بك حيث سيتم عرض قيمة العداد الحالية. ثم يمكنك استخدام جافا سكريبت لزيادة قيمة العداد في كل مرة تقوم فيها بزيارة صفحة أو حدث.
ملاحظة: لإنشاء عداد باستخدام جافا سكريبت ، ستحتاج إلى بعض المعرفة بلغة البرمجة هذه. إذا لم تكن معتادا على جافا سكريبت ، فمن المستحسن أن تدرس أساسياتها قبل البدء في إنشاء عداد.
بالإضافة إلى استخدام جافا سكريبت ، يمكنك أيضا إنشاء عداد باستخدام عنصر وبرنامج نصي للخادم. تتيح لك هذه الطريقة تتبع عدد تنزيلات الصور ، وهي مفيدة بشكل خاص إذا كنت تريد معرفة عدد المرات التي تم فيها عرض صورة معينة أو تنزيلها على موقع الويب الخاص بك.
- الخطوة 1: التحضير لإنشاء عداد
- تعلم أتش تي أم أل
- الخطوة 2: تخطيط الصفحة
- إنشاء بنية هتمل
- الخطوة 3: ظهور العداد
- تطبيق أنماط كس
- الخطوة 4: إضافة وظائف
- باستخدام جافا سكريبت
- سؤال وجواب
- كيف يمكنني إنشاء عداد في أتش تي أم أل?
- كيف يمكنني تعيين الحد الأدنى والحد الأقصى للقيم العداد?
- كيف يمكنني تغيير قيمة العداد باستخدام الأزرار?
- هل من الممكن وضع عداد داخل النموذج?
- كيف يمكنني حفظ قيمة العداد عند تحديث الصفحة?
- كيف يمكنني أسلوب عداد?
الخطوة 1: التحضير لإنشاء عداد
قبل إنشاء عداد في هتمل ، سوف تحتاج إلى إكمال العديد من الخطوات التحضيرية.
- تحديد الغرض من العداد الخاص بك. تحديد مقدما ما تريد بالضبط لتتبع والعد. يمكن أن يكون هذا هو عدد زيارات الصفحة ، وعدد النقرات على زر معين ، وما إلى ذلك. من المهم أن يكون لديك هدف واضح من أجل إنشاء عداد سيكون مفيدا لك.
- حدد العنصر المناسب في صفحتك لوضع العداد. يمكن أن يكون أي عنصر هتمل ، على سبيل المثال ، فقرة
- أضف معرفا فريدا إلى العنصر الخاص بك. المعرف هو سمة معرف تسمح لك بتحديد عنصر على الصفحة بشكل فريد. على سبيل المثال ، يمكنك إضافة معرف="عداد" إلى العنصر الذي حددته.
- ربط جافا سكريبت إلى صفحتك. إنشاء ملف منفصل مع التمديد.شبيبة وإضافة رمز الاتصال في العلامة. فمثلا,.
بعد الانتهاء من هذه الخطوات ، ستكون جاهزا للانتقال إلى إنشاء العداد نفسه في هتمل في الخطوات التالية.
تعلم أتش تي أم أل
أتش تي أم أل (من لغة ترميز النص التشعبي الإنجليزية) هي لغة ترميز قياسية لإنشاء صفحات الويب. يتم استخدامه لهيكلة وتقديم المحتوى على مواقع الويب.
تعلم هتمل يمكن أن تكون مفيدة لأي شخص يريد إنشاء صفحات الويب الخاصة بهم. سواء كنت مطور ويب محترف أو ترغب فقط في إنشاء صفحة بسيطة لمدونتك الشخصية ، فإن معرفة هتمل سيساعدك على تحقيق أهدافك.
علامات هتمل الرئيسية هي:
- علامة لإنشاء فقرة من النص.
- - علامة لتسليط الضوء على النص بالخط العريض.
- - علامة للنص المائل.
- - علامة لإنشاء قائمة مرتبة.
- - علامة لإنشاء قائمة غير مرتبة.
- - علامة لإنشاء عنصر قائمة.
- علامة لإنشاء جدول.
سيساعدك استخدام هذه العلامات على تنظيم بنية صفحة الويب الخاصة بك بشكل صحيح وجعلها في متناول محركات البحث والمستخدمين.
من المهم أن نلاحظ أن هتمل هو واحد فقط من مكونات تطوير الشبكة. لإنشاء موقع ويب كامل ، من المهم أيضا معرفة كس (كيفية تصميم صفحة) وجافا سكريبت (كيفية إضافة التفاعل).
البدء في تعلم هتمل مع العلامات الأساسية ، تجربة وإنشاء صفحات الويب الخاصة بك. تدريجيا ، سوف تتقن مفاهيم وأدوات أكثر تعقيدا ستساعدك على إنشاء مواقع ويب بأي تعقيد.
الخطوة 2: تخطيط الصفحة
بعد إنشاء ملف هتمل وفتحه في محرر نصوص ، تحتاج إلى إضافة ترميز إلى صفحتك.
يعتمد ترميز صفحة هتمل على استخدام العلامات لوصف بنية ومحتوى الصفحة.
فيما يلي بعض العلامات الأساسية التي يمكنك استخدامها لترميز صفحتك:
: تستخدم لتمييز فقرات النص.
- : تستخدم لتسليط الضوء على المعلومات الهامة بالخط العريض.
- : يستخدم لإضفاء الطابع المائل على الكلمات أو العبارات التي تؤكد على التلوين العاطفي أو التوتر.
- : تستخدم لإنشاء قائمة مرتبة حيث يتم تمييز كل عنصر بقيمة رقمية.
- : تستخدم لإنشاء قائمة غير مرتبة حيث يتم تمييز كل عنصر بعلامة.
- : تستخدم لتحديد عنصر القائمة.
: تستخدم لإنشاء جدول.
قد يبدو مثال على تخطيط الصفحة كما يلي:
مرحبا ، هذه هي أول صفحة ويب لي!
عنوان الصفحة
هذا هو بعض النص على الصفحة.
في هذا المثال ، استخدمنا علامات مختلفة لإنشاء رأس وقائمة ونص وجدول. يمكنك استخدام هذه العلامات أو إضافة علامات أخرى لتخصيص تخطيط صفحتك ليناسب احتياجاتك.
إنشاء بنية هتمل
أتش تي أم أل (لغة ترميز النص التشعبي) هي لغة ترميز تستخدم لإنشاء بنية ومحتوى صفحة الويب. في هذه المقالة ، سننظر في كيفية إنشاء البنية الأساسية لمستند هتمل.
الخطوة 1: تعريف المستند
يجب أن يبدأ كل مستند هتمل بتحديد نوع المستند والترميز. يتم استخدام الكود التالي لهذا:
الخطوة 2: إنشاء عنصر الجذر
بعد ذلك ، نقوم بإنشاء العنصر الجذر للمستند ، وهو عبارة عن حاوية لكل المحتوى على الصفحة. العنصر الجذر هو العلامة :
...
الخطوة 3: عنوان الصفحة
عنوان الصفحة هو معلومات حول الصفحة التي لا يتم عرضها مباشرة في المتصفح ، ولكن يتم عرضها في علامة التبويب أو شريط العنوان في نافذة المتصفح. لإضافة عنوان ، نستخدم علامة ونضع العلامة بداخلها :
عنوان الصفحة
الخطوة 4: نص الصفحة
يتم استخدام العلامة لإنشاء نص صفحة يتم عرضه في المتصفح. يتم وضع محتوى الصفحة بالكامل داخل العلامة:
...
الخطوة 5: إنشاء القوائم
العلامات
الخطوة 6: إنشاء جدول
العلامة
هذه هي العلامات الرئيسية التي يمكنك من خلالها إنشاء بنية مستند هتمل. ومع ذلك ، هناك العديد من العلامات والسمات الأخرى التي تسمح لك بإنشاء صفحات ويب أكثر تعقيدا وتفاعلية.
الخطوة 3: ظهور العداد
بعد أن أنشأنا العداد وحددنا منطق التشغيل الخاص به ، حان الوقت لتعيين مظهره. يمكن تخصيص مظهر العداد باستخدام كس (أوراق الأنماط المتتالية).
. على سبيل المثال:
.عداد {
لون الخلفية: #000000;
اللون: # ففف;
}
هنا قمنا بتعيين خلفية سوداء للعداد ولون نص أبيض. يمكنك اختيار أي الألوان التي تريدها.
. على سبيل المثال:
.عداد {
الحدود: 2 بكسل الصلبة # ففف;
نصف قطر الحدود: 10 بكسل;
}
هنا قمنا بتعيين حدود بيضاء بسماكة 2 بكسل وزوايا مستديرة مع دائرة نصف قطرها 10 بكسل.
. على سبيل المثال:
.عداد {
الخط الأسرة: أريال ، بلا الرقيق;
حجم الخط: 16 بكسل;
}
هنا قمنا بتعيين الخط أريال وحجم الخط من 16 بكسل للعداد.
. على سبيل المثال:
.عداد {
الهامش: 10 بكسل;
محاذاة النص: المركز;
}
هنا قمنا بتعيين الهوامش على 10 بكسل وتمركز نص العداد.
بالطبع ، هذه مجرد أمثلة على الأنماط ، ويمكنك تخصيص مظهر العداد حسب رغبتك. استخدام المغلق لجعل العداد الخاص بك تبرز وجذابة!
تطبيق أنماط كس
أوراق الأنماط المتتالية (كس) هي أداة قوية لإدارة مظهر صفحة ويب. أنماط كس تسمح لك لإعطاء عناصر الصفحة ألوان مختلفة ، والخطوط ، والخلفيات ، وأكثر من ذلك.
مزايا استخدام أنماط كس:
- الانفصال. تسمح لك أنماط كس بفصل المظهر عن المحتوى ، مما يجعل الشفرة أكثر نظافة ووضوحا.
- المرونة. باستخدام كس ، يمكنك تعيين نمط للعناصر الفردية أو مجموعات العناصر أو أقسام كاملة من الموقع.
- براعة. باستخدام كس ، يمكنك بسهولة تغيير مظهر الموقع بأكمله دون التأثير على كل صفحة على حدة.
يتم تطبيق أنماط كس عن طريق إنشاء قواعد التصميم وتعيينها لعناصر كود هتمل. على سبيل المثال:
- إنشاء نمط للعناوين:
| كود أتش تي أم أل | رمز المغلق |
|---|---|
العنوان 1 | ح1 {اللون: أزرق ؛ حجم الخط: 24 بكسل؛} |
| ح2 {اللون: أحمر ؛ حجم الخط: 20 بكسل؛} |
، يتم تعيين خصائص لون النص وحجم الخط للعناصر باستخدام قواعد كس. سيتم عرض عنوان المستوى الأول باللون الأزرق وحجم الخط 24 بكسل ، وسيتم عرض عنوان المستوى الثاني باللون الأحمر وحجم الخط 20 بكسل.
وبالتالي ، فإن استخدام أنماط كس يسمح لك بتخصيص مظهر عناصر هتمل بمرونة وإنشاء صفحات ويب جذابة وحديثة.
الخطوة 4: إضافة وظائف
الآن بعد أن أصبح قالب العداد الرئيسي جاهزا ، دعنا نضيف بعض الوظائف لجعله يعمل. إليك ما سنفعله:
- دعونا إضافة متغير من شأنها تخزين القيمة الحالية للعداد.
- دعونا إنشاء وظيفة من شأنها أن تزيد من قيمة العداد مع كل نقرة على زر.
- دعنا نربط الوظيفة بأحداث النقر على زر العداد.
لنبدأ في إضافة وظائف:
- الخطوة 1: أضف المتغير التالي في بداية البرنامج النصي:
عداد فار = 0;- الخطوة 2: أسفل هذا المتغير ، قم بإنشاء وظيفة تزيد من قيمة العداد:
وظيفة زيادة العداد () {counter++;
}
- الخطوة 3: الآن دعنا نربط الوظيفة بحدث النقر على زر. إضافة التعليمات البرمجية التالية بعد إنشاء وظيفة إنفيسيكونتر ():
زر فار = وثيقة.جيتليمنتبيد ("زر مكافحة");زر.إضافة إيفنتليستينر ("انقر" ، وظيفة () {
زيادة العداد();
});
الآن يجب أن يزيد عدادنا في كل مرة ينقر فيها المستخدم على الزر. يمكنك تجربتها بنفسك والتأكد من أن كل شيء يعمل بشكل صحيح.
في الخطوة التالية ، سنضيف عرضا لقيمة العداد الحالية على صفحة الويب.
باستخدام جافا سكريبت
يمكنك استخدام جافا سكريبت لإنشاء عداد على صفحة هتمل. جافا سكريبت هي لغة برمجة تسمح لك بإضافة التفاعل والوظائف إلى صفحات الويب.
هنا مثال على التعليمات البرمجية التي تخلق عداد بسيط على صفحة هتمل:
0
إضافة
رمي قبالة
في الكود أعلاه ، يتم إنشاء عداد باستخدام عنصر
يحتوي على المعرف"عداد". يؤدي زران "إضافة" و "إعادة تعيين" إلى تشغيل الوظائف المقابلة عند النقر عليها.
شفرة جافا سكريبت داخل العلامة. في هذا الرمز ، نستخدم الوظائف والمتغيرات لزيادة وإعادة تعيين قيمة العداد ، وكذلك لتحديث محتويات عنصر العداد باستخدام خاصية إنترتمل.
وبالتالي ، سيزداد العداد في كل مرة تنقر فيها على الزر "إضافة" وإعادة التعيين عند النقر فوق الزر "إعادة تعيين". سيتم عرض قيمة العداد المحدثة داخل العنصر
مع معرف "عداد".
سؤال وجواب
كيف يمكنني إنشاء عداد في أتش تي أم أل?
لإنشاء عداد في هتمل ، يمكنك استخدام عنصر "الإدخال" مع السمة "نوع" يساوي "عدد". مثال:
كيف يمكنني تعيين الحد الأدنى والحد الأقصى للقيم العداد?
لتعيين الحد الأدنى والحد الأقصى لقيم العداد ، استخدم سمات "الحد الأدنى" و "الحد الأقصى" ، على التوالي. على سبيل المثال ، لتعيين النطاق من 0 إلى 10 ، تحتاج إلى إضافة سمات إلى عنصر "الإدخال": دقيقة="0" ماكس="10".
كيف يمكنني تغيير قيمة العداد باستخدام الأزرار?
يمكنك استخدام جافا سكريبت لتغيير قيمة العداد باستخدام الأزرار. تحتاج إلى إضافة أزرار وربط وظائف لهم من شأنها أن تغير قيمة العداد عند الضغط عليه.
هل من الممكن وضع عداد داخل النموذج?
نعم ، يمكن وضع العداد داخل النموذج. للقيام بذلك ، تحتاج فقط إلى إضافته داخل علامة "النموذج".