[آموزش] آموزش HTML به زبانی ساده

در این بخش مقالات مربوط به برنماه نویسی html ,css و... قرار میگیرد.

مدیر انجمن: تیم پشتیبانی

آواتار کاربر
m.sevrus.m
پست: 68
تاریخ عضویت: چهارشنبه ۲۵ مرداد ۱۳۹۱, ۲:۰۸ ب.ظ
سن: 19
شغل: برنامه نویس- طراح وب
اینترنت: ADSL 2 Mbps
جنسیت: آقا
تشکر کرده: 40 دفعه
تشکر شده: 33 دفعه
تماس:

<p>سلام و درود خدمت شما عزیزان و دوستان گرامی!</p>
<p>امیدوارم که شاد وسرحال باشید!</p>
<p>در این تاپیک قصد داریم تا به شما عزیزان یکی از کاربردی ترین&nbsp; زبانهای برنامه نویسی تحت وب (به قولی میشه گفت مامان همشونه!! <img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /> )، زبان نشانه گذاری فرامتنی! lمعروف به HTML&nbsp; رو یاد بدیم.<br /><br />زبان نشانه گذاری فرا متنی =&nbsp; Hyper Text Markup Language = HTML</p>
<p>اولی ها! دومی ها! سومی ها! کنکوری ها (شما نمیخواید فعلا برید درستون رو بخونید!!!!) اگر میخواید یاد بگیرید! پست اول رو با علاقه بخونید!!!!</p>
<p><br />اولین قدم!&nbsp; :<br />برای یاد گیری ، در اولین قدم شما باید نرم افزارNotePad++ رو دانلود کنید که این برنامه تا آخر راه برنامه نویسی به شما کمک خواهد کرد! برنامه بسیار فوق العاده با امکانات بصورت خلاصه :<br />1- ذخیره به انواع برنامه نویسی در ویندوز<br />2- ذخیره به انواع برنامه نویسی تحت وب</p>
<p style="text-align: right;">(به جان خودم امکانتش بیشتره ها حسش نیست بنویسم اما! <img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /> )<br /><br />http://www.notepad-plus.sourceforge.net ... oad.php</p>
<p style="text-align: right;">&nbsp;<span style="font-size: 10px;"> (کپی رایت؟؟؟ &nbsp;<img class="reimg" src="images/smilies/icon_e_surprised.gif" alt="سوپرایز" />&nbsp; کی !؟&nbsp;<img class="reimg" src="images/smilies/icon_e_surprised.gif" alt="سوپرایز" />&nbsp; من! نـــــــــــــــــــــه!!! <img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /> )</span></p>
<h2 style="text-align: center;"><br /><br /><span style="font-family: times new roman,times; font-size: 24px; color: #0080ff;">قسمت اول : مقدمه بر زبان فصیح HTML&nbsp;</span></h2>
<p style="text-align: center;"><span style="font-family: times new roman,times; font-size: 12px; color: #0080ff;">&nbsp;</span></p>
<p style="text-align: center;"><span style="font-family: times new roman,times; font-size: 24px; color: #0080ff;"><span style="font-size: 14px;"><span style="font-size: 12px;">(روایت است این مقدمه را خود برادر HTML در آخرین سفر خود به php-bb نوشته اند و ثواب فراوان بر آن کسی بود که ورا خواند نیازش برطرف شد!</span> <img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /> )</span><br /></span></p>
<p><br /><br /><br /><br /><br />خوبه دیگه! بسه!&nbsp; شروع کنیم دیگه! تویه notepad(++) یه پروژه جدید ایجاد کنید و توش کد زیر رو بنویسید:( نترسید باو ما از اوناش نیستیم فقط شیوه شیوه خاصیه!!!!!!&nbsp;<img class="reimg" src="images/smilies/icon_e_geek.gif" alt="عجیب" /> )</p>
<p><span style="background-color: #80ffff;">&nbsp;دوستان مسیر نوشتن از چپ به راسته ، اگر نشانه ها جا به جا شدن نگران نباشید! در ضمن برای گستردگی صفحه کد و دیدن بهتر و کامل تر expand رو بزنید!</span> </p>
<p>&nbsp;</p>
<p style="text-align: left;"><br />[syntax=html]&lsaquo;html&rsaquo;<br />&lsaquo;head&rsaquo;<br />&nbsp;&nbsp;&nbsp;&nbsp; &lsaquo;title&rsaquo;In Onvane Safhast&lsaquo;/title&rsaquo;<br />&lsaquo;/head&rsaquo;<br />&lsaquo;body&rsaquo;<br />&nbsp;&nbsp;&nbsp;&nbsp; In Ham Matne Safheye Avvle!<br />&nbsp;&nbsp;&nbsp;&nbsp; Vay Khoda Daram Html Yad Migiram....<br />&lsaquo;/body&rsaquo;<br />&lsaquo;/html&rsaquo;[/syntax]<br /><br /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><br />حالا اونو با یه نام دلخواه ذخیره کنید مثلا من به نام safeheye1.html ذخیره اش کردم! مثلا می تونید با اسم معلم اول دبستانتون ذخیرش کنید! دلتنگیه بالاخره دیگه!!!! اما جون من! هرچی نامگذاریش کردید فقط فرمتش html , htm باشه!!! اوکی؟؟؟ افتااد؟؟؟&nbsp;<img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" />&nbsp; حالا باید نتیجه این تلاش طاقت فراسامون رو ببینیم فقط کافیه که روی فایلمون (منظورم safheye1.html) دابل کلیک کنیم! اگر نتوستید صفحه رو باز کنید برید مرورگر رو باز کنید و از منوی File گزینه Open یا Open File رو انتخاب کنید و بعد هم فایلی که ایجاد کردید رو انتخاب و باز کنید! اگر دیدید سخته اینجور باز کردن یدونه open with توپ بزنید و با مرورگری که دوست دارید بازش کنید! حالا اگر همه چی خوب پیش رفته باشه باید یه صفحه مثل این صفحه ببینید!<br />ا کدوم صفحه!!؟؟؟ خو همونی که ایجاد کردید دیگههههههه!! ا! <br /><br />خب اگه بچه خوبی بوده باشی و&nbsp; تا اینجا رو با دقت خونده باشید به نکات زیر حتما رسیدید:<br /><br /><span style="font-size: 14px; color: #ff0000;">1. هر صفحه html از یک فایل متنی تشکیل میشه که با پسوند html یا htm ذخیره میشه!</span><br /><span style="font-size: 14px; color: #ff0000;">2. دستورات html ساختاری به صورت <ستور/>......<دستور> دارن!</span><br /><span style="font-size: 14px; color: #ff0000;">3. ساختار هر فایل html&nbsp; به صورت زیر هست که از دو قسمت اصلی تشکیل میشه: head&nbsp; که توش عنوان title و یکسری اطلاعات دیگه قرار میگیره و body که توش عناصر صفحه قرار میگیرن!</span></p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">[syntax=html]</p>
<p style="text-align: left;"><br />&lsaquo;html&rsaquo;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lsaquo;head&rsaquo;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lsaquo;/head&rsaquo;&nbsp;&nbsp;&nbsp; <br />&nbsp; &lsaquo;body&rsaquo;<br />&nbsp;&nbsp;&nbsp;&nbsp;&lsaquo;/body&rsaquo;</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">[/syntax]</p>
<p style="text-align: left;">&nbsp;</p>
<p style="text-align: left;">&rsaquo;</p>
<p style="text-align: right;"><br /><span style="color: #ff0000; font-size: 14px;">4. دستورات html خودشون متن هستند و برای اجرا باید به کامپیوتر کاربر منتقل بشن. میتونید این موضوع رو امتحان کنید فقط کافیه تویه همین صفحه که هستند راست کلیک کنید و بعد گزینه View Source یا View Page Source رو انتخاب کنید. واسه همینه که میگن html یک زبان سمت کاربر هستش!</span><br /><span style="color: #ff0000; font-size: 14px;">5. توانایی متون html از متون کاغذی خیلی بیشتره به عنوان مثال دیدید که با کلیک رویه کلمه میشه یه صفحه جدید باز کرد!</span></p>
<p style="text-align: right;"><span style="color: #ff0000; font-size: 14px;">&nbsp;</span></p>
<p style="text-align: right;"><span style="color: #ff0000; font-size: 14px;"><span style="color: #000000;">خب! این مقدمه ای بود کوچولو بر یادگیری HTML ! الان دیگه شما یه پا برنامه نویسید دیگه! <img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /> </span><br /></span></p>
<p style="text-align: right;"><span style="color: #ff0000; font-size: 14px;"><span style="color: #000000;">خب! امیدوارم که راضی بوده باشید ، در ادامه فصل بندی های بعدی رو خواهم گذاشت!<br /></span></span></p>
<p style="text-align: right;"><span style="color: #ff0000; font-size: 14px;"><span style="color: #000000;">موفق باشید.<br /></span></span></p>
<p style="text-align: right;"><span style="color: #ff0000; font-size: 14px;"><span style="color: #000000;">میلـاد<br /></span></span></p>
آواتار کاربر
m.sevrus.m
پست: 68
تاریخ عضویت: چهارشنبه ۲۵ مرداد ۱۳۹۱, ۲:۰۸ ب.ظ
سن: 19
شغل: برنامه نویس- طراح وب
اینترنت: ADSL 2 Mbps
جنسیت: آقا
تشکر کرده: 40 دفعه
تشکر شده: 33 دفعه
تماس:

<p>سلام دوباره خدمت شما دوستان عزیز!</p>
<p>امیدوارم که از قسمت اول یادگیری html راضی بوده باشید و الان هم آماده و بعد از تمرینات کششی اومده باشید! <img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" />&nbsp; آخه هم مبحث طولانی تر شده و هم عمق مبحث بیشتر! تازه این راه و ریشه اصلی و ورود به یادگیری اولیه html هستش ، خلاصه این مطلب خیلی مهمه غافل نشید ازش هاااااا! آ باریکلا! <img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /></p>
<p>خب اینم از قسمت دوم!</p>
<p><span style="color: #000000; background-color: #ff0080;">یه نکته رو هم بگم که هرجا مثال زدم برای دیدن بهترش از گزینه&nbsp; expand استفاده کنید! شماره خط&nbsp; ها رو کپی نکنیداااااا! اول هر کد هم ممکنه چند خط اینتر شده باشه که اونم مشکلی نیست عزیزان من!</span></p>
<p style="text-align: center;"><span style="font-size: 20px;"><span style="color: #0000ff;"><span style="font-size: 24px;">این قسمت! سبک نوشته ها و ساختار اصلی!</span><span style="font-size: 14px;"> ( با لحن سینمایی خونده بشه لطفا! </span></span><span style="font-size: 14px;"><img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /> )</span></span></p>
<p style="text-align: center;"><span style="font-size: 20px;"><span style="font-size: 14px;">&nbsp;</span></span></p>
<p style="text-align: justify;" dir="rtl">کنکوری ها! اگر شما هم می خواهید متنی را به صفحه html خود اضافه کنید کافی است متن دلخواه را در قسمت Body از صفحه html تایپ کنید!!!</p>
<p style="text-align: justify;" dir="rtl"><br />مثال 1 ( اینا همه تست کنکورنــــااااااااااا!!! ) : </p>
<p style="text-align: justify;" dir="rtl"><br />ویراستار notepad یا notepad++ &nbsp; خود را باز کنید و کد زیر را تایپ کنید</p>
<p style="text-align: justify;" dir="rtl">&nbsp;</p>
<p>[syntax=html]</p>
<p style="text-align: justify;" dir="rtl">&nbsp;</p>
<p><html> &nbsp;</p>
<p><head> &nbsp;</p>
<p><title>my page</title>&nbsp;</p>
<p>&nbsp;</head> &nbsp;</p>
<p><body>&nbsp;</p>
<p>سلام علیکم! من سوات موات ندارمـــا! بیبین! داشته باش مارو عمویی !! &nbsp;&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</body>&nbsp;</p>
<p></html>&nbsp;</p>
<p>&nbsp;</p>
<p>[/syntax]</p>
<pre>&nbsp;</pre>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;"><br />سپس&nbsp; با پسوند htm&nbsp; یا html&nbsp;&nbsp; آن را ذخیره کنید ( خو چجوری ذخیره کنم!!! <img class="reimg" src="images/smilies/icon_question.gif" alt="سؤال" /> ! هـــَـــی وای مـَــــــن!!!!&nbsp; آخه ذخیره کردن بلد نیستی html میخوای یاد بگیری؟؟؟&nbsp;<img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /> شوخی کردم بـــاو!!! اون بالا سمت چپ یه تگ هست نوشته file بزنید اونو یه گزینه داره save as اونو انتخاب کنید و اسم مورد نظرتون رو تایپ کنید (اسم دلخواهتون واسه فایل)&nbsp; و&nbsp; بعد در قسمت مربوطه (یه لیست تولباری، زیر فیلد نوشتن نام فایل) گزینه hyper text mark up language (htm,html , ... )&nbsp; را بزنید و دیگر تمام! برید حالشو ببرید!)</span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;"><br />با باز کردن مثال خود با مرورگر Internet Explorer یا fire fox و یا هر مرورگر دیگه نتیجه به صورت زیر خواهد شد:<br /><br />سلام علیکم! من سوات موات ندارمـــا! بیبین! داشته باش مارو عمویی!!<br /><br />اگر احیانا خدای ناکرده زبونم لال&nbsp; خطوط را&nbsp; به صورت "خرچنگ قورباغه" مي بينيد,فرار نكنيد! ما نهایت سعیمون اینه که اونارو اهلی کنیم! <img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /> ,&nbsp; هم میتونید اون رو قبل از نوشتن برنامه سر و سامون بدید و هم این که وقتی میخواید save کنید! </span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;">قبل از برنامه : در تگ های نوار بالا یه گزینه وجود داره به اسم format اونو انتخاب کرده و encode in UTF-8&nbsp; رو بزنید! حله!</span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;">هنگام سیو کرن : این گزینه مال زمانیه که شما از note pad ++ استفاه نمیکنید! اون قسمت پایین توی نوت پد معمولی یه گزینه هست به اسم format و یا encoding از اونجا UTF8 رو انتخاب کنید!</span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;">&nbsp;</span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;"><br />مانند مثال بالا اگر ویژگی های&nbsp; خاصی را به متن اضافه نکنید مرورگر از سایز و فونتی که به صورت&nbsp; پیش فرض برایش تعریف شده&nbsp; استفاده می کند!<br /></span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;">ها این که وگفتی یعنی چه!؟ <img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /> خب یعنی اینکه با سایز معمولی و پیشفرضی که توی سیستم ذخیره هستش نشون داده می شه!<br /></span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;">ا!؟ خو من میخوام تغییرش بدم! <img class="reimg" src="images/smilies/icon_cry.gif" alt="گریه می کند و یا خیلی ناراحت است" /><img class="reimg" src="images/smilies/icon_cry.gif" alt="گریه می کند و یا خیلی ناراحت است" /> <br /></span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;">ای بابا! چرا گریه میکنی خوب!!! عب نداره عزیزم! ادامه مطلبو که خوندی و به مرادت رسیدی یه دعای کوچولو واسه من بکن!!! <img class="reimg" src="images/smilies/icon_e_wink.gif" alt="چشمک" /><br /></span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;">&nbsp;</span></span></p>
<p style="text-align: right;">&nbsp;</p>
<h3 style="text-align: right;" dir="rtl"><span style="color: #3366ff;"><strong>فونت پیش فرض (BASE FONT):</strong></span></h3>
<p style="text-align: right;">&nbsp;</p>
<p style="text-align: right;" dir="rtl">برای اینکه متنی که در کل صفحه html وارد می کنید به یک شکل دیده شود یا به عبارت دیگر یک فونت سراسری با اندازه و رنگ یکسان داشته باشید کافی است که از دستور در ابتدای قسمت بدنه&nbsp; (body) استفاده کنید.<br />مثال: ویراستار Notpade++&nbsp;&nbsp; خود را باز کنید و کد زیر را تایپ کنید سپس&nbsp; با پسوند htm&nbsp; یا html&nbsp; و با نام دلخواه آن را ذخیره کنید.</p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;">[syntax=html]</span></span></p>
<p>.<html> &nbsp;</p>
<p><head> &nbsp;</p>
<p><title>my page</title> &nbsp;</p>
<p></head> &nbsp;</p>
<p><body> &nbsp;</p>
<p>&nbsp; <basefont face="Tahoma, arial, verdana" size="4" color="blue"> &nbsp;</p>
<p>&nbsp; سلام علیکم و رحمت الله &nbsp;</p>
<p>&nbsp; حال شما خوبه؟ میدونید چرا متن ها عین همن؟ <br> &nbsp;</p>
<p>&nbsp; آخه من از خاصیت بیس فونت استفاده کردم حسودیت بشه <br> &nbsp;</p>
<p>&nbsp; </body> &nbsp;</p>
<p style="text-align: right;">&nbsp; </html</p>
<pre dir="ltr">. </pre>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;">[/syntax]<br /></span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;">&nbsp;</span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;">خب ما قرار بود فقط بیس فونت رو بگیم پس این size و color اینها چی میگن !!؟؟ خوب خوب خوب!!! size در این دستور به معنی اندازه ای هستش که واسه ی متن تعیین میکنیم! و مقدار اون فقط میتونه از 1 تا 7 باشه! (1 کوچیکترین ، 7 بزرگترین) <br /></span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;"><span style="color: #000000;"><span style="background-color: #00ffff;">نکته کنکوری مهم ! </span>:</span> اگر لیستی از فونت ها را مانند مثال بالا وارد کنیم مرورگر از اولین فونت قابل نمایش برای متن درکامپیوتر بیننده استفاده می کند.یعنی اگر قابلیت نمایش فونت Tahoma&nbsp; فراهم نباشد مرورگر از فونت arial وگر نه از فونت verdana استفاده خواهد کرد. </span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;">نتیجه مثال بالا به صورت زیر خواهد شد بودندیه! :</span></span></p>
<p style="text-align: right;">&nbsp;</p>
<p><span style="font-size: 20px;"><span style="font-size: 14px;">(البته تو صفحه html هــــا!&nbsp;&nbsp; <img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" />&nbsp; )&nbsp; <br /></span></span></p>
<p style="text-align: right;">&nbsp;</p>
<p>&nbsp;</p>
<p align="right">سلام علیکم و رحمت الله<br />&nbsp;<br />&nbsp;حال شما خوبه؟ میدونید چرا متن ها عین همن؟<br />&nbsp;<br />آخه من از خاصیت بیس فونت استفاده کردم حسودیت بشه&nbsp;</p>
<p align="right">&nbsp;</p>
<p align="right"><span style="background-color: #ff0080;">دانش آموز</span> : خو عامو میشه بگی <br><br /> چی بود گذاشتی!؟؟</p>
<p align="right"><span style="background-color: #ff0080;">عامو</span> :&nbsp; هـــا عامو چرا نشه!!!</p>
<p align="right">(اینا باید با لحجه آبادانی خونده بشن! <img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /> )</p>
<p align="right">&nbsp;</p>
<p align="right">خب این جناب آقای <br>شریف و محترم کارشون اینه که نوشته رو می برن خط بعدی!!! یعنی اگر ما از این آقا <br>ها نزاریم همشون توی یه خط چاپ میشن در نتیجه تویه یه خط چاپ میشن دیگه نتیجه نداره که!!!! <img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /></p>
<p align="right">&nbsp;</p>
<h3 style="text-align: right;" dir="rtl"><span style="color: #3366ff;"><strong>تغییر فونت متن :</strong></span></h3>
<p><span style="color: #3366ff;"><strong>خب ما کل متن رو با یه فونت و خاصیت میخوایم اما دوس داریم مثلا فلان جاش فلان رنگ و فلان ویژگی رو داشته باشه!!! حالا چیکار کنیم!!!!؟<br /></strong></span></p>
<p style="text-align: right;" dir="rtl">با استفاده از دستور&nbsp; <span> می توان فونت , رنگ و اندازه متن را تغییر داد. یعنی این که هرجا عشقتون کشید یدونه از این دستور ها با ویژگی های color و size و... بزنید تو رگ!!! طریق استفادش عینه باباشه! باباشو نمیشناسید!!؟؟؟ باباش بیس فونته !!! <img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /> عین بیس فونت ازش استفاده میشه! </span></p>
<p style="text-align: right;" dir="rtl"><span style="background-color: #80ff00;">مثال:</span>&nbsp; ویراستار Notpade++&nbsp;&nbsp; خود را باز کنید و کد زیر را تایپ کنید سپس&nbsp; با پسوند htm&nbsp; یا html&nbsp; و با نام دلخواه آن را ذخیره کنید. (میدونم بلدید بابا!!!! <img class="reimg" src="images/smilies/icon_e_biggrin.gif" alt="خیلی خوشحال" /> )</p>
<p style="text-align: right;" dir="rtl">&nbsp;</p>
<p style="text-align: right;" dir="rtl">[syntax=html]</p>
<p>&nbsp;</p>
<p><html> &nbsp;</p>
<p><head> &nbsp;</p>
<p><title>My Page</title> &nbsp;</p>
<p></head> &nbsp;</p>
<p>&nbsp;&nbsp;</p>
<p><body> &nbsp;</p>
<p><basefont color="green" face="arial" size="4"> &nbsp;</p>
<p>سام علیک <br><br> &nbsp;</p>
<p><font color="red" face="arial" size="2"> &nbsp;</p>
<p>این متن ویژگیش فرق فوکوله یا من چشام قیلی ویلی میره!؟ &nbsp;</p>
<p></font> &nbsp;</p>
<p><br><br> &nbsp;</p>
<p>اینم عین خط اوله که&nbsp;</p>
<p></body> &nbsp;</p>
<p></html>&nbsp;</p>
<p dir="RTL">&nbsp;</p>
<p>&nbsp;</p>
<p style="text-align: right;" dir="rtl">[/syntax]</p>
<p style="text-align: right;" dir="rtl">خب! مثال بالامون اگر بدون غلط املایی تایپ کرده باشیم میشه عین این :</p>
<p style="text-align: right;" dir="rtl">&nbsp;</p>
<pre dir="ltr">&nbsp;</pre>
<p style="text-align: right;" dir="rtl"><span style="background-color: #ffffff; color: #00ff80;">سام علیک</span><br style="font-size: medium; font-family: arial,helvetica,sans-serif; color: #00ff00;" /><span style="background-color: #ffffff;">&nbsp;</span><br /><span style="font-size: x-small; color: #ff6600;"><span style="font-family: arial,helvetica,sans-serif; color: #ff0000;">جون داداش این ویژگیش فرق فوکوله یا من چشام قیلی ویلی میره!؟</span><br /></span>&nbsp;<br /><span style="font-size: medium; font-family: arial,helvetica,sans-serif; color: #00ff00;">اینم عین خط اوله که .</span></p>
<p style="text-align: right;" dir="rtl">face این زیر دستور باعث میشه که متنمون با فونت دلخواهمون چاپ بشه (متن متفاوت رو میگم هــــــــا! ، تو مثال بالا میشه قرمزه!)</p>
<p style="text-align: right;" dir="rtl">حتما دیگه استفاده از size و color و face رو یاد گرفتید!</p>
<p style="text-align: right;" dir="rtl">&nbsp;</p>
<p style="text-align: right;" dir="rtl"><br /><span style="color: #3366ff;"><strong>تفاوت font با basefont</strong></span></p>
<p style="text-align: right;" dir="rtl"><span style="color: #000000; background-color: #ff0000;">دانش آموز</span> : عامو بیس فونت با فونت چه فرقی داره!؟</p>
<p style="text-align: right;" dir="rtl"><span style="background-color: #ff0000;">عامو</span> : برات میگم پسرجان! من عامو نیستم! عامو هستم!</p>
<p style="text-align: right;" dir="rtl">(با لهجه گیلکی خونده بشه لطفا! <img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /> )</p>
<p style="text-align: right;" dir="rtl"><br />basefont در کل صفحه وب اعمال می شود یعنی اینکه روی تمام قسمت body اثر میزاره و همه متن موجود در boduy رو تحت تاثیر قرار میده .در حالی که در دستور font تنها متنی که بین <span>&hellip;</span> قرار دارد تحت تاثیر این دستور و صفت های آن یعنی (face,color,size) قرار می گیرد! به همین راحتی عامو!!!! <img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /></p>
<p style="text-align: right;" dir="rtl">&nbsp;</p>
<p style="text-align: right;" dir="rtl">&nbsp;</p>
<h3 dir="rtl"><span style="color: #3366ff;"><strong>قالب بندی متن:</strong></span></h3>
<p style="text-align: justify;" dir="rtl">توی html هر متنی رو که بخویا یه ویژگی خاصی داشته باشه از این دستور استفاده می کنید</p>
<p style="text-align: justify;" dir="rtl"><span style="background-color: #80ffff; font-size: 18px;"><دستور> متن مورد نظر &nbsp;&nbsp; یا به عبارت صحیح تر&nbsp; &nbsp; text </span>&nbsp;</p>
<p style="text-align: justify;" dir="rtl">( این خیلی مهمه! حتما خاطرتون باشه! چون توی تمام برنامه نویسی های تحت وب این مورد و یا مشابه اون وجود داره! )</p>
<p style="text-align: justify;" dir="rtl">&nbsp;</p>
<p style="text-align: justify;" dir="rtl">اما از چه ویژگی هایی میشه استفاده کرد! این یه چند تا : (جدول یکم پایینه!)</p>
<table style="margin: 5px 15px 5px 0pt; font-family: Tahoma; text-align: right; border-collapse: collapse; height: 201px;" width="600" border="1">
<tbody>
<tr style="background-color: #d7d7d7;">
<td style="text-align: center;"><span style="background-color: #0080ff;"><strong>توضیح </strong></span></td>
<td style="text-align: center;"><span style="background-color: #0080ff;"><strong>دستور</strong></span></td>
<td style="text-align: center;"><span style="background-color: #0080ff;"><strong>خروجی</strong></span></td>
</tr>
<tr>
<td>باعثbold&nbsp; (برجسته)شدن متن می شود.</td>
<td><strong>text</strong></td>
<td style="text-align: center;"><strong>text</strong></td>
</tr>
<tr>
<td>باعث Italic&nbsp; (کج یا خوابیده) شدن متن می شود.</td>
<td><em>text</em></td>
<td style="text-align: center;"><em>text</em></td>
</tr>
<tr>
<td>خطی زیر متن می کشد.</td>
<td><span style="text-decoration: underline;">text</span></td>
<td style="text-align: center;"><span style="text-decoration: underline;">text</span></td>
</tr>
<tr>
<td>متن را کوچکتر می کند و پایین تر می آورد.</td>
<td>A<sub>B</sub></td>
<td style="text-align: center;">A<sub>B</sub></td>
</tr>
<tr>
<td>متن را کوچکتر می کند و بالا تر می آورد.</td>
<td>A<sup>B</sup></td>
<td style="text-align: center;">A<sup>B</sup></td>
</tr>
<tr>
<td>متن را به صورت چشمک زن نمایش می دهد.</td>
<td>text</td>
<td style="text-align: center;">text</td>
</tr>
<tr>
<td>خطی روی متن می کشد.</td>
<td><span style="text-decoration: line-through;">text</span></td>
<td style="text-align: center;"><span style="text-decoration: line-through;">text </span></td>
</tr>
<tr>
<td>متن را به صورتی که در ماشین تحریر تایپ می شود ,نمایش می دهد.</td>
<td><tt>text</tt></td>
<td style="text-align: center;"><tt>text</tt></td>
</tr>
<tr>
<td>متن را دقیقا به همان صورتی&nbsp; که می نویسیم نمایش می دهد.<br />یعنی فضای خالی ,tab ,رفتن به سطر بعدی را حفظ می کند.</td>
<td>
<pre>text</pre>
</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
<p style="text-align: justify;" dir="rtl">&nbsp;</p>
<h3 dir="rtl"><span style="color: #3366ff;"><strong>اندازه های متون</strong></span><strong><span style="color: #3366ff;">: (جدول یکم پایینه!)<br /></span></strong></h3>
<p style="text-align: justify;" dir="rtl">در html به روش های زیادی میشه اندازه متن ها رو تغییر داد و بزرگ و کوچیک کرد! اینم ویژگی های اون :</p>
<table style="margin: 5px 15px 5px 0pt; font-family: Tahoma; text-align: right; border-collapse: collapse; height: 116px;" width="600" border="1">
<tbody>
<tr style="background-color: #d7d7d7;">
<td style="text-align: center;"><strong><span style="background-color: #0080ff;">توضیح</span> </strong></td>
<td style="text-align: center;"><strong><span style="background-color: #0080ff;">دستور</span> </strong></td>
<td style="text-align: center;"><span style="background-color: #0080ff;"><strong>خروجی</strong></span></td>
</tr>
<tr>
<td>باعث&nbsp; افزایش سایز متن به اندازه 1 واحد نسبت به حالت عاددی</td>
<td><big>text</big></td>
<td style="text-align: center;"><big>text</big></td>
</tr>
<tr>
<td>باعث&nbsp; کاهش سایز متن به اندازه 1 واحد نسبت به حالت عادی.</td>
<td><small>text</small></td>
<td style="text-align: center;"><small>text</small></td>
</tr>
<tr>
<td>متن را با کوچکترین سایز نمایش می دهد.</td>
<td><span style="font-size: xx-small;">text</span></td>
<td style="text-align: center;"><span style="font-size: xx-small;">text</span></td>
</tr>
<tr>
<td>متن را با بزرگترین سایز نمایش می دهد.</td>
<td><span style="font-size: 300%;"> text</span></td>
<td style="text-align: center;">
<p><span style="font-size: xx-large;">text</span></p>
</td>
</tr>
</tbody>
</table>
<p style="text-align: justify;" dir="rtl"><span style="background-color: #ff80ff;">نکته جالب :</span> در مورد دستور اینکه می توان از آن به صورت تکراری و پشت سر هم استفاده کرد.مثلا اگر بخواهیم متنی با دو سایز بزرگ تر از حالت عادی نمایش داده شود , کافی است از این دستو دو بار به صورت زیر استفاده شود .<br /><big><big>text</big></big></p>
<p align="right">&nbsp;</p>
<p style="text-align: right;">&nbsp;</p>
<h3 style="text-align: right;" dir="rtl"><span style="color: #3366ff;"><strong>پاراگراف بندی: </strong></span></h3>
<p style="text-align: right;">&nbsp;</p>
<p>برای پاراگراف بندی متن در Html&nbsp; کافی از دستور <p> </p> استفاده کنیم , که <p>نشان دهنده شروع پاراگراف و<p/>نشان دهنده پایان آن است.<br />صفات Align,Id,Title,Dir از جمله صفاتی هستند که به بحث آنها می پردازیم:<br /><br />&nbsp;&nbsp;&nbsp;&nbsp; صفت Dir : برای اینکه جهت نوشته شدن متن را مشخص کنیم از این صفت استفاده می کنیم. مقادیر این صفت عبارتند از LTR مخفف Left To Right به معنی چپ به راست و همچنین RTL مخفف Right To Left به معنی راست به چپ که از دومی ( RTL ) برای نوشتن متون فارسی استفاده می کنیم.<br /><br />&nbsp;&nbsp;&nbsp;&nbsp; صفت Title: عبارتی که جلوی Title نوشته می شود به عنوان توضیح در مورد پاراگراف هنگامی که ماوس روی آن قرار می گیرد, ظاهر می شود.<br /><br />&nbsp;&nbsp;&nbsp;&nbsp; صفت&nbsp; Id : نام پاراگراف را تعیین می کند.که این نام از طریق شیوه نامه ها قابل دسترسی است.<br /><br />&nbsp;&nbsp;&nbsp;&nbsp; صفت Align :که مکان پاراگراف را مشخص می کند.که دارای سه مقدار Left,Right,Center&nbsp; است که قبلا توضیح داده شده است.</p>
<p style="text-align: right;" dir="rtl">&nbsp;</p>
<p style="text-align: right;" dir="rtl"><span style="background-color: #ff0000;">دانش آموز</span> : خو عامو پــ ما چطور از اینا استفاده کنیم!!!؟ <img class="reimg" src="images/smilies/icon_question.gif" alt="سؤال" /></p>
<p style="text-align: right;" dir="rtl"><span style="background-color: #ff0000;">عامو :</span> خب عزیزم! اولا عامو نه و عمو! دوما این که مشابه بیس فونت و فونت! یعنی اول دستور اصلی رو میزاریم بعد واسش صفت قرار میدیم!&nbsp;</p>
<p style="text-align: right;" dir="rtl">مثلا :</p>
<p align="center">پاراگراف&nbsp;</p>
<p style="text-align: right;" dir="rtl">&nbsp; اینجوری! (الان با این دستور پاراگراف در وسط نشون داده میشه!)</p>
<p style="text-align: right;" dir="rtl">&nbsp;</p>
<p style="text-align: right;">&nbsp;</p>
<h3 style="text-align: right;" dir="rtl"><span style="color: #3366ff;"><span style="font-size: 20px;">عناوین و تیتر ها</span> <span style="font-size: 10px;">(البته اینا فقط واسه تیتر کاربرد ندارنــــــــا! باید بتونید خودتون در استفاده ازشون خلاق باشید )</span> :</span></h3>
<p><span style="color: #3366ff;">مثال میزنم واسطون تا بدونید فقط واسه تیتر کاربرد ندارن ، مثلا ما میخوایم یه کد تایمر رو در وسط صفحه نمایش بدیم! چیکار کنیم!؟ از یکی از این ها میزاریم و براش صفت align قرار میدیم و بعدش اونو روی وسط تنظیم میکنیم ، حالا بین این دستور تیتر کد اسکریپت تایمر رو قرار میدیم! تایمرمون میاد وسط! (خیلی خیلی مهمه! یادتون باشه حتما!)<br /></span></p>
<p style="text-align: right;">&nbsp;</p>
<p style="text-align: right;" dir="rtl">در html&nbsp; از دستورات h1 - h6 برای تعیین عنوان استفاده می شود. برای این کار از دستور مورد نظر به صورت Text استفاده می شود که باید بر حسب نیاز X را با عدد مورد نظر جایگزین کنید. مهمترین نکته در مورد دستورات تعیین عنوان این است که این دستورات برعکس نامشان اندازه عنوان را تعیین می کنند یعنی از h1 برای تعیین بزرگترین عنوان و از h6 برای تعیین کوچکترین عنوان استفاده می شود.</p>
<p style="text-align: right;">&nbsp;</p>
<h1 class="none" style="text-align: right;" dir="rtl">Heading1</h1>
<p style="text-align: right;">&nbsp;</p>
<h2 class="none" style="text-align: right;" dir="rtl">Heading2</h2>
<p style="text-align: right;">&nbsp;</p>
<h3 class="none" style="text-align: right;" dir="rtl">Heading3</h3>
<p style="text-align: right;">&nbsp;</p>
<h4 class="none" style="text-align: right;" dir="rtl">Heading4</h4>
<p style="text-align: right;">&nbsp;</p>
<h5 class="none" style="text-align: right;" dir="rtl">Heading5</h5>
<p style="text-align: right;">&nbsp;</p>
<h6 class="none" style="text-align: right;" dir="rtl">Heading6</h6>
<p style="text-align: right;">&nbsp;</p>
<p style="text-align: right;" dir="rtl">به عنوان آخرین نکته در نظر داشته باشید که می توانیم بوسیله قراردادن صفت align در دستورات hX محل قرارگیری عناوین را مشخص کنیم. نحوه استفاده از این صفت و مقادیر مختلف آن را در ادامه خواهید دید.</p>
<p style="text-align: right;">&nbsp;</p>
<p style="text-align: right;" dir="rtl"><h1 align="center">عنوان در وسط</h1></p>
<h1 class="none" style="text-align: center;">عنوان در وسط</h1>
<p style="text-align: right;" dir="rtl"><h1 align="left">عنوان سمت چپ</h1></p>
<h1 class="none" dir="ltr">عنوان سمت چپ</h1>
<p style="text-align: right;" dir="rtl"><h1 align="right">عنوان سمت راست</h1></p>
<h1 class="none" style="text-align: right;">عنوان سمت راست</h1>
<p>&nbsp;</p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;">&nbsp;</span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;">خب! این بخش سخت و طولانی هم تموم شد بالاخره و شما یک گام دیگه در یادگیری html برداشتید! </span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;">هرجاییش که حس کردید مشکل دارید یا بد توضیح دادم و یا سخت بوده براتون و نیاز به شکافتن و مثال های بیشتری داره رو میتونید بگید تا من توضیح بدم!<br /></span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;"><span style="background-color: #ff0000;">شما</span> :<span style="color: #0000ff;"> چطوری بگیم عامو!؟</span><br /></span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;"><span style="background-color: #ff0000;">من :</span><span style="color: #0000ff;"> عامو جان! هم میتونی پیغام خصوصی بدی و هم میتونی همین جا و در همین مکان و در همین تاپیک با یک پست گیگیلی میگیلی مطرح کنی!</span> <img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /><img class="reimg" src="images/smilies/icon_e_wink.gif" alt="چشمک" /><br /></span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;">امیدوارم روز به روز موفق تر باشید.<br /></span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;">خوشحال و شاد باشید!&nbsp;التماس دعا <img class="reimg" src="images/smilies/icon_e_wink.gif" alt="چشمک" /><br /></span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;">میــلــاد<br /></span></span></p>
<p style="text-align: right;"><span style="font-size: 20px;"><span style="font-size: 14px;">&nbsp;</span></span></p>
آواتار کاربر
m.sevrus.m
پست: 68
تاریخ عضویت: چهارشنبه ۲۵ مرداد ۱۳۹۱, ۲:۰۸ ب.ظ
سن: 19
شغل: برنامه نویس- طراح وب
اینترنت: ADSL 2 Mbps
جنسیت: آقا
تشکر کرده: 40 دفعه
تشکر شده: 33 دفعه
تماس:

<p align="right">سلام دوباره خدمت شما عزیزان و دوستان گل!</p>
<p align="right"><span style="color: #ff0000;">رسیدیم بخش سوم HTML ! به همین راحتی!!!! به همین خوشمزگی ! پودر ...کیک! آخ ببخشید! HTML ! <img src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /><br /></span></p>
<p align="right">&nbsp;</p>
<p style="text-align: center;" align="right"><span style="font-size: 18px; color: #0000ff;">این داستان! لینک ها!</span></p>
<p style="text-align: center;" align="right"><span style="font-size: 18px; color: #0000ff;">(خودتون دیگه خوندنشو بلدید دیگه!!! )</span></p>
<p style="text-align: center;" align="right"><span style="font-size: 18px; color: #00ff00;">&nbsp;</span></p>
<p align="right"><span style="background-color: #00ffff;">این متن به دلیل گرفتاری هایی که متاسفانه این چند وقته دارم کمی کوتاهتر هستش! اما بدونید این قسمت ، اولین بخش فصل سوم هستش!&nbsp;<img src="images/smilies/icon_cry.gif" alt="گریه می کند و یا خیلی ناراحت است" /></span></p>
<p align="right"><span style="background-color: #00ffff;">&nbsp;</span></p>
<p dir="RTL">لینک ها بنیادی ترین قسمت از شبکه گسترده ارتباط جهانی (www) هستند.</p>
<p dir="RTL">&nbsp;</p>
<p dir="RTL"><span style="color: #ff0000;">جون!؟؟ شبکه گسترده ارتباط جهانی دیگه چه بید!!؟&nbsp;</span></p>
<p dir="RTL"><span style="color: #ff0000;">عامو جان!!! www&nbsp; = World Wide Web&nbsp;&nbsp; = شبکه گسترده ارتباط جهانی ، همینی که اول هر آدرس اینترنتی به کار میبریم! نچ نچ نچ!!&nbsp;<img src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /></span></p>
<p dir="RTL"><span style="color: #ff0000;">&nbsp;</span></p>
<p dir="RTL">ما نیز سعی می کنیم با آوردن مثال های متنوع به&nbsp; شما برای یاد گیری این بخش کمک کنیم. باید توجه داشت که هم متون و هم عکس ها می توانند به عنوان لینک مورد استفاده قرار بگیرند. یعنی هم میشه یا کلیک بر روی عکس رفت به یک لینک و هم با کلیک بر روی نوشته یا متن.<br /> مثال های زیر را با هم بررسی می کنیم.</p>
<p dir="RTL"><br /> مثال 1) برای رفتن به سایت www.google.com&nbsp; کافی است که بر روی <a href="http://www.google.com">www.google.com</a> کلیک کنید.<br /> مثال 2)برای اینکه توی همین سایت برید به قسمت کنترل پنل کاربری ، کلیک کنید&nbsp; : <a href="ucp.php" target="_self">کنترل پنل</a><br /> مثال3) لینک هایی که در درون صفحه ، به پست خاصی لینک می شوند (یعنی این که مثلا به سومین پست درون صفحه تاپیک "آموز html " لینک داده می شوند)<br /> &nbsp;مثالهایی که در بالا آورده شد تداعی کننده انواع لینک ها هستند که در زیر به آنها اشاره می شود.</p>
<p dir="RTL">&nbsp;</p>
<p dir="RTL"><span style="color: #8000ff;"><strong>انواع لینک (</strong><strong>link</strong><strong>) در </strong><strong>html</strong><strong><br /> <br /> </strong></span></p>
<p dir="RTL">1)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; لینک سراسری(Global Links): لینک هایی که به صفحات یک سایت دیگر اشاره دارند. به مثال 1 توجه کنید.<br /> 2) لینک محلی یا موضعی(Local Links): لینک هایی که به صفحات دیگر همان سایت اشاره می کند. یعنی از سایتی که در آن هستید خارج نمی شوند. به مثال 2 توجه کنید.<br /> 3) لینک داخلی (Internal Links): لینک هایی هستند که&nbsp; به قسمتی همان صفحه ای که در آن هستید اشاره می کنند. به مثال 3 توجه کنید.</p>
<p dir="RTL">&nbsp;</p>
<p dir="RTL"><span style="color: #8000ff;"><strong>چگونه لینک </strong><strong>html</strong><strong> بسازیم؟؟؟</strong></span></p>
<p dir="RTL">برای ساختن لینک کافی است از دستور <a>...</a> مخفف anchor استفاده کنیم. هر آنچه که بین </a>&hellip;<a>&nbsp; قرار می گیرد به عنوان لینک شناخته می شود. برای اینکه مقصد لینک نیز مشخص شود از صفت href&nbsp; مخفف "hypertext reference" استفاده می کنیم. توجه کنید بین دستور a هر المانی از جمله متن ، عکس و... می تواند قرار بگیرد و بعد از این کار با کلیک بر روی آن المان به پیوند مورد نظر منتقل خواهیم شد.</p>
<p dir="RTL">پس شکل کلی این دستور در زبان html به صورت زیر است:</p>
<p dir="RTL">&nbsp;</p>
<p>[syntax=html]</p>
<p dir="RTL">&nbsp;</p>
<p>&nbsp;</p>
<p><a href="url">متنی که به عنوان لینک شناخته خواهد شد</a><br /> <br /> <a href="url"><img src="عکسی که میخواهیم لینک دهد" /></a><br /> <br /> <a href="url">هر المانی که قرار است به عنوان لینک استفاده شود</a></p>
<p>[/syntax]</p>
<p>&nbsp;</p>
<p><br />این پایان اولین قسمت از سومین بخش آموزش!<br />امیدوارم موفق و موید باشید و کوتاهی های بنده رو به بزرگی خودتون ببخشید!<br />با تشکر!<br />میلاد</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
آواتار کاربر
m.sevrus.m
پست: 68
تاریخ عضویت: چهارشنبه ۲۵ مرداد ۱۳۹۱, ۲:۰۸ ب.ظ
سن: 19
شغل: برنامه نویس- طراح وب
اینترنت: ADSL 2 Mbps
جنسیت: آقا
تشکر کرده: 40 دفعه
تشکر شده: 33 دفعه
تماس:

<p>با سلام خدمت عزیزان و دوستان گلمون در انجمن!</p>
<p>حالتون چطوره!؟ دماغتون چاقه!؟ خوبید!؟ خوشید الحمدلله!؟</p>
<p>خب&nbsp; اول اینکه از وقفه چند روزم عذر خواهی میکنم و امیدوارم منو به بزرگی خودتون ببخشید</p>
<p>توی این پست آرشیو مطالب قبلی رو بصورت فایل های pdf قرار میدم.</p>
<p>اگر میخواید از این فایل های استفاده کنید ، خواهش مندیم با ذکر منبع ، یعنی "php-bb.ir " باشه ! وگرنه ....! ممنوع!</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
شما برای مشاهده فایل پیوست شده در این پست، دسترسی ندارید.
آواتار کاربر
m.sevrus.m
پست: 68
تاریخ عضویت: چهارشنبه ۲۵ مرداد ۱۳۹۱, ۲:۰۸ ب.ظ
سن: 19
شغل: برنامه نویس- طراح وب
اینترنت: ADSL 2 Mbps
جنسیت: آقا
تشکر کرده: 40 دفعه
تشکر شده: 33 دفعه
تماس:

<p>بسم الله الرحمن الرحیم</p>
<p>سلام و صد درود بر دوستان عزیزم!</p>
<p>امیدوارم درس و کار و مشغله دل و دماغتون رو نگرفته باشه!</p>
<p>خوب هستید!؟</p>
<p>اقا بحث بحث رسه! باید بخونید این html رو هاااااااا! گفته باشم من به کسی نمره الکی نمیدم! از همین الان بگم که به فکر پاس کردن باشید! <img class="reimg" src="images/smilies/icon_lol.gif" alt="می خندد" /></p>
<p>مخلص همگی! <img class="reimg" src="images/smilies/icon_e_wink.gif" alt="چشمک" /></p>
<p>قسمت بعدی html هستش که به گویایی همه چیز مورد نیاز این قسمت رو داره! <img class="reimg" src="images/smilies/icon_e_wink.gif" alt="چشمک" /></p>
<p>&nbsp;</p>
<h3 dir="rtl"><span style="color: #3366ff;">Global link - لینک سراسری یا جهانی&nbsp; :</span></h3>
<p dir="rtl">ویراستار Notpade++&nbsp;&nbsp; خود را باز کنید و کد زیر را تایپ کنید سپس با پسوند htm&nbsp; یا html&nbsp; و با نام GlobalLink آن را ذخیره کنید.</p>
<p>[syntax=html]</p>
<p dir="rtl">&nbsp;</p>
<p>&nbsp;</p>
<pre dir="ltr"><br /><br /> <br /> My Page<br /> <br /><br /><br /> Click <a href="http://www.google.com">here</a> to go to google.<br /> </pre>
<p>[/syntax]</p>
<pre dir="ltr">&nbsp;</pre>
<p dir="rtl">حال اگر با مرورگر صفحه مورد نظر را باز کنید نتیجه به صورت زیر مشاهده خواهد شد:<br /><br />Click <a href="http://www.google.com">here</a> to go to google.<br /><br />با فشردن کلمه here به سایت http://www.google.com&nbsp;&nbsp; خواهید رفت , به همین سادگی!!!!!</p>
<p dir="rtl">&nbsp;</p>
<h3 dir="rtl"><span style="color: #3366ff;">Local link - لینک محلی:</span></h3>
<p dir="rtl">قبل از اینکه به این مثال بپردازیم یک صفحه html بنام firstpage را در درایو c خود بسازید.سپس ویراستار NotPad++&nbsp; را باز کرده و کد زیر را در آن تایپ کنید و آن را با نام Internallink&nbsp; و با پسوند htm ذخیره کنید (یعنی بلد نباشید میزنم دیگه پا نشیدااااااااا! <img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /> )</p>
<pre dir="ltr">[syntax=html]Click <a href="c:\ firstpage.htm">here</a> to go to firstpage.[/syntax]</pre>
<p dir="rtl">حال اگر با مرورگر صفحه Internallink.htm را باز کنید، صفحه مورد نظر برای شما نمایش داده میشود!</p>
<p dir="rtl">نیگا چقده قشنگه!!!!!! <img class="reimg" src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /></p>
<h3 dir="rtl"><span style="color: #3366ff;">&nbsp;Intrnal Link - پیوند داخلی:<br /></span></h3>
<h1><span style="color: #3366ff; font-size: 16px; font-family: arial black,avant garde;">(مهم)</span></h1>
<p style="text-align: justify;" dir="rtl">برای اینکه به قسمت خاصی از صفحه وبی که در آن قرار داریم ، پیوند بر قرار کنیم یا به عبارت دیگر به قسمتی از همان صفحه html پرش کنیم، باید از صفت name&nbsp; از دستور<a>&hellip;</a> برای نام گذاری آن بخش&nbsp; استفاده کنیم.این نام از حروف تشکیل می شود که باید منحصر به فرد نیز باشد. مثلا قسمتی از صفحه را انتخاب می کنیم&nbsp; و در آن قسمت دستور <a name="mesale1"></a>&hellip; را می نویسیم حال برای مراجعه به آن بخش کافی است در پیوند داخلی که ایجاد می کنیم علامت # و بعد نامی که انتخاب کرده بودیم را می نویسیم. در این مثال باید بنویسیم <a href="#mesale1">&hellip;</a>. مثال کامل زیر بهتر به تشریح این موضوع خواهد پرداخت.</p>
<p style="text-align: justify;" dir="rtl">&nbsp;</p>
<p>[syntax=html]</p>
<p style="text-align: justify;" dir="rtl">&nbsp;</p>
<p>&nbsp;</p>
<pre dir="ltr"><br /> <br /> my page<br /> <br /><br /><br /><br /><a href="#Chapter 1">Introduction</a></pre>
<h3><a href="#Chapter 2">html text</a></h3>
<h3><a href="#Chapter 3">html links</a><br /><br /> <a name=" Chapter 1"></a> Introduction <br /> <!-- Introdution متن مربوط به  --><br /><br /> <a name=" Chapter 2"></a> html text<br /> <!-- html text متن مربوط به  --><br /><br /> <a name=" Chapter 3"></a> html links<br /> <!-- html links متن مربوط به  --><br /><br /></h3>
<h3>&nbsp;</h3>
<p>[/syntax]</p>
<pre dir="ltr">&nbsp;</pre>
<p style="text-align: justify;" dir="rtl"><br />در مثال بالا فرض کنید صفحه وبی داریم که شامل اطلاعاتی در مورد html&nbsp; است که به 3 فصل&nbsp; html links, html text ,Introduction تقسیم شده است که در بالای صفحه آمده اند. توضیح همه این فصل ها درهمین صفحه قرار دارد.<br />حال برای دیدن متن مربوط به html text&nbsp; کافی است بر روی لینک html text کلیک کنیم. با یاد داریم که این نوع&nbsp; پیوند ، پیوند داخلی نام دارد. پس 2 مرحله برای ایجاد پیوند داخلی داریم:</p>
<p style="text-align: justify;" dir="rtl">1)نام گذاری بخشی که می خواهیم با لینک آن را ببینیم.<br /><a name="#Chapter 2"></a>html text</p>
<p style="text-align: justify;" dir="rtl">2)ایجاد پیوند به بخش نام گذاری شده.<br /><a href="#Chapter 2">html text</a></p>
<h3 dir="rtl"><span style="color: #3366ff;">لینک های <span style="color: #e41ac4;">ر</span><span style="color: #339966;">ن</span><span style="color: #99cc00;">گ</span><span style="color: #ff6600;">ی</span> بسازید:</span></h3>
<p style="text-align: justify;" dir="rtl">برای اینکه لینک ها را در صفحه خود به صورت متمایز نمایش دهیم می توان برای آنها رنگ مشخص کرد.<br />دو حالت برای تعریف کردن رنگ لینک ها وجود دارد:<br />1)رنگ تمام لینک ها در صفحه به یک صورت تعریف شود.<br />2)برای بعضی از لینک ها رنگ متفاوتی تعریف کنیم.</p>
<h3 dir="rtl"><span style="color: #3366ff;"><strong>link,vlink,alink ؟!! یعنی چی؟</strong></span></h3>

link: بیان کننده رنگ پیوند هایی است که تا کنون ملاقات نشده اند. استاندارد آن  آبی (blue  یا  #0000FF) است.
vlink مخفف Visited Link :رنگ پیوند را پس از ملاقات شدن نمایش می دهد.استاندارد آن ارغوانی (purple - #800080) است.
alink مخفف Active Link :رنگ لینک را وقتی که ماوس بر روی آن قرار می گیرد ، مشخص می کند.استاندارد آن قرمز (red - #FF0000) است.


<p style="text-align: justify;" dir="rtl"><strong>یک رنگ برای تمام لینک های موجود در صفحه html<br /></strong></p>
<p style="text-align: justify;" dir="rtl">کافی است که در قسمتاز صفت های&nbsp; link,vlink,alink&nbsp; استفاده کنیم.</p>
<pre style="text-align: justify;" dir="ltr">&nbsp;</pre>
<p style="text-align: justify;" dir="rtl"><strong>هر لینک یک رنگ</strong><br />اگر بخواهیم رنگ یک یا چند لینک را در صفحه html ، متفاوت از بقیه&nbsp; نشان دهیم از یکی از دو روش زیر استفاده می کنیم.</p>
<p style="text-align: justify;" dir="rtl">روش اول:استفاده از دستور font&nbsp; بین دستور <a href="">&hellip;</a>باید به این نکته مهم توجه داشت که دستور font حتما باید بین <a href="">&hellip;</a> قرار بگیرد.</p>
<pre style="text-align: justify;" dir="ltr">[syntax=html]Click <span style="color: #0000ff;"><a</span> <span style="color: #ff6600;">href</span>="http://www.webfocus.ir"<span style="color: #0000ff;">></span> <span style="color: #0000ff;"><font</span> <span style="color: #ff6600;">color</span>="red"<span style="color: #0000ff;">></span>here to go to webfocus.[/syntax]</pre>
<p style="text-align: justify;" dir="rtl">روش دوم:استفاده از خاصیت style&nbsp; در دستور</p>
<p style="text-align: justify;" dir="rtl">&nbsp;</p>
<pre>[syntax=html]Click <span style="color: #0000ff;"><a</span> <span style="color: #ff6600;">href</span>="http://www.webfocus.com" <span style="color: #ff6600;">style</span>="color: green"<span style="color: #0000ff;">></span>here to go to webfocus. [/syntax]</pre>
<p style="text-align: justify;" dir="rtl">&nbsp;با استفاده از یکی از دو روش فوق می توانید لینک ها یی با رنگ دلخواه تعریف کنید .</p>
<p style="text-align: justify;" dir="rtl">&nbsp;</p>
<p style="text-align: justify;" dir="rtl"><strong>بعضی رنگ های معروف عبارتند از:</strong></p>
<p style="text-align: justify;" dir="rtl"><br /><span style="color: black;">Black</span>, <span style="color: aqua;">Aqua </span>, <span style="color: fushia;">Fushia</span>, <span style="color: blue;">Blue</span>, <span style="color: gray;">Gray</span>, <span style="color: green;">Green</span>, <span style="color: lime;">Lime</span>, <span style="color: marron;">Marron</span>, <span style="color: navy;">Navy</span>, <span style="color: olive;">Olive</span>, <span style="color: purple;">Purple</span>, <span style="color: red;">Red</span>,<span style="color: silver;">Silver</span>,<span style="color: teal;">Teal</span>,<span style="color: white;">White</span>,<span style="color: yellow;">Yellow&nbsp; </span>.<br /><br />نکته :به جای نوشتن اسامی رنگ ها, می توان از فرمت RGB استفاده کرد.که b,g,r به ترتیب مخفف blue,green,red هستند.که هر یک می توانند مقداری بین 0 تا 255 بگیرند. رنگ مورد نظر از ترکیب این رنگ ها به دست خواهد آمد. مثلا 187 017 142 رنگی مایل به بنفش خواد بود. البته اکثر طراحان ترجیح می دهند که این رنگ ها را در مبنای شانزده (hex) بیان کنند مثلا رنگ معادل مثال قبل در مبنای شانزده به صورت 8E11BB# نوشته می شود.</p>
<p style="text-align: justify;" dir="rtl">&nbsp;</p>
<h3 dir="rtl"><span style="color: #3366ff;">صفات مربوط به دستور پیوند (Link Attributes )</span></h3>
<p style="text-align: justify;" dir="rtl">در مورد صفت های href وname به طور مفصل صحبت کردیم حال به توضیح صفت های دیگر این دستور می پردازیم.<br />&nbsp;&nbsp; &nbsp; <strong>صفت title : </strong>با استفاده از این صفت وقتی ماوس بر روی پیوند مورد نظر قرار می گیرد متنی که در جلوی این صفت نوشته شده&nbsp; ظاهر می شود.<br />مثال:</p>
<pre><a title="for more learning html click here" href="www.webfocus.ir">learning html</a> </pre>
<p style="text-align: justify;" dir="rtl">وقتی ماوس روی پیوندhml learning قرار می گیرد پیام for more learning html click here ظاهر می شود.</p>
<p style="text-align: justify;" dir="rtl">&nbsp; &nbsp;&nbsp; <strong>صفت tabindex :</strong> با استفاده از این صفت و مقدار دادن به آن در مرورگرهایی که ازاین صفت پشتیبانی می کنند ,روند انتخاب کردن پیوند را با استفاده از کلید Tab&nbsp; مشخص می کنیم.<br />مثال:</p>
<pre style="text-align: justify;" dir="ltr">[syntax=html]<br /><a tabindex="1" href="http://www.yahoo.com">yahoo</a><br /><a tabindex="3" href="http://www.google.com">google</a><br /><a tabindex="2" href="../">php-bb</a>[/syntax]</pre>
<p style="text-align: justify;" dir="rtl">با یک بار فشردن کلید Tabمکان نما بر روی پیوند yahoo با دو بار فشردن مکان نما بر روی پیوند webfocus و با سه بار فشردن کلید Tab مکان نما بر روی پیوند google قرار می گیرد. <br />حال اگر ازاین صفت استفاده نکنیم ,با هر بار فشردن کلید Tab ,مکان نما به ترتیبی که پیوندها در صفحه آورده شده اند ,حرکت می کنند.مثلا اگر در مثال بالا از صفت tabindex استفاده نشود,با یک بار فشردن&nbsp; Tab&nbsp; مکان نما بر روی پیوند yahoo با دو بار فشردن بر روی پیوند google و با سه بار فشردن برروی پیوند حphp-bb قرار می گیرد.</p>
<p style="text-align: justify;" dir="rtl">&nbsp;&nbsp; &nbsp;&nbsp;<strong> صفت Target :</strong> به صورت پیش فرض, لینک ها در همان پنجره یا فریم ای که در آن هستید باز خواهند شد.با استفاده از صفت Target مثلا می توانید تعیین کنید که پیوند مورد نظر در یک پنجره جدید باز شود. با این صفت در بخش فریم ها بیشتر آشنا خواهیم شد.</p>
<p style="text-align: justify;" dir="rtl">&nbsp;</p>
<p style="text-align: justify;" dir="rtl"><br />خب خب خب!</p>
<p style="text-align: justify;" dir="rtl">یه بخش دیگه هم تموم شد!</p>
<p style="text-align: justify;" dir="rtl">به امید موفقیت روز افزون برای شما عزیزان!</p>
<p>تا فصل بعدی! خدا نگهدار! <img class="reimg" src="images/smilies/icon_e_wink.gif" alt="چشمک" /></p>
آواتار کاربر
m.sevrus.m
پست: 68
تاریخ عضویت: چهارشنبه ۲۵ مرداد ۱۳۹۱, ۲:۰۸ ب.ظ
سن: 19
شغل: برنامه نویس- طراح وب
اینترنت: ADSL 2 Mbps
جنسیت: آقا
تشکر کرده: 40 دفعه
تشکر شده: 33 دفعه
تماس:

<p dir="RTL">سلام خدمت شما دوستان گلم!</p>
<p dir="RTL">یه مبحث ساده داریم امروز که انقده سادس نیازی به کار بردن "لفظ عامویی" درش نیست! :D</p>
<p dir="RTL">بزن بریم!</p>
<p dir="RTL"><span style="font-size: 28px; color: #0080ff;">فصل پنجم!</span></p>
<p dir="RTL"><span style="font-size: 24px; color: #0080ff;">لیست هاااا! (جمع مکسرش فک کنم بشه لیوست! :P )</span></p>
<p dir="RTL"><span style="font-size: 22px;">(د آخه مگه واژه انگلیسی جمع مکسر داره!؟ نچ نچ نچ )</span></p>
<p dir="RTL"><span style="font-size: 22px;">&nbsp;</span></p>
<p dir="RTL">بریم سراغ درسمون!</p>
<p dir="RTL">لیست ها به سه نوع <span style="color: #ff0000;">مرتب,نامرتب و تعریفی</span> تقسیم می شوند که در این بخش به شرح هر یک می پردازیم.</p>
<p dir="RTL">&nbsp;</p>
<p dir="RTL"><span style="color: #8000ff;"><strong>لیست مرتب ( </strong><strong>ordered or numbered list</strong><strong>) :</strong></span></p>
<p dir="RTL">&nbsp;همانطور که از نام این نوع لیست مشخص است ترتیب در این نوع لیست اهمیت دارد. برای ایجاد لیست مرتب از دستور <ol> برای شروع لیست و </ol> برای مشخص کردن انتهای آن استفاده می کنیم ، اما باید توجه کنیم که هر لیست شامل عناصری است که برای مشخص کردن آن از دستور&nbsp; <li> که li مخفف list items&nbsp; است ، استفاده می کنیم.<br /> مثال :</p>
<p dir="RTL">&nbsp;</p>
<p>[syntax=html]</p>
<p dir="RTL">&nbsp;</p>
<p>&nbsp;</p>
<p><ol><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li>list item1</li><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li>list item2</li><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li>list item3</li><br /> </ol></p>
<p>[/syntax]</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p dir="RTL"><span style="background-color: #ff0000;">سوال :</span> آیا می توانیم از عددهای رومی (i,ii,iii,&hellip;)&nbsp; یا حروف (a,b,c,&hellip;)&nbsp; برای شماره گذاری عناصر لیست استفاده کنیم؟؟</p>
<p dir="RTL"><br /> <span style="background-color: #ff0000;">پاسخ :</span> بله با استفاده از صفت type&nbsp; این دستور می توان این کار را انجام داد.</p>
<p dir="RTL"><br /> به مثال های زیر توجه کنید:</p>
<p dir="RTL"><br /><span style="color: #ff8080;"> لیست با اعداد رومی به صورتi , ii ,iii , iv</span></p>
<p>&nbsp;</p>
<p>[syntax=html]</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><ol type ="i"><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li>list item1</li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li>list item2</li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<li>list item3</li><br /> </ol></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>[/syntax]</p>
<p>&nbsp;</p>
<p dir="RTL"><span style="color: #ff8080;">لیست باحروفa , b ,c , d</span></p>
<p>&nbsp;</p>
<p>[syntax=html]</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><ol type ="a"><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li>list item1</li><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li>list item2</li><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li>list item3</li><br /> </ol></p>
<p>[/syntax]</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p dir="RTL"><span style="color: #ff8080;">لیست با حروف بزرگA , B ,C ,D</span></p>
<p>&nbsp;</p>
<p>[syntax=html]</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><ol type ="A"><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li>list item1</li><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li>list item2</li><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li>list item3</li><br /> </ol></p>
<p>&nbsp;</p>
<p dir="RTL">&nbsp;</p>
<p>[/syntax]</p>
<p dir="RTL">&nbsp;</p>
<p dir="RTL">با استفاده از صفت start از دستور <ol>&nbsp; می توان تعیین کرد که شماره گذاری عناصر لیست از چه مقدار عددی یا حروفی شروع شود. به عنوان مثال :</p>
<p dir="RTL">&nbsp;</p>
<p>[syntax=html]</p>
<p dir="RTL">&nbsp;</p>
<p>&nbsp;</p>
<p><ol type="I" start="7"><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li>list item1</li><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li>list item2</li><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li>list item3</li><br /> </ol></p>
<p>&nbsp;</p>
<p dir="RTL">&nbsp;</p>
<p>[/syntax]</p>
<p dir="RTL">&nbsp;</p>
<p dir="RTL"><br /> در مثال بالا ابتدا با استفاده از صفت type مشخص می کنیم که برای شماره گذاری عناصر لیست از اعداد رومی بزرگ استفاده شود و سپس با استفاده از دستور start می گوییم که شروع شماره گذاری از عدد 7 رومی&nbsp; باشد.</p>
<p dir="RTL">&nbsp;</p>
<p dir="RTL"><span style="color: #8000ff;"><strong>لیست نامرتب (</strong><strong>unordered or bulleted list</strong><strong>) :</strong></span></p>
<p dir="RTL">در این نوع لیست ترتیب برای عناصر لیست اهمیتی ندارد. برای نمایش لیستی از این نوع از دستور ul استفاده می کنیم. برای هر کدام از عناصر لیست هم از مثل نوع قبلی از دستور li بهره میگیریم. عناصر لیست به کمک شکل ها یا علامت های دایره تو پر (disc) ,دایره تو خالی (circle) و مربع تو پر (square) مشخص میشوند. برای تعیین شکل عناصر از صفت type کمک میگیریم. به مثال زیر توجه کنید:</p>
<p dir="RTL">&nbsp;</p>
<p>[syntax=html]</p>
<p dir="RTL">&nbsp;</p>
<p>&nbsp;</p>
<p><ul type="circle"><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li>list item1</li><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li>list item2</li><br /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <li>list item3</li><br /> </ul></p>
<p>[/syntax]</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p dir="RTL"><span style="color: #8000ff;"><strong>لیست های تعریفی(</strong><strong>definition list</strong><strong>) :</strong></span></p>
<p dir="RTL">مجموعه ای از عناصر با تعاریف&nbsp; متناظرشان , یک لیست تعریفی را تشکیل می دهند که دستور <dl> نشان دهنده شروع و </dl> نشان دهنده پایان این لیست است. اما برای نشان دادن&nbsp; هر عنصر از دستور <dt>&nbsp; که dt مخفف&nbsp; definition termاست , استفاده می کنیم و برای تعریف هر عنصر دستور <dd> را به کار می بریم. <br /> مثال :</p>
<p dir="RTL">&nbsp;</p>
<p>[syntax=html]</p>
<p dir="RTL">&nbsp;</p>
<p>&nbsp;</p>
<p><dl><br /> &nbsp; <dt>Term 1</dt><br /> &nbsp; <dd>This is the definition of the first term.</dd><br /> &nbsp; <dt>Term 2</dt><br /> &nbsp; <dd>This is the definition of the second term.</dd><br /> </dl></p>
<p>[/syntax]</p>
<p>&nbsp;</p>
<p dir="RTL">&nbsp;</p>
<p dir="RTL">&nbsp;</p>
<p dir="RTL">&nbsp;</p>
<p dir="RTL">خب خب خب! رفقااااااااا! این فصل هم تموم شد! </p>
<p dir="RTL">امیدوارم به خوبی و خوشی یاد گرفته باشید! طبق معمول و همیشه! هر مشکلی بود میتونید تو همین تاپیک بگید یا پیغام خصوصی بدید! </p>
<p dir="RTL">3 اصل رو فراموش نکنید ! : علاقه! خلاقیت و تمرین!</p>
<p dir="RTL">موفق باشید!</p>
<p dir="RTL">میلاد</p>
آواتار کاربر
m.sevrus.m
پست: 68
تاریخ عضویت: چهارشنبه ۲۵ مرداد ۱۳۹۱, ۲:۰۸ ب.ظ
سن: 19
شغل: برنامه نویس- طراح وب
اینترنت: ADSL 2 Mbps
جنسیت: آقا
تشکر کرده: 40 دفعه
تشکر شده: 33 دفعه
تماس:

<p><strong>سلام دوستان عزیزم!! <br /></strong></p>
<p><strong>ببخشید که یکم تاخیر داشتم! فصل جدید رو میزارم!<br /></strong></p>
<p><strong>&nbsp;</strong></p>
<p style="text-align: center;"><strong><span style="color: #ff80ff; font-size: 32px;">عکس ها!</span> <br /></strong></p>
<p><strong>&nbsp;</strong></p>
<p><strong>&nbsp;</strong></p>
<p><strong>در این مبحث ما به چگونگی اضافه کردن تصاویر به صفحه وب می پردازیم.<br />یکی از مشکلات اصلی استفاده از تصاویر در صفحات وب ،&nbsp; مدت زمان طولانی تر بار گذاری تصاویر در صفحات&nbsp; نسبت به متون است . بنابراین هر چه حجم این تصاویر کمتر باشد ،&nbsp; مدت زمان بارگذاری صفحه کمتر می شود.<br />قبل از آغاز نمودن بحث باید به این نکته توجه کرد که <strong>gif:</strong> <span style="color: #ff0000;">g</span>raphics <span style="color: #ff0000;">i</span>nterchange <span style="color: #ff0000;">f</span>ormat و <strong>jpg: </strong><span style="color: #ff0000;">j</span>oint <span style="color: #ff0000;">p</span>hotographic <span style="color: #ff0000;">g</span>roup دو نوع فرمت رایج تصاویر در صفحات وب هستند.<br /></strong></p>
<p><span style="color: #ff0000;"><strong>&nbsp;</strong></span></p>
<p><span style="color: #ff0000;"><strong>&nbsp;</strong></span></p>
<p><span style="color: #ff0000;"><strong>استفاده از کدام یک بهتر است؟؟</strong></span></p>
<p><br />برای Banner&nbsp; ,&nbsp; button , divider&nbsp; و clipart ها بهتر است که از فرمت GIF&nbsp; استفاده کنیم.<br />از آنجایی که تصاویر با فرمت JPG را می توان فشرده کرد , هر چند که کیفیت آن کاهش پیدا می کند, ولی حجم آن نیز کم می شود, پس برای عکس ها بهتر است از فرمت JPG&nbsp; استفاده کنیم.</p>
<h3 dir="rtl"><span style="color: #ff0000;">قرار دادن تصاویر در صفحه وب:</span></h3>
<p style="text-align: justify;" dir="rtl">برای قرار دادن تصاویر در صفحه از دستور <img> استفاده می کنیم و برای مشخص کردن آدرس این تصویر از صفت src این دستور بهره می گیریم. بنابراین شکل کلی این دستور به صورت زیر است:</p>
<p style="text-align: justify;" dir="ltr">[syntax=html]<img src="url">[/syntax]</p>
<p style="text-align: justify;" dir="rtl">اگر مکان عکس در همان Folder ی باشد که فایل html&nbsp; شما در آن قرار دارد , کافی است به جای URL ، نام عکس همراه با فرمت آن را ذکر کنید.</p>
<p style="text-align: justify;" dir="rtl"><strong>مثال 1:</strong></p>
<p style="text-align: justify;" dir="rtl"><br />ابتدا پوشه&nbsp; test را در درایو C&nbsp; خود بسازید و یک تصویر با نام img1&nbsp;&nbsp; و با فرمت jpg&nbsp; در آن قرار دهید سپس&nbsp; ویراستار Notepad یا Notepad++ خود را باز کنید و در قست بدنه فایل html&nbsp; خود کد زیر را تایپ کنید و سپس این فایل را با نام دلخواه و با پسوند htm در درایو C&nbsp; خود و در پوشه test ذخیره کنید.</p>
<pre style="text-align: justify;" dir="ltr">[syntax=html]<br /><img src="img1.jpg"><br />[/syntax]</pre>
<p style="text-align: justify;" dir="rtl">اکنون با باز کردن فایل html خود , تصویر img1 را مشاهده خواهید کرد.<br /><br />اما اگر تصویر مورد نظر&nbsp; در یک سایت دیگر باشد باید آدرس کامل مکان عکس را به جای URL قرار دهید.</p>
<p style="text-align: justify;" dir="rtl"><strong>مثال 2:</strong></p>
<pre>[syntax=html]<br /><img src="http://www.siteURL.com/??/?.gif"><br />[/syntax]</pre>
<p style="text-align: justify;" dir="rtl"><span style="color: #ff0000;"><strong>در صورتیکه فایل مورد نظر در پوشه ای بیرون از پوشه جاری بود چطور عمل کنیم؟</strong></span></p>
<p style="text-align: justify;" dir="rtl"><br />برای اینکه از پوشه خارج شویم یا یک مرحله به عقب برگردیم کافی است در ابتدای آدرس /.. را قرار دهیم. به کمک این روش به هر تعداد که بخواهیم می توانیم به عقب</p>
<p style="text-align: justify;" dir="rtl">برگردیم. برای روشن شدن موضوع فرض کنید فایل html در پوشه files قرار گرفته یعنی آدرس آن به شکل myWebsite/<strong>files</strong>/page1.html است و عکس مورد نظر در پوشه</p>
<p style="text-align: justify;" dir="rtl">images با مسیر myWebsite/<strong>images</strong>/image1.jpg قرار دارد. برای آدرس دهی این عکس و قرار دادن آن در فایل page1.html باید ابتدا یک پوشه به عقب بر گردیم و سپس</p>
<p style="text-align: justify;" dir="rtl">وارد پوشه images شویم و نام فایل مورد نظر را وارد کنیم. یعنی آدرس عکس را باید به صورت images/image1.jpg/.. وارد نماییم. به شکل توجه کنید:</p>
<p style="text-align: justify;" dir="rtl">&nbsp;</p>
<p style="text-align: justify;" dir="rtl"><img src="http://webfocus.ir/portal/articleImages/htmlPart5_1.JPG" alt="" width="402" height="239" /></p>
<p style="text-align: justify;" dir="rtl">&nbsp;</p>
<h3 dir="rtl"><span style="color: #ff0000;">height , width :</span></h3>
<p style="text-align: justify;" dir="rtl">با استفاده از صفت های width و height از دستور <img> می توان اندازه تصاویر را تغییر داد. مقداری که برای این صفت تعریف می شود , می تواند بر حسب پیکسل یا درصد باشد. معمولا برای کاهش سایز تصاویر بهتر است از برنامه گرافیکی استفاده کرد تا از این صفت , زیرا استفاده از این صفت برای کاهش سایز مدت زمان بار گذاری صفحه وبتان را افزایش می دهد. در عین حال برای بزرگ تر کردن تصاویر از حالت عادی , استفاده از این صفت توصیه می شود.</p>
<p style="text-align: justify;" dir="rtl"><br /><strong>مثال 3:</strong><br />[syntax=html]<img src="img1.jpg" width="60" height="60">[/syntax]<br /><br /><strong>مثال 4:&nbsp;&nbsp;&nbsp; </strong></p>
<p style="text-align: justify;" dir="rtl"><br />[syntax=html]<img src="img1.jpg" width="50%" height="60%">[/syntax]<br /><br />در مثال 4 ارتفاع وعرض تصویر به ترتیب 60% و%50 از اندازه صفحه مرور گر شما را تشکیل می دهد.<br />یعنی با استفاده از درصد (%) به هر اندازه که صفحه مرورگرتان را تغییر سایز دهید , تصویر در آن صفحه نیز به همان نسبت کوچک یا بزرگ خواهد شد.در حالی که با استفاده از مقدار پیکسلی اندازه تصویر همواره ثابت خواهد ماند.</p>
<h3 dir="rtl"><span style="color: #ff0000;">border :</span></h3>
<p style="text-align: justify;" dir="rtl">با استفاده از این صفت می توان برای تصویر مورد نظر حاشیه یا کادری با ضخامت دلخواه ایجاد کرد. به طور پیش فرض و بدون استفاده از این صفت ، هیچ کادری دور تصویر وجود ندارد.<br /><br /><strong>مثال 5:</strong><br />کادر با ضخامت 4 دور تصویر</p>
<p style="text-align: justify;" dir="rtl"><br />[syntax=html]<img src="img1.jpg "&nbsp; border="4">[/syntax]</p>
<h3 dir="rtl"><span style="color: #ff0000;">alt :</span></h3>
<p style="text-align: justify;" dir="rtl">صفت alt که مخفف alternative است. سه کاربرد اصلی این صفت عبارتند از:</p>
<p style="text-align: justify;" dir="rtl"><br />1. هرگاه تصویر مورد نظر به هر دلیل نمایش داده نشود این متن به جای آن تصویر قرار می گیرد.<br />2. با قرار گرفتن موس روی تصویر توضیحی از آن نمایش داده میشود.<br />3. برای افراد معلول امکان خواندن توضیح تصویر توسط نرم افزارهای مخصوص محیا میشود.<br /><br /><strong>مثال 6:</strong></p>
<p style="text-align: justify;" dir="rtl">[syntax=html]<br /><"img src=" img1.jpg" alt="matn jaygozin>[/syntax]</p>
<h3 dir="rtl"><span style="color: #ff0000;">صفت های hspace&nbsp;&nbsp; و vspace :</span></h3>
<p style="text-align: justify;" dir="rtl">با استفاده از صفت&nbsp;&nbsp; hspace می توان فضایی را در سمت راست و چپ تصویر در نظر گرفت.</p>
<p style="text-align: justify;" dir="rtl"><br />با استفاده از صفت&nbsp;&nbsp; vspace می توان فضایی را در بالا و پایین&nbsp;&nbsp; تصویر در نظر گرفت.<br /><br /><strong>مثال 7:</strong></p>
<p style="text-align: justify;" dir="rtl"><br />[syntax=html]<img src="img1.jpg"&nbsp; Hspace="30" Vspace="10>[/syntax]<br /><br />این صفت معمولا هنگامی که یک متن را می خواهیم با تصویر بیاوریم&nbsp; بسیار مفید خواهد بود. زیرا متن در اطراف این فضا قرار خواهد گرفت و عکس محفوظ می ماند و در صورت لزوم این متن شکسته خواهد شد.</p>
<h3 dir="rtl"><span style="color: #ff0000;"><strong>align :</strong></span></h3>
<p style="text-align: justify;" dir="rtl">با استفاده از این صفت می توانیم چگونگی قرار گرفتن تصویر را در متن مشخص کنیم.&nbsp; مثلا مطلوب ما این است که تصویر در بالای متن قرار گیرد یا در پایین متن.<br />با استفاده از مقادیر&nbsp; top(بالا) , bottom (یایین) و middle (میانه یا وسط) می توان متن را در بالا , پایین یا وسط تصویر قرار داد.</p>
<p style="text-align: justify;" dir="rtl"><strong>مثال 8:</strong></p>
<p style="text-align: justify;" dir="rtl">[syntax=html]<br /><img src ="img1.jpg" align="top">[/syntax]</p>
<p style="text-align: justify;" dir="rtl">&nbsp;</p>
<p style="text-align: justify;" dir="rtl">علاوه بر مقادیر top , bottom وmiddle ، مقادیر دیگری نیز برای این صفت موجود است که به شرح هر یک می پردازیم.</p>
<p style="text-align: justify;" dir="rtl">Texttop :&nbsp; با این مقدار بالای تصویر با بالای بزرگترین کاراکتر تنظیم می شود.</p>
<p style="text-align: justify;" dir="rtl"><br />Absmiddle :&nbsp;با این مقدار وسط تصویر با وسط متن تنظیم می شود.Baseline : با این مقدار پایین تصویر با پایین کشیده ترین کاراکتر رو به پایین تنظیم می شود.</p>
<p style="text-align: justify;" dir="rtl"><br />left و right : با این دو مقدار می توان تصویر را به سمت چپ یا راست&nbsp; متن انتقال داد.<br /><br /><strong>مثال 9:</strong></p>
<p style="text-align: justify;" dir="rtl"><br />[syntax=html]<img src ="img1.jpg" align="left>[/syntax]</p>
آواتار کاربر
m.sevrus.m
پست: 68
تاریخ عضویت: چهارشنبه ۲۵ مرداد ۱۳۹۱, ۲:۰۸ ب.ظ
سن: 19
شغل: برنامه نویس- طراح وب
اینترنت: ADSL 2 Mbps
جنسیت: آقا
تشکر کرده: 40 دفعه
تشکر شده: 33 دفعه
تماس:

<p style="text-align: center;" dir="rtl"><span style="color: #0000ff; font-size: 36px;">جدول</span></p>
<p dir="rtl">&nbsp;</p>
<p dir="rtl">&nbsp;</p>
<p dir="rtl">معمولا به دو دلیل اصلی از جدول ها طراحان صفحه وب استفاده می کنند.</p>
<p dir="rtl">1) سازماندهی کردن اطلاعات&nbsp; با استفاده از جدول.<br />2) چیدمان یا طرح بندی صفحه با استفاده از جدول های مخفی (hidden tables)</p>
<p dir="rtl">تقسیم کردن صفحه به قسمت های مختلف , ایجاد کردن منوها , ایجاد کردن سر صفحه&nbsp; (header )&nbsp; , قرار دادن آسان تر عکس ها در مکان های دلخواه از صفحه, نوشتن متون در چند ستون در یک صفحه و .... از جمله کاربرد جدول ها می باشند.</p>
<p dir="rtl"><strong>جدول های ابتدائی (Basic Tables) :</strong></p>
<p dir="rtl"><strong><br /></strong>جدول ها با دستور <table>&nbsp; تعریف می شوند.هر جدول از سطرها (Rows) و ستونهایی(Columns) تشکیل شده است.</p>
<p dir="rtl"><strong>سطر ها (Rows</strong> <strong> ) :</strong></p>
<p dir="rtl"><strong><br /></strong>برای اضافه کردن سطرها به جدول از دستور <tr> ... </tr> استفاده می کنیم.</p>
<p dir="rtl"><strong>ستون ها (Columns):</strong></p>
<p dir="rtl"><strong><br /></strong>برای اینکه هر سطر را به ستون هایی تقسیم کنیم از دستور <td>...</td> استفاده می کنیم.</p>
<p dir="rtl">مثال :</p>
<div>
<div>
<pre>&nbsp;</pre>
[syntax=html]</div>
<div>&nbsp;</div>
<div style="text-align: left;">
<pre><table>
<tr>
&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <td>column 1 into first row </td></pre>
<p dir="ltr"><td>column 2 into first row</td>&nbsp; <br /> </tr></p>
<pre> <tr>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td>column 1 into second row</td> <br /> <td>column 2 into second row.</td> <br />&nbsp;&nbsp; </tr><br /></table></pre>
[/syntax]
<pre>&nbsp;</pre>
</div>
</div>
<p dir="rtl">&nbsp;</p>
<p>نتیجه به صورت زیر خواهد بود :</p>
<div>
<table width="66%" border="1">
<tbody>
<tr>
<td>
<p dir="ltr">column 1 into first row&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; column 2 into first row<br /> column 1 into second row&nbsp;&nbsp;&nbsp; column 2 into second row.</p>
</td>
</tr>
</tbody>
</table>
</div>
<p dir="rtl"><strong>&nbsp;</strong></p>
<p dir="rtl"><strong>صفت های دستور <table>: </strong></p>
<p dir="rtl"><strong>صفت align:</strong> &nbsp;با استفاده از این صفت می توان موقعیت جدول را در صفحه تعیین کرد.مقادیر left ,center ,right به ترتیب باعث نمایش جدول در سمت راست , مرکز وچپ صفحه خواهند شد.</p>
<p dir="rtl"><strong>صفت </strong> <strong>background </strong><strong>:</strong> برای وارد کردن عکس به عنوان پس زمینه جدول , ازاین صفت استفاده می کنیم.</p>
<p dir="ltr">&nbsp;</p>
<p>[syntax=html]</p>
<p dir="ltr"><table background ="URL"></p>
<p>&nbsp;</p>
<p dir="ltr"></table></p>
<p>[/syntax]</p>
<p dir="ltr">&nbsp;</p>
<p><strong>صفت bgcolor :</strong> برای تعریف کردن رنگ برای پس زمینه جدول.</p>
<p><strong>صفت border :</strong> &nbsp;برای&nbsp; تعیین کردن ضخامت حاشیه یا کادر جدول.</p>
<p><strong>صفت bordercolor :</strong> &nbsp;برای تعیین کردن رنگ کادر.</p>
<p><strong>صفت bordercolordark</strong>:مشخص کردن رنگی به عنوان&nbsp; سایه برای کادر جدول.</p>
<p><strong>صفت&nbsp; cellpadding :</strong> با استفاده از این صفت می توان فاصله ای بین خانه های جدول و محتوای جدول تعیین کرد.</p>
<p><strong>صفت&nbsp; &nbsp;cellspacing</strong><strong> :</strong> برای تعیین فاصله بین خانه های جدول.</p>
<p>&nbsp;</p>
<p><span style="color: #ff0000;">مثال :</span></p>
<p style="text-align: left;">&nbsp;</p>
<p>[syntax=html]</p>
<p style="text-align: left;">&nbsp;</p>
<p>&nbsp;</p>
<div style="text-align: left;">
<pre><table align = center cellpadding=4 cellspacing=14 &nbsp;bgcolor =white&nbsp; border=3&nbsp; bordercolor=black&nbsp; bordercolordark=gray><br /> <tr> <br /> <td>column 1 into first row </td><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<td>column 2 into first row</td>
</tr><br /> <tr><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <td>column 1 into second row</td>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <td>column 2 into second row.</td>
</tr><br /></table></pre>
</div>
<p>[/syntax]</p>
<div style="text-align: left;">&nbsp;</div>
<p><strong>صفت frame :</strong></p>
<p>&nbsp;این صفت به معنای چهار چوب و دارای مقادیر زیر است :</p>
<p><strong>void</strong> : برای پاک کردن کادرهای بیرونی.</p>
<p><strong>above</strong> : یرای نمایش&nbsp; دادن حاشیه بالایی جدول.</p>
<p><strong>below</strong> : برای نمایش دادن حاشیه پایینی جدول.</p>
<p><strong>lhs</strong> : حاشیه قسمت چپ جدول را نمایش می دهد.</p>
<p><strong>rhs</strong> : حاشیه قسمت راست جدول را نمایش می دهد.</p>
<p><strong>hsides</strong> : برای نشان دادن دو ضلع&nbsp; افقی حاشیه.</p>
<p><strong>vsides</strong> : برای نشان دادن دو ضلع&nbsp; عمودی حاشیه.</p>
<p>box : برای نمایش دادن همه اضلاع حاشیه جدول.</p>
<p><strong>صفت valign : </strong></p>
<p>این صفت دارای دو مقدار زیر است :</p>
<p><strong>top</strong> : محتوای جدول را با بالای خانه های جدول تنظیم می کند.</p>
<p><strong>botton</strong> : محتوای جدول را با پایین خانه های جدول تنظیم می کند.</p>
<p><strong>صفت width :</strong></p>
<p>این صفت که یا با پیکسل یا به صورت درصد بیان می شود عرض جدول را تعیین می کند.</p>
<p><span style="color: #ff0000;">مثال :</span></p>
<p>&nbsp;</p>
<p>[syntax=html]</p>
<pre><table align = center bgcolor =white border=4 bordercolor=black&nbsp;&nbsp; bordercolordark=gray&nbsp;&nbsp; valign = top frame=above><br /> <tr> <br />&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <td>column 1 into first row </td><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<td>column 2 into first row</td>
</tr></pre>
<p dir="ltr" align="left">&nbsp; <tr><br /> <td>column 1 into second row</td><br /> <td>column 2 into second row.</td> <br /> </tr><br /></table></p>
<p>&nbsp;</p>
<p>[/syntax]</p>
<p dir="rtl"><strong>صفت های&nbsp; دستورهای <td> و <tr> :</strong></p>
<p dir="rtl"><strong>صفت align :</strong> با استفاده از مقادیر left,right,center ازاین صفت می توان موقعیت محتوا را در مرکز , قسمت راست و چپ خانه های جدول تعیین کرد.</p>
<p dir="rtl"><strong>صفت </strong><strong>background</strong>: با استفاده از این صفت می توان عکسی را به عنوان پس زمینه خانه یا خانه های جدول قرار داد.</p>
<p dir="rtl"><strong>صفت bgcolor</strong><strong> :</strong> با استفاده از این صفت می توان برای خانه های جدول رنگ در نظر کرفت.</p>
<p dir="rtl"><strong>صفت bordercolor </strong>: با استفاده از این صفت می توان برای حاشیه یا کادر خانه ها رنگ مشخص کرد.</p>
<p dir="rtl"><strong>صفت bordercolordark :</strong> می توان رنگی را به عنوان سایه برای حاشیه خانه های جدول تعریف کرد.</p>
<p dir="rtl"><strong>صفت valign</strong><strong> :</strong> این صفت دارای مقادیر top,middle,bottom است که به ترتیب باعث نمایش محتوای خانه های جدول در پایین , وسط و بالای خانه ها می شود.</p>
<p dir="rtl"><strong>صفت width</strong>: عرض خانه های جدول را تعیین می کند که می تواند با پیکسل یا درصد مقداردهی شود.</p>
<p dir="rtl"><strong>صفت height :</strong> ارتفاع خانه های جدول را تعیین می کند که می تواند با پیکسل یا درصد مقداردهی شود..</p>
<p dir="rtl">صفت های بالا در هر دو دستور <td> و <tr> معتبر هستند اما صفت هایی که در زیر بیان می شوند مخصوص دستور <td</p>
<p dir="rtl"><strong>صفت colspan</strong><strong> :</strong> با استفاده ازاین صفت می توان تعیین کرد که عرض هر خانه به اندازه چند ستون باشد.برای جداولی کاربرد دارد که پهنای خانه های آن متفاوت است.</p>
<p dir="rtl"><strong>صفت rowspan</strong><strong> :&nbsp; </strong>با استفاده ازاین صفت می توان تعیین کرد که ارتفاع هر خانه به اندازه چند سطر باشد.برای جداولی کاربرد دارد که ارتفاع&nbsp; خانه های آن متفاوت است.</p>
<p dir="rtl">&nbsp;</p>
<p dir="rtl">&nbsp;</p>
<p dir="rtl">جدول هم تموم شد! <img src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /></p>
آواتار کاربر
m.sevrus.m
پست: 68
تاریخ عضویت: چهارشنبه ۲۵ مرداد ۱۳۹۱, ۲:۰۸ ب.ظ
سن: 19
شغل: برنامه نویس- طراح وب
اینترنت: ADSL 2 Mbps
جنسیت: آقا
تشکر کرده: 40 دفعه
تشکر شده: 33 دفعه
تماس:

<p style="text-align: center;"><span style="font-size: 32px; color: #ff0000;">پس زمونه! ببخشید زمینه!</span> <img src="images/smilies/icon_mrgreen.gif" alt="آقای سبز" /></p>
<p>&nbsp;</p>
<p><br />&nbsp;احتمالا تا به حال به این فکر افتادید که چطور میشه رنگ پس زمینه صفحه رو تغییر بدیم یا عکسی به عنوان تصویر پس زمینه انتخاب کنیم! این کار به سادگی با دو صفت از دستور <body> ممکنه که در این بخش با اونا آشنا میشیم!<br /><br />قبل از شروع بحث به یادآوری روش نامگذاری رنگ ها می پردازیم:</p>
<p><br />در زبان html سه روش برای انتخاب رنگ معرفی شده است:<br /><br /><span style="color: #ff0000;">1. استفاده از شماره رنگ در مبنای شانزده:&nbsp;</span></p>
<p><br />در این روش ترکیبی از سه رنگ اصلی قرمز ، سبز و آبی در مبنای شانزده بعد از یک علامت&nbsp; <span style="color: #ff0000;">number sign `#`</span>&nbsp; معرف رنگ مورد نظر خواهد بود.</p>
<p><img style="display: block; margin-left: auto; margin-right: auto;" src="http://s2.picofile.com/file/7625476983/rgb1.png" alt="" /></p>
<p style="text-align: right;">&nbsp;</p>
<p style="text-align: right;"><br /><br /><span style="color: #0080ff;">&nbsp;&nbsp;&nbsp; نگران نباشید نرم افزارهایی مثل فتوشاپ به راحتی به شما امکان انتخاب رنگ مورد نظر را بدون آشنایی با این روش می دهند کافی است که در پنجره Color Picker شماره رنگ دلخواه خود را کپی نمایید.</span></p>
<p style="text-align: right;"><br /><br /><span style="color: #ff0000;">2.استفاده از شماره رنگ در مبنای ده:</span></p>
<p style="text-align: right;"><br />در این روش نیز تمامی رنگ های دلخواه از ترکیب سه رنگ اصلی قرمز ، سبز و آبی ساخته خواهند شد البته نسبت ترکیب رنگ های ذکر شده به صورت rgb(x,y,z) بیان میشود که x y z به ترتیب بیانگر رنگ های قرمز ، سبز و آبی خواهند بود ، که می توان اعداد 0 تا 255 را جایگزین آنها کرد.</p>
<p style="text-align: right;"><br /><img src="http://s2.picofile.com/file/7625479886/rgb2.png" alt="" /></p>
<p style="text-align: right;"><br /><span style="color: #ff0000;">3.استفاده از اسامی رنگ های اصلی:</span></p>
<p style="text-align: right;"><br />در این روش از نام رنگ مورد نظر استفاده می کنیم برای مطالعه بیشتر درباره این روش به بخش لینک های رنگی قسمت سوم آموزش های html مراجعه کنید.</p>
<p style="text-align: right;"><br /><span style="color: #8080ff;"><span style="font-size: 22px;">پس زمینه رنگی:</span><br /></span></p>
<p style="text-align: right;"><br />برای انتخاب رنگ پس زمینه در زبان html از صفت bgcolor بهره می بریم. این صفت همانطور که قبلا بیان شد مربوط به دستور body است. برای استفاده از این صفت کافی است که رنگ مورد نظر را بر طبق یکی از روش های ذکر شده بعد از علامت مساوی قرار دهیم.</p>
<p style="text-align: left;">&nbsp;</p>
<p>[syntax=html]</p>
<p style="text-align: left;"><br /><body bgcolor="#dfac17"></p>
<p>&nbsp;</p>
<p style="text-align: left;"><br /><body bgcolor="rgb(241,175,100)"></p>
<p>&nbsp;</p>
<p style="text-align: left;"><br /><body bgcolor="red"></p>
<p>&nbsp;</p>
<p style="text-align: right;">&nbsp;</p>
<p>[/syntax]</p>
<p style="text-align: right;">&nbsp;</p>
<p style="text-align: right;"><span style="color: #8080ff; font-size: 22px;"><br /><br /><span style="color: #8080ff; font-size: 22px;">قرار دادن عکس به عنوان پس زمینه:</span><br /></span></p>
<p style="text-align: right;"><br />در صورتی که مایل باشید می توانید به جای انتخاب رنگ پس زمینه از یک عکس به عنوان تصویر پس زمینه استفاده نمایید این کار به سادگی به کمک صفت background انجام میشود. در این روش باید بعد از مساوی ، آدرس عکس مورد نظر را طبق یکی از روش های آدرس دهی مشخص نمایید - روش های آدرس دهی در زبان html قبلا در قسمت پنجم آموزش های اچ تی ام ال بیان شد.</p>
<p style="text-align: left;"><br /><br />[syntax=html]</p>
<p style="text-align: left;"><body background="blueSreen.jpg"><br /><body background="../images/bg.gif"><br /><body background="addresse ax"</p>
<p style="text-align: left;">[/syntax]</p>
<p style="text-align: right;"><br /><span style="color: #8080ff;">صفت bgproperties:</span></p>
<p style="text-align: right;"><br />این صفت زمانی به کار برده میشود که از عکس به عنوان پس زمینه صفحه استفاده نمایید ، در این صورت چناچه بخواهید عکس مورد نظر با&nbsp; scroll - مرور عمودی صفحه - جابجا نشود و محل آن ثابت بماند باید مقدار آن را برابر fixed قرار دهید. </p>
<p style="text-align: left;"><br /><br />[syntax=html]<body background="../images/bg.gif" bgproperties="fixed">[/syntax]</p>
<p style="text-align: right;"><br /><span style="color: #800080;">نکاتی که هنگام استفاده از تصویرپس زمینه باید رعایت شوند:</span><br /><span style="color: #800080;">1. توجه کنید که هرچه حجم تصویر انتخابی کمتر باشد بارگذاری - load - صفحه سریع تر انجام میشود.</span><br /><span style="color: #800080;">2.در صورتیکه عرض عکس انتخابی نسبت به وضوح -resolution - صفحه نمایش کمتر باشد تصویر زمینه به صورت tile نمایش داده میشود - تصویر مورد نظر تکرار خواهد شد.</span><br /><span style="color: #800080;">3.صفت background از bgcolor اولویت بالاتری دارد بدین معنا که اگر از هر دو صفت همزمان استفاده نمایید صفت background در نظر گرفته خواهد شد.</span></p>
آواتار کاربر
m.sevrus.m
پست: 68
تاریخ عضویت: چهارشنبه ۲۵ مرداد ۱۳۹۱, ۲:۰۸ ب.ظ
سن: 19
شغل: برنامه نویس- طراح وب
اینترنت: ADSL 2 Mbps
جنسیت: آقا
تشکر کرده: 40 دفعه
تشکر شده: 33 دفعه
تماس:

<p>ب<span style="background-color: #ff0000; font-size: 14px;">چه ها با این پست پرونده html هم بسته میشه! شما در کنار ما html رو به ساده ترین شکل ممکنه یاد گرفتید! انشالله که به کار بگیرید.</span><br /><br />شاید تا این مدت به فکر این افتاده باشید که بتوانید با دریافت اطلاعات ازکاربر خود تعامل بهترو بیشتری با او داشته باشید؟<br /><br /><br />فرم ها ازعناصری تشکیل شده اند که به کاربراجازه ورود اطلاعات را میدهند. در واقع اطلاعات (اطلاعات فرم) به طرف برنامه ای که بر روی سرور قرار دارد ، فرستاده می شود و بعد از تجزیه و تحلیل بر روی سرور،نتیجه به مخاطب نمایش داده می شود.<br /><br />&nbsp;از نمونه عناصر فرم می توان به موارد زیر اشاره کرد.<br /><br /><br />&bull; text fields (فیلدهای متنی)<br />&bull; textarea (ناحیه متنی)<br />&bull; radio buttons (دکمه های رادیویی)<br />&bull; checkboxes<br />&bull; drop-down menus (لیست های پایین افتان)<br /><br /><br />دستور<form> در واقع نقطه آغاز و پایان فرم را تعیین می کند و شما قادر خواهید بود انواع دستورات html (برای مثال تگهای جدول و عکس که قبلا آموخته اید)را در آن به کار ببرید.<br />ازصفات دستور <form>موارد زیر را می توان نام برد:<br /><br />method="post&nbsp; or&nbsp; get"<br /><br />action="url&nbsp; or&nbsp; filename"<br /><br />method:<br /><br /><br />بوسیله ی این صفت تعیین می کنید که اطلاعات فرم به چه نحوی به مقصد مورد نظر منتقل شوند.<br /><br />get: در این حالت داده ها و اطلاعات فرم از طریق url مرورگر منتقل خواهند شد و محدودیت هایی نیز خواهید داشت چراکه بعضی کاراکترها مثل & قابل استفاده نخواهند بود. همچنین از آنجا که داده ها در url مرورگر نمایش داده میشوند برای انتقال داده هایی مانند پسورد و ... مناسب نمی باشد.<br /><br />post: در صورتی که از method=post استفاده نمایید اطلاعات به صورت داخلی - internal - منتقل میشوند و در url نمایش داده نمیشوند. در این روش هیچ محدودیتی برای حجم داده های ارسالی و نوع کاراکترها نخواهید داشت.<br /><br />action:<br />معمولا مقدار این صفت آدرس فایلی است که پردازش فرم را انجام میدهد. برای آدرس دهی باید طبق قوانین آدرس دهی که قبلا فرا گرفتید عمل کنید.<br /><br />[syntax=html]<br /><br />&nbsp;<br /><br /><html><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <body><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <form action=" address " method="post"><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </form><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </body> <br /></html><br /><br />[/syntax]<br /><br />&nbsp;<br /><br />بر خلاف بسیاری از دستورات html فرم ها در مرورگر به تنهایی نمایش داده نمیشوند. به عنوان مثال دستورات مثال بالا هیچ چیزی را در مرورگر نمایش نخواهد داد. برای اینکه اطلاعات را از کاربر دریافت کنیم علاوه بر دستور فرم نیازمند دستورات دیگری هستیم که فیلدهای ورودی را درفرم مشخص کنند. اکثر فیلدهای ورودی در زبان html بوسیله دستور input مشخص میشوند. شکل کلی دستور input به صورت زیر است. که در این حالت type نوع فیلد ورودی و name نام فیلد ورودی را مشخص میکند.<br /><br />[syntax=html]<input type="fieldType" name="fieldName" />[/syntax]<br /><br />نکته قابل ذکر در رابطه با نام فیلدها این است که وقتی فرمی به برنامه ای که بر روی سرورقراردارد، فرستاده می شود هر یک از ویژگی های آن فرم با name مربوطه مدیریت می شود.به این ترتیب که ،اطلاعات هر کدام از عناصر فرم برای اینکه با یکدیگر تمایز داشته باشند با name های یکتایی از هم جدا می شوند و هنگامی که می خواهیم به اطلاعات هر عنصر از قبیل گزینه ی انتخاب شده و یا متن نوشته شده ، فرم دسترسی پیدا کنیم ،name&nbsp; آنها در واقع نوع و کیفیت رفتار مخاطب را بر می گرداند.<br />منظور جدول های دیتابیسه!<br /><br /><br />در ادامه با انواع فیلدهای ورودی بیشتر آشنا میشویم!<br /><br />فیلدهای متنی&nbsp;&nbsp; text:<br /><br /><br />زمانی که شما بخواهید به عنوان کاربر اطلاعاتی نظیر حروف و اعداد را وارد کنید این فیلد کاربرد فراوانی خواهد داشت .<br /><br />&nbsp;<br /><br />[syntax=html]<br /><br />First name : <input name="First_name" type="text" value="enter your First name" size="25"&nbsp;&nbsp;&nbsp;&nbsp; maxlength="25" /><br /><br /><br />Last name :<input name="Last_name" type="text" value="enter Your Family name" size="30"&nbsp;&nbsp; maxlength="30" /><br /><br />&nbsp;<br /><br />[/syntax]<br /><br />ویژگی پر کاربرد درtext :<br /><br />&bull; size=NO که میزان کارکترهای وارد شده را تعین میکند اما بصورت پیش فرض 20 کاراکتر است!<br />&bull; maxlength=NO&nbsp; حداکثر تعداد کارکتر های ورودی را کنترل می کند.<br />&bull; name=&rdquo; Textbox _Name&rdquo; : برای نام دهی<br />&bull; value=&rdquo;preview_Text&rdquo; متن اولیه در آن نوشته می شود.<br /><br />در صورتی که تمایل داشته باشید فیلد ها بصورتی باشند که در هنگام تایپ کردن دیده نشوند - فیلد ورودی پسورد - باید نوع فیلد را password انتخاب نمایید:<br /><br />[syntax=html]<br /><br />&nbsp;<br /><br />User Name: <input name="userName" type="text" value="user name" size="25"&nbsp;&nbsp;&nbsp;&nbsp; maxlength="25" /><br /><br /><br />Password :<input name="myPass" type="password " value="password" size="30"&nbsp;&nbsp; maxlength="30" /><br /><br />[/syntax]<br /><br />&nbsp;<br /><br /><br />textarea :<br /><br /><br />در یک textarea شما می توانید به میزان نامحدود کاراکتر وارد کنید ، که در مثال زیر بوضوح قابل مشاهده است.<br /><br />[syntax=html]<textarea name="content" rows="10" cols="30"> <br />&nbsp; In The Name Of God!<br /></textarea>[/syntax]<br /><br /><br />&bull; cols=NO : برای تعیین عرض این محوطه<br />&bull; rows=NO : برای تعیین سطر این محوطه<br /><br /><br />دکمه های رادیویی (radio buttons):<br /><br /><br />شما زمانی ازدکمه های رادیویی استفاده خواهید کرد که مایلید از بین تعدادی گزینه، یکی را انتخاب کنید.<br /><br />[syntax=html]<input type="radio" name="group1" value="Milk"> Milk<br /><br /><br /><input type="radio" name="group1" value="Butter" checked> Butter<br /><br /><br /><input type="radio" name="group1" value="Cheese"> Cheese[/syntax]<br /><br /><br />&bull; Name=&rdquo;radio_name&rdquo; اسم گروهی ازدکمه های radio ،هنگامی قرار است از بین تعدادی از آنها تنها یکی قابل انتخاب باشد، باید name آن دسته از از دکمه های radio&nbsp; یکسان باشد.<br />&bull; value=&rdquo; preview_Text&rdquo; متن اولیه در آن نوشته می شود.<br />&bull;&nbsp; checked:&nbsp; اگر بخواهیم دکمه ای بصورت اولیه انتخاب شده باشد این عبارت را می نویسیم.<br /><br />Checkbox<br /><br /><br />وقتی بخواهیم از بین گزینه ها انتخاب های گوناگونی را داشته باشیم checkbox&nbsp; ها بهترین راه حل هستند.که در ادامه مثالی را مشاهده خواهید کرد.<br /><br /><[syntax=html]input type="checkbox" name="option1" value="Milk"> Milk<br><br /><br />&nbsp;<input type="checkbox" name="option2" value="Butter" checked> Butter<br><br /><br /><input type="checkbox" name="option3" value="Cheese"> Cheese<br>[/syntax]<br /><br /><br />&bull; Name=&rdquo;checkbox_name&rdquo; اسم گروهی از checkbox ها<br />&bull; value=&rdquo;check_value&rdquo; این مقدار در نظر گرفته شده ،برگردانده می شود.<br />&bull; checked:&nbsp; اگر بخواهیم&nbsp;&nbsp; checkboxبصورت اولیه انتخاب شده باشد ،این عبارت را می نویسیم.<br /><br />معرفی <select><br /><br /><br />برای اینکه بتوانیم لیستی از موارد اتخابی تهیه کنیم از این تگ استفاده می کنیم ، که هر مورد را جلوی تگ <option> می نویسیم.<br /><br />[syntax=html]<select name="food"><br />&nbsp; <option value="Mike">Milk</option><br />&nbsp; <option value="Butter" selected> Butter </option><br />&nbsp; <option value="Cheese"> Cheese </option><br /></select>[/syntax]<br /><br />&bull; name="selecName": برای نام دهی<br />&bull; size=NO که تعداد مواردی که همزمان قابل نمایش است را تعین میکند .<br />&bull; Multiple:این ویژگی باعث می شود تا کاربر از لیست با فشار دادن دکمه ی ctrl یا shift چند گزینه را انتخاب نماید.<br />&bull; Selected : این ویژگی باعث می شود تا این مقدار بطور پیش فرض انتخاب شده باشد.<br />&bull; value=&rdquo;option_value&rdquo; این مقدار در نظر گرفته شده ،برگردانده می شود.<br /><br />Submit:<br /><br /><br />این عنصر برای تایید فرم استفاده می شود. زمانی که بر روی دکمه Submit فشار داده می شود فرم به آدرسی که به&nbsp; action نسبت داده می شود،فرستاده می شود.در حالیکه می توان با java script این گونه عناصر را کنترل کرد.<br /><br />[syntax=html] Press The Submit <input name="Submit" type="submit" value="Ok" />[/syntax]<br /><br />&bull; Name=&rdquo;submit_name&rdquo; اسم این دکمه<br />&bull; value=&rdquo;submit_text&rdquo; مقداری که روی دکمه نوشته می شود<br /><br />reset :<br />برای ساختن دکمه ای که فرم را به حالت اولیه باز می گرداند.<br /><br />[syntax=html]<br /><br />&nbsp;<br /><br />Press The Reset&nbsp; <input name="reset" type="reset" value="reset" /><br /><br />[/syntax]<br /><br />&nbsp;<br /><br />&bull; Name=&rdquo;reset_name&rdquo; اسم این دکمه<br />&bull; value=&rdquo;reset_text&rdquo; مقداری که روی دکمه نوشته می شود<br /><br />button:<br /><br /><br />برای ساختن دکمه به کار برده می شود.این دکمه به تنهایی کاری برای ما انجام نمی دهد.با دانستن زبان script&nbsp; می توانیم دستوراتی به این دکمه ها داد تا کاری را انجام دهند.<br /><br />[syntax=html]<br /><br />&nbsp;<br /><br />Press The Button <input name="button" type=" button " value=" button " /><br /><br />[/syntax]<br /><br />&nbsp;<br /><br />&bull; Name=&rdquo; button _name&rdquo; اسم این دکمه<br />&bull; value=&rdquo; button _text&rdquo; مقداری که روی دکمه نوشته می شود.<br /><br />image button:<br /><br /><br />این ویژگی کارکردی شبیه دکمه ی submit دارد که در واقع این طور است که وقتی بر روی عکسی کلیک می شود فرم به آدرسی که به&nbsp; action نسبت داده می شود،فرستاده می شود.<br /><br />[syntax=html]<input type="image" src="url" name="image" width="60" height="60">&nbsp; [/syntax]&nbsp;&nbsp;&nbsp; &nbsp;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<br /><br />ویزگی های به کار رفته شده در قسمت عکس ها بطور مفصل بحث شده است و برای جلوگیری از زیاد شدن حجم مطالب از ذکر آنان خودداری می کنیم.<br /><br /><br />در انتها به 2 ویژگی در تمامی تگهای اصلی فرم وجود دارد اشاره می کنیم:<br /><br /><br />1. disabled: اگر از این تگ استفاده کنیم آن عنصر نمایش داده می شود اما غیر فعال می باشد.<br />2. tabindex=NO الویت حرکت cursor&nbsp; در هنگامی که دکمه tab از صفحه کلید فشار داده می شود.به این صورت که هر چه شماره کمتر باشد الویت بیشتر است.در صورت برابری شماره ها حرکت cursor به ترتیب قرار گرفتن آنها حرکت می کند.</p>
<p><br /><br /><span style="background-color: #ff0000; font-size: 16px;">دوستان عزیزم ، html هم تموم شد و امیدوارم درباره اون مشکلی نداشته باشید ، هرچند</span><br /><br /><span style="background-color: #ff0000; font-size: 16px;">عمویی بازم میگه که هر سوالی داشتید همینجا مطرح کنید! انشالله سربلند و پیروز باشید!</span><br /><br /><span style="background-color: #ff0000; font-size: 16px;">کپی کردن مطالب انحصارا با ذکر منبع یعنی php-bb.ir بلا مانع است.</span><br /><br /><span style="background-color: #ff0000; font-size: 16px;">موفق و موید باشید.</span><br /><br /><span style="background-color: #ff0000; font-size: 16px;">میلاد الیاسی ، زمستان 91</span><br /><br /></p>
موضوع جدید ارسال پست

بازگشت به “برنامه نویسی - Programing”