اگر مدت زیادی باشد که وبلاگ می‌نویسید، حتماً مواردی پیش آمده است که برای برطرف کردن مشکلتان در قالب و یا پست، به دنبال راه حل HTML آن بگردید و برای رفع مشکل از تگها یا کدهای HTML استفاده کنید. اگر هم مدت کمی باشد که وبلاگ می‌نویسید، با این مشکلات برخورد خواهید کرد. اگر هم به هرآنچه هست، راضی باشید و اهل کنجکاوی نباشید و حساسیتی به نوع نمایش پستتان نداشته باشید هم که نیازی به دانستن این‌ها نخواهید داشت!
معمولاً ادیتورهای سرویس‌دهنده‌های وبلاگ، سه قسمت دارند:
- قسمتی که معمولاً به طور پیش‌فرض باز می‌شود، ادیتوری است که امکانات اصلی ویرایش متن از قبیل راست‌چین، چپ‌چین، متن توپر و کج و قراردادن تصویر و ... در آن وجود دارد و نیازی به دانستن HTML نیست. اما اگر بخواهید کارهای خاصی در پستتان انجام دهید...
- قسمت دومی در ادیتور وجود دارد که می‌توانید کدهای HTML مربوط به پستتان را در آن ببینید. اگر قصد استفاده از کدهایی که در ادامه می‌آید را دارید، باید آنها را در جای مناسب و در این قسمت از ادیتور وارد کنید.
- قسمت سوم، امکان پیش‌نمایش(Preview) پستتان را به شما می‌دهد.
در این پست تعدادی از تگهای پرکاربرد در وبلاگ‌نویسی را با توضیحات آن، آورده‌ام.
یادآوری: تگهای HTML دو گونه‌اند:
نوع اول. که تگهای دوتایی هستند و ابتدا و انتها دارند. تگ انتهایی با علامت / بسته می‌شود. مانند: <a> در ابتدا، و <a/> که در انتها قرار می‌گیرد و تگ لینک را می‌سازند.
نوع دوم. که تگهای تنها هستند مانند تگ <img> (برای قراردادن تصاویر).
چگونه لینک بگذارم؟!
تعجب نکنید! در حالت عادی، ادیتورها، متنی را که انتخاب کرده‌اید، با آدرسی که به آن می‌دهید، لینک می‌کنند، اما غیر از این، لینکها خصوصیات جالب‌تری هم دارند. تگ HTML ٍ یک لینک به طور معمول، به صورت زیر است:
<a href="http://www.google.com/">Google</a>نتیجه:
که در کد بالا، روبروی href (مخفف hypertext refrence)، نشانی صفحه یا فایل خاصی قرار می‌گیرد که کلمه Google را به آن صفحه یا فایل مرتبط می‌کند.
اما خصوصیات دیگر تگ <a>:
به نظر من، مفیدترین خصوصیت جالب تگ <a>، خصوصیت title آن است. حتماً عکسهایی را دیده‌اید که وقتی موس را بر روی آن قرار می‌دهید، متنی بر روی آن ظاهر می‌شود... خوب! چنین امکانی برای لینکهای متنی نیز وجود دارد، اگرچه بسیار کم دیده‌ام که کسی از این خصوصیت استفاده کند. نمونه زیر را ببینید:
<a href="http://mail.yahoo.com/" title="Unlimited Storage with 100 Megabyte Attachements!">Yahoo! Mail</a>نتیجه:
Yahoo! Mail
به قول Jackob Nielsen از w3c، یکی از بزرگترین مشکلاتی که در وب وجود دارد این است که کاربران نمی‌دانند به کجا می‌روند! با استفاده از Title، می‌توانید اطلاعاتی در مورد صفحه‌ای که آن مراجعه می‌شود، بدهید. آقای Nielsen می گوید بهتر است که در موارد زیر از خصوصیت Title استفاده کنید:
نام سایت که به آن لینک می‌دهید (اگر با عبارتی غیر از آن و به سایت اصلی لینک می‌دهید)؛
نام زیرمجموعه سایت (اگر به آدرس قسمتی از یک سایت لینک می دهید)؛
نوع اطلاعاتی که کاربر در صفحه‌ی مورد نظر به آن دسترسی پیدا می‌کند؛
عبارات آگاهی‌دهنده؛ مثلاً در مواقعی که نیاز به ثبت نام برای استفاده از آن سایت یا دسترسی به صفحه‌ی موردنظر است.
در مورد همه‌ی لینکها از title استفاده نکنید!
خصوصیت دیگر این تگ، خصوصیت Target است، یعنی صفحه چگونه باز شود؛ متوجه نشدید؟! الان توضیح می‌دهم. فرض کنید شما تعداد زیادی لینک در پستتان دارید و یا به سایتی لینک می‌دهید، اما نمی‌خواهید در صورت کلیک کاربر، لینک در همین صفحه باز شود، یعنی می‌خواهید لینک در صفحه جداگانه‌ای باز شود! در این صورت از Target استفاده می‌کنیم:
<a href="http://mail.google.com/mail/" title="Unlimited Storage with 100 Megabyte Attachements!" target="_blank" >GMail</a>نتیجه:
GMail
به جای blank_، گزینه‌های دیگری نیز وجود دارند که کاربردشان، بیشتر در قابها است و به توضیح آنها نمی‌پردازم.
نکته: در صورتی که می خواهید تمامی لینکهای صفحه، در صفحه جدید باز شود، در بین تگ <head> صفحه‌تان، کد زیر را قرار دهید:
<base target="_blank">چگونه تصویر بگذارم؟!
تعجب کردید؟!... در مورد استفاده از تصاویر هم، نکاتی وجود دارد که با ادیتور برخی وبلاگها، امکان استفاده از آن وجود ندارد! برای استفاده از تصاویر شما از تگ <img> استفاده می‌کنید. به صورت زیر:
<img src="http://www.divshare.com/img/3146850-85f.gif">نتیجه:
که در روبروی src (مخفف Source)، آدرس عکس قرار می‌گیرد. تمام این کد، برای نمایش عکس موردنظرتان کافی است، اما...
1. در صورتی که عکستان لود نشود (به دلیل تنظیم مرورگر و ...) چه؟! آنگاه خصوصیت alt (مخفف Alternative Text) تصویر، کمکتان می‌کند تا متنی را به جای عکس نشان دهید.
<img src="http://www.divshare.com/img/3146850-85f.gif" alt="Google">نتیجه(آدرس را اشتباه دادم تا لود نشود!):
2. تگ <img> هم خصوصیتی به نام Title دارد که برای اضافه کردن توضیح به عکس بهتر است از این خصوصیت استفاده کنید.
نکته: Firefox از alt، تنها زمانی استفاده می‌کند که عکس لود نشود و برای توضیح عکس تنها به خصوصیت title تگ، نگاه می‌کند، اما در اینترنت اکسپلورر، در جایی که title استفاده نشده باشد، از متن مربوط به alt، برای نمایش توضیح تصویر استفاده می‌شود.
کاربرد آن به صورت زیر است:
<img src="http://www.divshare.com/img/3146850-85f.gif" alt="Google" title="Put this logo into your sidebar and support Google!">نتیجه:
ادامه دارد...
