كيفية إدراج ارتباط تشعبي في HTML؟ إنشاء واستخدام الارتباطات التشعبية في HTML. كيفية جعل الصورة رابطًا في HTML وVKontakte في المنتدى واستخدام صورة CSS كارتباط تشعبي لـ

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

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

كيفية إنشاء رابط في HTML، أمثلة

1. HREF - المسؤول عن المكان الذي يجب أن يؤدي إليه الرابط. يتم تعريف الارتباط القياسي على النحو التالي: نص الارتباط.

2. الهدف - مسؤول عن النافذة التي سيتم فتح المستند فيها. تقصير مستند جديديفتح في نافذة المتصفح الحالية. تتيح لك السمة "الهدف" فتح الرابط في نافذة متصفح جديدة. تحتوي هذه السمة على المعلمات التالية:

• _blank - تحميل الصفحة في نافذة جديدة؛
• _self - يقوم بتحميل الصفحة في النافذة الحالية؛
• _parent - يقوم بتحميل الصفحة في الإطار الأصلي؛
• _top - يلغي كافة الإطارات ويحمل الصفحة في نافذة جديدة.

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

مثال على الارتباط الخارجي

انتقل إلى الموقع

انتقل إلى موقع دروس WordPress المجانية

مثال 4: الصور كروابط.

صورة عينة كرابط

مثال على رابط إلى مكان معين على الصفحة

انتقل إلى النص

نص الصفحة...

في هذا المثال، تم تسمية الصفحة بـ "قائمة" باستخدام سمة "الاسم". سيؤدي الارتباط بهذا التصنيف إلى الانتقال إلى منطقة معينة من الصفحة.

تحميل ملف إرسال البريد الإلكتروني

يمكنك ضبط لون الروابط باستخدام السمات المحددة في علامة "النص" كمعلمات. خذ بعين الاعتبار هذه السمات:

• الرابط - الرابط الذي لم تتم زيارته، يتم عرضه باللون الأزرق افتراضيًا؛
• alink - رابط نشط، أحمر بشكل افتراضي؛
• vlink هو رابط تمت زيارته، باللون الأرجواني بشكل افتراضي.

مثال على ضبط لون الروابط ...

وهكذا، اكتشفنا كيفية إنشاء الروابط في HTML. يمكن تصميم الروابط. يمكنك رؤيته في الدرس بالضغط على الرابط.

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

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

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

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

افتح المفكرة.

نكتب الكود ل لغة أتش تي أم أل. على سبيل المثال، صفحة تحتوي على عدد من الصور.

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

أعلم الآن أن لديك مستندين بتنسيق html، وهما Index.html وprimer.html وأن لديك الآن الحد الأدنى المحدد لمزيد من التعلم.

روابط نصية.

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

كل ذلك مكتوب معًا على النحو التالي:

هنا صوري!!

كما فهمت على الأرجح، فإن primer.html هو اسم مستند html الثاني الخاص بنا، والنقش "إليك صوري!!" هذا جزء من النص من ملف Index.html.

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

هنا صوري!! - يشير هذا الإدخال إلى أنه في الدليل الذي يوجد به مستند html الأول لدينا، يوجد مجلد stranica حيث يوجد ملف primer.html
هنا صوري!! - وهذا يعني أن ملف primer.html موضوع في مستوى أعلى من المستند
هنا صوري!! - الوثيقة موجودة على الموقع www.site.ru..

حسنا، دعونا نحاول؟ فيما يلي مثال لمستندين في وقت واحد يتم فيه تسجيل الروابط التي تشير إلى بعضها البعض.

ملف Index.html:

ربط قطعة من النص





قل لي يا طفلي: في أي أذن طنين؟


في اليمين أم اليسار؟



ملف primer.html:

اتبع الرابط هنا





لكنني لم أخمن! عندي طنين في كلتا الأذنين


حسناً، أنا لا ألعب هكذا...

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

الرابط - لون الرابط.
alink - لون الرابط النشط الذي تم النقر عليه.
vlink - لون الرابط الذي تمت زيارته.

هو مكتوب مثل هذا:

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

ملف Index.html:

قوس المطر



ابحث عن العبارة التي ستساعدك على تذكر أماكن الألوان في قوس قزح.


ر
أ
د
في
ز
أ




ملف primer.html:

قوس المطر




كل
صياد
التمنيات
يعرف
أين
يجلس
التدرج



العودة إلى الصفحة الرئيسية

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

حول الحالة: عند كتابة المسار وأسماء المستندات، تذكر أنه على سبيل المثال: Page.html وpage.html وPAGE.html هي أسماء مستندات مختلفة! الأمر نفسه ينطبق على أسماء الإشارات المرجعية والرسومات. كن دائمًا حساسًا لحالة الأحرف عند كتابة التعليمات البرمجية، فهناك احتمال كبير ألا يتعرف متصفح معين على هذه الأسماء. اجعلها قاعدة لكتابة كل شيء ووصفه بأنه صغير بأحرف لاتينيةعندها سينخفض ​​خطر العامل البشري وأهواء البرامج إلى الصفر.

قاعدة النقر الثلاثة.

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

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

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

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

الشروط § 1. رابط إلى ملف، رابط إلى موقع، رابط إلى صفحة

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

من أجل عدم نشر الفكر على طول الشجرة، سأظهر كل شيء بمثال.

في المتصفح سنرى هذا:

في المتصفح سنرى هذا:

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

§ 2. إنشاء روابط خارجية

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

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

على سبيل المثال، لإنشاء رابط نصي إلى الصفحة الرئيسية لهذا الموقع، عليك كتابة كود HTML التالي:

http://www.seoded.ru/"> الصفحة الرئيسية لموقع الموقع

في المتصفح سيبدو هكذا:

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

§ 2.1 الروابط الرسومية (روابط الصور)

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

وسيظهر المتصفح:

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

الحدود = "0">

الصفحة الرئيسية

§ 3. الروابط الداخلية

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

الاسم = "اسم المرساة"> النص

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

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

كما قلت أعلاه، في سمة href للارتباط الداخلي، بدلاً من العنوان، تتم الإشارة إلى اسم "المرساة" المطلوب بعلامة الجنيه الإلزامية ( # ) أمامه. لنأخذ مثالا.

لقد قمت بإنشاء "مرساة" تسمى zagolovok ووضعتها في كود الصفحة بجوار عنوان هذا الدرس ("الارتباطات التشعبية بتنسيق HTML"). رمز "المرساة" هو كما يلي:

الاسم = "العنوان">

href="#zagolovok">اذهب إلى العنوان

وفي المتصفح هكذا:

إذا لاحظت، بعد النقر على الرابط الداخلي للعنوان، أن عنوان URL الموجود في شريط عنوان المتصفح قد تغير:

إلى العنوان الأصلي:

http://www.html

http://www..html#header

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

§ 4. المراجع المطلقة والنسبية

الصفحة الرئيسية

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

لنفترض أننا بحاجة إلى الارتباط بصفحة klienty.html الموجودة في نفس المجلد الصفحة الرئيسيةموقع. بعد ذلك سيبدو رمز الارتباط النسبي كما يلي:

/clienty.html">العملاء

لنفترض الآن أنه في نفس المجلد الذي به الصفحة الرئيسية يوجد مجلد zakazy وأن صفحة klienty.html موجودة فيه بالفعل، فسيصبح رمز الارتباط النسبي كما يلي:

/zakazy/clienty.html">العملاء

الآن دعونا نلقي نظرة على إنشاء ارتباطات تشعبية تتعلق بالصفحة الأصلية. لنفترض أن لدينا صفحة Price.html (الصفحة الأصلية) ونحتاج منها إلى الارتباط بصفحة klienty.html. هناك الخيارات النموذجية التالية:

1. صفحات Price.html وklienty.html موجودة في نفس المجلد.

clientty.html">العملاء




2. في المجلد الجذر للموقع، توجد صفحة Price.html في المجلد zakazy بمستوى أعلى).

سيصبح الكود هكذا:

../clienty.html">العملاء

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




3. صفحة klienty.html والمجلد zakazy موجودان في المجلد الجذر للموقع، المجلد mebel موجود في المجلد zakazy، صفحة Price.html موجود في المجلد mebel (أي صفحة klienty.html أعلى بمستويين نسبة إلى صفحة Price.html الأصلية).

../../clienty.html">العملاء

أي أنه تتم الإشارة إلى كل مستوى بنقطتين وشرطة مائلة "/".




4. في المجلد الجذر للموقع، توجد صفحة klienty.html في مجلد zakazy (أي أن صفحة klienty.html الآن أقل بمستوى واحد من صفحة Price.html الأصلية).

zakazy/clienty.html">العملاء

في هذه الحالة، لا يتم وضع النقاط والخطوط المائلة.




5. صفحة Price.html (الصفحة الأصلية) ومجلد zakazy موجودان في المجلد الجذر للموقع، ومجلد mebel موجود في مجلد zakazy، وصفحة klienty.html موجود في مجلد mebel (أي الآن klienty.html) الصفحة مرتبطة بالسعر الأصلي. تقع صفحة html على مستويين أدناه).

zakazy/furniture/clienty.html">العملاء




6. يوجد مجلدين في المجلد الجذر للموقع: zakazy وoplata. صفحة klienty.html موجودة في المجلد zakazy، وصفحة Price.html الأصلية موجودة في المجلد oplata (أي أن كلا الصفحتين موجودتان في مجلدات مختلفة بمستوى أقل من المجلد الجذر للموقع).

../zakazy/clienty.html">العملاء

§ 5. الارتباط بالبريد الإلكتروني

لإنشاء رابط لبريد إلكتروني، تحتاج إلى كتابة عنوان بريد إلكتروني باستخدام البروتوكول (mailto:) بدلاً من عنوان URL بقيمة السمة href. وبعد ذلك عند النقر على هذا الرابط، سيتم فتح نافذة برنامج البريدمع إدخال عنوان البريد الإلكتروني في الحقل "إلى". في كود HTML يبدو كما يلي:

ميلتو: [البريد الإلكتروني محمي]">بريدي

وهكذا هو الحال في المتصفح.

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

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

ما هو الارتباط (الارتباط التشعبي).

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

كيفية عمل رابط (ارتباط تشعبي) بلغة HTML على موقع ويب.

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

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

الارتباط المطلق

يتم استخدامها للإشارة إلى مستند على موقع آخر (رابط خارجي).

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

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

على سبيل المثال، سأوضح كيف سيبدو الرابط المؤدي إلى الملف بالنسبة إلى جذر الموقع (فقط قم بقطع كل شيء على يسار الشرطة المائلة الثالثة في رابط مطلق مماثل):

الارتباط النسبي

إلى الرئيسية

نص الارتباط (مرساة)

تعتمد ألوان النص المنبثق ومظهره على الإعدادات فقط نظام التشغيلوالمتصفح.

كيفية فتح رابط في نافذة جديدة.

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

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

1	نافذة جديدة

نافذة جديدة

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

كيفية عمل رابط للبريد الإلكتروني (عنوان البريد الإلكتروني).

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

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

نص العنوان

من المهم كتابة حرف لاتيني في سمة المعرف باعتباره الحرف الأول من اسم المرساة، ثم يمكنك استخدام أي أحرف أخرى مسموح بها.

دعنا، على سبيل المثال، نعود إلى العنوان " "، ثم نواصل.

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

ربط النص بمرساة إشارة مرجعية HTML

أنواع وألوان الارتباطات التشعبية في HTML.

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

يمكنك تغيير لون الارتباطات التشعبية في مستند html باستخدام علامة وسماتها التالية:

• الرابط - لون الروابط التي لم تتم زيارتها.
• Alink - لون الرابط النشط.
• Vlink هو لون الروابط التي تمت زيارتها.

يمكن الجمع بين جميع السمات المذكورة أعلاه:

1

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

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

إذا كانت هذه المقالة مفيدة لك، يرجى النقر على أزرار الشبكات الاجتماعية أدناه. نراكم على الصفحات!

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

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

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

مثال: يمكنك معرفة كيفية تحديد الشعر في Photoshop على //website/adobe-photoshop/kak-vydelit-volosy/

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

يمكنك أن تقرأ عن كيفية اختيار الشعر بشكل صحيح في Photoshop في أحد أعمالي.

على أي حال. نظرية جيدة. الآن دعنا ننتقل إلى التدريب ونرى من هو المسؤول عن كل هذه الأشياء.

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

محرك بحث ياندكس

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

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

ملف التحولات الداخلية في نفس المجلد

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

ملف في مجلد آخر

افتح ملف Pushkin.html في برنامج Notepad++

الآن ابحث عن كلمة photo وقم بتغليفها بالعلامات.

والآن الاهتمام! في قيمة السمة، نكتب المسار المتعلق بالملف الذي يتم تحريره، أي Pushkin.html نفسه. يجب أن يكون لديك شيء من هذا القبيل:

صورة

ماذا فعلنا الآن؟ وقمنا بما يلي: نظرًا لأن المسار إلى الصورة يقع في مجلد img منفصل، والذي يقع في نفس المجلد مثل ملف Pushkin.html، فيجب علينا أولاً كتابة اسم المجلد في قيمة السمة، و ثم من خلال الشرطة المائلة (/) الاسم الكامل للمستند (في الصور في حالتنا).

الآن قم بحفظ وتشغيل ملف Pushkin.html في متصفحك. سترى أن كلمة "صورة" أصبحت مظللة باللون الأزرق وأصبحت قابلة للنقر عليها، مما يعني أنه بالضغط على هذا الرابط سيتم نقلنا إلى ملف fofo.jpg الموجود في مجلد img.

حسنا، كيف؟ كله واضح؟ لا تتردد في السؤال إذا كنت بحاجة إلى أي شيء.

التحولات الخارجية

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

سأدرس للحصول على درجة الماجستير في المشاريع الاجتماعية.

هنا نصل إلى صفحة معينة من موقع معين.

الفتح في نافذة جديدة

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

ستساعدنا السمة المستهدفة ذات القيمة "_blank" في ذلك. لا يوجد شيء معقد هنا. كل ما عليك فعله هو لصق هذا داخل علامة الفتح بعد قيمة السمة href. لنأخذ هذا المقتطف من ملف lukomorye.html، حيث أنشأنا رابطًا لصفحة Pushkin.html، والآن فقط سنكتب هذه السمة بالذات. يجب أن تبدو هذه:

من قصيدة رسلان وليودميلا (المؤلف - أ.س. بوشكين)

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

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

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

مع خالص التقدير، ديمتري كوستين.