كيفية توسيط إطار iFrame

نشرت: 2022-04-20

إذا سبق لك إضافة إطار iFrame إلى صفحة ويب ، فأنت تعلم مدى الإحباط الذي تشعر به عندما تجد أن المحتوى لا يظهر بالشكل الذي تريده. من المحتمل أن يفهم أولئك الذين هم على دراية بـ HTML هذا الصراع ، بالإضافة إلى الرغبة في تضمين iFrames في المقام الأول.

إذا لم تكن معتادًا على استخدام إطارات iFrame ، فهي عبارة عن عنصر HTML يعرض المحتوى من صفحة ويب إلى أخرى . ربما تكون قد شاهدت إطار iFrame من قبل أثناء زيارتك لأحد مواقع الويب ، حتى لو لم تكن تعرفه. العديد من إطارات iFrames عبارة عن إعلانات تعرض معلومات من موقع ويب المعلن. يتضمن البعض الآخر مقاطع فيديو ومنشورات وحتى خرائط. سواء كنت تقوم بتحرير HTML طوال الوقت أو كنت بدأت للتو رحلة الترميز الخاصة بك ، فستعلمك هذه المقالة كل ما تحتاج إلى معرفته لتوسيط إطار iFrame.

أولاً ، سنشرح بالتفصيل ماهية إطار iFrame ولماذا قد ترغب في توسيطه. بعد ذلك ، سنغطي بعض الأساسيات حول HTML وكيفية استخدامهم لإطارات iFrame. أخيرًا ، سنوجهك عبر خطوات توسيط iFrame على صفحة الويب الخاصة بك باستخدام سمة المحاذاة.

iframe html

جدول المحتويات

ما هو إطار iFrame؟

iFrame هو المصطلح المختصر للإطار المضمن. الإطارات المضمنة هي عناصر HTML يمكنها عرض عناصر HTML أخرى بالإضافة إلى التعليمات البرمجية من مواقع الويب الأخرى مثل Facebook أو YouTube. وببساطة أكثر ، فإن iFrame عبارة عن نافذة داخل صفحة ويب تتيح لك عرض المحتوى من صفحة ويب أخرى. يمكن أن تكون إطارات iFrame طريقة رائعة لدمج شيء ما في صفحة الويب الخاصة بك بسرعة وسهولة. على الرغم من أنها تتطلب بعض المعرفة بلغة HTML ، إلا أنها يمكن أن تكون طريقة بسيطة للغاية لتحسين صفحة الويب الخاصة بك. يمكن للشركات بشكل خاص الاستفادة من استخدام إطارات iFrames داخل موقعها على الويب. يمكن أن تجعل إطارات iFrame بدلاً من الروابط أو الصور الثابتة موقع الويب الخاص بشركتك يبدو أكثر احترافية. يمكن أن تكون حتى مصدرًا للإيرادات إذا تم استخدامها لعرض إعلانات من شركات أخرى.

يمكن استخدام إطارات iFrames لدمج الإعلانات ومقاطع فيديو YouTube ومنشورات الوسائط الاجتماعية وحتى الخرائط عبر الإنترنت في صفحات الويب. يتضمن استخدام iFrame هذا المحتوى مباشرة على صفحة الويب ، مما يعني أنك لن تضطر إلى تحديث المعلومات باستمرار. بدلاً من ذلك ، سيتم تحديثه تلقائيًا جنبًا إلى جنب مع المواد المصدر. على سبيل المثال ، يتيح استخدام إطار iFrame لتضمين منشور على وسائل التواصل الاجتماعي للقراء إمكانية الوصول إلى المنشور مباشرةً. إذا تم حذف المنشور أو تحريره أو اكتساب تفاعلات جديدة ، فسيعكس إطار iFrame ذلك. قد تتمكن لقطات الشاشة من إظهار بعض المعلومات ، لكنها لن تكون ديناميكية مثل iFrame. لن تتضمن لقطة الشاشة أيضًا رابطًا إلى المحتوى نفسه. في كثير من الأحيان ، يؤدي النقر فوق iFrame إلى نقلك مباشرة إلى مصدره. ومع ذلك ، فإن أحد الجوانب السلبية القليلة لإطار iFrame هو حقيقة أن iFrames قد تفقد الوصول إلى المحتوى إذا تم حذفه.

لماذا أرغب في استخدام iFrame على صفحة الويب الخاصة بي؟

تعمل إطارات iFrame على تحسين المظهر العام لصفحة الويب الخاصة بك من خلال منح المستخدمين إمكانية الوصول إلى المحتوى مباشرةً. على سبيل المثال ، يتم تشغيل مقاطع فيديو YouTube المضمنة باستخدام إطارات iFrame مباشرة على صفحة الويب. ليست هناك حاجة لانتظار صفحة الويب لتتبع ارتباطًا أو البحث عن الفيديو. بهذه الطريقة ، يمكن للقراء مشاهدة مقطع فيديو دون الحاجة إلى مغادرة صفحتك. يمكن أن يؤدي ذلك أيضًا إلى تقليل وقت التحميل من خلال تضمين الفيديو كصفحة داخل صفحتك. يمكن أن يؤثر الوقت المستغرق في تحميل الصفحة بشكل خطير على مقدار حركة المرور التي يحصل عليها موقع الويب .

يمكن أن يوفر تضمين أشياء مثل خرائط Google الاتجاهات بسهولة دون الحاجة إلى البحث عنها. نظرًا لأن إطارات iFrames تصل إلى صفحات الويب الأخرى مباشرةً ، فستظل الاتجاهات محدثة دائمًا. يمكن أن يكون هذا إضافة مفيدة إلى أي صفحة ويب تركز على موقع معين ، مثل مقال عن منطقة جذب سياحي. وبالمثل ، قد ترغب الشركات في تضمين دبوس من عنوانها في خرائط Google على موقعها على الويب. يتيح استخدام iFrame لخرائط Google للزوار خيار سحب الاتجاهات بسرعة من خلال النقر على iFrame.

توسيط إطار iframe

توسيط إطار iFrame

تهدف إطارات iFrames إلى تحسين وظيفة صفحة الويب ومظهرها ، مما يجعل دمجها بشكل صحيح أمرًا مهمًا للغاية. قد يبدو مقطع الفيديو الخاص بك على YouTube أو منشورك على وسائل التواصل الاجتماعي غريبًا إذا لم يتم توسيطه على صفحة ويب. تحتاج الشركات بشكل خاص إلى النظر في مظهر موقع الويب الخاص بها. نظرًا لأن المحتوى يمكن أن يحسن موقع الويب الخاص بك بشكل كبير ، فأنت تريد التأكد من عرضه بشكل صحيح. خلاف ذلك ، قد لا يبدو موقع الويب الخاص بك احترافيًا جدًا أو جيد الصنع. لحسن الحظ ، فإن توسيط إطار iFrame أمر بسيط. كل ما تحتاجه هو معرفة لغة HTML على مستوى السطح.

iFrame HTML

HTML ، أو Hypertext Markup Language ، هي المعلومات التي تخبر متصفح الويب بكيفية عرض صفحة معينة من موقع الويب. يتكون من سلسلة طويلة من التعليمات البرمجية التي يمكن تحريرها وتغييرها عن طريق إضافة أو حذف أقسام من التعليمات البرمجية. تؤثر هذه التغييرات على كيفية عرض صفحة الويب ووظائفها.

يتكون HTML من العلامات والعناصر والسمات. العلامات هي رمز البداية والنهاية حول عنصر. يخبرون متصفح الويب حيث يبدأ العنصر وينتهي. يتيح ذلك التعبير عن العنصر بشكل صحيح وكامل دون أن يضيع بين الكودات الأخرى. العناصر هي الهياكل التي سيتم التعبير عنها في صفحة الويب. على سبيل المثال ، إطارات iFrames هي عنصر HTML. عند وضعه بين علامتين ، سيعرض عنصر iFrame في كود HTML إطار iFrame على موقع الويب الخاص بك. أخيرًا ، تؤثر السمات على كيفية عرض العنصر. يمكن أن تؤثر هذه على الحجم أو الموضع أو حتى تضمين نص مضاف على الصور.

يؤدي تحرير كود HTML لموقع ويب إلى تغيير مظهره ووظيفته. قد يتضمن تحرير HTML محرر HTML مثل NotePad أو KompoZer. في برامج التحرير هذه ، يمكنك إجراء تغييرات على HTML الخاص بك عن طريق تحرير التعليمات البرمجية الخاصة به مباشرةً. هذه طريقة رائعة لإنشاء موقع الويب الخاص بك أو تطويره إذا كنت خبيرًا في التكنولوجيا بشكل خاص. يمنحك تحرير HTML بنفسك القدرة على تضمين الصور وتغيير النص ودمج إطارات iFrames.

كيفية توسيط إطار iframe

استخدام iFrame على موقع الويب الخاص بك

تتمثل الخطوة الأولى لدمج iFrame في موقع الويب الخاص بك في العثور على المحتوى الذي ترغب في عرضه. إذا كنت تريد تضمين مقطع فيديو على YouTube ، فانقر فوق الزر "مشاركة". يجب أن يوفر لك هذا بعض الخيارات لمشاركة الفيديو. انقر فوق الخيار الذي يقول "تضمين" . سيؤدي النقر فوق هذا الزر إلى إظهار نص iFrame HTML الدقيق الذي تريد تضمينه. الآن ، كل ما عليك فعله هو نسخ هذه المعلومات ولصقها في HTML الخاص بك. وبالمثل ، سيكون لمنشورات الوسائط الاجتماعية أيضًا خيارات لتضمين منشور.

بالنسبة لأنواع المحتوى الأخرى ، قد يكون من الأسهل استخدام ارتباط إلى موقع ويب داخل HTML الخاص بك. لدمج هذا النوع من iFrame في موقع الويب الخاص بك ، ابدأ بفتح محرر HTML المفضل لديك. في المحرر الخاص بك ، ابحث عن الرمز الذي تريد إضافة إطار iFrame فيه. ابدأ بكتابة "<iframe src =". تعني كلمة “src” هنا المصدر ، لذا فإن كل ما يلي من المفترض أن يكون مصدر المحتوى المعروض في iFrame. هذا هو المكان الذي تريد نسخ ولصق رابط المحتوى الذي تريد إظهاره. يجب أن يكون الارتباط بين علامتي اقتباس تنتهي حيث ينتهي الارتباط.

بعد قيامك بتضمين المصدر في علامتي الاقتباس ، قم بتضمين الارتفاع والعرض اللذين تريدهما لـ iFrame. عادةً ما يتم قياس ارتفاع وعرض إطار iFrame بالبكسل ، ولكن يمكن أيضًا قياسه بالنسب المئوية. أخيرًا ، أغلق علامة iFrame هذه بكتابة “iFrame>”. إذا قمت بذلك بشكل صحيح ، فيجب أن يكون لديك إطار iFrame ناجح معروضًا على موقع الويب الخاص بك! الآن بعد أن قمت بإنشاء إطار iFrame ، تأكد من توسيطه في صفحتك.

مركز محاذاة iFrame

يعد توسيط إطار iFrame جزءًا مهمًا جدًا من مظهر صفحة الويب الخاصة بك. قد يكون الأمر محبطًا بشكل لا يصدق أن تبذل جهودًا لإنشاء إطار iFrame ، فقط لكي يكون بعيدًا قليلاً. لحسن الحظ ، فإن توسيط إطار iFrame أسهل من إنشاء إطار من البداية! مثل إنشاء iFrame ، يتطلب الأمر تعديل HTML الخاص بك.

افتح محرر HTML الخاص بك وابحث عن إطار iFrame الذي تريد توسيطه. داخل الكود الخاص بإطار iFrame هذا ، اكتب "align = center". سيؤدي هذا إلى إخبار صفحتك بتوسيط إطار iFrame. يمكنك أيضًا توسيط الصورة عن طريق تحرير ارتفاعها وعرضها على الصفحة. مرة أخرى ، يمكن قياسها بالبكسل أو بالنسب المئوية.

يمكنك حتى محاذاة إطار iFrame الخاص بك بشكل مختلف إذا كنت لا تريد أن يتم توسيطه. بدلاً من الوسط ، اكتب "يسار" أو "يمين" أو "أسفل" أو "أعلى" بعد "محاذاة =". سيتم وضع إطار iFrame الخاص بك وفقًا لهذا النص. الأداة المستخدمة لهذا تسمى "السمة المحاذاة". تجعل سمة المحاذاة تغيير موضع إطار iFrame الخاص بك أمرًا سهلاً للغاية. بينما يُعد توسيط إطارات iFrame أمرًا رائعًا للمحتوى المهم ، إلا أن بعض إطارات iFrame مثل تلك المستخدمة لعرض الإعلانات قد تكون مناسبة بشكل أفضل بجانب صفحة الويب.

iframe محاذاة المركز

توسيط إطارات iFrame

تعد إطارات iFrames طريقة رائعة لدمج المحتوى في موقع الويب الخاص بك ، ولكن قد يكون جعله يبدو بشكل صحيح أمرًا صعبًا. ما عليك سوى فتح رمز iFrames وإضافة "align = center" إلى العنصر. يمكنك الآن التحكم بشكل أكبر في كيفية عرض صفحة الويب لمحتواها. يمكن أن يكون المحتوى المعروض في iFrames بمثابة تحسن كبير في المظهر العام لصفحة الويب الخاصة بك ووظيفتها. نظرًا لأن iFrames تعمل كنوافذ في معلومات موقع ويب آخر ، يمكن لصفحة الويب الخاصة بك وضع جميع أنواع المعلومات المهمة في مكان واحد. يمكن إضافة الإعلانات ومقاطع الفيديو والخرائط بسهولة إلى صفحة الويب الخاصة بك من خلال HTML.