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

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

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

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

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

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

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

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

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

اذهب إلى الموقع

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

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

صورة المثال كمرجع

مثال على رابط لموقع محدد على الصفحة

اذهب إلى النص

نص الصفحة...

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

تحميل ملف كتابة رسالة

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

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

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

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

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

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

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

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

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

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

نقوم بحفظها كصفحة html في نفس مجلد العمل حيث يوجد بالفعل المستند الأول الذي أنشأناه. دعنا نسميه primer.html لتجنب الالتباس، وربما نعيد تسمية الأول إلى Index.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#zagolovok

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

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

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

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

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

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

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

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

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

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

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




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

سيبدو الكود كالتالي:

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

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




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

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

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




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

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

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




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

zakazy/mebel/klienty.html">العملاء




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

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

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

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

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

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

مرحبا عزيزي القراء لموقع بلوق! كما تعلم، للترويج لموقع ويب بنجاح وزيادة مكانته في نتائج البحث، من الضروري إجراء تحسين عالي الجودة لتحسين محركات البحث للموقع. يرتبط مفهوم ""، والذي ينقسم بدوره إلى داخلي وخارجي، ارتباطًا وثيقًا بمفاهيم مثل "روابط الموقع الداخلية والخارجية". لذلك، من المهم جدًا بالنسبة لنا معرفة عدد الروابط التي يجب أن تكون في الموقع، وكيفية التحقق من عددها، وكيفية إزالة الروابط غير الضرورية من الموقع وحظرها من الفهرسة، وكيفية زيادة كتلة الارتباط، وما إلى ذلك. للإجابة على كل هذه الأسئلة وغيرها المتعلقة بالروابط الداخلية والخارجية، دعونا أولاً نفهم ما هو الرابط (أو الارتباط التشعبي) في 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 على //site/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 لإنشاء مواقع ويب ومدونات وحتى متاجر عبر الإنترنت احترافية، فتأكد من مشاهدة دورة فيديو ممتازة حول هذا الموضوع. الدروس ممتازة حقًا ويتم إخبارها حقًا للأشخاص الذين لا يزالون على دراية قليلة ببناء مواقع الويب أو ليسوا على دراية بها على الإطلاق.

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

مع أطيب التحيات، ديمتري كوستين.