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

آشنایی با تگهای label , blockquote , cite , dl , thead , tbody , tfoot , optgroup , fieldset , legend


امیر سروری ۶ دیدگاه HTML , استاندارد وب سایت , اصول طراحی وب سایت سه شنبه, ۱۲ام بهمن , ۱۳۸۹ 16906 بازدید

در این مطلب سعی خواهد شد که تعدادی از خصوصیات تگ های 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 باشد. استفاده از این کدها میتواند در بهبود استاندارد یک وب سایت کمک کند



نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


۶ دیدگاه برای این نوشته ثبت شده است


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

    یا من خیلی دیر این پست رو دیدم یا شما خیلی دیر نوشتیدش ;)
    همونطور که خودتونم فرمودید چندتا از تگ هایی که ذکر کردید outdate شده اند. اما در کل دونستنش خالی از لطف نبود.
    ممنون




  2. Shahrokhi
    ۲۱ اسفند ۱۳۸۹

    اسم بعضیاشو نشنیده بودم اصلا. خیلی ممنون




  3. hadi
    ۲۲ خرداد ۱۳۹۰

    دمت گرم




  4. sadegh
    ۲۵ شهریور ۱۳۹۰

    سلام واقعا عالی بود چون من برای پایان نامم در مورد طراحی وب سایت موضوع جمع آوری می کردم همه مطالبتون بدردم خورد واقعا عالی بود دمتون گرم




  5. mani
    ۲۸ خرداد ۱۳۹۱


  6. سید داوود فامرینی
    ۲۱ آبان ۱۳۹۱

    سلام
    توضیحات خوبی بود اما در بخش لیبل استانداردها به صورتی که در زیر مثال میارم از سایت w3schools که خیلی منطقی تره !

    http://www.w3schools.com/tags/tag_label.asp



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





نشانی ایمیل شما منتشر نخواهد شد.

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

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

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.