در این مطلب سعی خواهد شد که تعدادی از خصوصیات تگ های HTML که امروزه کمتر از آنها در طراحی وب سایت استفاده می شود را بیان کنیم . استفاده درست از این تگها می تواند در بهینه تر شدن کار یک طراح وب سایت و همچنین استاندارد بودن وب سایت کمک کند.
1 – ارائه توضیحات در کدهای 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>
3 – <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>
4 – تیتر <h1> , <h2> , <h3> , <h4> , <h5> , and <h6>
در مورد اهمیت این تگها در بهینه سازی وب سایت برای موتورهای جستجو بسیار شنیده ایم . از تگها در طراحی وب سایت بسیار استفاده میشود ، اما آخرین باری را که از تگهای <h3> , <h4> و … استفاده کرده اید را به خاطر دارید ، آیا درجه اهمیت مطالبی که با استفاده از این تگها نشان داده اید رعایت شده اند؟
استفاده از این تگها از <h1> تا <h6> برای نشان دادن درجه اهمیت مطالب و تیتر ها در طراحی وب سایت بسیار مورد اهمیت است.
استفاده از تمامی تگهای <h> می تواند در زیبایی ، استاندارد ، بهینه سازی و سادگی در طراحی وب سایت کمک چشمگیری داشته باشد.
5 – <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>
6 – <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>
7 – <blockquote>
استفاده از این تگ در ارائه یک متن به صورت ویژه میتواند بسیار تاثیر گذار باشد.با استقاده از این تگ میتواند یک جمله را که از اهمیت ویژه ای در متن شما برخوردار است به راحتی مشخص کنید. هنگام استفاده از این تگ به صورت پیش فرض فضاهای خالی به ابتدا و انتهای متن مورد نظر اضافه خواهد شد و با ایجاد حاشیه این متن از سایر اجزاء جدا می شود.
<blockquote>طراحی هدفمند وب سایت | webtarget.ir</blockquote>
8 – <cite>
از این تگ بیشتر برای ارائه یک نقل قول استفاده میشود. با استفاده از این تگ میتوانید به سادگی ، متن و نوشته ای را که ازجای دیگر نقل قول میکنید ، حالت ببخشید.
<blockquote> <p>"مديران اثر بخش در زمان حال زندگي ميكنند اما هميشه به فكر آينده هستند" <cite> - ال هيز </cite> </p> </blockquote>
9 – <dl>
استفاده از لیست ( list ) یکی از بهترین روشها برای دسته بندی اطلاعات است . تگهای مختلفی برای این منظور مورد استفاده قرار میگیرند که یکی از عمومی ترین آنها ( ul , li ) هستند .
به طور کلی لیست ها به سه دسته زیر تقسیم می شوند که استفاده از هر کدام از این نوع لیست ها خصوصیات و شرایط خود را نیز دارد.
- 1. Unordered List (ul) | لیست نامرتب
- 2. Ordered List (ol) | لیست مرتب شده
- 3. 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>
10 – ' , (and other ASCII characters)
استفاده از کدهای استاندارد ASCII به جای نماد ها ، اگرچه شاید یک کار وقت گیر به نظر یک طراح وب سایت برسد ، اما استفاده از این کدهای استاندارد این اطمینان را به یک طراح وب سایت میدهد که نماد مورد نظر به خوبی توسط مرورگر شناخته می شود و به نمایش در خواهد آمد.
Apostrophe = ' = '
وب سایت w3school.com میتواند منبع خوبی برای دیدن تمامی کدهای استاندارد ASCII باشد. استفاده از این کدها میتواند در بهبود استاندارد یک وب سایت کمک کند
6 دیدگاه برای این نوشته ثبت شده است
دیدگاه خود را بنویسید
نشانی ایمیل شما منتشر نخواهد شد.
کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.
لطفا دیدگاهتان تا حد امکان مربوط به پست بالا باشد. اگر حرف دیگری دارید و یا قصد تماس با من را دارید، از فرم تماس استفاده کنید.
شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود
برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]
نیما
10 March 2011
یا من خیلی دیر این پست رو دیدم یا شما خیلی دیر نوشتیدش ;)
همونطور که خودتونم فرمودید چندتا از تگ هایی که ذکر کردید outdate شده اند. اما در کل دونستنش خالی از لطف نبود.
ممنون
Shahrokhi
12 March 2011
اسم بعضیاشو نشنیده بودم اصلا. خیلی ممنون
hadi
12 June 2011
دمت گرم
sadegh
16 September 2011
سلام واقعا عالی بود چون من برای پایان نامم در مورد طراحی وب سایت موضوع جمع آوری می کردم همه مطالبتون بدردم خورد واقعا عالی بود دمتون گرم
mani
17 June 2012
mer30
سید داوود فامرینی
11 November 2012
سلام
توضیحات خوبی بود اما در بخش لیبل استانداردها به صورتی که در زیر مثال میارم از سایت w3schools که خیلی منطقی تره !
http://www.w3schools.com/tags/tag_label.asp