آموزش HTML - قسمت سوم (فرمت دهی ، فونت ها ، لینک ها و تصاویر)

فرمت دهی در HTML

فرمت دهی متن در html

<html>
<body>

<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

</body>
</html>


تگ های فرمت دهی در HTML

در HTML از تگ های <b> و <i> برای bold و italic کردن متن ها استفاده می کند.

این تگ ها به تگ های فرمت دهی معروف هستند. (برای دیدن لیستی از این تگ ها به پایین این صفحه نگاه کنید.)

اغلب <strong> نتیجه ای شبیه <b> و <em> نتیجه ای شبیه <i> بر می گرداند.

البته، تفاوتی در معنی این تگ ها وجود دارد.

<b> یا <i> به معنی متن bold یا italic می باشند. <strong> یا <em> به این معنی است که می خواهید متن طوری نمایش داده شود که کاربر بفهمد متن مهم است.

امروزه تمام مرورگرهای اصلی، متن strong شده را به صورت bold و متن با فرمت em را به صورت italic نمایش می دهند.

با این وجود، اگر مرورگری بخواهد متون با فرمت strong را highlight کند متون bold شده را highlight نمی کند.


مثال - خودتان امتحان کنید

نحوه تنظیم فاصله ها و خط های جدید با استفاده از تگ pre.

<html>
<body>

<pre>
This is
preformatted text.
It preserves      both spaces
and line breaks.
</pre>

<p>The pre tag is good for displaying computer code:</p>

<pre>
for i = 1 to 10
     print i
next i
</pre>

</body>
</html>


تگ های computer output به چه صورت هایی نمایش داده می شوند.

<html>
<body>

<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />

<p><b>Note:</b> These tags are often used to display computer/programming code.</p>

</body>
</html>


چگونه اطلاعات تماس مالک یا نویسنده یک سند HTML را تعریف کنیم.

<!DOCTYPE html>
<html>
<body>

<address>
Written by <a href=&quotmailto:webmaster@example.com&quot>Jon Doe</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>


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

<html>
<body>


<p>The <abbr title=&quotWorld Health Organization&quot>WHO</abbr> was founded in 1948.</p>

<p>Can I get this <acronym title=&quotas soon as possible&quot>ASAP</acronym>?</p>

<p>The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.</p>

</body>
</html>


نحوه تغییر جهت متن (از آخر به اول).

<!DOCTYPE html>
<html>
<body>

<p>This paragraph will go left-to-right.</p>  
<p><bdo dir=&quotrtl&quot>This paragraph will go right-to-left.</bdo></p>  

</body>
</html>


نحوه نوشتن نقل قول های کوتاه و بلند.

<!DOCTYPE HTML PUBLIC &quot-//W3C//DTD HTML 4.01 Transitional//EN&quot &quothttp://www.w3.org/TR/html4/loose.dtd&quot>

<html>
<body>

A long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>

<p><b>Note:</b> The browser inserts white space before and after a blockquote element. It also inserts margins.</p>

A short quotation:
<q>This is a short quotation</q>

<p><b>Note:</b> The browser inserts quotation marks around the short quotation.</p>

</body>
</html>


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

<!DOCTYPE html>
<html>
<body>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

</body>
</html>


تگ های مربوط به قالب بندی متن در HTML

تگ <b> ، متن را به صورت ضخیم یا bold نمایش می دهد.

تگ <strong> ، متن را به صورت ضخیم یا strong نمایش می دهد.

تگ <em> ، متن را به صورت مورب یا emphasized (تأکید شده) نمایش می دهد.

تگ <i> ، متن را به صورت مورب یا italic نمایش می دهد.

تگ <small> ، متن را به صورت small نمایش می دهد.

تگ <big> ، متن را به صورت big نمایش می دهد.

تگ <sub> ، متن را به صورت subscripted (زیر نویس) نمایش می دهد.

تگ <sup> ، متن را به صورت superscripted (بالا نویس) نمایش می دهد.

تگ <ins> ، متن را به صورت inserted (زیر خط دار) نمایش می دهد.

تگ <del> ، متن را به صورت deleted (روی آن خط کشیده شده) نمایش می دهد.


تگ های "computer output" در HTML

تگ <code> ، متن را به صورت computer code نمایش می دهد.

تگ <kdb> ، متن را به صورت keyboard نمایش می دهد. تگ <kbd> یک تگ عبارتی است و ورودی صفحه کلید را مشخص می کند. (نکته: استفاده از این تگ توصیه نمی شود، اما برای رسیدن به نتایج بهتر از CSS استفاده می کنیم.)

تگ <samp> ، متن را به صورت sample computer code نمایش می دهد.

تگ <tt> ، متن را به صورت teletype نمایش می دهد.

تگ <var> ، متن را به صورت variable نمایش می دهد.

تگ <pre> ، متن را به صورت preformatted نمایش می دهد. (خطوط و فاصله های اضافه در نظر گرفته شده را حفظ می کند)


تگ های Citations ،Quotations و Definition در HTML

تگ <abbr> ، مخفف کلمه ای را تعریف می کند.
با استفاده از خصوصیت title می توان عبارت کامل آن مخفف را در حالتی که موس روی آن قرار می گیرد نشان داد.

تگ <acronym> ، سر نام کلمات را تعریف می کند. (در HTML5 پشتیبانی نمی شود)
با استفاده از خصوصیت title می توان عبارت کامل آن مخفف را در حالتی که موس روی آن قرار می گیرد نشان داد.

تگ <address> ، اطلاعات تماس برای نویسنده با مالک سند را مشخص می کند.

تگ <bdo> ، با استفاده از خصوصیت bdo می توان کلمات را برعکس کرد. (از آخر به اول یا برعکس)

تگ <blockquote> ، برای تعریف نقل قول های بلند استفاده می شود.
مرورگر، بصورت پیشفرض قبل و بعد از عبارت نقل قول یک فضای اضافی قرار می دهد. همچنین برای آن Margin در نظر می گیرد.

تگ <q> ، برای تعریف نقل قول های کوتاه استفاده می شود.
مرورگر، بصورت پیشفرض عبارت را داخل دابل کوتیشن قرار میدهد.

تگ <cite> ، جهت تعریف نقل قول (citation)
در HTML5 تگ <cite> عنوان یک کار را مشخص می کند اما در HTML 4.01 تگ <cite> یک نقل قول را مشخص می کند.

تگ <dfn> ، یک عبارت تعریفی را مشخص می کند.



فونت ها در HTML

تگ <font> نباید استفاده شود

تگ <font> در HTML 4 رایج نیست و در HTML 5 حذف شده است.

کنسرسیوم World Wide Web یا (w3c) تگ <font> را از دستوراتش حذف کرده است.

در HTML 4، باید از CSS (یا style sheetها) برای تعیین خصوصیات نمایش عناصر استفاده کرد.

مثال زیر نشان می دهد که چگونه HTML با تگ <font> کار می کند.

<p>
<font size=&quot5&quot face=&quotarial&quot color=&quotred&quot>
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>

<p>
<font size=&quot3&quot face=&quotverdana&quot color=&quotblue&quot>
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>


مثال - خودتان امتحان کنید

راه درست قالب بندی - با Style ها


این مثال نحوه تنظیم فونت متن را نشان می دهد.

<html>
<body>

<h1 style=&quotfont-family:verdana&quot>This is a heading</h1>
<p style=&quotfont-family:courier&quot>This is a paragraph.</p>

</body>
</html>


این مثال نحوه تنظیم سایز فونت را نشان می دهد.

<html>
<body>

<h1 style=&quotfont-size:200%&quot>This is a heading</h1>
<p style=&quotfont-size:110%&quot>This is a paragraph.</p>

</body>
</html>


این مثال نحوه تنظیم رنگ متن را نشان می دهد.

<html>
<body>

<h1 style=&quotcolor:blue&quot>This is a heading</h1>
<p style=&quotcolor:red&quot>This is a paragraph.</p>

</body>
</html>


این مثال نحوه تنظیم فونت، سایز و رنگ متن را نشان می دهد.

<html>
<body>

<p style=&quotfont-family:verdana;font-size:110%;color:green&quot>
This is a paragraph with some text in it. This is a paragraph with some text in it. This is a
paragraph with some text in it. This is a paragraph with some text in it.
</p>

</body>
</html>



لینک ها در HTML

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

نحوه ایجاد لینک ها در سند HTML
<!DOCTYPE html>
<html>
<body>

<p>
<a href=&quothttps://www.w3schools.com/html/default.asp&quot>HTML Tutorial</a> This is a link to a page on this website.
</p>

<p>
<a href=&quothttp://www.w3.org/&quot>W3C</a> This is a link to a website on the World Wide Web.
</p>

</body>
</html>


هایپر لینک Hyperlink (یا Link ها) در HTML

یک hyperlink یا link یک کلمه یا گروهی از کلمات یا عکس می باشد که شما می توانید با کلیک کردن روی آن به سند جدید یا بخشی از همان سند بروید.

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

لینک ها در HTML با تگ <a> مشخص می شوند.

تگ <a> به دو روش می تواند استفاده شود:

  1. برای ایجاد لینک به سندی دیگر، با استفاده از خصوصیت href
  2. برای ایجاد یک پیوند به دورن همان صفحه (bookmark)، با استفاده از خصوصیت name


نحوه نوشتن لینک در HTML:

<a href=&quot/url&quot>Link text</a>


خصوصیت href مقصد یک لینک را مشخص می کند.

<a href=&quothttps://w3schools.com/&quot>Visit w3schools</a>


با کلیک روی لینک بالا، کاربر به صفحه اصلی سایت w3schools ارجاع داده می شود.

نکته: Link text الزاما یک متن نیست. می تواند یک عکس یا هر عنصر دیگر HTML باشد.


خصوصیت target

خصوصیت target مشخص می کند که صفحه لینک شده، چگونه باز شود.

مثال زیر، صفحه لینک شده را در یک پنجره جدید یا در یک تب جدید باز می کند:

<a href=&quothttps://w3schools.com/&quot target=&quot_blank&quot>Visit w3schools!</a>


خصوصیت name یا (id)

با تنظیم یک نام منحصر به فرد برای یک عنصر با استفاده از خصوصیت name یا id، می توانید در CSS یا JavaScript به آن دسترسی داشته باشید.

البته از خصوصیت name یا id برای ایجاد یک bookmark یا پیوند به درون همان صفحه نیز می توان استفاده نمود.

نکته: استاندارد HTML5 خصوصیت id را بجای name برای تعیین اسم برای یک محل مشخص پیشنهاد می دهد. خصوصیت id برای HTML4 در تمام مرورگرهای امروزی نیز عمل می کند.

مثال: تنظیم خصوصیت Name برای تگ <a> در سند HTML:

<a name=&quottips&quot>Useful Tips Section</a>

ایجاد یک لینک به محل مشخصی درون صفحه جاری:

<a href=&quot#tips&quot>Visit the Useful Tips Section</a>

یا، ایجاد یک لینک به محل مشخصی در صفحه ای دیگر:

<a href=&quothttps://w3schools.com/html_links.htm#tips&quot> Visit the Useful Tips Section</a>


نکات اساسی و مفید

نکته: اگر می خواهید یک فولدر در یک سایت را آدرس دهی نمایید، همیشه یک slash به انتهای آن اضافه کنید. مانند زیر:

https://w3schools.com/html/

در غیر اینصورت، دو درخواست به سرور ارسال کرده اید، سرور ابتدا یک slash به انتهای آدرس اضافه می کند و سپس آدرس را بارگذاری می کند.


مثال - خودتان امتحان کنید

نحوه ایجاد یک عکس به عنوان یک لینک

<!DOCTYPE html>
<html>
<body>

<p>Create a link of an image:
<a href=&quothttp://www.w3schools.com&quot target=&quot_blank&quot>
<img src=&quotsmiley.gif&quot alt=&quotHTML tutorial&quot width=&quot32&quot height=&quot32&quot />
</a></p>

<p>No border around the image, but still a link:
<a href=&quothttp://www.w3schools.com&quot target=&quot_blank&quot>
<img border=&quot0&quot src=&quotsmiley.gif&quot alt=&quotHTML tutorial&quot width=&quot32&quot height=&quot32&quot />
</a></p>

</body>
</html>


نحوه ایجاد یک پیوند درون همان صفحه. (این روش برای سندهایی که فهرست بندی شده اند کاربرد زیادی دارد)

<!DOCTYPE html>
<html>
<body>

<p>
<a href=&quot#C10&quot>See also Chapter 10.</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 4</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name=&quotC10&quot>Chapter 10</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>


چگونه از یک فریم بیرون بیاییم. (اگر سایت شما در یک فریم محصور است)

<!DOCTYPE html>
<html>

<body>

<p>Locked in a frame?</p> 
<a href=&quothttp://www.w3schools.com/&quot target=&quot_top&quot>Click here!</a> 

</body>
</html>


چگونه با یک لینک، متنی را ایمیل کنیم. (تنها زمانی کار می کند که نرم افزار مدیریت ایمیل مثل outlook نصب شده باشد)

<!DOCTYPE html>
<html>
<body>

<p>
This is an email link:
<a href=&quotmailto:someone@example.com?Subject=Hello%20again&quot>
Send Mail</a>
</p>

<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.
</p>

</body>
</html>


مثالی دیگر از ارسال متن توسط لینک

<!DOCTYPE html>
<html>
<body>

<p>
This is another mailto link:
<a href=&quotmailto:someone@example.com?cc=someoneelse@example.com&bcc=andsomeoneelse@example.com&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!&quot>Send mail
</a>
</p>

<p>
<b>Note:</b> Spaces between words should be replaced by %20 to ensure that the browser
will display the text properly.
</p>

</body>
</html>




تصاویر در HTML

تگ <img> و خصوصیت Src

در HTML، تصاویر به وسیله تگ <img> تعریف می شوند.

تگ <img> خالی می باشد(یک عنصر تهی می باشد)، به این معنی که این تگ تنها حاوی خصوصیت ها می شود و تگ بسته ای ندارد.

برای نمایش تصویر در صفحه وب، به خصوصیت src نیاز دارید. src مخفف کلمه source می باشد. مقدار این خصوصیت آدرس URL تصویری است که می خواهید نمایش داده شود.


فرم نوشتاری تگ img

<img src=&quot/url&quot alt=&quotsome_text&quot/>

کد URL اشاره دارد به مکانی که تصویر در آن ذخیره شده است. یک تصویر با نام boat.gif، در پوشه images در سایت w3schools.com واقع شده که دارای URl به این صورت http://w3schools.com/images/boat.gif می باشد.

مرورگر تصویری را که در تگ <img> وجود دارد را نشان می دهد. اگر شما تگ تصویر را بین دو پاراگراف قرار دهید، مرورگر ابتدا پاراگراف اول را نشان می دهد، سپس عکس و بعد از آن پاراگراف دوم را می آورد.


خصوصیت ALT

خصوصیت alt یک alternate text یا "متن جایگزین" را برای یک تصویر مشخص می کند، که اگر عکس نمایش داده نشود آن متن نمایش داده می شود.

ذکر خصوصیت alt الزامی است و بدون آن صفحه وب، استاندارد نخواهد بود.

<img src=&quot/boat.gif&quot alt=&quotBig Boat&quot />

اگر کاربری به دلایلی (مثل کند بودن اتصال، خطایی در خصوصیت scr رخ دهد یا اگر کاربر از یک screen reader استفاده کند) نتواند عکس را مشاهده کند، خصوصیت alt اطلاعاتی در مورد عکس ارائه می دهد.


تنظیم طول و عرض یک عکس

خصوصیت height و width برای مشخص کردن طول و عرض یک عکس استفاده می شود.

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

<img src=&quot/pulpit.jpg&quot alt=&quotPulpit rock&quot width=&quot304&quot height=&quot228&quot />

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


نکات اساسی و مفید

نکته: اگر یک فایل HTML حاوی ده تصویر باشد، یازده فایل (شامل 10 فایل تصویر و فایل HTML صفحه) برای نمایش صحیح صفحه نیاز می باشد. بارگذاری تصاویر زمان بر است، بنابراین پیشنهاد ما این است که: از تصاویر، با دقت استفاده کنید.

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


مثال - خودتان امتحان کنید

نحوه درج تصویر در سند HTML.

<!DOCTYPE html>
<html>
<body>

<p>
An image:
<img src=&quotsmiley.gif&quot alt=&quotSmiley face&quot width=&quot32&quot height=&quot32&quot />
</p>

<p>
A moving image:
<img src=&quothackanm.gif&quot alt=&quotComputer man&quot width=&quot48&quot height=&quot48&quot />
</p>

<p>
Note that the syntax of inserting a moving image is no different from a non-moving image.
</p>

</body>
</html>


نحوه درج تصویر از پوشه ای دیگر یا از سروری دیگر.

<!DOCTYPE html>
<html>
<body>

<p>An image from another folder:</p>
<img src=&quot../images/html/chrome.gif&quot alt=&quotGoogle Chrome&quot width=&quot33&quot height=&quot32&quot><p>An image from W3Schools:</p>
<img src=&quothttp://www.w3schools.com/images/w3schools_green.jpg&quot alt=&quotW3Schools.com&quot width=&quot104&quot height=&quot142&quot>

</body>
</html>


نحوه تراز کردن تصویر در یک متن.

<!DOCTYPE html>
<html>
<body>

<p>An image 
<img src=&quotsmiley.gif&quot alt=&quotSmiley face&quot align=&quotbottom&quot width=&quot32&quot height=&quot32&quot />
with align=&quotbottom&quot.</p>

<p>An image
<img src=&quotsmiley.gif&quot alt=&quotSmiley face&quot align=&quotmiddle&quot width=&quot32&quot height=&quot32&quot /> 
with align=&quotmiddle&quot.</p>

<p>An image 
<img src=&quotsmiley.gif&quot alt=&quotSmiley face&quot align=&quottop&quot width=&quot32&quot height=&quot32&quot />
with align=&quottop&quot.</p>

<p><b>Tip:</b> align=&quotbottom&quot is default!</p>

<p><img src=&quotsmiley.gif&quot alt=&quotSmiley face&quot width=&quot32&quot height=&quot32&quot />
An image before the text.</p>

<p>An image after the text. 
<img src=&quotsmiley.gif&quot alt=&quotSmiley face&quot width=&quot32&quot height=&quot32&quot /></p>

</body>
</html>


چگونه اجازه دهیم یک تصویر در سمت چپ یا راست یک پارگراف قرار گیرد.

<!DOCTYPE html>
<html>
<body>

<p>
<img src=&quotsmiley.gif&quot alt=&quotSmiley face&quot align=&quotleft&quot width=&quot32&quot height=&quot32&quot />
A paragraph with an image. The align attribute of the image is set to &quotleft&quot. The image will float to the left of this text.
</p>

<p>
<img src=&quotsmiley.gif&quot alt=&quotSmiley face&quot align=&quotright&quot width=&quot32&quot height=&quot32&quot />
A paragraph with an image. The align attribute of the image is set to &quotright&quot. The image will float to the right of this text.
</p>

</body>
</html>


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

<!DOCTYPE html>
<html>
<body>

<p>Create a link of an image:
<a href=&quothttp://www.w3schools.com&quot target=&quot_blank&quot>
<img src=&quotsmiley.gif&quot alt=&quotHTML tutorial&quot width=&quot32&quot height=&quot32&quot />
</a></p>

<p>No border around the image, but still a link:
<a href=&quothttp://www.w3schools.com&quot target=&quot_blank&quot>
<img border=&quot0&quot src=&quotsmiley.gif&quot alt=&quotHTML tutorial&quot width=&quot32&quot height=&quot32&quot />
</a></p>

</body>
</html>


چگونه یک image map با ناحیه بندی متفاوت ایجاد کنیم که با کلیک روی هر ناحیه یک لینک اجرا شود.

<!DOCTYPE html>
<html>
<body>

<p>Click on the sun or on one of the planets to watch it closer:</p>

<img src=&quotplanets.gif&quot width=&quot145&quot height=&quot126&quot alt=&quotPlanets&quot usemap=&quot#planetmap&quot>

<map name=&quotplanetmap&quot>
    <area shape=&quotrect&quot coords=&quot0,0,82,126&quot alt=&quotSun&quot href=&quotsun.htm&quot>
    <area shape=&quotcircle&quot coords=&quot90,58,3&quot alt=&quotMercury&quot href=&quotmercur.htm&quot>
    <area shape=&quotcircle&quot coords=&quot124,58,8&quot alt=&quotVenus&quot href=&quotvenus.htm&quot>
</map>

</body>
</html>