آموزش HTML

تگ محدوده متن Span

تگ span برای متن های کوتاه استفاده می شود. ولی ترجیحا از این تگ بهتر است استفاده نشود.

زمانیکه شما از تگ span استفاده میکنید ، میتوانید از ویژگی های CSS یا Javascript برای این تگ استفاده کنید. تگ span ، در واقع همان کنترل Label در asp.net میباشد.

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

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

Global Attributes in HTML

در استفاده از این تگ شما میتوانید از ویژگی های عمومی (Global Attributes) استفاده کنید. که در بخش ویژگی های عمومی در HTML به طور کلی در مورد آن توضیح داده ایم.

Event Attributes

همچنین میوانید از رویدادهای (Event Attributes) استفاده کنید.

دنبال کردن این مطلب

تگ لینک ( a )

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

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

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

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

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

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

دنبال کردن این مطلب

تگ عکس img

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

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

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

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

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

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

 

دنبال کردن این مطلب

تگ گروه بندی

تگ گروه بندی 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>

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

خصوصیت اصلی :

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

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

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

<fieldset>

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

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

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

</fieldset>

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

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

دنبال کردن این مطلب

فرمت دهی B , Hr , Sub , Sup ,

تگ 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>

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

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

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

دنبال کردن این مطلب

تگ های پاراگراف

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

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

 

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

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

بطور مثال :

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

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

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

متن تست است.

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

 

تگ Br :

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

بطور مثال :

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

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

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

 

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

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

 

دنبال کردن این مطلب

تگ عنوان 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 > متن تست < /p >

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

دنبال کردن این مطلب

تگ لینک ( Link )

این تگ حاوی خصیصه های مختلفی برای ارتباط با فایل های خارجی می باشد. توصیه می شود که تگ لینک ( تگ Link ) در بخش head سایت استفاده گردد.

مهمترین استفاده های آن :

1 - تعریف استایل ( Style ) خارجی :

مهمترین کاربرد این تگ تعریف استایل (Style) خارجی حاوی کدهای Css می باشد. یکی از روش های دیگر تعریف Css برای ظاهر و Style صفحه Html استفاده از فایل خارجی حاوی کد Css و تعریف آن در تگ Link در بخش Head صفحه می باشد.

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

برای تعریف Style خارجی فایل حاوی Css از کد زیر استفاده نمایید :

<link rel="Stylesheet" type="text/css" href="آدرس فایل سی اس اس" />

<link rel="Stylesheet" type="text/css" href="../Css/theme1.css" />

<link rel="Stylesheet" type="text/css" href="../Css/theme2.css" />

2 - تعریف آیکون صفحه :

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

<link rel="icon" href="./Design/ICON.ICO" type="image/x-icon" />
و

<link rel="shortcut icon" href="./Design/ICON.ICO" type="image/x-icon" />

دنبال کردن این مطلب

تگ استایل صفحه ( Style )

یکی از روش های تعریف استایل Css ، استفاده از تگ استایل ( تگ Style ) در بخش head صفحات html است ، که با تعریف آن میتوان در تمام صفحه برای ظاهر سایت استفاده نماییم.

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

طریقه ی تعریف آن بصورت زیر می باشد :

<style type="text/css" >
.

. Css Code

.

</style>

دنبال کردن این مطلب
ratingValue4.9 worstRating 1 bestRating 5 reviewCount 834