تگ توضیحات <-- ... --!>

عبارتی که در داخل تگ توضیحات نوشته می شود توسط مرورگر نادیده گرفته می شوند.

این تگ برای ایجاد توضیحات برای کد ها مورد استفاده قرار میگیرد.

مانند زیر :

< !-- کد زیر یک پاراگراف ایجاد مینماید -- >


< p > متن تست < /p >

که در کد بالا تنها متن "متن تست" نمایش داده میشود .

 

تگ عنوان H1 - H6 :

تگ های هدر یا تگ های عنوان از جمله مهمترین تگ ها برای جستجوگر های وب می باشد که توجه ویژه ای به عناوین داخل آنها دارند.

تگ های H1 تا H6 به ترتیب از H1 بزرگترین استایل تا آخر می باشد که درجه ی اهمیت آنها هم به همین میزان است.

نکته ی مهم : سعی کنید در صفحاتتون Title نوشته شده در بخش header سایت را در محلی مشخص در بالای صفحه بین تگ H1 قرار بدهید.

نحوه ی استفاده از آن بصورت زیر است :

<h1>عنوان شماره 1</h1>

<h2>عنوان شماره 2</h2>

<h3>عنوان شماره 3</h3>

<h4>عنوان شماره 4</h4>

<h5>عنوان شماره 5</h5>

<h6>عنوان شماره 6</h6>

خروجی قطعه کد زیر بصورت زیر می باشد :

 

عنوان شماره 1

عنوان شماره 2

عنوان شماره 3

عنوان شماره 4

عنوان شماره 5
عنوان شماره 6

 

نکته : اندازه و نوع فونت بصورت پیش فرض به صورت بالا قرار میگیرد ، اما در صورت دلخواه میتوانید نوع و اندازه و خصوصیات ظاهری دیگر تگ های عنوان (h1 - h2) را با استفاده از Css تغییر دهید.

 

تگ های پاراگراف P , Br

تگ های پاراگراف P , Br برای تراز بندی متون و جملات درون صفحات کاربرد زیادی دارند.

 

تگ P یا پاراگراف :

متن داخل این تگ بصورت یک پاراگراف در نظر گرفته می شود. در صورت ایجاد یک پاراگراف یا تگ P جدید ، پاراگراف بعدی به سطر بعد می رود.

بطور مثال :

<p> متن تست است. </p>

<p> متن تست شماره 2. </p>

خروجی بصورت زیر می باشد :

متن تست است.

متن تست شماره 2.

 

تگ Br :

تگ Br در نقش enter در ورد می باشد بدین صورت که خط جدیدی درون پاراگراف ایجاد میکند و نوشته ی بعد از آن را به سطر جدید می برد .

بطور مثال :

<p> این متن <br /> تست است. </p>

خروجی بصورت زیر می شود :

این متن 
تست است.

 

نکته 1 : استفاده ی زیاد از این تگ مناسب نیست و بهتر است با استفاده از تگ P عمل انتقال به خط جدید انجام گردد ، دلیل اصلی آن کند نمودن سایت در استفاده های زیاد از این تگ می باشد.

نکته 2 : این تگ بصورت یکه استفاده میشود و تگ پایانی ندارد.

 


تگ Center :

متن داخل تگ center بصورت تراز وسط نمایش داده می شود. توصیه میشود به جای استفاده از این تگ ، در صورت امکان از کدهای Css برای قالب دهی و تراز بندی متن ها استفاده شود.

دلیل این امر کم حجم نمودن کدها و در نتیجه سرعت بالاتر و نیز سهولت در تغییرات احتمالی قالب و فرمت سایت میباشد.

مثالی در استفاده از این تگ :

<p> متن تست با تراز پیش فرض </p>

<center> متن تست با تراز وسط چین </center>

خروجی این کد بصورت زیر می باشد :

متن تست با تراز پیش فرض

متن تست با تراز وسط چین

 

تگ B :

متن داخل تگ B بصورت توپر شده نمایش داده می شود . این تگ نیز همانند تگ Center بهتر است از معادل های آن در Css استفاده شود.

مثالی در این زمینه ی تگ B :

<p> این متن <b> تست </b> می باشد. </p>

خروجی کد بالا بصورت زیر می باشد که کلمه ی تست بصورت بولد شده نمایش داده می شود :

این متن تست می باشد.

 

تگ Hr :

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

مثالی در این زمینه :

<p> این متن <hr />  تست است </p>

خروجی به صورت زیر می باشد :

این متن


تست است

 

تگ های Sub و Sup :

متن داخل تگ sub و تگ sup بصورت اندیس (sup) و یا زیرنویس (sub) در می آید. شکل کلی آن بصورت زیر است :

<p> این متن <sub> تست</sub> می باشد. </p>

<p> این متن <sup> تست </sup> می باشد. </p>

خروجی بصورت زیر می باشد :

این متن تست می باشد.

این متن تست می باشد.

 

تگ گروه بندی Fieldset , Legend

تگ Fieldset برای گروه بندی در فرم ها بسیار کاربرد دارد. این تگ در Asp.net معادل سروری کنترل Panel می باشد. برای تعیین عنوان یک گروه از تگ Legend در ابتدای تگ Fieldset استفاده می گردد.

نکته ی بسیار مهم : در صورت استفاده ننمودن از کدنویسی سروری برای کنترل های Asp.net توصیه اکید می شود که از تگ های معادل آنها استفاده شود. بطور مثال بجای استفاده از کنترل Asp:Panel از تگ Fieldset و Legend استفاده شود. زیرا در نهایت کنترل های Asp.net به تگ های Html خالص تبدیل شده و برای جلوگیری از این سربار اضافه از تگ های مستقیم آنها استفاده نمایید.

مزیت دیگر این روش کنترل بهتر آنها در Style آنها بوسیله Css می باشد که کنترل های Asp.net بعضا در این مورد مشکل زا هستند.

 

نمونه ای از کاربرد تگ Fieldset و Legend را در مثال زیر می بینید:

 <fieldset>

      <legend>عنوان گروه</legend>

      <p>این متن تست است.</p>

       <p>این متن تست شماره 2 است.</p>

</fieldset>

خروجی کد زیر بصورت زیر است :

عنوان گروه

این متن تست است.

این متن تست شماره 2 است.

 

خصوصیت اصلی :

خصوصیت اصلی تگ Legend خصیصه ی Align یا تراز می باشد که محل قرار گیری عنوان را در این تگ تعیین میکند.

مقدار هایی که این خصوصیت می پذیرد عبارتند از :  Top , Bottom , Left , Right

مثالی در این زمینه :

 <fieldset>

      <legend align="left">عنوان گروه</legend>

      <p>این متن تست است.</p>

       <p>این متن تست شماره 2 است.</p>

</fieldset>

خروجی کد زیر بصورت زیر است :

عنوان گروه

این متن تست است.

این متن تست شماره 2 است.

 که در این مثال همان طور که می بینید تراز و محل قرار گیری عنوان گروه در سمت چپ قرار گرفته است.

 



تگ عکس img

یکی از مهمترین و پر استفاده ترین تگ ها در HTML تگ img یا عکس می باشد.

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

نکته : این تگ بصورت یکه بکار می رود :

<img    Propertys="values"   ...  />

مهمترین خصوصیات <img> بصورت زیر است:

 

 خصوصیت  مقادیر و توضیح مختصر
 src آدرس عکس در فضای وب 
alt متن جایگزین متن
width عرض تصویر به پیکسل
height ارتفاع تصویر به پیکسل
border مقدار پیکسل حاشیه (پیش فرض صفر)
usemap نام شناسه ی نقشه ی تصویر متصل به عکس

 

خصوصیت Src : در این خصوصیت که اصلی ترین خصوصیت تگ <img> می باشد ، آدرس تصویر آپلود شده در فضای اینترنت قرار میگیرد. 

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

ساده ترین مثال از استفاده ی تگ img :

<img   src="http://pars-soft.ir/administrator/files/UploadFile/1.jpg"   />

خروجی بصورت زیر می باشد :

 

خصوصیت Alt : خصوصیت Alt یا Alternate Image ، خصوصیتی مهم می باشد که برای متن جایگزین تصویر به کار می رود.

در حالت پیش فرض در صورت اشتباه بودن آدرس و لود نشدن تصویر در مرورگر اکسپلورر علامت ضربدر را برای عکس نمایش میدهد (در مرورگرهایی مثل اپرا علامت ضربدر نیز نمایش داده نمی شود).

حال با استفاده از خصوصیت alt برای تگ img میتوان در صورتی که آدرس عکس اشتباه و یا عکس نتواند لود شود ، متنی را به کاربر نشان دهیم.

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

اهمیت ویژه ی این خصوصیت برای موتورهای جستجوگر می باشد که در بخش Seo به آن می پردازیم. به طور خلاصه اینکه موتور های جستجوگر قادر به خواندن عکس نمی باشند و از طریق این خصوصیت به محتوای عکس قرار داده شده مطلع می گردند.

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

<img   src="administrator/files/UploadFile/1.jpg1"   alt="عکس مربوط به چشم"   />

خروجی بصورت زیر می باشد :

عکس مربوط به چشم

 

خصوصیات width , height , border : بصورت پیش فرض تگ img نمایش عکس ها را به اندازه ی اصلی عکس و بدون خط حاشیه نمایش میدهد. در صورتی که بخواهید تصویر را در سایز دلخواه و با خط حاشیه نمایش دهید از این خصوصیات استفاده نمایید. بطور مثال :

<img   src="administrator/files/UploadFile/1.jpg"   alt="عکس مربوط به چشم"  width="100"    height="100"   border="2"   />

خروجی بصورت زیر می باشد :

عکس مربوط به چشم

 نکته ی مهم دیگر که در بخش Seo به طور مفصل تری به آن پرداخته میشود این است ، با وجود اینکه خود HTML در صورت قرار ندادن سایز عکس با استفاده از height و widht ، اندازه ی تصویر ار به اندازه ی خود تصویر تبدیل میکند اما برای این پردازش اضافه توسط مرورگر ها و در نتیجه سرعت بالاتر لود صفحه سایز تصویر را وارد نمایید.

 

خصوصیت Usemap : این خصوصیت برای استفاده از عکس محدوده ای با استفاده از تگ های map و area می باشد. در بخش عکس محدوده ای map , area میتوانید نحوه ی کاربرد آنرا مشاهده نمایید .



تگ لینک ( a )

تگ لینک یا تگ <a> برای ارتباط بین صفحات وب و یا ایجاد لنگر در داخل صفحه، در سایت به کار میرود.

این تگ به صورت کلی زیر به کار میرود :

< a   Properties ="Value"  ....  >    محتوا   </ a >

نکته ی مهم در استفاده از تگ <a> اینست که در بخش محتوا می توان غیر از متن از تصویر و یا المنت های دیگر نیز استفاده نمود.

مهمترین خصوصیات <a> به صورت زیر می باشد :

 

 خصوصیت  مقادیر و توضیح مختصر
 href آدرس صفحه ای که میخواهیم با کلیک بر روی محتوا مرورگر به آن برود.
target طریقه ی باز شدن لینک در مرورگر
name نام لنگرگاه برای پرش به قسمتی از صفحه

 

 خصوصیت Href : این خصوصیت مهمترین خصوصیت تگ a می باشد که با مرورگر پس کلیک بر روی محتوای لینک به آدرسی که در این خصوصیت قرار میگیرد می رود. بطور مثال :

< a  href="http://pars-soft.ir/index.aspx" > اینجا کلیک کنید </ a >

< / br >

< a   href="http://pars-soft.ir/index.aspx" ><img   src="administrator/files/UploadFile/1.jpg"   /> </ a >

خروجی مثال بالا بصورت زیر می باشد :

اینجا کلیک کنید

 

همانطور که مشاهده می نمایید در بخش محتوای تگ لینک <a> می توان از عکس نیز استفاده نمود تا در صورت کلیک بر روی عکس ، عکس به صورت لینک کار کند و به آدرسی که در href گفته شده نقل مکان نمود.