آموزش (HTML): تصاویر و پیوند ، نقشه های تصویری

آموزش HTML

Images and links in html

سلام  خدمت همراهان عزیز  یکشنبه ها و پنج شنبه ها  با آموزش زبان برنامه نویسی (HTML) (PHP) همراه شما هستیم. برای اطلاعات بیشتر به مقاله ی هفته ی قبل مراجعه فرمایید .

html

عنوان آموزش امروز زبان برنامه نویسی HTML

تصاویر و پیوند:

همانطور که گفته شد، علاوه بر متن تصویر نیز می تواند در دستور <A> مورد استفاده قرار گیرد و به عنوان پیوند منظور شود. رنگ پیوند تصویر را نیز می توان همانند رنگ پیوند متن در نظر گرفت . ممکن است با انتقال ماوس به تصویری که به عنوان پیوند است ، علامت ماوس تغییر کند. با استفاده از اسکریپتها می توان در دستور <A>، اندازه یا محتویات تصویر را تغییر داد و یک دکمه انیمیشن ایجاد کرد.

 برای مثال :

برنامه ای که با استفاده از پیوند و تصویر، یک دکمه تصویری ایجاد می کند . همانطور که در این برنامه می بینید، یک فایل تصویر به نام َabout.gif باید در دسترس باشد و همچنین باید فایلی به نام about.htm ایجاد کنید که با اجرای پیوند ، متنی را (هرچند ساده) نمایش دهد. تا متوجه شوید که پیوند اجرا شده است . اگر شما تصویر about.gif را ندارید می توانید از هر تصویری استفاده کنید .

<“DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN!> 

<HTML>

<HEAD>

<TITLE> Anchors and images </TITLE>

<HEAD/>

<BODY>

 <B> Same Button with a border </B> <BR>

<“A HREF=”about1.htm> 

<“IMG SRC=”a:\about.gif” ALT=”About Button” Height=”55″ width=”55>

<A/>

<BR> <BR>

 <B> Same Button without a border </B> <BR>

<“A HREF=”about.htm> 

<“IMG SRC=”a:\about.gif” ALT=”About Button” Border=”0″ Height=”55″ width=”55>

<A/>

<BODY/>

<HTML/>

تشریح مثال :

در حالت اول ، صفت BORDER در دستورIMG مشخص نشده است ، به همین دلیل دور تصویر ، کادری رسم شده است و در حالت دوم ، این صفت به صورت BORDER=”0″ مشخص شده است که موجب شد کادری به دور تصویر رسم شود. در این برنامه ، یک اشکال ظریف وجود دارد و آن ، یک خط کوچک آبی رنگ است که در زیر تصویر اولی رسم شده است . علتش این است که بین انتهای دستور <IMG> و <A/> فاصله ای وجود داشته است . این فاصله را ازبین ببرید.

نقشه های تصویری :

می توان کاری کرد که هر ناحیه تصویر ، به عنوان یک پیوند منظور شود و هر کدام به مقصد های گوناگونی مراجعه کنند . این تصویر را نقشه تصویری گویند . به هر یک از ناحیه های تصویر که مثل یک پیوند عمل می کند ، نقطه حساس می گویند . بنابراین ، نقشه تصویری ، تصویری است که شامل چندین نقطه حساس است و موجب می شود URL های گوناگون مورد استفاده قرار گیرند.

دو دسته از نقشه های تصویری عبارتند از نقشه ها ی تصویری کارگزار و نقشه های تصویری کاربر.

در نقشه های تصویری کارگزار ، از مراحل زیر پیروی می شود :

1 کاربر نقطه ای از تصویر را کلیک می کند.

2 مرورگر ، در خواستی را به کارگزار وب می فرستد و URL ، سند مربوط به آن ناحیه کلیک شده را در خواست می کند . مختصات جایی که کلیک شد، به برنامه ای به نام imagemap در کارگزار ارسال می شود که اطلاعات در یافتی را رمز گشایی می کند

3 کار گزار پس از تغییر در خواست اطلاعاتی را ارسال ی کند.

4 پس از دریافت پاسخ ، مرورگر، URL جدید را در خواست می کند.

مفهوم نقشه های تصویری کارگزار ، معایبی دارد. چون نقشه ها وابسته به کارگزار هستند، پردازش آنها چندان سریع نیست .

امتیازهای نقشه های  تصویری کاربر:

در نقشه های تصویری کاربر ، تمام اطلاعات مربوط به نقش کردن ناحیه های تصویری به URL ، فراهم است و دریک فایل HTML قرار دارد .

1 برای تعیین مقصد ، نیاز به تماس با کارگزار نیست.

2 هنگام حرکت ماوس بر روی تصویر ، URL آن نیز می تواند نمایش داده شود .

3 نقشه های تصویری بدون نیاز به کارگزار یا پشتیبانی مدیریت سیستم ، قابل ایجاد هستند.

برگرفته از :

کتاب راهنمای جامع (HTML, BHTML, XML)

دکتر عین الله جعفر نژاد قمی

پاسخ به سوال دوستان :

شاید تاکنون به این فکر کرده باشین که چرا باید برای کسب و کار خود وبسایت داشته باشین ؟

دلیل اینکه می‌گوییم باید سایت داشته باشید این آمار است. توجه کنید که ۸۱٪ از افراد قبل از

تصمیم گیری در مورد خرید و فروش در یک کسب وکار یا خدمات، در اینترنت تحقیق می کنند.

یعنی ۲۵.۹۲ میلیون نفر هستند که مشاغل را به صورت آنلاین جستجو می کنند. با این وجود ۴۶% کسب و کارها فکر می‌کنند نیاز به وب سایت ندارند.

توجه داشته باشید که جهان به سمت دیجیتالی شدن پیش می‌رود و نداشتن وب سایت

برای یک شرکت یا هر کسب و کاری، به منزلۀ جا ماندن از گردونۀ روزگار است.

برای اطلاعات بیشتر با همکاران ما در شرکت آراز پردازش در ارتباط باشید

آدرس ایمیل:  info@arazpardazesh.com

اینستاگرام شرکت:   https://instagram.com/araz_pardazesh_kla

تماس با ما:     https://arazpardazesh.com/contact

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

10 + 16 =