اذهب إلى المحتوى

السؤال

نشر

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

Recommended Posts

  • 0
نشر

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

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

Media-Queries.thumb.png.70fb53b52baca3c203ee189d9289cf16.png

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

@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]*/
}

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

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

 

  • 0
نشر

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

لا يمكنك ربط ملفين 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 .

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

 

  • 0
نشر

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

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

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

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

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...