مقدمة سريعة
ستتعلم هنا خطوات واضحة لبناء صفحة ويب تفاعلية باستخدام HTML للهيكل، CSS للتصميم، وJavaScript لإضافة التفاعل. سنوفر مثالاً عملياً يمكنك نسخه وتشغيله مباشرة.
1. هيكل الصفحة (HTML)
الـ HTML يحدد العناصر الأساسية: الرأس، التنقل، المحتوى، وأي عناصر تفاعلية مثل نماذج أو أزرار.
قالب بسيط (نسخة قابلة للنسخ)
<!-- افتح ملف index.html والصق ما يلي -->
<!doctype html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>موقعي البسيط</title>
</head>
<body>
<header><h1>مرحباً</h1></header>
<main><p>محتوى الموقع</p></main>
<script src="app.js"></script>
</body>
</html>
هذا قالب البداية — ضع ملفين آخرين: styles.css وapp.js لتبدأ التصميم والسكربت.
2. التصميم (CSS)
استخدم Flexbox وGrid لبناء تخطيطات مرنة. اجعل التصميم مستجيباً (responsive) بتغيير الأعمدة على الشاشات الصغيرة.
3. التفاعلية (JavaScript)
JavaScript يتحكم بالسلوك — التعامل مع الأحداث (click, submit)، التحقق من النماذج، تحديث DOM، واستدعاء APIs.
مثال تفاعلي كامل: أداة مهام صغيرة (To-do)
انسخ الملفات الثلاثة التالية في مجلد وشغّل index.html في المتصفح.
index.html (اضغط لعرض)
<!doctype html>
<html lang="ar" dir="rtl">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>تطبيق المهام البسيط</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div class="app">
<h2>قائمة المهام</h2>
<form id="taskForm">
<input id="taskInput" placeholder="اكتب مهمة..." required />
<div class="actions">
<button type="submit">أضف</button>
<button type="button" id="clearBtn">مسح الكل</button>
</div>
</form>
<ul id="taskList"></ul>
</div>
<script src="app.js"></script>
</body>
</html>
styles.css (اضغط لعرض)
/* بسيط ومباشر */
body{font-family:'Noto Sans Arabic',sans-serif;background:var(--bg, #f7fbfb);padding:24px}
.app{max-width:600px;margin:0 auto;background:white;padding:18px;border-radius:10px;box-shadow:0 8px 24px rgba(2,6,23,0.06)}
input{padding:10px;border-radius:8px;border:1px solid #e6eef0;width:100%}
.actions{display:flex;gap:10px;margin-top:10px}
button{padding:10px 12px;border-radius:8px;border:none;background:#0ea5a4;color:white;cursor:pointer}
ul{list-style:none;padding:0;margin-top:12px}
li{padding:10px;border-radius:8px;border:1px solid #eef6f6;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}
.delete{background:transparent;border:1px solid #f87171;color:#b91c1c;padding:6px;border-radius:8px;cursor:pointer}
app.js (اضغط لعرض)
// بسيط: إضافة المهام، حفظ في localStorage، وحذف
const form = document.getElementById('taskForm');
const input = document.getElementById('taskInput');
const list = document.getElementById('taskList');
const clearBtn = document.getElementById('clearBtn');
let tasks = JSON.parse(localStorage.getItem('tasks') || '[]');
function render(){
list.innerHTML = '';
tasks.forEach((t, i)=>{
const li = document.createElement('li');
li.textContent = t;
const btn = document.createElement('button');
btn.textContent = 'حذف';
btn.className = 'delete';
btn.onclick = ()=>{ tasks.splice(i,1); saveAndRender(); };
li.appendChild(btn);
list.appendChild(li);
});
}
function saveAndRender(){
localStorage.setItem('tasks', JSON.stringify(tasks));
render();
}
form.onsubmit = (e)=>{ e.preventDefault(); if(!input.value.trim()) return; tasks.push(input.value.trim()); input.value=''; saveAndRender(); };
clearBtn.onclick = ()=>{ if(confirm('مسح كل المهام؟')){ tasks=[]; saveAndRender(); }};
render();
بهذا المثال لديك صفحة تفاعلية كاملة — احفظ المهام محليًا، أضف/احذف، وجرّب توسيعها لاحقًا (فلترة، وسم، تعدد المستخدمين عبر backend).
نصائح مهمة
1
ابدأ بهيكل واضح: استخدم عناصر معنوية مثل header, main, nav, footer.
2
استخدم CSS خارجي: اجعل قابليّة الصيانة أسهل بفصل الأنماط.
3
اجعل الموقع مستجيباً: اكتب قواعد @media لتجربة جيدة على الموبايل.
4
تحقق من الوصولية: استخدم سمات aria ووضع تباين ألوان كافٍ.
5
جرّب وأعد الاختبار: اختبر على متصفحات مختلفة وادوات مثل Chrome DevTools.
.jpeg)
تعليقات