ربط ملفات html مع بعضها وجعل الموقع متجاوب

Youness Tmidi · أمس الساعة 11:52

السلام عليكم كيف أربط ملفات الhtml مع بعضها لأنني أريد جعل الموقع متجاوب وفتحت ملف html جديد لأجل الهاتف لان عناصر الhtml مختلفة قليلا عن الحاسوب و اريد طريقة لكي اربط ملف الhtml للحاسوب مع ملف الhtml للهاتف والسلام عليكم

Mustafa Suleiman · أمس الساعة 13:14

تلك ليست الطريقة الصحيحة، فلا يتم إنشاء كود HTML آخر لمواقع الويب، الصحيح هو تعديل التنسيق ليتناسب مع الشاشات المختلفة من خلال ميزة Media queries في CSS.

أي في نفس ملف CSS الذي قمت بتضمينه في الصفحة، لكن أحيانًا عند وجود الكثير من الأكواد أي التنسيقات اللازم تعديلها نقوم بإنشاء ملف CSS مُنفصل للـ Media queries.

أي تحديد أحجام شاشات معينة ثم تطبيق تنسيق مختلف لكل منها:

@media only screen and (max-width: 1200px){
    /*Tablets [601px -> 1200px]*/
}
@media only screen and (max-width: 600px){
	/*Big smartphones [426px -> 600px]*/
}
@media only screen and (max-width: 425px){
	/*Small smartphones [325px -> 425px]*/
}

وبالطبع لا نقوم بإعادة كتابة كامل التنسيقات للموقع، بل نقوم بتعديل التنسيق قليلاً حسب التصميم ليتناسب مع أحجام الشاشات المختلفة.

ستجد تفصيل هنا:

محمد عاطف17 · منذ 9 ساعة

وعليكم السلام ورحمة الله وبركاته.

لا يمكنك ربط ملفين HTML ببعضهم البعض حيث HTML لا توفر تلك الميزة حاليا حيث لا يمكنك إستخدام include كما تفعل اللغات الأخرى والتي تقوم بتضمين ملفات اخري في الملف الحالي .

ولكن يمكنك توفير ذلك من خلال كود جافاسكريبت :

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#includedContent").load("mobile.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="includedContent"></div>
  </body> 
</html>

لاحظ أننا هنا إستعملنا مكتبة JQuery لتنفيذ ذلك . حيث لاحظ أننا أنشأنا عنصر div وله id معين وبهذا ال id نستطيع تحميل الملف ووضع محتويات الملف به .

ولكن لاحظ أن تلك الطريقة ليست جيدة أبدا حيث هكذا الموقع الخاص بك لن يكون متوافق مع قواعد التصميم المتجاوب Responsive design حيث يجب أن تقوم بتحقيق ذلك من خلال التنسيقات CSS حيث يمكنك CSS من التلاعب بالعنصر في الشاشات المختلفة حيث يمكنك جعل العنصر صغيرا مثلا في الشاشات الصغيرة وفي الشاشات الكبيرة تستطيع تكبير حجمه كما تريد ويمكنك تحقيق ذلك من خلال العديد من الطرق وأهمها طرق Media Query .

ويمكنك قراءة الدروس والمقالات التالية لتستطيع تحقيق ذلك وتعرف كيف تقوم بتطبيقها لديك في الكود :

عبدالباسط ابراهيم · منذ 6 ساعة

يُفضل استخدام صفحة HTML واحدة مع تنسيق CSS ديناميكي باستخدام media queries كما تم التوضيح في التعليقات السابقة بدلاً من فصل المحتوى بين ملفات مختلفة للجهاز الحاسوب والجوال.

ولكن يمكنك استخدام JavaScript لاكتشاف حجم الشاشة وتوجيه المستخدم تلقائياً

<script>
  if (window.innerWidth <= 600) {
    window.location.href = "mobile.html";
  }
</script>

والأفضل معالجة ذلك من جهة الخادم (مثل PHP) لتحليل الـ User Agent وإعادة التوجيه تلقائياً.

ربط ملفات html مع بعضها وجعل الموقع متجاوب

السؤال

Youness Tmidi

3 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

محمد عاطف17

عبدالباسط ابراهيم

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية