Home-theater-designers
تريد أن يبدو موقع الويب الخاص بك رائعًا - لكن مهارات تطوير الويب لديك مفقودة.
لا تيأس! لست مضطرًا إلى معرفة CSS أو PHP لإنشاء موقع رائع بتأثيرات رائعة. بعض علامات HTML البسيطة ومعرفة كيفية النسخ واللصق سيفي بالغرض.
لتبدأ ببعض تأثيرات HTML الرائعة ، قمنا بتجميع قوالب أكواد تأثير HTML المجانية هذه. سيعززون وظائف وتجربة المستخدم لموقعك ، مع عدم كسر البنك. على الرغم من أنها في الغالب HTML ، فقد تحتوي هذه الأكواد الرائعة أيضًا على بعض CSS و PHP.
1. تأثير المنظر الرائع مع HTML
ربما تكون قد رأيت تأثير المنظر المستخدم على مواقع الويب التي تحتوي على إعلانات عبر الإنترنت. بينما تقوم بالتمرير لأسفل مقالاً ، فإن ملف تظهر صورة الخلفية للتمرير بوتيرة مختلفة ، أو يظهر إعلان.
بدلاً من ذلك ، ربما تتغير صورة الخلفية أثناء زيارتك لأجزاء مختلفة من الموقع. إنه تأثير رائع يضيف عمقًا بصريًا إلى المحتوى ومثاليًا حتى لو لم تفعل ذلك فهم كود HTML الأساسي .
يمكنك اللعب مع التأثير ونسخ الكود لملف تأثير تمرير المنظر البسيط من W3Schools .
في أكثر إصداراته تعقيدًا ، يكون هذا التأثير مزيجًا من HTML و CSS و JS.
انطلق واحضر الرموز لما سبق تأثير اختلاف رأس / تذييل الصفحة من CodePen .
2. رمز مربع التعليق HTML القابل للتمرير
هذا عنصر HTML بسيط ولكنه مفيد يتيح لك تجميع مقتطفات طويلة من النص في تنسيق مضغوط. بهذه الطريقة لا تشغل المساحة الكاملة على الصفحة.
يمكنك اللعب بالألوان وحجم مربع النص ليناسب احتياجاتك.
مدخل:
Putting some text in this box will let you see how large it can stretch to - eventually the scrollbars should show, enabling you to scroll through the text. That's it! :) إذا كنت ترغب في شيء مربي الحيوانات قليلاً ، يمكنك أيضًا إحضار رمز لـ مربع تعليق قابل للتخصيص من Quackit .
إنها توفر العديد من القوالب ، ولكن يمكنك أيضًا استخدام محررها لتغيير التعليمات البرمجية المخصصة واختبارها (تشغيلها) يدويًا.
3. خدعة HTML رائعة: نص مميز
مع ملفعلامة HTML يمكنك إضافة الكثير من التأثيرات الرائعة إلى نصك أو صورك. لاحظ أن ليس كل منهم يعمل عبر المتصفحات. ما تم ذكره هنا يعمل في Google Chrome و Microsoft Edge و Mozilla Firefox.
يبرز تأثير نص HTML هذا النص الموجود بين ملفالعلامات.
مدخل:
Your highlighted text here.عرض الإخراج:
4. إضافة صورة الخلفية إلى النص
وبالمثل ، يمكنك تغيير لون النص أو إضافة صورة خلفية. يبدو هذا رائعًا إذا كان حجم خط النص أكبر.
مدخل:
MakeUseOf presents...يتم تحقيق نفس التأثير عن طريق إضافة عناصر النمط والخط إلى النص في ملف بطاقة شعار.
كيفية تبديل ترتيب الصفحات في Word
عرض الإخراج:
5. خدعة HTML مفيدة لإضافة تلميح أدوات العنوان
يظهر تلميح عنوان عند التمرير بالماوس فوق جزء من نص أو صورة 'تم التلاعب بها'. سترى هذه المستخدمة على مواقع الويب على الصور أو النصوص المرتبطة أو حتى عناصر القائمة في تطبيقات سطح المكتب. استخدم كود HTML هذا لإضافة تلميح أداة إلى نص عادي على صفحة الويب الخاصة بك.
مدخل:
Move your mouse over me!عرض الإخراج:
6. أروع حيل HTML حتى الآن: التمرير أو هبوط النص
عندما تبحث عن 'marquee html' على Google ، ستكتشف بيضة عيد الفصح الصغيرة. رؤية عدد نتائج البحث التمرير في الأعلى؟ هذا تأثير تم إنشاؤه بواسطة علامة التحديد المتقادمة الآن. بينما تم إهمال تأثير نص HTML الرائع هذا ، إلا أن معظم المتصفحات لا تزال تدعمه.
مدخل:
I wanna scroll with it, baby!عرض الإخراج:
تستطيع أضف المزيد من السمات للتحكم في سلوك التمرير ولون الخلفية والاتجاه والارتفاع والمزيد. كن حذرا ، ومع ذلك ؛ يمكن أن تصبح هذه الآثار مزعجة للغاية إذا تم الإفراط في استخدامها.
للحصول على تأثير نص ساقط رائع ، توجه إلى Quackit مرة أخرى ونسخ كود التحديد الخاص بهم.
7. إنشاء قائمة تبديل رائعة باستخدام HTML
أروع حيل HTML هي تأثيرات HTML الديناميكية. ومع ذلك ، فهي غالبًا ما تستند إلى النص. فيما يلي أحد التأثيرات التي ستوافق عليها على أن القوائم تبدو رائعة للغاية.
إنها أكثر تعقيدًا من علامة HTML المتوسطة لأنها تعمل مع ورقة أنماط ونصوص. الميزة هي أنك لست مضطرًا إلى تحميل ملف CSS أو ملف نصي لجعله يعمل. بدلاً من ذلك ، قم ببساطة بلصق الكود التالي في قسم موقع الويب الخاص بك.
مدخل:
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}.submenu{
margin-bottom: 0.5em;
}
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/var persistmenu='yes' //'yes' or 'no'. Make sure each SPAN content contains an incrementing ID starting at 1 (id='sub1', id='sub2', etc)
var persisttype='sitewide' //enter 'sitewide' for menu to persist across site, 'local' for this page onlyif (document.getElementById){ //DynamicDrive.com change
document.write('n')
document.write('.submenu{display: none;}n')
document.write('n')
}function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById('masterdiv').getElementsByTagName('span'); //DynamicDrive.com change
if(el.style.display != 'block'){ //DynamicDrive.com change
for (var i=0; i if (ar[i].className=='submenu') //DynamicDrive.com change
ar[i].style.display = 'none';
}
el.style.display = 'block';
}else{
el.style.display = 'none';
}
}
}function get_cookie(Name) {
var search = Name + '='
var returnvalue = '';
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(';', offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}function onloadfunction(){
if (persistmenu=='yes'){
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!='')
document.getElementById(cookievalue).style.display='block'
}
}function savemenustate(){
var inc=1, blockid=''
while (document.getElementById('sub'+inc)){
if (document.getElementById('sub'+inc).style.display=='block'){
blockid='sub'+inc
break
}
inc++
}
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=(persisttype=='sitewide')? blockid+';path=/' : blockid
document.cookie=cookiename+'='+cookievalue
}if (window.addEventListener)
window.addEventListener('load', onloadfunction, false)
else if (window.attachEvent)
window.attachEvent('onload', onloadfunction)
else if (document.getElementById)
window.onload=onloadfunctionif (persistmenu=='yes' && document.getElementById)
window.onunload=savemenustate
And this code goes wherever you want the dynamic menu to appear.
Topics
- Browsers/Addons
- Web Apps
- How-To Tips
- Cool Software
...and more!
Staff Writers
- Karl Gechlik
- Tina
- Varun Kashyap
...and more!
Miscellaneous
- About
- Contact
- Archives
- Disclaimer
عرض الإخراج:
لسوء الحظ ، لا يمكننا إثبات هذا التأثير هنا. لكن المصدر الأصلي ، محرك ديناميكي ، يحتوي على نسخة عمل من تأثير HTML الديناميكي.
8. احصل على جدول بيانات HTML باستخدام Tableizer
إذا كنت ترغب في عرض جدول بيانات على موقعك ، فدع Tableizer! تحويل البيانات الخاصة بك إلى جدول HTML. ما عليك سوى لصق البيانات الأولية من Excel أو Google Doc أو أي جدول بيانات آخر في أداة المحول في tableizer.journalistopia.com . قرص خيارات الجدول ، ثم اضغط Tableize It لتلقي إخراج HTML.
ربما يكون هذا أحد أروع أكواد HTML لموقع الويب الخاص بك ، مثل Tableize It! يقوم بكل العمل الشاق.
انقر انسخ HTML إلى الحافظة لنسخ كود HTML وإضافته إلى موقع الويب الخاص بك. ضع في اعتبارك تعديل ألوان الخلفية لجعلها تبدو أكثر برودة.
لن يتم تشغيل هاتفي وهو مشحون بالكامل
في حين أن هذا ليس تأثير HTML حقًا ، إلا أنه سهل الاستخدام.
المزيد من أكواد HTML الرائعة والتأثيرات لموقعك
توفر قوة HTML و CSS و JavaScript خيارات غير محدودة محتملة للتأثيرات المذهلة على موقع الويب الخاص بك. هل تريد المزيد؟
- عناصر HTML الجيدة يعطيك عظيماأفكار العلامات.
- محرك ديناميكي العديد من نصوص HTML الديناميكية المذهلة.
- الدجال يقدم كود HTML رائع.
لقد أظهرنا لك ثمانية أكواد HTML رائعة يمكنك نسخها لتحسين موقع الويب الخاص بك. على الرغم من اختلافها ، إلا أنها سهلة التنفيذ طالما أنك تعرف تقنيات ترميز HTML الأساسية.
يشارك يشارك سقسقة بريد الالكتروني 17 أمثلة بسيطة لرموز HTML يمكنك تعلمها في 10 دقائقهل تريد إنشاء صفحة ويب أساسية؟ تعلم أمثلة HTML هذه وجربها في محرر نصوص لترى كيف تبدو في متصفحك.
اقرأ التالي مواضيع ذات صلة- برمجة
- لغة البرمجة
- تطوير الشبكة
- أدوات مشرفي المواقع
نائب محرر الأمان و Linux و DIY والبرمجة و Tech Explained ومنتج Podcast مفيد حقًا ، مع خبرة واسعة في دعم سطح المكتب والبرامج. مساهم في مجلة Linux Format ، كريستيان هو Raspberry Pi tinkerer و Lego عاشق ومحب للألعاب القديمة.
المزيد من Christian Cawleyاشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
انقر هنا للاشتراك