HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"]
HTML[/caption]
لینک دادن در html
در زبان HTML، لینک ها معمولا شما را به صفحات دیگری می فرستند و زمانی که موس خود را روی آن ها ببرید، نشانگر موس تبدیل به «علامت دست» می شود.(ایران گستر)
تصور اشتباهی از لینک ها بین عموم مردم جا افتاده است: لینک ها، متنی هستند! لینک ها می توانند متن، تصویر یا هر عنصر دیگر HTML باشند و تنها محدود به متن نمی شوند.(
ایران گستر)
ساختار کلی لینک ها در زبان HTML از این قرار است:
|
|
<ahref="url">link text</a>
|
همانطور که می بینید برای ایجاد لینک ها از تگی به نام <a> استفاده می شود. مثال زیر را ببینید:(ایران گستر)
|
|
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<pdir='rtl'align='center'><ahref="https://www.roxo.ir/series/html-tutorials/">دورهیآموزشیصفرتاصدHTML</a></p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
لینکی که در مثال بالا ساختیم، شما را مستقیما به صفحه ی دوره ی آموزشی HTML در وب سایت روکسو می برد؛ attribute ای به نام href وجود دارد که آدرس لینک مورد نظرتان را باید در آن قسمت قرار دهید و متنی که بین دو تگ آغازی و پایانی <a> نوشته می شود قسمتی از متن است که کاربر مشاهده می کند.(ایران گستر)
توجه: اگر در پایان آدرس لینک ها از علامت forward slash (یعنی /) استفاده نکنید، ممکن است 2 درخواست به سمت سرور ارسال کنید! البته بسیاری از سرورها به طور خودکار علامت slash را به آخر
آدرس لینک اضافه می کنند و سپس درخواست را پردازش می کنند اما کار از محکم کاری عیب نمی کند.(
ایران گستر)
نکته: ما دو علامت slash داریم؛ یکی از آن ها forward slash است (این علامت ->
/) و دیگری back slash است (این علامت ->
\). دلیل نام گذاری آن ها به forward (جلو) و back یا backwards (عقب) از این جهت است که سر علامت اول رو به جلو بوده و سر دومی رو به عقب است!(
ایران گستر)
مثال بالا از absolute path یا full path استفاده می کند که در فارسی با نام های آدرس مطلق و آدرس کامل شناخته می شوند. در این نوع آدرس دهی ها، آدرس کامل یک لینک به href داده می شود اما اگر لینک های شما به وب سایت خودتان برمی گردد، می توانید قسمت اول آدرس را به آن ندهید. مثال:(ایران گستر)
|
|
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<pdir='rtl'align='center'><ahref="series/html-tutorials/">دورهیآموزشیصفرتاصدHTML</a></p>
</body>
</html>
|
آدرس وب سایت (نام دامنه ی اصلی) به صورت خودکار به لینک اضافه خواهد شد.
ظاهر لینک ها
در تمام مرورگرها ظاهر پیش فرض لینک ها از این قرار است:(ایران گستر)
- لینک هایی که تا به حال باز نشده باشند زیرخط (underline) دارند و به رنگ آبی هستند.
- لینک هایی که حداقل یک بار باز شده باشند زیرخط داشته و بنفش هستند.
- لینک های active (به معنی «فعال») نیز زیرخط داشته و به رنگ قرمز هستند.
لینک های active به معنی لحظه ای است که کلیک چپ را روی لینک نگه داشته اید، اما هنوز رهایش نکرده اید تا به صفحه ی مورد نظر منتقل شوید. می توانید به خروجی مثال قبلی مراجعه کنید و روی لینک مورد نظر کلیک چپ را نگه دارید تا متوجه تغییر رنگ لینک ها بشوید.(ایران گستر)
شما می توانید این ظاهر را با استفاده از CSS تغییر دهید:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!DOCTYPEhtml>
<html>
<head>
<style>
a:link {
color:green;
background-color:transparent;
text-decoration:none;
}
a:visited {
color:pink;
background-color:transparent;
text-decoration:none;
}
a:hover {
color:red;
background-color:transparent;
text-decoration:underline;
}
a:active {
color:yellow;
background-color:transparent;
text-decoration:underline;
}
</style>
</head>
<body>
<h2>Link Colors</h2>
<p>You can change the defaultcolors of links</p>
<ahref="html_images.asp"target="_blank">HTML Images</a>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اگر به خروجی این کد مشاهده کنید، متوجه می شوید تمام رفتارهای لینک را تغییر داده ایم. اگر متوجه کدهای CSS نمی شوید جای نگرانی نیست، کافی است دوره ی آموزشی CSS ما را دنبال کنید. این مثال ها تنها برای این آورده شده اند که شما با قدرت CSS و همکاری اش با HTML آشنا شوید.(ایران گستر)
حالا که بحث از قدرت CSS شد، خوب است بدانید که می توانید لینک ها را به شکل دکمه در بیاورید!.به مثال زیر نگاه کنید:(ایران گستر)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPEhtml>
<html>
<head>
<style>
a:link, a:visited {
background-color:#f44336;
color:white;
padding:15px25px;
text-align:center;
text-decoration:none;
display:inline-block;
}
a:hover, a:active {
background-color:red;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<p>Alink styled asabutton:</p>
<ahref="default.asp"target="_blank">Thisisalink</a>
</body>
</html>
|
مشاهده ی خروجی در JSBin
زمانی که به خروجی کد بالا مراجعه کنید، متوجه می شوید که با استفاده از کدهای CSS یک لینک عادی را به شکل یک دکمه در آورده ایم(ایران گستر)
نحوه ی باز شدن لینک ها
شما با استفاده از Attribute ای به نام target می توانید تعیین کنید که لینک مورد نظر چطور باز شود:(ایران گستر)
- اگر به
target مقدار blank_ را بدهید، کاربر با کلیک روی لینک به یک tab جدید در مرورگر منتقل شده و لینک در آن tab برایش باز می شود.
- اگر به
target مقدار self_ را بدهید، لینک در صفحه ی فعلی باز می شود که حالت پیش فرض مرورگر ها است.
- اگر به
target مقدار parent_ را بدهید، لینک در frame پدر باز می شود.
- اگر به
target مقدار top_ را بدهید، کاربر با کلیک روی لینک به یک پنجره ی جداگانه (window و نه tab) منتقل شده و لینک در آنجا برایش باز می شود.
- اگر به
target مقدار framename را بدهید، لینک در یک frame نام گذاری شده باز می شود.
دو مثال از موارد بالا میزنیم. لینک زیر در یک tab جداگانه باز خواهد شد:(ایران گستر)
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<ahref="https://www.roxo.ir/plus/"target="_blank">انتقالبهصفحهیاصلیروکسوپلاس</a>
<p>Ifyou set the target attribute to"_blank",the link will open inanewbrowser window ortab.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اما در مثال بعدی میخواهیم لینک را در همان صفحه باز کنیم:(ایران گستر)
1
2
3
4
5
6
7
8
9
10
11
12
|
<!DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<ahref="https://www.roxo.ir/plus/"target="_self">انتقالبهصفحهیاصلیروکسوپلاس</a>
<p>Ifyou set the target attribute to"_blank",the link will open inanewbrowser window ortab.</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اگر در این مثال روی لینک کلیک کنید، دیگر به Tab جدیدی منتقل نمی شوید بلکه لینک در همان صفحه برایتان باز می شود.
سوال: frame چیست؟ مقدار top_ که به آن مربوط می شود چه کاری انجام می دهد؟(ایران گستر)
پاسخ: هنوز به مبحث frame ها در HTML نرسیده ایم اما اگر بخواهم به صورت کوتاه توضیح دهم همان JSBin را برایتان مثال می زنم. اگر به خروجی مثال قبل سر زده باشید، متوجه می شوید صفحه ی ما به 2 قسمت تقسیم شده است؛ قسمت سمت چپ حاوی کد ها است و قسمت سمت راست حاوی خروجی آن ها. به هر کدام از این قسمت ها یک frame (به معنی «قاب») می گویند.
زمانی که روی لینکِ موجود در سمت راست کلیک کنید می بینید که سایت در همان frame سمت راست باز می شود. اگر کد قبل را ویرایش کنیم و به target مقدارِ top_ را بدهیم، صفحه ی JSBin کاملا از بین می رود و لینک جدید تمام صفحه را می گیرد.(ایران گستر)
تصاویر لینک دار
همانطور که گفتیم لینک ها به متن محدود نیستند و می توانند از نوع تصویر باشند. به مثال زیر توجه کنید:(ایران گستر)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<body>
<h2>Image Links</h2>
<p>The image isalink.You can click on it.</p>
<ahref="https://www.roxo.ir/plus/">
<img src="https://www.roxo.ir/wp-content/uploads/2019/03/roxo-plus-new.png"alt="Roxo Plus"style="border:0">
</a>
<pdir='rtl'>مااز"border:0"استفادهکردهایمتاجلویاینترنتاکسپلوررنسخهی9ونسخههایقدیمیترشرابگیریمتادورتصویرمادورگیرینکنند.
</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
اگر در خروجی، روی لوگوی روکسو پلاس کلیک کنید، به صفحه ی روکسو پلاس منتقل خواهید شد؛ تنها کاری که کردیم قرار دادن تصویر (تگ <img>) درون تگ <a> بود.(ایران گستر)
نکته: شما می توانید به لینک های خود، attribute ای به نام title بدهید. هر مقداری به title بدهید به عنوان توضیحات اضافی آن لینک محسوب می شود و اگر کاربر موس خود را روی لینک نگه دارد، این توضیحات نمایان می شوند.(
ایران گستر)
مثال:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html>
<body>
<h2>Image Links</h2>
<p>The image isalink.You can click on it.</p>
<ahref="https://www.roxo.ir/plus/"title="این لینک شما را به صفحه ی روکسو پلاس خواهد برد">
<img src="https://www.roxo.ir/wp-content/uploads/2019/03/roxo-plus-new.png"alt="Roxo Plus"style="border:0">
</a>
<pdir='rtl'>مااز"border:0"استفادهکردهایمتاجلویاینترنتاکسپلوررنسخهی9ونسخههایقدیمیترشرابگیریمتادورتصویرمادورگیرینکنند.
</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
در این مثال باید موس خود را روی لوگوی روکسو پلاس نگه دارید تا توضیحات title نمایش داده شود.
ایجاد bookmark ها
لینک ها همیشه شما را به صفحات دیگر منتقل نمی کنند. برخی اوقات می توانید از لینک ها استفاده کنید تا کاربر را به قسمت های مختلف یک صفحه منتقل کنند. معمولا این کار را برای صفحات بسیار طولانی انجام می دهند. یک مثال میزنم:(ایران گستر)
ابتدا به عنصر دلخواه خود attribute ای به نام id میدهیم:
|
|
<h2 id="C4">Chapter4</h2>
|
سپس لینکی در همان صفحه ایجاد می کنیم و به href آن مقدار id عنصر اولیه را به همراه علامت # می دهیم:
|
|
<ahref="#C4">Jump toChapter4</a>
|
حالا اگر روی آن لینک کلیک کنیم به قسمت مورد نظر (در این مثال همان chapter 4) منتقل می شویم:(ایران گستر)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
<!DOCTYPE html>
<html>
<body>
<p><ahref="#C4">Jump toChapter4</a></p>
<h2>Chapter1</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter2</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter3</h2>
<p>Thischapter explains ba bla bla</p>
<h2 id="C4">Chapter4</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter5</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter6</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter7</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter8</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter9</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter10</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter11</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter12</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter13</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter14</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter15</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter16</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter17</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter18</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter19</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter20</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter21</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter22</h2>
<p>Thischapter explains ba bla bla</p>
<h2>Chapter23</h2>
<p>Thischapter explains ba bla bla</p>
</body>
</html>
|
مشاهده ی خروجی در JSBin
به خروجی این کد بروید و روی لینک اول صفحه کلیک کنید (سمت راست). مشاهده می کنید که شما را مستقیما به chapter 4 می برد و دیگر نیازی به اسکرول کردن های متوالی نیست. این قابلیت باعث می شود کاربر راحت تر به مطالب سایت شما دسترسی پیدا کند (البته اگر مقاله ی شما آنچنان حجیم و طولانی باشد که پیدا کردن قسمت های خاص در آن سخت باشد). همچنین کار رفرنس یا ارجاع دادن دیگر سایت ها به سایت خود را راحت تر می کنید، چرا که دیگر سایت ها می توانند به قسمتی از سایت شما که مد نظر دارند ارجاع دهند نه تمام مقاله‌تان.(ایران گستر)
یکی از مثال های عملی آن را در صفحه ی توضیحات تگ <a> از توسعه دهندگان Mozilla می بینید. اگر روی این لینک کلیک کنید شما را مستقیما به صفحه ی تگ <a> می برد اما اگر روی این لینک کلیک کنید شما را به قسمت Accessibility concerns از همان صفحه می برد (اسکرول برای شما انجام شده است و دیگر در ابتدای صفحه نخواهید بود.(ایران گستر)
:: بازدید از این مطلب : 21
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
عضو شوید
عضویت سریع
آمار مطالب
آمار بازدید
وقتی بعد از 100 بار ویرایش کد ها، باز هم چند تا باگ توی برنامه ات می بینی.[/caption]
مثالی از یک صفحه ی HTML خالی و ساده در مرورگر Chrome[/caption]
کدنویسی ساده HTML در notepad
ذخیره ی فایل notepad به شکل یک سند HTML
باز کردن فایل ساده ی HTML در مرورگر کروم
صفحه ی مربوط به encoding در ایران از ویکی پدیا
