آموزش HTML جلسه پنجم
579 روز پیش
وحید ولی زاده , HTML
لینک ها و تصاویر در HTML
لینک ها :: HTML Links
یک لینک آدرس یک سند یا یک منبع در وب است.
مثال :
ایجاد فراپیوند
این مثال نشان می دهد که چگونه می توان، در متن نوشته شده، فراپیوندی ایجاد کرد.
عکس، به عنوان فراپیوند
این مثال عکسی را به یک فراپیوند تبدیل می کند.
(مثالهای بیشتر، در انتهای این پست آمده است)
Hyperlinks ، Anchors و لینک ها در HTML
HTML از برچسب <a> برای ساخت یک پیوند به پرونده های دیگر استفاده می کند. یک anchor می تواند به هر منبعی در وب اشاره کند.یک صفحه HTML ، یک عکس ، یک فایل صوتی ، یک فیلم و … .
دستورالعمل ساخت یک Anchor:
<a href="url"> متنی که نمایش داده می شود </a>
در هنگام ساختن یک Anchor باید مکانی که پیوند به آن پرونده اشاره میکند را مشخص کرد. برای نمایش آدرس پرونده از موجودیت href استفاده می شود.کلمات بین بر چسب آغازو پایان Anchor به عنوان فرا پیوند نمایش داده می شود.
این Anchor یک پیوند به html.ir را معرفی می کند:
<a href="http://www.pasargad-graphic.com/blog/">پاسارگاد گرافیک</a>
خط بالا شبیه این نشان داده خواهد شد : پاسارگاد گرافیک
یک لینک در HTML :
قاعده ساخت یک لینک :
<a href="url">Link text</a>
تگ آغازین شامل عنصری در مورد لینک است.
محتوای عنصر (متن پیوند ) قسمتی است که نمایش داده خواهد شد.
نکته : محتوای عنصر حتما نباید شامل متن باشد! میتواند شامل لینک یک عکس یا هر چیز دیگری باشد.
مشخصه href :
عنصر href آدرس یک لینک را تعریف میکند.
عنصر <a> زیر، یک لینک به سایت مجید آنلاین را تعریف میکند :
<a href="http://www.google.com">Visit Google!</a>
کد بالا به صورت روبرو نمایش داده میشود : Visit Google!
مشخصه target :
توسط target شما میتوانید مشخص کنید که فایل لینک داده شده به آن کجا باز شود.
به عنوان مثال، کد زیر سایت مجید آنلاین را در صفحه جدیدی باز میکند:
<a href="http://www.google.com" target="_blank">Visit Google!</a>
مقادیر مجاز برای target
| مقدار | توضیح |
|---|---|
| _blank | لینک در یک پنجره/تب جدید باز میشود |
| _self | لینک در فریم/صفحه جاری باز می شود |
| _parent | لینک در فریم والد باز می شود |
| _top | لینک در در همان صفحه باز می شود/خروج از فریم |
مشخصه name :
مشخصه name برای ساخت یک لینک دارای نام استفاده میشود.توسط لینک دارای نام شما میتوانید لینکی بسازید که به قسمت خاصی از صفحه مستقیما جهش داشته باشد به جای این که کاربر را مجبور به پیمودن صفحه کنید تا به قسمت مورد نظر برسد.
قاعده ساخت یک لینک دارای نام به صورت زیر است :
<a name="label">Any content</a>
قاعده ساخت یک named anchor :
<a href="#label">Any content</a>
# در عنصر href یک named anchor را تعریف میکند.
مثال :
عنصر anchor named داخل یک سند HTML :
<a name="tips">Useful Tips Section</a>
لینک به قسمت مورد نظر از همان سند :
<a href="#tips">Jump to the Useful Tips Section</a>
لینک به قسمت مورد نظر از یک سند دیگر :
<a href="http://www.pasargad-graphic.com/blog/download-apple-safari-5/#comment-40">پرش به بخش دیدگاه هایمربوط به مرورگر سافاری</a>
نکات پایه ای – اطلاعات مفید :
همیشه یک علامت “/” به منابع زیر پوشه ها اضافه کنید. اگر شما پیوندی مثل این درست کنید
href="http://www.pasargad-graphic.com/blog"
شما دو تقاضا برای سرور درست کرده اید ، چون سرور یک علامت “/” به انتهای آدرس اضافه کرده و یک تقاضای جدید درست می کند. مثل این:
href="http://www.pasargad-graphic.com/blog/"
از Anchor نام دار معمولا برای ساخت یک جدول از محتویات در ابتدای یک پرونده بزرگ استفاده می شود. به هر بخش در میان پرونده یک Anchor نام دار داده شده و پیوند به هرکدام از این Anchor ها در بالای پرونده قرار داده شده است. اگر یک مرورگر نتواند Anchor نام داری را که مشخص شده است را پیدا کند به ابتدای آن پرونده رفته و هیچ خطایی اتفاق نمی افتد.
مثال های بیشتر :
لینک به محلی در همین متن
فرض کنید در ابتدای متن، فهرستی از محتوای متن نوشته اید. اگر بخواهیم با کلیک روی هر یک از سرفصلها، به آن سرفصل مراجعه کنیم، چگونه عمل می کنیم؟ لینک های این مثال، چگونگی این کار را نشان می دهند.
شکستن حصار قاب
اگر صفحه شما، داخل یک قاب نمایش داده می شود، لینک های آن، محتوای قاب را تغییر می دهند. برای شکستن این محدودیت و تغییر محتوای کل پنجره مانند این مثال عمل کنید.
لینک به Email
در صورتیکه آدرس لینک شما، از شماهای دیگری غیر از http، مانند mailto و یا ftp استفاده کند، چه می شود. این مثال نمونه ای را نمایش می دهد.
لینک به Email (نوعی دیگر)
در این مثال نمونه دیگری از لینک نوع mailto را می بینید.
عکس ها :: HTML Images
هدف ما این است شما خودتان یاد بگیرید! پس روی لینک های زیر کلیک کنید و تا حدودی با این عنصر آشنا شوید. کلیک کنید !
قرار دادن عکس !
در لینک بالا میتوانید بفهمید چگونه عکس ها را در صفحات وب قرار میگیرند (تمرین کنید!)
قرار دادن عکس از سرور دیگر !
در لینک بالا، نحوه قرار دادن عکس از سرور های دیگر را می بینید.
تگ عکس ها و مشخصه src :
در HTML عکس ها توسط تگ <img> تعریف میشوند.
تگ <img> خالی است، به این معنی که میتواند شامل عناصری باشد و تگ پایانی ندارد.
برای نشان دادن یک عکس در صفحه، شما باید از عنصر src استفاده کنید.
Src مخفف source (منبع) است.
محتوای عنصر url ، src تصویری است که شما می خواهید در صفحه تان نمایش دهید.
نحوه معرفی یک تصویر:
<img src="url"/>
url به محلی اشاره می کند که تصویر در آنجا قرار دارد . تصویری که “logo1w.png” نامیده شده در مسیر “/intl/en_ALL/images/srpr/” در “http://www.google.com” دارای این url است:
<img src="http://www.google.com/intl/en_ALL/images/srpr/logo1w.png" />
مرورگر تصویر را جایی قرار می دهد که تگ تصویر سند HTML در آنجا قرار گرفته است.اگر شما تگ تصویر را بین دو پاراگراف قرار دهید ، مرورگر ابتدا پاراگراف اول ، سپس تصویر و بعد پاراگراف دوم را نشان می دهد.
مشخصه alt :
عنصر alt برای معرفی متن جایگزین به جای یک تصویر استفاده می شود. محتوای عنصر alt یک متن توصیفی است:
<img src="boat.gif" alt="Big Boat" />
اگر مرورگر نتواند تصویری را بارگیری نماید ، عنصر alt به خواننده می گوید که آن را در صفحه از دست داده است ، سپس مرورگر متن جایگزین را بجای آن نشان خواهد داد
این یک عادت خوبی است تا هر عکس را در صفحه با عنصر alt همراه کنید تا برای کسانی که مجبورند در مرورگرهایشان فقط متن را مشاهده کنند صفحه شما بهتر و مفید تر نمایش داده شوند.
نکات پایه ای – اطلاعات مفید :
اگر یک فایل HTML حاوی 10 تصویر باشد ، برای نمایش کامل صفحه به 11 فایل احتیاج است. بارگیری تصاویر وقت گیر است ، بنابر این توصیه من این است که از تصاویر به دقت استفاده کنید.
مثال های بیشتر :
عکس زمینه
این مثال، روش نمایش عکسی به عنوان زمینه را نشان می دهد.
محل نمایش عکس
به کمک این مثال می توان محل نمایش عکس، نسبت به متنی که عکس درون آن قرار دارد، را تعیین کرد.
تعیین محل نمایش عکس در پاراگراف
می خواهید عکسی را درون یک پاراگراف نمایش دهید. برای تعیین محل آن نسبت به متن پاراگراف، به این مثال توجه کنید.
تغییر اندازه عکس
این مثال روش تعیین اندازه عکس را برای نمایش، نشان می دهد.
نمایش متن جایگزین
چگونه می توان برای یک عکس متن جایگزین انتخاب کرد. زمانیکه عکس داخل صفحه کامل بار نشده و یا زمانیکه کاربر علاقه ای به دیدن عکسهای صفحه ندارد، به کمک تعیین متن جایگزین، شرحی درباره ی عکس به کاربر داده می شود. به این مثال توجه کنید.
عکس، به عنوان فراپیوند
این مثال عکسی را به یک فراپیوند تبدیل می کند.
نقشه
این مثال، روش تقسیم یک عکس به نواحی مختلف(همانند یک نقشه) را نشان می دهد. هر یک از این نواحی، یک فراپیوند هستند.
تگ های عکس :
