سلام دوستان عزیزم، خیلی خوشحالم که از پست های html استقبال می کنید و با نظر لطفتون به من انرژی زیادی برای نوشتن میدید، در پست قبل کار با تصاویر و گرافیک در وب آشنا شدیم و قرار بود که در این پست کار با لینک را یاد بگیریم. خوب طبق معمول در این پست قصد داریم تا کار با لینک و تبدیل عکس به لینک و ویژگی های هایپرلینک و کار با لنگر و فعالیت های آفلاین با لینک و... آشنا شویم...
لینک (پیوند):
لینک ها کاربرد زیادی در صفحات وب دارن و کارشون اینه که وقتی کاربر رو لینک کلیک کرد، کاربر رو به یه جای دیگه هدایت می کنه و یا یه کاری براش انجام میده. مثلاً لینک دانلود یه فایل یا لینک تماس با من که بالای این صفحه وجود داره و با کلیک روی اون شما رو به اون صفحه هدایت میکنه.
برای قرار دادن لینک در صفحه وب از برچسب (تگ) <a> استفاده میشه. کد زیر رو در تگ <Body> بنویسید:
<a href="http://Virus32.blog.ir"> لینک سایت ویروس32 </a>
دقت کنید که در ویژگی href باید لینک صفحه ای که میخواهید کاربر به آن هدایت را بنویسید.
اگر کد بالا را در وب خود قرار داده باشید، با کلیک بر روی ' لینک سایت ویروس32 ' به آدرس Virus32.blog.ir یعنی همین سایت هدایت می شوید.
ویژگی های لینک:
1- ویژگی name نامی برای لینک مشخص می کنه. این نام باید در صفحه منحصربه فرد باشه. و فقط از حروف استفاده میشه و در نام لینک نیاز به استفاده از اعداد نیست.
2- ویژگی rel رابطه صفحه مقصد با صفحه مبدأ لینک را مشخص می کند.
3- ویژگی rev برعکس ویژگی بالاست و نوع رابطه صفحه مبدأ را با صفحه مقصد مشخص می کند.
ویژگی های متنون در وب:
ما میتونیم در قسمت Background وب، رنگ پیشفرض متون و لینک ها
و رنگ لینک زمانی که روی اون کلیک شد رو تعیین کنیم.
برای اینکار به کد زیر دقت کنید:
<Body background="image\Virus32.jpg" bgcolor="#000000" text="#00aa00" link="#aa0000" alink="#ffffff" vlink="#ff00aa">
کد بالا همون کد پس زمینه صفحه وب هست که در پست قبل یاد گرفتید، که با ویژگی bgcolor آشنا هستید که همون رنگ پس زمینه هست.
ویژگی text رنگ پیشفرض متون صفحه هست که اگه به متنی رنگ ندید، اون به رنگ پیشفرض درمیاد.
و ویژگی link رنگ پیشفرض لینک ها در صفحه هست.
ویژگی alink مربوط به لینکه که وقتی روی لینک کلیک شد، لینک موقتاً به اون رنگ درمیاد و دوباره به حالت اولش برمیگرده.
ویژگی vlink مربوط به لینکی هست که قبلاً رووش کلیک شده و توو سابقه مرورگر ثبت شده. و تا هنگامی که سابقه مرورگر رو پاک نکنید، اون لینک به همون رنگ میمونه.
تبدیل عکس به لینک
مثلاً شما میخواهید، یه عکسی در وبتون نمایش بدید که وقتی کاربر روی اون عکس کلیک کرد، وارد سایت Virus32 بشه. برای اینکار باید کد عکس رو بین تگ <a> قرار بدید. مانند کد زیر:
<a href="http://Virus32.blog.ir"><img src="image/virus32.png" width="150" height="100" /></a>
کد بالا، عکسی به نام virus32.png در پوشه image رو با عرض 150 و ارتفاع 100 به نمایش درمیاره که اگه روش کلیک بشه، سایت Virus32 رو باز میکنه.
ویژگی Target:
اگه در لینک از ویژگی تارگت استفاده کنید، وقتی که کاربر روی لینک کلیک کند، آدرس لینک را در صفحه جدید باز می کند. اگر از این ویژگی استفاده نشود صفحه ارجاع شده جایگزین صفحه جاری خواهد شد. برای استفاده از این ویژگی در ادامه کد لینک، کد target="_blank" رو مینویسیم، به کد زیر دقت کنید:
<a href="http://Virus32.blog.ir" target="_blank"> وب ویروس32 <a>
اگه از کد بالا خروجی بگیرید و روی 'وب ویروس32 ' کلیک کنید، مشاهده می کنید که این وب در صفحه جدیدی، باز میشه.
لینک Email :
میخوایم یه لینکی ایجاد کنیم که وقتی کاربر روش کلیک کرد، بتونه به آدرس تعیین شده ای ایمیل بفرسته. برای اینکه مرورگر لینک روی به عنوان لینک ایمیل بشناسه باید به جای http از mailto استفاده کنید. مثلاً کد زیر:
<a href="mailto://virus.32bat.Gmail.com"> ایمیل ویروس32<a>
اگه از کد بالا خروجی بگیرید و روی 'ایمیل ویروس32 ' کلیک کنید، مشاهده می کنید که مرورگر شمارو به فرستادن ایمیل هدایت میکند.
برای ایجاد موضوع ایمیل هم، در کد بالا بعد از قسمت ایمیل کلمه ? رو تایپ کنید و بعد اون بنویسید: subject
فعالیت های آفلاین با لینک
اگه آفلاین هستید و میخواید به طور آفلاین با لینک ها کار کنید به طوری که براتون کاری انجام بده یا شما رو به صفحه ای هدایت کنه، به نکات زیر توجه کنید.
اول یه پوشه مثلاً به نام Pages ایجاد کنید. و یه فایل html مثلاً به نام page2 درست کنید و کدای اصلی رو تووش بنویسید و هر عکس یا متنی که دلتون خواست تووش بزارید، خلاصه یه فایل html برای نمونه میخوایم. و این فایل html رو توو پوشه Pages بریزید. مثل این:
حالا کد زیر در وب اصلی تون (My Web.html) بنویسید، نه به وبی که توو پوشه Pages قرار دادید! :
<a href="Pages\page2.html"> page2.html لینک باز کردن فایل </a>
که اگه رو 'لینک باز کردن فایل 'page2.html کلیک کنید، فایل page2.html موجود در پوشه Pages باز میشه.
حالا اگه به جای آدرس "Pages\page2.html" آدرس عکس یا هرفایل دیگه ای رو بنویسید، اگه رو لینک کلیک شه، اون فایل رو باز میکنه!
ایجاد لنگر
لنگر یه نوع لینک هست که وقتی رووش کلیک میشه، کاربر رو به یه قسمت از همون صفحه هدایت میکنه، مثل صفحه پرسش و پاسخ این وب که وقتی روی 'رفتن به انتهای صفحه' کلیک میشه، کاربر رو به انتهای همون صفحه هدایت میکنه!
برای ایجاد لنگر، ابتدا به خطی که می خواهید کاربر به آن هدایت شود یک id منحصربه فرد اختصاص دهید، برای اختصاص دادن آیدی به یه خط، از ویژگی id استفاده می کنیم، برای اینکار از کد زیر استفاده می کنیم:
<p id="V32نام آیدی، مثلاً: "> مقدمه </p>
بین " " یه آیدی برای خط مقدمه تعریف می کنیم.
حالا باید، یه متنی رو به عنوان لنگر انتخاب کنیم مثلاً 'رفتن به مقدمه' که وقتی روی 'رفتن به مقدمه' کلیک شد، کاربر به خط مقدمه هدایت بشه. برای ایجاد لنگر از کد زیر استفاده می کنیم:
<a href="#V32"> رفتن به مقدمه </a>
بین " " نام آیدی که از قبل برای یک خط تعریف کردیم و میخوایم کاربر به اون خط هدایت شه رو مینویسیم. و قبل آیدی حتماً از علامت # شارپ استفاده میشه. برای تست از کدهایی که در پایین صفحه براتون قرار دادم، خروجی بگیرید.
در انتهای صفحه یه لنگر قرار دادم که اگه رووش کلیک کنید، شما رو به خط ابتدای صفحه میاره!
به کد پایین خوب دقت کنید.
از کد زیر خروجی بگیرید و در پایین صفحه، روو لنگر 'رفتن به ابتدای صفحه' کلیک کنید:
<!DOCTYPE HTML>
<HTML>
<Head>
<title> Virus32 </title>
</Head>
<Body background="image\Virus32.jpg" bgcolor="#000000" text="#00aa00" link="#aa0000" alink="#ffffff">
<p id="avirus">ابتدای صفحه</p>
<br><br>
<p align="right"><font size="4", face="tahoma", color="#(00dd00)"><b> ...به نام خدا </b> </font></p>
<p align="center"><font size="6", face="Arial", color="#(aa0000)"> World FamouS! </font><font size="7", face="Arial", color="#(ff0000)"><b> Virus 32 </b></font><font size="6", face="Arial", color="#(aa0000)"> WaS HeRe.</font></p>
<p align="center"><font size="4", face="tahoma", color="#(000006)"><b> .................................................................................. </b> </font></p>
<p align="center"><font size="5", face="tahoma", color="White"> Web:</font><font size="6", face="Arial", color="Lime "> Virus32.blog.ir </font></p>
<p align="center"><font size="5", face="tahoma", color="White"> Gmail:</font><font size="6", face="Arial", color="#(006000)"> Virus.32bat@gmail.com </font></p>
<p align="center"><font size="4", face="tahoma", color="#(000006)"><b> .................................................................................. </b> </font></p>
<p align="center"><font size="5", face="tahoma", color="#(ffccdd)"><b> gonbad-a-kabooos chBct <b></font></p>
<p align="center"><font size="3", face="tahoma", color="#(102030)"><b> Copyright 2019 <b></font></p>
<p align="center"><font size="6", face="tahoma", color="#(102030)"><b> :) <b></font></p>
<br>
<br>
<p> سلام </p>
<p> من اتکر32 هستم </p>
<p> امیدوارم از این پست خوشتون بیاد </p>
<p> و همچنین امیدوارم که این زبان و ختی زبان های دیگه برنامه نویسی رو یاد بگیرید </p>
<p> مثل: </p>
<p> سی شارپ </p>
<p> پی اچ پی </p>
<p> سی اس اس </p>
<p> جاوا اسکریپت </p>
<p> سی پلاس پلاس </p>
<p> ویژوال بیسیک </p>
<p> جاوا </p>
<p> اندروید </p>
<p> اسمبلی </p>
<p> بات </p>
<p> ...و </p>
<a href="#avirus">رفتن به ابتدای صفحه </a>
</Body>
</HTML>
البته فقط دو خط زیر برامون مهمه.
<p id="avirus">ابتدای صفحه</p>
<a href="#avirus">رفتن به ابتدای صفحه </a>دیدید که شما رو به خط ابتدای صفحه آورد. خوب، این پست هم تموم شد. امیدوارم به خوبی کار با لینک ها و... رو یاد گرفته باشید.
امیدوارم موفق باشید ...
Attacker 32 :
Virus 32 :
MR_C0D3R :