كتابة تعليمات برمجية نظيفة
تعلّم كيفية تنسيق HTML لتحسين سهولة القراءة
كتابة تعليمات برمجية نظيفة درس مجاني في HTML for Kids على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في HTML for Kids، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة HTML for Kids 4 دروس في المجموع.
لماذا تُعدّ الشفرة النظيفة مهمة؟
كتابة شفرة نظيفة
مرحبًا بكم في الدرس التالي! سنتعلّم اليوم كيفية كتابة شفرة HTML نظيفة ومقروءة ومنظّمة. تجعل الشفرة النظيفة صفحاتكم أسهل في الإدارة والفهم.
لماذا تُعدّ الشفرة النظيفة مهمة؟
تساعد الشفرة النظيفة على:
- جعل الشفرة أسهل قراءة وفهمًا.
- تقليل الأخطاء ووقت تصحيحها.
- التعاون مع الآخرين بفاعلية أكبر.
لنتعلّم بعض النصائح لكتابة HTML نظيف!
استخدموا المسافات البادئة المناسبة
تنظّم المسافات البادئة الشفرة وتوضّح بنية عناصر HTML. يجب إزاحة كل عنصر متداخل بضع مسافات أو بمقدار علامة تبويب.
مثال:
نصيحة: استخدموا دائمًا مسافات بادئة متسقة!
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
</body>
</html>
أغلقوا جميع الوسوم
تأكّدوا من أن لكل وسم فتح وسمَ إغلاق مقابلًا له. قد يؤدي نسيان إغلاق الوسوم إلى مشكلات في التخطيط.
مثال:
صحيح:
<p>This is a paragraph.</p>
غير صحيح:
<p>This is a paragraph.
استخدموا أسماء ذات معنى
عند استخدام سمتي class أو id، امنحوهما أسماء ذات معنى تصف الغرض منهما.
مثال:
نصيحة: تجنّبوا أسماء مثل div1 أو random123.
<p id="welcome-text">Welcome to my website!</p>
<div class="menu">Menu items go here.</div>
أضيفوا تعليقات
تشرح التعليقات الشفرة وتساعد الآخرين (وتساعدكم أنتم أيضًا!) على فهمها لاحقًا. استخدموا الصيغة <!-- --> للتعليقات.
مثال:
نصيحة: اجعلوا التعليقات قصيرة ومباشرة.
<!-- This is a heading -->
<h1>Welcome to My Page</h1>
<!-- This section contains the navigation menu -->
<div class="menu">
<a href="#home">Home</a>
<a href="#about">About</a>
</div>
استخدموا الوسوم الدلالية
تصف الوسوم الدلالية الغرض من المحتوى. على سبيل المثال:
<header>: للقسم العلوي أو الترويسة.<article>: للمقالات الفردية.<footer>: للقسم السفلي أو التذييل.
مثال:
<header>
<h1>Welcome to My Blog</h1>
</header>
<article>
<h2>First Post</h2>
<p>This is my first blog post.</p>
</article>
<footer>
<p>© 2024 My Blog</p>
</footer>
نظّموا ملفاتكم
حافظوا على تنظيم ملفات HTML وCSS وJavaScript. استخدموا مجلدات مثل:
- images: لجميع الصور.
- css: لملفات CSS.
- js: لملفات JavaScript.
مثال على بنية المجلدات:
project/
├── index.html
├── css/
│ └── styles.css
├── js/
│ └── script.js
└── images/
└── logo.png
مراجعة الشفرة النظيفة
أحسنتم!
تهانينا! لقد تعلّمتم كيفية كتابة شفرة HTML نظيفة ومنظّمة. تجعل الشفرة النظيفة مشاريعكم أسهل في الصيانة والمشاركة. في الدرس التالي، سنستكشف أساسيات إمكانية الوصول لضمان سهولة استخدام صفحات الويب للجميع. استعدّوا لجعل صفحاتكم شاملة!
الأسئلة الشائعة
هل درس «كتابة تعليمات برمجية نظيفة» مجاني؟
نعم — نص درس «كتابة تعليمات برمجية نظيفة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة HTML for Kids، انتقل إلى CoddyKit PRO. تتضمن دورة HTML for Kids 4 دروس في المجموع.
ماذا ستتعلم في «كتابة تعليمات برمجية نظيفة»؟
تعلّم كيفية تنسيق HTML لتحسين سهولة القراءة تتمرن على HTML for Kids مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ HTML for Kids؟
لا تُشترط خبرة سابقة. HTML for Kids على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «كتابة تعليمات برمجية نظيفة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس HTML for Kids هذا؟
نعم. كل درس في HTML for Kids يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- كتابة تعليمات برمجية نظيفة
- أساسيات إمكانية الوصول
- التحقق من صحة HTML
- تعليقات HTML