صفحة البيت | מס טלפון 04 – 6046227 | מס' פקס 04 – 8303539

كود كتابة صفحات المواقع – h t m l

موقع كتابة الكود (1) | (2) | (3) | (4)

v الروابط التشعبية (קישור, Hyperlink)

الروابط التشعبية توجد تقريبا في جميع صفحات الانترنت.

وظيفة الروابط التشعبية تقوم بنقلك من موقع لأخر أو من صفحة لأخرى في نفس الموقع.

مثال لرابط تشعبي يمر من فوقه مؤشر فأرة

وسم الرابط التشعبي - <a> … </a>

مبنى الارتباط التشعبي:

<a href="عنوان"> النص او العنصر الذي يقودنا إلى الانتقال </a>

· تأخذ <a> الخاصية href

(وهي اختصار لجملة , وتعني رابط تشعبي)

تحدد اللاحقة href الوجهة التي نريد من الرابط الذهاب اليها.

· العنوان (url): هو الموضع الذي يتم الانتقال إليه مثل الانتقال إلى موقع معين أو فتح صفحة جديدة او الذهاب إلى مكان محدد ضمن الصفحة الاصلية.

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

أنواع الارتباط التشعبي

ارتباط للانتقال إلى صفحة (في نفس الموقع):

<a href="page2.html"> اضغط هنا للانتقال للصفحة الثانية </a>

ارتباط للانتقال إلى صورة:

<a href="car.jpg"> اضغط هنا للانتقال الصورة </a>

ارتباط للانتقال إلى موقع:

<a href="http://google.com">اضغط هنا للانتقال إلى موقع جوجل </a>

صورة كرابط لموقع:

ارتباط بواسطة صورة، نضغط على صورة (بدلاً من نص) وننتقل إلى ç صفحة أو صورة أو موقع.

مثال:

نضغط على صورة car.jpg

ننتقل إلى موقع cnn.com

<img src="car.jpg">

</a>

مثال:

عند الضغط على صورة pic2 يتم عرض الصورة pic1

<img src="pic2.jpg">

</a>

ارتباط لأرسال بريد (Email)

<a href="mailto:عنوان البريد المطلوب ">نص المعاينة </a>

(إثراء - توسع)

ارتباط لمكان في المستند (קישור לעוגן בדף)

href="#anchorName"

في المكان الهدف نعرف (בנקודת העוגן נגדיר)

الروابط- تمارين

سؤال:

احيطوا الإجابة الصحيحة:

ماذا يعرض (يًظهر) السطر التالي:

a) يعرض رابط للموضوع bmi الذي في موقع ويكبيديا

b) يعرض رابط للموقع bmi لذي يتوجه للموقع ويكبيديا

c) يعرض رابط للموقع bmi وايضاً رابط للموقع ويكبيديا

d) يعرض صور للموقع bmi وايضاً رابط للموقع ويكبيديا

الحل ( b )

سؤال:

بموقع الانترنت التابع لمدرسة "التسامح والتميُّز" قرروا اضافة رابط للموقع:

www.TheOtherIsMe.org.il

إختاروا السطر الملائم لإضافته لكود الاصل لصفحة الموقع.

A.	<link="https://www.TheOtherIsMe.org.il">TheOtherIsMe</link >
B.	<ahref="https://www.TheOtherIsMe.org.il">TheOtherIsMe</ahref>
C.	<a href="https://www.TheOtherIsMe.org.il">TheOtherIsMe</a>
D.	<a link="https://www.TheOtherIsMe.org.il">TheOtherIsMe</a>

الحل ( c )

سؤال:

كتب طلاب موقع نمون من 3 صفحات: p1.html, p2.html, p3.html

أمامكم جزء من كود المصدر التابع للصفحة p1.html أكملوا الجزء الناقص، بحيث:

a) الضغط على النص "الانتقال للصفحة 2" تنتقل للصفحة p2.html

b) الضغط على الصورة pic4.jpg التي تتواجد بنفس المجلد مع p1.html تنقل للصفحة p3.html

<html> <body dir="rtl">

(a) ……………………………………

(b) ……………………………………

</body></html>

الحل:

أ. <a href="p2.html">מעבר לדף 2 </a>

ب. <a href="p3.html"> <img src="pic4.jpg"> </a>

ما هو كود html الصحيح لإنشاء ارتباط تشعبي؟

a) <a url="http://www. majeed1.com "> majeed1 </a>

b) <a> http://www. majeed1.com </a>

c) <a href="http://www.majeed1.com"> majeed1 </a>

d) <a name="http://www. majeed1.com "> majeed1 </a>

الحل ( C )

أي من خصائص (attribute) الوسم تتعلق بعمل رابط:

a) img

b) href

c) src

d) لا توجد اجابة صحيحة

الحل ( b )

أشر إلى الجملة الصحيحة:

a) <a href="https://www.iscore.co.il">iscore</a>

b) <a iscore>pupils grade</a>

c) <a href="iscore">www.iscore.co.il</a>

d) <a>https://www.iscore.co.il</a>

الحل (a)

רוצים שלחיצה על המילה schooly תעביר אותנו לאתר

שכתובתו: www.schooly.org.il

מי מהמשפטים הבאים נכון.

<link="https://www.schooly.org.il"> schooly </link >	1
<a href="https://www.schooly.org.il"> schooly </a>	2
<ahref="https://www.schooly.org.il"> schooly </ahref>	3
<a link="https://www.schooly.org.il"> schooly </a>	4

(פתרון: 2)

לאיזה כתובת מלאה יגיע הגולש אם ילחץ על הקישור Dalya:

Dalyat-El-Carmel

The <a href="about.html"> Druze </a> Village in Israel

א. Druze

ב. about.html

ג. www.Dalyat-El-Carmel.co.il/about.html

ד. Village in Israel

(פתרון: ב )

מה תציג השורה הבאה:

<a href="https://www.animalplanet.com"> www.petfinder.com </a>

הקיפו את התשובה הנכונה:

(א) יוצג קישור לאתר petfinderבאתר animalplanet.

(ב) יוצג קישור לאתר petfinder אשר יפנה לאתר של animalplanet.

(ג) יוצג קישור לאתר petfinder וגם קישור לאתר animalplanet.

(ד) יוצגו תמונות של אתר petfinder וגם קישור לאתר animalplanet.

(פתרון: (ב) )

הקובץ books.html נמצא במחשב שלך בכתובת (כתובת-פיזית):

o d:\library\history\books.html

בקובץ זה נמצא הקישור הבא:

o <a href="../germany.html" > World War I </a>

באיזה תיקיה נמצא הקובץ germany.html

א. d:\library\history\

ב. d:\library\

ג. d:\library\history\books\

ד. d:\

(פתרון: ב )

قم بتعديل الكود واحفظ الملف.

ما هو التغيير الذي حدث؟

ما هي وظيفة:

<a href="https://google.co.il">

serch </a>

..............................................................

هل حصلت على:

Koftan Halaby School
Daliat El Carmel

serch
2016

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

<html>

<title> my first program</title>

<body>

Koftan Halaby School

Daliat El Carmel

<a href="https://google.co.il"> serch </a>

2016

</body>

</html>

تذكر: الوسم لإنشاء رابط:

ادخل الكود التالي واحفظ الملف. على ماذا حصلت؟

النتيجة التي حصلت:

مواقع انترنت

google

walla

<html>

<body dir="rtl">

مواقع انترنت 

<a href="http://www.google.co.il">

Google </a>

 

<a href="http://www.walla.co.il">

Walla </a>

</body>

</html>

ما هي وظيفة الامر:

وظيفة الأمر:

<a href = " ... "> ... </a>

روابط بين الملفات:

مرحلة1:

· افتح ملف جديد.

· احفظ الملف باسم page2.html

الملف يحتوي على الكود التالي في body:

· اغلق الملف.

مرحلة2:

افتح ملف جديد. سجل به الكود المقابل.

احفظ الملف (سمي الملف كما تشاء).

شغل الملف. اضغط على النص

Press here ما هو التغيير الذي حدث؟

<html>

<title> my first program</title>

<body>

Koftan Halaby School

Daliat El Carmel

<a href="page2.html">

Press here </a>

2016

</body>

</html>

تذكر: الوسم لإنشاء رابط ينادي صفحة ويب:

<a href="اسم الملف.html"> النص الذي نضغط عليه </a>

مدرسة قفطان حلبي الإعدادية – دالية الكرمل - Copywrite – 2019