۱۰ تگ HTML که باید بیشتر در مورد آنها بدانید

چهارشنبه, ۱۱ام اسفند , ۱۳۸۹ | ۱۹ دیدگاه

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

۱ – ارائه توضیحات در کدهای HTML با استفاده از <!– –>

ارائه توضیحات در مورد کدهای نوشته شده یکی از اصول کدنویسی استاندارد است که می تواند شما را در حفظ ساختار کلی وب سایت نیز کمک کند.این توضیحات می توانند در مورد شروع و یا پایان یک قسمت یا جزء از وب سایت و یا توضیح در مورد تکنولوژی مورد استفاده باشد.برای ارائه توضیحات در مورد کدهای HTML می توانید به روش زیر عمل کنید.این توضیحات در Source Code قابل رویت می باشد.

    <!-- Beginning of Nav -->  
    <ul>  
        <li>menu item 1</li>  
        <li>menu item 2</li>  
    </ul>  
    <!-- End of Nav -->  
    <!-- Beginning of Main Content -->  
    <p>This is the main content.</p>  
    <!-- End of Main Content -->  

ساختار جدول – Table Styles – <thead> , <tbody> , <tfoot> – 2

در گذشته ای بسیار نزدیک استفاده از جداول ( Table ) بسیار مرسوم بود و بسیاری از طراحان وب سایت برای ایجاد ساختار وب سایت از این تگ استفاده میکردند.در طراحی های مدرن و امروزی تر از این تگ ( tag ) فقط برای ارائه اطلاعات به صورت جدول استفاده می شود و استفاده از آن بسیار محدود تر شده است.
اما استفاده صحیح از این تگ و دانستن کاربرد صحیح آن می تواند ما را در ارائه صحیح تر و بهتر مطالب به صورت جدول ( که جزء مهمی از ارائه اطلاعات در وب سایت است ) کمک کند .
میتوانید با استفاده از ساده ترین تگها ، جداول بسیار مرتب و خوبی را بسازید .یکی از خصوصیات مهم استفاده از تگ های ساده و استاندارد ، علاوه بر سادگی در استفاده ، سازگاری با هر نوع و سبک از طراحی وب سایت است.

<thead>

در برگیرنده تیتر ستون ها ، که باعث بهتر دیده شدن و تشخیص بهتر تیتر ها از دیگر مطالب و اطلاعات جدول میشود.

<tfoot>

مشخص کننده و در بر گیرنده سطر پایانی از جدول ، که همیشه پس از محتوای جدول

قرار میگیرد و خوانده میشود.

<tbody>

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

 <table>  
     <thead>  
         <tr>  
             <td>Item</td>  
             <td>Qty</td>  
         </tr>  
     </thead>  
     <tfoot>  
         <tr>  
             <td>Sum</td>  
             <td>7</td>  
         </tr>  
     </tfoot>  
     <tbody>  
         <tr>  
             <td>#1</td>  
             <td>3</td>  
         </tr>  
         <tr>  
             <td>#2</td>  
             <td>4</td>  
         </tr>  
     </tbody>  
 </table> 

۳ – <optgroup>

استفاده از Drop Down یکی از بهترین روش ها برای ارائه اطلاعات به مخاطبان ، جهت انتخاب هستند.
با استفاده از تگ <optgroup> میتوانید اطلاعات دسته بندی شده تری را در غالب یک Drop Down در اختیار مخاطبان خود قرار دهید و انتخاب را برای آنها ساده و ساده تر کنید.

	<select>  
	    <optgroup label="Baseball Teams">  
	        <option value="Detroit Tigers">Detroit Tigers</option>  
	        <option value="Chicago Cubs">Chicago Cubs</option>  
	    </optgroup>  
	    <optgroup label="Football Teams">  
	        <option value="Detroit Lions">Detroit Lions</option>  
	        <option value="Chicago Bears">Chicago Bears</option>  
	    </optgroup>  
	</select>  

۴ – تیتر <h1> , <h2> , <h3> , <h4> , <h5> , and <h6>

در مورد اهمیت این تگها در بهینه سازی وب سایت برای موتورهای جستجو بسیار شنیده ایم . از تگها در طراحی وب سایت بسیار استفاده میشود ، اما آخرین باری را که از تگهای <h3> , <h4> و … استفاده کرده اید را به خاطر دارید ، آیا درجه اهمیت مطالبی که با استفاده از این تگها نشان داده اید رعایت شده اند؟
استفاده از این تگها از <h1> تا <h6> برای نشان دادن درجه اهمیت مطالب و تیتر ها در طراحی وب سایت بسیار مورد اهمیت است.
استفاده از تمامی تگهای <h> می تواند در زیبایی ، استاندارد ، بهینه سازی و سادگی در طراحی وب سایت کمک چشمگیری داشته باشد.

۵ – <fieldset> and <legend>

فرم ها نقش بسیار پر رنگی در طراحی وب سایت دارند . چینش مناسب فرمها و دسته بندی مطالب در فرم ها میتواند در ارتباط با مخاطب تاثیر بسیار مثبتی داشته باشند.
با استفاده از تگ <fieldset> میتوانید محتویات یک فرم را از اجزاء پیرامون آن جدا کنید و یا فرمهایی با حجم اطلاعات بالا را به سادگی دسته بندی کنید.
و با استفاده از تگ <legend> می توانید عنوان هر بخش را مشخص نمائید.

 <form>  
    <fieldset>  
        <legend>General Information: </legend>  
        <label>Name: <input type="text" size="30" /></label>  
        <label>Email: <input type="text" size="30" /></label>  
        <label>Date of birth: <input type="text" size="10" /></label>  
    </fieldset>  
 </form>  

۶ – <label>

تگ <label> یک خصوصیت ظاهری برای یک جزء ( field ) در فرم ( form ) شما نخواهد بود. با استفاده از این تگ یک خصوصیت به فرم اضافه خواهد شد. این تگ برای معرفی برچسب اجزاء یک فرم استفاده می شود . با استفاده از این تگ برچسب ها نیز قابل کلیک خواهند بود ، به این معنی که با کلیک بر روی برچسب هر text box , radio buttons , check box نیز میتواند آن را انتخاب نمائید و یا آن را فعال و یا غیر فعال کنید.
این خصوصیت فقط در text box , radio buttons , check box تاثیر گذار است .

<form>  
    <label>Name: <input type="text" size="30" /></label>  
    <label>Male: <input type="radio" name="sex" /></label>  
    <label>Female: <input type="radio" name="sex" /></label>  
</form> 

۷ – <blockquote>

استفاده از این تگ در ارائه یک متن به صورت ویژه میتواند بسیار تاثیر گذار باشد.با استقاده از این تگ میتواند یک جمله را که از اهمیت ویژه ای در متن شما برخوردار است به راحتی مشخص کنید. هنگام استفاده از این تگ به صورت پیش فرض فضاهای خالی به ابتدا و انتهای متن مورد نظر اضافه خواهد شد و با ایجاد حاشیه این متن از سایر اجزاء جدا می شود.

    <blockquote>طراحی هدفمند وب سایت | webtarget.ir</blockquote>

۸ – <cite>

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

<blockquote>  
    <p>"مدیران اثر بخش در زمان حال زندگی می‌کنند اما همیشه به فکر آینده هستند" <cite> - ال هیز </cite> </p>  
</blockquote>  

۹ – <dl>

استفاده از لیست ( list ) یکی از بهترین روشها برای دسته بندی اطلاعات است . تگهای مختلفی برای این منظور مورد استفاده قرار میگیرند که یکی از عمومی ترین آنها ( ul , li ) هستند .
به طور کلی لیست ها به سه دسته زیر تقسیم می شوند که استفاده از هر کدام از این نوع لیست ها خصوصیات و شرایط خود را نیز دارد.

  • ۱٫ Unordered List (ul) | لیست نامرتب
  • ۲٫ Ordered List (ol) | لیست مرتب شده
  • ۳٫ Definition List (dl) | لیست همراه با توضیحات

از لیست <dl> , <dd> , <dt> زمانی استفاده خواهد شد که نیازی به توضیح برای اجزاء در یک لیست مورد نیاز باشد.

<dl> | مشخص کننده لیست
<dt> | عنوان یک جزء از لیست
<dd> | توضیحات در مورد یک جزء از لیست

    <dl>  
        <dt>This is list item #1</dt>  
            <dd>This is the definition of list item #1</dd>  
        <dt>This is list item #2</dt>  
            <dd>This is the definition of list item #2</dd>  
    </dl>

۱۰ – &#39; , (and other ASCII characters)

استفاده از کدهای استاندارد ASCII به جای نماد ها ، اگرچه شاید یک کار وقت گیر به نظر یک طراح وب سایت برسد ، اما استفاده از این کدهای استاندارد این اطمینان را به یک طراح وب سایت میدهد که نماد مورد نظر به خوبی توسط مرورگر شناخته می شود و به نمایش در خواهد آمد.
Apostrophe = &#39; = '
وب سایت w3school.com میتواند منبع خوبی برای دیدن تمامی کدهای استاندارد ASCII باشد. استفاده از این کدها میتواند در بهبود استاندارد یک وب سایت کمک کند

Be Sociable, Share!


۱۹ دیدگاه


  1. saman
    ۱۱ اسفند ۱۳۸۹

    اقا خیلی توپ /ادامه بدین..




  2. مسعود
    ۱۱ اسفند ۱۳۸۹

    عالی بود امیر جان ! بازم گل کاشتی




  3. کامران
    ۱۱ اسفند ۱۳۸۹

    ممنون امیر جان، عالی بود




  4. هادی
    ۱۱ اسفند ۱۳۸۹

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



  5. […] ۲۰۱۱-Mar-02 اقا خیلی توپ /ادامه […]




  6. saman
    ۱۲ اسفند ۱۳۸۹

    درود

    مطالب مفیدی بود




  7. The Master
    ۱۲ اسفند ۱۳۸۹

    خیلی مفید و عالی بود، خسته نباشید
    keep on




  8. علی
    ۱۲ اسفند ۱۳۸۹

    مرسی عالیست، تشکر.




  9. سید امیر
    ۱۳ اسفند ۱۳۸۹

    ممنون از نطالب مفیدتون




  10. ali
    ۱۵ اسفند ۱۳۸۹

    خیلی خوب بود ممنون بازهم ادامه بدهید




  11. سعید
    ۲۹ فروردین ۱۳۹۰

    واقعا لذت بردم
    امیدوارم بتونم عضو شم و اندک دانسته هام رو به اشتراک بگذارم.
    شاد باشید




  12. آرش
    ۳۰ فروردین ۱۳۹۰

    با سلام خدمت شما
    ببخشید من وقتی یک تصویر یا یک آیکون رو در وبلاگم به یک صفحه لینک می کنم دور عکس یا آیکونم یک کادر آبی میفته! چه کدی در بخش درج لینک بنویسم تا از این کادر آبی خلاص بشم؟!! واقعا ممنون می شم راهنماییم کنید




  13. امیر سروری
    ۳۰ فروردین ۱۳۹۰

    سلام آرش جان
    این کد رو توی تگ a قرار بده “border=”0




  14. عسل
    ۳۰ اردیبهشت ۱۳۹۰

    بازم یه دنیا ممنون




  15. جوجه پزشک
    ۱۷ مرداد ۱۳۹۰

    سلام کاشکی لینک دانلود PDF بقیه آموزش هاتون رو هم مثل اون ۱۰ قسمت آموزش HTML میذاشتید
    ولی باز هم یه دنیا ممنون




  16. سما
    ۷ مهر ۱۳۹۰

    سلام
    اگر ممکنه آموزش بدید برای ثبت نام کاربران چه کدی باید استفاده بشه
    تشکر




  17. shahrokh
    ۱۰ مهر ۱۳۹۰

    سلام آقا اگه فایلهای pdf این مطالب رو در آخر صفحه برای دانلود بزارید واقعا فوق العاده میشه




  18. روژ
    ۱۵ دی ۱۳۹۰

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




  19. سید امیر
    ۲ فروردین ۱۳۹۱

    بسیار عالی بود.



دیدگاه خود را بنویسید