نصائح مفيدة

كيفية جعل الصورة في رابط الصورة؟ كيفية إدراج رابط في صورة

Pin
Send
Share
Send
Send


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

مثال 1. إنشاء صورة الارتباط

حول ارتباط الصورة ، يتم تلقائيًا إضافة إطار بسمك بكسل واحد ولون مطابق للون ارتباطات النص.

لإزالة الإطار ، قم بتعيين السمة border = "0" على العلامة (مثال 2).

مثال 2. إزالة الإطار حول الصورة

يمكنك أيضًا استخدام CSS لإخفاء الحدود لجميع الصور التي هي روابط. للقيام بذلك ، استخدم خاصية نمط الحدود مع القيمة بلا (مثال 3).

مثال 3. استخدام CSS

تعرّف بنية A IMG سياق تطبيق الأنماط - فقط للعلامة الموجودة داخل الحاوية. لذلك ، يمكن استخدام الصور في المستقبل كالمعتاد.

أين يتم استخدام رابط الصورة؟

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

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

أدخل الرابط في الصورة

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

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

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

نبحث عن عنوان الصورة ، اكتبها حتى لا تنسى. نحن أيضا إصلاح الرابط الذي يجب أن تفتح هذه الصورة.

ثم نكتب ما يلي: الصورة هي رمز خاص. تم تعيين رابط الصورة على وجه التحديد بمساعدته.

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

عمل قائمة من صورة

تم تطوير أول الأساليب بشكل مستقل أثناء دراسة لغة الترميز لصفحات الويب. قد يستغرق إنشاء مثل هذه القائمة بضع ساعات.

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

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

كيف نفعل

دعنا نحلل الطريقة الأولى بمزيد من التفاصيل.

بادئ ذي بدء ، ستحتاج إلى معرفة محرري الرسومات و HTML. كيفية جعل الصورة رابطًا ، سيخبرك هذا النوع الخاص من تخطيط الصفحة.

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

إذا كان هذا هو موقعك الخاص ، فالمعرض أو مكتبة الملفات المعتادة مناسبة ، بالنسبة لـ VKontakte ، يمكن أن يكون ألبومًا لمجموعة أو مجتمع (يُفضل إغلاقه).

بعد ذلك ، يجب عليك قص الصورة إلى أجزاء ، مع التأكد من تذكر الترتيب الذي تذهب به الأجزاء المستلمة. نضع عليها نقوش ونحمّلها على الخادم ، ونكتب روابط لكل رسم توضيحي.

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

لماذا أحتاج إلى إنشاء رابط من صورة

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

مريح ، أعتقد ، نعم! النقر فوق الصور الجميلة أعلى من الضغط على رابط عادي بسيط. في كثير من الأحيان تحت الصور إخفاء الروابط التابعة لها.

ب) إذا كنت مسجلاً في برنامج تابع ، فلديك موقع الويب الخاص بك ، ولم يقدم مالك البرنامج التابع المواد الإعلانية اللازمة. ماذا تفعل في هذه الحالة؟

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

ج) السبب الثالث مشابه للسبب الثاني. أعتقد أنني لن أخبرك سرا أنه بسبب اللافتات ، زاد الحمل على الموقع زيادة كبيرة. بعد كل شيء ، ما هو شعار شخص آخر على موقعك؟

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

على سبيل المثال ، اعتدت أن يكون لدي لافتة ثابتة من شركة معروفة على موقعي. اللافتة كانت جميلة ، مع تغيير الصور باستمرار. ولكن خلاصة القول هي أنه تباطأ حقا وقت التحميل للموقع. وصل وقت التنزيل إلى 50 ثانية. هذا كثير!

بمجرد حذف هذا الشعار ، بدأت مدونتي في التحميل أسرع عدة مرات (بدأ الموقع في التحميل خلال 1.5 ثانية ، وليس 50!)! وهذا يعني أنه يمكنك إنشاء لقطة شاشة لهذا الشعار وإدراج رابط في لقطة الشاشة ولن يكون وقت التحميل سوى بضع ثوانٍ ، ولكن ثانية واحدة! على الرغم من ، بالطبع ، ليست جميلة جدا. لن يتغير ، لكن وقت تحميل الموقع أغلى!

د) أعتقد أنني لن أفاجئ الويب. السادة ، إذا قلت أن بعض المستخدمين لافتات الخاص بك ببساطة لا ترى. في متصفحات هؤلاء الأشخاص ، هناك امتداد "Anti-block" أو "Adguard". هذه الملحقات ببساطة منع الإعلانات. بما في ذلك جزء من لافتات.

إذا كان لديك رابط صورة ، فسوف ترى كتلة مكافحة لافتة مماثلة كصورة عادية ، وليس كتلة. على سبيل المثال ، كان لدي لافتة "صور حية" لبعض الوقت ، ولكن كان هناك عدد قليل من النقرات عليها. في البداية لم أفهم ما كان الأمر ، ثم رأيت أن Adguard يمنعه ببساطة.

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

د) هناك سبب آخر يجعل من الأفضل جعل لافتة من اللافتة مجرد صورة ، وأقول أن محركات البحث ، وخاصة Google ، لا ترغب في رؤية الكثير من الإعلانات على الموقع. وسوف ينظرون إلى صورتك على أنها رابط ، ببساطة كصورة أخرى ، وليس كإعلان. هل هي مريحة؟ أعتقد ذلك! ولكن ، دعنا نعود إلى جوهر سؤالنا.

صنع خريطة الموقع

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

بادئ ذي بدء ، تذكر أن خريطة الموقع متصلة بالصورة باستخدام usemap = "# map1 الأمر ، المكتوب في علامة img. لذلك ، عند تحميل صورة على الموقع ، تأكد من إضافة الجزء الثاني في العلامة - usemap =" # map name ".

يتم إجراء مزيد من العلامات على الصورة في المناطق التي ترتبط بها الروابط باستخدام علامة زوج ، والتي يمكن وضعها في أي مكان مناسب لك بين علامات الزوج

كيفية إدراج صورة - علامات أتش تي أم أل

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

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

من ناحية أخرى ، في تصميم القالب الذي تستخدمه ، تستخدم نفس العناصر أيضًا بنشاط - إدراج الروابط والصور والحاويات والقوائم (المذكورة هنا) ، وأشكال وجداول مختلفة (Tr ، Th ، Td ، Table).

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

لإدراج الصور تعمل علامة img Img على الصفحة. يتم إدراج الصورة أدناه باستخدامه:

تسمح لك سمة Src بتحديد اسم وموقع ملف الصورة (وبمعنى آخر ، المسار إلى ذلك). في هذه الحالة ، قد تتم الإشارة إلى ارتباط نسبي أو مطلق لملف الصورة. يتم تحديد المسارات باستخدام الحرف "/" ، والذي يعمل بمثابة فاصل بين أسماء الدلائل الفرعية التي يتم تخزين ملفات الصور فيها.

سيبدأ المسار المطلق إلى Src بـ http://vash_sait.ru (لمدونتي - https://ktonanovenkogo.ru). علاوة على ذلك ، باستخدام "/" لفصل أسماء المجلدات الفرعية ، يتم كتابة المسار الكامل لملف الصورة ، وينتهي في النهاية باسم الملف وتمديده. على سبيل المثال ، /images/kakvstavitvhtmlssilkuikartinkufoto_9F70C277.jpg

يتم تعيين المسار النسبي في Src عن طريق تحديد المسار النسبي من المجلد المصدر ، والذي يحتوي على ملف مستند HTML نفسه والذي تحاول فتح الصورة منه ، إلى ملف الصورة. إذا كان هذا الملف موجودًا على الخادم في نفس المجلد مثل المستند الذي تم الوصول إليه منه ، فلن تحتاج إلى تحديد المسار إليه - ستحتاج فقط إلى تحديد اسم ملف الرسومات (مع الاحتفاظ بحالة الأحرف).

إذا كان هذا الملف موجودًا على نفس الخادم ، ولكن في دليل مختلف ، يجب عليك تحديد المسار إليه من الدليل حيث يوجد المستند الذي تم الوصول إليه منه (في المثال الموضح أعلاه ، يتم استخدام المسار النسبي - image / finik.jpg) .

اضبط عرض وارتفاع الصورة باستخدام سمات العرض والارتفاع

تتيح لك سمات Html Width و Height ضبط حجم المساحة (العرض والارتفاع ، على التوالي) التي سيتم تخصيصها على الصفحة لهذه الصورة. يتم إدراجها داخل علامة Img ، على سبيل المثال ، مثل هذا:

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

من الأفضل تغيير حجم الصورة أولاً في محرر الرسومات (يمكنك حتى في محرر الصور عبر الإنترنت) ، وبعد ذلك فقط إدراجها في المستند. أيضًا ، عند حفظ ملف رسومي ، يجب الانتباه إلى إجمالي وزنه. لا ينبغي أن يكون كبيرا جدا. في بعض الأحيان يكون من الأفضل التضحية بجودة الصورة قليلاً (الفائدة أنه مع أحجام صغيرة لن يكون عملياً ملحوظًا) لتقليل الوزن النهائي.

عند حفظ الصور ، استخدم تنسيقات الرسومات النقطية المدمجة مثل GIF (لإدراج الصور التخطيطية) أو JPG (لإدراج الصور). العرض والارتفاع ، على عكس سمة Src (العلامة المطلوبة فقط في علامة Img) ، اختياريان. كثيرون ببساطة لا يشيرون إليهم ، لكنهم مع ذلك يسمحون قليلاً تسريع تحميل المستند.

والحقيقة هي أنه إذا لم يعثر المستعرض على Width and Height داخل html لعلامة Img ، فسيستغرق الأمر وقتًا لاكتشاف حجم الصورة ، ثم تحميله ، ثم الاستمرار في تحميل بقية المستند فقط. في حالة تحديد الارتفاع والعرض ، يحتفظ المتصفح تلقائيًا بمكان لصورة الأحجام المشار إليها في هذه السمات ويستمر في تحميل صفحة الويب بشكل أكبر.

إذا كانت ملفات الرسومات المعروضة على هذه الصفحة ثقيلة للغاية وكان هناك الكثير منها ، فإن إدخال الارتفاع والعرض سيتيح للمستخدمين بدء قراءة نص الموقع ، بينما سيظل تحميل الرسومات.

أيضًا ، إذا لم تحدد Width and Height داخل Img ، فقد ينشأ موقف عندما ، مع صورة صغيرة ونص بديل طويل جدًا (تم تعيينه بواسطة سمة Alt في علامة Img ، ستتم مناقشة ذلك أدناه) ، قبل تحميل الرسوم ، سيحدث تحول مؤقتًا تصميم الموقع ل النص البديل الطويل سوف يستغرق مساحة كبيرة كما يحتاج.

إذا تم استخدام العرض والارتفاع ، فسيحدد مكان عرض النص البديل بالأحجام المحددة فيهما. بالنسبة للجزء الأكبر ، ولهذا السبب أحاول أن أكتب هذه السمات في علامة Img.

البديل والعنوان في هتمل علامة img

من وجهة نظر تحسين محرك البحث الداخلي للموقع ، تعد سمات Alt و Title مفيدة للغاية. اقرأ عن الترويج والترويج للموقع بنفسك أو في المنشور "كيفية الترويج للموقع".

يعرّف أولها ما يسمى بالنص البديل للصورة. يمكنك رؤية هذا النص إذا قمت بتعطيل عرض الرسومات في متصفحك. البديل مخصص لهذا الغرض - لإخبار محركات البحث عن نوع الصورة التي يجب أن تكون هنا. يهدف العنوان إلى إعلام المستخدم بمحتوى الصورة.

يتم عرض محتويات العنوان من تكوين علامة Img في سطر منبثق إذا قام المستخدم بنقل الماوس إلى الصورة. تسمح لك هاتان السمتان (إذا قمت بتسجيلهما) بتضمين صور لمشروع الويب الخاص بك في البحث عن صور Yandex و Google Images. لذلك ، لا تهمل هذه الفرصة وتأكد من تسجيل ما لا يقل عن البديل. يجب أن يكون تصميم صورك مثل هذا:

في الواقع ، هناك الكثير من السمات التي يمكن استخدامها في علامة html Img ويمكنك رؤيتها جميعًا على الأقل في الرابط المتاح. ولكن على الأرجح سوف تستخدم في الممارسة العملية فقط تلك المدرجة من قبلي في هذه المقالة.

مرة أخرى ، أذكرك بقواعد كتابة العلامات. بعد قوس الفتح الثلاثي ، بدون فراغ ، يتم كتابة اسمه ، وبعد مسافة ، يكتب اسم السمة الصالحة لها. بعد اسم السمة ، بدون مسافة ، يتم وضع علامة المساواة ويتم كتابة المعلمة في علامات اقتباس (على سبيل المثال ، العرض بالبكسل للعرض).

يتم فصل السمة التالية داخل علامة html عن السمة السابقة بمسافة. يتم وضع قوس الثلاثي إغلاق في النهاية. أوجه انتباهكم إلى حقيقة أن Img ليس زوجًا ، أي ليس لديها علامة إغلاق.

من الناحية المثالية ، ينبغي تصميم شيء من هذا القبيل جميع الصور المستخدمة في مشروع الويب الخاص بك. يمكن تحقيق هذا النوع بدون تحرير كود html يدويًا لكل صورة. تسمح لك برامج التحرير المرئية لمختلف CMS (جملة ، WordPress ، إلخ) بتعيين كل هذه الثروة في واجهة رسومية سهلة الاستخدام ، ولكن بعد الإعداد التجريبي ، تأكد من مراجعة الكود (في أي محرر مرئي يمكنك التبديل إلى عرض كود html الخاص بالمقال).

إنشاء ارتباطات تشعبية باستخدام علامة ارتباط html "A"

الارتباط هو أحد العناصر الرئيسية لتنظيم مستند في Html. بدونها ، ستكون صفحة الويب مجرد صفحة. يتم إنشاؤها باستخدام علامة "أ". السمة الإلزامية هي Href فقط. يقوم بتعيين عنوان URL (المسار) حيث يجب على المستخدم الانتقال بالنقر فوق هذا الارتباط التشعبي.

Ссылка может вести как на внутреннюю страницу вашего же ресурса (очень важный момент внутренней оптимизации связан именно с перелинковкой страниц сайта)), так и на страницу другого проекта. Html тег A является парным и, соответственно, имеет закрывающий элемент. Текст гиперссылки (анкор — тут про него подробно написано в плане способствования SEO продвижению) размещается между открывающим и закрывающим тегами «A».

Поисковые системы анализируют не только сам анкор, но и слова окружающие ее. Это следует учитывать при размещении ссылок на свой сайт на других ресурсах. Для того, чтобы она выглядела более натурально, можно часть текста вынести за пределы анкора, например:

فتح في نافذة جديدة ورابط من الصورة (صورة)

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

الهدف لهذا الغرض يحتوي على معلمة تسمح لك بفتح الصفحة في نافذة جديدة ، والتي تسمى _blank. إذا لم يتم تعيين الهدف في العلامة أ ، فسيتم فتح الرابط في نفس النافذة. مثال على استخدام السمة Target:

يرجى ملاحظة أن ترتيب السمات داخل العلامات لا ينظم بأي شكل من الأشكال. قد تكتب جيدا:

كمرساة لعلامة ارتباط HTML بدلاً من النص الصورة يمكن استخدامها. في هذه الحالة ، Img هي العلامات الافتتاحية والختامية A:

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

يمكن استخدام العنوان في حالة مرساة النص العادي. في هذه الحالة ، ستكون المعلومات المكتوبة فيه مرئية إذا قمت بنقل مؤشر الماوس إلى الارتباط التشعبي. في الواقع ، يمكن استخدام هذه السمة في جميع علامات Html تقريبًا ، ولكن لن يكون هناك فائدة كبيرة لذلك.

إنشاء المراسي وروابط التجزئة

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

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

لتطبيق الطريقة الموضحة لإنشاء ارتباطات تشعبية في مستند Html ، كان عليك أولاً إدراج رابط في المقالة التي سيؤدي إليها ارتباط التجزئة. المرساة عبارة عن هيكل يشبه الرابط المنتظم ، لكن في الوقت نفسه ظل غير مرئي للزائر. بدا مثل هذا:

أي اتضح أن المرساة كانت تتألف فقط من علامة فتح وإغلاق "A" ، في حين أنها لم تحتوي على مرساة وكان لها سمة واحدة مطلوبة NAME. كانت المعلمة من هذه السمة هي التسمية التي اضطررت إلى تعيينها بنفسك. تم استخدام هذه العلامة لاحقًا لإنشاء رابط التجزئة.

الآن هذه هي الطريقة لإدراج المراسي تعتبر عفا عليها الزمن و HTML المدقق سيعتبر خطأ فادح. يرجى الانتباه إلى هذا. الآن يتم تثبيت نقاط الارتساء عن طريق إضافة محدد معرف إلى أقرب علامة.

لنفترض للحصول على عنوان في مقال ، قد يبدو هذا كما يلي:

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

يتم إنشاء الارتباط التشعبي بالطريقة القياسية ، إلا أنه في نهاية عنوان Url ، الموصوف في Href ، يتم وضع علامة الجنيه (علامة حادة أو رمز علامة تجزئة) ، وبعد ذلك يأتي اسم تسمية المرساة الموجودة في المكان المطلوب في نص المقالة.

سيبدو رابط التجزئة مثل هذا:

باستخدام رابط تجزئة ، لن تنتقل فقط إلى الصفحة المرغوبة ، ولكن أيضًا ينتقل المتصفح تلقائيًا إلى المكان الصحيح في النص.

إذا كان المرساة في نفس مستند Html مثل رابط التجزئة ، فيمكن تحديد المرساة فقط.

شاهد الفيديو: طريقة وضع رابط داخل صورة على فيس بوك عند النقر عليه يتم تحويلك الى رابط اخر (يونيو 2020).

Pin
Send
Share
Send
Send