پویاسازان
هاست لینوکس هاست لینوکس

آخرین بسته‌ی MyBB: نسخه‌ی 1.8.12 MyBB منتشر شد



امتیاز موضوع:
  • 2 رأی - میانگین امتیازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
[آموزش html] همگام با مای بی بی ایران برای فراگیری html
#11
لیست مرتب

از <ol> برای ایجاد لیست مرتب استفاده می شود. و گزینه های آن مانند قبل از <li> استفاده می شود.

تفاوت لیست مرتب با نامرتب در این است که در لیست مرتب گزینه ها با عدد یا حروف علامت گذاری می شود.

نمونه زیر را در فایل تمرین خود قرار دهید خواهید دید که با عدد گزینه ها نمایش داده می شوند:

کد:
<ol>
<li>MyBB</li>
<li>Persian</li>
<li>Support</li>
</ol>


Type
برای تغییر نوع مرتب کردن (عدد یا حرف) از صفت Type استفاده می شود که دارای مقادیر زیر است:
کد:
<ol type=“I”>
<ol type=“i”>
<ol type=“A”>
<ol type=“1”>
<ol type=“a”>
I برای اعداد رومی بزرگ
i برای اعداد رومی کوچک
A برای حروف انگلیسی بزرگ
a برای حروف انگلیسی کوچک
1 استفاده از اعداد (که خود پیشفرض می باشد و نیازی به درج آن نیست)

صفت دوم
start
برای تعیین اینکه لیست شما از چه عدد یا حرفی آغاز شود. (توجه تنها باید یک عدد برای مقدار start وارد کنید. برای نمونه اگر می خواهید از حرف f آغاز شود باید عدد 6 را وارد کنید.)

کد:
<ol type="A" start="6">
<li>MyBB</li>
<li>Persian</li>
<li>Support</li>
</ol>


نکته: اگر بخواهیم در میانه لیست تغییر ایجاد کنیم چه کنیم؟ برای نمونه بخواهیم یک لیستی با 10 گزینه را نمایش دهیم که 5 گزینه نخست با عدد 1 تا 5 و پنج گزینه بعدی با عدد 10 تا 15 نمایش داده شوند.

برای این کار از صفت value استفاده می شود که مقدار آن یک عدد می باشد.
[تصویر:  photos.png] نمونه:
کد:
<ol>
<li>MyBB</li>
<li>Iran</li>
<li>Persian</li>
<li value="12">Support</li>
<li>Pars</li>
<li>Admin</li>
</ol>



مردان بزرگ اراده می کنند و مردان کوچک آرزو
[تصویر:  1348752239.gif]




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

پاسخ
 سپاس شده توسطAR@KST@R (1390/12/11، 09:37:34 صبح) ، khp (1390/12/11، 10:52:13 صبح) ، mohamad m (1390/12/13، 01:42:29 صبح) ، dokaven (1390/12/13، 13:30:32 عصر) ، masoudiv (1390/12/14، 11:47:33 صبح) ، S.Nasiri (1390/12/16، 06:46:29 صبح) ، mahdionline (1390/12/17، 12:29:33 عصر) ، Behr☺uz (1390/12/17، 12:29:45 عصر) ، Cancer9003 (1390/12/17، 12:39:50 عصر) ، FunSeT (1390/12/17، 12:43:00 عصر) ، geo (1390/12/17، 13:10:01 عصر) ، Mt edition (1390/12/18، 00:35:15 صبح) ، esfhamed (1390/12/18، 23:59:42 عصر) ، ehsanfotoo (1390/12/21، 21:28:20 عصر) ، Saeed_T (1391/1/7، 09:31:16 صبح) ، motorola30 (1394/6/7، 17:09:15 عصر)
#12
جدول

تگ <table>
برای ایجاد جدول، در ابتدا و انتها از این تگ استفاده می شود.

تگ <tr>
یک ردیف افقی ایجاد می کند و در داخل تگ <table> قرار دارد. هر جدول همیشه دارای دست کم یک ردیف می باشد.

تگ <td>
ایجاد سلول در هر ردیف. برای سلول هایی که شامل داده های جدولی ساده (table data) هستند

تگ <th>
ایجاد سلول در هر ردیف. برای سلول هایی که شامل عنوان جدولی (table heading) هستند استفاده می شود.

صفات تگ <table>
border : کلفتی حاشیه (کادر) جدول را تعیین می کند.
bordercolordark : رنگ تیره border را مشخص می کند.
bordercolorlight : رنگ روشن border را مشخص می کند.
bordercolor : رنگ اصلی border را مشخص می کند و آن را ار حالت دو رنگی خارج می کند.
dir : جهت گیری متن داخل جدول. دارای دو مقدار ltr یا rtl
cellpadding : عدد صحیح بر اساس px ، برای فاصله بین متن داخل هر سلول با دیواره آن سلول (بر اساس درصد هم بیان می شود)
cellspacing : عدد صحیح بر اساس px ، برای فاصله بین دو سلول (بر اساس درصد هم بیان می شود)
align : محل قرارگیری جدول در صفحه را تعیین می کند و دارای 3 مقدار right ، left ، center می باشد.
width : عرض جدول بر اساس px یا درصد
height : ارتفاع جدول بر اساس px یا درصد
bgcolor : رنگ پس زمینه جدول
summary : توضیحاتی در مورد جدول
background : تصویری به عنوان پشت زمینه (در صورتی که کوچکتر ار جدول باشد تکرار می شود)
frame : مشخص می کند که کدام یک از border های 4 طرف جدول نمایش داده شوند. دارای مقدار های زیر است:
- Void : هیچ کدام نمایش داده نشوند
- hsides : فقط افقی ها نمایش داده شوند.
- vsides : فقط عمودی ها نمایش داده شوند.
- rhs : فقط سمت راستی نمایش داده شود.
- lhs : فقط سمت چپ نمایش داده شود.
- above : فقط بالایی نمایش داده شود.
- below : فقط پایینی نمایش داده شود.
- border یا box : همه border ها نمایش داده شوند.
rules : مشخص می کند که کدام یک از حاشیه های داخلی جدول نمایش داده شوند.
- none : هیچ کدام از border ها نمایش داده نشوند.
- all : همه نمایش داده شوند.
- groups : حشایه گروهی از ردیف ها یا گروهی از ستون ها نمایش داده شوند.
- cols : فقط border ستون ها نمایش داده شود.
- rows : فقط حاشیه ردیف ها نمایش داده شود.



تمرین:
کد:
<table>
<tr> <td>1</td> <td>2</td> <td>3</td> </tr>
<tr> <td>4</td> <td>5</td> <td>6</td> </tr>
<tr> <td>7</td> <td>8</td> <td>9</td> </tr>
</table>




مردان بزرگ اراده می کنند و مردان کوچک آرزو
[تصویر:  1348752239.gif]




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

پاسخ
 سپاس شده توسطmahdionline (1390/12/17، 12:29:24 عصر) ، Behr☺uz (1390/12/17، 12:29:36 عصر) ، Cancer9003 (1390/12/17، 12:39:38 عصر) ، FunSeT (1390/12/17، 12:42:51 عصر) ، geo (1390/12/17، 13:10:15 عصر) ، Mt edition (1390/12/18، 00:35:11 صبح) ، esfhamed (1390/12/19، 00:04:21 صبح) ، ehsanfotoo (1390/12/21، 21:28:24 عصر) ، S.Nasiri (1390/12/23، 04:14:16 صبح) ، محمد محمدی (1393/11/29، 17:19:29 عصر) ، motorola30 (1394/6/7، 17:09:56 عصر)
#13
صفت های <tr>

align : تعیین چینش متن در سلول های آن ردیف. دارای یکی از مقدار های center و left و right و justify
bgcolor : رنگ پس زمینه ردیف
valign : تعیین تراز عمودی متن در سلول های یک ردیف و دارای مقدار های زیر:
- top : قرارگیری در بالای سلول
- middle قرارگیری در میانه
- bottom قرار گیری در پایین
- baseline : محتوای سلول را با اولین خطی که محتوای سلول ها از آن آغاز می شود همتراز می کند.

صفت های <th> و <td>
abbr : مخففی از محتوای سول
نمونه
کد:
<td abbr='BMI'>Bank Melli Iran</td>
align : تعیین چینش متن در سلول
valign : تعیین تراز عمودی متن در سلول
bgcolor : رنگ پس زمینه سلول
width : عرض سلول
height : طول سلول
nowrap : از شکسته شدن متن داخل سلول جلوگیری می کند (متن در یک خط ادامه پیدا کند)
colspan : برای یکی کردن سلول ها در یک عرض. عددی صحیح را به عنوان مقدار می پذیر که بیانگر تعداد ستون یکی شده می باشد.
[تصویر:  photos.png] نمونه:
کد:
<table border="2">
<tr>
<th colspan="3">Work Contact Points</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
rowspan : مانند قبلی اما برای یکی کردن چند سلول به طور عمودی (ستونی)


تگ <caption>
برای ایجاد عنوان برای جدول استفاده می شود. بعد از تگ آغازین <table> و قبل از شروع تگ نخستین ردیف استفاده می شود. به صورت پیش فرض مرورگر ها متن داخل این تگ را در بالا و وسط جدول نمایش می دهند. این تگ از صفت align پشتیبانی می کند.


تمرین:

کد:
<table border="1">
<caption>MyBB</caption>
<tr>
<td colspan="2">1</td>
<td>3</td>
<td rowspan="3">یکی شده به صورت عمودی</td>
</tr>
<tr>
<td rowspan="2">4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>


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



مردان بزرگ اراده می کنند و مردان کوچک آرزو
[تصویر:  1348752239.gif]




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

پاسخ
 سپاس شده توسطartin (1390/12/17، 17:36:05 عصر) ، FunSeT (1390/12/17، 17:58:51 عصر) ، Mt edition (1390/12/18، 00:35:04 صبح) ، Cancer9003 (1390/12/18، 04:24:24 صبح) ، esfhamed (1390/12/19، 00:07:17 صبح) ، ehsanfotoo (1390/12/21، 21:28:29 عصر) ، S.Nasiri (1390/12/23، 04:14:24 صبح) ، geo (1390/12/26، 11:50:04 صبح) ، motorola30 (1394/6/7، 17:10:05 عصر)
آگهی
طراحی سایت آموزش طراح سایت
#14
بعدا در مورد جدول توضحیات بیشتری داده می شود


مردان بزرگ اراده می کنند و مردان کوچک آرزو
[تصویر:  1348752239.gif]




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

پاسخ
#15
ایجاد frame

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

نکته: در ساختار اینگونه صفحه ها به جای <body> از <frameset> استفاده می شود.

ساختار کلی:
کد:
<frameset>

<frame />

</frameset>

یک نمونه کامل تر:
کد:
<html>
<head>
. . . . . . . . . . . . .
</head>
<frameset cols='50%,50%'>
<frame src='http://www.google.com' name='google_frame' />
<frame src='http://www.yahoo.com' name='yahoo_frame' />
</frameset>
</html>
ویژگی های <frameset>
cols : برای تعیین عرض هر فریم به درصد یا پیکسل برای [تصویر:  photos.png] نمونه:
کد:
<frameset cols="10%, 30%, *">
مقدار 10% برای نخستین ستون، 30% برای دومی و علامت * به معنای باقیمانده که در اینجا 60% است برای ستون سوم است.
rows : مانند clos اما برای تعیین ارتفاع
border : برای تعیین کادر
bordercolor : رنگ کادر
frameborder : نمایش یا عدم نمایش کادر اطراف فریم را مشخص می کند و دارای دو مقدار است:
yes یا 1 یا true برای نمایش
no یا 0 یا false برای عدم نمایش
framespacing : برای فضای دلخواه بین فریم ها


ویژگی های <frame>
برای مشخص کردن صفحه ای که در فریم نمایش داده می شود. جزو تگ های تهی می باشد.
نکته: تگ <frame> حتما میان تگ آغازی و پایانی <frameset> قرار می گیرد.
نکته: تعداد <frame> باید برابر با تعداد اندازه های تعریف شده در rows یا cols در تگ frameset باشد.
name : نام فریم
longdesc : آدرسی که دارای توضیح کاملی از فریم است.
src : آدرس صفحه ای که در فریم نمایش داده می شود.
noresize : جلوگیری از تغییر اندازه فریم توسط کاربر
scrolling : تعیین اسکرول هنگامی که عرض محتویات فریم با آن همخوانی ندارد و دارای 3 مقدار است:
auto : نمایش خودکار اسکرول در صورت لزوم
yes : همواره اسکرول را نمایش می دهد حتی اگر عرض فریم با محتویات همخوانی داشته باشد
no : هرگز نمایش داده نمی شود.
frameborder : در بالا توضیح داده شد.
marginwidth : فاصله محتویات داخل فریم از چپ و راست دیواره آن فریم براساس پیکسل یا درصد.
marginheight : فاصله مختویات داخل فریم از بالا و پایین دیواره آن فریم براساس پیکسل یا درصد.


تگ <noframes>
برخی از مرورگر ها از تگ های فریم پشتیبانی نمی کنند و در نتیجه محتویات آن را نمایش نمی دهند. شما می توانید از تگ برای نمایش یک کد جایگزین در اینگونه مرورگر ها استفاده کنید.

تگ <iframe> :
از دو واژه inline Frame
برای قرار دادن یک صفحه در داخل صفحه ای دیگر
این تگ از تمام خصوصیات تگ <frame> به جز noresize پشتیبانی می کند.
برای تعیین عرض و ارتفاع این فریم از height و width استفاده می شود.

نمونه برای iframe
کد:
<iframe src=“frame.html” width=“120” height=“120” > </iframe>

نمونه کلی از فریم ها:
کد:
<html>
<head>
<title>فریم</title>
</head>

<frameset>
<frame src=" " />
</frameset>

<noframes>
<body>
<h1 style="text-align: center"> مرورگر شما از فریم پشتیبانی نمی کند</h1>
</body>
</noframes>

</html>


مردان بزرگ اراده می کنند و مردان کوچک آرزو
[تصویر:  1348752239.gif]




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

پاسخ
 سپاس شده توسطDoodoo (1391/1/22، 22:03:28 عصر) ، geo (1391/1/22، 23:43:48 عصر) ، FunSeT (1391/1/23، 00:48:30 صبح) ، عبدالرحمن (1391/1/23، 01:17:19 صبح) ، HOssE!N-B (1393/12/3، 15:54:10 عصر) ، motorola30 (1394/6/7، 17:10:16 عصر)
#16
با تشکر از پارس عزیز
این هم لینکی برای اینکه دوستان کدهایی رو که نوشتن مستقیم تست کنند (اگه این ارسال اسپم محسوب میشه پاکش کنید) Big Grin

http://www.neopersia.org/online_html_editor/
پاسخ
 سپاس شده توسطDoodoo (1391/1/23، 04:45:40 صبح) ، Pars (1391/1/25، 14:05:54 عصر) ، محمد محمدی (1393/12/7، 01:42:51 صبح)
#17
ممنون - لطف میکنید در ادامه به آموزش html 5 بپردازید.
مخصوصا روی canvas ها
پاسخ
آگهی
طراحی سایت آموزش طراح سایت


موضوعات مرتبط با این موضوع...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آموزش پنهان کردن تگ html بدون ضرر برای SEO ramindiyar24 1 895 1396/2/2، 10:33:40 صبح
آخرین ارسال: supportweb
  ظاهر بندی HTML sahar708 0 431 1394/10/7، 09:34:22 صبح
آخرین ارسال: sahar708
  خصوصیات استاندارد تگ های HTML : sahar708 0 539 1394/6/21، 12:40:02 عصر
آخرین ارسال: sahar708
  {توجه} دوره های آموزش html Mohammad-Mo 12 4,148 1394/6/8، 14:30:12 عصر
آخرین ارسال: R. Najafi
  تگ های HTML heidari 0 549 1394/5/18، 14:45:49 عصر
آخرین ارسال: heidari
  تگ های ساختارBody Head Html saharrahin 0 423 1394/4/15، 10:12:26 صبح
آخرین ارسال: saharrahin
  کنترل های ذاتی HTML heidari 0 400 1394/4/10، 10:55:36 صبح
آخرین ارسال: heidari
  رویدادهای عناصر فرم در HTML heidari 0 354 1394/4/8، 12:11:22 عصر
آخرین ارسال: heidari
  یک فایل HTML چیست؟ heidari 1 617 1394/3/31، 13:56:10 عصر
آخرین ارسال: saharrahin
  آموزش پایه HTML alibaba 1 827 1394/1/23، 15:53:49 عصر
آخرین ارسال: bagheri.mj

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان