ساختن لینک به نقاط مختلف یک صفحه

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

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

در این موارد شما می توانید از پیوندهای نامگذاری شده که در قسمتهای مشخصی از صفحه شما قرار دارند که شما می خواهید به آن نقاط لینک بسازید استفاده کنید. شما می توانید به هر نقطه از صفحه لینک بسازید اما فعلاً در مورد لینک به بالای صفحه توضیح می دهیم.

برای این کار به بالای قسمت BODY در متن HTML خود بروید ( درست بعد از تگ BODY )

اکنون این تگ را تایپ کنید:

شما می توانید هر نامی را بین دو دابل کوت بنویسید. نوشتن top کار ما را برای درک بهتر آسان می کند.

حالا به جایی در قسمت BODY بروید که می خواهید از آنجا لینکی به بالای صفحه ایجاد کنید.

این فرمان را تایپ کنید:

اکنون وقتی لینک بازگشت به بالا را کلیک کنید به بالای صفحه می روید.

علامت # به مرورگر می فهماند که مقصد پیوندی نامگذاری شده در همین صفحه است. اگر شما یک پیوند با نام "UP" ساخته بودید اکنون باید از "up#" به جای "top#" استفاده می کردید.

شما می توانید در هر کجای صفحه یک پیوند نامگذاری شده بسازید و به وسیله یک لینک از قسمتهای دیگر به آن قسمت بازگردید.

با استفاده از این روش نه تنها می توانید لینکی بسازید که بازدید کننده با کلیک بر روی آن به قسمت دیگری از همان صفحه برود، بلکه می توانید از این روش در لینکهایی که در دیگر صفحات قرار دارند استفاده کنید و بازدید کننده را به قسمت مشخصی از یک صفحه دیگر بفرستید. تنها نکته ر اینجا این است که در صفحه مقصد باید لینکهای نامگذاری شده وجود داشته باشند و از این نامگذاری در لینکی که رد صفحه مبدأ قرار دارد استفاده شود.

برای مثال اگر شما لینک زیر را در صفحه خود قرار دهید با کلیک بر روی آن می توانید بخش پایینی این صفحه را مشاهده کنید و باز دید خود را از پایین این صفحه شروع کنید. ( ما یک لینک نام گذاری شده با نام bottom# در پایین این صفحه قرار داده ایم ) :

استفاده از متن جایگزین (کامنت) برای تصاویر

از شناسه alt برای وارد کردن متن جایگزین برای عکس در تگ <img> استفاده می شود. موقعی که مرورگر به هر دلیلی نتواند عکس موجود در صفحه شما را نمایش دهد به جای آن این کامنت را نشان می دهد. و می تواند به بیننده بفهماند که چه چیزی را از دست داده است.

از این شناسه مانند مثال زیر استفاده می شود :

این فرمان را در تگ تصویر (IMG) قرار دهید، فاصله بین دو فرمان را فراموش نکنید. مانند زیر:

ما این کامنت را به عنوان جانشین عکس در تگ IMG وارد می کنیم. تا هر وقت عکس به نمایش در نیامد این کامنت به نمایش درآید.

 در سطر زیر نشان می توانید یک کامنت جایگزین را ببینید چون عکس اصلی به نمایش در نمی آید (در اینجا عکس به نمایش در نمی آید چون در مسیر مربوطه چنین عکسی وجود ندارد):

توصیه می کنیم تا حد امکان برای عکسهای صفحه خود از این کامنت استفاده کنید ( البته برای نه برای عکسهای تزئینی ). در این صورت صفحه شما می تواند برای تمام کاربران مفید باشد. چون ممکن است به هر دلیلی برخی از کاربران امکان مشاهده تصاویر صفحه شما را نداشته باشند.

یکی از این دلایل که در کشور ما هم مصداق دارد عدم دسترسی به اینترنت با سرعت بالا و استفاده از خطوط تلفن برای دسترسی به اینترنت است. در این رابطه تقریباً تمامی مرورگرها، این امکان را در اختیار کاربر قرار می دهند که از بارگذاری تصاویر در صفحات جلوگیری کنند، تا بتوانند از متن صفحه را سریعتر مشاهده کنند، یا فایلهای خود را با سرعت بیشتری داتلود کنند.

موتورهای جستجو هم وقتی که صفحه ای را ایندکس می کنند نمی توانند تصاویر آنرا ببینند و فقط نام تصویر و کامنت جایگزین آنرا می خوانند پس برای تصاویری که به موضوع صفحه شما مرتبط هستند و یا می خواهید بازدید کنندگان بتوانند در موتورهای جستجو آنها را پیدا کنند حتماً از این کامنت استفاده کنید.

نظر یادتون نره؟

آموزش قرار دادن یک تصویر در زمینه صفحه

برای قرار دادن یک تصویر به عنوان زمینه صفحه باید از تگ BODY استفاده کرد.وقتی که تگ BODY را پیدا کردید ممکن است به صورت ساده باشد یا با فرمانهایی که به آن اضافه شده است. مانند زیر:

کاری که شما باید انجام دهید، اضافه کردن یک شناسه به تگ BODY است. بنابراین یک فاصله بعد از آخرین فرمان بگذارید و سپس این فرمان را وارد کنید:

اکنون تگ BODY شما باید به این صورت باشد (اگر فرمانهای دیگری به آن اضافه نکرده باشید):

حالا باید آدرس عکس را بین دو دابل کوت قرار دهیم. برای این کار دو راه وجود دارد:

• برای این کار اگر صفحه و عکس در یک مسیر هستند می توانیم فقط نام کامل عکس با پسوند آنرا بنویسیم. مثلاً:

• اگر از قرار داشتن صفحه و عکس در یک مسیر مطمئن نیستید یا عکس و صفحه در یک مسیر نیستند می توانید از آدرس کامل عکس استفاده کنید.

تصاویر برای زمینه باید با یکی از دو فرمت GIF یا JPG باشند. اگر عکس به این صورت نبود باید آن را با برنامه ای مثل Paint Shop Pro یا Photoshop به یکی از این فرمتها تبدیل کرد.
 

برای مثال فرض کنید یک عکس با نام background.jpg داریم که در این مسیر قرار دارد: http://www.mysite.com/img . حال اگر بخواهیم صفحه ای را در پوشه ای به غیر از پوشه img در این سایت طراحی کنیم باید از آدرس کامل عکس یعنی http:www.mysite.com/img/background.jpg استفاده کنیم. و تگ BODY ما به این صورت در می آید:

ما برای تعیین تصویر زمینه این صفحه قبلاً از این تگ استفاده می کرده ایم:

اما اگر بخواهیم صفحه را به پوشه img منتقل کرده یا صفحه جدیدی را در پوشه img طراحی کنیم می توانیم از نام عکس یعنی: background.jpg استفاده کنیم و تگ BODY ما به این صورت در می آید:

برای تغییر دادن تصویر زمینه روش دیگر هم وجود دارد که استفاده از CSS است.

نظر یادتون نره؟

وارد کردن تصاویر در صفحات HTML

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

ممکن است به جای نام رنگ از معادل هگزادسیمال رنگ استفاده شده باشد. مانند زیر (این فرمانی است که من برای زمینه این صفحه از آن استفاده کرده ام):

البته ممکن است این شناسه را در تگ BODY پیدا نکنید، در این صورت یک فاصله بعد از BODY قرار داده شناسه bgcolor را وارد کنید.

برای عوض کردن رنگ زمینه نام رنگ مورد نظر خود را به جای نام رنگ در شناسه بالا قرار دهید.

به جای نام رنگ می توانید از معادل هگزا دسیمال رنگ استفاده کنید.

برای مثال اگر می خواهید رنگ زمینه به رنگ سبز درآید باید مانند زیر عمل کنید:

و یا به این صورت:

روش دیگری که برای تغییر رنگ زمینه صفحه وجود دارد استفاده از CSS است که با ورود نسخه چهارم HTML استفاده از آن رو به افزایش است.

نظر یادتون نره؟

تغییر رنگ لینکهای صفحه در حالات مختلف

اگر بخواهید رنگ لینکها را در صفحه خود تغییر دهید مانند تغییر رنگ پیش فرض متن باید تگ BODY را پیدا کنید. در تگ BODY به دنبال شناسه link بگردید. مثلاً ممکن است تگ BODY به این صورت باشد:

در تگ BODY ممکن است شناسه های دیگری هم وجود داشته باشند، مثلاً شناسه های مربوط به رنگ متن و یا رنگ زمینه. در این صورت می توانید شناسه رنگ لینک را با یک فاصله خالی با آخرین فرمان موجود در تگ BODY به این تگ اضافه کنید.

حالا برای تغییر رنگ لینکها در صفحه نام رنگ مورد نظر خود را به عنوان مقدار شناسه link وارد کنید یا از معادل هگزادسیمال رنگ به جای نام رنگ استفاده کنید.

مثلاً برای تغییر رنگ لینکها به زرد می توانیم مانند زیر عمل کنیم:

1- استفاده از نام رنگ:

2- استفاده از معادل هگزادسیمال رنگ:

حالا همه لینکهای موجود در صفحه شما به جای آبی به رنگ زرد در مرورگر ظاهر می شوند.

همین کار را می توانید برای لینکهای فعال و لینکهای بازدید شده تکرار کنید. مانند زیر:

مانند مثال بالا شناسه alink برای لینکهای فعال و vlink برای لینکهای بازدید شده استفاده می شود.

برای تغییر دیگر رنگها هم به همین صورت عمل می شود تنها نکتهای که باید مد نظر قرار گیرد این است که حتماً قبل از وارد کردن فرمان یک فضای خالی با فرمان قبلی بگذارید.

روش دیگری که برای تغییر رنگ لینکها وجود دارد استفاده از استایل و CSS است. در صورتی که برای تعیین مشخصات لینکها از استایل استفاده شود امکان افزودن ویژگیهای دیگری نظیر کادر و رنگ زمینه هم به لینکها وجود دارد.

نظر یادتون نره؟

تغییر رنگ پیش فرض متن در صفحه

برای تغییر رنگ پیش فرض متن در صفحه باید از تگ <BODY> استفاده کنید. شما باید دنبال " "=text بعد از تگ BODY بگردید. مانند این:

ممکن است به جای رنگ از ترکیبی از حروف و اعداد استفاده شده باشد. مانند زیر:

البته ممکن است هیچکدام از موارد بالا وجود نداشته باشد، یا شما بخواهید یک صفحه تازه بنویسید. در این موارد باید این فرمان اضافی را به تگ BODY خود اضافه کنید. درست مثل موارد بالا. اگر فرمانهای دیگری هم دارید می توانید این فرمان را در انتهای آنها اضافه کنید البته با قرار دادن یک فضای خالی بین فرمانها. برای نمونه به سطر زیر توجه کنید، من برای تعیین رنگ زمینه و رنگ متن این صفحه از این فرمان استفاده کرده ام:

حالا اگر می خواهید رنگ متن را تغییر دهید می توانید نام انگلیسی رنگ مورد نظر خود را به جای black بنویسید. روش دیگری که برای این کار وجود دارد استفاده از معادل هگزادسیمال رنگها است که در این روش می توانید از بین رنگهای بیشتری رنگ خود را انتخاب کنید چون ما برای تمام رنگهای مورد استفاده نمی توانیم اسم واحدی را به کار ببریم.

برای مثال اگر می خواهید رنگ متن شما زرد باشد از دو طریق می توانید به این خواسته خود برسید:

1. استفاده از نام رنگ به صورت زیر :
   
   <BODY text="yellow">
2. استفاده از معادل هگزادسیمال رنگها :
   
   <BODY text="#FFFF00">

بعد از انجام این کار هر متنی که در صفحه مرورگر شما دیده شود به رنگ زرد خواهد بود.

نظر یادتون نره؟

استفاده از لیست های HTML در صفحه

دو نمونه از پر استفاده ترین لیستها در HTML لیستهای مرتب و لیستهای نامرتب هستند. در لیستهای مرتب ترتیب بخشهای مختلف لیست مشخص می شود ولی در لیستهای نامرتب این ترتیب مشخص نمی شود.

• لیستهای نامرتب

در لیستهای نامرتب برای عناصر لیست از شماره و عدد یا حروف الفبا استفاده نمی شود. عناصر این معمولاً با یک دایره تو پر مشخص می شوند. تگ ابتدای آن <ul> است و تگ پایانی آن <ul/> است. برای جدا کردن هر بخش لیست در ابتدای آن از تگ <li> استفاده می شود. بهتر است هر تگ <li> که باز می شود با <li/> بسته شود. در زیر یک مثال برای این نوع لیست آورده شده است:

مثال بالا یک لیست بولت دار با سه بخش را به ما می دهد:

• بخش اول لیست
• بخش دوم لیست
• بخش سوم لیست

به این نکته هم توجه کنید که <li> نیازی به تگ پایانی ندارد ولی بهتر است از تگ پایانی آن یعنی <li/> استفاده شود.. فاصله متن لیست شده از ابتدای خط هم مقداری از بقیه متن بیشتر می شود. شما می توانید این فاصله را با افزودن تگ <ul> بیشتر کنید فقط به خاطر داشته باشید تگهایی را که باز کرده اید در آخر لیست ببندید.در زیر یک مثال برای این نمونه لیست آورده شده است:

نتیجه این فرمان به شکل زیر خواهد بود:

• خط اول لیست
• خط دوم لیست
• خط سوم لیست

از شناسه type می توان در تگ <ul> استفاده کرد و ظاهر لیست را تغییر داد.

• شناسه type

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

• circle
  با قرار دادن این مقدار برای لیست علامت ابتدایی هر بخش به شکل یک دایره تو خالی در می آید.

  ---

• disc
  این مقدار شکل علامت ابتدای هر قسمت از لیست را به یک دایره تو پر تغییر می دهد.

  ---

• square
  این مقدار شکل علامت لیست را به صورت یک مربع تو پر در می آورد.

به یاد داشته باشید که از شناسه type هم می توان در تگ <ul> استفاده کرد و هم در تگ <li>. در صورتی که برای تگ <ul> از این شناسه استفاده شود علامت مربوط به همه قسمتهای لیست تغییر می کند اما اگر برای تگ <li> از این شناسه استفاده شود فقط علامت مربوط به همان بخش از لیست تغییر می کند.

در مثال زیر می توانید نحوه نمایش لیست با استفاده از شناسه type را در حالات مختلف مشاهده کنید. ما از کد زیر برای ساختن این لیست آزمایشی استفاده می کنیم:

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

• قسمت اول لیست
• قسمت دوم لیست
• قسمت سوم لیست

اگر می خواهید از تگ <center> برای لیست خود استفاده کنید در این کار دقت کنید. چون ممکن است تمام سطرهای متن شما به یک اندازه نباشند. در این صورت به جای اینکه لیستی در یک خط و مستقیم داشته باشید ممکن است لیستی در هم ریخته و شلوغ به وجود آید. مانند زیر:

لیست نهایی به این صورت در صفحه دیده می شود.

اگر شما در یک صفحه بیشتر به لیستها نیاز دارید می توانید از روش بالا استفاده کنید اما باید بدانید که ممکن است ظاهر لیست در اندازه های مختلف پنجره مرورگر به هم بخورد. راه دیگری که برای جلوگیری از این به هم خوردگی وجود دارد استفاده از یک Table است که بعداً در مورد آن توضیح خواهیم داد.

• لیستهای مرتب

شما می توانید در مورد لیستهای مرتب هم مانند لیستهای نامرتب عمل کنید فقط کافیست به جای استفاده از <ul> و <ul/> از تگهای <ol> و <ol/> استفاده کنید. به یک مثال در این زمینه توجه کنید:

نتیجه به صورت لیستی شماره گذاری شده ظاهر می شود:

1. بخش اول لیست
2. بخش دوم لیست
3. بخش سوم لیست

برای کنترل تگ <ol> از چند شناسه می توان استفاده کرد

در مورد لیستهای مرتب با استفاده از شناسه start در تگ <OL> می توانیم تعیین کنیم که شماره های لیست از چه عددی شروع شود. به مثال زیر توجه کنید:

نتیجه به صورت زیر مشاهده می شود:

15. این سطر اول لیست است ولی شماره آن 15 است.

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

• "type="1
  با این شناسه بخشهای لیست با اعداد ریاضی مشخص می شوند.

  ---

• "type="A
  با استفاده از این شناسه بخشهای لیست با حروف بزرگ انگلیسی مشخص می شوند.

  ---

• "type="a
  با استفاده از این شناسه بخشهای لیست با حروف کوچک انگلیسی مشخص می شوند.

  ---

• "type="I
  با استفاده از این شناسه بخشهای لیست با حروف بزرگ یونانی مشخص می شوند.

  ---

• "type="i
  با استفاده از این شناسه بخشهای لیست با حروف کوچک یونانی مشخص می شوند.

این شناسه هم می تواند در تگ <ol> استفاده شود و هم در تگ <li> و در این مورد مانند لیستهای نامرتب عمل می کند.

در مثال زیر می توانید نحوه نمایش حالات مختلف لیست را با استفاده از شناسه type مشاهده کنید:

نتیجه به صورت زیر خواهد بود:

1. قسمت اول لیست
2. قسمت دوم لیست
3. قسمت سوم لیست
4. قسمت چهارم لیست
5. قسمت پنجم لیست
6. نظر یادتون نره؟

وارد کردن کامنت در متن اچ تی ام ال

توضیحات ( کامنتها ) می توانند وقتی که در حال نوشتن صفحه خود هستید به شما کمک کنند. مرورگرها نمی توانند کامنتها را نشان دهند پس در صفحه نهایی آنها به بیننده نشان داده نمی شوند. تنها راه مشاهده کامنتها مشاهده صفحه Source code صفحه است که با زبان HTML نمایش داده شود. با استفاده از این خاصیت شما می توانید در هنگام نوشتن یک صفحه برای خود یادداشت بگذارید تا وقتی که بعداً به آن نگاه کردید بهتر آرا درک کنید.

در مواردی که پس از گذشت مدتی از نوشتن یک صفحه نیاز به ویرایش آن صفحه باشد یا بیش از یک نفر در نوشتن یک صفحه نقش داشته باشند کامنتها می توانند در فهمیدن صفحه به طراحان آن کمک کنند.

برای نوشتن یک کامنت شما باید ابتدا این علامت > سپس علامت تعجب ! و بعد دو خط فاصله -- (دش) بگذارید. بعد از این علائم هر متنی که بنویسید توسط مرورگر نمایش داده نمی شود. تا وقتی که علامت پایان کامنت را در انتهای آن بگذارید.

علامت پایان کامنت به این صورت نوشته می شود: ابتدا دو خط فاصله -- سپس این علامت < . به مثال زیر توجه کنید:

شما می توانید کامنتها را در چندین خط بنویسید فقط به خاطر داشته باشید که علامت انتهایی را در آخر آن قرار دهید. مانند زیر:

نظر یادتون نره؟

تگهای مورد استفاده برای نمایش متن به صورتهای مختلف

تعدادی تگ وجود دارد که در هنگام کار با متن ها می توانید از آنها کمک بگیرید. تگهایی که در این قسمت مورد بحث قرار می گیرند اینها هستند: <SUB> , <SUP> , <PRE> , <NOBR , <WBR> , <BLINK>

1-    <SUB> و <SUP>

این دو تگ بیشتر در زمانی استفاده می شوند که شما می خواهید در صفحه خود معادلات ریاضی را به نمایش در آورید اما ممکن است شما برای چیزهای دیگری هم از آنها استفاده کنید.

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

استفاده از تگ <SUB> :

نتیجه به این صورت دیده می شود.از این تگ می توان برای گذاشتن اندیس برای کلمات استفاده کرد.

y₁

استفاده از تگ <SUP> :

از این روش می توانید برای گذاشتن توان برای اعداد استفاده کنید. نتیجه به این صورت خواهد بود:

25³

2-    <PRE>

از این تگ زمانی استفاده می شود که شما بخواهید همان مقدار فضای خالی که در ویرایشگر متن خود در متن HTML دارید در صفحه نهایی خود نیز داشته باشید. مثلاً وقتی که متنی را در مورد برنامه نویسی در صفحه خود می نویسید.

به این مثال توجه کنید:

 نتیجه به این صورت ملاحظه می شود:

x=1;
y=2;
if (x==1)
{
y=2;
}

در هنگام استفاده از این تگ شما نیازی به استفاده از <BR> و ;nbsp& ندارید و راحت می توانید متن خود را به همانگونه که می خواهید به نمایش در آید بنویسید.

3-    <NOBR> و <WBR>

هر متنی که بین <NOBR> و <NOBR/> قرار گیرد تا وقتی که شما به خط بعدی نروید نمی شکند و در یک خط نمایش داده می شود حتی بعد از رسیدن به پایان خط در صفحه.

به این مثال توجه کنید:

نتیجه به این صورت نمایش داده می شود:

مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، 

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

شما می توانید از تگ <WBR> در تگ بالا استفاده کنید اگر می خواهید بیش از یک خط متن بلند داشته باشید. به مثال زیر توجه کنید:

این هم نتیجه:

، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال ، مثال

4-    <BLINK>

با استفاده از این تگ می توانید متنی را به صورت چشمک زن در آورید. این تگ فقط در مرورگرهایی کارایی دارد که بر پایه Netscape ساخته شده باشند.

Opera و Firefox از جمله مرورگرهایی هستند که می توانند این تگ را نمایش دهند. درMicrosoft Internet Explorer فقط متن ساده را می توان مشاهده کرد.

اگر این تگ به جا استفاده شود می تواند توجه بیننده را به نکته خاصی جلب کند اما اگر به جا استفاده نشود می تواند آزار دهنده باشد.

 برای کارایی بیشتر می توانید آنرا با اندازه فونتی مثل 10+ استفاده کنید.

به این مثال توجه کنید:

نتیجه این تگ:

this is VERY VERY important!!!

نظر یادتون نره؟