قرار دادن تصویر در صفحه وب(راهنمای html)

8853 تعداد بازدید | یکشنبه 14 تیر ماه 1394

افزودن تصاویر به صفحه وب منجر به افزایش خوانایی صفحه وب می‌گردد. در این بخش یاد می‌گیریم که HTML چگونه باید تصویر را به صفحه وب اضافه کرد. برای این منظور از دستور IMG استفاده می‌شود. بعضی از صفات این دستور در ادامه بحث می‌شود.
صفت ALIGN برای تنظیم تصویر در صفحه بکار می‌رود. مقدار BOTTOM تصویر را در پایین صفحه، مقدار LEFT تصویر را در سمت چپ، مقدار MIDDLE تصویر را در وسط، مقدار RIGHT تصویر را در سمت راست و مقدار TOP تصویر را در بالای صفحه قرار می‌دهد.
صفت ALT متنی را مشخص می‌کند که چنانچه مرورگری نتوانست تصویر را به صفحه بیاورد، آن متن را نمایش دهد. از صفات TITLE و STYLE نیز در این دستور استفاده می‌شود.
صفت HEIGHT ارتفاع تصویر را به پیکسل و صفت WIDTH عرض تصویر را به پیکسل تعیین می‌کند. صفت SCR آدرس URL مربوط به فایل تصویری را مشخص می‌کند که باید به صفحه آورده شود.
با صفت NAME می‌توان برای تصویر نامی انتخاب کرد. مرورگرهای قدیمی فیلد NAME را درک نمی‌کردند. زبانهای اسکریپتی مثل جاوااسکریپت و وی‌بی‌اسکریپت تصاویر را با استفاده از نام آنها دستکاری می‌کنند تا دکمه‌های ترتیب نگهدار را بر روی صفحه ایجاد کنند. دستورات زیر را ببینید (فرض کنید فایلهای نامبرده در این دستورات، بر روی دیسک موجودند):
<IMG SRC = "first.gif" ALT = "load a picture" HEIGHT = "100" WIDTH = "300">
این دستور فایل تصویر first.gif را به صفحه اضافه می‌کند. چنانچه مرورگر نتواند تصویر را انتقال دهد. متن بعد از ALT را چاپ می‌کند. ارتفاع این تصویر برابر با 100 پیکسل و عرض آن برابر با 300 پیکسل است. دستور IMG بطور مشروح در فصل 6 بحث می‌شود.

مثال 1-4
طراحی سایت ساده که شامل چهار پیوند است. با کلیک کردن هر پیوند صفحه دیگری ظاهر می‌شود.

توضیح
برای طراحی این صفحه، چندین فایل به شرح زیر ایجاد شده‌اند:
فایل 4-1.htm. این فایل صفحه اصلی وب را طراحی می‌کند که حاوی 4 پیوند است. پیوندها عبارتند از:

Pascal book
Delphi book
File Structure
C++ book

بر روی هر پیوندی که کلیک شود، توضیحاتی در مورد موضوع پیوند ارائه خواهد شد. در واقع، هر پیوند یک فایل دیگر را اجرا می‌کند که آن فایل حاوی اطلاعات لازم در مورد آن پیوند است (این فایل بر روی دیسک موجود است).
فایل Pascal.htm. این فایل حاوی توضیحاتی راجع‌به زبان پاسکال است. جلد کتاب پاسکال نیز به عنوان بخشی از این صفحه مورد استفاده قرار گرفته است. وقتی پیوند Pascal book کلیک شود، این فایل اجرا می‌گردد (این فایل بر روی دیسک موجود است).
فایل Delphi.htm. این فایل توضیحاتی راجع‌به کتاب Delphi ارائه می‌کند. جلد این کتاب به عنوان بخشی از صفحه است. این فایل وقتی اجرا می‌شود که پیوند Delphi book کلیک شود (این فایل بر روی دیسک موجود است).
فایل Filestru.htm. این فایل حاوی توضیحاتی راجع‌به کتاب ساختار فایلهاست. این فایل وقتی اجرا می‌شود که پیوند File Structure کلیک شود (این فایل بر روی دیسک موجود است).
فایل cpp.htm. این فایل حاوی توضیحاتی راجع‌به زبان C++ است. تصویر جلد کتاب C++ در این فایل قرار دارد و وقتی اجرا می‌شود که پیوند C++ book کلیک شود (این فایل بر روی دیسک موجود است).
چهار فایل گرافیکی. برای اینکه تصاویر جلدهای کتاب در صفحات وب به وجود آیند، جلد کتابها اسکن شده، بر روی دیسک ذخیره شده‌اند: فایل delphi.gif حاوی تصویر جلد کتاب دلفی، فایل pascal.gif حاوی تصویر جلد کتاب پاسکال، فایل Filestru.gif حاوی تصویر جلد کتاب ساختار فایلها و فایل cpp.gif حاوی تصویر جلد کتاب C++ است.
برای ایجاد این صفحه، مراحل زیر را انجام دهید:
1.در ویراستار NotePad دستورات زیر را تایپ گرده به نام 4-1.htm ذخیره کنید.

<HTML>
<BODY ALINK = "RED" LINK = "GREEN" VLINK = "BLUE">
<PRE> <H4>
Welcome to LINKS examples
<HR>
<FONT FACE = "ARIAL" SIZE = "4" COLOR = "BLUE"> select a link to see abook. </FONT>
<A HREF = "A:\PASCAL.HTM"> pascal book </A>
<A HREF = "A:\DELPHI.HTM"> Delphi book </A>
<A HREF = "A:\FILESTRU.HTM"> File structures </A>
<A HREF = "A:\CPP.HTM"> C++ book </A>
</PRE>
</BODY>
</HTML>

2.دستورات زیر را تایپ کرده در فایل delphi.htm ذخیره کنید.

<HTML>
<BODY>
<PRE> <H4>
<IMG SRC = "A:\DELPHI.GIF">
This book offers a relatively complete description
Of the Delphi environment, tools, and language.
I start at the very beginning with a few sample
Programs designed to highlight the programming
environment, give an exhaustive description of
the entire language- followed by an extensive
look at the client/server tools, and wind up with
a lengthy, detailed analysis of many important
advanced techniques. </H4>
</PRE>
</BODY>
</HTML>

3.دستورات زیر را تایپ کرده در فایل pascal.htm ذخیره کنید.

<HTML>
<BODY>
<PRE> <H4>
<IMG SRC = "A:\PASCAL.GIF">
Pascal was designed in the 1968 – 1970 time period by
Niklaus Wirth to overcome many of the deficiencies
of the earlier ALGOL language. It was named after
the French mathematician Blaise Pascal, who developed
a digital calculator in 1642. From the late 1970s
through the late 1980s it was the dominant language
in beginning computer science courses, but C has
recently grown in popularity and seems to be replacing
Pascal as the initial academic programming language. </H4>
</PRE>
</BODY>
</HTML>

4.دستورات زیر را تایپ کرده در فایل Filestru.htm ذخیره کنید.

<HTML>
<BODY>
<PRE> <H4>
<IMG SRC = "A:\FILESTRU.GIF">
File Structure book is about store and retrieve
information on secondary memory. This book translated
by me and Mr.Mehrabi. It describes newest techniques
about this subject. It is an intresting book. </H4>
</PRE>
</BODY>
</HTML>

5.دستورات زیر را تایپ کرده در فایل cpp.htm ذخیره کنید.

C++ is a language derived from C. The major change is the addition of classes and a mechanism for inheriting class objects into other classes.

The design of C++ was guided by three principles:

1.The use of classes would nor result in programs executing any more slowly than programs not using classes.

2.In order to make sure that the addition of classes did not cause other needed features to be omitted, C programs should run as a subset of C++ programs.

3.No run-time inefficiency should be added to thelanguage. </H4></PRE></BODY></HTML>

6.تصاویری را اسکن کرده به نامهای فایلهای تصاویری که قبلاً گفته شد ذخیره کنید.

مقالات مرتبط به طراحی سایت :

قرار دادن تصویر در صفحه وب(راهنمای html)

قرار دادن تصویر در صفحه وب(راهنمای html)

هایبــــــــرد

دنیای تجارت بدون مرز