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

ارائه توضیحات در مورد کدهای نوشته شده یکی از اصول کدنویسی استاندارد است که می تواند شما را در حفظ ساختار کلی وب سایت نیز کمک کند.این توضیحات می توانند در مورد شروع و یا پایان یک قسمت یا جزء از وب سایت و یا توضیح در مورد تکنولوژی مورد استفاده باشد.برای ارائه توضیحات در مورد کدهای HTML می توانید به روش زیر عمل کنید.این توضیحات در Source Code قابل رویت می باشد.
1
2
3
4
5
6
7
8
9		 <!-- 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>

در بر گیرنده و مشخص کننده محتوای جداول در سطر ها و ستون ها
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24		 <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 در اختیار مخاطبان خود قرار دهید و انتخاب را برای آنها ساده و ساده تر کنید.
1
2
3
4
5
6
7
8
9
10		 <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> برای نشان دادن درجه اهمیت مطالب و تیتر ها در طراحی وب سایت بسیار مورد اهمیت است که باید در هنگام آموزش html حتما یادآوری شود.
استفاده از تمامی تگهای <h> می تواند در زیبایی ، استاندارد ، بهینه سازی و سادگی در طراحی وب سایت کمک چشمگیری داشته باشد.

۵ – <fieldset> and <legend>

فرم ها نقش بسیار پر رنگی در طراحی وب سایت دارند . چینش مناسب فرمها و دسته بندی مطالب در فرم ها میتواند در ارتباط با مخاطب تاثیر بسیار مثبتی داشته باشند.
با استفاده از تگ <fieldset> میتوانید محتویات یک فرم را از اجزاء پیرامون آن جدا کنید و یا فرمهایی با حجم اطلاعات بالا را به سادگی دسته بندی کنید.
و با استفاده از تگ <legend> می توانید عنوان هر بخش را مشخص نمائید.
1
2
3
4
5
6
7
8		 <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 تاثیر گذار است .
1
2
3
4
5		 <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>

استفاده از این تگ در ارائه یک متن به صورت ویژه میتواند بسیار تاثیر گذار باشد.با استقاده از این تگ میتواند یک جمله را که از اهمیت ویژه ای در متن شما برخوردار است به راحتی مشخص کنید. هنگام استفاده از این تگ به صورت پیش فرض فضاهای خالی به ابتدا و انتهای متن مورد نظر اضافه خواهد شد و با ایجاد حاشیه این متن از سایر اجزاء جدا می شود.
1 <blockquote>طراحی هدفمند وب سایت | webtarget.ir</blockquote>


8 – <cite>

از این تگ بیشتر برای ارائه یک نقل قول استفاده میشود. با استفاده از این تگ میتوانید به سادگی ، متن و نوشته ای را که ازجای دیگر نقل قول میکنید ، حالت ببخشید.
1
2
3		 <blockquote>
<p>"مدیران اثر بخش در زمان حال زندگی می‌کنند اما همیشه به فکر آینده هستند" <cite> - ال هیز </cite> </p>
</blockquote>


9 – <dl>

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

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

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

1
2
3
4
5
6		 <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 – &#39; , (and other ASCII characters)

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

وب سایت w3school.com میتواند منبع خوبی برای دیدن تمامی کدهای استاندارد ASCII باشد. استفاده از این کدها میتواند در بهبود استاندارد یک وب سایت کمک کند