با سلام جلسه سوم از آموزش Html در خدمت شما هستیم.
در این جلسه می خوایم در مورد لینک و آدرس دهی صحبت کنیم
لینک ها: برای درست کردن یک لینک در صفحه ی وب می توانیم از تگ <a> استفاده کنیم. تگ a یک attribute دارد به نام href که آدرس جایی که می خواهیم به آن لینک دهیم را میگیرد. برای مثال:
| نتیجه کد | کد |
 |
<html lang="en-us">
<head>
<title>ELectroProgram</title>
</head>
<body>
<a href="www.electroprogram.ir"> Click Here </a>
</body>
</html>
|
حالا اگر اجرا کنیم میبینیم که click Here را نمایش میدهد. همانطور که در شکل بالا مشخص است اگر روی click Here کلیک کنیم به آدرس سایت مورد نظرمون(الکتروپروگرام) نمی رود! دلیل این مشکل این است که چون ما بطور اشتباه آدرس دهی کردیم.
ما به دو صورت می توانیم آدرس دهی کنیم:
1- آدرس دهی مطلق یا گلوبال (Global)
2- آدرس دهی محلی
که خوده آدرس دهی گلوبال دو نوع دارد: 1- آدرس دهی مطلق روی هارد دیسک. 2- آدرس دهی مطلق بر روی وب
آدرس دهی مطلق در هارد دیسک مانند: محل فایل در دکستاب \\:C
توجه: نوع آدرس دهی به شدت نهی می شود.
حالت دوم آدرس دهی مطلق بر روی وب: مواقعی استفاده می شود که برای مثال من می خواهم در سایتم به یک چیز دیگری که خارج سایت من است لینک دهم مثلا می خواهم از سایتم به سایت گوگل لینک دهم یا به سایت یاهو لینک دهم. برای ایجاد ارتباط از //:http استفاده می کنیم.
<html lang="en-us">
<head>
<title>ELectroProgram</title>
</head>
<body>
<a href="https://electroprogram.ir/"> Click Here </a>
</body>
</html>
آدرس دهی محلی یا local: زمانی استفاده می شود که بخواهیم به صفحه ای از مجموعه ی صفحات سایت خودمان بریم
برای مثال:
یک نوت پد جدید در همان محلی که کد می نویسیم ایجاد می کنیم. من یک about.html را کنار test.html ایجاد میکنم.(هر دو فایل در دکستاپ ذخیره شده اند)
خب حالا در محیط test.html به صفحه about.html لینک می دهم.
<html lang="en-us">
<head>
<title>ELectroProgram</title>
</head>
<body>
<a href="about.html"> Click Here </a>
</body>
</html>
همانطور که مشاهده می کنید با زدن Click Here به صفحه about.html منتقل می شویم.
- title: یکی دیگر از اتریبیوت ها title است که اگر با موس روی یک متنی نگه داریم آنگاه یک توضیحی در مورد آن به ما نشان داده می شود. از title می توان همه جا استفاده کرد.
<html lang="en-us">
<head>
<title>ELectroProgram</title>
</head>
<body>
<a href="about.html" title="amozesh HTML"> Click Here </a>
</body>
</html>
- target
target عبارات مختلفی می گیرد که درحال حاظر _blank را با هم تمرین می کنیم.
عبارت “target=”_blank لینکمان را در یک تب جدید یا صفحه جدید باز می کند.
<html lang="en-us">
<head>
<title>ELectroProgram</title>
</head>
<body>
<a href="about.html" title="amozesh HTML" target="_blank"> Click Here </a>
</body>
</html>
- چند نکته دیگر باقی مانده تا این جلسه تمام شود. مورد دیگر که راجع به لینک ها باید بدانید… بگذارید ابتدا یک پاراگراف ایجاد کنم
<html lang="en-us">
<head>
<title>ELectroProgram</title>
</head>
<body>
<p style="width:200px;height:1200px;background:yellow;"> salam </p>
</body>
</html>
اگر این کد را اجرا کنیم میبینیم که متنمان طولانی شده و باید با اسکرول بالا و پایین کنیم. در چنین مواقعی اغلب در سایت ها یک آیکون فلش وجود دارد که می گوید به بالای صفحه برگردید. برای ایجاد چنین کاری ابتدا باید نقطه ای که می خواهیم به آن برگردیم مشخص کنیم، که در مثال ما بالای صفحه است پس بعد body یک نشانه از خودم می گذارم. به صورت زیر که یک لینکی را ایجاد می کنم با name
<html lang="en-us">
<head>
<title>ELectroProgram</title>
</head>
<body>
<a name="start"></a>
<p style="width:200px;height:1200px;background:yellow;"> salam </p>
</body>
</html>
و حالا در انتهای متنمان که نوشتیم یک لینک دیگری ایجاد می کنبم.
<html lang="en-us">
<head>
<title>ELectroProgram</title>
</head>
<body>
<a name="start"></a>
<p style="width:200px;height:1200px;background:yellow;"> salam </p>
<a href="#start">top</a>
</body>
</html>
خب حالا اگر این کد را اجرا کنید در انتهای متن یک کلمه top ایجاد می شود که اگر روی آن کلیک کنید به ابتدای صفحه میروید.
خدارو شکر جلسه سوم هم تموم شد تا جلسه ی بعدی روزگار بر شما خوش