آموزش طراحي سايت- آموزش تگ هاي اصلي در Html

در اين سري از مقالات آموزش html مي خواهيم به بيان تگ در html بپردازيم.

برچسب هاي تيتر:

هر داكيومنت با يك تيتر آغاز مي شود. شما مي توانيد از اندازه هاي مختلف براي تيترهاي خود استفاده كنيد. HTML داراي شش سطح مي باشد كه از< h1>, < h2>, < h3>, < h4>, < h5> و < h6> عناصر استفاده مي كند. در هنگام نمايش هر تيتر مرور گر يك خط قبل و يك خط بعد از تيتر اضافه مي كند.

مثال:

نمونه يك

Heading Example

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

برچسب پاراگراف:

برچسب < p> به روش طراحي متن شما در پاراگراف هاي مختلف اشاره دارد. هر پاراگراف متن بايد بين برچسب بازكننده ي < p> وبستن < /p> قرار بگيرد، همانطور كه در مثال زير مشاهده مي كنيد:

نمونه دو

Paragraph Example

Here is a first paragraph of text.

Here is a second paragraph of text.

Here is a third paragraph of text.

برچسب شكست لينك
هرزمان كه شما از < br /> عنصر استفاده كنيد، هر چيزي كه آن را دنبال مي كند از خط بعد شروع خواهد شد. اين برچسب نمونه اي از يك عنصرempty مي باشد، زماني كه لازم نيست برچسبي را باز كنيد يا ببنديد چرا كه چيزي براي رفتن بين آنها وجود ندارد.
در بچسب < br />، يك فضاي خالي بين كااكترهاي br و اسلش جلوي آن وجود دارد. اگر شما اين فضا را حذف كنيد، مرورگرهاي قديمي تر در اجراي خط شكست مشكل خواهند داشت، در حاليكه اگر اسلش را حذف كنيد برچسب < br> باقيمانده در HTML معتبر نمي باشد.
مثال:
نمونه سه

Line Break Example

Hello
You delivered your assignment ontime.
Thanks

Mahnaz

مركزگذاري متن

مي توانيد با استفاده از برچسب < center> مي توانيد هر محتوايي را در مركز صفحه يا در مركز هر سلول از يك جدول قرار دهيد.

مثال:

نمونه چهار

Centring Content Example4

This text is not in the center.

This text is in the center.

خطوط افقي

خطوط افقي براي بخش هاي شكست بصري يك داكيومنت استفاده مي شوند. برچسب < hr> خطي از موقعيت كنوني داكيومنت به حاشيه ي سمت راست ايجاد كرده و خط را طبق آن مي شكند.
به عنوان مثال ممكن است تمايل داشته باشيد بين دو پاراگراف خطي قرار دهيد، همانطور كه در مثال زير ارائه شده است:

مثال:

نمونه پنج

Horizontal Line Example5

This is paragraph one and should be on top

This is paragraph two and should be at bottom

و باز برچسب< hr /> مثالي از Empty مي باشد كه نيازي به باز كردن يا بستن برچسب نداريد زيرا چيزي براي رفتن بين آنها وجود ندارد.
در عنصر < hr /> يك فضاي خالي بين كاراكترهاي hr و اسلش مقابل آن وجود دارد. اگر اين فضا را حذف كنيد مرورگرهاي قديمي تر در اجراي خط افقي مشكل خواهند داشت. در حاليكه اگر اسلش مقابل آن را حذف كنيد عنصر باقيمانده < hr> مي باشد كه در HTML فاقد اعتبار مي باشد.

حفظ طراحي

گاهي اوقات تمايل داريد كه متن فرمت دقيق خود در HTML را دنبال كند، در اين موارد مي توانيد از برچسب پريفرمت < pre> استفاده كنيد.
هر متن بين برچسب باز كننده ي < pre> و برچسب بستن < /pre> طراحي متن منبع را حفظ خواهد كرد.

مثال:

نمونه شش

Preserve Formatting Example6

    function testFunction( strText ){    alert (strText) }

سعي كنيد از همان كد بدون نگهداري آن بين برچسب هاي < pre>...< /pre> استفاده كنيد.

فضاهاي غيرشكست:

فرض كنيد مي خواهيد از عبارت "12 Angry Men." استفاده كنيد. در اينجا از مرورگر نمي خواهيد عبارت را بين دو خط به صورت 12 Angry و Men بشكند.

An example of this technique appears in the movie "12 Angry Men."

در مواردي كه نمي خواهيد مرورگر متن را بشكند بايد به جاي يك فضاي عادي از فضاي غير شكست استفاده كنيد. براي مثال وقتي "12 Angry Men" را در يك پاراگراف كدگذاري مي كنيد بايد از كدي مانند زير استفاده كنيد:

مثال:

نمونه هفت

Nonbreaking Spaces Example7

An example of this technique appears in the movie "12 Angry Men."

موضوع :
برچسب ها : آموزش آنلاین و حضوری طراحی سایت. آموزش طراحی سایت , دوره طراحی سایت HTML,CSS, آموزشگاه تحلیل داده ,

امتیاز : 4 | نظر شما : 1 2 3 4 5 6
+ نوشته شده در يکشنبه 19 ارديبهشت 1400ساعت 19:25 توسط اسفندیاری | تعداد بازديد : 309 | |

آموزش طراحی سایت -آموزش Attributeها در HTML

آموزش طراحی سایت -آموزش Attributeها در HTML-آموزش HTML

ویژگی های زبان HTML

در این مبحث از آموزش های HTML می خواهیم به بررسی برخی از ویژگی های زبان HTML بپردازیم:

برخی از برچسب های HTML مانند برچسب های تیتر و برچسب های پاراگراف، و موارد استفاده ی آنها را مشاهده کردیم. تاکنون از آنها به ساده ترین شکل خود استفاده کرده ایم، اما بیشتر برچسب های HTML می توانند ویژگی هایی داشته باشند که مقداری اطلاعات اضافه می باشد.

یک attribute برای تعریف ویژگی های عنصر HTML استفاده می شود و در داخل برچسب بازکننده ی عنصر قرار می گیرد. همه ی ویژگی ها از دو بخش تشکیل شده اند: name و value.

Name ویژگی مورد نظر شما برای تنظیم میباشد، به عنوان مثال عنصر پاراگرافp> > در مثال ارائه شده دارای ویژگی می باشد که نام آن align می باشد و شما می توانید از آن برای تنظیم پاراگراف در صفحه استفاده کنید.
Value همان است که شما می خواهید مقدار ویژگی تنظیم شود و همیشه در داخل گیومه قرار می دهید. مثال زیر سه مقدار ممکن ازیک ویژگی تراز را نشان می دهد: چپ، مرکز و راست.

ویژگی نام ها و ویژگی مقادیر غیرهوشمند می باشند. به هرحال وب جهانی Consortium (W3C) مقادیر ویژگی ها را در HTML 4 با حروف کوچک پیشنهاد می دهد.

مثال:

نمونه یک

ویژگی های اصلی

چهار ویژگی اصلی که می توانند در اکثر عناصر HTML مورد استفاده قرار بگیرند عبارتند از:

id
title
class
style

ویژگی id

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

اگر یک عنصر یک ویژگی را به عنوان تشخیص دهنده ی منحصر به فرد استفاده می کند شناخت تنها آن عنصر و محتوای مربوط به آن ممکن می باشد.
اگر دارای دو عنصر هم نام در یک صفحه ی وب می باشید، می توانید از عنصر id برای تشخیص این عناصر هم نام استفاده کنید.

در مورد طراحی صفحه در آموزش های مجزا بحث خواهیم کرد، اکنون اجازه بدهید از ویژگی id برای تشخیص عناصر بین دو پاراگراف استفاده کنیم، مانند مثال زیر:

<p id="html">This para explains what is HTMLp>

<p id="css">This para explains what is Cascading Style Sheetp>

. به وبسایت آموزش طراحی سایت مراجعه فرمایید HTML یرای دیدن وِِیژگی های عناصر

  چنانچه سوالی در این زمینه دارید در کامنت مطرح نمایید و یا با شماره تلفن 09373889811در ارتباط باشید

موضوع :
برچسب ها : آموزش HTML, آموزش Attributeها در HTML,طراحی سایت , آموزش برنامه نویسی, دوره طراحی سایت,

امتیاز : 3 | نظر شما : 1 2 3 4 5 6
+ نوشته شده در سه شنبه 21 ارديبهشت 1400ساعت 17:53 توسط اسفندیاری | تعداد بازديد : 219 | |

آموزش طراحی سایت - آموزش قالب بندی در HTML

در ادامه مباحث آموزشی HTML قبل، می خواهیم ببینیم چه آیتم هایی در format دادن و قالب بندی صفحات HTML مورد نیاز ما هستند.
اگر با پردازشگر word کار می کنید باید با بولد کردن (bold)، ایتالیک کردن و آندرلاین کردن متن آشنا باشید. این ها فقط سه گزینه از ده گزینه موجود برای چگونگی ظاهر شدن متن در HTML و XHTML می باشند.

بولد کردن متن

هرچیزی که بین عناصر< b>...< /b> قرار می گیرد به صورت بولد ظاهر می شود، مانند مثال زیر:

مثال:

نمونه یک

<!DOCTYPE html>

<html>

<head>

<title>Bold Text Example</title>

</head>

<body>

<p>The following word uses a <b>bold</b> typeface.</p>

</body>

</html>

ایتالیک کردن متن

هر چیزی که بین عناصر< i>...< /i>قرار بگیرد به صورت ایتالیک ظاهر می شود، مانند مثال زیر:

مثال:

نمونه دو

<!DOCTYPE html>

<html>

<head>

<title>Italic Text Example </title>

</head>

<body>

<p>The following word uses a <i>italicized</i> typeface.</p>

</body>

</html>

آندرلاین کردن متن

هر چیزی که بین عناصر < u>...< /u> قرار بگیرد به صورت آندرلاین ظاهر می شود، مانند مثال زیر:

نمونه سه

<!DOCTYPE html>

<html>

<head>

<title>Underlined Text Example</title>

</head>

<body>

<p>The following word uses a <u>underlined</u> typeface.</p>

</body>

</html>

خط کشیدن روی متن

هر چیزی که بین گزینه های < strike>...< /strike> قرار بگیرد، با یک strikethrough نمایش داده می شود که خط باریکی می باشد که روی متن کشیده می شود، همانطور که در مثال زیر مشاهده می کنید:

نمونه چهار

<!DOCTYPE html>

<html>

<head>

<title>Strike Text Example</title>

</head>

<body>

<p>The following word uses a <strike>strikethrough</strike> typeface.</p>

</body>

</html>

فونت monospaced

محتوای عنصر < tt>...< /tt> به فونت monospaced نوشته می شود. اکثر فونت ها با عنوان فونت هایی با عرض متغیر شناخته شده اند، زیرا حروف مختلف دارای عرضهای مختلف هستند ( به عنوان مثال حرف m عریض تر از حرف I می باشد.) به هرحال در فونت monospaced تمام حروف دارای عرض یکسان می باشند.
مثال:

نمونه پنج

<!DOCTYPE html>

<html>

<head>

<title>Monospaced Font Example</title>

</head>

<body>

<p>The following word uses a <tt>monospaced</tt> typeface.</p>

</body>

</html>

متن superscript ( چاپ شده در بالا)

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

مثال:

نمونه شش

<!DOCTYPE html>

<html>

<head>

<title>Superscript Text Example</title>

</head>

<body>

<p>The following word uses a <sup>superscript</sup> typeface.</p>

</body>

</html>

متن subscript (چاپ شده در زیر)

محتوای عنصر< sub>...< /sub> در زیر نوشته می شود. اندازه ی فونت استفاده شده برای آن به اندازه ی فونت کاراکترهای اطراف می باشد اما به اندازه ی نصف ارتفاع یک کاراکتر زیر کاراکترهای دیگر نمایش داده می شود. مثال:

نمونه هفت

<!DOCTYPE html>

<html>

<head>

<title>Subscript Text Example</title>

</head>

<body>

<p>The following word uses a <sub>subscript</sub> typeface.</p>

</body>

</html>

متن مندرج

هرچیزی که بین عنصر ... قرار بگیرد به عنوان متن مندرج نمایش داده می شود.

مثال:

نمونه هشت

متن حذف شده

هر چیزی که بین عنصر < del>...< /del> ظاهر شود با عنوان یک متن حذف شده نمایش داده می شود.
مثال:

نمونه نه

<!DOCTYPE html>

<html>

<head>

<title>Deleted Text Example</title>

</head>

<body>

<p>I want to drink <del>cola</del> <ins>wine</ins></p>

</body>

</html>

متن بزرگتر

محتوای عنصر < big>...< /big> اندازه فونت را بزرگتر از متن اطراف نشان می دهد. مانند مثال زیر:
مثال:

نمونه ده

<!DOCTYPE html>

<html>

<head>

<title>Larger Text Example</title>

</head>

<body>

<p>The following word uses a <big>big</big> typeface.</p>

</body>

</html>

متن کوچکتر

محتوای عنصر < small>...< /small> متن را یک سایز کوچکتر از متن اطراف آن نشان می دهد، مانند مثال زیر:
مثال:

نمونه یازده

<!DOCTYPE html>

<html>

<head>

<title>Smaller Text Example</title>

</head>

<body>

<p>The following word uses a <small>small</small> typeface.</p>

</body>

</html>

گروه بندی محتوا

عناصر< div>و < span> به شما اجازه می دهند تا برای ایجاد بخش ها و یا زیرمجموعه های یک صفحه، عناصر زیادی را با یکدیگر گروه بندی کنید.
برای مثال ممکن است تمایل داشته باشید که تمام پاورقی ها را در یک صفحه در داخل عنصر < div> قرار دهید تا نشان دهید که تمام عناصر موجود در آن عنصر مربوط به پاورقی می باشند. پس از آن ممکن است طرحی را به عنصر< div> ضمیمه کنید، طوریکه با استفاده از مجموعه ای از قوانین طراحی ظاهر شوند.
مثال:

نمونه دوازده

<!DOCTYPE html>

<html>

<head>

<title>Div Tag Example</title>

</head>

<body>

<a href="/index.htm">HOME</a> |

<a href="/about/contact_us.htm">CONTACT</a> |

<a href="/about/index.htm">ABOUT</a>

</div>

<h5>Content Articles</h5>

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

</div>

</body>

</html>

از طرف دیگر عنصر < span> فقط می تواند برای گروه بندی داخل خطی عناصر استفاده شود. بنابراین اگر بخشی از جمله یا پاراگراف را دارید که می خواهید با هم در یک گروه قرار دهید، می توانید از عنصر < span> مانند زیر استفاده کنید:
مثال:

نمونه سیزده

<!DOCTYPE html>

<html>

<head>

<title>Span Tag Example</title>

</head>

<body>

<p>This is the example of <span style="color:green">span tag</span> and the <span style="color:red">div tag</span> alongwith CSS</p>

</body>

</html>

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

موضوع :
برچسب ها : آموزش طراحی سایت , دوره آموزش طراحی سایت , اموزش برنامه نویسی, آموزش طراحی وب سایت ,

امتیاز : 3 | نظر شما : 1 2 3 4 5 6
+ نوشته شده در يکشنبه 26 ارديبهشت 1400ساعت 19:41 توسط اسفندیاری | تعداد بازديد : 381 | |

آموزش طراحی سایت - آموزش قالب بندی در HTML

موضوع :
برچسب ها : آموزش طراحی سایت , دوره آموزش طراحی سایت , اموزش برنامه نویسی, آموزش طراحی وب سایت ,

امتیاز : 4 | نظر شما : 1 2 3 4 5 6
+ نوشته شده در يکشنبه 26 ارديبهشت 1400ساعت 19:47 توسط اسفندیاری | تعداد بازديد : 289 | |

توضيحات در HTML

آموزش طراحي سايت -توضيحات در HTML

آموزش استفاده از comment در html

در اين مقاله آموزش Html مي خواهيم به چگونگي استفاده از comment در html بپردازيم:
كامنت قطعه اي از كد مي باشد كه توسط مرورگرها ناديده گرفته مي شود. افزودن كامنت به كد HTML خود، تمرين خوبي است، به ويژه در داكيومنت هاي پيچيده براي نشان دادن بخش هايي از يك داكيومنت به هركسي كه كد را نگاه مي كند. كامنت ها به شما و ديگران كمك مي كنند تا كد خود را متوجه شويد و قابليت خواندن آن را افزايش مي دهد.
كامنت هاي HTML بين برچسب هاي واقع مي شوند. بنابراين هر محتوايي كه بين اين برچسب ها واقع شود، مثل كامنت با آن رفتار خواهد شد و توسط مرورگرها به طور كامل ناديده گرفته خواهد شد.

مثال:

نمونه يك

<!DOCTYPE html>

<html>

<head>

<title>This is document title</title>

</head>

<body>

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

</body>

</html>

اين مثال نتيجه ي زير را بدون نمايش محتواي ارائه شده به عنوان بخشي از كامنت ها، به دنبال دارد.
Document content goes here.....

كامنت هاي معتبردر مقابل كامنت هاي نامعتبر

كامنت ها تودرتو نمي شوند، يعني اينكه يك كامنت نمي تواند در داخل كامنت ديگري قرار بگيرد. خط تيره ي (dash) دوتايي "--" ممكن نيست در داخل يك كامنت ظاهر شود، به جز در مواردي كه بخشي از برچسب closing باشد. شما بايد مطمئن باشيد كه هيچ فضاي خالي در ابتداي رشته ي كامنت وجود ندارد.

مثال:

در اينجا كامنت ارائه شده يك كامنت معتبر مي باشد و توسط مرورگر پاك مي شود.

نمونه دو

<!DOCTYPE html>

<html>

<head>

<title>Valid Comment Example</title>

</head>

<body>

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

</body>

</html>

اما خط زير يك كامنت معتبر نيست و توسط مرورگر نمايش داده خواهد شد. اين به اين خاطر است كه فضايي بين حاشه ي چپ پرانتز و علامت تعجب وجود دارد.

مثال:

نمونه سه

<!DOCTYPE html>

<html>

<head>

<title>Invalid Comment Example</title>

</head>

<body>

< !-- This is not a valid comment -->

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

</body>

</html>

كامنت هاي چندخطي

تاكنون فقط كامنت هاي تك خطي را مشاهده كرديم، اما HTML كامنت هاي چندخطي را نيز پشتيباني مي كند.
شما مي توانيد كامنت هاي چند خطي داشته باشيد با استفاده از برچسب آغازگر --!> و پايان دهنده ي ،--> كه قبل از اولين خط و در پايان آخرين خط قرار ميگيرد.

مثال:

نمونه چهار

<!DOCTYPE html>

<html>

<head>

<title>Multiline Comments</title>

</head>

<body>

<!--

This is a multiline comment and it can

span through as many as lines you like.

-->

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

</body>

</html>

كامنت هاي شرطي

كامنت هاي شرطي تنها در اينترنت اكسپلورر روي ويندوز كار مي كنند، اما توسط مرورگرهاي ديگر هم ناديده گرفته مي شوند. اين كامنت ها در Internet Explorer 5 به بالاتر پشتيباني مي شوند و مي توانيد از آنها براي دادن دستورات شرطي به ورژن هاي مختلف IE استفاده كنيد.

مثال:

نمونه پنج

<!DOCTYPE html>

<html>

<head>

<title>Conditional Comments</title>

<!--[if IE 6]>

Special instructions for IE 6 here

<![endif]-->

</head>

<body>

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

</body>

</html>

در جايي كه نياز خواهيد داشت يك صفحه ي طراحي متفاوت بر اساس ورژن هاي مختلف اينترنت اكسپلورر به كار بگيريد، به راه حلي نياز خواهيد داشت. در اين مواقع چنين كامنت هاي شرطي مفيد خواهند بود.

استفاده از برچسب كامنت

مرورگرهاي كمي هستند كه استفاده از برچسب را براي كامنت بخشي از كد HTML استفاده مي كنند.

مثال:

نمونه شش

<!DOCTYPE html>

<html>

<head>

<title>Using Comment Tag</title>

</head>

<body>

<p>This is <comment>not</comment> Internet Explorer.</p>

</body>

</html>

اگر از IE استفاده مي كنيد، نتيجه ي زير حاصل خواهد شد:

This is Internet Explorer.

اما اگر در حال استفاده از IE نمي باشد، نتيجه ي زير حاصل مي شود.

This is Internet Explorer.

كد اسكريپت كامنت

شما جاوا اسكريپت را در يك آموزش مجزا با HTML ياد خواهيد گرفت. در اينجا بايد دقت كنيد كه اگر در حال استفاده از java script يا vb script در كد html خود هستيد، بنابراين توصيه مي شود كه آن كد اسكريپت را در داخل كامنت هاي مناسب HTML قرار دهيد طوري كه مرورگرهاي قديمي بتوانند به درستي كار كنند.

مثال:

نمونه هفت

<!DOCTYPE html>

<html>

<head>

<title>Commenting Script Code</title>

<!--

document.write("Hello World!")

//-->

</script>

</head>

<body>

<p>Hello , World!</p>

</body>

</html>

كامنت صفحات طراحي

گرچه شما HTML را در يك آموزش مجزا با صفحات طراحي فرا ميگيريد، اما در اينجا بايد دقت داشته باشيد كه اگر از CSS در كد HTML خود استفاده مي كنيد، بنابراين توصيه مي شود كه كد صفحه ي طراحي را در داخل كامنت هاي مناسب HTML قرار دهيد، طوريكه مرورگرهاي قديمي بتوانند كار كنند.

مثال:

نمونه هشت

<!DOCTYPE html>

<html>

<head>

<title>Commenting Style Sheets</title>

<style>

<!--

.example {

border: 1px solid #4a7d49;

}

// -->

</style>

</head>

<body>

<div class="example">Hello , World!</div>

</body>

</html>

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

موضوع :
برچسب ها : دوره آموزش جامع طراحی سایت , طراحی سایت, آموزش برنامه نویسی, آموزش طراحی وب ,

امتیاز : 4 | نظر شما : 1 2 3 4 5 6
+ نوشته شده در چهارشنبه 5 خرداد 1400ساعت 18:24 توسط اسفندیاری | تعداد بازديد : 184 | |

آموزش درج کردن تصویردر HTML

آموزش طراحی سایت -آموزش درج کردن تصویردر HTML

وارد کردن تصاویر در صفحات HTML

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

وارد کردن تصویر

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

</src="Image URL" ... attributes-list>

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

مثال:

برای امتحان کردن مثال، زیر اجازه بدهید فایل html خود یعنی test.htm و فایل تصویر خود یعنی test.png را در یک مسیر قرار دهیم.

نمونه یک

<!DOCTYPE html>

<html>

<head>

<title>Using Image in Webpage</title>

</head>

<body>

<p>Simple Image Insert</p>

</body>

</html>

شما می توانید از فایل تصویر JPEG، PNG یا GIF متناسب با راحتی خود استفاده کنید، اما مطمئن شوید که در ویژگی src نام فایل تصویر را به درستی وارد کردید. نام تصویر همیشه یک مورد هوشمند می باشد.
ویژگی alt یک ویژگی می باشد که اگر تصویر نمایش داده نشود، یک متن جایگزین را برای آن مشخص می کند.

تنظیم موقعیت تصویر

آموزش html css

معمولا ما تمام تصاویر خود را در یک مسیر مجزا قرار می دهیم. بنابراین اجازه بدهید فایل test.htm مربوط به HTML را در مسیر اصلی نگه داشته و یک مسیر فرعی images داخل مسیر اصلی، جایی که تصویر test.png را نگهداری می کنیم، ایجاد کنیم.
با فرض اینکه موقعیت تصویر ما "image/test.png" می باشد، مثال زیر را امتحان کنید:مثال:

نمونه دو

<!DOCTYPE html>

<html>

<head>

<title>Using Image in Webpage</title>

</head>

<body>

<p>Simple Image Insert</p>

</body>

</html>

تنظیم طول و عرض تصویر

می توانید طول و عرض تصویر را براساس نیاز خود و با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض تصویر را به پیکسل یا براساس درصد اندازه ی واقعی آن تنظیم کنید.

مثال:

نمونه سه

<!DOCTYPE html>

<html>

<head>

<title>Set Image Width and Height</title>

</head>

<body>

<p>Setting image width and height</p>

</body>

</html>

تنظیم حاشیه ی تصویر

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

مثال:

نمونه چهار

<!DOCTYPE html>

<html>

<head>

<title>Set Image Border</title>

</head>

<body>

<p>Setting image Border</p>

</body>

</html>

تنظیم همترازی تصویر

به طور پیش فرض تصویر در سمت چپ صفحه تنظیم می شود، اما می توانید از ویژگی align برای تنظیم تصویر در سمت راست یا مرکز صفحه استفاده کنید.

مثال:

نمونه پنج

<!DOCTYPE html>

<html>

<head>

<title>Set Image Alignment</title>

</head>

<body>

<p>Setting image Alignment</p>

</body>

</html>

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

موضوع :
برچسب ها : آموزش طراحی سایت , دوره آموزش طراحی سایت, آموزش برنامه نویسی, آموزشگاه برنامه نویسی,

امتیاز : 3 | نظر شما : 1 2 3 4 5 6
+ نوشته شده در جمعه 31 ارديبهشت 1400ساعت 16:04 توسط اسفندیاری | تعداد بازديد : 232 | |

آموزش ساخت جدول در html

آموزش طراحی سایت - آموزش ساخت جدول در html

آموزش Table در HTML

جدول های HTML به نویسندگان وب اجازه می دهند تا داده هایی مانند متن، تصاویر، لینک ها، جدول های دیگر و غیره در ردیف ها و ستون ها تنظیم کنید. جدول های HTML با استفاده از برچسب < table> ایجاد می شوند که در آن برچسب < tr> برای ایجاد ردیف ها و برچسب < td> برای ایجاد داده های سلول ها استفاده می شوند.

مثال:

نمونه یک

<!DOCTYPE html>

<head>

<title>HTML Tables</title>

</head>

<body>

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

</tr>

<tr>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

</tr>

</table>

</body>

</html>

ویژگی های colspan و rowspan

اگر بخواهید دو یا بیشتر از دو ستون را با هم تلفیق کنید از ویژگی colspan استفاده می کنید. به طور مشابه اگر بخواهید دو یا بیشتر از دو ردیف را در یک ردیف تلفیق کنید از rowspan استفاده کنید.

مثال:

نمونه سه

<!DOCTYPE html>

<head>

<title>HTML Table Colspan/Rowspan</title>

</head>

<body>

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

پس زمینه ی جدول

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

ویژگی Bg color: می توانید رنگ زمینه را برای همه ی جدول و یا تنها برای یک سلول تنظیم کنید.
ویژگی background: می توانید یک تصویر را برای کل جدول یا تنها یک سلول تنظیم کنید.

همچنین می توانید با استفاده از ویژگی bordercolor رنگ حاشیه را نیز تنظیم کنید.

مثال:

نمونه چهار

<!DOCTYPE html>

<head>

<title>HTML Table Background</title>

</head>

<body>

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

</table>

</body>

</html>

در اینجا مثالی در رابطه با استفاده از ویژگی background می بینید. در این مثال ما از تصویری موجود در image directory استفاده کرده ایم.

نمونه پنج

<!DOCTYPE html>

<head>

<title>HTML Table Background</title>

</head>

<body>

<tr>

<th>Column 1</th>

<th>Column 2</th>

<th>Column 3</th>

</tr>

</table>

</body>

</html>

آموزش html css

طول و عرض جدول

شما می توانید طول و عرض جدولی را با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض جدول را به پیکسل و یا متناسب با درصد صفحه ی جاری تنظیم کنید.

مثال:

نمونه شش

<!DOCTYPE html>

<head>

<title>HTML Table Width/Height</title>

</head>

<body>

<tr>

<td>Row 1, Column 1</td>

<td>Row 1, Column 2</td>

</tr>

<tr>

<td>Row 2, Column 1</td>

<td>Row 2, Column 2</td>

</tr>

</table>

</body>

</html>

شرح جدول

برچسب caption یک توضیح یا یک تیتر برای جدول می باشد که در بالای جدول نمایش داده می شود. این برچسب در ورژن های جدید HTML/XHTML توصیه می شود.

مثال:

نمونه هفت

تیتر، بدنه و پاورقی جدول

جدول ها می توانند به سه بخش تقسیم شوند: تیتر، بدنه و پاورقی جدول. عنوان و فوت(tfoot) در واقع شبیه به تیتر و پاورقی در یک فایل پردازش word می باشند که برای هرصفحه یکی می باشد، در حالیکه بدنه همان نگه دارنده ی محتوای اصلی جدول می باشد.
سه عنصر برای مجزا کردن عنوان، بدنه و فوت در یک جدول عبارتند از

< thead> - برای ایجاد یک تیتر مجزا
< tbody>- برای نشان دادن بدنه ی اصلی جدول
< tfoot> - برای ایجاد یک پاورقی مجزا در یک جدول

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

مثال:

نمونه هشت

<!DOCTYPE html>

<head>

<title>HTML Table</title>

</head>

<body>

<thead>

<tr>

<td colspan="4">This is the head of the table</td>

</tr>

</thead>

<tfoot>

<tr>

<td colspan="4">This is the foot of the table</td>

</tr>

</tfoot>

<tbody>

<tr>

</tr>

</tbody>

</table>

</body>

جدول های تودرتو

آموزش طراحی سایت با html

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

مثال:

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

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

موضوع :
برچسب ها : آموزش طراحی سایت , دوره آموزش طراحی سایت , آموزش برنامه نویسی,

امتیاز : 3 | نظر شما : 1 2 3 4 5 6
+ نوشته شده در سه شنبه 4 خرداد 1400ساعت 15:20 توسط اسفندیاری | تعداد بازديد : 244 | |

آموزش لینک های متنی

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

لینک های متن HTML

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

لینک کردن داکیومنت ها

یک لینک با استفاده از برچسب < a> در HTML تعیین می شود. این برچسب anchor tag نامیده می شود و هر چیزی بین برچسب آغازین < a> و پایانی < /a> بخشی از لینک می شود و یک یوزر می تواند آن بخش را کلیک کرده تا به داکیومنت لینک شده برسد. در زیر ترکیب ساده ی استفاده از برچسب < a> را می بینید.

<a href="Document URL" ...="" attributes-list="">Link Text</aمثال:

اجازه دهید مثال زیر را امتحان کنیم که http://www.tahlildadeh.com را در صفحه ی شما لینک می کند.

نمونه یک

<!DOCTYPE html>

<html>

<head>

<title>Hyperlink Example</title>

</head>

<body>

<p>Click following link</p>

<a href="http://www.tahlildadeh.com" target="_self">Tahlildadeh</a>

</body>

</html>

این مثال نتیجه ی زیر را تولید خواهد کرد که شما می توانید روی لینک تولید شده ی tahlildadeh کلیک کنید تا به صفحه ی اصلی tahlildadeh برسید.
Click following link

tahlildadeh

ویژگی target

ما از ویژگی target در مثال قبلی خود استفاده کردیم . این ویژگی برای مشخص کردن موقعیتی که داکیومنت لینک شده باز می شود، مورد استفاده قرار می گیرد. در زیر گزینه های ممکن را مشاهده می کنید.

Option

Description

_blank

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

_self

داکیومنت لینک شده را در همان چارچوب باز می کند.

_parent

داکیومنت لینک شده را در چارچوب اصلی باز می کند.

_top

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

targetframe

داکیومنت لینک شده را در یک targetframe نام گذاری شده باز می کند.

مثال:

برای درک تفاوت اصلی در برخی گزینه های ارائه شده در ویژگی target مثال زیر را امتحان کنید.

نمونه دو

<!DOCTYPE html>

<html>

<head>

<title>Hyperlink Example</title>

</head>

<body>

<p>Click any of the following links</p>

<a href="http://www.tahlildadeh.com" target="_blank">Opens in New</a> |

<a href="http://www.tahlildadeh.com" target="_self">Opens in Self</a> |

<a href="http://www.tahlildadeh.com" target="_parent">Opens in Parent</a> |

<a href="http://www.tahlildadeh.com" target="_top">Opens in Body</a>

</body>

</html>

این مثال نتیجه ی زیر را تولید خواهد کرد که می توانید روی لینک های مختلف کلیک کنید تا تفاوت بین گزینه های مختلف ارائه شده برای ویژگی target را درک کنید.

Click any of the following links
Opens in New | Opens in Self | Opens in Parent | Opens in Body
 
استفاده از مسیر پایهوقتی که شما داکیومنت های HTML را متناسب با همان وب سایت لینک می کنید، ارائه ی یک URL کامل برای هر لینک ضروری نیست. اگر از برچسب در تیتر داکیومنت HTML خود استفاده می کنید، می توانید از دست آن خلاص شوید. این برچسب برای ارائه ی یک مسیر پایه برای همه ی لینک ها استفاده می شود. بنابراین مرورگر شما مسیر ارائه شده ی مرتبط را به مسیر پایه پیوند خواهد داد و یک URL کامل ایجاد خواهد کرد.

 مثال:
مثال زیر از برچسب < base> برای مشخص کردن URL پایه استفاده می کند و پس از آن ما می توانیم به جای ارائه ی URL کامل برای هر لینک از مسیرهای مرتبط استفاده کنیم.

آموزش طراحی سایتنمونه سه<html>
<head>
    <title>Hyperlink Example</title>
    <base href="http://www.tahlildadeh.com/">
</head>
<body>
    <p>Click following link</p>
    <a href="/WebsiteNews/TahlildadeNews.aspx" target="_blank">HTML tahlildadeh</a>
</body>
</html>
این مثال نتیجه ی زیر را تولید خواهد کرد که می توانید روی لینک تولید شده ی HTML tahlildadeh کلیک کنید تا به آموزش HTML برسید.
اکنون URL ارائه شده ی < a href="http:/WebsiteNews/TahlildadeNews.aspx> باعنوان < a href=" http //www.tahlildadeh.com/WebsiteNews /TahlildadeNews.aspx"> در نظر گرفته می شود

لینک شدن به بخشی از صفحهمی توانید برای بخش خاصی از صفحه ی وب ارائه شده، با استفاده از ویژگی name یک لینک ایجاد کنید. این امر یک فرایند دو مرحله ای می باشد.
نخست اینکه در مکانی که می خواهید به داخل صفحه ی وب برسید یک لینک ایجاد کنید و آن را با استفاده از برچسب < a...> نام گذاری کنید
<h1>HTML Text Links <a name="top"></a></h1>
مرحله ی دوم ایجاد یک هایپر لینک می باشد برای لینک کردن داکیومنت و قرار دادن در مکانی که می خواهید برسید.
<a href="/html/html_text_links.htm#top">Go to the Top</a>

و این مثال لینک زیر را تولید خواهد کرد که می توانید در آن روی لینک تولید شده ی Go to the Top کلیک کنید تا به نقطه ی بالای آموزش HTML Text Link برسید.

نمونه پنج

<!DOCTYPE html>

<html>

<head>

<title>Hyperlink Example</title>

</head>

<p>Click following link</p>

<a href="http://www.tahlildadeh.com" target="_blank">HTML tahlildadeh</a>

</body>

</html>

تنظیم رنگ

موضوع :
برچسب ها : آموزش طراحی سایت ,فیلم اموزش طراحی سایت, آموزش html css, آموزش جاوا اسکریپت,آموزش طراحی سایت با html,

امتیاز : 4 | نظر شما : 1 2 3 4 5 6
+ نوشته شده در جمعه 7 خرداد 1400ساعت 16:04 توسط اسفندیاری | تعداد بازديد : 237 | |

آموزش لینک ایمیل در HTML

آموزش طراحی سایت - آموزش لینک ایمیل در HTML

لینک ایمیل HTML

قرار دادن یک لینک ایمیل HTML روی صفحه ی وب خود کار سختی نیست، اما این کار ممکن است باعث بروز مشکل اسپم های غیرضروری در اکانت ایمیل شما شود. افرادی هستند که می توانند برنامه هایی را برای جمع آوری چنین ایمیل هایی اجرا کنند و سپس آنها را با راه های مختلف برای اسپم کردن استفاده کنند.
می توانید از گزینه دیگری استفاده کنید تا افراد به راحتی بتوانند به شما ایمیل ارسال کنند. یک گزینه می تواند استفاده از فرم های HTML باشد برای جمع آوری داده های یوزر و سپس استفاده ازاسکریپت PHP یا CGI برای ارسال ایمیل.
برای یک مثال ساده، فرم Contact Us را چک کنید. با استفاده از این فرم یک فیدبک از یوزر گرفته و سپس از یک برنامه ی CGI استفاده می کنیم که در حال جمع آوری این اطلاعات و ارسال ایمیل به یک email ID ارائه شده می باشد.

برچسب HTML Email

برچسب < a> در HTML برای مشخص کردن یک آدرس ایمیل و ارسال ایمیل، گزینه هایی را به شما ارائه می دهد. در حالیکه از برچسب < a> به عنوان یک email tag استفاده می کنید، از mailto:email address همراه با ویژگی href نیز استفاده خواهید کرد. در زیر ترکیب استفاده از mailto را به جای استفاده از http می بینید.

نمونه یک

<!DOCTYPE html>

<html>

<head>

<title>SendMail</title>

</head>

<body>

<a href="mailto:abc@example.com">Send Email</a>

</body>

</html>

اکنون اگر یوزر روی این لینک کلیک کند، email client آغاز به کار خواهد کرد ( مانند lotus notes و outlook express و غیره.) که روی کامپیوتر شما نصب شده است. ریسک دیگری در استفاده از این گزینه برای ارسال ایمیل وجود دارد، زیرا اگر یوزر email client نصب شده روی کامپیوتر خود نداشته باشد، ارسال ایمیل ممکن نحواهد بود.

تنظیمات پیش فرض

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

نمونه دو

<!DOCTYPE html>

<html>

<head>

<title>SendMail</title>

</head>

<body>

Send Feedback

</a>

</body>

</html>

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

موضوع :
برچسب ها : آموزش طراحی سایت با html, فیلم اموزش طراحی سایت, آموزش html css,دوره آموزش طراحی سایت,

امتیاز : 4 | نظر شما : 1 2 3 4 5 6
+ نوشته شده در يکشنبه 9 خرداد 1400ساعت 15:43 توسط اسفندیاری | تعداد بازديد : 213 | |

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

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

قاب های HTML

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

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

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

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

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

مثال:

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

نمونه یک

<!DOCTYPE html>

<head>

<title>HTML Frames</title>

</head>

<body>

Your browser does not support frames.

</body>

</noframes>

</frameset>

</html>

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

Attribute

Description

cols

تعداد ستون ها و اندازه ی هر ستون را در frameset مشخص می کند. شما می توانید عرض هر ستون را به یکی از چهار روش زیر مشخص کنید:
مقادیر مطلق به پیکسل، برای مثال برای ایجاد سه چارچوب عمودی از cols="100, 500,100" استفاده کنید. درصدی از پنجره ی مرورگر، برای مثال برای ایجاد سه چارچوب عمودی از cols="10%, 80%,10%" استفاده کنید.
استفاده از سمبل wildcard ، برای مثال برای ایجاد سه چارچوب عمودی از cols="10%, *,10%" استفاده کنید. در این مورد wildcard باقیمانده ی پنجره را فرا می گیرد.
به عنوان عرض های پنجره ی مرورگر، به عنوان مثال برای ایجاد سه چارچوب عمودی از cols="3*,2*,1*" استفاده کنید. این یک جایگزین بری درصدها می باشد. شما می توانید از عرض های مربوط پنجره ی مرورگر استفاده کنید. در اینجا پنجره به شش بخش تقسیم می شود: اولین ستون نصف پنجره را فرا می گیرد، دومین ستون یک سوم و سومین ستون یک ششم آن را.

rows

این ویژگی درست مانند ویژگی cols کار می کند و همان مقادیر را به خود می گیرد، اما برای مشخص کردن ردیف ها در frameset استفاده می شود. برای مثال برای ایجاد دو چارچوب افقی از rows="10%, 90%" استفاده کنید. می توانید طول هر ردیف را به همان روشی که در بالا در مورد ستون ها توضیح داده شد، مشخص کنید.

border

این ویژگی عرض حاشیه ی هر چارچوب را به پیکسل مشخص می کند. برای مثال border="5" . مقدار 0 به معنای بدون حاشیه می باشد.

frameborder

این ویژگی مشخص می کند که آیا بین چارچوب ها باید حاشیه ی سه بعدی نمایش داده شود. این ویژگی مقدار 1 (بله) و 0 (خیر) را به خود می گیرد. برای مثال frameborder="0" به معنای بدون حاشیه می باشد.

framespacing

این ویژگی مقدار فضای بین چارچوب ها را در یک frameset مشخص می کند. این ویژگی می تواند هرمقدار داخلی به خود بگیرد. برای مثال framespacing="10" به معنای وجود 10 پیکسل فضا بین هر چارچوب می باشد.

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

Attribute

Description

src

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

name

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

frameborder

این ویژگی مشخص می کند که آیا حاشیه های مربوط به frame نشان داده می شوند یا نه. این امر مقدار داده شده به ویژگی 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>

<head>

<title>HTML Frames</title>

</head>

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

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

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

</body>

</html>

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

نمونه چهار

<!DOCTYPE html>

<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 نام گذاری شده بارگذاری می کند

موضوع :
برچسب ها : آموزش سئو در طراحی سایت , آموزشBootStrap, آموزش HTML,,

امتیاز : 3 | نظر شما : 1 2 3 4 5 6
+ نوشته شده در دوشنبه 10 خرداد 1400ساعت 20:26 توسط اسفندیاری | تعداد بازديد : 174 | |

آموزش 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>

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 css,

امتیاز : 3 | نظر شما : 1 2 3 4 5 6
+ نوشته شده در چهارشنبه 12 خرداد 1400ساعت 16:43 توسط اسفندیاری | تعداد بازديد : 196 | |

پس زمینه در html

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

background در html

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

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

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

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

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

< tagname bgcolor="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>

<tr>

<td>

This background is filled up with HTML image.

</td>

</tr>

</table>

</body>

</html>

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

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

مثال:

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

نمونه سه

<!DOCTYPE html>

<html>

<head>

موضوع :
برچسب ها : دوره آموزش طراحی سایت, فیلم اموزش طراحی سایت, آموزش طراحی وب, آموزش جاوا اسکریپت, آموزش طراحی سایت با html, آموزش طراحی سایت,

امتیاز : 3 | نظر شما : 1 2 3 4 5 6
+ نوشته شده در دوشنبه 17 خرداد 1400ساعت 19:03 توسط اسفندیاری | تعداد بازديد : 207 | |

فونت ها

فونت ها نقش مهمی در زیبا ساختن و خواناتر کردن وب سایت بازی می کنند. ظاهرو رنگ فونت به طور کامل بستگی به کامپیوتر و مرورگری دارد که استفاده می شود، اما شما می توانید از برچسب < font>در HTML برای افزودن استایل، سایز و رنگ به متن خود در وب سایت استفاده کنید. می توانید از یک برچسب< basefont> برای تنظیم تمام متن خود به اندازه، ظاهر و رنگ یکسان استفاده کنید.
برچسب فونت دارای سه ویژگی به نام های size، color و face می باشد که فونت شکا را به دلخواه در می آورد. برای تغییر هرکدام از ویژگی های فونت در هر زمانی در صفحه ی وب خود، به سادگی از برچسب < font> استفاده کنید. متنی که دنبال می کند، تغییر یافته با قی می ماند تا زمانی که شما آن را با < /font> برچسب ببندید. شما می توانید یکی از ویژگی ها یا همه ی ویژگی های داخل برچسب < font> را تغییر دهید.

نکته:

برچسب های font و basefont استفاده نمی شوند و احتمال می رود که در ورژن های بعدی HTML حذف شوند. بنابراین نباید مورد استفاده قرار بگیرند، پیشنهاد می شود که برای اجرای فونت های خود از استایل های CSS استفاده کنید. اما برای رسیدن به هدف این فصل برچسب های font و basefont رابا جزئیات توضیح می دهد.

تنظیم اندازه ی فونت

شما می توانید با استفتده از ویژگی size اندازه فونت محتوا را تنظیم کنید. دامنه ی مقادیر قابل قبول از 1 (کوچکترین) تا 7 (بزرگترین) می باشد. اندازه ی فونت پیش فرض 3 می باشد.

مثال:

نمونه یک

اندازه ی فونت مربوط

شما می توانید مشخص کنید چه تعداد از فونت ها بزرگتر و چه تعداد کوچکتر از اندازه ی فونت حاضر باشند. می توانید آن را مانند< font size="+n"> or < font size="-n"> مشخص کنید.

مثال:

نمونه دو

تنظیم ظاهر فونت

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

مثال:

نمونه سه

تعیین ظاهر فونت جایگزین

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

1 2	`<` `font` `face="arial,helvetica">` `<` `font` `face="Lucida Calligraphy,Comic Sans MS,Lucida Console">`

اگر هیچکدام از فونت های ارائه شده نصب نشده باشند، بنابراین فونت پیش فرض Times New Roman نمایش داده خواهد شد.

تنظیم رنگ فونت

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

مثال:

نمونه چهار

عنصر < basefont>

انتظار می رود که عنصر < basefont> یک اندازه، رنگ و ظاهر پیش فرض برای هر بخشی از داکیومنت که در برچسب < font>قرار نمی گیرند، تنظیم کند. شما می توانید از عناصر < font>استفاده کنید تا تنظیمات < basefont> را انجام دهید.
برچسب < basefont> همچنین ویژگی های رنگ، اندازه و ظاهر را می گیرد و با دادن مقدار بیشتر از 1+ برای فونت های بزرگتر و کمتر از 2- برای فونت های کوچکتر، تنظیمات فونت مربوطه را پشتیبانی می کند.

مثال:

نمونه پنج

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

موضوع :
برچسب ها : آموزش طراحی سایت , دوره آموزش طراحی سایت , اموزش برنامه نویسی, آموزش طراحی وب سایت ,

امتیاز : 3 | نظر شما : 1 2 3 4 5 6
+ نوشته شده در سه شنبه 15 تير 1400ساعت 17:10 توسط اسفندیاری | تعداد بازديد : 228 | |

فرم های html

وقتی که می خواهید داده هایی را از سایت بازدیدکننده جمع آوری کنید، به فرم های HTML احتیاج خواهید داشت. به عنوان مثال در هنگام ثبت کاربر، اطلاعاتی مانند نام، آدرس ایمیل و کارت اعتباری و غیره را جمع آوری می کنید. یک فرم داده ها را از بازدیدکننده ی سایت می گیرد و سپس آن را به یک برنامه ی پایانی مانند CGI، اسکریپت ASP یا اسکریپت PHP باز می گرداند. برنامه ی پایانی فرایندهای مورد نیاز را بر اساس کار تعریف شده در برنامه، روی داده ی منتقل شده انجام می دهد.
عناصر متفاوتی برای فرم در دسترس میباشند، مانند فیلدهای متن، فیلدهای textarea، منوهای رو به پایین، دکمه های رادیو، چک باکس ها و غیره.
برچسب < form> مربوط به HTML، برای ایجاد یک فرم HTML استفاده می شود و دارای ترکیب زیر می باشد

< form action="Script URL" method="GET|POST">     form elements like input, textarea etc. < /form>

ویژگی های فرم

علاوه بر ویژگی های متداول، در زیر لیستی از متداول ترین ویژگی های مربوط به فرم را مشاهده می کنید .

Attribute Description

action

اسکریپت backend برای پردازش داده ی انتقال شده ی شما آماده میباشد.

method

روشی برای بارگذاری داده. متداولترین روش های مورد استفاده GET و POST می باشند.

target

پنجره ی هدف یا چارچوب را، جایی که نتیجه ی اسکریپت نمایش داده خواهد شد، مشخص می کند. این ویژگی مقادیر _blank, _self, _parent و غیره را به خود می گیرد.

enctype

شما می توانید از ویژگی enctype برای مشخص کردن چگونگی برنامه نویسی توسط مرورگر قبل از ارسال به سرور، استفاده کنید. مقادیر ممکن عبارتند از: application/x-www-form-urlencoded - این روش استانداردی است که بیشتر فرم ها در سناریو های ساده استفاده می کنند. mutlipart/form-data - این روش زمانی استفاده می شود که شما می خواهید داده های دوتایی را به شکل فایل هایی مانند تصویر بارگذاری کنید.

کنترل های فرم HTML

انواع مختلفی از کنترل های فرم وجود دارند که می توانید برای جمع آوری داده با استفاده از فرم HTML از آنها استفاده کنید.

کنترل های ورودی متن
کنترل های چک باکس
کنترل های رادیو باکس
کنترل های انتخاب باکس
باکس های انتخاب فایل
کنترل های مخفی
دکمه های قابل کلیک شدن
ثبت و تنظیم مجدد

کنترل های ورودی متن

سه نوع ورودی متن وجود دارد که در فرم ها استفاده می شوند .

کنترل های ورودی متن تک خطی: این کنترل برای آیتم هایی استفاده می شود که فقط یک خط از ورودی کاربر را لازم دارد، مانند باکس های جستجو و نام ها. این کنترل ها با استفاده ازبرچسب < input> مربوطبه HTML ایجاد می شوند.
کنترل ورودی گذرواژه: این نیز یک متن ورودی تک خطی می باشد، اما به محض اینکه کاربر کاراکتر را وارد می کند، این کنترل آن را می پوشاند.
کنترل های متن ورودی چند خطی: زمانی استفاده می شود که لازم است کاربر جزئیاتی را وارد کند که بیشتر از یک جمله می باشند. کنترل های ورودی چند خطی با استفاده از برچسب < textarea> استفاده می شوند.

کنترل های ورودی تک خطی

این کنترل ها برای آیتم هایی استفاده می شوند که کاربر فقط یک خط ورودی احتیاج دارد، مانند باکس های جستجو و نام ها و با استفاده از برچسب < input> مربوط به HTML ایجاد می شوند.

مثال:

در اینجا مثال پایه ای می بینید از یک ورودی تک خطی که برای گرفتن نام کوچک و نام خانوادگی به کار می رود .

نمونه یک

<!DOCTYPE html> <html> <head>    <title>Text Input Control</title> </head> <body>    <form>        First name:  <input type="text" name="first_name" />        <br>        Last name:  <input type="text" name="last_name" />    </form> </body> </html>

ویژگی ها

در زیر لیستی از ویژگی های برچسب < input>را برای ایجاد فیلد متن می بینید.

Attribute Description

type

نوع کنترل ورودی را نشان می دهد و برای کنترل متن ورودی برای text تنظیم خواهد شد.

name

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

value

می تواند برای ارائه ی یک مقدار اصلی در داخل کنترل استفاده شود.

size

اجازه می دهد تا عرض کنترل متن ورودی را متناسب با کاراکترها تعیین کنید.

maxlength

اجازه می دهد تا حداکثر تعداد کاراکترهایی را که یک کاربر می تواند در یک تکست باکس وارد کند، مشخص کنید.

کنترل های پسورد ورودی

این کنترل نیز یک کنترل تک خطی می باشد، اما به محض اینکه کاربر کاراکترها را وارد می کند، آنها را می پوشاند. این ها نیزبا استفاده از برچسب < input> مربوط به HTML ایجاد می شوند، اما نوع ویژگی با عنوان password تنظیم میشود.

مثال:

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

نمونه دو

<!DOCTYPE html> <html> <head>    <title>Password Input Control</title> </head> <body>    <form>        User ID :  <input type="text" name="user_id" />        <br>        Password:  <input type="password" name="password" />    </form> </body> </html>

ویژگی ها

در زیر لیست مربوط به ویژگی های برچسب < input>را برای ایجاد فیلد پسوورد می بینید.

Attribute Description

type

نوع کنترل ورودی را نشان می دهد و برای کنترل ورودی پسوورد، برای password تنظیم خواهد شد.

name

برای نام گذاری کنترلی استفاده می شود که برای تشخیص وگرفتن مقدار به سرور فرستاده می شود.

value

برای ارائه ی یک مقدار اولیه در داخل کنترل استفاده می شود.

size

اجازه می دهد تا عرض کنترل متن ورودی را با کاراکترها تعیین کنید.

maxlength

اجازه می دهد تا حداکثر تعداد کاراکترهایی را که یک کاربر می تواند در یک تکست باکس وارد کند، تعیین کنید.

کنترل های متن ورودی چند خطی

زمانی استفاده می شود که یک کاربر باید جزئیاتی را ئارد کند که بیشتر از یک جمله می باشند. کنترل های ورودی چند خطی با استفاده از برچسب < textarea> ایجاد میشوند.

مثال:

در اینجا مثالی را می بینید از یک ورودی متن چند خطی که برای ارائه ی توصیفات آیتم استفاده می شود.

نمونه سه

<!DOCTYPE html> <html> <head>    <title>Multiple-Line Input Control</title> </head> <body>    <form>        Description : <br />        <textarea rows="5" cols="50" name="description">            Enter description here...        </textarea>    </form> </body> </html>

ویژگی ها

در زیر لیستی از ویژگی های برچسب < textarea> ارائه شده اند.

Attribute

Description

name

برای نامگذاری کنترلی استفاده می شود که به سرور ارسال می شود تا تشخیص داده شده و مقدار بگیرد.

rows

تعداد ردیف های area box مربوط به متن را نشان می دهد.

cols

تعداد ستون های area box مربوط به متن را نشان می دهد.

کنترل چک باکس

چک باکس ها زمانی استفاده می شوند که بیشتر از یک گزینه قرار است انتخاب شود. آنها نیزبا استفاده از برچسب < input>ایجاد می شوند، اما نوع ویژگی به checkbox تنظیم می شود.

مثال:

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

نمونه چهار

<!DOCTYPE html> <html> <head>    <title>Checkbox Control</title> </head> <body>    <form>        <input type="checkbox" name="maths" value="on"> Maths        <input type="checkbox" name="physics" value="on"> Physics    </form> </body> </html>

در زیر لیستی از ویژگی های برچسب < checkbox> را می بینید:

Attribute

Description

type

نوع کنترل ورودی را نشان می دهد و برای کنترل ورودی چک باکس با checkbox کنترل خواهد شد.

name

برای نامگذاری کنترلی استفاده می شود که برای تشخیص و گرفتن مقدار به سرور ارسال می شود.

value

مقداری که اگر چک باکس انتخاب شود، استفاده خواهد شد.

checked

اگر بخواهید آن را به طور پیش فرض انتخاب کنید، با checked تنظیم می شود.

کنترل دکمه ی رادیو

دکمه های رادیو زمانی استفاده میشوند که بین چندین گزینه تنها یک گزینه باید انتخاب شود. این کنترل ها نیز با برچسب < input> ایجاد میشوند، اما نوع ویژگی با radio تنظیم می شود.

مثال:

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

نمونه پنج

<!DOCTYPE html> <html> <head>    <title>Checkbox Control</title> </head> <body>    <form>        <input type="radio" name="maths" value="on"> Maths        <input type="radio" name="physics" value="on"> Physics    </form> </body> </html>

ویژگی ها

در زیر لیستی از ویژگی های دکمه ی رادیو را می بینید.

Attribute

Description

type

نوع کنترل ورودی را نشان می دهد و برای کنترل ورودی چک باکس با عنوان radio تنظیم می شود.

name

برای نامگذاری کنترلی استفاده می شود که برای تشخیص و گرفتن مقدار به سرور ارسال می شود.

value

مقداری که radio box انتخاب شود، استفاده خواهد شد.

checked

اگر می خواهید آن را به عنوان پیش فرض استفاده کنید، به checked تنظیم کنید.

کنترل Select Box

یک Select Boxکه منوی رو به پایین نیز نامیده می شود، گزینه ای را برای ارائه ی گزینه های مختلف به شکل یک لیست رو به پایین ارائه می دهد، که کاربر می تواند از آن یک یا بیشتر از یک گزینه را انتخاب کند.

مثال:

در اینجا مثالی از کد HTML برای یک فرم با یک جعبه ی رو به پایین می بینید.

نمونه شش

<!DOCTYPE html> <html> <head>    <title>Select Box Control</title> </head> <body>    <form>        <select name="dropdown">            <option value="Maths" selected>Maths</option>            <option value="Physics">Physics</option>        </select>    </form> </body> </html>

در زیر لیستی از ویژگی های برچسب < select> را می بینید.

Attribute

Description

name

برای نامگذاری کنترلی استفاده می شود که برای تشخیص و گرفتن مقدار به سرور انتقال می شود.

size

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

multiple

اگر روی multiple تنظیم شده باشد، به کاربر اجازه می دهد تا چند آیتم را از منو انتخاب کند.

در زیر لیستی از ویژگی های مهم برچسب < option> ارائه شده است.

Attribute

Description

value

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

selected

مشخص می کند که این گزینه رد زمان بارگذاری صفحه، باید گزینه ی انتخابی باشد.

label

یک روش جایگزین برای برچسب دار کردن گزینه ها.

فایل آپلود باکس

اگر می خواهید به کاربر اجازه دهید تا فایلی را روی وب سایت شما آپلود کند، به یک کنترل فایل آپلود احتیاج خواهید داشت، که Select Boxنیز نامیده می شود. این ویژگی با استفاده از برچسب < input> نیز ایجاد می شود، اما نوع ویژگی با file تنظیم می شود.

مثال:

در اینجا مثالی را می بینید از کد HTML برای یک فرم با یک فایل آپلود باکس.

نمونه هفت

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

موضوع :
برچسب ها : آموزش HTML, آموزش Attributeها در HTML,طراحی سایت , آموزش برنامه نویسی, دوره طراحی سایت,

امتیاز : 3 | نظر شما : 1 2 3 4 5 6
+ نوشته شده در سه شنبه 22 تير 1400ساعت 20:25 توسط اسفندیاری | تعداد بازديد : 190 | |

HTML Embed Multimedia

آموزش چند رسانه ای در HTML‏ ‏

گاهی اوقات تمایل دارید که موسیقی یا ویدئو به صفحه ی وب خود اضافه کنید. ساده ترین راه برای افزودن صدا یا ویدئو به وب سایت، وارد کردن برچسب خاص HTML به نام < embed> می باشد. این برچسب باعث می شود که مرورگر به طور خودکار کنترل هایی را برای مولتی مدیا وارد کند که مرورگر ارائه شده برچسب < embed> و نوع مدیای ارائه شده را پشتیبانی می کند.
همچنین می توانید یک برچسب < noembed>برای مرورگرهایی وارد کنید که برچسب < embed> را نمی شناسند. به عنوان مثال می توانید از < embed> برای نمایش یک فیلم به انتخاب خود استفاده کنید واگر مرورگر < embed> را پشتیبانی نمی کند، از< noembed> برای نمایش یک تصویر JPG مجزا استفاده کنید.

مثال:

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

مرحله 1

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

در زیر لیستی از ویژگی های مهمی را می بینید که توسط برچسب < embed> استفاده می شود.

Attribute

Description

align

تعیین می کند که چگونه یک آبجکت را تنظیم کرد، که می تواند هم در مرکز، هم در راست و یا چپ تنظیم شود.

autostart

این ویژگی Boolean نشان می دهد که آیا مدیا باید به طور خودکار شروع به کار کند. شما می توانید آن را با true یا false تنظیم کنید.

loop

تعیین می کند که آیا صدا متداولا پشت سرهم تکرار شود( لوپ را روی true تنظیم کنید)، یا چند دفعه باید تکرار شود ( یک مقدار مثبت) و یا اصلا تکرار نشود(false).

playcount

تعداد دفعاتی را که یک صدا باید تکرار شود تعیین می کند. اگر در حال استفاده از IE هستید، این گزنیه جایگزینی برای loop می باشد.

hidden

مشخص می کند که آیا آبجکت مولتی مدیا باید روی صفحه نمایش داده شود.مقدار false یعنی نه و مقدار true یعنی بله.

width

عرض آبجکت به پیکسل.

height

عرض آبجکت به پیکسل.

name

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

src

URL مربوط به آبجکت که باید جاسازی شود.

volume

میزان صدا را کنترل می کند که می تواند از 0 (صدا قطع شده) تا 100 (آخرین حد صدا) باشد.

انواع ویدیوهای پشتیبانی شده

می توانید از انواع مدیاهای مختلفی مانند فایل های flash movies، AVi و MOV در داخل برچسب embed استفاده کنید.

فایل های swf – فایل هایی هستند که با برنامه ی macromedia’s flash تولید می شوند.
فایل های wmv – انواع فایل های تصویری ویندوز مایکروسافت می باشند.
فایل های mov - فرمت Quick time movie در اپل.
فایل های mpeg – فایل های تصویری هستند که توسط گروه تخصصی تصاویر متحرک (Moving Pictures Expert Group) ایجاد می شوند.

مرحله 2

صدای زمینه

شما می توانید از برچسب < bgsound>در html برای اجرای صدا در زمینه ی صفحه ی وب خود استفاده کنید. این برچسب فقط توسط اینترنت اکسپلورر پشتیبانی می شود و دیگر مرورگرها آن را نادیده می گیرند. زمانی که سند اصلی در ابتدا توسط کاربر دانلود شده و نمایش داده می شود، این برچسب یک فایل صدا را دانلود کرده و اجرا می کند. همچنین هروقت کاربر مرورگر را تازه سازی کند، صدای زمینه نیز دوباره اجرا خواهد شد.این برچسب دارای فقط دو ویژگی می باشد، loop و src، که همانطور که در بالا توضیح داده شد هر دوی این ویژگی ها دارای یک معنا می باشند.
در اینجا مثال ساده ای از اجرای فایل کوچک midi را می بینید.

مرحله 3

این مثال یک صفحه ی خالی تولید خواهد کرد. این برچسب هیچ مولفه ای را اجرا نمی کند و مخفی باقی می ماند.
اینترنت اکسپلورر نیز تنها سه فرمت صدا را اجرا می کند: wav فرمت داخلی کامپیوترها، au فرمت داخلی برای کار ابزارهای Unix و MIDI یک کد برنامه گذاری جهانی برای موسیقی.

برچسب آبجکت در HTML

HTML 4 عنصر< object>را معرفی می کند که یک راه حل چند منظوره برای وارد کردن آبجکت عمومی ارائه می دهد. عنصر< object>به نویسندگان HTML اجازه می دهد تا هر چیز لازم را با یک آبجکت برای ارائه ی آن توسط یک کاربر، تعیین کند.
در اینجا چند مثال در این رابطه می بینید.

مثال:

شما می توانید یک سند HTML را در خود سند HTML اجرا کنید.

مرحله 4

در اینجا اگر مرورگر برچسب object را پشتیبانی نکند، ویژگی alt وارد تصویر می شود.

شما می توانید یک سند PDF را در یک سند HTML اجرا کنید.

مرحله 5

شما می توانید با استفاده از برچسب < param> برخی پارامترهای متناسب با سند را مشخص کنید. در اینجا مثالی از اجرای فایل wavرا می بینید.

مرحله 6

شما می توانید یک سند flash مانند زیر اجرا کنید.

مرحله 7

شما می توانید یک سند java applet وارد سند HTML کنید.

مرحله 8

ویژگی classid تعیین می کند که چه نسخه ای از java plug-in استفاده شود. شما می توانید از ویژگی انتخابی codebase برای مشخص کردن چگونگی دانلود JRE استفاده کنید.

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

موضوع :
برچسب ها : یادگیری طراحی وب , آموزش طراحی سایت, دوره آموزش طراحی سایت , آموزش برنامه نویسی,

امتیاز : 4 | نظر شما : 1 2 3 4 5 6
+ نوشته شده در چهارشنبه 23 تير 1400ساعت 19:23 توسط اسفندیاری | تعداد بازديد : 230 | |

HTML Marquees

آموزش HTML Marquee ‏ ‏‏

Marquee در HTML یک قطعه اسکرولینگ می باشد که یا به صورت افقی در عرض متن ویا به صورت عمودی در پایین صفحه ی وب شما نمایش داده می شود، بستگی به تنظیمات دارد وتوسط برچسب < fmarquees>مربوط به HTML ایجاد می شود.

توجه:

ممکن است برچسب < marquees> در HTML توسط مرورگرهای زیادی پشتیبانی نشود، بنابراین توصیه می شود که به این برچسب تکیه نکنید، در عوض می توانید از javascript و CSS برای ایجاد چنین تاثیراتی استفاده کنید.

ترکیب ساده برای استفاده از برچسب< marquees> در HTML مانند زیر می باشد:

1

2

3

< marquee attribute_name="attribute_value" ....more attributes>
    One or more lines or text message or image
< /marquee>

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

در زیر لیست مهمی از ویژگی های برچسب < marquee> را می توانید مشاهده کنید.

Attribute

Description

width

این ویژگی عرض marquee را مشخص می کند. می تواند مقداری مانند 10 یا 20 درصد باشد.

height

این ویژگی طول marquee را مشخص می کند. می تواند مقداری مانند 10 یا 20 درصد باشد.

direction

این ویژگی مسیری را که marquee باید در آن اسکرول شود، تعیین می کند. می تواند مقداری مانند up، down، left و یا right داشته باشد.

behavior

این ویژگی نوع اسکرول marquee را تعیین می کند. می تواند مقداری مانند scroll، side و alternate داشته باشد.

scrolldelay

این ویژگی میزان تاخیر بین دو پرش را تعیین می کند. می تواند مقداری مانند 10 داشته باشد.

scrollamount

سرعت متن marquee را تععین می کند. می تواند مقداری مانند 10 داشته باشد.

loop

تعداد دفعات loop را تعیین می کند. مقدار پیش فرض INFINITE می باشد که به این معناست که در marquee به طور پایان ناپذیری loop انجام می شود.

bgcolor

این ویژگی رنگ زمینه را به شکل نام رنگ یا مقدار شش تایی رنگ مشخص می کند.

hspace

این ویژگی فضای افقی اطراف marque را تعیین می کند. می تواند مقداری مانند 10 یا 20 درصد داشته باشد.

vspace

این ویژگی فضای عمودی اطراف marquee را تعیین می کند. می تواند مقداری مانند 10 یا 20 درصد داشته باشد.

در ادامه چند مثال از استفاده ی برچسب marquee می بینید.

مثال:

نمونه یک

<!DOCTYPE html>

<html>

<head>

<title>HTML marquee Tag</title>

</head>

<body>

<marquee>This is basic example of marquee</marquee>

</body>

</html>

مثال:

نمونه دو

<!DOCTYPE html>

<html>

<head>

<title>HTML marquee Tag</title>

</head>

<body>

<marquee width="50%">This example will take only 50% width</marquee>

</body>

</html>

مثال:

نمونه سه

مثال:

نمونه چهار

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

موضوع :
برچسب ها : آموزش طراحی سایت , دوره آموزش طراحی سایت , یادگیری طراحی وب , طراحی سایت ,

امتیاز : 4 | نظر شما : 1 2 3 4 5 6
+ نوشته شده در دوشنبه 28 تير 1400ساعت 17:09 توسط اسفندیاری | تعداد بازديد : 206 | |

سربرگ HTML

سربرگ HTML‏‏

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

این فصل جزئیات بیشتری در مورد بخش سربرگ در HTML ارائه می دهد که به وسیله ی برچسب< head>نمایش داده می شود. برچسب< head>حاوی برچسب های مهمی می باشد که عبارتند از:< title>, < meta>, < link>, < base>,< style>, < script >, و < noscript > tags.

برچسب < title> در HTML

این برچسب برای تعیین تیتر داکیومنت HTML استفاده می شود. در زیر مثالی می بینید از ارائه ی تیتر به داکیومنت HTML.

نمونه یک

برچسب < meta> در HTML

این برچسب برای ارائه ی متادیتا در مورد داکیومنت HTML استفاده می شود که اطلاعاتی از قبیل انقضا صفحه، گردآورنده ی صفحه، لیست کلمات کلیدی، توصیف صفحه و غیره ارائه می دهد.
در ادامه استفاده های مهم برچسب < meta> در داکیومنت HTML ارائه شده اند

نمونه دو

برچسب < base> در HTML

این برچسب برای تعیین URL پایه برای همه ی URL های وابسته در صفحه استفاده می شود، که به این معناست که همه ی URL های دیگر هنگامی که برای آیتم ارائه شده قرار می گیرند، دیگر URL ها به URL پایه زنجیر خواهند شد.
به عنوان مثال تمام صفحات و تصاویر ارائه شده، پس از پیشوند دار کردن URL های ارائه شده با URL پایه مسیر prefixing جستجو خواهند شد

نمونه سه

برچسب < link> در HTML

این برچسب ارتباط بین داکیومنت جاری و منبع خارجی را تعیین می کند. در ادامه مثالی را می بینید از لینک یک فایل style sheet خارجی موجود در مسیر css با یک web root.

نمونه چهار

برچسب< style>در HTML

این برچسب برای تعیین style sheet برای داکیومنت جاری HTML استفاده می شود. در ادامه مثالی را می بینید از تعریف برخی قوانین style sheet در داخل برچسب< style>.

نمونه پنج

توجه:

برای فراگیری چگونگی کار Cascading Style Sheet یک آموزش مجزای موجود در اینجا را کلیک کنید.

برچسب< script>در HTML

این برچسب برای وارد کردن فایل اسکریپت خارجی و یا تعریف فایل اسکریپت داخلی برای داکیومنت HTML استفاده می شود. در زیر مثالی را می بینید که در آن از جاوا اسکریپت برای تعریف عملکرد ساده ی جاوااسکریپت استفاده می کنیم.

نمونه شش

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

موضوع :
برچسب ها : آموزش طراحی سایت ,دوره آموزش طراحی سایت ,

امتیاز : 4 | نظر شما : 1 2 3 4 5 6
+ نوشته شده در يکشنبه 17 مرداد 1400ساعت 15:49 توسط اسفندیاری | تعداد بازديد : 181 | |

صفحه قبل 1 2 صفحه بعد

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

نوشته های پیشین

1400

آمار وبلاگ

تعداد آنلاین : 0
بازدید امروز : 1
بازدید دیروز : 0
هفته گذشته : 1
ماه گذشته : 1
سال گذشته : 67
بازدید کل : 378
کل مطالب : 21
نظرات : 0

خبرنامه

RSS