آموزش html

[se7en_love]

آموزش HTMLآنچه که قبل از یادگیری HTML لازم است بدانید:برای شروع کار با HTML شما به چیزهایی نیاز دارید که در لیست زیر آمده است:1. شما به یک ویرایشگر متن نیاز دارید. در ویندوز شما می توانید از برنامه Notepad استفاده کنید. از هر نرم افزار ویرایش متن دیگری استفاده کنید اما این نکته را در نظر داشته باشید که نرم افزار WordPad که در ویندوز وجود دارد و نرم افزارهایی مانند Microsoft Office Word و امثال آن برای نوشتن کدهای HTML مناسب نیستند چون در هنگام ذخیره کردن متن این نرم افزارها کدهایی را به آن اضافه می کنند.نرم افزار Notepad را می توانید از طریق منوی استارت در قسمت Accessories پیدا کنید یا از طریق فرمان Run با تایپ notepad در کادر Open و فشار دادن دکمه Enter.2. شما به یک مرورگر وب به انتخاب خود نیاز دارید. می توانید از Microsoft Internet Explorer استفاده کنید که با ویندوز نصب می شود یا از Opera, Mozilla Firefox و نرم افزارهای مشابه که اغلب به صورت رایگان برای دانلود در اینترنت وجود دارند.بهتر است صفحاتی را که می نویسید با چند مرورگر آزمایش کنید. زیرا در HTML قسمتهایی وجود دارد که مختص به یک مرورگر خاص است و با سایر مرورگرها کار نمی کند.3. شما به جایی برای ذخیره کردن متن خود دارید که می تواند جایی روی هارد دیسک شما، یک فلاپی دیسک یا یک سرور باشد. البته شما برای استفاده از HTML نیاز ندارید حتماً به اینترنت متصل باشید، شما می توانید با استفاده از یک مرورگر وب در کامپیوتر خود از HTML استفاده کنید.برای ذخیره کردن فایلی که با Notepad نوشته اید کافی است از منوی File گزینه Save As را انتخاب کرده و مسیری را برای ذخیره فایل انتخاب کنید و در کادر File Name در پایین پنجره Save As نام فایل را با پسوند html بنویسید. در آخر هم دکمه Save را کلیک کنید.4. اصول نوشتن صفحات HTML5. در اینجا می خواهیم به ساختار شناسه ها یا همان تگها (tag) در HTML بپردازیم. یک تگ همیشه با علامت کوچکتر ریاضی یعنی این علامت > آغاز می شود و با علامت بزرگتر < به پایان می رسد. مثلاً تگی که باعث ایجاد زیرخط کلمات می شود اینطور نوشته می شود: <U> این علامت را قبل از متنی که می خواهیم زیر آن خط کشیده شود قرار می دهیم. به این تگ ، تگ ابتدایی (Opening tag) می گویند، که عملیاتی را که شما می خواهید آغاز کنید شروع می کند. به منظور پایان دادن به زیرخط باید از یک تگ پایانی استفاده کنید. یک تگ پایانی با این علامت شروع می شود: /> بقیه تگ مانند تگ ابتدایی می باشد. برای درک بهتر این مطلب به مثال زیر توجه کنید:6. Tags and their position7. اگر بخواهید متن بالا را با زیرخط در مرورگر خود ببینید باید آنرا مطابق خط روبرو در ویرایشگر متن خود بنویسید:8. tags and their position9. نتیجه را به این صورت می بینید:10. Tags and their position11. در HTML همه تگها به یک تگ پایانی نیاز ندارند. برای مثال تگی که برای وارد کردن عکس استفاده می شود از این قبیل تگهاست، که به این صورت می باشد: 12. 13. البته بعداً در مورد این تگ توضیح خواهیم داد در اینجا فقط برای مثال این تگ را آوردیم. موارد دیگری هم با این وضعیت وجود دارند مثلاً
که برای رفتن به خط بعدی استفاده می شود، که برای ایجاد یک خط افقی به کار می رود و
که برای رفتن به پاراگراف بعدی استفاده می شود.14. در ضمن نیاز نیست که حتماً تگها با حروف بزرگ نوشته شوند. مثلاً
همان
است. البته در نسخه های جدیدتر HTML توصیه می شود کدهای HTML با حروف کوچک نوشته در XHTML هم نوشتن کدها با حروف کوچک الزامی است. فضای خالی هم بین تگها تأثیری ندارد. مثلاً :15. متن زیرخط دار 16. کد بالا همان نتیجه ای را می دهد که کد زیر دارد:17. متن زیرخط دار18. به این طریق هم اگر نوشته شود فرقی نمی کند:19. متن زیرخط دار20. قالب پایه ای یک فایل HTML مانند زیر است. ببینید می توانید کاری را که تگهای این کد انجام می دهند حدس بزنید؟ البته همه آنها را بعداً توضیح می دهیم.21. 22. html قالب اصلیهر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است23. برای درک بهتر این قسمت سعی کنید تگها را به صورت جفتی در نظر بگیرید (از جایی که باز می شوند تا جایی که بسته می شوند) اولین تگ است که علامت شروع یک متن HTML است و تگ پایانی آن است که همانطور که ممکن است حدس زده باشید نشانه پایان متن HTML است. هر چیزی در HTML باید بین این دو تگ قرار گیرد. مانند متن، دیگر تگها، عکسها و... چون این دو تگ نشان دهنده آغاز و پایان صفحه شما هستند.24. تگ بعدی است. این تگ مشخص کننده بخشی است که شما باید عنوان صفحه، کلمات کلیدی، و دیگر توضیحات خود برای این صفحه را در آن قرار دهید. این بخش با به پایان می رسد. در مثال بالا تنها قسمت HEAD عنوان صفحه بود که با TITLE مشخص می شود.25. تگ به شما اجازه می دهد برای صفحه خود یک عنوان برگزینید. این قسمت مورد استفاده موتورهای جستجو قرار می گیرد و همان متنی است که به هنگام مشاهده صفحه در نوار عنوان مرورگر نشان داده می شود. تا هنگامی که این تگ در قسمت BODY قرار نگیرد در متن شما نشان داده نمی شود. برای پایان دادن به تگ عنوان از این تگ استفاده می شود: در مثال بالا عنوانی که برای صفحه نشان داده می شود قالب اصلی HTML است. 26. تگ بخشی را آغاز می کند که در صفحه مرورگر شما به نمایش در می آید. این قسمت جایی است که ما باید کار اصلی خود را در آن انجام دهیم. برای پایان دادن به این تگ از استفاده می کنیم. در مثال بالا متنی که در صفحه مرورگر دیده می شود به صورت زیر است (البته در اینجا برای نوشته زیر رنگ و فونت نیز انتخاب شده که در قسمتهای بعد به آنها خواهیم پرداخت) :27. هر چیزی که اینجا قرار گیرد در صفحه شما قابل دیدن است28. چیزی که در اینجا می بینیم متنی است که به صورت ساده نوشته شده و در طرف چپ صفحه قرار دارد.29. نوشتن متن ها به صورت ضخیم، مورب، زیر خط دار و خط خورده30. در این درس به کار با متنها می پردازیم. ابتدا با این تگ شروع می کنیم: 31. 1- <B> این تگ باعث می شود کلماتی که بین این تگ و تگ پایانی آن قرار دارند به صورت پر رنگ و بولد (Bold) دیده شوند. به مثال زیر توجه کنید:32. متنی که اینجا قرار بگیرد به صورت بولد نمایش داده می شود33. مثال بالا به صورت زیر دیده می شود:34. متنی که اینجا قرار بگیرد به صورت بولد نمایش داده می شود 35. بیایید با تگهای دیگری ادامه دهیم:36. ________________________________________37. 2- زیرخط (Underline):38. این متن با زیر خط مشاهده می شود39. این هم نتیجه:40. این متن با زیر خط مشاهده می شود 41. ________________________________________42. 3- حروف کج (Italic):43. این متن به صورت مورب دیده می شود44. و نتیجه به این صورت است:45. این متن به صورت مورب دیده می شود46. ________________________________________47. 4- حروف خط خورده:48. این متن به صورت خط خورده دیده می شود49. متن در مرورگر به این صورت دیده می شود:50. این متن به صورت خط خورده دیده می شود 51. ________________________________________52. 5- وسط چین:53. این متن در وسط خط نوشته می شود54. نتیجه کد:55. این متن در وسط خط نوشته می شود56. ________________________________________57. شما می توانید بیشتر از یک فرمان را برای یک متن اجرا کنید. مثلاً وقتی که می خواهید متنی به صورت پر رنگ و کج نوشته شود. برای این کار هر دو تگ ابتدایی را برای متن در ابتدای آن و تگهای پایانی را در جایی که می خواهیم پایان پر رنگی و کجی متن باشد قرار می دهیم.58. با این مثال توجه کنید:59. این متن به صورت کج و پر رنگ دیده می شود60. نتیجه هم به این صورت دیده می شود:61. این متن به صورت کج و پر رنگ دیده می شود62. آیا ترتیب قرار گرفتن تگهای پایانی مهم است؟ در پاسخ باید گفت در مثال بالا خیر، اما مواردی وجود دارد که ترتیب قرار گرفتن تگها مهم است مثلاً قرار گرفتن تگ پایانی قبل از اشتباه است. شما با تمرین و تجربه می توانید این نکته را فرا بگیرید. شما می توانید برای جلو گیر از اشتباه HTML را به صورت زیر بنویسید:63. این متن به صورت پر رنگ و کج دیده می شود 64. اما این روش خسته کننده است. در اینجا مهم نیست تگها به چه صورت باز و بسته شوند. اما نکته مهمی که باید در نظر داشته باشید این است که متنها تحت تأثیر تگهایی که قبل از آنها باز شدهاند و بسته نشده اند قرار می گیرند. تأثیر یک تگ تمام می شود وقتی که تگ بسته شود.65. مثال زیر را در نظر داشته باشید:66. این متن پر رنگ، کج و دارای زیرخط است67. این نتیجه را به ما می دهد:68. این متن پر رنگ، کج و دارای زیرخط است69. اما این یکی:70. این متن پر رنگ، کج و دارایزیرخط است71. این نتیجه را به ما می دهد:72. این متن پر رنگ، کج و دارایزیرخط است73. همان طور که دیدید متن بولد و ایتالیک زودتر از متن زیرخط دار به پایان رسید و این به این دلیل است که تگهای پایانی بولد ()و ایتالیک () زود تر نوشته شدند و انتهای متن فقط توسط تگ زیرخط () تحت تأثیر قرار دارد.74. متنها به صورت پیش فرض در سمت چپ صفحه به نمایش در می آیند. اما با استفاده از می توان آنها را در وسط صفحه به نمایش در آورد. این تگ را هم می توان با دیگر تگها ترکیب کرد و نتایج جابی گرفت. به مثال زیر توجه کنید:75. به این مثال توجه کنید76. و این هم نتیجه آن:77. به این مثال توجه کنید78. شما با تمرین این بخش می توانید آمادگی ورود به درس بعد که در مورد سرفصل، پاراگراف، و خطوط است را به دست آورید.نوشتن سر فصلها و پاراگراف در HTML• از تگهای سر فصل (HEADING) برای تیتر و عنوان مطالب استفاده می شود. به این مثالها توجه کنید:سرفصل بزرگ

سرفصل بزرگسرفصل 2

سرفصل 2سرفصل 3

سرفصل 3در حال کوچک شدن

در حال کوچک شدنکوچکتر

کوچکتربسیار کوچک

بسیار کوچکاز دستورات بالا می توانید برای عنوان مطالب استفاده کنید.• وقتی که تگ
در متنی وارد می شود بقیه آن خط به خط بعد منتقل می شود. در حقیقت تگ
یا همان Line Break کاری مشابه فشردن کلید Enter به همراه Shift را انجام می دهد. قابل ذکر است که این تگ نیازی به تگ پایانی ندارد. به یک مثال توجه کنید:This is the first line
Here is the second lineنتیجه مثال بالا به اینگونه است:This is the first lineHere is the second line مرورگر اصولاً تا وقتی که به کمبود فضا برای یک خط بر نخورد به خط بعدی نمی رود. اما تگ
مرورگر را مجبور می کند به خط بعدی برود.مثلاً متن زیر را در ویرایشگر متن خود بنویسید و به صورت html ذخیره کنید، فقط یک خط را در مرورگر خود خواهید دید:من،یک خطجدید می خواهمنتیجه به این صورت خواهد بود:من، یک خط جدید می خواهم برای اینکه نتیجه ای مشابه متن نوشته شده در ویرایشگر متن داشته باشیم، باید متن را به این صورت بنویسیم:من،
یک خط
جدید می خواهم این هم نتیجه:من،یک خطجدید می خواهم •
تگ پاراگراف است. این تگ باعث ایجاد یک فضای خالی عمودی بین دو خط در دو پاراگراف می شود. درست مثل اینکه شما
را دو بار تایپ کنید.از این تگ در اول پاراگراف برای تمایز دو پاراگراف استفاده می شود. به مثال زیر توجه کنید:خط اول از پاراگراف اول
خط دوم از پاراگراف اولاین هم پاراگراف جدید
و نتیجه به این صورت است:خط اول از پاراگراف اول خط دوم از پاراگراف اول این هم پاراگراف جدید تگ پاراگراف هم نیازی به تگ پایانی ندارد. اما شما می توانید برای فهم بهتر آنرا در متن خود به کار ببرید. مثلاً به این صورت:پاراگراف اول
پاراگراف دوم
ادامه پاراگراف دوم
این متن همان نتیجه ای را دارد که متن زیر دارد: پاراگراف اول
پاراگراف دوم
ادامه پاراگراف دوم
این هم نتیجه هر دو متن بالا:پاراگراف اول پاراگراف دومادامه پاراگراف دوم البته اگر می خواهید صفحه ای که طراحی می کنید معتبر باشد بهتر است از تگ پایانی پاراگراف استفاده کنید. استفاده از تگ پایانی در XHTML الزامی است. تا اینجا شما می توانید یک صفحه وب پر از متن را بنویسید. در درس بعد به اندازه فونت و رنگ متن می پردازیم.کار کردن با فونتها و رنگ و اندازه آنهادر این قسمت از درس به سراغ کار با فونتها و اندازه آنها می رویم.اندازه فونت را می توان با دستور زیر تعیین کرد:[SIZE=x]متنی که می خواهیم اندازه آنرا تعیین کنیم[/SIZE]به جای «x» عددی با علامت منفی یا مثبت قرار می گیرد. وقتی که می خواهیم یک متن بزرگتر دیده شود از علامت مثبت و زمانی که می خواهیم متن کوچکتر شود از علامت منفی استفاده می کنیم. به مثال زیر توجه کنید:این متن بزرگتر دیده می شوداین هم نتیجه تغییر سایز فونت:این متن بزرگتر دیده می شودبرای کوچکتر کردن متن نیز به همین صورت عمل می کنیم:این متن کوچکتر دیده می شوداین هم متن کوچک شده:این متن کوچکتر دیده می شوداین هم تعدادی مثال برای درک بهتر مطالب:این متن با اندازه 4 نوشته شده استاین متن با اندازه 4 نوشته شده استاین متن با اندازه 3 نوشته شده استاین متن با اندازه 3 نوشته شده استاین متن با اندازه 2 نوشته شده استاین متن با اندازه 2 نوشته شده استاین متن با اندازه 1 نوشته شده استاین متن با اندازه 1 نوشته شده استاین متن با اندازه 1- نوشته شده استاین متن با اندازه 1- نوشته شده استاین متن با اندازه 2- نوشته شده استاین متن با اندازه 2- نوشته شده استاین متن با اندازه 3- نوشته شده استاین متن با اندازه 3- نوشته شده استبرای تغییر رنگ متنها نیز می توانیم به روش زیر عمل کنیم، با این فرمان :<font color="زنگ مورد نظر">می توانیم رنگ مورد نظر خود را با نام انگلیسی آن در فرمان بالا قرار دهیم یا از معادل هگزا دسیمال رنگ به جای اسم رنگ استفاده کنیم.برای شروع با اسم رنگ شروع می کنیم:متن مورد نظرمتن نهایی:متن مورد نظرحالا از معادل هگزا دسیمال رنگ قرمز به جای نام رنگ استفاده می کنیم. البته استفاده از اسم رنگها ساده تر است اما شما ممکن است بخواهید از رنگهای پیچیده تری استفاده کنید.در مورد رنگ قرمز باید به این صورت عمل کنیم:متن مورد نظردر اینجا نتیجه با مثال قبلی یکسان است:متن مورد نظرمعادل هگزا دسیمال رنگها را باید با علامت # شروع کرد و بعد از این علامت شش حرف یا عدد دیگر قرار می گیرد. برای رنگ قرمز بعد از علامت # دو F و چهار صفر قرار می گیرد.اگر می خواهید معادل هگزادسیمال رنگها را به دست آورید اینجا را کلیک کنید. فرض کنید می خواهید رنگ و اندازه متنی را همراه با هم تغییر دهید. برای این کار می توانید از دو تگ استفاده کنید. اما به خاطر داشته باشید که هر دو را ببندید. مانند زیر:متن بزرگ و طلاییمتن بزرگ و طلاییهمچنین می توانید از شناسه های size و color در یک تگ استفاده کنید. مانند زیر:متن بزرگ و طلایی متن بزرگ و طلایی شما می توانید رنگ فونت را در تگ body تعریف کنید که بعداً به آن می پردازیم.کاراکترهای ویژه، علامتهایی که نمی توان آنها را با صفحه کلید تایپ کردآیا تا به حال موقعیتی پیش آمده که بخواهید بین دو کلمه فاصله بیشتری وجود داشته باشد. یا بخواهید علامت کپی رایت را نشان دهید. این کاراکتر های ویژه با استفاده از کدهای ویژه در صفحه شما قرار می گیرند. این کدهای ویژه با علامت & (امپرسند) شروع می شوند و با تعدادی حرف یا عدد ادامه پیدا می کنند و با ; (نقطه ویرگول) پایان می یابند. برای مثل زمانی که شما می خواهید بین دو کلمه فضای خالی اضافی بگذارید باید از کد ;nbsp& استفاده کنید که فضای خالی اضافه می کند. مطابق مثال زیر:کلمه اول کلمه دومنتیجه به این صورت خواهد بود:کلمه اول کلمه دوم فاصله اول بین کلمات با فشار دادن دکمه Space ایجاد می شود. مرورگر فاصله اول را تشخیص می دهد اما بعد از آن هر تعداد فاصله که باشد تفاوتی نمی کند و شما فقط یک فاصله را در مرورگر می بینید. افزودن کد ;nbsp& مرورگر را مجبور می کند تا بین دو کلمه فاصله اضافی بگذارد. شما با تکرار این کد می توانید به هر تعداد که بخواهید فاصله خالی ایجاد کنید.مانند زیر:کلمه اول کلمه دومنتیجه:کلمه اول کلمه دوم این فرمان چهار فضای خالی اضافی بین دو کلمه ایجاد می کند. و در مجموع پنج فضای خالی داریم.بحث بعدی ما علامت کپی رایت است. شما می توانید به همان روشی که برای فضای خالی اضافی ایجاد کردیم این علامت را نیز به وجود بیاورید. یعنی با استفاده از کد آن. کد علامت کپی رایت این است: ;copy& به این مثال توجه کنید:this page Copyright &copy; 2007 by meمتن نتیجه:this page Copyright © 2007 by meروش کار برای تمامی کاراکترهای ویژه به همین صورت است فقط کد آنها را در متن HTML قرار دهید.در جدول زیر می توانید تعدادی از این کاراکترهای ویژه را به همراه کد سازنده آنها ببینید:نام کاراکتر شکل ظاهری کاراکتر کد سازنده کاراکترامپرسند & &علامت کپی رایت © &copy;علامت ثبت شده ® &reg;علامت تجاری ™ &trade;علامت کوچکتر از < <علامت بزرگتر از > >علامت خنجر † &dagger;-------------------- » &raquo;-------------------- « &laquo;خط فاصله ام — —علامت درجه ° &deg;یک چهارم ¼ &frac14;یک دوم ½ &frac12;سه چهارم ¾ &frac34;نقطه میانی • &middot;علامت تعجب وارونه ¡ &iexcl;علامت یورو € &euro;علامت پوند انگلیس £ &pound;علامت تقسیم ÷ &divide;علامت رادیکال √ &radic;ایجاد پیوند به دیگر صفحات با HTMLدر این بخش ایجاد لینک به بقیه صفحات را مورد بررسی قرار می دهیم.برای ایجاد لینک از تگ زیر استفاده می کنیم:متن لینکتگ نشانه لینک است. شناسه href مشخص کننده آدرس لینک می باشد، نشانه بسته شدن تگ است. متنی که بین این دو تگ ابتدایی و پایانی نوشته می شود متنی است که در صفحه شما به عنوان یک لینک دیده می شود. مثلاً اگر می خواهید به یک صفحه وب مثلاً صفحه اصلی سایت ما با این آدرس: http://www.neopersia.org/html/index.html لینکی را در صفحه خود داشته باشید باید فرمان زیر را در قسمت body صفحه خود در جایی که می خواهید لینک به نمایش درآید قرار دهید:متن نمونه برای لینکلینک در صفحه شما به این صورت دیده می شود:متن نمونه برای لینک لینکی را که با فرمان بالا ساخته اید به صورت رنگی (بسته به تنظیمات مرورگر رنگ آن تعیین می شود) و زیرخط دار به وجود می آید. که این خصوصیات نشانه آن است که یک متن لینک است و وقتی که نشانگر ماوس را بر روی آن قرار دهید به شکل دست در می آید. البته هر متنی که رنگی بود و دارای زیر خط بود لزوماً نباید یک لینک باشد. شکل نشانگر ماوس در اینجا به کمک ما می آید.اگر شما لینکی را که با این روش به وجود آمده کلیک کنید به صفحه مورد نظر می روید. با این روش شما می توانید به هر صفحه ای لینک بسازید چون آدرس کامل آنرا در لینک قرار داده اید. برای مثال شما می توانید برای صفحات سایت خود در صفحه اصلی با این روش لینکهایی بسازید.اگر همه فایلهای شما مانند صفحه ای که لینک در آن قرار دارد در یک پوشه باشند شما می توانید به جای آدرس کامل صفحه مقصد از روش میانبری استفاده کنید و فقط نام فایل مورد نظر را به جای آدرس کامل آن بنویسید.در مثال زیر فرض بر این است که هر دو صفحه مبدأ و مقصد لینک در یک پوشه قرار دارند. برای نمونه سرفصل آموزش مقدماتی HTML در همان پوشه ای قرار دارد که این صفحه قرار دارد. نام این صفحه index.php است. برای ایجاد یک لینک در این صفحه می توانیم به اینگونه عمل کنیم:متن نمونه برای لینکلینک حاصل شده:متن نمونه برای لینک هر دو روش بالا یک نتیجه را دارند اما در روش دوم زحمت نوشتن کمتر است.اگر شما شک دارید یا مطمئن نیستید که هر دو صفحه در یک پوشه قرار دارند حتماً از آدرس کامل استفاده کنید. چون در این روش مهم نیست که صفحات مربوط به چه سایتی باشند.شناسه دیگری که می توانید در تگ لینک به کار ببرید title است. با استفاده از این شناسه می توانید عنوانی را برای لینک انتخاب کنید و این عنوان در هنگامی که بازدید کننده کاوس خود را روی لینک قرار می دهد به نمایش در نمی آید. به مثال زیر توجه کنید:آموزش CSS به زبان فارسیماوس خود را روی لینک زیر قرار دهید تا نتیجه را مشاهده کنید:آموزش CSS به زبان فارسی از شناسه های دیگری نیز در تگ لینک می توان استفاده کرد که نحوه نمایش لینک در صفحه را تعیین می کنند. برای اطلاعات بیشتر صفحه باز کردن لینک در پنجره جدید را مطالعه کنید. وارد کردن تصاویر در صفحات HTMLآیا شما می خواهید یک عکس را به صفحه خود اضافه کنید؟ برای این کار باید از تگ زیر استفاده کنید:در این تگ IMG نشانه قرار گرفتن تصویر در صفحه و SRC آدرس محل قرار گرفتن فایل عکس است. حتماً لازم نیست این عکس مربوط به سایت شما باشد یا در سرور شما قرار داشته باشد، شما می توانید هر عکسی که در اینترنت قابل دسترسی باشد استفاده کنید (اگر قصد دارید صفحه خود را در یک سایت اینترنتی قرار دهید) . شما می توانید فقط نام فایل را به جای آدرس کامل بنویسید اگر صفحه ای که عکس باید در آن قرار گیرد و خود عکس در یک پوشه قرار داشته باشند.مثلاً اگر عکس شما در این آدرس قرار دارد http://www.example.com/images/image.gif و صفحه ای که در حال ویرایش آن هستید در پوشه ای غیر از این قرار دارد شما باید تگ زیر را برای اضافه کردن عکس به صفحه خود به کار ببرید:اگر فایل html و عکس هر دو در یک پوشه باشند می توانید برای راحتی در تایپ کردن از این تگ استفاده کنید:پسوند فایل حتماً نباید gif. باشد. یعنی شما می توانید از فرمتی مثل jpg. نیز استفاده کنید. این دو فرمت از بقیه پر استفاده تر هستند. اگر شما عکسی با فرمتی غیر از این دو فرمت دارید می توانید از برنامه های ویرایش عکس از قبیل فتوشاپ برای تبدیل کردن آنها استفاده کنید.برای نمونه من می خواهم یک عکس را با نام learn_html.gif را که در پوشه همین صفحه قرار دارد را به این صفحه اضافه کنم. در اینجا از این تگ استفاده کرده ام: با نوشتن این تگ، این تصور را در صفحه نهایی می بینیم: به این ترتیب یک تصویر را در سمت چپ صفحه خواهیم دید (در صورتی که صفحه ما چپ به راست باشد). اگر می خواهید تصویر در مرکز صفحه ( وسط خط ) قرار گیرد باید از تگ در اطراف تگ تصویر استفاده کنید. مانند زیر:تصویر به دست آمده به صورت زیر است: روشهای دیگری هم برای نمایش عکس در وسط صفحه وجود دارد که با توجه به کم کاربرد شدن تگ در نسخه چهارم HTML از آنها استفاده می شود. مثلاً می توان از تگ <div> با شناسه "align="center استفاده کرد. به خاطر داشته باشید که آدرس محل عکس و نام آن به حروف کوچک و بزرگ حساس هستند. پس ممکن است اگر به جای image.jpg از IMAGE.JPG استفاده کنید ممکن است مرورگر شما عکسی را در صفحه نشان ندهد. پس در نوشتن آنها دقت کنید. در مورد اضافه کردن عکسها به صفحه بعداً با جزئیات بیشتری توضیح می دهیم. تا اینجا یاد گرفتیم چگونه یک عکس را به صفحه اضافه کنیم و نحوه قرار گیری آنرا در صفحه تعیین کنیم.تگهای مورد استفاده برای نمایش متن به صورتهای مختلفتعدادی تگ وجود دارد که در هنگام کار با متن ها می توانید از آنها کمک بگیرید. تگهایی که در این قسمت مورد بحث قرار می گیرند اینها هستند: , , , سپس علامت تعجب ! و بعد دو خط فاصله -- (دش) بگذارید. بعد از این علائم هر متنی که بنویسید توسط مرورگر نمایش داده نمی شود. تا وقتی که علامت پایان کامنت را در انتهای آن بگذارید.علامت پایان کامنت به این صورت نوشته می شود: ابتدا دو خط فاصله -- سپس این علامت < . به مثال زیر توجه کنید:شما می توانید کامنتها را در چندین خط بنویسید فقط به خاطر داشته باشید که علامت انتهایی را در آخر آن قرار دهید. مانند زیر:استفاده از لیست های HTML در صفحهدو نمونه از پر استفاده ترین لیستها در HTML لیستهای مرتب و لیستهای نامرتب هستند. در لیستهای مرتب ترتیب بخشهای مختلف لیست مشخص می شود ولی در لیستهای نامرتب این ترتیب مشخص نمی شود. • لیستهای نامرتبدر لیستهای نامرتب برای عناصر لیست از شماره و عدد یا حروف الفبا استفاده نمی شود. عناصر این معمولاً با یک دایره تو پر مشخص می شوند. تگ ابتدای آن <ul> است و تگ پایانی آن است. برای جدا کردن هر بخش لیست در ابتدای آن از تگ استفاده می شود. بهتر است هر تگ
که باز می شود با بسته شود. در زیر یک مثال برای این نوع لیست آورده شده است:

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

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

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

نتیجه این فرمان به شکل زیر خواهد بود: خط اول لیست  خط دوم لیست  خط سوم لیست از شناسه type می توان در تگ <ul> استفاده کرد و ظاهر لیست را تغییر داد.• شناسه typeاز این شناسه در لیستهای نا مرتب برای مشخص کردن شکل علامت مشخص کننده هر بخش استفاده می شود. این شناسه می تواند مقادیر زیر را داشته باشد:• circleبا قرار دادن این مقدار برای لیست علامت ابتدایی هر بخش به شکل یک دایره تو خالی در می آید. ________________________________________• discاین مقدار شکل علامت ابتدای هر قسمت از لیست را به یک دایره تو پر تغییر می دهد. ________________________________________• squareاین مقدار شکل علامت لیست را به صورت یک مربع تو پر در می آورد.به یاد داشته باشید که از شناسه type هم می توان در تگ <ul> استفاده کرد و هم در تگ
. در صورتی که برای تگ <ul> از این شناسه استفاده شود علامت مربوط به همه قسمتهای لیست تغییر می کند اما اگر برای تگ
از این شناسه استفاده شود فقط علامت مربوط به همان بخش از لیست تغییر می کند. در مثال زیر می توانید نحوه نمایش لیست با استفاده از شناسه type را در حالات مختلف مشاهده کنید. ما از کد زیر برای ساختن این لیست آزمایشی استفاده می کنیم:

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

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

• بخش اول لیست که بلندتر از بقیه سطرهای لیست است
• بخش دوم لیست
• بخش سوم لیست در سطر آخر

لیست نهایی به این صورت در صفحه دیده می شود.• بخش اول لیست که بلندتر از بقیه سطرهای لیست است • بخش دوم لیست • بخش سوم لیست در سطر آخراگر شما در یک صفحه بیشتر به لیستها نیاز دارید می توانید از روش بالا استفاده کنید اما باید بدانید که ممکن است ظاهر لیست در اندازه های مختلف پنجره مرورگر به هم بخورد. راه دیگری که برای جلوگیری از این به هم خوردگی وجود دارد استفاده از یک Table است که بعداً در مورد آن توضیح خواهیم داد. • لیستهای مرتب شما می توانید در مورد لیستهای مرتب هم مانند لیستهای نامرتب عمل کنید فقط کافیست به جای استفاده از <ul> و از تگهای <ol> و استفاده کنید. به یک مثال در این زمینه توجه کنید:

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

نتیجه به صورت لیستی شماره گذاری شده ظاهر می شود:1. بخش اول لیست 2. بخش دوم لیست 3. بخش سوم لیست برای کنترل تگ <ol> از چند شناسه می توان استفاده کرد1. شناسه start در مورد لیستهای مرتب با استفاده از شناسه start در تگ <OL> می توانیم تعیین کنیم که شماره های لیست از چه عددی شروع شود. به مثال زیر توجه کنید:

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

نتیجه به صورت زیر مشاهده می شود: 15. این سطر اول لیست است ولی شماره آن 15 است. 2. شناسه typeاین شناسه در لیستهای مرتب هم مانند لیستهای نامرتب برای تغییر علامت ابتدایی هر بخش از لیست استفاده می شود که در اینجا شماره ای است که برای هر قسمت از لیست استفاده می شود. از این شناسه می توانید به صورت زیر استفاده کنید: • "type="1با این شناسه بخشهای لیست با اعداد ریاضی مشخص می شوند. ________________________________________• "type="Aبا استفاده از این شناسه بخشهای لیست با حروف بزرگ انگلیسی مشخص می شوند. ________________________________________• "type="aبا استفاده از این شناسه بخشهای لیست با حروف کوچک انگلیسی مشخص می شوند. ________________________________________• "type="Iبا استفاده از این شناسه بخشهای لیست با حروف بزرگ یونانی مشخص می شوند. ________________________________________• "type="iبا استفاده از این شناسه بخشهای لیست با حروف کوچک یونانی مشخص می شوند.این شناسه هم می تواند در تگ <ol> استفاده شود و هم در تگ
و در این مورد مانند لیستهای نامرتب عمل می کند. در مثال زیر می توانید نحوه نمایش حالات مختلف لیست را با استفاده از شناسه type مشاهده کنید:

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

نتیجه به صورت زیر خواهد بود:A. قسمت اول لیستb. قسمت دوم لیست3. قسمت سوم لیستIV. قسمت چهارم لیستv. قسمت پنجم لیستvi. شناسه های مورد استفاده در تگ bodyvii. وقتی که شما یک صفحه HTML می نویسید می توانید چیزهای زیادی را در آن با اضافه کردن شناسه هایی به تگ تغییر داد. تگ زیر را در نظر بگیرید:viii. ix. شما می توانید به هر تعداد از این شناسه ها که خواستید به این تگ اضافه کنید. اگر از شناسه ای استفاده نکنید این گزینه مطابق پیش فرض مرورگر تنظیم می شود. در زیر توضیحی برای هر کدام از شناسه های تگ BODY آورده شده است. البته در مورد هر کدام از آنها به طور کامل در درسهای بعد توضیح خواهیم داد. "bgcolor="colorxi. این شناسه رنگ زمینه صفحه شما را تغییر می دهد. شما می توانید آنرا به هر رنگی که دوست دارید تغییر دهید. فقط به جای « رنگ » در فرمان بالا اسم رنگی را که می خواهید یا معادل هگزا دسیمال آنرا قرار دهید. برای دیدن لیست رنگها به صورت هگزا دسیمال به سر فصل این بحث بروید. گزینه پیش فرض این ویژگی معمولاً سفید یا خاکستری است.xii. "text="colorxiii. این شناسه رنگ متنی را که در پنجره مرورگر به نمایش در می آید تعیین می کند. شما می توانید آنرا به هر رنگی که دوست دارید تغییر دهید. فقط به جای « رنگ » در فرمان بالا اسم رنگی را که می خواهید یا معادل هگزا دسیمال آنرا قرار دهید. برای دیدن لیست رنگها به صورت هگزا دسیمال اینجا را کلیک کنید. گزینه پیش فرض این ویژگی مشکی است.xiv. "link="colorxv. این شناسه رنگ تمام لینکهای باز نشده در صفحه را تغییر می دهد. شما می توانید آنرا به هر رنگی که دوست دارید تغییر دهید. فقط به جای « رنگ » در فرمان بالا اسم رنگی را که می خواهید یا معادل هگزا دسیمال آنرا قرار دهید. برای دیدن لیست رنگها به صورت هگزا دسیمال اینجا را کلیک کنید. گزینه پیش فرض برای لینکهای باز نشده معمولاً آبی است.xvi. "alink="colorxvii. این شناسه رنگ لینکهای فعال را در صفحه شما تعیین می کند. این لینکها آنهایی هستند که به وسیله کاربر بر روی آنها کلیک شده است. شما می توانید آنرا به هر رنگی که دوست دارید تغییر دهید. فقط به جای « رنگ » در فرمان بالا اسم رنگی را که می خواهید یا معادل هگزا دسیمال آنرا قرار دهید. برای دیدن لیست رنگها به صورت هگزا دسیمال اینجا را کلیک کنید.xviii. "vlink="colorxix. این شناسه رنگ لینکهای باز شده را در صفحه تعیین می کند. شما می توانید آنرا به هر رنگی که دوست دارید تغییر دهید. فقط به جای « رنگ » در فرمان بالا اسم رنگی را که می خواهید یا معادل هگزا دسیمال آنرا قرار دهید. برای دیدن لیست رنگها به صورت هگزا دسیمال اینجا را کلیک کنید. گزینه پیش فرض این ویژگی بنفش است.xx. "background="image.gifxxi. این شناسه یک عکس را به عنوان زمینه برای صفحه شما قرار می دهد. اگر شما از این شناسه استفاده کنید تصویر زمینه ای که انتخاب کرده اید جایگزین هر رنگی که به عنوان زمینه انتخاب کرده بودید می شود. اگر از این شناسه استفاده نکنید مرورگر از رنگی که به عنوان زمینه انتخاب کرده اید استفاده می کند و در صورت عدم انتخاب رنگ از رنگ پیش فرض خود استفاده می کند.تغییر رنگ پیش فرض متن در صفحهبرای تغییر رنگ پیش فرض متن در صفحه باید از تگ استفاده کنید. شما باید دنبال " "=text بعد از تگ BODY بگردید. مانند این:ممکن است به جای رنگ از ترکیبی از حروف و اعداد استفاده شده باشد. مانند زیر:البته ممکن است هیچکدام از موارد بالا وجود نداشته باشد، یا شما بخواهید یک صفحه تازه بنویسید. در این موارد باید این فرمان اضافی را به تگ BODY خود اضافه کنید. درست مثل موارد بالا. اگر فرمانهای دیگری هم دارید می توانید این فرمان را در انتهای آنها اضافه کنید البته با قرار دادن یک فضای خالی بین فرمانها. برای نمونه به سطر زیر توجه کنید، من برای تعیین رنگ زمینه و رنگ متن این صفحه از این فرمان استفاده کرده ام:حالا اگر می خواهید رنگ متن را تغییر دهید می توانید نام انگلیسی رنگ مورد نظر خود را به جای black بنویسید. روش دیگری که برای این کار وجود دارد استفاده از معادل هگزادسیمال رنگها است که در این روش می توانید از بین رنگهای بیشتری رنگ خود را انتخاب کنید چون ما برای تمام رنگهای مورد استفاده نمی توانیم اسم واحدی را به کار ببریم.برای مشاهده جدول رنگهای هگزادسیمال اینجا را کلیک کنید.برای مثال اگر می خواهید رنگ متن شما زرد باشد از دو طریق می توانید به این خواسته خود برسید:1. استفاده از نام رنگ به صورت زیر :2. استفاده از معادل هگزادسیمال رنگها : بعد از انجام این کار هر متنی که در صفحه مرورگر شما دیده شود به رنگ زرد خواهد بود.تغییر رنگ لینکهای صفحه در حالات مختلفاگر بخواهید رنگ لینکها را در صفحه خود تغییر دهید مانند تغییر رنگ پیش فرض متن باید تگ BODY را پیدا کنید. در تگ BODY به دنبال شناسه link بگردید. مثلاً ممکن است تگ BODY به این صورت باشد:در تگ BODY ممکن است شناسه های دیگری هم وجود داشته باشند، مثلاً شناسه های مربوط به رنگ متن و یا رنگ زمینه. در این صورت می توانید شناسه رنگ لینک را با یک فاصله خالی با آخرین فرمان موجود در تگ BODY به این تگ اضافه کنید.حالا برای تغییر رنگ لینکها در صفحه نام رنگ مورد نظر خود را به عنوان مقدار شناسه link وارد کنید یا از معادل هگزادسیمال رنگ به جای نام رنگ استفاده کنید.برای مشاهده جدول رنگها و معادل هگزادسیمال آنها اینجا را کلیک کنید.مثلاً برای تغییر رنگ لینکها به زرد می توانیم مانند زیر عمل کنیم:1- استفاده از نام رنگ:2- استفاده از معادل هگزادسیمال رنگ:حالا همه لینکهای موجود در صفحه شما به جای آبی به رنگ زرد در مرورگر ظاهر می شوند.همین کار را می توانید برای لینکهای فعال و لینکهای بازدید شده تکرار کنید. مانند زیر:مانند مثال بالا شناسه alink برای لینکهای فعال و vlink برای لینکهای بازدید شده استفاده می شود.برای تغییر دیگر رنگها هم به همین صورت عمل می شود تنها نکتهای که باید مد نظر قرار گیرد این است که حتماً قبل از وارد کردن فرمان یک فضای خالی با فرمان قبلی بگذارید.روش دیگری که برای تغییر رنگ لینکها وجود دارد استفاده از استایل و CSS است. در صورتی که برای تعیین مشخصات لینکها از استایل استفاده شود امکان افزودن ویژگیهای دیگری نظیر کادر و رنگ زمینه هم به لینکها وجود دارد. در صورت تمایل می توانید بخش مربوط به تغییر ویژگیهای لینکها با استفاده از استایل را مطالعه کنید. وارد کردن تصاویر در صفحات HTMLاگر می خواهید برای زمینه صفحه خود یک رنگ را انتخاب کنید، باید این رنگ را در تگ BODY تعریف کنید. وقتی که این تگ را پیدا کردید در آن به دنبال شناسه bgcolor بگردید ، که ممکن است مانند زیر باشد:ممکن است به جای نام رنگ از معادل هگزادسیمال رنگ استفاده شده باشد. مانند زیر (این فرمانی است که من برای زمینه این صفحه از آن استفاده کرده ام):البته ممکن است این شناسه را در تگ BODY پیدا نکنید، در این صورت یک فاصله بعد از BODY قرار داده شناسه bgcolor را وارد کنید.برای عوض کردن رنگ زمینه نام رنگ مورد نظر خود را به جای نام رنگ در شناسه بالا قرار دهید.به جای نام رنگ می توانید از معادل هگزا دسیمال رنگ استفاده کنید.برای مثال اگر می خواهید رنگ زمینه به رنگ سبز درآید باید مانند زیر عمل کنید:و یا به این صورت:روش دیگری که برای تغییر رنگ زمینه صفحه وجود دارد استفاده از CSS است که با ورود نسخه چهارم HTML استفاده از آن رو به افزایش است. اگر می خواهید مطالب بیشتری در این مورد بدانید به این صفحه مراجعه کنید: تغییر رنگ زمینه قسمتهای مختلف صفحه با CSSبرای مشاهده جدول رنگهای هگزادسیمال اینجا را کلیک کنید. آموزش قرار دادن یک تصویر در زمینه صفحهبرای قرار دادن یک تصویر به عنوان زمینه صفحه باید از تگ BODY استفاده کرد.وقتی که تگ BODY را پیدا کردید ممکن است به صورت ساده باشد یا با فرمانهایی که به آن اضافه شده است. مانند زیر:کاری که شما باید انجام دهید، اضافه کردن یک شناسه به تگ BODY است. بنابراین یک فاصله بعد از آخرین فرمان بگذارید و سپس این فرمان را وارد کنید:background=" "اکنون تگ 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 است. در مورد این روش می تونید مطالب بیشتری را در این صفحات مطالعه کنید: تغییر رنگ زمینه قسمتهای مختلف صفحه با CSS و کار با تصویر زمینه در طراحی صفحات با CSSتنظیم نحوه نمایش عکس در صفحهاگر شما یک عکس دارید که می خواهید از آن استفاده کنید اما اندازه آن عکس اندازه مورد نظر شما نیست. مکن است عکس به قدری بزرگ باشد که تمام فضای صفحه را بگیرد یا شما اندازه ای بزرگتر از اندازه فعلی عکس را بخواهید.شما می توانید اندازه عکس را تغییر دهید. این کار را می توانید با افزودن شناسه های width (برای عرض عکس) و height (برای ارتفاع عکس) به تگ img انجام دهید. به یک مثال در این مورد توجه کنید:فرض کنیم یک عکس با نام learn_html.gif داریم و می خواهیم آنرا کوچکتر از اندازه اصلی آن نشان دهیم. تنها چیزی که باید بدانیم اندازه اصلی عکس است. اندازه عرض و ارتفاع عکس معمولاً با مقیاس پیکسل سنجیده میشود. عکس ما 137 پیکسل عرض و 77 پیکسل ارتفاع دارد. در زیر می توانید عکس را با اندازه های واقعی ببینید. حالا می خواهیم شناسه های width و height را در تگ عکس وارد کنیم. تگ ما به این صورت در می آید:حالا کافی است اندازه مورد نظر را در بین دو دابل کوت ( " " ) وارد کنید. برای مثال من اندازه 100 را برای عرض و 50 را برای ارتفاع وارد می کنم . به صورت زیر:در زیر می توانید عکس را پس از تغییر اندازه مشاهده کنید: برای بزرگتر کردن عکس هم کاری مشابه بالا را انجام می دهیم:مثلاً با عرض200 و ارتفاع 100: همانطور که می بینید اندازه عکس بزرگتر از اندازه واقعی شد: همانطور که ممکن است متوجه شده باشید در تصاویری که با این روش تغییر اندازه پیدا می کنند اگر به نسبت بین عرض و ارتفاع عکس رعایت نشود ممکن است تناسب عکس به هم بخورد. مثلاً تصویر بیش از حد کشیده به نظر برسد و...اگر بخواهید تصاویر با همان نسبت قبلی تغییر اندازه پیدا کنند باید نسبت بین عرض تصویر و ارتفاع آن را به دست آورید مثلا وقتی من مو خواهم تصویری با عرض 100 پیکسل داشته باشم می توانم به این صورت ارتفاعی را که در آن تناسب عکس به هم نمی خورد پیدا کنم:77÷137=0.562height÷100=0.562 ---> height=100×0.562 ---> height=56.2حال اگر من اندازه تصویر را با عرض 100 پیکسل و ارتفاع 56/2 پیکسل تعریف کنم تصویری با همان تناسب تصویر اصلی به دست خواهیم آورد مانند زیر: همانطور که در تصویر روبرو می بینید تناسب تصویر تا حد زیادی رعایت شده است. البته ما از 0.2 پیکسل در ارتفاع تصویر چشم پوشی کردیم.برای راحتی کار می توانید تصاویر را با استفاده از برنامه های گرافیکی مثل فتوشاپ، کارل دراو و... اندازه تصاویر را تغییر داده و بعداً در صفحه خود استفاده کنید. در این صورت کار شما راحت تر است و گذشته از راحتی وقتی عکسی را با یک برنامه گرافیکی کوچک می کنید سایز فایل عکس هم کوچکتر می شود و بارگذاری صفحه شما را طولانی نمی کند. ساختن لینک با استفاده از تصاویربرای اینکه از یک عکس به عنوان یک لینک استفاده کنید با ید از دو نکته که قبلاً آموختیم استفاده کنیم.1. چگونه یک لینک بسازیم.2. چگونه یک عکس را به صفحه اضافه کنیم.• برای اینکه بخواهیم به یک صفحه لینکی را ایجاد کنیم باید از این تگ استفاده کنیم:متن لینک• اگر بخواهیم یک عکس را به صفحه اضافه کنیم باید از این تگ استفاده کنیم:حال اگر بخواهیم از یک عکس به عنوان یک لینک استفاده کنیم باید تگ عکس را به جای متن لینک استفاده کنیم. یعنی به صورت زیر:تنها نکته ای که در اینجا باید به آن دقت کنید این است که نباید تگ لینک را قبل از ورود تصویر ببندید. یعنی تگ عکس باید بین تگ ابتدایی و انتهایی لینک قرار بگیرد تا به عنوان یک لینک عمل کند. به این مثال توجه کنید:می خواهیم از عکسی با نام learn_html.gif که در پوشه همین صفحه قرار دارد به عنوان لینک به مقدمه آموزش HTML که در همین پوشه است استفاده کنیم(نام صفحه مورد نظر index.html است). به این صورت عمل می کنیم:لینک به دست آمده مانند سطر زیر است: اگر ماوس خود را بر روی عکس بالا قرار دهید خواهید دید که نشانگر ماوس به شکل دست در می آید. اگر بر روی عکس کلیک کنید به صفحه سرفصل آموزش HTML خواهید رفت.اغلب مرورگرها به تصاویری که به عنوان لینک استفاده می شوند یک خط حاشیه (border) در لبه های تصویر اضافه می کنند. برای اینکه این خط دیده نشود شناسه زیر را به تگ عکس خود اضافه کنید:border="0"مثال قبل را با اضافه کردن شناسه بالا تکرار می کنیم:نتیجه به این صورت در می آید: شما می توانید خط حاشیه را کلفت تر نیز نشان دهید. فقط کافی است عدد بزرگتری را در فرمان border قرار دهید. مانند زیر:نتیجه را در زیر مشاهده می کنید: منظور از قرار دادن خط حاشیه مشخص کننده محدوده لینک است.تنظیم نحوه قرار گرفتن تصاویر در صفحهبرای اینکه بتوانیم یک متن را در کنار یک عکس بنویسیم باید در تگ عکس از یکی این فرمانها استفاده کنیم (در صورتی که از این فرمانها استفاده نشود متن و عکس در دو سطر نمایش داده می شوند):align="left"align="right"تگ عکس با استفاده از این فرمانها به صورت زیر در می آید:عکس مورد نظر در صفحه به این صورت نمایش داده می شود: اکنون می توانید متن را تایپ کنید و نگران قرار گرفتن متن زیر عکس هم نباشید چون متن در اطراف عکس به نمایش در خواهد آمد.به مثال زیر توجه کنید:این سطر قبل از وارد کردن عکس است
این سطر باید در کنار عکس به نمایش درآید
همینطور تا وقتی که
متن به پایان عکس برسد
متن باید در کنار عکس قرار گیرد
تا به پایان عکس برسد
نتیجه هم به صورت زیر است:این سطر قبل از وارد کردن عکس استاین سطر باید در کنار عکس به نمایش درآیدهمینطور تا وقتی کهمتن به پایان عکس برسدمتن باید در کنار عکس قرار گیردتا به پایان عکس برسدالبته ممکن است شما احتیاجی به استفاده از تگ سطر جدید یعنی
نداشته باشید. من از این تگ برای جلوگیری از طولانی شدن متن استفاده کردم. اگر از این تگها استفاده نکنید تا جایی که عرض صفحه اجازه می دهد سطر ادامه پیدا می کند و بعد به سطر بعد خواهید رفت.شما می توانید از فرمان "align="right برای قرار دادن عکس در سمت راست صفحه استفاده کنید. در این صورت عکس در سمت راست صفحه نمایش داده می شود و متن در سمت چپ کس دیده می شود.استفاده از متن جایگزین (کامنت) برای تصاویراز شناسه alt برای وارد کردن متن جایگزین برای عکس در تگ استفاده می شود. موقعی که مرورگر به هر دلیلی نتواند عکس موجود در صفحه شما را نمایش دهد به جای آن این کامنت را نشان می دهد. و می تواند به بیننده بفهماند که چه چیزی را از دست داده است.از این شناسه مانند مثال زیر استفاده می شود : alt="متن کامنت"این فرمان را در تگ تصویر (IMG) قرار دهید، فاصله بین دو فرمان را فراموش نکنید. مانند زیر:ما این کامنت را به عنوان جانشین عکس در تگ IMG وارد می کنیم. تا هر وقت عکس به نمایش در نیامد این کامنت به نمایش درآید. در سطر زیر نشان می توانید یک کامنت جایگزین را ببینید چون عکس اصلی به نمایش در نمی آید (در اینجا عکس به نمایش در نمی آید چون در مسیر مربوطه چنین عکسی وجود ندارد): توصیه می کنیم تا حد امکان برای عکسهای صفحه خود از این کامنت استفاده کنید ( البته برای نه برای عکسهای تزئینی ). در این صورت صفحه شما می تواند برای تمام کاربران مفید باشد. چون ممکن است به هر دلیلی برخی از کاربران امکان مشاهده تصاویر صفحه شما را نداشته باشند.یکی از این دلایل که در کشور ما هم مصداق دارد عدم دسترسی به اینترنت با سرعت بالا و استفاده از خطوط تلفن برای دسترسی به اینترنت است. در این رابطه تقریباً تمامی مرورگرها، این امکان را در اختیار کاربر قرار می دهند که از بارگذاری تصاویر در صفحات جلوگیری کنند، تا بتوانند از متن صفحه را سریعتر مشاهده کنند، یا فایلهای خود را با سرعت بیشتری داتلود کنند.موتورهای جستجو هم وقتی که صفحه ای را ایندکس می کنند نمی توانند تصاویر آنرا ببینند و فقط نام تصویر و کامنت جایگزین آنرا می خوانند پس برای تصاویری که به موضوع صفحه شما مرتبط هستند و یا می خواهید بازدید کنندگان بتوانند در موتورهای جستجو آنها را پیدا کنند حتماً از این کامنت استفاده کنید. ساختن لینک به نقاط مختلف یک صفحهبیایید تصور کنیم که یک صفحه بلند داریم. ممکن است شما بخواهید که بیننده بتواند با یک کلیک از نقطه معینی دوباره به بالای صفحه باز گردد. احتمالاً این لینک را زیاد دیده اید: Back to the Topممکن است شما بخواهید صفحه را به چندین قسمت تقسیم کنید و در بالای صفحه فهرستی برای آن قرار دهید که بیننده با کلیک کردن بر روی عنوان هر قسمت به آن قسمت در صفحه برود.در این موارد شما می توانید از پیوندهای نامگذاری شده که در قسمتهای مشخصی از صفحه شما قرار دارند که شما می خواهید به آن نقاط لینک بسازید استفاده کنید. شما می توانید به هر نقطه از صفحه لینک بسازید اما فعلاً در مورد لینک به بالای صفحه توضیح می دهیم.برای این کار به بالای قسمت BODY در متن HTML خود بروید ( درست بعد از تگ BODY ) اکنون این تگ را تایپ کنید: شما می توانید هر نامی را بین دو دابل کوت بنویسید. نوشتن top کار ما را برای درک بهتر آسان می کند.حالا به جایی در قسمت BODY بروید که می خواهید از آنجا لینکی به بالای صفحه ایجاد کنید.این فرمان را تایپ کنید:بازگشت به بالااکنون وقتی لینک بازگشت به بالا را کلیک کنید به بالای صفحه می روید. علامت # به مرورگر می فهماند که مقصد پیوندی نامگذاری شده در همین صفحه است. اگر شما یک پیوند با نام "UP" ساخته بودید اکنون باید از "up#" به جای "top#" استفاده می کردید.شما می توانید در هر کجای صفحه یک پیوند نامگذاری شده بسازید و به وسیله یک لینک از قسمتهای دیگر به آن قسمت بازگردید. لینک زیر را برای نمونه به بالای صفحه ساخته ام. می توانید آنرا امتحان کنید:بازگشت به بالای صفحه با استفاده از این روش نه تنها می توانید لینکی بسازید که بازدید کننده با کلیک بر روی آن به قسمت دیگری از همان صفحه برود، بلکه می توانید از این روش در لینکهایی که در دیگر صفحات قرار دارند استفاده کنید و بازدید کننده را به قسمت مشخصی از یک صفحه دیگر بفرستید. تنها نکته ر اینجا این است که در صفحه مقصد باید لینکهای نامگذاری شده وجود داشته باشند و از این نامگذاری در لینکی که رد صفحه مبدأ قرار دارد استفاده شود.برای مثال اگر شما لینک زیر را در صفحه خود قرار دهید با کلیک بر روی آن می توانید بخش پایینی این صفحه را مشاهده کنید و باز دید خود را از پایین این صفحه شروع کنید. ( ما یک لینک نام گذاری شده با نام bottom# در پایین این صفحه قرار داده ایم ) :ساختن لینک بازگشت به بالای صفحه تنظیم پیج کد مورد استفاده در صفحهحتماً تا به حال با صفحاتی مواجه شده اید که به زبان فارسی نوشته شده اند، اما وقتی از آنها بازدید می کنید با کلماتی به هم ریخته و غیر قابل فهم مواجه می شوید. دلیل این مشکل ناسازگار بودن Encoding انتخاب شده در مرورگر با زبان فارسی است.این ناسازگاری ممکن است به دلیل کامل نشدن بارگزاری صفحه ایجاد شده باشد یا به دلیل اینکه در هنگام طراحی Encoding متناسب با زبان فارسی انتخاب نشده باشد یا اصلاً در طراحی صفحه هیچگزینه ای برای Encoding صفحه در نظر گرفته نشده باشد.در اکثر مواقع می توانید صفحه مورد نظر را به روش زیر به صورت فارسی مشاهده کنید:• مرورگر اینترنت اکسپلورر در ویندوز (Microsoft Internet Explorer) :از منوی view گزینه Encoding را انتخاب کنید و گزینه utf-8 را کلیک کنید. در صورتی که در لیست اولیه کد پیجهای مختلف نتوانستید utf-8 را مشاهده کنید نشانگر ماوس خود را روی گزینه More نگهدارید و utf-8 را از بین کد پیجهای مختلف پیدا کرده و روی آن کلیک کنید. در سایر مرورگر ها هم به همین روش باید عمل کنید فقط مسیر منو ها کمی تفاوت دارد. می توانید مسیر های زیر را دنبال کنید. • مرورگر فایر فوکس : (Firefox)view --> Character Encoding --> unicode (utf-8)یاview --> Character Encoding --> More Encodings --> Unicode --> Unicode (utf-8) • مرورگر اپرا : (Opera)view --> Encoding --> Unicode --> UTF-8 البته اگر به این روش مشکل صفحه مورد نظر شما حل نشد به دلیل این است که صفحه با پیج کد دیگری نوشته شده است. می توانید گزینه هایی مثل (Arabic(Windows رانیز امتحان کنید. برای اینکه یک صفحه فارسی طراحی کنیم دو چیز را باید مد نظر قرار دهیم:راست به چپ بودن صفحه برای اینکه یک صفحه راست به چپ طراحی کنیم می توانیم به چند طریق عمل کنیم.• استفاده از شناسه "dir="rtl در تگ از این شناسه در بسیاری از تگهای HTML می توان استفاده نمود. در صورتی که صفحه ای راست به چپ باشد و بخواهیم از قسمتهای چپ به راست نیز در آن صفحه استفاده کنیم می توانیم از شناسه "dir="ltr استفاده کنیم. • استفاده از CSS برای تعیین direction صفحهمثلاً استفاده از یک استایل خارجی یا در بخش HEAD متن یا استفاده از شناسه "style="direction: rtl در تگهایی که می خواهیم به صورت راست به چپ نمایش داده شود تنظیم Encoding در هنگام طراحی صفحهبرای تنظیم Encoding صفحه باید از یک متاتگ در بخش HEAD متن استفاده کنیم. این متاتگ برای کد پیج utf-8 که بیشترین سازگازی را با صفحات فارسی دارد به صورت زیر است: اگر در طراحی صفحه ای از این متاتگ استفاده شود کد پیج utf-8 در مرورگر به صورت خودکار برای آن صفحه اعمال می شود. رویدادهای مربوط به صفحه کلید و ماوس در HTMLدر این قسمت به توضیح بخش دوم رویدادهای HTML که مربوط به صفحه کلید و ماوس می شود می پردازیم. ________________________________________• رویدادهای مربوط به صفحه کلیدسه رویداد در این دسته قرار می گیرد:• onkeydown : در هنگام فشار دادن دکمه صفحه کلید اسکرپت تعریف شده در مقدار این شناسه اجرا می شود. ________________________________________• onkeypress :وقتی که یک دکمه در صفحه کلید فشرده می شود و رها می شود اسکرپت موجود در این شناسه اجرا می شود. ________________________________________• onkeyup :در هنگام رها شدن یک کلید این شناسه فعال می شود. رویدادهای مربوط به صفحه کلید نباید در تگهای زیر استفاده شود:,
, , , , , , , , , , , برای مشاهده مثال برای رویدادهای مربوط به فرمها اینجا را کلیک کنید. کدی را که در نوشتن این مثال از آن استفاده شده است می توانید در اینجا مشاهده کنید: ________________________________________• رویدادهای مربوط به ماوسهفت رویداد در این دسته قرار دارند: • onclick :در هنگام کلیک کردن بر روی قسمتی که این شناسه را دارد اجرا می شود. ________________________________________• ondblclick :مقدار موجود در این شناسه به هنگام دابل کلیک بر روی قسمتی که این شناسه در آن به کار رفته اجرا می شود. ________________________________________• onmousedown :وقتی که کلید ماوس فشرده می شود این شناسه عمل می کند. ________________________________________• onmousemove :وقتی که ماوس را در صفحه حرکت می دهید این رویداد اجرا می شود. ________________________________________• onmouseover :وقتی ماوس روی قسمتی که حاوی این شناسه است قرار می گیرد این رویداد اجرا می شود. ________________________________________• onmouseout :این رویداد وقتی که ماوس از روی قسمتی که حاوی این رویداد است خارج می شود اجرا می شود. ________________________________________• onmouseup :وقتی که کلید ماوس رها می شود این رویداد اجرا می شود. رویدادهای مربوط به ماوس هم مانند رویدادهای صفحه کلید نباید در تگهای زیر استفاده شوند:,
, , , , , , , , , , , برای مشاهده مثالی برای استفاده از رویدادهای مربوط به ماوس اینجا را کلیک کنید.می توانید کدی را که در نوشتن این مثال از آن در سلولهایی که حاوی رویدادها هستند استفاده شده است در اینجا مشاهده کنید:در این قسمت کلیک کنید تا رویداد onClick اجرا شود.در این قسمت دابل کلیک کنید تا رویداد onDblClick اجرا شود.در این قسمت کلید ماوس را پایین نگهدارید تا رویداد onMouseDown اجرا شود.روی این قسمت ماوس خود را حرکت دهید تا رویداد onMouseMove اجرا شود.ماوس خود را روی این قسمت قرار دهید تا رویداد onMouseOver اجرا شود.وقتی ماوس از روی این قسمت کنار رود رویداد onMouseOut اجرا می شود.وقتی کلید ماوس روی این قسمت رها شود رویداد onMouseUp اجرا می شود. در این مثال msg('متن پیام') تابع جاوا اسکرپتی است که در صفحه مثال تعریف شده است. به جای آن می توانید از کدهای دیگری استفاده کنید.رویدادهای مربوط به پنجره مرورگر و فرمها در HTMLیکی از امکاناتی که در HTML 4.0 به وجود آمد استفاده از event در عناصر HTML صفحه بود. یک نمونه از این رویدادها (event) اجرا شدن یک فرمان جاوا اسکرپت به هنگام کلیک کردن روی عناصر HTML در صفحه است. در اینجا لیستی از رویدادهایی که در تگهای HTML استفاده می شوند آورده شده است. بهتر است برای اینکه بتوانید به خوبی از این رویدادها استفاده کنید اطلاعاتی در مورد جاوا اسکرپت داشته باشید. برای استفاده از این رویدادها می توانید اسکرپتهای نوشته شده با جاوا اسکرپت را به عنوان مقادیر این رویدادها قرار دهید تا بسته به نوع رویداد مورد نظر اجرا شوند. ________________________________________• رویدادهای مربوط به پنجره مرورگر این رویدادها باید فقط در تگهای body و frameset استفاده شوند. دو رویداد در این دسته قرار می گیرند که در زیر آنها را مشاهده می کنید:• onload : این رویداد باعث می شود تا اسکرپتی که به عنوان مقدار آن قرار داده شده است در هنگام باز شدن صفحه اجرا شود. ________________________________________• onunload : اسکرپتی که به عنوان مقدار این شناسه قرار می گیرد در هنگامی که بازدید کننده از صفحه خارج می شود اجرا می شود. ________________________________________• onResize : این رویداد هنگامی که اندازه پنجره مرورگر را تغییر می دهید اجرا می شود. برای مشاهده یک مثال برای این رویدادها لینک زیر را کلیک کنید. صفحه ای که به آن وارد می شوید حاوی دو رویداد بالا در تگ body خود است.ورود به صفحه آزمایشی برای رویدادهای مربوط به پنجره مرورگر می توانید تگ body مورد استفاده در مثال بالا را در اینجا مشاهده کنید:

[sinner91]

آقا سلام یه سوال دارم شما نمیدونید کد html یا جاوای دکمه لایک شبیه اونی که توی فیس بوکه چیه؟ یا چجوری میشه نوشتش؟یا اینکه اصلا وجود داره یا نه که بتونم پیداش کنم تا بذارمش توی وبلاگم؟
اگه کمکم کنید تا این مشکلم حل شه خیلی ممنون میشم چون سرویس وبلاگ من بلاگفاست و مثل میهن بلاگ چنین قابلیتی رو از خودش نداره, اگر برای سوال من جوابی داشتین لطفا اگه براتون امکانش هست اونو برام بفرستین,mohebbi1992@gmail.com, با تشکر,

[se7en_love]

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

[borzooi]

seven love azizi dige kasi ba html tarahi nemikoneh ba in hal dastet dard nakoneh