نگاشته شده توسط: ژوبین آی تی | فوریه 3, 2008

HTML برای وبلاگ‌نویسان

با اینکه نرم‌افزارهای مختلف و امکانات بصری (Visual) در سرویس‌های وبلاگ‌نویسی باعث استفاده کمتر از کدنویسی شده است اما هنوز هم در بسیاری مواقع برای ویرایش متن و اضافه نمودن داده‌های جدید نیاز به کدنویسی هرچند جزئی داریم. در این مقاله سعی می‌کنم به صورت خلاصه کدها و برچسب‌های پر استفاده در html را بیان کنم. مطالعه این متن به وبلاگ‌نویسانی که آشنایی با HTML ندارند توصیه می‌شود.

HTML چیست؟
HyperText Markup Language زبان خلق صفحات وب است. وب سرور صفحات را در قالب زبان html برای مرورگر (Browser) ارسال می‌کند. این زبان شامل برچسب‌هایی (Tags) است که توسط کلیه مرورگرها قابل فهم بوده و برای آرایش متون، قرار دادن پيوند ميان صفحات، نمایش تصاویر و پخش فایلهای صوتی در صفحات وب مورد استفاده قرار می‌گیرند.

ساختمان فایل‌ها در HTML
دستورات HTML در قالب برچسب‌هایی است که بین علامت‌های <> قرار می‌گیرند. این برچسب‌ها معمولا به صورت جفتی به کار می‌روند مثلا از برچسب <p> برای مشخص کردن شروع یک پاراگراف جدید و از برچسب <p/> برای مشخص کردن پایان پاراگراف مورد نظر استفاده می‌شود. اکثر صفحات HTML از دو قسمت تشکیل می‌شوند، به دلیل اینکه کدها برای آشنایی وبلاگ‌نویسان آموزش داده می‌شود از توضیحات بیشتر اجتناب می‌کنم. برای کدنویسی در قسمت‌هایی که نام می‌بریم تنها کافیست از برچسب‌ها استفاده شود.
می‌توان در وبلاگ‌نویسی، ثبت نظر (Comment)، شبکه‌های اجتماعی و … از زبان HTML استفاده نمود؛ در صورتی که در بسیاری از موارد دسترسی به آیکن‌های بصری (Visual) برای تغییرات در داده‌ها وجود ندارد.

کدنویسی با استفاده از HTML
همانطور که اشاره شد دستورات HTML در قالب برچسب‌هایی است که معمولا به صورت جفتی به کار می‌روند. برای ویرایش متن و یا افزودن پیوند (Link)، تصویر و … کافی است برچسب شروع که بین علامت‌های <X> قرار دارد را نوشته، سپس اطلاعات را وارد کنید (متن، آدرس تصویر یا پیوند) و پس از آن برچسب پایان را که به صورت <X/> می‌باشد ببندید. (در اینجا X، برچسب مورد استفاده است.

برچسب‌هایی برای آرایش متن
<b> , <b/> : متن قرار داده شده در بین این دو برچسب ضخیم (Bold) نمایش داده می‌شود.
<u> , <u/> : متن قرار داده شده در بین این دو برچسب به صورت زیرخط دار (UnderLine) نمایش داده می‌شود.
<i> , <i/> : متن قرار داده شده در بین این دو برچسب به صورت کج (Italic) نمایش داده می‌شود.
<p> , <p/> : از این دو برچسب برای مشخص کردن شروع و خاتمه یک پاراگراف استفاده می‌شود. با استفاده از ویژگی Align این برچسب می‌توان پاراگراف مورد نظر را راست‌چین یا چپ‌چین کرد:

<p align=»right»> Test </p>

<br> : از این برچسب تکی برای شروع یک خط جدید استفاده می‌شود.
<center> , <center/> : متن قرار گرفته در بین این دو برچسب در وسط خط نمایش داده می‌شود.
<font> , <font/> : از این برچسب برای تغییر نوع، رنگ و اندازه قلم (font) استفاده می‌شود. این برچسب دارای سه ویژگی است:
1. Face: از این ویژگی برای تغییر نوع قلم استفاده می‌شود.
2. color: از این ویژگی برای تغییر رنگ قلم استفاده می‌شود.
3. size: از این ویژگی برای تغییر سایز قلم استفاده می‌شود.

<font face=»Arial» size=5 color=»green»> Test For Font </font>

ایجاد پیوند (Link)
برای ایجاد پیوند از برچسب <a> استفاده می‌شود:

<a href=»URL»> Text </a>

URL به معنای آدرس اینترنتی است. در واقع برای استفاده از این برچسب به جای URL باید آدرس اینترنتی مورد نظر نوشته شود. عبارت Text برای قرار دادن واژه یا واژه‌هایی است که پیوند روی آن قرار می‌گیرد.

قرار دادن تصویر
با استفاده از برچسب <img> می‌توان یک تصویر را در یک صفحه وب قرار داد. در ویژگی src این دستور بایستی مسیر و نام فایل مورد نظر را قرار داد. مثلا اگر فایل JoobinIT.jpg در آدرس http://files.joobinit.wordpress.com/joobinit.jpg باشد باید از دستور زیر استفاده کرد:

<img src=http://files.joobinit.wordpress.com/joobinit.jpg»></img>

با استفاده از ویژگی‌های width و height می‌توان طول و عرض یک تصویر را تغییر داد. علاوه بر این با استفاده از ویژگی alt می‌توان متنی را مشخص کرد که هنگام انتقال موس بر روی تصویر نمایش داده شود. به مثال زیر توجه کنید:

<img src=http://files.joobinit.wordpress.com/joobinit.jpg width=300″ height=»300″ <alt=»Joobin IT»></img

برچسب‌هایی که معرفی شد از برچسب‌های پر استفاده در HTML بودند. تصاویر زیر نمونه‌هایی از مکان‌هایی است که زبان HTML را پشتیبانی می‌کنند. البته میزان کدهای قابل قبول معمولا متفاوت است؛ برای مثال در نوشتن یک مطلب جدید در سرویس وبلاگ‌نویسی معمولا بیشتر کدها قابل قبول هستند اما برای ثبت نظر و یا ارسال نوشته در شبکه‌های اجتماعی معمولا این دستورات محدودتر هستند.

نوشتن پست جدید در وردپرس

html-wordpress-post

نوشتن پست جدید در بلاگر

html-blogger-post

نوشتن پست جدید در بلاگفا

html-blogfa-post

نوشتن پست جدید در پرشین بلاگ

html-persianblog-post

نوشتن نظر در وبلاگ‌های وردپرس

html-wordpress-comments

نوشتن Note در فیس بوک

html-facebook-note

نوشتن ScrapBook در Orkut

html-orkut-scrapbook

لینک‌های مرتبط:

* این قسمت در طول زمان کامل خواهد شد. اگر شما هم اطلاعاتی در زمینه طراحی تحت وب با HTML نوشته‌اید لطفا اطلاع دهید تا در این قسمت قرار گیرد. JoobinIT [at] Gmail [dot] com

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

*** به کمک شما احتیاج دارم: بخش مطالب و پیوندهای منتخب (خوشمزه، del.icio.us) را از خوراک (Feed) وبلاگم برداشتم؛ حس می‌کردم نوعی مزاحمت برای خوانندگان است، هرچند بسیار با وسواس لینک‌هایم را انتخاب می‌کنم. اگر ممکن است نظرتان را در این مورد به من برسانید. این بخش در وبلاگم در بخش «دیدنی‌ها و خواندنی‌ها» در دسترس است.

**** از همه وبلاگ‌نویسان عزیز که یک وبلاگ‌نویس آماتور و تازه وارد را با این گرمی و مهربانی پذیرفتند و حمایت کردند بسیار بسیار سپاسگزارم. امیدوارم بتوانم جبران کنم.


Responses

  1. بسیار خوب

  2. […] پایان پاراگراف مورد نظر استفاده می‌شود. اکثر صفحات HTML از دو قسمت تشکیل می‌شوند، به دلیل اینکه کدها برای […]

  3. […] Germany Celtic Showing Van Buyten daniel. wrote an interesting post today on HTML Ø¨Ø±Ø§Û ÙبÙاگâÙÙÛساÙHere’s a quick excerpt با اینکه نرم‌افزارهای مختلف و امکانات بصری (Visual) در سرویس‌های وبلاگ‌نویسی باعث استفاده کمتر از کدنویسی شده است اما هنوز هم در بسیاری مواقع برای ویرایش متن و اضافه نمودن داده‌های جدید نیاز به کدنویسی هرچند جزئی داریم. در این مقاله سعی می‌کنم به صورت خلاصه کدها و برچسب‌های پر استفاده در html را بیان کنم. مطالعه این متن به وبلاگ‌نویسانی که آشنایی با HTML ندارند توصیه می‌شود. HTML چیست؟ HyperText Markup Language زبان خلق صفحات وب است. وب سرور صفحات را در قالب زبان html برای مرورگر (Browser) ا […]

  4. خیلی خوب بود مفید واقع شد …

  5. اگه در رابطه به ساختن قالب برای بلاگر هم توضیح بدی خیلی ممنون می شم . اصلا نمی دونم برای ساختن قالب تو بلاگر چی کار باید بکنم . خیلی با بلاگفا و پرشین بلاگ فرق داره .

  6. مرسی. عالی بود. ادامه دارد دیگر انشاالله!؟

    پاسخ: سلام، مرسی. اگه بخوام ادامه بدم html رو از اول شروع می‌کنم. البته نه اینقدر خلاصه


پاسخی بگذارید

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s

دسته‌ها

%d وب‌نوشت‌نویس این را دوست دارند: