هذا الدرس من الدورة التدريبية: كورس تعلم HTML من الصفر لبناء صفحات ويب
الدرس: تجاوب الموقع على جميع الأجهزة Viewport وتحميل ملفات وتنفيذ أكواد CSS وJavaScript في HTML
المدة: 5 دقائق
وصف مختصر:
وصف الدرس
في تطوير صفحات الويب، من الضروري فهم كيفية استخدام عناصر HTML بشكل صحيح لضمان تجربة مستخدم ممتازة على جميع الأجهزة. في هذا الدرس، سنستعرض كيفية استخدام وسم
viewport، وأهمية تحميل ملفات CSS وJavaScript، وطرق إدراج الأكواد داخل صفحات HTML.ما هو وسم viewport في HTML؟
وسم
viewport في HTML هو جزء من <meta> يستخدم لتحديد كيفية عرض الصفحة على الأجهزة المحمولة. يتأكد هذا الوسم من أن الصفحة تتكيف مع عرض شاشة الجهاز، مما يجعلها استجابية (responsive). بدون هذا الوسم، قد تواجه مشكلة في عرض المحتوى بشكل صحيح على الأجهزة المحمولة.<meta name="viewport" content="width=device-width, initial-scale=1.0">
ما هو وسم style في HTML؟
وسم
<style> يستخدم لكتابة أكواد CSS داخل صفحة HTML. يمكنك تضمين أنماط CSS مباشرة في مستند HTML بدلاً من استخدام ملفات خارجية.<style>
.box {
padding: 20px;
background-color: lightgray;
margin: 10px;
text-align: center;
}
</style>
ما هو وسم link في HTML؟
وسم
<link> يستخدم لربط ملفات CSS خارجية بصفحة HTML. هذا يسمح لك بفصل أنماط CSS عن HTML مما يسهل إدارة الأكواد.<link rel="stylesheet" href="style.css">
ما هو وسم script في HTML؟
وسم
<script> يستخدم لتحميل أو تنفيذ أكواد JavaScript داخل صفحة HTML. يمكن أن يكون الكود مضمنًا مباشرة في الصفحة أو يمكن ربطه بملف خارجي.إدراج أكواد JavaScript مباشرة في الصفحة:
<script>
alert("FROM html file");
</script>
ربط ملف JavaScript خارجي:
<script src="script.js"></script>
كيفية تطبيق الأكواد في صفحة الويب:
تُطبق الأكواد في صفحة الويب بشكل متسلسل، حيث يتم تحميل ملفات CSS أولاً لتنسيق الصفحة، ثم يتم تحميل أكواد JavaScript لتنفيذ وظائف تفاعلية. يكون ترتيب الوسوم في رأس الصفحة (head) مهمًا لضمان تحميل وتطبيق الأنماط والبرمجيات بشكل صحيح.
مثال توضيحي:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Crucial for responsive design -->
<title>Viewport Meta Tag Demonstration</title>
<link rel="stylesheet" href="style.css">
<script>
alert("FROM html file");
</script>
<script src="script.js"></script>
</head>
<body>
<h1>Viewport Meta Tag Test</h1>
<div class="container">
<div class="box">Resize the browser window to see how this box adapts.</div>
<div class="box">On mobile devices, the font size and padding will adjust.</div>
</div>
</body>
</html>
الفيديوهات
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و الفيديوهات
فيديو الدرس التعليمي تجاوب الموقع على جميع الأجهزة Viewport وتحميل ملفات وتنفيذ أكواد CSS وJavaScript في HTML
المصادر
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و المصادر
الأوامر البرمجية الخاصة بهذا الدرس
ملحقات ال PDF
سجل دخول وتأكد من اشتراكك في هذا البرنامج الدراسي للوصول إلى الأدوات والمواد التدريبية و ملحقات ال PDF
ملف الشرح المرجعي لترميز وإعدادات صفحة الويب
- 337 دقيقة من الفيديوهات التفاعلية الحصرية
- 66 مصدر إضافي
- 52 ملحقات PDFs
- 14 فيديو إضافي داخل الدروس
- 28 تطبيق نظري وعملي
- الوصول على جميع الأجهزة
- وصول مدى الحياة
- شهادة أوروبية لإتمام الدراسة
- ا لحصول على شهادة دبلوم موثقة
للوصول إلى الفيديوهات والمصادر والملحقات الدراسية والمواد التعليمية لدراسة برنامج
دورة تدريبية تعلم لغة HTML لبناء مواقع الإنترنت
اضغط هنا ابدأ التعلم
أيضاً عند أداء الاختبارات بنجاح سوف تحصل على الشهادة الأوروبية المعتمدة في إتمام الدراسة والتأهل لطلب الشهادة الدولية في هذا البرنامج
الدروس والاختبارات لتعلم هذه الدورة التدريبية : كورس تعلم HTML من الصفر لبناء صفحات ويب
دورات تدريبية أخرى في برمجة
دورة تدريبية في بناء صفحات الويب المتجاوبة باستخدام Bootstrap
دورة تدريبية في بناء صفحات الويب المتجاوبة باستخدام Bootstrap يقام البرنامج بالتعاون وباعتماد الجهات التالية شهادة موثقة من الجهات الالمانية شهادة معتمدة...
دورة تدريبية في فهم شبكات الإنترنت وخوادم الويب
دورة تدريبية تحتوي على دروس مجانية مدعمة من البورد الأوروبي لفهم أساسيات شبكة الإنترنت والاتصالات بين المستخدمين وتطبيقات الويب والأجهزة
دورة لغة برمجة PHP لبناء صفحات ويب ديناميكية
دورة لغة برمجة PHP لبناء صفحات ويب ديناميكية يقام البرنامج بالتعاون وباعتماد الجهات التالية شهادة موثقة من الجهات الالمانية شهادة معتمدة الوحدة...
مقالات ذات صلة
التحكم في صفحة الويب باستخدام JavaScript: دليل شامل
التحكم في صفحة الويب باستخدام JavaScript: دليل شامل يعد التحكم في صفحة الويب باستخدام JavaScript من الجوانب الأساسية التي تمكن المطورين من...
تطبيق حركات الانيميشن والتحريك ال 3d وخلق اشكال انسيابية للعناصر داخل الصفحة
تطبيق حركات الانيميشن والتحريك الـ 3D في بناء صفحات الويب باستخدام HTML و CSS في عالم تصميم الويب الحديث، أصبحت حركات الانيميشن...
التعامل مع البيانات وواجهة المستخدم باستخدام JavaScript
هل تساءلت يومًا عن كيفية التحكم في البيانات والتفاعل مع واجهة المستخدم في صفحات الويب؟ 🤔 في عالم البرمجة الحديثة، يعد فهم...
