آموزش HTML – بخش ششم

آموزش HTML – بخش ششم

ساخت لینک با استفاده از زبان HTML

هنگام مطالعه صفحات مختلف وب با لینک‌های زیادی روبه‌رو می‌شوید. لینک‌ها تقریبا در تمام صفحات وب پیدا می‌شوند. در سایت سازان مطالب کاربردی در مورد اینکه لینک‌ها چگونه به سئو سایت کمک می‌کنند نوشته‌شده است. از طریق لینک‌ها می‌توان به صفحات مختلفی از سایت خود و یا سایت‌های دیگر منتقل شد. وقتی‌که نشانگر موس را بر روی یک هایپرلینک (متنی که لینک شده است را هایپر لینک میگوییم) قرار می‌دهید، شکل نشانگر به یکدست کوچک تغییر پیدا می‌کند.

نکته: علاوه بر متن، یک عکس و یا هر جزء از اجزاء صفحه می‌تواند به لینک تبدیل شود و با کلیک بر روی آن به صفحه دیگر منتقل شد.

ایجاد یک لینک در زبان HTML

وقتی‌که می‌خواهیم یک متن به یک عکس را به لینک تبدیل کنیم که با کلیک بر روی آن به قسمت دیگری از سایتی برویم، باید آن را درون تگ <a> قرار دهیم. این تگ دارای اتریبیوت href است که مقدار آن آدرس صفحه‌ای است که می‌خواهیم مخاطب را به آن هدایت کنیم. در هنگام آدرس‌دهی باید آدرس سایت را همراه با http:// نوشت؛ مثلا http://www.yoursite.com و این آدرس را باید درون علامت نقل‌قول قرارداد.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

 

          </head>

          <body>

 

                   <p> اگر این کدها را بر روی سیستم خود تایپ کنید و نتیجه را مشاهده کنید، با کلیک بر روی <a href="http://www.sitesazan.net"> این لینک </a>، به صفحه اصلی سایت سازان منتقل خواهید شد </p>

 

          </body>

</html>

آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5

همان‌طور که در عکس مشاهده می‌کنید، متن لینک شده به رنگ آبی تغییر رنگ می‌دهد و در زیر آن خط کشیده می‌شود.

در مثال بالا یک URL کامل را آدرس‌دهی کردیم. علاوه بر این شیوه آدرس‌دهی، آدرس‌دهی محلی (Local) نیز داریم در این روش آدرس را بدون http:// و به‌صورت نسبی می‌نویسیم. اگر بخواهیم به صفحه‌ای از وب‌سایت خود لینک بزنیم باید از آدرس‌دهی نسبی و اگر بخواهیم به طراحی سایت دیگری به‌غیراز سایت خود لینک بزنیم، از آدرس‌دهی مطلق (absolute) استفاده می‌کنیم.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

 

          </head>

          <body>

 

                   <p> فرض کنید که الان در صفحه اصلی سایت سازان هستیم. با کلیک بر روی <a href="/category/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-html-html5/"> این لینک </a> به صفحه‌ای از همین سایت منتقل خواهید شد. (چون در صفحه اصلی سایت سازان نیستیم عملا این لینک کار نخواهد کرد) </p>

                   <br>

                   <p> با کلیک بر روی <a href="http://www.w3.org/"> این لینک </a> به سایتی در اینترنت منتقل خواهید شد. </p>

 

          </body>

</html>

آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5

تغییر رنگ لینک‌ها

در مرورگرها به‌صورت دیفالت رنگ لینک‌های کلیک نشده به رنگ آبی است. وقتی‌که بر روی لینک کلیک کردید به رنگ ارغوانی تغییر رنگ خواهد داد. همچنین اگر بر روی لینک کلیک کنید و کلیک را نگه‌دارید، رنگ متن لینک شده به رنگ قرمز تبدیل خواهد شد.

می‌توان با استفاده از CSS این تنظیمات را تغییر داد. با روش Internal تنظیمات دلخواه را اعمال می‌کنیم.

در مثال زیر روبروی هر کد توضیحات مربوطه نوشته‌شده است که می‌توانید هنگام paste کردن کدها، توضیحات فارسی را حذف کنید.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <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>

 

                   <p> اگر این‌یک پاراگراف در صفحه باشد، با کلیک بر روی <br>

                   <a href="http://www.sitesazan.net"> این لینک </a>

                   <br>

                    به صفحه اصلی سایت سازان منتقل خواهید شد. </p>

 

          </body>

</html>

آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5

اتریبیوت تارگت در تگ لینک

حتما دیده‌اید که در بعضی از صفحات، هنگامی‌که بر روی یک لینک کلیک می‌کنید، صفحه مقصد در یک تب یا پنجره جدید و یا در همان صفحه باز می‌شود. این عمل را با استفاده از اتریبیوت تارگت انجام می‌دهیم. یعنی تعیین می‌کنیم که صفحه مقصد در کجا باز شود.

مقادیری که این اتریبیوت می‌تواند بگیر به‌صورت زیر است:

_blank

لینک در یک تب جدید باز شود.

 

_self

لینک در همان پنجره یا تب باز شود. این حالت به‌صورت دیفالت می‌باشد.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <style>

 

                   </style>

 

          </head>

          <body>

 

                             <p> این <a href="http://www.sitesazan.net" target="_blank"> لینک </a> در تب جدید باز می‌شود. </p> <br>

 

                             <p> این <a href="http://www.sitasazan.net" target="_self"> لینک </a> در همین تب باز می‌شود. </p>

 

 

                   </a>

 

          </body>

</html>

آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5

تبدیل یک عکس به لینک

می‌توان با قرار دادن تگ کامل <img> ( یعنی همراه با اتریبیوتها ) درون تگ <a> یک عکس را به لینک تبدیل کرد که با کلیک بر روی آن به آدرس جدیدی منتقل شد.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <style>

 

                   </style>

 

          </head>

          <body>

 

                   <p> با کلیک بر روی عکس زیر به سایت سازان منتقل خواهید شد. </p> <br>

 

                   <a href="http://www.sitesazan.net">

                                                /* به نحوه اعمال طول و عرض دقت کنید */

                             <img src="images/sitesazan.jpg" alt=" سایت سازان " style="width: 300px; height: 250px; ">

 

 

 

                   </a>

 

          </body>

</html>

آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5

وقتی‌که متنی که در سایتی منتشر می‌شود خیلی طولانی باشد، می‌توان فهرستی را ایجاد کرد که با کلیک بر روی هر عنوان به قسمت مربوطه جهش کنید.

برای این کار ابتدا باید برای هر قسمت یک id را مشخص کنید. بعد که فهرستی را که تهیه کردید به آن id لینک دهید. برای یادگیری این روش، کدهای زیر را بنویسید و در مرورگر مشاهده نمایید:

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

                   <style>

 

                   </style>

 

          </head>

          <body>

                             <p> <a href="#h16"> رفتن به‌عنوان ۱۶ </a> </p>

                             <p> <a href="#h9"> رفتن به‌عنوان ۹ </a> </p>

                             <h1> عنوان ۱ </h1>

                             <p> پاراگراف ۱ </p>

                             <br>

                             <h1> عنوان ۲ </h1>

                             <p> پاراگراف ۲ </p>

                             <br>

                             <h1> عنوان ۳ </h1>

                             <p> پاراگراف ۳ </p>

                             <br>

                             <h1> عنوان ۴ </h1>

                             <p> پاراگراف ۴ </p>

                             <br>

                             <h1> عنوان ۵ </h1>

                             <p> پاراگراف ۵ </p>

                             <br>

                             <h1> عنوان ۶ </h1>

                             <p> پاراگراف ۶ </p>

                             <br>

                             <h1> عنوان ۷ </h1>

                             <p> پاراگراف ۷ </p>

                             <br>

                             <h1> عنوان ۸ </h1>

                             <p> پاراگراف ۸ </p>

                             <br>

                             <h1 id="h9"> عنوان ۹ </h1>

                             <p> پاراگراف ۹ </p>

                             <br>

                             <h1> عنوان ۱۰ </h1>

                             <p> پاراگراف ۱۰ </p>

                             <br>

                             <h1> عنوان ۱۱ </h1>

                             <p> پاراگراف ۱۱ </p>

                             <br>

                             <h1> عنوان ۱۲ </h1>

                             <p> پاراگراف ۱۲ </p>

                             <br>

                             <h1> عنوان ۱۳ </h1>

                             <p> پاراگراف ۱۳ </p>

                             <br>

                             <h1> عنوان ۱۴ </h1>

                             <p> پاراگراف ۱۴ </p>

                             <br>

                             <h1> عنوان ۱۵ </h1>

                             <p> پاراگراف ۱۵ </p>

                             <br>

                             <h1 id="h16"> عنوان ۱۶ </h1>

                             <p> پاراگراف ۱۶ </p>

                             <br>

 

 

                   </a>

 

          </body>

</html>

 

آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5

تگ <img>

قبلا با تگ  <img> آشنا شدیم و گفتیم که برای این تگ اتریبیوتهای src ( برای آدرس پوشه‌ای که عکس در آن قرار دارد )، alt ( برای متنی که اگر عکس به هر دلیلی باز نشد این متن بجای عکس نمایش داده می‌شود )، width ( برای عرض ) و height ( برای طول )، وجود دارد. همچنین دیدیم که می‌توانیم طول و عرض را علاوه برنوشتن به‌صورت جدا از هم، هم‌زمان در اتریبیوت style بنویسیم. همچنین دیدیم که طول و عرض با px ( پیکسل ) بیان می‌شود.

در رابطه با اتریبیوت src نکات زیر را باید در نظر گرفت:

۱) می‌توان عکس را در پوشه‌ای در کنار فایل نمایه.html ذخیره کرد. به‌صورت زیر:

آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5

که در این صورت در آدرس‌دهی، ابتدا نام پوشه ( در اینجا images ) را نوشته ( مانند این‌که روی پوشه کلیک کرده و پوشه را باز می‌کنید ) و بعد نام عکس را همراه با پسوند آن مینویسید.

<img src="images/sitesazan.jpg" alt="سایت سازان" style="width: 350px; height: 250px">

2) اگر عکس در یک سرور جدا ذخیره شده باشد میتوان آدرس دقیق سرور مربوطه را در src نوشت

۳) حال فرض کنید که index.html در همان آدرس قبلی ولی در یک پوشه دیگر است به‌صورت زیر:

آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5
آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5

در این صورت اگر بخواهیم عکسی را از پوشه images انتخاب کنیم، چون فایل index.html در یک پوشه مجزاست، ابتدا باید از پوشه index خارج‌شده ( مانند خارج شدن از پوشه یعنی کلیک بر روی á در کنار نوار آدرس ) و بعد وارد پوشه images شده و عکس را انتخاب کنید.

برای خارج شدن از پوشه index در آدرس‌دهی از دونقطه استفاده می‌کنیم و بعد علامت ” /  ” و سپس وارد پوشه images شده و بعد عکس را انتخاب می‌کنیم:

<img src="../images/sitesazan.jpg" alt="سایت سازان" style="width: 350px; height: 250px">

4) می‌توانید gif هم بسازید و به همین طریق gif های دلخواه را به صفحه اضافه کنید.

شناور کردن تصویر

همان‌طور که می‌توانیم متن را چپ‌چین و یا راست‌چین و یا وسط‌چین کنیم، می‌توانیم عکس را نیز در هر گوشه از صفحه که بخواهیم قرار دهیم. این کار را با CSS و با استفاده از پراپرتی float انجام می‌دهیم. این پراپرتی را هم می‌توان مانند طول و عرض جدا نوشت و یا اینکه آن را در اتریبیوت style بنویسیم.

<!DOCTYPE html>

<html lang="en">

                   <head>

                             <meta charset="UTF-8">

                             <title> عنوان صفحه </title>

                   </head>

                   <body>

 

                   <p style="text-align: left;"> این عکس در سمت چپ است 

                   <img src="images/sitesazan.jpg" alt="سایت سازان" style="float: left; width: 180px; height: 150px"> </p>

 

                   <br>

                   <br>

                   <br>

 

                   <p style="text-align: center;"> این عکس در وسط صفحه است

                   <img src="images/sitesazan.jpg" alt="سایت سازان" style="float: center; width: 180px; height: 150px"> </p>

 

                    <br>

                    <br>

                    <br>

 

                   <p style="text-align: right;"> این عکس در سمت راست صفحه است

                   <img src="images/sitesazan.jpg" alt="سایت سازان" style="float: right; width: 180px; height: 150px"> </p>

 

                   </body>

</html>

آموزش HTML – بخش ششم | آموزش طراحی سایت | اموزش html5

علاوه بر این روش می‌توان تگ <img> را درون تگ <p> نوشت و با استفاده از اتریبیوت text-align در تگ <p> عکس را در مکان دلخواه قرارداد.

آشنایی با تگ <map>

وقتی‌که می‌خواهیم یک عکس را به چند بخش تقسیم کنیم که مخاطب با کلیک بر روی هر بخش به صفحه‌ای جدا منتقل شود، از تگ <map> استفاده می‌کنیم.

روش کار به این طریق است که ابتدا عکس موردنظر را با استفاده از تگ <img> همراه با اتریبیوتهایی که گفته شد به صفحه اضافه می‌کنیم. حال برای اتصال بین عکس اضافه‌شده و تگ <map> از یک اتریبیوت به نام usemap استفاده می‌کنیم. برای  اتربیوت usmap در تگ <img> یک نامی را همراه با # تعیین می‌کنیم: usemap:”#name”

حالا نوبت به تگ <map> می‌رسد. این تگ دارای تگ آغاز و پایان است. درون تگ آغاز با استفاده از اتریبیوت name اتصال بین تگ <map> و تگ <img> را برقرار می‌کنیم. بدین طریق که اتریبیوت name را نوشته و مقدار usemap که در تگ <img> تعیین کرده بودیم را در آن قرار می‌دهیم.

( name:”usemap_value” )

درون تگ <map>، تگ <area> به تعدادی که می‌خواهیم قرار می‌دهیم. ( فرضا می‌خواهیم عکس را به ۳ قسمت تقسیم کنیم. برای هر قسمت یک تگ <area> می‌نویسیم. یعنی ۳ تا تگ <area> باید بنویسیم. )

تگ <area> دارای ۴ اتریبیوت است:

  • Shape: برای انتخاب شکل برش. مثلا برای جدا کردن یک قسمت به‌صورت دایره، مقدار این اتریبیوت را circle قرار می‌دهیم. مستطیل: rect و برای چندضلعی poly قرار می‌دهیم.
  • Coord: این قسمت برای تعیین محدوده برش عکس استفاده می‌شود. یعنی مختصات محدوده‌ای که می‌خواهیم برش بخورد را تعیین می‌کنیم. برای تعیین این مختصات باید از نرم‌افزارهایی که بعدا با آن آشنا خواهیم شد استفاده کنید.
  • Alt: متنی که اگر عکس باز نشد، آن متن نمایش داده شود
  • Href: برای تعیین آدرس وب‌سایت

در انتخاب عکس باید دقت کنید. عکس‌های با حجم بالا سرعت لود صفحه را کاهش خواهند داد.

<!DOCTYPE html>

<html lang="en">

                   <head>

                             <meta charset="UTF-8">

                             <title> عنوان صفحه </title>

                   </head>

                   <body>

 

                                      <img src="images/sitesazan.jpg" alt="سایت سازان" style="width: 300px; height: 250px;" usemap="#sitesazan">

                                      <map name="sitesazan">

                                                <area shape="rect" coords="0,0,100,100" href="http://http://www.sitesazan.net/category/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%B3%D8%A7%DB%8C%D8%AA/" alt="آموزش طراحی سایت">

                                                <area shape="circle" coords="150,125,25" href="http://www.sitesazan.net/%D9%85%D9%82%D8%A7%D9%84%D8%A7%D8%AA-%D8%AC%D8%AF%DB%8C%D8%AF/" alt="مقالات">

 

                                      </map>

 

 

                   </body>

</html>

وقتی کدهای بالا را نوشتید عکس دلخواهی را درون صفحه قرار دهید. در کدها آدرس را ویرایش کنید و مختصات و سایز عکس را تغییر ندهید. سپس بر روی وسط عکس و یک‌بار هم بر روی گوشه سمت چپ بالا کلیک کنید. قسمت‌هایی را که با تگ <area> جدا کرده‌ایم، با قرار دادن نشانگر موس بر روی آن قسمت‌های، فلش موس به یکدست کوچک تبدیل می‌شود.

[rating itemreviewed=”آموزش HTML – بخش ششم” rating=”9.5″ reviewer=”سایت سازان” dtreviewed=”12/11/2016″ best=”10″ worst=”0″]در آموزش HTML – بخش ششم به آموزش طراحی و توسعه وب و آﻣﻮزش طﺮاﺣﻲ ﺻﻔﺤﺎت وب HTML و آموزش طراحی سایت با زبان html و اموزش html5 می پردازیم و…[/rating]

برای پرسش سوالات خود و کسب اطلاعات بیشتر در مورد طراحی سایت ، سئو ، طراحی نرم افزار موبایل و آشنایی با فرآیند انجام کار با مشاوران گروه سایت سازان در ارتباط باشید.

دسته بندی طراحی سایت در سایت سازان