آموزش تگ های مقدماتی HTML

آموزش تگ های مقدماتی HTML

تگ توضیحات <– … –!>

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

< !– کد زیر یک پاراگراف ایجاد مینماید — >
< 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 است.

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

تگ لینک ( 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 گفته شده نقل مکان نمود.
کمک رایانه
مشکلات رایانه ای
سوالات رایانه ای
پاسخگویی به سوالات رایانه ای

1 دیدگاه دربارهٔ «آموزش تگ های مقدماتی HTML»

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *