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

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

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

الصور (images)

· لعرض صورة في صفحة ويب نستخدم الوسم <img>

· مبنى العنصر لعرض صورة في صفحة ويب: <img src="…">

حيث "..." يحتوي على اسم الصورة ونوعها (مثل jpg, png).

· وسم الصورة <img> لا يوجد له وسم إغلاق.

مثال:

<img src="car.jpg">

· src – مصدر الصورة (source)

· هنا نضع اسم الصورة ونوعها والمسار

· (المسار أي الرابط الكامل أو النسبي لملف الصورة في الموقع).

· width - عرض الصورة بالبيكسل (pixel) أو بــ % (اختياري)

· height – ارتفاع (طول) الصورة بالبيكسل (pixel) أو بــ % (اختياري)

· alt – تستخدم اللاحقة alt لتحديد نص بديل في حال لم يتم عرض الصورة.

· align – طريقة محاذاة الصورة، يأخذ القيم: left, right center

أمثلة:

مثال: الصورة boat.jpg متواجدة داخل مجلد images عندها رابط الصورة:

مسائل روابط مع صور (שאלות קישור עם תמונות)

سؤال:

ماذا يعرض السطر التالي، احيطوا الإجابة الصحيحة:

<a href="google1.jpg">

<img src="google2.jpg" alt="google.co.il"/>

</a>

a) رابط من الصورة باسم google1 إلى الصورة باسم google2

b) رابط لموقع جوجل بمصدرين من الروابط: الصورة googl1 والصورة google2

c) رابط من الصورة باسم google2 إلى الصورة باسم google1

d) إضافة صورتين للصفحة HTML

الحل: ( C )

سؤال:

فيما يلي أمر كُتب في صفحة page1.html

<a href="red.html">

<img src="myschool.jpg"/>

</a>

المَلَفّان page1.html وَ- mySchool.jpg محفوظان في نفس المُجَلَّد.

أيّ صورة تُعرَض عند تطبيق هذا الأمر؟

a) الصورة mySchool.jpg ذات إطار بلون red

b) الصورة red.html التي تُوجِّه إلى الصورة mySchool.jpg

c) الصورة mySchool.jpg التي تُوجِّه إلى صفحة الإنترنت red.htm

d) الصورة mySchool.jpg التي تُوجِّه إلى الصورة red.html

الحل: ( C )

سؤال:

مريم وداوود اضافا إلى كود الأصل لهذه الصفحة وسماً لصورة

<img src="picture.jpg">

ونريد ان تكون هذه الصورة رابطاً للموقع www.TheOtherIsMe.org.il

أكملوا الكود التالي:

<a href="https://www.TheOtherIsMe.org.il ">

<img src="picture.jpg">

</a >

سؤال

أكتب الكود الملائم لتنفيذ التالي:

على الشاشة تظهر الصورة mySchool.jpg, التي توجد في الصفحة page1.html.

الضغط على الصورة يؤدي لفتح الصفحة red.html

<a href="http://red.html">

<img src="mySchool.jpg">

</a>

سؤال:

ما هو كود html الصحيح لإدراج صورة؟

a) <img href="image.gif" alt="MyImage">

b) <image src="image.gif" alt="MyImage">

c) <img alt="MyImage">image.gif</img>

d) <img src="image.gif" alt="MyImage">

الحل: ( d )

سؤال:

ما هو كود html الصحيح لإدراج صورة كخلفية للصفحة؟

a) <body style="background-image:url(background.gif)">

b) <background img="background.gif">

c) <body bg="background.gif">

الحل: ( a )

سؤال:

لماذا يتم استخدام خاصية alt في الوسم <img />

أ‌. يحدد ارتفاع الصورة.

ب‌. فقط الضغط على مفتاح Alt سيعرض الصورة.

ت‌. النص الذي يظهر عندما يكون مؤشر الماوس فوق الصورة.

ث‌. يحدد موقع صورة بديلة.

الحل: (ت)

سؤال:

سمة المحاذاة align في الوسم <img /> تستخدم:

أ‌. لمحاذاة الصورة بالنسبة لعرض النافذة.

ب‌. لمحاذاة النص بالنسبة للصورة.

ت‌. لمحاذاة الصورة بالنسبة للنص.

ث‌. لتمدد وشد الصورة لتناسب النافذة.

الحل: (ت)

سؤال:

استخدام خصائص width (العرض) و- height (الارتفاع) ضمن علامة <img />:

أ‌. تقوم بتغيير الحجم الفعلي لملف الصورة.

ب‌. قابل للتطبيق فقط في الحالات التي يتطابق فيها حجم الصورة الفعلية مع الحجم المحدد في هذه الخصائص.

ج‌. يخبر المتصفح ماذا يكون حجم الصورة بالضبط قبل تحميلها.

ح‌. يُترك إطارًا أبيض حول الصورة وفقًا لقيم الخاصية.

الحل: (ج)

سؤال:

قم بعرض الصورة cat.png التي تتواجد في مجلد الصور الذي أسمه images،

أضف للصورة التسمية (כתובית) myCat، بحيث عندما يشير مؤشر الماوس على الصورة،

ستظهر التسمية.

<img src="images/cat.png" title="myCat"/>

سؤال:

أربط الصورة myCat.png مع الصورة caty.jpg

(افترض أنهما في نفس المجلد مع الصفحة)

<a href="caty.jpg">

<img src="myCat.png"/>

</a>

سؤال:

أمامكم عنصر كتب في الصفحة page1.html

<a href="red.html">

<img src = "mySchool.jpg">

</a>

العناصر page1.html و mySchool.jpg محفوظة في نفس المجلد.

ما هي الصورة التي سيتم عرضها عند تطبيق هذه التعليمات؟

أ‌. الصورة mySchool.jpg لديها إطار لونه أحمر.

ب‌. الصورة red.html التي ستشير إلى الصورة mySchool.jpg.

ت‌. الصورة mySchool.jpg التي سوف ترتبط بصفحة الويب red.html.

ث‌. الصورة mySchool.jpg التي سوف ترتبط بالصورة red.html.

الحل: (ت)

سؤال:

يطلب منكم كتابة كود حيث به صورة logo.jpg

سوف تكون رابط للموقع www.schooly.org.il

(النقر على الصورة سوف يأخذنا إلى الموقع schooly)

أكمل الكود المفقود:

<img src="logo.jpg">

</a >

تدريب وتطبيق:

(أ)

قم بحفظ صوره باسم في نفس المجلد الذي تحفظ به ملفات موقعك.

(حمل الصورة من موقع جوجل للصور وتذكر اسم الصورة ونوعها لأنه ستستعمله في الكود التالي).

ادخل الكود التالي واحفظ الملف باسم page3.html

<html>

<head>

<title> my pictures </title>

</head>

<body>

Koftan Halaby School </br>

  <img src="اكتب هنا اسم الصورة ونوعها">

2016

</body>

</html>

(ب)

قم بتعديل الكود إلى التالي:

<img src="picture.jpg" style="text-align: center";>

احفظ الملف. ما هو التغيير الذي حصل؟

هل الصورة ظهرت في وسط الشاشة؟

(ج)

قم بتعديل الكود إلى التالي:

<img src="picture.jpg" width="400" height="50">

احفظ الملف. ما هو التغيير الذي حصل؟

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

width يتحكم بطول الصورة.

Height يتحكم بارتفاع (عرض) الصورة.

(د)

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

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

<html>

<title>

<title> my second program</title>

</title>

<body style="background-image: url('picture.jpg');

background-repeat: repeat">

</body>

</html>

هل الصورة تكررت في الصفحة؟

استبدل الوسم repeat بالوسم no-repeat وشعل الكود.

ما الفرق؟

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

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

الصورة تكررت افقيا.

<html>

<title> my second program</title>

<body style="background-image:url('picture.jpg') ;

background-repeat:repeat-x">

</body>

</html

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

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

الصورة تكررت عاموديا.

<html>

<title> my second program</title>

<body style="background-image:url('picture.jpg');

background-repeat:repeat-y">

</body>

</html>

احفظ صورتين: وليكن اسميهما pic1 و- pic2

اكتب الكود التالي. ماذا حصل؟

بدل من النص الذي نضغط عليه ظهرت صورة pic2. عند الضغط عليها ظهرت pic1

<html>

<body dir="rtl">

مواقع انترنت </br>

<a href="pic1.jpg"> <img src="pic2.jpg"> </a>

</body>

</html>

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