ایران سرفراز- نرم افزار وپروژهای دانشجویی


نرم افزار وپروژهای دانشجویی

آموزش جامع html --قرار دادن تصاویر در اسناد html

 

 

سرپرست تالار نرم افزار وآموزش ها

 

 

 

 

 

 

 

  آموزش جامع html - قسمت دهم - چگونگی قرار دادن تصاویر در صفحات وب

 

--------------------------------------------------------------------------------

 

اهداف این درس

 

1- قرار دادن تصاویر در اسناد html

2-چگونه می توان دور تا دور تصاویر متن قرار داد

3- مشخص کردن ابعاد تصاویر

4- ویرایش عکس و اضافه کردن خصلتی در آن بطوریکه بتواند در مرورگرهایی که از عکس پشتیبانی نمی کنند کارآیی داشته باشند .

 

شروع درس :

 

تگ های HTML برای تصاویر گرافیکی خطی

 

 

 

وقتی که نام فایل gif مانند همان نامی باشد که اسم آن فایل است و در شاخه خاصی قرار گرفته ، در اینصورت مرورگر می تواند آن تصویر را مابین متن ها نشان دهد .

برای اینکه تصویر در خط دیگری وارد شود می توان قبل از تگ تصویر یک تگ پاراگراف قرارداد .

 

 

 

تنظیم محل عکس به وسیله صفتی آورده می شود < IMG > شما می توانید در همجواری عکس و متن کنترل داشته باشید صفت align در تگ < IMG > این امکان را برای شما ایجاد می کند

 

 

 

قرار دادن تصویر در صفحه وب :

 

1- باز کردن محیط کاری

2- باز کردن فایل Lesson1 .html

3- در بالای < h1 / > آموزش از راه دور < h1 > تگ زیر را قرار دهید .

 

 

این قالب HTML در بالای صفحه قرار خواهد گرفت .

4- ذخیره کردن صفحه و بار گزاری مجدد .

تذکر ) در هنگام جاگذاری عکس ممکن است تعجب کنید که چرا در اینجا برای شکسته شدن پاراگراف نیاز به تگ < p > نداشتید . دلیل آن این است که مرورگر در صورت برخورد به تگ < h1 > و < h2 > و ... خود خط ایجاد می کند .

 

صفتALT

 

اگر صفحه وب شما به وسیله کاربری که با مرورگر متنی کار می کند دیده شود در اینصورت تصویر دیده نمی شود یا ممکن است کاربران برای جلوگیری ازاتلاف زمانی که در اثر بارگیری یک عکس در یک شبکه شلوغ پیش می آید از دیدن عکس صرفنظر کرده و بارگذاری را متوقف کنند در این حالت است که صفت ALT در تگ Img مفید خواهد بود . در این صفت توضیحی راجع یه عکس آورده می شود که با نگهداشتن ماوس روس عکس این صفت ظاهر می شود.

 

 

امکان دیگری که شما می توانید در تگ < img > داشته باشید صفات Height و Width می باشد با این دو صفت می توانید ابعاد یک تصویر را مشخص کنید .

< Img src=" filename.gif" width=X height=Y >

X - طول و Y عرض تصویر را مشخص می کند.

شما می توانید از یکسری از برنامه های گرافیکی سودمند برای اینکه این اعداد را تخمین بزنید استفاده کنید. روش دیگر برای پیدا کردن ابعاد عکس این است که شما می توانید آیکون مورد نظر را با Drag and Drap به پنجره مرورگر بکشید و طول و عرض تصویر در Titlebar مرورگر نشان داده می شود .

 

تذکر : ترتیب صفات در تگ < Img > مهم نیست .

 

مروری بر مطالب

 

1- قالب HTML برای تصاویر چیست ؟

2- برای اینکه عکس در یک پاراگراف جداگانه ظاهر شود از چه تگی استفاده می شود ؟

3- چگونه یک عکس را به صفحه خود اضافه می کنید ؟

4- صفات تگ < Img > چیست ؟

 

تمرین

 

در صفحات خود از تصویر استفاده کنید .

 --------------------------------------------------

آیا شما می خواهید یک عکس را به صفحه خود اضافه کنید؟ برای این کار باید از تگ زیر استفاده کنید:

 

<img src="image.gif">

در این تگ IMG نشانه قرار گرفتن تصویر در صفحه و SRC آدرس محل قرار گرفتن فایل عکس است. حتماً لازم نیست این عکس مربوط به سایت شما باشد یا در سرور شما قرار داشته باشد، شما می توانید هر عکسی که در اینترنت قابل دسترسی باشد استفاده کنید (اگر قصد دارید صفحه خود را در یک سایت اینترنتی قرار دهید) . شما می توانید فقط نام فایل را به جای آدرس کامل بنویسید اگر صفحه ای که عکس باید در آن قرار گیرد و خود عکس در یک پوشه قرار داشته باشند.

مثلاً اگر عکس شما در این آدرس قرار دارد http://www.example.com/images/image.gif و صفحه ای که در حال ویرایش آن هستید در پوشه ای غیر از این قرار دارد شما باید تگ زیر را برای اضافه کردن عکس به صفحه خود به کار ببرید:

 

<img src="http://www.example.com/images/image.gif">

اگر فایل html و عکس هر دو در یک پوشه باشند می توانید برای راحتی در تایپ کردن از این تگ استفاده کنید:

 

<img src="image.gif">

پسوند فایل حتماً نباید gif. باشد. یعنی شما می توانید از فرمتی مثل jpg. نیز استفاده کنید. این دو فرمت از بقیه پر استفاده تر هستند. اگر شما عکسی با فرمتی غیر از این دو فرمت دارید می توانید از برنامه های ویرایش عکس از قبیل فتوشاپ برای تبدیل کردن آنها استفاده کنید.

 

برای نمونه من می خواهم یک عکس را با نام learn_html.gif را که در پوشه همین صفحه قرار دارد را به این صفحه اضافه کنم. در اینجا از این تگ استفاده کرده ام:

 

 <img src="learn_html.gif">

با نوشتن این تگ، این تصور را در صفحه نهایی می بینیم:

 

 

 

به این ترتیب یک تصویر را در سمت چپ صفحه خواهیم دید (در صورتی که صفحه ما چپ به راست باشد). اگر می خواهید تصویر در مرکز صفحه ( وسط خط ) قرار گیرد باید از تگ <CENTER> در اطراف تگ تصویر استفاده کنید. مانند زیر:

 

<center>

<img src="learn_html.gif">

</center>

تصویر به دست آمده به صورت زیر است:

 

 

 

روشهای دیگری هم برای نمایش عکس در وسط صفحه وجود دارد که با توجه به کم کاربرد شدن تگ <center> در نسخه چهارم HTML از آنها استفاده می شود. مثلاً می توان از تگ <div> با شناسه "align="center استفاده کرد.

 

به خاطر داشته باشید که آدرس محل عکس و نام آن به حروف کوچک و بزرگ حساس هستند. پس ممکن است اگر به جای image.jpg از IMAGE.JPG استفاده کنید ممکن است مرورگر شما عکسی را در صفحه نشان ندهد. پس در نوشتن آنها دقت کنید.

 

 

 

در مورد اضافه کردن عکسها به صفحه بعداً با جزئیات بیشتری توضیح می دهیم. تا اینجا یاد گرفتیم چگونه یک عکس را به صفحه اضافه کنیم و نحوه قرار گیری آنرا در صفحه تعیین کنیم.

 

--------------------------------------------------

--------------------------------------------------

 

Free Web Hosting | free host | Free Web Space | BlueHost Review

 

 Online Stock Trading!

Need help trading? Tips and Tricks for online stock trading - Click Here

 

    

 

 

 

HTML

 

تاریخچه

 

--------------------------------------------------------------------------------

 

در سال 1992 در دانشگاه مینه سوتا سیستمی به نام web به وجود آمد که دارای دو ویژگی خاص بود.

 

Graphic, Multi Media

 

Hyper Text (فقط کلیک کردن و در سایت حرکت کردن )

 

صفحات این سیستم توسط برنامه ای به نام HTML ساخته شد.

 

همچنین برای رد و بدل کردن اطلاعات:

 

(HTTP(Hyper Text Transfer Protocol

 

HTML Web page

 

HTML یک text عادی و در حقیقت زبانی برای مارک کردن فایلهای text به یکدیگر می باشد که آن را با TAG مشخص کرده و به صورت <tag name> می نویسند.

فرمت کلی یک فایل HTML:

 

--------------------------------------------------------------------------------

 

یک فایل HTML از دو بخش Body و Head ،تشکیل می شود. شکل ساده یک فایل HTML به صورت زیر است.

 

<HTML>

 

<HEAD>

<TITLE> This is the title</TITLE>

<HEAD/>

 

<BODY>

This is the the body

<BODY/>

 

<HTML/>

 

 

--------------------------------------------------------------------------------

 

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

 

تگ HEAD

در برچسب HEAD از برچسب به نامهای TITLE و BASE و META استفاده می شود.

 

 

<HEAD>

 

<TITLE> </TITLE>

 

<META > </META >

 

<BASE >

 

<HEAD/>

 

 

TITLE:

برای تعیین لقب صفحه (چیزی که در قسمت Status Bar دیده می شود).

 

META:

1) برای تعیین نام و منبعی که برنامه توسط آن نوشته شده.

 

2) بهنگام کردن صفحات web توسط این برچسب انجام می شود.

 

3) انتقال به یک صفحه دیگر web در زمان معیین.

 

مثال برای حالت اول: در این حالت برای وارد کردن آدرس web خودمان به موتورهای جستجو در web (مثل yahoo و google و ...) از META استفاده می کنیم:

 

 

<META name="keyword"{اجباری} content="Hedayat, students,zahiri,yaghoubi,schoolnet")>

<META name="description"{اجباری} content="This is Hedayat high school">

 

 

مثال برای حالت دوم و سوم:

 

<META name="vali"{دلخواه} http_equiv="refresh" content="زمان بر حسب ثانیه">

 

با این برچسب صفحه web بعد از 1 دقیقه بهنگام (refresh) خواهد شد.

 

در مثال بالا اگر در قسمت content به صورت زیر عمل کنیم صفحه web بعد از 60 ثانیه به www.schoolnet.ir خواهد رفت:

 

Content="60; URL= http://www.schoolnet.ir"

 

BASE:

برای مشخص کردن مبدا آدرس دهی از صفحات web می باشد.

 

<BASE href="آدرس">

 

 <BASE href="http://www.schoolnet.ir/~zahiri/index.htm">

 

نکته مهم: در برنامه نویسی HTML برچسب ها به دو صورت با پایان و بی پایان نوشته می شوند.

 

<TAG>?????????????</TAG>  با پایان

<TAG> بی پایان  

تگ BODY

قسمت دوم یک فایل HTML را Body تشکیل می دهد که دارای Attributeهای زیر می باشد.

 

 

<BODY  bgcolor = ?رنگ پس زمینه صفحه?

background = ?آدرس عکسی که به عنوان پس زمینه در صفحه وب قرار می گیرد. ?

topmargin = ?یک فضای خالی بالای صفحه بر حسب پیکسل ایجاد ما کند?

leftmargin = ?یک فضای خالی سمت چپ صفحه بر حسب پیکسل ایجاد ما کند?

text ="color? رنگ متن را مشخص می کند

link = ?color?

alink = ?color? (active link)

vlink = ?color? (visited link)>

 

نکته مهم: در برنامه HTML و در نوشتن تگها بزرگ و یا کوچک نوشتن حروف هیچ تاثیری ندارد.

 

Font:

با این برچسب می توانیم مشخصات متن را به دلخواه خود درآوریم و فرمت کلی آن به صورت زیر است.

 

<FONT> ........</FONT>

 

این تگ دارای Attributeهای زیر می باشد:

 

color: رنگ متن

size: اندازه متن

face: نوع متن

مثال: می خواهیم کلمه Schoolnet را با فونت نازنین و با اندازه normal و رنگ آبی بنویسیم.

 

<HTML>

 

<HEAD>

</HEAD>

 

<BODY>

<FONT size = "3" color ="blue"> Schoolnet </FONT>

</BODY>

 

</HTML>

 

 

--------------------------------------------------------------------------------

 

همانطور که می بینید متن ما به رنگ آبی درآمده و اندازه آن نیز 3 شده است.

 

 

--------------------------------------------------------------------------------

 

 

نکته: اگر بخواهیم اندازه را نسبی مشخص کنیم یعنی نسبت به آنچه که قبلا بوده به صورت زیر عمل می کنیم:

 

Size = +2

 

BOLD:

اول و آخر متن مورد نظر قرار گرفته و آنرا Bold می کند.

 

<B> text ? </B>

 

ITALIC:

اول و آخر متن مورد نظر قرار گرفته و آنرا Italic می کند.

 

<I> text ? </I>

 

UNDERLINE:

اول و آخر متن مورد نظر قرار گرفته و آنرا Underline می کند.

 

<U> text ? </U>

 

 

 

ANCHOR:

در HTML بوسیله تگ <a> ? </a> می توانیم یک متن یا عکس را به صفحه ای دیگر پیوند دهیم (Hyper link).مهمترین Attribute در این تگ، href می باشد.

 

فرمت کلی این تگ به صورت زیر است.

 

<a href = ?URL?> text/image </a>

 

مثال: در جمله click here to go to zahiri home  page کلمه zahiri را به آدرس index.html لینک کنیم:

 

<BODY>

 

<p>

click here to go to

<a href ="http://www.schoolnet.ir"> schoolnet </a>

home page

</p>

 

</BODY>

 

 

--------------------------------------------------------------------------------

 

همانطور که می بینید کلمه مورد نظر  به آدرسی که می خواهیم ، لینک شده است

 

 

--------------------------------------------------------------------------------

 

تگهایی که به وسیله آنها متن را فرم بندی می کنیم:

 

PARAGRAPH

<P> ? </P>: در این تگ همه موضوعات آن در یک خط نوشته شده یا یک پاراگراف ایجاد می شود که در صورت بوجود آمدن پاراگراف در زیر خط اول، خط دوم را با فاصله زیاد می نویسد.برای حل این مشکل از تگ <BR> استفاده می کنیم.

تگ <P> دارای یک Attribute است:

 

 

<A align="left/center/right">

 

 

 

 

BREAK

<BR>: این تگ از تگهایی است که پایان ندارد و آن را هر کجا که قرار دهیم کلمه بعدی را در یک خط پائین تر ولی با کمتر می نویسد.

 

NO BREAK

<NOBR> ? </NOBR>: اگر بخواهیم در آخر خط شکستگی نداشته باشیم بین دو بخشی که شکسته می شود از این تگ استفاده می کنیم.

 

مثال: <NOBR>a2</NOBR>

 

a, 2 را هرگز از هم جدا نمی کند.

 

HEADING

 

در HTML دارای شش نوع HEADING هستیم.

 

 

<H1> ? </H1> بزرگترین

<H2> ? </H2>

.

.

<H6> ? </H6> کوچکترین

 

 

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

 

مثال: <H2 align=?center?> vali </H2>

 

HR

تگ <HR> برای ما تک خط افقی سه بعدی ایجاد می کند و دارای Attributeهای زیر می باشد.

 

<HR align="left/center/right" width=?طول خط بر حسب پیکسل یا درصد?

size=?ضخامت خط بر حسب پیکسل?

noshade: با نوشتن این کلمه خط سه بعدی نمی شود .

color=?رنگ خط?>

 

PRE

در HTML هر چیزی را که بین تگ <PRE> ? </PRE> به هر صورتی که بنویسیم با همان شکل در صفحه وب نشان می دهد.

مثال:

 

 

<PRE> Vali

Ali ?

Reza a b cd

</PRE>

 

 

--------------------------------------------------------------------------------

 

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

 

 

--------------------------------------------------------------------------------

 

DIV:

برای ما یک بلوک در متن ایجاد می کند.

 

 

مثال:<DIV style="color: red"> ? ? </DIV>

 

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

 

<DIV dir="rtl/ltr"> ? ? </DIV>

rtl= right to left

ltr= left to right

 

از Attributeهای این تگ خاصیت align می باشد:

 

<DIV align=?left/center/right?> ? ? </DIV>

 

در قدیم از تگهای دیگری نیز برای ویرایش متن استفاده می کردند که اکنون بیشتر آنها منسوخ شده اند واستفاده ای ندارند.

در زیر به برخی از آنها اشاره می کنیم:

<em> ? </em>: دقیقا کار تگ <I> ? </I> را می کند ولی نشان می دهد که از نظر منطقی تاکیدی روی متن می باشد.

<strong> ? </strong>: دقیقا کار تگ <B> ? </B> را انجام می دهد.

<cite> ? </cite>: برای نوشتن اسم مقاله یا کتاب ( آنرا italic می کند)

<code> ? </code>: برای نوشتن قطعه برنامه از آن استفاده می شود. (با خط Mono Scape )

<kbd> ? </kbd>: ورودی های برنامه را با این تگ می نوشته اند.(M.S)

<samp> ? </samp>: برای نوشتن مثال از این تگ استفاده می شده.(M.S)

<var> ? </var>:متغییرها را Italic می کند.

<tt> ? </tt>: متن را Mono Scape می کند.( یک نوع Font است.)

<strike> ? </strike>: یک خط وسط متن داخل خود می کشد.

 

 

<STRIKE> abc </STRIKE>

 

 

--------------------------------------------------------------------------------

 

<blockquote> ? </blockquote>:

<big> ? </big>: متن که بین آن باشد یک فونت درشتتر می نویسد.

<small> ? </small>: متن که بین آن باشد یک فونت کوچکتر می نویسد.

برای درست کردن توان و اندیس دو تگ داریم.

مثال: برای توشتن و از دو تگ زیر استفاده می کنیم.

 

 

a<SUB> 1 </SUB>

a<SUP> 20 </SUP>

 

 

--------------------------------------------------------------------------------

 

<blink> ? </blink>: این تگ فقط در NetScape کار می کند. متن یا عکس که داخل این تگ قرار می گیرد در صفحه چشمک می زند.

 

 

 

قرار دادن یک تصویر بر روی صفحه:

 

--------------------------------------------------------------------------------

 

Image

<IMG>: برای قرار دادن یک تصویر در web از این تگ استفاده می کنیم.

به چند دلیل نباید از تگ image زیاد استفاده کرد.

 

 

1- به علت زیاد شدن تعداد عکسها صفحه دیر load می شود.

2- ایجاد مشکل در Search Engine.

3- عدم قابل استفاده بودن برای همه(عدم سرعت کافی، هزینه دار بودن برای user و ... )

 

 

طرز قرار دادن عکس:

 

 

<IMG src="آدرس فایل تصویر را در این قسمت می نویسیم"

align="left/middle/right/top/bottom"

height="ارتفاع عکس بر حسب پیکسل"

width="طول عکس بر حسب پیکسل"

alt=" "

 

 

هر چیزی که در این قسمت بنویسیم قبل از loadشدن تصویر و یا بعد از کامل شدن صفحه اگر موس را روی عکس ببریم این متن دیده خواهد شد.(در یک مستطیل زرد رنگ)"

 

border=?ضخامت جدول دور عکس را بر حسب پیکسل نشان می دهد?

hspace=?فاصله عمودی دور تصویر بر حسب پیکسل?

vspace=?فاصله افقی دور تصویر بر حسب پیکسل?>

 

 

 

مثال:<img border="3" src="../Zahiri/email/zahiri.jpg" width="111" height="137" align="center" hscape="10" vscape="10" alt="This is Zahiri's picture">

 

 

--------------------------------------------------------------------------------

 

سوال: برای لینک کردن یک عکس چه کاری را باید انجام دهیم؟

جواب:

 

 <A href="URL" ><IMG src="URL"></a>

 

آشنایی با Image map:

 

--------------------------------------------------------------------------------

 

 

در بسیاری از مواقع در یک صفحه وب مجبوریم قسمتی از یک عکس را به صفحه ای لینک کنیم. برای این کار در html از Image Map استفاده می کنیم.

مثال: می خواهیم در t1.gif در منطقه یکی دایره و دیگری چهارگوش را به صفحه ای دیگر لینک کنیم:

 

 

<MAP name="Zahiri" >

<AREA shape="circle" coord="50,50,30" href="1.htm">

<AREA shape="rect" cords-"100,70,130,100"  href="2.htm">

</MAP>

?

<IMG src="t1.gif"  usemap="#Zahiri">

 

 

در Image Map یک سری ناحیه به وسیله <AREA> تعریف می کنیم و می گوییم که باید لینک شود و سپس آنرا وارد یک Image می کنیم.

یک نوع دیگر برای تعیین Area وجود دارد که روش چند ضلعی است:

 

 

<AREA shape=?poly? coord=?x1,y1,x2,y2,?? href=?3.htm?>

 

اگر در<AREA>، نوع Shape را تعریف نکنیم مقدار default آن یعنی rect در آن قرار می گیرد.

 

 

 

interlink(لینک داخلی)

 

برای درست کردن لینکهای داخلی دو روش داریم.

1- ایجاد flag با استفاده از تگ <A>

2- اسم گذاری عناصر موجود در صفحه با استفازه از headingها

 

 

مثال: می خواهیم جمله go to Hamed در بالای صفحه مقابل را به کلمه Hamed در وسط صفحه لینک کنیم.

 

 

1- روش flag:

 

 

<HTML>

<BODY>

<A href=?#2?> go to Hamed</A>

?

<A name=?2?> Hamed </A>

?

</BODY>

</HTML>

 

که در  اینجا می توانید نتیجه را ببینید.

 

2- روش اسم گذاری

 

 

<HTML>

<BODY>

<A href="vali"> go to middle </a>

?

<H2 id="vali"> middle </H2>

</BODY>

</HTML>

 

در حالت اول می توانیم middle را به بالای صفحه لینک کنیم ولی در حالت دوم این امر امکان پذیر نیست برای این کار در حالت اول:

 

 

<A name="vali"  href="آدرس صفحه"> middle </A>

 

 

 

طرز ایجاد لیست در HTML:

 

--------------------------------------------------------------------------------

 

 

برای ایجاد لیست در html دو روش داریم:

1- Ordered list لیست منظم

2- Unordered list: لیست نامنظم

 

1- Ordered List:

برای درست کردن یک لیست منظم به روش زیر عمل می کنیم.

 

 

<OL>

<LH> vali </LH>

<LI> V </LI>

<LI> A </LI>

<LI> L </LI>

<LI> I </LI>

</OL>

 

تگ <OL> دارای سه Attribute می باشد:

 

 

a) Compact :لیست را فشرده تر نشان می دهد

b) Type:"A/a/I/i"

 

 

در حالت عادی شماره ها عدد می باشد اما می تواند حروف الفبا یا حروف یونانی باشد.

A: حروف الفبای انگلیسی بزرگ

a: حروف الفبای انگلیسی کوچک

I: اعداد یونانی با تایپ بزرگ

i: اعداد یونانی با تایپ کوچک

اگر این Attribute را ننویسیم لیست را با اعداد انگلیسی می نویسد.

 

c) start=? ?

 

از هر عدد یا حرفی که داخل آن قرار بدهیم از همانجا شروع به شماره گذاری می کند.

2- Unordered List:

برای درست کردن یک لیست نامرتب (بدون شماره گذاری) از این تگ استفاده می کنیم.

 

 

<UL>

<LH> ? ? </LH>

<LH> ? ? </LH>

?

<LH> ? ? </LH>

</UL>

 

این تگ دارای یک Attribute است که برای تعیین نوع شکلی که در ابتدای هر خط قرار می گیرد از آن استفاده می کنیم.

 

 

<UL type=?circle/disc/square? >

?

</UL>

 

 

نکته: اگر بخواهیم عکس خاصی را در UL قرار دهیم:

 

 

<UL>

<IMG src="آدرس فایل"><br>

 

 

جدولها:

<table> ? </table>: هر جدول از سطر و ستون تشکیل می شود.

به طور دقیقتر هد حدول n سطر دارد که هر سطر در داخل خود m سلول خواهد داشت.

سطرها را با <tr> ? </tr> هر سلول را با <td> ? </td> مشخص می کنیم.

مثال: یک جدول 2*2:

 

 

<TABLE>

<TR>

<TD> ? </TD>

<TD> ? </TD>

</TR>

<TR>

<TD> ? </TD>

<TD> ? </TD>

</TR>

</TABLE>

 

 

هر چیزی که داخل <td> بنویسیم در داخل آن خانه (سلول) جدول قرار می گیرد.

نکته مهم این است که نباید بین دو <td> ? </td> خالی باشد.

اگر بخواهیم در داخل این خانه جدول چیزی نباشد ولی دیده شود، باید از یک فاصله (&nbsp;) استفاده کنیم.

Attributeهای <table> عبارتند از:

 

 

<TABLE

bgcolor="رنگ پس زمینه جدول" 

background="عکس پس زمینه جدول"

border="حاشیه دور جدول"

align="left/center/right"

width="ظول جدول(پیکسل یا درصد)"

height="ارتفاع جدول(پیکسل یا درصد)"

bordercolor="تگ حاشیه دور جدول"

valign="top/middle/bottom"

cellpadding="فاصله متن از دیواره سلول"

cellspacing="فاصله سلولها از هم"

               >

 

attributeهای هر cell:

 

 

width=" "

 

height=" "

 

bgcolor=" "

 

background=" "

 

border=" "

 

nowrap

 

rowspan=" "

 

colspan=" "

 

nowrap: محتویات داخل سلول همه دریک خط نوشته می شود و دیگر سلول شکسته شده و به خط بعدی نمی رود.

مثال 1:

 

 

<TD colspan="2"> ? </TD>

 

مثال 2:

 

 

 

<TD rowspan="2"> ? </TD>

 

در rowspan یا colspan تعداد سلولهایی را که می خواهیم در هم ادغام کنیم را بنویسیم.

باید توجه کنیم که به همان تعداد که سلول در هم ادغام می کنیم باید از پائین سلولهای اضافی را حذف کنیم.

مثلا در مثال 1:

 

 

 

<TABLE>

<TR>

<TD> ? </TD>

<TD> ? </TD>

</TR>

<TR>

<TD> ? </TD>

<TD> ? </TD>

</TR>

</TABLE> <TABLE>

<TR>

<TD colspan=?2?> ? </TD>

</TR>

<TR>

<TD> ? </TD>

<TD> ? </TD>

</TR>

</TABLE>

 

 

 

فریم بندی در html:

 

--------------------------------------------------------------------------------

 

 

فریم بندی صفحات html یعنی اینکه صفحه را به چند قسمت تقسیم کرده و برای هر قسمت یک صفحه html یا ASP یا PHP جایگزین می کنیم.

برای معرفی یک صفحه فریمی از <FRAMESET> ? </FRAMESET> استفاده می کنیم.

مثال: می خواهیم صفحه فریمی زیر را که از دو ستون تشکیل شده را طراحی کنیم.

 

 

<HTML>

<HEAD>

<TITLE> frames </TITLE>

</HEAD>

<FRAMESET cols="200,*">

<FRAME src="menu.htm">

<FRAME src="welcome.htm">

</FRAMESET>

</HTML>

 

cols=" " =ستونی

 

 

1- می خواهیم صفحات را به صورت ستونی در کنار یکدیگر قرار دهیم.

2- درون " "=cols باید نسبت صفحاتی را که می خواهیم درون صفحه فریمی جا بگیرد را معرفی کنیم. در مثال به صورت زیر نوشته شد.

 

 

<FRAMESET cols="200,*" >

 

یعنی ما می خواهیم دو صفحه را در کنار هم قرار دهیم که اولی 200 پیکسل و صفحه دوم بقیه طول صفحه را در بر خواهد گرفت.

اگر بخواهیم صفحه ها به صورت مثلا مساوی قسمت شوند:

 

 

<FRAMESET cols="*, *" >

یا

<FRAMESET cols="50%,50%" >

 

 

اگر بخواهیم صفحه ها را به صورت سطری در کنار یکدیگر قرار دهیم به صورت زیر استفاده می کنیم:

 

 

<FRAMESET rows=" ">

 

 

نکته مهم:در فایلهای html یا باید frameset داشته باشیم یا body و نمی توانیم هر دو را با هم داشته باشیم.

 

Attributeهای فریم:

 

 

<FRAME

src=" " 

frameborder="yes/no/3d"

marginwidth=" "

marginheight=" " فضای دور هر فریم

noresize

scrolling="yes/no/auto">

 

 

اسم گذاری برای هر فریم و برای مراجعه به این صفحه باید <" "=name> حتما از این اسم استفاده کرد.

مثال:

یک صفحه فریمی به صورت زیر داریم و می خواهیم user با کلیک کردن روی student صفحه ای را ببیند که به جای welcome باز می شود و همچنین برای کلمه grads:

 

 

 

 

 

 

 

 

 

 

برای ساختن این صفحه فریمی باید از قبل تمام صفحات را ساخته باشیم:

 

 

1- menu.htm

2- welcome.htm

3- student.htm

4- grads.htm

 

menu.htm

<HTML>

<BODY>

<A href="student.htm" target="reza"> student </A>

<A href="grads.htm" target="reza"> grads</A>

</BODY>

</HTML>

 

این targetها همان اسم فریمها هستند برای اینکه با کلیک کردن روی grads صفحه مربوطه به جای صفحه welcome.htm باز شود باید از target استفاده کنیم.

در جلوی target اسم آن صفحه فریمی را که می خواهیم صفحه ما در آنجا باز شود را می نویسیم.

 

 

 

welcome.htm

<HTML>

<BODY>

Welcome to my home page

</BODY>

</HTML>

student.htm

<HTML>

<BODY>

this is student home page

</BODY>

</HTML>

grads.htm

<HTML>

<BODY>

Here is the grads home page.

</BODY>

</HTML>

 

 

بعد از ساختن این صفحات حال باید صفحه فریمی اصلی را بسازیم:

 

 

<HTML>

<HEAD> <TITLE> welcome to this frame page. </TITLE>

</HEAD>

<FRAMSESET cols=?200, *? >

<FRAME src=?menu.htm? name=?vali? >

<FRAME src=?welcome.htm? name=?reza?>

</FRAMESET>

</HTML>

 

در صفحه های فریمی اول سطرها پر می شوند بعد ستونها.

Attributeهای frameset:

 

 

1- border=" "

2- bordercolor=" "

target=" "

target="_blank"                                  : روی صفحه فریمی باز می شود new pageیک

target="_self"                                     : را نگذاشته ایم target مثل این است که

target="_parent"                                 : صفحه بر روی فریم مادر خود باز می شود

target="_top"                                      :صفحه قبلی از بین میرود ویک صفحه بدون فریم ظاهر میشود

 

 

 

قرار دادن یک AVI بر روی Webpage:

 

 

<IMG dynsrc="(URL)آدرس فایل مورد نظر "

width=" "  height=" "  loop="تعداد دفعات تکرار">

 

 

 

قرار دادن موسیقی background بر روی یک web page:

 

 

<bgsound src=" " loop="عدد/infinite" >

 

 

 

 قرار دادن نوشته متحرک بر روی web page:

marquee

 

 

<MARQUEE  align="top/middle/bottom"

bgcolor="رنگ نوار"

width=" "

 height=" "

hspace=" "

 vspace=" " فضای خالی اطراف نوار

behavior="scroll/slide/alternate"

scroll: خروج نوشته و ورود آن به صورت کارکتر به کارکتر است.

slide: خروج نوشته و ورود آن به صورت ناپدیدشدن و پدیدار شدن ناگهانی است.

alternate: به دو طرف نوار برخورد کرده و نوسان می کند.

direction="left/right" متن باید به سمت چپ یا راست حرکت کند

loop=" " تعداد دفعات

scrollamount=" " مقدار حرکت بر حسب پیکسل

scrolldelay=" " مقدار تاخیر بر > this is web page </MARQUEE>

 

قرار دادن یک AVI بر روی Webpage:

 

 

<IMG dynsrc="(URL)آدرس فایل مورد نظر "

width=" "  height=" "  loop="تعداد دفعات تکرار">

 

به تمام سرویسهایی که در internet وجود دارد مثل Email، گوفر و ...

 

 

1- E-mail link:

 

 

<A href=?mailto: info@schoolnet.ir?> schoolnet </A>

 

 

2- Usenet link:

 

 

<A href="news: news address"> news </A>

 

 

3- Ftp link:

 

 

<A href="ftp://ftp.mysite.com/pub/fag">for download FAG click here</A>

 

 

4- Gopher link:

 

 

<A href="gopher://gopher.mysite.com"> here </A>

 

 

5- Telnet:

 

 

<A href="telnet://address"> click here </A>

 

 

 

قرار دادن موسیقی background بر روی یک web page:

 

 

<bgsound src=" " loop="عدد/infinite" >

 

 

 

 

 

 

 

   :: 20 متری

 

 All rights reserved   ? Copyright 2006  20metri.150m.com , Inc.

 Designer : Mohsen hosseinkhani   

 

 

 

 

 

 

 

 تماس با ما::

 ::درباره من

   :: صفحه اصلی

 

 

موضوعات

 

Front page آموزش

 

HTML آموزش

 

Flash آموزش

 

java script آموزش

 

Web host نحوه قرار دادن سایت در

 

ارتقا رتبه سایت در موتورهای جستجو

 

ترفندهای ویندوز

 

سرویسهای رایگان

 

ASP آموزش

 

PHP آموزش

 

چگونه سایت خود را به موتورهای جستجو معرفی کنیم

 

دانلود برنامه

 

کدهای جاوا

 

قالب وبلاگ

 

 

آمار

 

 

 

 

   + MOHSEN GHASEMI - ۱٢:٠٦ ‎ب.ظ ; ۱۳۸٩/۱٢/۱۳

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

 

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

بنفشه رحمان سرشت - ICTPRESS - دو نقشه مهم و حائز اهمیت تاریخی قرن هجدهم دانوب به وسیله نقشه های رقومی توسط تهیه کنندگان قوی نقشه مانند نقشه های گوگل، گوگل اِرت و ... به طور مقایسه ای مورد بحث قرار گرفت.

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

امروزه دانوب از ده کشور اروپایی و چهار پایتخت (شکل1) و شهرها و شهرکهای کوچک و بزرگ بیشماری می گذرد مانند الم، اینگولستادت، ریجنسبرگ، پاسا، لینز، وین، براتیسلاوا، بوداپست، نُوی سد، زِمان، بلگراد، کزلادی، ویت، نیکپل، برایلا، گالاتی. استیلای این رودخانۀ اسطوره ای که منبع زندگی، قدرت و انگیزه است خوشبختانه تا عصر تفکرات عالی نوین پایدار بوده است، رودخانه ای که به طور آشکار در جغرافی و کارتوگرافی بعنوان یک عنصر طبیعی موجود در نقشه، در تمامی نمایش های کارتوگرافیکی اراضی اروپای مرکزی و جنوب شرقی منعکس گردیده است.

این امر نه تنها به دلیل بلند بودن طول این رودخانه (2850 کیلومتر، تقریباً 22 درجه طول جغرافیایی) و دامنه وسیع عرض جغرافیایی اش (2,5 درجه) می باشد بلکه به دلیل اهمیت فوق العاده زیادش بوده که کارتوگرافان را واداشته، دانوب را به صورت نمادین در شکل الهه اقیانوسها در قاب نقشه قرن هجدهم به نمایش بگذارند.

 شکل 1 ، سمت چپ: رودخانه با طول 2850 کیلومتر از شهر دوناشینگن آلمان جایی که دو رودخانه کوچک جنگل سیاه (بریگاچ و برگ) به هم می پیوندند سرچشمه می گیرد و در نهایت به دریای سیاه می ریزد. این رودخانه از اراضی کنونی ده کشور اروپایی: آلمان(GER)، اتریش(AUT)، اسلواکی(SVK)، مجارستان(HUN)، کرواسی(CRO)، صربستان(SRB)، رومانی(ROM)، بلغارستان(BUL)، مولداوی(MDA) و اوکراین(UKR)  می گذرد. شکل سمت راست: بهترین تصویر گوگل که کل عارضه را در منطقه نشان می دهد.

ناوبری قرن هجدهم در دانوب یادآور تجارت فراوان و رایج دریایی یونان در دریای سیاه و مسیرهای دریایی اطراف آن می باشد، خصوصاً تجارتی که توسط جزیره نشینان دریای آیونین انجام می شد، به طور مثال از میان صاحبان کشتی، خانواده قدرتمند و مبتکر تئوفیلتوس اهل ایتاکا سفارش دهندگان کارخانه کشتی سازی در انگلستان؛ اولین تجار کشتی بخار در سال 1871 بودند.

این تجار دریایی فعال بر حمل و نقل دریایی در دانوب نیز تسلط داشتند، به خصوص پس از قرارداد کوتچاک کانردجی (کاردناژه امروز در استان سیلیسترا بلغارستان) بین روسیه و عثمانی بزرگ در سال 1774.

نقشه های قدیمی، نه تنها دانوب امروز را که متعلق به کارتوگرافی به جامانده از بسیاری کشورهای اطراف مسیر این رودخانه است به نمایش می گذارد، بلکه کارتوگرافی به جا مانده کشورهایی که از این رودخانه فاصله دارند را نیز به دلیل اینکه مناطق خاص تاریخی هستند (مانند یونان) نشان می دهد.

زندگی فرهنگی و اجتماعی مردم محلی برخی از جوامع موفق پراکنده یونان در قرن هجدهم در امتداد رود دانوب پیشرفت کرد، مانند وین، بوداپست، بلگراد و در بسیاری از شهرهای استانهای شرقی رومانی.

اعضاء این جوامع یونانی از پیشگامان روشنفکر یونانی قرن هجدهم بودند و مبارزه برای استقلال یونان در اوایل قرن نوزده، اهداکنندگان کالاهای فرهنگی و آموزشی (مانند کتاب و کلکسیون نقشه) را به سوی احیای بسیاری از شهرها و روستاهای شمالی سرزمین یونان براساس قانون عثمانی آن زمان سوق داد، یعنی شهرهای بزرگ خصوصاً بخش شمالی اراضی واقعی یونان، در غرب مقدونیه، اپیروس و تسالی  (Url 1,2009; Katsiardi-Hering, 2009)اینگونه احیا شدند.

یکی از این شهرها کوزانی است (Url 2,2009) که در دست نوشته های مسافران مشهوری چون ویلیام مارتین لیک (Leake, 1835) یا امی بو (Boue 1854) از آن یاد شده ، این شهر از خصوصیات متعالی جمعیت پراکنده کوزانی در اروپای مرکزی و شرقی بهره مند شد، این جمعیت در ایجاد یک کتابخانه مهم و غنی که از قرن هفدهم دایر می باشد مشارکت داشتند.

در این کتابخانه، شهرداری محل در سال 2008 بخش کتابخانه نقشه را ایجاد کرد تا نقشه های قدیمی و مهم، اطلسها و کتابهای مربوط به جغرافی موجود در کتابخانه که تجربیات به جا مانده از کارتوگرافی کوزانی را مورد حمایت و در انبار جمع آوری شده بود، مستندسازی و بهبود بخشد(Livieratos er al., 2009) . کلکسیون های کتاب و نقشه، نگهداری شده در کتابخانه با رجوع مستقیم به روشنفکری یونان، منعکس کننده تاریخ و مشارکت اقلیت یونانی در اروپای مرکزی و شرقی می باشند خصوصاً در سرزمینهایی که به طور وسیع متأثر از رودخانه دانوب هستند.

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

در میان این نقشه ها و اطلسها در اینجا به نقشه دوازده برگی تاریخی اروپای جنوب شرقی و یونان، Charta که تهیه شده توسط ریگاس ولستینلیس از سال 1796 تا 1797(Livieratos, 2008b, 2008c; Boutoura, 2008)، نقشه چهار برگی جهان تهیه شده توسط آنتیموس گازیس سال 1800 Livieratos, 2008a) )، نخستین اطلس جهانی اتریش توسط فرنز-آنتون شرامبل تهیه شده در سالهای 1787 تا 1790 و چاپ شده در سال 1800 (Dorflinger,1981) و نقشه اتریشی هفت برگه از دانوب، نقشه دریانوردی دانوب (Navigationskarte der Donau) تهیه شده توسط افسران نظامی ایگنز لاترر و زیگفرید تافرر سال 1789 (Besevliev 1975) رجوع می کنیم.پس از گسترش این فلسفه در سالهای اخیر در چارچوب ICA، کمیته فناوری رقومی میراث کارتوگرافی (Livieratos, 2006a; 2009) پروژه ای مربوط به دانوب در کتابخانه نقشه شهری کوزانی (Url 4,2009) وابسته به "تجربه به جامانده از کارتوگرافی کوزانی" را آغاز کرد.از اهداف این پروژه بالا بودن کیفیت رقومی سازی نقشه های قدیمی است که نمایشگر رودخانه دانوب و گسترش عملیات مربوط به آن می باشد:الف) بررسی تاریخ مهاجرت یونانیها در این منطقهب) تحقیق در خصوص تاریخ خالص و دست نخورده نقشه و محتوای نقشه مربوط به نقشه های مشخص به کار گرفته شده در این پروژه ج) جلب توجه عموم به موضوعات ارتباطی به جامانده کارتوگرافیکی و دنیای آموزش در قالب نمایش نقشه، انتشار و انطباق با نیازهای جامعه

برای این منظور دو نقشه وجود دارد که مورد استفاده قرار گرفته ، نقشه سه برگ بالایی Charta ریگاس که عمدتاً نمایشگر مناطق ا اطراف دانوب می باشد و نقشه تقریباً ده سال پیش از آن، نقشه دریانوردی دانوب (Navigationskarte der Donau).

شکل

---------------------------

 

   + MOHSEN GHASEMI - ۸:٥٦ ‎ق.ظ ; ۱۳۸٩/۱٢/۸