مباحث عمومی در HTML

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
فهرست مطالب:

  1. تعیین عنوان نمایش داده شده در بالای مرورگر اینترنت ، برای صفحات HTML
  2. تگ DOCTYPE در صفحات وب
  3. ایجاد بازه های درون خطی (inline spans) با تگ span در HTML
  4. تعیین عدم چیدن یک بخش جدید در کنار بخش فعلی، با مشخصه clear در HTML
  5. redirect کردن یک صفحه، بعد از گذشت چند ثانیه
  6. تعریف دو یا چند کلاس (class) برای یک عنصر (element)، در HTML
  7. تعیین یک Favicon برای صفحات HTML
  8. ساخت دو عنصر div به صورت قرار گرفته در کنار هم و با ارتفاع برابر
  9. ساخت یک دکمه (Button)، با تگ button در HTML



منبع: kelidestan
 

P O U R I A

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

تعیین عنوان نمایش داده شده در بالای مرورگر اینترنت ، برای صفحات HTML

زمانی که شما یک صفحه اینترنتی را در مرورگر اینترنت خود باز می کنید ، عنوانی در بالای مرورگر اینترنت ، برای آن صفحه ، نمایش داده می شود . این عنوان را می توان با استفاده از تگ title در HTML ، تعیین نمود . تعیین عنوان مناسب برای صفحات وب سایت شما ، می تواند باعث شود که در موتورهای جستجو به رتبه های بالاتری دست پیدا کنید . بنابراین باید عنوان مناسبی را برای صفحات وب سایت خود انتخاب کنید . برای تعیین عنوان ، باید عبارتی را که می خواهید برای عنوان نمایش داده شود را در میان زوج تگ <title> و <title/> بنویسید . این زوج تگ نیز باید در بخش head از صفحه HTML قرار بگیرند ، یعنی اینکه در میان زوج تگ <head> و <head/> قرار داده شوند . به مثال زیر توجه کنید :

[h=4]مثال :[/h]
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]title[/B][/COLOR]>[/COLOR]title for your webpage[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]title[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]This is a paragraph.[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
 
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]
[h=4]نتیجه :[/h]برای آنکه عنوان را بتوانید در بالای مرورگر خود ببینید ، به لینک زیر بروید و سپس برای بازگشت ، بر روی دکمه back مرورگر اینترنت خود کلیک کنید تا به این صفحه بازگردید :

برای دیدن عنوان در مرورگر اینترنت ، کلیک کنید

عبارت title for your webpage در بالای مرورگر اینترنت نمایش داده خواهد شد .
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
تگ DOCTYPE در صفحات وب

تگ DOCTYPE در صفحات وب

تمامی صفحات وب که به طور استاندارد نوشته شده اند ، با تگ DOCTYPE شروع می شوند . به عنوان مثال ، کدهای HTML یک صفحه HTML استاندارد ، به طور کلی ، به صورت زیر می باشد :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#00BBDD]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[/FONT]
[/FONT][/COLOR]
اکنون می خواهیم توضیح بدهیم که تگ DOCTYPE در صفحات وب ، به چه منظوری به کار می رود . نرم افزارهای مرورگر اینترنت (مثل internet explorer ، firefox و ...) دارای دو مد عملیاتی می باشند . مد اول ، standards و مد دوم ، quirks نام دارد . وقتی مرورگر اینترنت یک صفحه وب (مثلا یک صفحه HTML) را می خواند ، ابتدا بررسی می کند که آیا در ابتدای کدها ، تگ DOCTYPE وجود دارد یا نه . اگر تگ DOCTYPE نوشته شده باشد ، بنابراین کسی که کدهای این صفحه وب را نوشته است ، با این تگ DOCTYPE ، بیان کرده است که وی از استانداردهای طراحی وب که توسط سازمان جهانی W3C تصویب شده است ، برای نوشتن کدها استفاده کرده است . بنابراین مرورگر اینترنت از مد standards برای نمایش این صفحه وب استفاده می کند (بر اساس قوانین تصویب شده توسط W3C) . اما خوب تعدادی از صفحات وب ، قبل از تصویب این قوانین و استاندارد ها ، نوشته شده اند . بنابراین اگر مرورگر اینترنت ، تگ DOCTYPE را در ابتدای کدها پیدا نکند ، نتیجه می گیرد که این صفحه وب بدون استفاده از استانداردها (بدون رعایت کردن استانداردهای طراحی وب) ، نوشته شده است . در این حالت ، مرورگر اینترنت از مد quirks برای نمایش صفحه وب استفاده می کند که در آن تعدادی از استانداردها نادیده گرفته می شوند و صفحه وب به همان شیوه های قدیمی خواندن کدها ، خوانده و نمایش داده می شود .

بنابراین با این شیوه ، مرورگر اینترنت قادر است که هم صفحات وب استاندارد و هم صفحات وبی که در قدیم نوشته شده اند (یا استاندارد ها را رعایت نکرده اند) را نمایش بدهد .
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
ایجاد بازه های درون خطی (inline spans) با تگ span در HTML

ایجاد بازه های درون خطی (inline spans) با تگ span در HTML

قبل از شرح کاربرد تگ span در HTML، بهتر است ابتدا تگ div را توضیح دهیم تا بعدا کاربرد تگ span در HTML را بهتر متوجه شوید.

تگ div در HTML، برای تقسیم کل صفحه به بخش های مختلف، به کار می رود. سپس معمولا درون هر بخش، تعدادی عناصر درون خطی، مثل پاراگراف (با تگ p)، تیترها (با تگ های h1 تا h6) و ... قرار داده می شود. گاهی ممکن است که یک عنصر درون خطی را بخواهیم به قسمت های (بازه های) مختلف تقسیم کنیم تا برخی قسمت ها (بازه ها) دارای یک سری ویژگی های خاص و سایر قسمت ها (بازه ها) دارای ویژگی های دیگری باشد. در این حالت، دیگر از تگ div استفاده نمی کنیم و تگ span در این موارد به کار می رود. به مثال زیر توجه کنید :

[h=4]مثال :[/h]با تگ span، قسمتی از متن یک پاراگراف (متن درون عنصر خطی پاراگراف) را به رنگ قرمز، در می آوریم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]this [COLOR=#009900]<[COLOR=#000000][B]span[/B][/COLOR] [COLOR=#000066]style[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"color:red"[/COLOR]>[/COLOR]is a[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]span[/B][/COLOR]>[/COLOR] paragraph.[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]p[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]
[h=4]نتیجه :[/h]

Untitled.jpg
مشاهده می کنید که قسمت مشخص شده توسط تگ span، به رنگ قرمز نمایش داده شده است.
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
تعیین عدم چیدن یک بخش جدید در کنار بخش فعلی، با مشخصه clear در HTML

تعیین عدم چیدن یک بخش جدید در کنار بخش فعلی، با مشخصه clear در HTML

فرض کنید که ما یک بخش داریم که می تواند یک عکس، یک پاراگراف یا هر چیز دیگر باشد. چنانچه قصد داشته باشیم که هیچ بخش دیگری (یک عکس دیگر یا پاراگراف دیگر یا ...) در کنار این بخش، چیده نشود، باید از مشخصه clear در HTML استفاده کنیم. به عنوان مثال می توانیم این مشخصه را در تگ <br /> به کار ببریم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]br[/B][/COLOR] [COLOR=#000066]clear[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"all"[/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]
همان طور که در کد بالا مشاهده می کنید، مقدار all را برای مشخصه clear تعیین کرده ایم که باعث می شود نه در سمت چپ و نه در سمت راست بخش مورد نظرمان، بخش جدیدی چیده نشود.برای اینکه تعیین کنیم که تنها در سمت چپ، بخش جدیدی چیده نشود، کدهای زیر را می نویسیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]br[/B][/COLOR] [COLOR=#000066]clear[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"left"[/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]
و یا برای عدم چیده شدن در سمت راست، خواهیم داشت :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]br[/B][/COLOR] [COLOR=#000066]clear[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"right"[/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]
علاوه بر این، مشخصه clear را برای تگ div می توان به کار برد که معمولا برای تعیین ساختار کلی صفحه و خراب نشدن طراحی، می توان آن را به صورت زیر نوشت :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]clear[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"all"[/COLOR]><[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]
مثلا فرض کنید که تصویر و منوی بالای سایت را طراحی کرده اید و حالا می خواهید که سایر بخش های سایت، در زیر این بخش بالای سایت (تصویر و منوی بالا) قرار بگیرند، برای این منظور می توان از همین کد استفاده کرد تا سایر بخش ها، بخش تصویر و منوی بالای سایت را خراب نکرده و در زیر آن نمایش داده شوند.
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
redirect کردن یک صفحه، بعد از گذشت چند ثانیه

redirect کردن یک صفحه، بعد از گذشت چند ثانیه

برای آشنایی با نحوه redirect کردن صفحه، پس از گذشت چند ثانیه، به مثال زیر توجه کنید :

مثال :


کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]meta[/B][/COLOR] [COLOR=#000066]http-equiv[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"refresh"[/COLOR] [COLOR=#000066]content[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"10;http://www.iran-neg.com"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
لطفا صبر کنید، تا چند ثانیه دیگر، به صفحه اصلی سایت منتقل می شوید
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]
آدرس http://www.www.www.iran-eng.ir همان آدرسی است که کاربر به آن منتقل می شود و عدد 10 نیز تعداد ثانیه های انتظار قبل از انتقال می باشد.
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
تعریف دو یا چند کلاس (class) برای یک عنصر (element)، در HTML

تعریف دو یا چند کلاس (class) برای یک عنصر (element)، در HTML

بر اساس طراحی در نظر گرفته شده برای بخش های مختلف سایت، ممکن است این نیاز به وجود بیاید که برای یک عنصر، دو یا چند کلاس (class) تعریف کنیم.

شیوه کلی کدنویسی، به این صورت می باشد (به عنوان مثال، فرض کرده ایم که عنصر، عنصر div باشد) :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]id[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"div1"[/COLOR] [COLOR=#000066]class[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"class1 class2"[/COLOR]>[/COLOR]
    [COLOR=#808080][I]<!-- some code -->[/I][/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]
مشاهده می کنید که برای مشخصه class ، دو نام مختلف نوشته ایم که با علامت فاصله، از هم جدا شده اند. بنابراین، عنصر div فوق، هم عضو کلاس class1 و هم عضو کلاس class2 می باشد.

اگر بخواهیم مثلا 5 کلاس برای عنصر div تعریف کنیم، می توانیم کدهای زیر را بنویسیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]id[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"div1"[/COLOR] [COLOR=#000066]class[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"class1 class2 class3 class4 class5"[/COLOR]>[/COLOR]
    [COLOR=#808080][I]<!-- some code -->[/I][/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]
 

P O U R I A

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

تعیین یک Favicon برای صفحات HTML

زمانی که شما یک Favicon برای صفحات سایت خود مشخص می کنید، تصویر مربوط به آن، در جعبه آدرس (address box) مرورگر اینترنت کاربر (البته در برخی مرورگرها)، در علاقه مندی ها (favorites یا bookmarks) و در tab های مرورگر، نمایش داده می شود. بنابراین می توان گفت که Favicon ، نمادی (یک لوگو) برای سایت شما خواهد بود.
مثلا شکل زیر را ببینید :

html-16.png


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

کلمه Favicon ، مخفف Favorites Icon می باشد. Favicon باید دارای اندازه 16 در 16 پیکسل باشد. هر صفحه ای که می خواهیم دارای Favicon باشد، باید کد زیر را در میان تگ های head آن صفحه بنویسیم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]link[/B][/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"your_image.png"[/COLOR] [COLOR=#000066]rel[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"shortcut icon"[/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]
که در آن، your_image.png ، نام تصویر مربوط به Favicon می باشد که به عنوان نماد سایت، قبلا طراحی کرده ایم.

محل قرار گیری این کد را در زیر نشان داده ایم (در میان کل کدهای یک صفحه HTML) :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#00BBDD]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR] xmlns[COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"http://www.w3.org/1999/xhtml"[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]meta[/B][/COLOR] [COLOR=#000066]http-equiv[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"Content-Type"[/COLOR] [COLOR=#000066]content[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"text/html; charset=utf-8"[/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]link[/B][/COLOR] [COLOR=#000066]href[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"your_image.png"[/COLOR] [COLOR=#000066]rel[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"shortcut icon"[/COLOR] [COLOR=#66CC66]/[/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]title[/B][/COLOR]>[/COLOR]عنوان[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]title[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]
 

P O U R I A

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

ساخت دو عنصر div به صورت قرار گرفته در کنار هم و با ارتفاع برابر

در مثال زیر، چگونگی ساخت دو عنصر div به صورت قرار گرفته در کنار هم و با ارتفاع برابر، نمایش داده شده است :

[h=4]مثال :[/h]
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]style[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"display: table-row;"[/COLOR]>[/COLOR]
    [COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]style[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"border:1px solid #cccccc; display: table-cell; background-color:#CF6;"[/COLOR]>[/COLOR]
        Some content![COLOR=#009900]<[COLOR=#000000][B]br[/B][/COLOR][COLOR=#66CC66]/[/COLOR]>[/COLOR]
        Some content![COLOR=#009900]<[COLOR=#000000][B]br[/B][/COLOR][COLOR=#66CC66]/[/COLOR]>[/COLOR]
        Some content![COLOR=#009900]<[COLOR=#000000][B]br[/B][/COLOR][COLOR=#66CC66]/[/COLOR]>[/COLOR]
        Some content![COLOR=#009900]<[COLOR=#000000][B]br[/B][/COLOR][COLOR=#66CC66]/[/COLOR]>[/COLOR]
        Some content![COLOR=#009900]<[COLOR=#000000][B]br[/B][/COLOR][COLOR=#66CC66]/[/COLOR]>[/COLOR]
    [COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR]
    [COLOR=#009900]<[COLOR=#000000][B]div[/B][/COLOR] [COLOR=#000066]style[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"border:1px solid #cccccc;  display: table-cell; background-color:#00F;"[/COLOR]>[/COLOR]
        Some content!
    [COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]div[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]
[h=4]نتیجه :[/h]
Untitled.jpg
 

P O U R I A

مدیر مهندسی شیمی مدیر تالار گفتگوی آزاد
مدیر تالار
ساخت یک دکمه (Button)، با تگ button در HTML

ساخت یک دکمه (Button)، با تگ button در HTML

با استفاده از تگ button در HTML ، می توانیم یک دکمه (Button) بسازیم. برای این منظور، باید تگ button را به صورت زیر به کار ببریم :
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]button[/B][/COLOR] [COLOR=#000066]type[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"button"[/COLOR]>[/COLOR]My Button[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]button[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]
به مثال زیر توجه کنید :

[h=4]مثال :[/h]
کد:
[COLOR=#000000][FONT=Tahoma][FONT=monospace][COLOR=#009900]<[COLOR=#000000][B]html[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]head[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#000000][B]button[/B][/COLOR] [COLOR=#000066]type[/COLOR][COLOR=#66CC66]=[/COLOR][COLOR=#FF0000]"button"[/COLOR]>[/COLOR]My Button[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]button[/B][/COLOR]>[/COLOR]

[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]body[/B][/COLOR]>[/COLOR]
[COLOR=#009900]<[COLOR=#66CC66]/[/COLOR][COLOR=#000000][B]html[/B][/COLOR]>[/COLOR][/FONT]
[/FONT][/COLOR]
[h=4]نتیجه :[/h]
Untitled.jpg
 

Similar threads

بالا