سفارش تبلیغ
صبا ویژن

پس زمینه در html

آموزش طراحی سایت - پس زمینه در html

background در html

به طور پیش فرض رنگ زمینه ی صفحه ی وب شما سفید می باشد. ممکن است این زمینه را دوست نداشته باشید، اما نگرانی وجود ندارد. HTML دو روش مناسب زیر را ارائه می دهد تا زمینه ی صفحه وب خود را به دلخواه بیارایید.

 

  • زمینه ی HTML با رنگ ها.
  • زمینه ی HTML با تصاویر.

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

 

زمینه ی HTML با رنگها

ویژگی bgcolor برای کنترل زمینه ی یک عنصر HTML، به ویژه بدنه ی صفحه و زمینه ی جدول، استفاده می شود. در زیر ترکیب استفاده از bgcolor را با هر برچسب HTML می بینید.

< tagnamebgcolor="color_value"...>
این color- value می تواند به هرکدام از فرمت های زیر ارائه شود.
<!-- Format 1 - Use color name -->
< table bgcolor="lime">
<!-- Format 2 - Use hex value -->
< table bgcolor="#f1f1f1">
<!-- Format 3 - Use color value in RGB terms -->
< table bgcolor="rgb(0,0,120)">
مثال:

در اینجا مثالی را می بینید از تنظیم زمینه ی یک برچسب HTML.


نمونه یک

<!DOCTYPE html>

<html>

<head>

    <title>HTML Background Colors</title>

</head>

<body>

    <!-- Format 1 - Use color name -->

    <table bgcolor="yellow" width="100%">

        <tr>

            <td>

                This background is yellow

            </td>

        </tr>

    </table>

    <!-- Format 2 - Use hex value -->

    <table bgcolor="#6666FF" width="100%">

        <tr>

            <td>

                This background is sky blue

            </td>

        </tr>

    </table>

    <!-- Format 3 - Use color value in RGB terms -->

    <table bgcolor="rgb(255,0,255)" width="100%">

        <tr>

            <td>

                This background is green

            </td>

        </tr>

    </table>

</body>

</html>

زمینه ی HTML با تصاویر

آموزش html css

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


 توجه:

ویژگی background به عنوان ویژگی خوبی تلقی نمی شود و توصیه می شود از style sheet برای تنظیم زمینه استفاده کنید.

 

< tagnamebackground="Image URL"...>

متداول ترین فرمت های مورد استفاده ی تصویر عبارتند از JPEG، PNG و GIF.


 مثال:

در اینجا مثال هایی را از تنظیم تصویر به عنوان زمینه ی جدول مشاهده می کنید.

 

نمونه دو

<!DOCTYPE html>

<html>

<head>

    <title>HTML Background Images</title>

</head>

<body>

    <!-- Set table background -->

    <table background="http://tahlildadeh.com/Temp/Html/html.jpg" width="100%" height="400">

        <tr>

            <td>

                This background is filled up with HTML image.

            </td>

        </tr>

    </table>

</body>

</html>

زمینه های طرح دار و شفاف

شما ممکن است الگوها و زمینه های شفاف بسیاری را در وب سایت های نختلف دیده باشید. این امر به راحتی و با استفاده از تصاویر طرح دار و شفاف در زمینه قابل دستیابی می باشد. توصیه می شود در هنگام ایجاد تصاویر طرح دار یا شفاف GIF یا PNG، از کوچکترین ابعاد ممکن آنها استفاده کنید، حتی به کوچکی 1x1 برای جلوگیری از بارگذاری آهسته.


 مثال:

در اینجا مثالی از تنظیم یک الگوی زمینه برای یک جدول را مشاهده می کنید.


نمونه سه

<!DOCTYPE html>

<html>

<head>

    <title>HTML Background Images</title>

</head>

<body>

 

    <!-- Set a table background using pattrern -->

    <table background="/images/pattern1.jpg" width="20%" height="100">

        <tr>

            <td>

                This background is filled up with a pattern image.

            </td>

        </tr>

    </table>

    <!-- Another example on table background using pattrern -->

    <table background="http://tahlildadeh.com/Temp/Html/pattern2.jpeg" width="20%" height="100">

        <tr>

            <td>

                This background is filled up with a pattern image.

            </td>

        </tr>

    </table>

</body>

</html>



پس زمینه در html

آموزش طراحی سایت -پس زمینه در html

background در html

به طور پیش فرض رنگ زمینه ی صفحه ی وب شما سفید می باشد. ممکن است این زمینه را دوست نداشته باشید، اما نگرانی وجود ندارد. HTML دو روش مناسب زیر را ارائه می دهد تا زمینه ی صفحه وب خود را به دلخواه بیارایید.

 

  • زمینه ی HTML با رنگ ها.
  • زمینه ی HTML با تصاویر.

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

 

زمینه ی HTML با رنگها

ویژگی bgcolor برای کنترل زمینه ی یک عنصر HTML، به ویژه بدنه ی صفحه و زمینه ی جدول، استفاده می شود. در زیر ترکیب استفاده از bgcolor را با هر برچسب HTML می بینید.

< tagnamebgcolor="color_value"...>

این color- value می تواند به هرکدام از فرمت های زیر ارائه شود.
<!-- Format 1 - Use color name -->
< table bgcolor="lime">
<!-- Format 2 - Use hex value -->
< table bgcolor="#f1f1f1">
<!-- Format 3 - Use color value in RGB terms -->
< table bgcolor="rgb(0,0,120)">
 مثال:

در اینجا مثالی را می بینید از تنظیم زمینه ی یک برچسب HTML.


نمونه یک

<!DOCTYPE html>

<html>

<head>

    <title>HTML Background Colors</title>

</head>

<body>

    <!-- Format 1 - Use color name -->

    <table bgcolor="yellow" width="100%">

        <tr>

            <td>

                This background is yellow

            </td>

        </tr>

    </table>

    <!-- Format 2 - Use hex value -->

    <table bgcolor="#6666FF" width="100%">

        <tr>

            <td>

                This background is sky blue

            </td>

        </tr>

    </table>

    <!-- Format 3 - Use color value in RGB terms -->

    <table bgcolor="rgb(255,0,255)" width="100%">

        <tr>

            <td>

                This background is green

            </td>

        </tr>

    </table>

</body>

</html>

زمینه ی HTML با تصاویر

آموزش html css

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


 توجه:

ویژگی background به عنوان ویژگی خوبی تلقی نمی شود و توصیه می شود از style sheet برای تنظیم زمینه استفاده کنید.

 

< tagname background="Image URL" ...>

متداول ترین فرمت های مورد استفاده ی تصویر عبارتند از JPEG، PNG و GIF.


 مثال:

در اینجا مثال هایی را از تنظیم تصویر به عنوان زمینه ی جدول مشاهده می کنید.

 

نمونه دو

<!DOCTYPE html>

<html>

<head>

    <title>HTML Background Images</title>

</head>

<body>

    <!-- Set table background -->

    <table background="http://tahlildadeh.com/Temp/Html/html.jpg" width="100%" height="400">

        <tr>

            <td>

                This background is filled up with HTML image.

            </td>

        </tr>

    </table>

</body>

</html>

زمینه های طرح دار و شفاف

شما ممکن است الگوها و زمینه های شفاف بسیاری را در وب سایت های نختلف دیده باشید. این امر به راحتی و با استفاده از تصاویر طرح دار و شفاف در زمینه قابل دستیابی می باشد. توصیه می شود در هنگام ایجاد تصاویر طرح دار یا شفاف GIF یا PNG، از کوچکترین ابعاد ممکن آنها استفاده کنید، حتی به کوچکی 1x1 برای جلوگیری از بارگذاری آهسته.


 مثال:

در اینجا مثالی از تنظیم یک الگوی زمینه برای یک جدول را مشاهده می کنید.


نمونه سه

<!DOCTYPE html>

<html>

<head>

    <title>HTML Background Images</title>

</head>

<body>

 

    <!-- Set a table background using pattrern -->

    <table background="/images/pattern1.jpg" width="20%" height="100">

        <tr>

            <td>

                This background is filled up with a pattern image.

            </td>

        </tr>

    </table>

    <!-- Another example on table background using pattrern -->

    <table background="http://tahlildadeh.com/Temp/Html/pattern2.jpeg" width="20%" height="100">

        <tr>

            <td>

                This background is filled up with a pattern image.

            </td>

        </tr>

    </table>

</body>

</html>

جهت مشاهده کدها برروی آموزش طراحی سایت کلیک نمایید 

آموزش Iframes در html

آموزش Iframes در html

آموزش طراحی سایت - آموزش Iframes

شما می توانید یک frame درون خطی را با استفاده از برچسب < iframe>مربوط به HTML تعریف کنید. این برچسب به برچسب < frameset>ارتباطی ندارد، در عوض می تواند در هرجایی در داکیومنت شما ظاهر شود. برچسب< iframe>یک محدوده ی مستطیلی را در داخل داکیومنت تعریف می کند که در آن مرورگر می تواند یک داکیومنت مجزا را ارائه دهد، مانند نوارهای اسکرول و حاشیه ها.
ویژگی src برای مشخص کردن URL مربوط به داکیومنتی استفاده می شود که حاوی frame درون خطی می باشد.


 مثال:

در زیر مثالی را می بینید که چگونگی استفاده از < iframe> را توضیح می دهد

<!DOCTYPE html>

<html>

<head>

    <title>HTML Iframes</title>

</head>

<body>

    <p>Document content goes here...</p>

    <iframe src="/html/menu.htm" width="555" height="200">

        Sorry your browser does not support inline frames.

    </iframe>

    <p>Document content also go here...</p>

</body>

</html>

ویژگی های برچسب < iframe>

بسیاری از ویژگی های برچسب < iframe> شامل نام، گروه، حاشیه، id، longdesk، طول حاشیه، عرض حاشیه، نام، اسکرول کردن، روش و تیتر، درست مانند ویژگی های متناظر با برچسب < frame> رفتار می کنند.

Attribute
 Description
src این ویژگی برای نام گذاری فایلی استفاده می شود که باید در frame بارگذاری شود. مقدار آن می تواند هر URL باشد. برای مثال src="/html/top_frame.htm" فایل HTML موجود در مسیر html را بارگذاری خواهد کرد.
name این ویژگی به شما اجازه می دهد تا یک frame را نامگذاری کنید. این ویژگی نشان می دهد که یک داکیومنت در کدام frame باید بارگذاری شود. هنگامی که می خواهید لینک هایی را در یک frame ایجاد کنید که صفحاتی را در یک frame دیگر بارگذاری می کند، که در این مورد دومین frame برای تشخیص خود به عنوان هدف لینک به نام نیاز دارد، در اینجا این ویژگی بسیار مهم است.
frameborder
این ویژگی مشخص می کند که آیا حاشیه های frame نشان داده شوند یا خیر. این ویژگی مقدار داده شده به ویژگی frameborder روی برچسب < frameset> را می گیرد، البته اگر مقداری مشخص شده باشد، این مقدار می تواند 1 (بله) و یا 0 (خیر) باشد.
marginwidth
این ویژگی به شما اجازه می دهد تا عرض فضای بین حاشیه های چپ و راست frame و محتوای آن را مشخص کنید. مقدار به پیکسل داده می شود. برای مثال marginwidth="10".
marginheight
این ویزگی به شما اجازه می دهد تا طول فضای بین بالا و پایین حاشیه ی frame و محتوای آن را مشخص کنید. مقدار به پیکسل داده می شود. برای مثال marginheight="10"
noresize
به طور پیش فرض هر frame را با کلیک کردن و درگ کردن روی حاشیه های آن می توانید تغییر اندازه دهید. ویژگی noresize مانع تغییر اندازه ی frame توسط یوزر می شود. برای مثال noresize="noresize".
scrolling
این ویژگی ظاهر نارهای اسکرول نمایان شده در frame را کنترل می کند. این ویزگی مقادیر "yes", "no" یا "auto"را می گیرد. برای مثال scrolling="no" به معنای نبودن نوارهای اسکرول می باشد.
longdesc
این ویژگی به شما اجازه می دهد تا یک لینک به صفحه ای حاوی یک توصیف طولانی از محتوای frame، ارائه بدهید. برای مثال longdesc="framedescription.htm"
جهت مشاهده کد ها برروی آموزش طراحی سایت کلیک کنید

آموزش قابها در html

آموزش طراحی سایت - آموزش قابها در html

قاب های HTML

قاب های HTML برای تقسیم پنجره ی مرورگر شما به چند بخش استفاده می شوند که هر بخش می تواند یک داکیومنت مجزای HTML رابارگذاری کند. مجموعه ای از چارچوب ها در پنجره ی مروگر به عناون frameset شناخته می شوند. به روش مشابهی که جدول ها سازماندهی می شوند، پنجره نیز به چارچوب های مختلف تقسیم می شود: در ستون ها و ردیف ها.

 

نقطه ضعف های چارچوب ها:

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

 

ایجاد چارچوب ها:

برای استفاده از چارچوب ها در یک صفحه از برچسب < frameset> به جای < body>استفاده می کنیم. برچسب< frameset> چگونگی تقسیم پنجره به چارچوب را تعریف می کند. ویژگی rows از برچسب < frameset> چارچوب های افقی و ویژگی cols نیز چارچوب های عمودی را تعریف می کنند. هر چارچوب توسط برچسب < frame> نشان داده شده است و تعریف می کند که کدام داکیومنت HTML باید در داخل چارچوب باز شود.

 مثال:

در زیر مثالی را برای ایجاد سه چارچوب افقی می بینید.

 

نمونه یک

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>HTML Frames</title>

</head>

<frameset rows="25%,50%,25%">

    <frame name="left" src="http://tahlildadeh.com/Temp/Html/top_frame.htm" />

    <frame name="center" src="http://tahlildadeh.com/Temp/Html/main_frame.htm" />

    <frame name="right" src="http://tahlildadeh.com/Temp/Html/bottom_frame.htm" />

    <noframes>

        <body>

            Your browser does not support frames.

        </body>

    </noframes>

</frameset>

</html>

ویژگی های برچسب < frameset>:


ویژگی های برچسب < frame>

Attribute                                                                                                                                                                                                                                                                                                 Description
این ویژگی برای ارائه ی نام فایلی که باید در چارچوب بارگذاری شود، مورد استفاده قرار می گیرد. مقدار آن هر URL می تواند باشد. برای مثال src="/html/top_frame.htm" یک فایل HTML موجود در مسیر html بارگذاری خواهد کرد.                         src

این ویزگی به شما اجازه می دهد تا یک چارچوب را نام گذاری کنید. این ویژگی نشان می دهد که داکیومنت در کدام چارچوب باید بارگذاری شود؛ به ویژه در هنگام ایجاد لینک                                                                                               name
در یک چارچوب که صفحاتی را روی یک چارچوب دیگر بارگذاری می کند، که در آن مورد frame دوم برای مشخص کردن خود به عنوان هدف لینک، بسیار مهم است.
این ویژگی مشخص می کند که آیا حاشیه های مربوط به frame نشان داده می شوند یا نه. این امر مقدار داده شده به ویژگی frameborder را روی برچسب می گیرد،                                                                                       frameborder
اگر مقداری ارائه شده باشد و این ویژگی می تواند مقادیر 1 (بله) و 0 (خیر) بگیرد.
marginwidth
این ویژگی به شما اجازهمی دهد تا عرض فضای بین چپ و راست حاشیه های frame و محتوای آن را مشخص کنید. این مقدار به پیکسل داده می شود. برای مثال marginwidth="10"
marginheight
این ویژگی به شما اجازهمی دهد تا طول فضای بین بالا و پایین حاشیه های frame و محتوای ان را مشخص کنید. مقدار به پیکسل داده می شود. برای مثال marginheight="10".
noresize
به طور پیش فرض شما می توانید با کلیک کردن و درگ کردن روی حاشیه های frame هر گونه frame را تغییر اندازه بدهید. ویژگی noresize قابلیت تغییر اندازه ی یک frame را ازبین می برد. برا مثال noresize="noresize"
scrolling
این ویژگی ظاهر اسکرول بارهایی را که روی frame نمایان می شوند، کنترل می کند. این ویژگی مقدار "yes", "no" یا "auto"به خود می گیرد. برای مثال scrolling="no" به این معناست که frame نباید اسکرول بار داشته باشد.
longdesc
این ویژگی به شما اجازه می دهد تا به صفحه ای دارای توضیح طولانی در مورد محتوای frame یک لینک ارائه دهید. برای مثال longdesc="framedescription.htm"

مرورگرهایی که frame ها را پشتیبانی می کنند

اگر کاربر از مرورگرهای قدیمی یا مرورگرهایی استفاده کند که frame را پشتیبانی نمی کنند، عنصر < noframes>باید به یوزر نمایش داده شود. بنابراین شما باید یک عنصر < body>را داخل عنصر < noframes>قرار دهید، زیرا تصور می شود که عنصر< frameset>جایگزین عنصر< body>می شود. اما اگر یک مرورگر < frameset>را درک نکند، بنابراین باید آنچه را که داخل عنصر< body>می باشد درک کند که حاوی عنصر < noframes>می باشد.
شما می توانید به یوزرهای خود که از مرورگرهای قدیمی استفاده می کنند، پیام هایی بدهید. برای مثال پیام Sorry!! your browser does not support frames. ، همانطور که در مثال بالا نشان داده شده است.

 

نام frame و ویژگی های target

یکی از محبوب ترین موارد استفاده از frame قرار دادن نوارهای مسیریابی در یک frame و سپس بارگذاری صفحات اصلی در یک frame مجزا می باشد.


 مثال:

اجازه بدهید مثال زیر را بررسی کنیم که داری کد زیر می باشد:

آموزش html css

نمونه دو

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>HTML Frames</title>

</head>

<frameset cols="25%,50%,25%">

    <frame name="left" src="http://tahlildadeh.com/Temp/Html/top_frame.htm" />

    <frame name="center" src="http://tahlildadeh.com/Temp/Html/main_frame.htm" />

    <frame name="right" src="http://tahlildadeh.com/Temp/Html/bottom_frame.htm" />

    <noframes>

        <body>

            Your browser does not support frames.

        </body>

    </noframes>

</frameset>

</html>

در اینجا دو ستون ایجاد کرده ایم که قرار است با دو ستون پر شوند. اولین frame دارای عرض 200 پیکسل می باشد و حاوی نوار منوی مسیر یابی می باشد که توسط فایل menu.htm اجرا می شود. دومین ستون فضای باقیمانده را پر کرده و حاوی بخش اصلی صفحه خواهد بود و توسط فایل main.htm اجرا می شود. برای هرسه لینک موجود در نوار منو یک frame هدف به عنوان main_page ذکر کرده ایم، بنابراین هر زمان روی لینک های موجود در نوار منو کلیک کنید، لینک موجود در main_page باز خواهد شد.
در زیر محتوای فایل menu.htm را مشاهده می کنید.

نمونه سه

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<body bgcolor="#4a7d49">

   <a href="http://www.google.com" target="main_page">Google</a>

  <br /><br />

    <a href="http://www.microsoft.com" target="main_page">Microsoft</a>

   <br /><br />

</body>

</html>


در زیر محتوای فایل main.htm را مشاهده می کنید.

 

نمونه چهار

 

<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">

<body bgcolor="#b5dcb3">

    <h3>This is main page and content from any link will be displayed here.</h3>

    <p>So now click any link and see the result.</p>

</body>

</html>

اکنون می توانید لینک های موجود در پنل چپ را کلیک کرده و نتیجه را مشاهده کنید. ویژگی target نیز یکی از مقادیر زیر را می گیرد:

 

Option                                                                                                               Description
_self                                                           صفحه را روی frame جاری بارگذاری می کند.
_blank                                                        صفحه را روی یک پنجره ی مرورگر جدید بارگذاری کرده ، در حالیکه یک پنجره ی جدید باز می کند.
_parent                                                      صفحه را روی پنجره ی اصلی بارگذاری می کند که در مورد یک frameset مجزا مرورگر اصلی پنجره می باشد.
_top                                                           صفحه را روی پنجره ی مرورگر بارگذاری می کند، در حالیکه هر frame موجود را جایگزین می کند.
targetframe                                                صفحه را در یک target frame نام گذاری شده بارگذاری می کند