هاست لینوکس

آخرین بسته‌ی MyBB: نسخه‌ی 1.8.27 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 (۱۳۹۰/۱۲/۱۱، ۱۰:۳۷:۳۴ صبح) ، khp (۱۳۹۰/۱۲/۱۱، ۱۱:۵۲:۱۳ صبح) ، mohamad m (۱۳۹۰/۱۲/۱۳، ۰۲:۴۲:۲۹ صبح) ، dokaven (۱۳۹۰/۱۲/۱۳، ۱۴:۳۰:۳۲ عصر) ، masoudiv (۱۳۹۰/۱۲/۱۴، ۱۲:۴۷:۳۳ عصر) ، S.Nasiri (۱۳۹۰/۱۲/۱۶، ۰۷:۴۶:۲۹ صبح) ، mahdionline (۱۳۹۰/۱۲/۱۷، ۱۳:۲۹:۳۳ عصر) ، Behr☺uz (۱۳۹۰/۱۲/۱۷، ۱۳:۲۹:۴۵ عصر) ، Cancer9003 (۱۳۹۰/۱۲/۱۷، ۱۳:۳۹:۵۰ عصر) ، FunSeT (۱۳۹۰/۱۲/۱۷، ۱۳:۴۳:۰۰ عصر) ، geo (۱۳۹۰/۱۲/۱۷، ۱۴:۱۰:۰۱ عصر) ، Mt edition (۱۳۹۰/۱۲/۱۸، ۰۱:۳۵:۱۵ صبح) ، esfhamed (۱۳۹۰/۱۲/۱۹، ۰۰:۵۹:۴۲ صبح) ، ehsanfotoo (۱۳۹۰/۱۲/۲۱، ۲۲:۲۸:۲۰ عصر) ، Saeed_T (۱۳۹۱/۱/۷، ۱۰:۳۱:۱۶ صبح) ، motorola30 (۱۳۹۴/۶/۷، ۱۸:۰۹:۱۵ عصر)
#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 (۱۳۹۰/۱۲/۱۷، ۱۳:۲۹:۲۴ عصر) ، Behr☺uz (۱۳۹۰/۱۲/۱۷، ۱۳:۲۹:۳۶ عصر) ، Cancer9003 (۱۳۹۰/۱۲/۱۷، ۱۳:۳۹:۳۸ عصر) ، FunSeT (۱۳۹۰/۱۲/۱۷، ۱۳:۴۲:۵۱ عصر) ، geo (۱۳۹۰/۱۲/۱۷، ۱۴:۱۰:۱۵ عصر) ، Mt edition (۱۳۹۰/۱۲/۱۸، ۰۱:۳۵:۱۱ صبح) ، esfhamed (۱۳۹۰/۱۲/۱۹، ۰۱:۰۴:۲۱ صبح) ، ehsanfotoo (۱۳۹۰/۱۲/۲۱، ۲۲:۲۸:۲۴ عصر) ، S.Nasiri (۱۳۹۰/۱۲/۲۳، ۰۵:۱۴:۱۶ صبح) ، محمد محمدی (۱۳۹۳/۱۱/۲۹، ۱۸:۱۹:۲۹ عصر) ، motorola30 (۱۳۹۴/۶/۷، ۱۸:۰۹:۵۶ عصر)
#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 (۱۳۹۰/۱۲/۱۷، ۱۸:۳۶:۰۵ عصر) ، FunSeT (۱۳۹۰/۱۲/۱۷، ۱۸:۵۸:۵۱ عصر) ، Mt edition (۱۳۹۰/۱۲/۱۸، ۰۱:۳۵:۰۴ صبح) ، Cancer9003 (۱۳۹۰/۱۲/۱۸، ۰۵:۲۴:۲۴ صبح) ، esfhamed (۱۳۹۰/۱۲/۱۹، ۰۱:۰۷:۱۷ صبح) ، ehsanfotoo (۱۳۹۰/۱۲/۲۱، ۲۲:۲۸:۲۹ عصر) ، S.Nasiri (۱۳۹۰/۱۲/۲۳، ۰۵:۱۴:۲۴ صبح) ، geo (۱۳۹۰/۱۲/۲۶، ۱۲:۵۰:۰۴ عصر) ، motorola30 (۱۳۹۴/۶/۷، ۱۸:۱۰:۰۵ عصر)
#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 (۱۳۹۱/۱/۲۲، ۲۳:۰۳:۲۸ عصر) ، geo (۱۳۹۱/۱/۲۳، ۰۰:۴۳:۴۸ صبح) ، FunSeT (۱۳۹۱/۱/۲۳، ۰۱:۴۸:۳۰ صبح) ، عبدالرحمن (۱۳۹۱/۱/۲۳، ۰۲:۱۷:۱۹ صبح) ، HOssE!N-B (۱۳۹۳/۱۲/۳، ۱۶:۵۴:۱۰ عصر) ، motorola30 (۱۳۹۴/۶/۷، ۱۸:۱۰:۱۶ عصر)
#16
با تشکر از پارس عزیز
این هم لینکی برای اینکه دوستان کدهایی رو که نوشتن مستقیم تست کنند (اگه این ارسال اسپم محسوب میشه پاکش کنید) Big Grin

http://www.neopersia.org/online_html_editor/
پاسخ
 سپاس شده توسطDoodoo (۱۳۹۱/۱/۲۳، ۰۵:۴۵:۴۰ صبح) ، Pars (۱۳۹۱/۱/۲۵، ۱۵:۰۵:۵۴ عصر) ، محمد محمدی (۱۳۹۳/۱۲/۷، ۰۲:۴۲:۵۱ صبح)
#17
ممنون - لطف میکنید در ادامه به آموزش html 5 بپردازید.
مخصوصا روی canvas ها
پاسخ
 سپاس شده توسطشماره مجازی (۱۴۰۱/۸/۲۶، ۰۱:۵۶:۴۸ صبح) ، گراف مسنجر (۱۴۰۱/۱۰/۳، ۰۴:۱۸:۳۲ صبح) ، چارتر ۴۲۴ (۱۴۰۲/۹/۱۲، ۱۵:۲۲:۰۵ عصر)


موضوع‌های مشابه…
موضوع نویسنده پاسخ بازدید آخرین ارسال
  آموزش پنهان کردن تگ html بدون ضرر برای SEO ramindiyar24 3 3,624 ۱۳۹۸/۸/۸، ۱۱:۲۲:۳۴ صبح
آخرین ارسال: webkima
  ظاهر بندی HTML sahar708 0 1,856 ۱۳۹۴/۱۰/۷، ۱۰:۳۴:۲۲ صبح
آخرین ارسال: sahar708
  خصوصيات استاندارد تگ های HTML : sahar708 0 1,929 ۱۳۹۴/۶/۲۱، ۱۳:۴۰:۰۲ عصر
آخرین ارسال: sahar708
  {توجه} دوره های آموزش html Mohammad-Mo 12 8,843 ۱۳۹۴/۶/۸، ۱۵:۳۰:۱۲ عصر
آخرین ارسال: R. Najafi
  تگ های HTML heidari 0 1,872 ۱۳۹۴/۵/۱۸، ۱۵:۴۵:۴۹ عصر
آخرین ارسال: heidari
  تگ های ساختارBody Head Html saharrahin 0 1,556 ۱۳۹۴/۴/۱۵، ۱۱:۱۲:۲۶ صبح
آخرین ارسال: saharrahin
  کنترل های ذاتی HTML heidari 0 1,245 ۱۳۹۴/۴/۱۰، ۱۱:۵۵:۳۶ صبح
آخرین ارسال: heidari
  رويدادهای عناصر فرم در HTML heidari 0 1,280 ۱۳۹۴/۴/۸، ۱۳:۱۱:۲۲ عصر
آخرین ارسال: heidari
  یک فایل HTML چیست؟ heidari 1 1,768 ۱۳۹۴/۳/۳۱، ۱۴:۵۶:۱۰ عصر
آخرین ارسال: saharrahin
  آموزش پایه HTML alibaba 1 2,064 ۱۳۹۴/۱/۲۳، ۱۶:۵۳:۴۹ عصر
آخرین ارسال: bagheri.mj

پرش به انجمن:


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