آموزش HTML - قسمت پنجم (عناصر block و inline ، صفحه بندی ، فرم های ورود اطلاعات، iframe )

عناصر block و inline در HTML

عناصر HTML را می توانید به وسیله تگ های <div> و یا <span> گروه بندی نمایید.

عناصر Block

یک عنصر Block عنصری است که تمام طول یک سطر را اشغال می کند و قبل و بعد از آن یک سطر وجود دارد.

مثال برای عناصر Block:

  • <h1>
  • <p>
  • <div>
  • <table>
عناصر Inline

یک عنصر Inline تنها به اندازه ای که نیاز دارد، عرض یک سطر را اشغال می کند، و هیچ اجباری در اشغال کل یک سطر وجود ندارد.

مثال برای عناصر inline:

  • <span>
  • <a>
  • <img>
  • <td>
عنصر <div>

عنصر <div> یک عنصر block می باشد که می تواند به عنوان یک ظرف برای گروه بندی دیگر عناصر HTML استفاده شود.

عنصر <div> معنی خاصی ندارد. به جز این، به دلیل اینکه یک عنصر block می باشد، مرورگر یک خط قبل و بعد از آن نمایش می دهد.

هنگامی که با CSS استفاده می شود، عنصر <div> می تواند برای تنظیم خصوصیت style برای بلاک هایی با محتوای زیاد استفاده شود.

دیگر استفاده رایج از عنصر <div> صفحه بندی سند می باشد. استفاده از جدول برای صفحه بندی دیگر قدیمی شده است. استفاده از جدول ها برای این منظور روش مناسبی نمی باشد. هدف از عنصر <table> نمایش داده ها به صورت جدولی می باشد.

نحوه صفحه بندی با استفاده از عناصر &lt;div&gt;


عنصر <span>

عنصر <span> یک عنصر درون خطی (inline) است که می تواند به عنوان ظرفی برای متن استفاده شود.

عنصر <span> معنی خاصی ندارد.

هنگامی که با CSS استفاده می شود، عنصر <span> می تواند برای تنظیم خصوصیت style برای بخش های متنی شکل، استفاده شود.

استفاده از عنصر &lt;span&gt; برای متمایز کردن رنگ قسمتی از متن


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

تگ <div> : تعریف یک ظرف برای دیگر عناصر (تگ div یک عنصر Block است)

تگ <span> : تعریف یک ظرف برای دیگر عناصر (تگ span یک عنصر Inline است)


صفحه بندی در HTML

صفحه بندی در وب، برای اینکه سایت شما جذاب به نظر برسد، بسیار مهم است.

پس صفحه وبتان را با دقت طراحی نمایید.

صفحه بندی وب سایت ها

بیشتر وب سایت ها محتویات خود را در چندین ستون قرار می دهند (به فرمت مجله ها یا روزنامه ها)

با استفاده از عناصر <div> یا <table> می توان حالت چند ستونی را ایجاد نمود.

نکته : گرچه می توان به وسیله جداول HTML، صفحه بندی نمود اما باید دانست که جداول برای ارائه داده ها در قالب جدول هستند نه ابزاری برای صفحه بندی.


صفحه بندی با استفاده از عناصر <div>

عنصر <div> یک عنصر block می باشد که برای گروه بندی عناصر HTML استفاده می شود.

توجه:  CSS برای چیدمان عناصر یا ایجاد پس زمینه یا نمای رنگی برای صفحات استفاده می شود.

در مثال زیر، از پنج عنصر div برای صفحه بندی استفاده شده است. همچنین از CSS برای تعیین مکان عناصر، ایجاد پس زمینه رنگی و مشخص کردن عرض و ارتفاع عناصر استفاده شده است:

<!DOCTYPE html>
<html>
<body>

<div id=&quotcontainer&quot style=&quotwidth:500px&quot>

<div id=&quotheader&quot style=&quotbackground-color:#FFA500;&quot>
<h1 style=&quotmargin-bottom:0;&quot>Main Title of Web Page</h1></div>

<div id=&quotmenu&quot style=&quotbackground-color:#FFD700;height:200px;width:100px;float:left;&quot>
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>

<div id=&quotcontent&quot style=&quotbackground-color:#EEEEEE;height:200px;width:400px;float:left;&quot>
Content goes here</div>

<div id=&quotfooter&quot style=&quotbackground-color:#FFA500;clear:both;text-align:center;&quot>
Copyright © beyamooz.com</div>

</div>

</body>
</html>


مثال - خودتان امتحان کنید

نحوه صفحه بندی با استفاده از عناصر <div>.

Web page layout using &lt;div&gt; elements

نحوه صفحه بندی با استفاده از عناصر <table>.

Web page layout using &lt;table&gt; elements

در این مثال، نحوه صفحه بندی سه ستونه نشان داده شده است.

Web page layout using &lt;div&gt; elements with 3 columns


نکات مهم

نکته: بزرگترین مزیت استفاده از CSS  این است که اگر کد CSS را در یک style sheet بیرونی قرار دهید سایت شما خیلی راحت تر حفظ می شود. شما می توانید صفحه بندی کل وب سایتتان را با ویرایش یک فایل تغییر دهید.

نکته: به دلیل اینکه ایجاد صفحه بندی های پیشرفته زمان گیر است، گزینه سریعتر، استفاده از یک الگو(template) می باشد. با جستجو در گوگل می توانید وب سایت های رایگانی را که این الگو ها را ارائه می دهند بیابید. (می توانید از آنها استفاده کنید و آنها را سفارشی کنید.)



فرم های ورود اطلاعات در HTML

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

فرم های HTML

از فرم های HTML برای ارسال اطاعات به سرور استفاده می شود.

یک فرم می تواند شامل عناصر ورودی(Input) مانند فیلد های متنی، چک باکس ها، رادیو باتن ها، دکمه های ارسال، لیست های انتخاب و ... باشد.

از تگ <form> برای ایجاد یک فرم HTML استفاده می شود:

<form>
.
input elements
.
</form>

فرم های HTML و عناصر ورودی

یکی از مهمترین عناصر فرم، عنصر input است.

در این عنصر خصوصیتی به نام type به تعیین نوع اطلاعات ورودی اختصاص دارد و می توان آن را با یکی از مقادیر زیر تنظیم کرد:

text , checkbox , radio , password , hidden , submit , reset , button , file , image

در ادامه به شرح بعضی از typeهای پرکاربرد بالا خواهیم پرداخت:


فیلد input از نوع Text

اگر می خواهید که بازدیدکننده، اطلاعاتی از قبیل متن، اعداد و ... را وارد کند، خصوصیت type را با مقدار "text" تنظیم کنید:

<form>
First name: <input type=&quottext&quot name=&quotfirstname&quot />
<br />
Last name: <input type=&quottext&quot name=&quotlastname&quot />
</form>

توجه: تگ فرم در مرورگر قابل رویت نیست. همچنین توجه داشته باشید که یک فیلد متنی به صورت پیش فرض به اندازه 20 کاراکتر عرض دارد.

نحوه نمایش عناصر ورودی در مروگر نمایش داده نمی شود.

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


فیلد input از نوع Password

اگر می خواهید که بازدیدکننده، کلمه عبور را وارد کند، خصوصیت type را با مقدار "password" تنظیم کنید:

<form>
Password: <input type=&quotpassword&quot name=&quotpwd&quot />
</form>

توجه: کاراکترها در فیلد پسورد به صورت ماسک شده نمایش داده می شوند.(ستاره ای یا دایره ای)


فیلد input از نوع Radio

اگر می خواهید که بازدیدکننده، فقط یک گزینه را از بین چند گزینه محدود انتخاب کند، خصوصیت type را با مقدار "radio" تنظیم کنید:

<form>
<input type=&quotradio&quot name=&quotsex&quot value=&quotmale&quot /> Male<br />
<input type=&quotradio&quot name=&quotsex&quot value=&quotfemale&quot /> Female
</form>


فیلد input از نوع Checkbox

اگر میخواهید که بازدیدکننده، یک یا چند گزینه را از بین چند گزینه محدود انتخاب کند، خصوصیت type را با مقدار "checkbox" تنظیم کنید:

<form>
<input type=&quotcheckbox&quot name=&quotvehicle&quot value=&quotBike&quot /> I have a bike<br />
<input type=&quotcheckbox&quot name=&quotvehicle&quot value=&quotCar&quot /> I have a car
</form>


فیلد input از نوع Submit

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

برای تعیین مقصد ارسال اطلاعات باید درون تگ form از شناسه ای به نام action استفاده کنید. مقدار شناسه action آدرس یا url فایلی است که به دریافت و سپس پردازش اطلاعات دریافتی خواهد پرداخت.

معمولا فایلهای بخش action برنامه ها و اسکریپت های نوشته شده با زبانهای cgi مانند ASP.NET ، Perl ، PHP و ... بوده و وظیفه آنها دریافت اطلاعات فرمها و سپس پردازش آنها می باشد:

<form name=&quotinput&quot action=&quothtml_form_action.php&quot method=&quotget&quot>
Username: <input type=&quottext&quot name=&quotuser&quot />
<input type=&quotsubmit&quot value=&quotSubmit&quot />
</form>

اگر در فیلد متنی ای که در کد بالا وجود دارد، کاراکترهایی را تایپ کنید و روی دکمه "submit" کلیک کنید، مرورگر، ورودی شما را به صفحه ای به نام "html_form_action.php" ارسال خواهد کرد.


تگ های فرم HTML

تگ <form> : یک فرم HTML برای ورودی کاربر تعریف می کند.
تگ <input> : یک کنترل ورودی تعریف می کند.
تگ <textarea> : یک کنترل ورودی متن چند خطه تعریف می کند.
تگ <label> : برای یک عنصر ورودی مانند متن یک برچسب یا lable تعریف می کند.
تگ <fieldset> : برای یک فرم HTML یک لبه یا border تعریف می کند.
تگ <legend> : برای یک عنصر fieldset یک عنوان یا caption تعریف می کند.
تگ <select> : یک لیست کشوئی یا (drop-down list) تعریف می کند.
تگ <optgroup> : در لیست کشوئی یا (drop-down list) یک گروه از آیتم های مرتبط به هم را تعریف می کند.
تگ <option> : در لیست کشوئی یا (drop-down list) یک آیتم یا option تعریف می کند.
تگ <button> : یک دکمه برای کلیک کردن تعریف می کند.


مثال - خودتان امتحان کنید

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

ایجاد فیلدهای متنی

چگونه یک فیلد برای ورود کلمه عبور ایجاد کنیم.

ایجاد فیلد کلمه عبور(پسورد)

چگونه یک radio button ایجاد کنیم.

Radio button

چگونه یک checkbox ایجاد کنیم. کاربر می تواند در انتخاب مختار باشد.

Checkbox

چگونه یک لیست کشویی یا drop-down ساده ایجاد کنیم.

drop-down

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

Drop-down با آیتم انتخاب شده از قبل

چگونه یک کنترل ورودی متن چند خطه ایجاد کنیم. در یک text-area کاربر می تواند تعداد نامحدودی کاراکتر تایپ کند.

Textarea

چگونه یک دکمه برای کلیک کردن ایجاد کنیم.

button

چگونه یک لبه یا border، اطراف عناصر داخل یک فرم ایجاد کنیم.

Fieldset

چگونه یک فرم با دو فیلد متنی و یک دکمه submit ایجاد کنیم.

فرمی با دو فیلد متنی و یک دکمه submit

چگونه یک فرم با دو checkbox و یک دکمه submit ایجاد کنیم.

فرمی با دو checkbox

چگونه یک فرم با دو radio button و یک دکمه submit ایجاد کنیم.

فرمی با دو radio button



تگ iframe چیست؟

یک iframe برای نمایش صفحه وب، درون یک صفحه وب دیگر استفاده می شود.

تگ <iframe> : تعریف یک صفحه داخل صفحه جاری (frame)

دستور اضافه کردن یک iframe
<iframe src=&quot/URL&quot></iframe>

عبارت URL به مکان صفحه مجزای دیگری اشاره دارد.


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

خصوصیت height و width برای تعیین طول و عرض یک iframe استفاده می شود.

مقدار این خصوصیت ها به طور پیش فرض بر حسب پیکسل بیان می شود اما می توان آنرا به درصد نیز بیان کرد. (مثل 80 %)

<iframe src=&quot/demo_iframe.htm&quot width=&quot200&quot height=&quot200&quot></iframe>


حذف Border یا خطوط حاشیه iframe

خصوصیت frameborder مشخص می کند آیا حاشیه نمایش داده شود یا نه.

با تنظیم آن به عدد صفر حاشیه برداشته می شود.

<iframe src=&quot/demo_iframe.htm&quot frameborder=&quot0&quot></iframe>


استفاده از iframe به عنوان مقصد یک لینک

یک iframe می تواند به عنوان مقصد یک لینک استفاده شود.

خصوصیت target در یک لینک باید به خصوصیت name در عنصر iframe اشاره کند.

<iframe src=&quot/demo_iframe.htm&quot name=&quotiframe_a&quot></iframe>
<p><a href=&quothttps://w3schools.com&quot target=&quotiframe_a&quot>w3schools.com</a></p>