در توسینسو تدریس کنید

و

با دانش خود درآمد کسب کنید

آموزش HTML (اچ تی ام ال) قسمت 4 : لینک و تصاویر

حتماً در سایت itpro دیدید که وقتی به انتهای مطلب میرسیم اگر اون مطلب طولانی باشد نیازی نیست تا Scroll کرده و مجدد به بالای صفحه برگردیم زمانی که به پایین صفحات سایت scroll میکنیم یک فلش ای پدید می آید که کمک میکند ما به راحتی به اول صفحه منتقل شویم این قابلیت با کمک Java script بسیار شیک و ساده پیاده سازی میشه اما در این مطلب میخواهم در مورد HTML صحبت کنم این ویژگی در HTML با صفت id در تگ <Hn> قابل پیاده سازی است قبلاً در مورد تگ H صحبت شده است.البته این بخش به عنوان ادامه بخش قبلی که در مورد تگ a و لینک ها بود صحبت میشه در واقع این بخش مرتبط با بخش قبلی استفاده میشه.

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

ابتدا باید در لینک مشخص کنید که Href به یک نام مشخص شده ولی با این تفاوت که قبل از این نام یک شارپ # نوشته شده است و اون نام میتونه در واقع ID یک بخش باشد مثل H2 ، یا یک نام برای H2 T من دراین مثال برای هر H2 یک name قرار دادم که دقیقاً معادل نامی هست که برابر با href لینک ها هست البته شما میتوانید از صفت Id هم استفاده کنید و نام href را به id یک بخشی مثل H2 یکی کنید.

<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>The global structure of an HTML document</title>
</head>
<body>
<h1 align="center"><a name="h-7">7</a> The global structure of an HTML
document</h1>

<div class="subtoc">
<p><strong>Contents</strong></p>

<li><a class="tocxref" href="#h-7.1">Introduction to the structure of an HTML
document</a></li>

<li><a class="tocxref" href="#h-7.2">HTML version information</a></li>

<li><a class="tocxref" href="#h-7.3">The <samp class="einst2">HTML</samp>
element</a></li>

<h2><a name="h-7.1">7.1</a> Introduction to the structure of an HTML
document</h2>

<p>An HTML 4 document is composed of three parts:</p>


<p>White space (spaces, newlines, tabs, and comments) may appear before or

<h2><a name="h-7.2">7.2</a> <a name="version-info">HTML version
information</a></h2>

<p>HTML 4.01 specifies three DTDs, so authors must include one of the following
document type declarations in their documents. The DTDs vary in the elements
they support.</p>

<p><em><strong>Note.</strong> As of the 24 December version of HTML 4.01, the
HTML Working Group commits to the following policy:</em></p>

<ul>
<li><em>Any changes to future HTML 4 DTDs will not invalidate documents that
conform to the DTDs of the present specification.</em> The HTML Working Group
reserves the right to correct known bugs.</li>

<li><em>Software conforming to the DTDs of the present specification may ignore
features of future HTML 4 DTDs that it does not recognize.</em></li>
</ul>

</div>

<h2><a name="h-7.3">7.3</a> The <a name="edef-HTML"><samp class="edef">
HTML</samp></a> element</h2>

<p>After document type declaration, the remainder of an HTML document is
contained by the element. Thus, a typical HTML document has this
structure:</p>

</body>
</html>

کد فوق را در note pad با یک نام دلخواه و با پسوند Html ذخیره کنید و خروجی را ببینید:

استفاده از تگ ها در HTML

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

  • Title :

یکی از صفت های دیگری که برای لینک ها استفاده میشود attribute Title هست که مشخص میکند زمانی که موس را روی یک لینک می برید یک Tooltip برای آن لینک ایجاد کنید و این کمک میکند تا قبل از اینکه لینک کلیک شود کاربر بداند صفحه ای که میخواهد برود چیست مثال زیر را با هم دنبال میکنیم:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
</head>

<body>
Give Link Details with the title Attribute : <a href="http://www.web.tosinso.com" title="انجمن تخصصی فناوری اطلاعات ایران">www.web.tosinso.com</a>
</body>
</html>

کد فوق را زمانی که اجرا کنید با تصویر زیر روبرو می شوید که میتوانید روی لینک مشخص شده بروید و Tooltip را مشاهده کنید

استفاده از Tooltip در تگ های HTML

  • تگ < area >

از این تگ جهت تهیه و ایجاد نقشه تصویری یا بهتر بگویم عکس یا تصویری که قرار است آن را ناحیه بندی کرده و هر ناحیه لینک مخصوص بخود را داشته باشد استفاده میشود البته این تگ به تنهایی نمتواند کار مفیدی انجام دهد و تگ های <img> و <map> باید در کنار این تگ قرار بگیرند ، مانند نقشه ایران که ما میتوانیم تمام شهر ها را ناحیه بندی کرده و زمانی که در مرورگر نقشه ایران را دیدیم روی هر شهر که رفتیم یک Tooltip خاص خود را داشته باشد و هر شهر لینک (پیوند) شود به قسمت مربوطه خودش ، برای استفاده از این تگ ما shape را داریم که میتواند انواع مختصات را روی نقشه پیاده سازی کند و همچنینن این مختصات را با Attribute coords روی HTML پیاده میکنیم به عبارتی دیگر Coords برای درج مختصات صفحه استفاده میشود که هر یک از مختصات با علاوت کاما (,) از همدیگر جدا میشوند و Shape تعیین کننده شکل هندسی نقشه تصویری است و این خصوصیت Shape حالت های rect , rectangle یعنی مربع يا مستطيل و circ , circle یعنی دایره يا بيضی و

poly , polygon یعنی چند ضلعی را در بر دارد.

تگ area از آن دسته از تگ هایی است که پایان ندارد و برای استفاده از این تگ باید آن را درون تگ < map > قرار داد که میتواند تعيين کننده يک ناحيه مجزا و با قابل کليک شدن باشد و با مشخص کردن مختصات آن بر روی تصویر آن ناحیه مشخص میگردد . برای ایجاد یک نقشه تصویری به کمک تگ < img > نیازمندیم در خصوص تگ IMG : این تگ نیز از پرکاربرد ترین تگ ها می باشد و از جمله تگ هایی است که پایان ندارد و کاربرد این تگ برای نمایش عکس در صفحات وب است استفاده از crs یا source همان آدرس تصویر است و alt نوشته ای است که Tooltip موس برای آن تصویر به نمایش در می آید ، این تگ دارای صفت هایی است اگر از خصیصه usemap در تگ < img > استفاده کنیم میتوانیم یک نقشه تصویری بسازیم یعنی دقیقاً چیزی که ما بهش نیاز داریم ، تگ < img> نیز دارای دارای 2 خصیصه مهم برای این کار است که در ادامه توضیح خواهم داد:

  • usemap

این صفت زمانی به کار می رود که بخواهیم تصویر مورد نظر به صورت یک پیوند یا لینک عمل کند یعنی با کلیک بر روی آن یک آدرس یا URL توسط مرور گر باز میشود. مقدار usemap قبلا باید توسط تگ < MAP > در فایل HTML تعریف شده باشد

  • ismap

همانطور که میدانید یک نقظه در صفحه مانیتور دارای مشخصات X و Y است که این نقطه به صورت by Default از سمت چپ بالای صفحه مانیتور آغاز میشود و به آن نقطه 0,0 گفته میشود برای به

دست آوردن مختصات یک نقطه این خصوصیت میتواند مفید باشد و البته زمانی این نقاط به درستی محاسبه میشوند که تگ img بین دو تگ a قرار گیرد .

تگ <map>


همانگونه که پیش تر گفتیم از این تگ جهت ايجاد يک نقشه تصويری استفاده می شود ، ابتدا به وسيله تگ < map > و تگ های درونی < area > يک نقشه تصويری با نواحی مجزا و مختلف قابل کليک شدن ايجاد و سپس آن نقشه را به يک عکس بر روی صفحه لینک میدهیم ، این تگ نیز دو صفت بارز دارد به نام های id و name که کاربرد این دو خصوصیت یکسان است با این تفاوت که هر کدام در مرورگر های قدیمی و جدید کار میکنند. اما برای اینکه نقشه تصویری را لینک دهیم خاصيت usemap که قبلاً توضیح دادیم را در تگ < img > عکس مورد نظر برابر با نام Name يا id ، نقشه تصويری ايجاد شده قرار می دهيم . مثال زیر را دقت کنید:

<html>
     <head>
       <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
     </head>
<body>
 <img src="itpro.jpg" alt="learner" usemap="#taglist" />
 <map id="taglist" >
  <area id="table" alt="web" shape="rect" coords="1, 2, 194, 122" href="http://www.web.tosinso.com" />
  <area id="body" alt="dbo" shape="rect" coords="194, 0, 386, 119" href="http://www.dba.tosinso.com" />
  <area id="link" alt="icdl" shape="rect" coords="0, 121, 193, 242" href="http://www.icdl.tosinso.com" />
  <area id="p" alt="linux" shape="rect" coords="192, 119, 386, 242" href="http://www.linux.tosinso.com" />
</map >
</body>
</html>

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

استفاده از تگ area  و تگ map

ادامه دارد...

نویسنده : فرهاد خانلری

منبع : جزیره طراحی و توسعه وب وب سایت توسینسو

هرگونه نشر و کپی برداری بدون ذکر نام منبع و نویسنده اشکال اخلاقی دارد.

#کاربرد_html_در_صفحات_وب #آموزش_قدم_به_قدم_html #مقدمات_یادگیری_صفحات_وب #آموزش_تگ_ها_در_html #آموزش_html #tag_ها_در_html #صفحات_وب_و_نقش_html #تگ_area_و_تگ_map #استفاده_از_تگ_های_html #مبانی_آموزش_طراحی_وب
عنوان
1 آموزش HTML (اچ تی ام ال) قسمت 1 : انواع تگ رایگان
2 آموزش HTML (اچ تی ام ال) قسمت 2 : انواع تگ رایگان
3 آموزش HTML (اچ تی ام ال) قسمت 3 : لینک ها رایگان
4 آموزش HTML (اچ تی ام ال) قسمت 4 : لینک و تصاویر رایگان
5 آموزش HTML (اچ تی ام ال) قسمت 5 : سئوی تصاویر رایگان
6 آموزش HTML (اچ تی ام ال) قسمت 6 : طراحی جدول رایگان
7 آموزش HTML (اچ تی ام ال) قسمت 7 : استفاده از رنگ ها رایگان
8 آموزش HTML (اچ تی ام ال) قسمت 8 : موجودیت ها و کارکتر های خاص رایگان
9 آموزش HTML (اچ تی ام ال) قسمت 9 : صفحه وب با جدول و لینک رایگان
10 آموزش HTML (اچ تی ام ال) قسمت 10 : استفاده از FrameSet رایگان
زمان و قیمت کل 0″ 0
0 نظر

هیچ نظری ارسال نشده است! اولین نظر برای این مطلب را شما ارسال کنید...

نظر شما
برای ارسال نظر باید وارد شوید.
از سرتاسر توسینسو
تنظیمات حریم خصوصی
تائید صرفنظر
×

تو می تونی بهترین نتیجه رو تضمینی با بهترین های ایران بدست بیاری ، پس مقایسه کن و بعد خرید کن : فقط توی جشنواره پاییزه می تونی امروز ارزونتر از فردا خرید کنی ....