شاید بارها با کلمه clearing floats یا پاکسازی شناورها در طراحی تحت وب مواجه شده باشید. اما آیا می‌دانید این روش چیست و برای چه از آن استفاده می‌شود؟ عناصری که به وسیله‌ی ویژگی float در CSS به سمت چپ یا راست شناور شده باشند به درستی نمی‌توانند ارتفاع عنصر والدی که در آن قرار دارند را افزایش دهند. برای درک بهتر کدهای زیر را مشاهده کنید:

#main_container {
 width: 400px;
 margin: 20px auto;
 border: 2px solid #CCC;
 padding: 5px;
}
.floated_box {
 float: left;
 width: 100px;
 height: 100px;
 border: 1px solid #990000;
 margin: 10px;
}
<div id="main_container">
 <p>Some content.</p>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
 <div class="floated_box"></div>
</div>

DIVهایی با کلاس floated_box درون یک DIV والد با شناسه main_container قرار دارند، اما همانطور که در تصویر زیر مشاهده می‌کنید، تصور می‌شود که DIVهای با کلاس floated_box خارج از عنصر والد خود قرار دارند.

 

برای برطرف کردن این مشکل یک راهکار ساده وجود دارد و آن هم استفاده از ویژگی clear در CSS است. این DIV خالی را بعد از آخرین عنصر شناور خود قرار دهید:

<div style="clear: both;"></div>

همانطور که مشاهده می‌کنید با ویژگی clear و با مقدار دهی both به آن، مشکل ارتفاع عنصر والد حل شد.

برای طراحی تحت وب و زبان html آموزش‌های فراوانی وجود دارد که بخوبی امکان یادگیری را برای کاربر فراهم می‌کند. ایده‌ای کوچک به ذهنم رسید تا امکان یادگیری و بهتر بگویم آشنایی دوستداران طراحی تحت وب و زبان html فراهم شود.

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

به همین دلیل شروع کردم و یک ربات کوچک نوشتم. این ربات تمامی برچسب‌های html را در خود داشته و کافیست با انتخاب برچسب مورد نظر اطلاعات کوتاه و کاربردی را درباره‌ی آن برچسب دریافت کنید. البته برای اینکه این اطلاعات تکمیل گردد، برای هر برچسب یک مثال عملی که لینک آن در ادامه توضیحات برچسب می‌آید از سایت w3cschool قرار داده شده است.

از طریق آدرس زیر به این ربات دسترسی خواهید داشت.

@htmltlbot

این ربات غیرفعال شده است.

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

برچسب دوطرفه table

جدول در html موارد استفاده فراوانی دارد که می توان بنا به نیاز آن را شخصی سازی کرد. برای مثال میتوان از جدول ها برای ایجاد لیست حضور و غیاب یا لیست خرید وغیره استفاده کرد. البته ویژگی و استفاده جدول در همینجا خلاصه نشده و می توان در کارهای مختلف از آن استفاده کرد. table یک برچسب دوطرفه است که برچسب های زیرمجموعه جدول را در بر می گیرد.

بصورت زیر نوشته می شود:

<table></table>

نکته: هر جدول از یک یا چند سطر (row) و سلول (cell) تشکیل شده است.

برچسب دوطرفه th

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

بصورت زیر نوشته می شود:

<table>
<th>عنوان</th>
</table>

برچسب دو طرفه tr

وقت آن رسیده تا سطرهای یک جدول را ایجاد کنید! این برچسب این امکان را فراهم می کند تا با قرار دادن هریک از آنها در جدول یک سطر اضافه شود.

بصورت زیر نوشته می شود:

<table>
<tr>ایجاد یک سطر</tr>
</table>

برچسب دوطرفه td

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

بصورت زیر نوشته می شود:

<table>
<td>ایجاد یک سلول</td>
</table>

تا به اینجا جدول ما به صورت زیر در آمده است:

<table>
<th>عنوان یک</th>
<th>عنوان دو</th>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>

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

حال در اینجا باید از یک ویژگی به نام border استفاده شود تا مرزبندی برچسب ها از یکدیگر مشخص شود. این کار خوانایی یک جدول را بیشتر خواهد کرد. هرچه مقدار پس از مساوی که روبروی border قرار می گیرد بیشتر باشد قطر مرز میان سلولها نیز بیشتر خواهد شد. البته برای ایجاد این ویژگی ها می توان از CSS نیز استفاده کرد.

<table border=1>
<th>عنوان یک</th>
<th>عنوان دو</th>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>

خروجی:

برچسب دوطرفه thead

تا به اینجا شما با برچسب هایی از جدول آشنا شدید که می توانند یک جدول را با سطرها و ستون های متعدد ایجاد کنند. اما اگر تعدا این سطرها، ستون ها و سلول ها زیاد باشد آیا می توان آنها را به صورت گروهی مدیریت کرد؟ پاسخ بله است.

اولین برچسب گروهی thead بوده که مربوط به عناوین می باشد. به وسیله این برچسب میتوان مدیریت بهتری بر روی برچسب های th داشت. برای مثال می توان با نوشتن یک ویژگی CSS آن را برای تمام برچسب های th اعمال کرد.

<table border=1>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>

برچسب دوطرفه tbody

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

<table border=1>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tbody>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</tbody>
</table>

برچسب دوطرفه tfoot

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

<table border=1>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tbody>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</tbody>
<tfoot>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</tfoot>
</table>

نکته: برچسب های گروهی thead, tbody و tfoot زمانی قابلیت تاثیرگذاری دارند که از ویژگی ها CSS استفاده شود وگرنه هیچ تاثیری نخواهند داشت.

برچسب دوطرفه caption

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

<table border=1>
<caption>شرح جدول</caption>
<thead>
<th>عنوان یک</th>
<th>عنوان دو</th>
</thead>
<tr>
<td>سلول یک</td>
<td>سلول دو</td>
</tr>
</table>

برچسب table دارای ویژگی های مختلفی است که باعث ایجاد قابلیت هایی از جمله تغییر رنگ، اندازه و… در آن می شود البته این ویژگی ها در نسخه‌ی HTML5 پشتیبانی نمی شود. آن هم به این علت که این ویزگی ها می تواند با استفاده از CSS در جدول اعمال شود. برای همین سعی می کنم تا در جلسات مربوط به CSS درباره آنها توضیح دهم.

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

در جلسه قبل با برچسب form و برخی از انواع برچسب input آشنا شدید. در این جلسه برای تکمیل آموزش قبل سعی شده تا با برخی دیگر از برچسب ها که در روند طراحی یک فرم بکار شما خواهند آمد آشنا شوید.

برچسب دوطرفه select

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

بصورت زیر نوشته می شود:

<select></select>

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

برچسب دوطرفه option

option برچسب زیرمجموعه select می باشد. برای اینکه گزینه های مورد نظر خودمان را ایجاد کنیم از آن استفاده می کنیم.

بصورت زیر نوشته می شود:

<option>قرار گیری محتوا</option>

حال برای اینکه موارد متعددی را به برچسب انتخاب خود اضافه کنیم کافیست بصورت زیر عمل کرده و نتیجه را در خروجی مشاهده کنید. ما میخواهیم ۳ مورد در فیلد کشویی به نمایش در بیاید.

مثال:

<select>
<option>گزینه اول</option>
<option>گزینه دوم</option>
<option>گزینه سوم</option>
</select>

خروجی در مرورگر:
html-select

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

بصورت زیر نوشته می شود:

<select>
<option>گزینه اول</option>
<option>گزینه دوم</option>
<option selected>گزینه سوم</option>
</select>

خروجی در مرورگر:

html-selected

برچسب دوطرفه textarea

در فرم های تماس حتما دیده اید که قسمتی برای درج متن وجود داشته و با دیگر ورودی ها متفاوت است. برای ایجاد چنین قسمتی از برچسب textarea استفاده می شود.

بصورت زیر نوشته می شود:

<textarea></textarea>

خروجی در مرورگر:

html-textarea

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

ویژگی cols و rows

برای اینکه بتوانیم بر روی اندازه ناحیه متنی مدیریت بهتری داشته باشیم می توانیم از دو ویژگی برای تغییر سطر و ستون استفاده کنیم. این دو ویژگی با نام های cols و rows در دسترس بوده و با قرار دادن آنها در برچسب textarea این امکان برای تغییر اندازه فراهم خواهد شد.

بصورت زیر نوشته می شود:

<textarea cols="50" rows="20"></textarea>

rows مشخص کننده تعداد سطرها و cols مشخص کننده تعداد ستون هاست.

ویژگی maxlength

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

بصورت زیر نوشته می شود:

<textarea maxlength="50"></textarea>

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

در ادامه آموزش طراحی وب با جلسه پنجم در خدمت شما دوستان خواهیم بود. قبل از هر چیز لطفا جلسات قبلی را مطالعه فرمایید.

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

فرم (Form)

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

<form></form>

برچسب یکطرفه input

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

<input>

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

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

بصورت زیر نوشته می شود:

<input type="مقدار">

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

ورودی متنی در فرم

برای ایجاد یک فیلد یا همان ورودی متن باید بصورت زیر عمل کرده و مقدار درون type را با text پر کنید.

<input type="text">

خروجی در مرورگر:

html-form-text

همچنین برای دیگر موارد نیز با تغییر مقدار در ویژگی type می توان متناسب با آن در خروجی الگو مورد نظر خود را پیاده کرد.

دکمه در فرم

برای ایجاد یک دکمه باید بصورت زیر عمل کرده و مقدار درون type را با button پر کنید. همچنین برای این دکمه باید یک نام نیز قرار داد تا در خروجی نمایش داده شود. برای این کار با قرار دادن ویژگی value و دادن مقدار(نام مورد نظر برای دکمه) به آن، دکمه در خروجی حاوی یک نام خواهد بود.

<input type="button" value="نام دکمه">

خروجی در مرورگر:

html-form-button

ورودی گذرواژه در فرم

برای ایجاد یک فیلد یا ورودی گذرواژه (پسورد) با تغییر مقدار در ویژگی type به password می توان این ورودی را ایجاد نمود. تفاوت این ورودی با ورودی متن در نوع نمایش کاراکترهای درونی آنها می باشد. در تصویر خروجی خواهید دید که مقادیری که در ورودی پسورد قرار می گیرد به صورت دایره ای نشان داده می شود.

<input type="password" >

خروجی در مرورگر:

html-form-pass

ورودی ایمیل در فرم

برای ایجاد یک فیلد یا ورودی ایمیل با تغییر مقدار در ویژگی type به email می توان این ورودی را ایجاد نمود.

<input type="email">

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

خروجی در مرورگر:

html-form-email

دکمه ارسال در فرم

برای ایجاد یک دکمه ارسال باید بصورت زیر عمل کرده و مقدار درون type را با submit پر کنید. در اینجا نیز با قرار دادن ویژگی value می توان برای دکمه ارسال نیز نام تعیین کنید.

<input type="submit" value="دکمه ارسال" >

خروجی در مرورگر:

html-form-submit

چک‌باکس در فرم

برای ایجاد یک چک‌باکس باید بصورت زیر عمل کرده و مقدار درون type را با checkbox پر کنید. چک‌باکس‌ها بیشتر برای انتخاب چند مورد در یک فرم مورد استفاده قرار می گیرند.

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

خروجی در مرورگر:

html-form-checkbox

نکته: برای اینکه بخواهید بصورت پیشفرض چک‌باکس شما تیک خورده باشد، کافیست ویژگی checked را به برچسب خود اضافه کنید.

بصورت زیر:

<input type="checkbox" checked>

دکمه رادیو در فرم

برای قرار دادن دکمه رادیویی (که بصورت گرد است) باید بصورت زیر عمل کرده و مقدار درون type را با radio پر کنید. بر خلاف checkbox دکمه رادیویی برای انتخاب یک گزینه از میان چند گزینه مورد استفاده قرار می گیرد.

<input type="radio">
<input type="radio">
<input type="radio">

خروجی در مرورگر:

html-form-radio

نکته: از ویژگی checked در دکمه رادیویی نیز می توان استفاده کرد.

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

برای اینکه بتوان فایلی را از رایانه خود انتخاب کنیم؛ برچسب فرم باز هم به کمک خواهد آمد. تنها کافیست مقدار درون type را با file پر کنید.

<input type="file">

خروجی در مرورگر:

html-form-file

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

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