-
egypt-code ايجيبت كود
2024/05/04
تصميم موقع html
تصميم موقع html
الفصل الأول: ما هو HTML؟
HTML هي لغة وصفية تُستخدم لإنشاء صفحات الويب. تعمل HTML عن طريق وضع "علامات" (tags) حول أجزاء من المحتوى لتوضيح وظيفتها. يمكن أن تكون العلامة عنصراً هيكلياً (مثل الفقرة أو العنوان) أو عنصراً تفاعلياً (مثل رابط أو زر). على سبيل المثال، يمكن إنشاء عنوان باستخدام العلامة <h1>عنوان</h1>، أو فقرة باستخدام العلامة <p>نص الفقرة</p>.
الفصل الثاني: الهيكل الأساسي لموقع HTML
لبناء موقع HTML، يجب أن نبدأ بتكوين الهيكل الأساسي. الهيكل النموذجي لصفحة HTML يتكون من:
العنصر <!DOCTYPE html>: يشير إلى نوع المستند.
العنصر <html>: يحتوي على كل محتوى الصفحة.
العنصر <head>: يحتوي على معلومات حول الصفحة مثل العنوان والمراجع الخارجية.
العنصر <body>: يحتوي على المحتوى الفعلي للصفحة.
مثال:
html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>عنوان الصفحة</title>
</head>
<body>
<h1>مرحباً بالعالم!</h1>
<p>هذه أول صفحة HTML لي.</p>
</body>
</html>
الفصل الثالث: إضافة الوسائط المتعددة
لجعل موقع HTML أكثر تفاعلاً وجاذبية، يمكن إضافة صور، مقاطع فيديو، أو ملفات صوتية. لإضافة صورة، نستخدم العلامة <img>، ولإضافة فيديو نستخدم <video>، وللصوت نستخدم <audio>.
مثال على إضافة صورة:
html
Copy code
<img src="example.jpg" alt="وصف الصورة">
مثال على إضافة فيديو:
html
Copy code
<video controls>
<source src="example.mp4" type="video/mp4">
متصفحك لا يدعم تشغيل الفيديو.
</video>
الفصل الرابع: الروابط والقوائم
الروابط والقوائم هي عناصر مهمة لأي موقع. لإضافة رابط، نستخدم العلامة <a>. لإضافة قائمة مرتبة أو غير مرتبة، نستخدم العلامات <ol> و <ul> على التوالي.
مثال على إضافة رابط:
html
Copy code
<a href="https://example.com">زر لموقع</a>
مثال على إضافة قائمة مرتبة:
html
Copy code
<ol>
<li>العنصر الأول</li>
<li>العنصر الثاني</li>
<li>العنصر الثالث</li>
</ol>
الفصل الخامس: تنسيق الصفحة باستخدام CSS
CSS، اختصار لـ Cascading Style Sheets، هو لغة تُستخدم لتنسيق صفحات HTML. باستخدام CSS، يمكن تغيير ألوان العناصر، خطوطها، وأحجامها.
مثال على إضافة تنسيق CSS داخلي:
html
Copy code
<style>
body {
background-color: lightblue;
}
h1 {
color: navy;
}
</style>
الفصل السادس: التفاعل باستخدام JavaScript
JavaScript هي لغة برمجة تُستخدم لإضافة التفاعل إلى مواقع الويب. يمكن استخدام JavaScript للقيام بمهام مثل التحقق من المدخلات، تغيير محتوى الصفحة، أو التعامل مع الأحداث.
التعليقات