کلمات کلیدی: آموزش, html, برای, طراحی, سایت,
موضوع بسته شده است 
 
امتیاز موضوع:
  • 2 رأی - میانگین امتیازات: 5
  • 1
  • 2
  • 3
  • 4
  • 5
آموزش html برای طراحی سایت
نویسنده پیام
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,724
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #11
RE: آموزش html برای طراحی سایت
نحوه ساختن جدولها (tables)
تگ جدول
جدولها يکي از بهترين و مفيدترين عنصرها در صفحات وب ميباشند، با استفاده از آنها ما مي توانيم اطلاعات و عناصررا در يک صفحه سازمان دهي و مرتب کنيم . کليه اطلاعات يا عناصر ديگر وب را ميتوانيم داخل رديف ها يا ستون هاي يک جدول قرار دهيم بدون آنکه خطوط جدول مشخص باشد و يا در صورت نياز خطوط آنها نمايان ميشود. کمتر کسي را پيدا ميکنيد که از اين عنصر استفاده نکند و زمانيکه تجربه کافي براي طراحي يک سايت بدست آورديد به اهميت اين عنصر پي خواهيد برد.تگ مشخصه جدول <table></table> ميباشد. اما براي اضافه کردن رديف به يک جدول از<tr></tr>و براي ستون از تگ <td></td> استفاده ميکنيم. پس ساختار کلي يک جدول بدين صورت ميباشد:
<table>
<tr><td>this is a table.</td></tr>
</table>
هر چه تگهاي رديف و ستون بيشتر باشد به همان اندازه ما در جدولمان خانه خواهيم داشت. مجموعه کد بالا نشان دهنده يک جدول با يک رديف و يک ستون است يعني اين جدول داراي يک خانه ميباشد. يکي از ويژگيهاي جدول که محبوبيت آنرا زياد ميکند اينست که هر خانه از آن ميتواند به طور مجزا زمينه رنگي و يا عکسي در زمينه آن داشته باشد البته اندازه هاي هر خانه هم ميتواند متفاوت باشد.
<A name=border>border
خب براي اينکه بتوانيم يک جدول را در مرورگر خود ببينيم بايد با خصوصيت border=" " آشنا شويم. اين خصوصيت دور جدول يک کادردرست ميکند البته اگر اين خصوصيت را برابربا صفر قرار دهيم يا آنرا ننويسيم کادر دور جدول در مرورگر نمايان نخواهد شد و هر چه عدد بزرگتري بگذاريم کادر ضخيم تري خواهيم داشت، در ضمن<A style="TEXT-DECORATION: none" href="http://iran-talk.ir/htmltut/color.htm" target=_blank>
رنگ کادرهم با bordercolor=" " که برابر با عدد هگز رنگ است تعيين ميشود. border ويژگيهاي ديگري هم دارد، به طور مثال شما ميتوانيد خصوصيت frame=" " را به تگ <table> اضافه کرده و آنرا برابر با يکي از کلمات void, above, below, hsides, vsides,lhs, rhs, box قرار دهيد تا کادر دور جدول را کنترل کنيد. اين کلمات هر کدام يک قسمت از کادر را نمايان ميکنند.
rule
ويژگي ديگري هم هست ولي بهتره اول يک جدول درست کنيد تا مطلب جا بيافتد، برنامه Notepad را باز کنيد و کد زير را وارد کرده و به اسم Table.htm ذخيره کنيد:
<table border="4" bordercolor="#ff0000">
<tr>
<td>cell 01</td><td>cell 02</td>
</tr>
<tr>
<td>cell 03</td><td>cell 04</td>
</tr>
</table>
<A href="http://iran-talk.ir/htmltut/examples/table.htm" target=_blank>مثال
حالا خصوصيت rules=" "را به تگ<table> اضافه کنيد و هر بار يکي از کلمات all, none, groups, rows, cols را جلوي آن قرار دهيد و فايل را دوباره ذخيره کنيد تا تاثير اين خصوصيت را ببينيد. مثال
Alignment
ميتوانيد با استفاده از خصوصيت align=" "که در تگ <td>مينويسيد محل قرارگرفتن يک عنصر مانند متن را تعيين کنيد که ميتوانيد اين خصوصيت را با کلمات left, right, center, justify مقداردهي کنيد. <A href="http://iran-talk.ir/htmltut/examples/tablealign.htm" target=_blank>مثال
height, width
با خصوصيات height=" " , width=" " هم اندازه طول و عرض يک جدول را ميتوان کنترل کرد که بايد آنها را برابر با عدد در مقياس پيکسل قرار دهيد در ضمن شما ميتوانيد از درصد % هم استفاده کنيد مانند width="90%" که اين جدول نود درصد عرض يک صفحه را اشغال ميکند. <A href="http://iran-talk.ir/htmltut/examples/tablesize.htm" target=_blank>مثال
bgcolor
براي تعيين رنگ زمينه يک جدول ازbgcolor=" " که با عدد هگز رنگها مقدار دهي ميشود استفاده ميکنيم. اين خصوصيت را در تگ هاي <tr> و <td> هم مي توانيد بکار بريد.
<A href="http://iran-talk.ir/htmltut/examples/tablebgcolor.htm" target=_blank>مثال
cellspacing, cellpadding
تگ <table> دو خصوصيت ديگر هم دارد که شما با بکار بردن آنها ميتوانيد فاصله بين خانه هاي جدول را از هم کنترل کنيد يعني فضاي خالي بين خانه ها اضافه کنيد، اين خصوصيت اين است cellspacing=" "و ديگري فاصله بين متن داخل يک خانه در جدول با لبه هاي چارچوب آن خانه است که خصوصيت cellpadding=" " اين وظيفه را به عهده دارد. هرچه مقداردهي عددي آنها بزرگتر باشد فاصله ها بيشتر خواهد بود. <A href="http://iran-talk.ir/htmltut/examples/tablespacing.htm" target=_blank>مثال
header: <th></th>
حالا که با درست کردن رديف و ستون در جدول آشنا شديد، ميتوانيد براي هر ستون و رديف عنوان گذاري کنيد و يک تيتر به بالاي ستون يا به ابتداي يک رديف اضافه کنيد. در هر قسمت که شما به يک تيتر و عنوان نياز داشتيد بجاي تگ <td></td> از تگ <th></th> استفاده کنيد که در اين حالت متن نوشته شده در آن خانه بصورت ضخيم ظاهر شده و از بقيه متمايز ميشود. <A href="http://iran-talk.ir/htmltut/examples/tableheader.htm" target=_blank>مثال
colspan, rowspan
گاهي اوقات شما نياز داريد تا چند خانه در يک رديف يا يک ستون از جدول را ترکيب کنيد تا يک خانه درست شود و بطور مثال يک تيتر و عنوان در آن قرار دهيد که براي ترکيب خانه هاي يک ستون از خصوصيت rowspan=" " و براي يک رديف از colspan=" " در تگ <td> استفاده ميکنيد و مقدار آنرا برابر با تعداد خانه هايي که بايد يکي شوند، قرار ميدهيد.<A href="http://iran-talk.ir
/htmltut/examples/tablespan.htm" target=_blank>مثال
caption
بطور معمول هر جدول داراي يک اسم و يا يک توضيح ميباشد که آنرا با تگ <caption></caption> در ميان تگهاي <table></table> مشخص ميکنند. اين تگ داراي خصوصيت align=" " ميباشد با کلمات top, bottom, left, center, right مقداردهي ميشود.<
A href="http://iran-talk.ir/htmltut/examples/tablecaption.htm" target=_blank>مثال
thead, tbody, tfoot
اگر جدول شما داراي ستونها و رديفهاي زيادي است پس تکرار خصوصيات در هر تگ مربوطه بسيار دشوار است. شما ميتوانيد بصورت گروهي اين خصوصيات را کنترل کنيد. براي کنترل رديفها بايد آنها را به سه قسمت تقسيم کرد، قسمت سرشامل فقط خانه هاي رديف اول، بدنه شامل همه رديفهاي وسط و قسمت انتهايي شامل فقط خانه هاي آخرين رديف، که قسمت سر را با <thead></thead> ، قسمت بدنه را با <tbody></tbody> و قسمت انتهايي را با <tfoot></tfoot> کنترل ميکنيم. اين تگ داراي خصوصيت align نيز ميباشد.<
A href="http://iran-talk.ir/htmltut/examples/tablerowgroup.htm" target=_blank>مثال
colgroup
همچنين با تگ <colgroup></colgroup> ميتوانيد خصوصيات کليه ستونهاي يک جدول را کنترل کنيد که اين تگ علاوه بر خصوصيات گفته شده در اين بخش داراي خصوصيت span=" " نيز ميباشد که توسط آن تعداد ستونهايي که بايد کنترل شوند را تعيين ميکنيد. <
A href="http://iran-talk.ir/htmltut/examples/tablecolgroup.htm" target=_blank>مثال
summery
يک خصوصيت ديگر نيز براي تگ <table> هست بنام summery=" " که توصيفي از جدول ميباشد ولي در جايي نمايش داده نميشود. اين خصوصيت براي مرورگرهايي که فقط متن را نمايش ميدهند و يا مرورگرهاي مخصوص افراد ناتوان ، مفيد ميباشد که بهتر است از آن استفاده کنيد.
به اين موضوع هم توجه داشته باشيد که شما ميتوانيد داخل يک جدول، جدول ديگري هم درست کنيد يعني داخل هرخانه جداگانه يک جدول بسازيد که به اين روشNested table گفته ميشود.

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
06-12-2011 06:06 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,724
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #12
RE: آموزش html برای طراحی سایت
ساخت اجزای فرم
فرم چيست؟
فرمها تنها عنصري هستند که بيننده سايت ميتواند اطلاعاتي را بطور مستقيم وارد کرده که اين اطلاعات بعد از تجزيه و تحليل يا در فايلي ذخيره شده يا فرستاده ميشود. شما ميتوانيد داخل يک صفحه يا يک وب سايت چندين فرم داشته باشيد بطور مثال براي چند نوع نظرسنجي از بينندگان که هر کدام از اين فرمها را با استفاده از خصوصيت name=” “در تگ <form> بايد نامگذاري کنيد تا اطلاعات مربوط به هر فرم با نام همان فرم پردازش شود. فرمها داراي اجزاي متفاوتي با وظيفه مشخص ميباشند که بايد قبل از تگ پايان دهنده </form> آنها را بکار برد. بعضي از اين اجزا عبارتند از: کادرهاي متني text fields ، قسمت انتخابات چند گزينه اي checkboxes وتک گزينه اي radio buttons ، ليستهاي پايين کشيدني drop-down lists و دکمه هاي تأييد submit وپاک کننده reset .
فرمها توسط برنامه هايي نظير ASP, CGI و با افزودن خصوصيات action=” “, method=” “, enctype=” “ در تگ <form> اطلاعات وارده را پردازش کرده و به وب سرور ميفهماند که به چه روش و در کجا اطلاعات ذخيره يا فرستاده شود. وب سرور به کامپيوتري که محتواي سايت شما بر روي آن قرار دارد گفته ميشود.
<A name=button>دکمه (button)
کليه اجزاي ساخته شده در يک فرم بدون بودن دکمه تأييد بي فايده هستند، چون بعد از فشردن اين دکمه است که اطلاعات وارده در فرم پردازش ميشوند. پس ابتدا به ساختن اين دکمه ميپردازيم. براي ساختن دکمه ها در يک فرم به دو روش ميتوانيم عمل کنيم:
روش اول: با استفاده از تگ <button></button> که داراي دو خصوصيت name=” “براي نامگذاري و type=” “براي مشخص کردن نوع دکمه که submit و يا reset ميباشد . در بين تگ آغازکننده و پايان دهنده هر چي نوشته شود در ظاهر دکمه نمايان ميشود
<button name="button 01" type="submit"> OK </button>
OK
روش دوم: با استفاده از تگ <input> که مانند روش اول دو خصوصيت name=” “که بايد کلمه button در جلوي آن بيايد و type=” “که ميتواند هم submit باشد و يا reset.
<input name="button" type="submit">

فرقي که اين دو روش با هم دارند در اينست که شما در روش اول هر نوشته اي را بخواهيد در روي دکمه هنگام نمايش صفحه در مرورگر نشان داده ميشود اما در روش دوم شما دخالتي در اين کار نداريد و به صورت پيش فرض کلمه submit , reset نمايان ميشود. البته ميتوانيد بجاي دکمه هاي ساخته شده توسط مرورگراز عکس هم استفاده کنيد يعني شکل يک دکمه را طراحي کنيد و در فرم قرار دهيد که خصوصيت type=” “ را برابر با کلمه image قرار ميدهيد و با خصوصيت src=” “ آن را آدرس دهي ميکنيد:
<input name="button" type="image" src="images/button01.gif">

لازم بذکر است که در اين تکنيک فقط از حالت submit دکمه بايد استفاده کرد.
<A name=text>text field, text area
خب بعد از ساختن دکمه ها ميپردازيم به بقيه اجزاي يک فرم. از اين به بعد ما با تگ
<input name=” “ type=” “>
وخصوصياتش زياد کار داريم . ما براي وارد کردن متن در فرم بسته به نيازمان از دو مدل کادرمتني ميتوانيم استفاده کنيم، يکي براي وارد کردن يک خط متن کوتاه که چند کلمه بيشتر نباشد و کادر ما هم به صورت خطي ميباشد و ديگري براي يک متن بلند است و کادر ما داراي چندين رديف ميباشد.
در مدل اول ازاين تگ استفاده ميکنيم:
<input name="textfield 01" type="text”>
دقت کنيد که کلمه text بايد در جلوي خصوصيت type=” “بيايد تا مرورگر بفهمد چه اجزائي از يک فرم را نمايش ميدهد. توسط خصوصيت size=” “ که با عدد مقدار دهي ميکنيد اندازه نمايش اين کادر خطي در مرورگر را کنترل ميکنيد و توسطmaxlength=” “ حداکثر تعداد حروفي را که بيننده مجاز هست تا وارد کند را کنترل ميکنيد.
Textfield :
اگر قرار باشد که بيننده داخل اين کادر خطي ، کلمه رمز را وارد کند پس بجاي خصوصيت type=”text” بايد از type=”password” استفاده کنيد تا هر متني که وارد شود بصورت ستاره در مرورگر نمايش داده شود.
Password :
اما مدل ديگري هست که متنهاي بلند داخل آن نوشته خواهد شد که بايد از تگ<textarea></textarea> استفاده کنيد که جدا از خصوصيت name=” “از خصوصيات cols=” “ , rows=” “براي کنترل رديفها و ستونهاي کادر بکار ميبريد.
this is a textarea example.
<A name=label>label
زمانيکه شما اجزاي فرم را اضافه مي کنيد، مي توانيد کنار هر کدام يک متني وارد کنيد تا نام آن قسمت درمرورگر مشخص شود. اما با افزودن تگ <label> کنترل بيشتري روي نام واجزاي يک فرم خواهيد داشت چون مي توانيد توسط اين تگ يکي از اجزاي فرم را احاطه کنيد، بدين صورت:
<label> Name :
<input type="text" name="textfield01">
</label>
که اين کد به صورت زير ظاهر مي شود،
Name:
دراين تگ، توسط خصوصيت for مي توانيد مشخص کنيد که label مربوط به کدام قسمت فرم است و در اين حالت نيازي به احاطه کردن اجزاي فرم نيست،
<label for="textfield01"> Name : </label>
<input type="text" name="textfield01">
<A name=taborder>Tab order
يکي از خصوصيات مفيد تگهاي html بنام tabindex است که کاربرد زيادي در عنصر فرم دارد و به همين خاطر در اين قسمت آنرا توضيح ميدهيم. تاکنون متوجه شده ايد که با زدن دکمه Tab بر روي کيبورد، مکان نما با ترتيب خاصي بر نقاط مختلف صفحه متمرکز مي شود که مي توانيم اين ترتيب حرکت را به کنترل خود در بياوريم. قبول کنيد که حرکت کردن بين اجزاي يک فرم توسط موس مخصوصاً زمانيکه يک فرم طولاني پيش رو داريم، بسيار سخت تر از حرکت با دکمه Tab کيبورد است. با اضافه کردن خصوصيت tabindex به تگهاي يک فرم و مقداردهي اين خصوصيت به ترتيب اعداد مي توانيم تمرکز مکان نما را از يک نقطه به نقطه مورد نظر به کنترل خود در آوريم. دقت کنيد که مقادير اين خصوصيت تکراري نباشد. به کد زير توجه بفرماييد:
<input type="text" name="field1" tabindex="1">
<input type="password" name="pass1" tabindex="2">
<textarea name="area1" cols="10" rows="5" tabindex="3"></textarea>
<A name=file>file field
گاهي اوقات نياز هست که به همراه اطلاعات وارد شده در فرم، فايلي هم ضميمه و به سرور فرستاده شود. براي اين حالت بايد در فرم، تگ <input> را نوشت و خصوصيت type آنرا برابر با کلمه file قرار داد. هنگاميکه اين خصوصيت را وارد مي کنيد، مرورگر بطور اتوماتيک يک کادر متني و يک دکمه براي جستجوي فايل بنام Browse نمايان مي کند. در نظر داشته باشيد که براي اين تگ تنظيمات وب سروربسيار مهم است وگرنه فايل فرستاده شده، خراب خواهد شد و اگر هم فرم قرار است که به<A style="TEXT-DECORATION: none" href="http://iran-talk.ir/htmltut/form02.asp"> ايميل فرستاده شود پس به اين نکات بايد دقت کنيد که در تگ اصلي فرم حتماً enctype="multipart/form-data" را نوشته و در تگ file field هم accept="text/plain" را وارد کنيد که در اين حالت فايلهاي متني txt به درستي فرستاده مي شود. کلاً در بيشتر مواقع و با تنظيمات درست هم ممکن است فايل خراب شود.

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
06-12-2011 06:10 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,724
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #13
RE: آموزش html برای طراحی سایت
استفاده از فريم

فريم چيست؟
هنگاميکه بخواهيد دو يا سه صفحه را در يک صفحه جاي دهيد بايد از عنصر فريم يا چارچوب استفاده کنيد. اين عنصر زماني کارآيي دارد که ميخواهيد يک قسمت، در همه صفحات ثابت باشد. به طور مثال شما در سمت چب صفحه يک ليست ثابت داريد و ميخواهيد هر وقت بيننده روي هر گزينه از اين ليست که کليک کرد توضيحات مربوط به آن در سمت راست نمايان شود. پس ابتدا يک صفحه براي آن ليست درست کنيد و براي اطلاعات هر گزينه هم يک صفحه بسازيد و آنها را در يک فريم بگذاريد.
به مجموعه صفحات گنجانده شده در يک صفحه frameset مي گويند و به هر صفحه از آن يک frame يا يک چارچوب گفته ميشود. در ساختار اصلي کدها، ديگر تگ <body> نوشته نميشود و جاي آن تگ <frameset></frameset> قرارميگيرد، البته هر صفحه يعني هر فريم را که کد نويسي ميکنيد مانند ساختار معمولي است و از تگ <body></body>بايد استفاده کنيد ولي هنگاميکه صفحات را در يک frameset ميگذاريد بايد در ساختار کد آن بجاي <body>از <frameset> استفاده کرد،
<html>
<head>
</head>
<frameset>
</frameset>
</html>
توجه داشته باشيد که براي ديدن source code فريمها بايد بر روي هر فريم کليک راست کرده و گزينه view source را انتخاب کنيد و براي مشاهده کدهاي يک frameset بايد از منو view مرورگر اقدام نماييد.
<A name=cols> cols, rows
هر فريم ميتواند عمودي يا افقي در صفحه قرار گيرد يا يک frameset مخلوطي از چند فريم عمودي و افقي باشد که هر کدام از آنها توسط خصوصيتي در تگ<frameset> کنترل ميشوند. به طور مثال اگر دو فريم داشته باشيم و آنها را بخواهيم به صورت عمودي در صفحه قرار دهيم از خصوصيت cols=” “ استفاده ميکنيم و اين خصوصيت را برابر با درصد اشغال هر فريم قرار ميدهيم يعني اگر ما دو فريم داشته باشيم و بخواهيم که يکي از آنها %30 صفحه را اشغال کند پس ديگري %70 را اشغال خواهد کرد و تگ آن بدين صورت ميشود:
<frameset cols=”30%,70%”>
دقت کنيد که اين اعداد با علامت ويرگول از هم جدا ميشوند. اگرهم بخواهيد دو فريم افقي داشته باشيد از خصوصيت rows=” “ استفاده ميکنيد. اما براي قراردادن دو صفحه يا دوفريم درframeset بايد هر کدام از آنها را بطور جداگانه آدرس دهي کنيد و تگ آن براي هر کدام از فريمها به اين صورت است:
<frameset cols=”50%,50%”>
<frame src=”01.htm”>
<frame src=”index.html”>
</frameset>
<A title=Frameset href="http://iran-talk.ir/htmltut/examples/framesettest.htm" target=_blank> مثال
آدرس دهي و نامگذاري
همانطور که ملاحظه ميفرماييد جلوي خصوصيت src=” “بايد آدرس صفحه را بنويسيد. خصوصيت ديگري هم هست که به غير ازخصوصيت src بايد به اين تگ اضافه شود و آن name=” “ است که براي نامگذاري هر فريم بکار ميرود. اين نامگذاري زماني براي ما مفيد است که هرگاه ما بخواهيم دريکي از فريمها لينک بگذاريم هنگاميکه روي لينک کليک ميشود بايد مشخص شود که اطلاعات آن لينک در کدام فريم نمايش داده شود، به طور مثال فريم سمت چپ داراي يکسري لينک است که اطلاعات هر کدام بايد در فريم سمت راست نمايش داده شود پس به لينکها بايد نام فريم مورد نظر را بدهيم تا مشخص شود که اطلاعات را در کدام فريم نشان دهند. اما جدا از نامگذاري هر فريم براي اينکار بايد به هر لينک خصوصيت target=” “ را اضافه کرد و آنرا برابر با نام منتخب هر فريم قرار داد.
<frameset cols="30%,70%">
<frame name="left" src="htmlpages/01.html">
<frame name="right" src="htmlpages/index01.htm">
</frameset>
اگر هم يک لينک در فايل 01.html داشته باشيم و بخواهيم درindex01.htm نمايش داده شود، طبق گفته هاي بالا:
<a href="htmlpages/info.html" target="right"> info.html </a>
<A title="Link test" href="http://iran-talk.ir/htmltut/examples/framelink.htm" target=_blank> مثال
frame border
شما اگر يک frameset درست کرده باشيد متوجه يک کادر بين فريمهاي داخل آن شده ايد، براي برداشتن اين کادر ميتوانيد frameborder="no" و يا border=”0” رابه تگ <frameset> اضافه کنيد.
<A title="Frame border" href="http://iran-talk.ir/htmltut/examples/framesetborder.htm" target=_blank> مثال
noresize
هنگاميکه frameset در مرورگر نمايش داده شود، بيننده سايت شما ميتواند سايز هر فريم را تغيير دهد يعني وقتي که نشانگر موس را روي لبه هر فريم ببرد ميتواند آنرا با drag کردن کم يا اضافه کند که براي جلوگيري از تغيير سايز هر فريم خصوصيت noresize رابه تگ <frame> بيافزاييد.
<A title=noresize href="http://iran-talk.ir/htmltut/examples/framesetresize.htm" target=_blank> مثال
scrolling
خصوصيت ديگري هم هست که scroll bar هر فريم را کنترل ميکند، هر فريم داراي scroll ميباشد يعني ميتوانيد صفحه داخل فريم را به چپ وراست يا بالاوپايين حرکت دهيد که با خصوصيت scrolling=” “ کنترل ميشود و آنرا برابر با کلمات Yes,no,auto قرار دهيد.
<A title=scrolling href="http://iran-talk.ir/htmltut/examples/framesetscroll.htm" target=_blank> مثال
noframes
بعضي از مرورگرها هستند که از اين عنصر پشتيباني نمي کنند و فريم ها را نشان نمي دهند، به همين دليل شما مجبور هستيد تا به کاربراني که از اين گونه مرورگرها استفاده مي کنند، اعلام کنيد که مرورگر آنها اين قابليت را ندارد. پس فراموش نکنيد که اين قطعه کد را هميشه به frameset اضافه کنيد:
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
06-12-2011 06:12 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,724
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #14
RE: آموزش html برای طراحی سایت
صدا و تصوير در وب

با پيشرفت تکنولوژي در وب و نسخه هاي جديد مرورگرها که توانايي استفاده از مولتي مديا را در اختيار ما مي گذاشتن، انگيزه اي ايجاد شد تا صوت و تصوير هم در صفحات وب گنجانده شوند و سايتها را جذاب تر کنند. در اين صفحه راههاي اضافه کردن فايل صوتي به يک صفحه را مي آموزيد و در صفحه بعد افزودن فايلهاي تصويري را ياد خواهيد گرفت.
اهميت حجم فايل صوتي
فايلهاي صوتي يکي از سنگين ترين عناصر در وب از لحاظ حجم مي باشند که بايد در انتخاب آنها بيشتر دقت کنيد، چون هر چه فايل سنگين تر باشد دانلود شدن آن و همچنين صفحه وب کند تر و خسته کننده تر خواهد شد.
<A name=MIME>MIME
هنگاميکه يک فايل صوتي به صفحه اضافه شود، مرورگر به تنهايي قادر به پخش آن نمي باشد و بايد به کمک يک برنامه کاربردي ديگر اينکار را انجام دهد. مرورگرها توسط اطلاعاتي که از فايل دريافت مي کنند مي توانند تشخيص دهند که چه برنامه اي را بايد براي پخش آن فايل صدا بزنند که اين اطلاعات را MIME مي گويند.
MIME مخفف Multipurpose Internet Mail Extensions است.
زمانيکه مرورگر با يک MIME ناشناخته مواجه شود، پيغام خطاي “File Not Found” را در صفحه نمايش مي دهد.
<A name=format>فرمتهاي فايلهاي صوتي
WAV يکي از فرمتهاي صوتي که کيفيت بالايي هم دارد و البته حجم زيادي هم اشغال مي کند و در سيستم عامل ويندوز بکار مي رود. نوع MIME اين فرمت برابر است با audio/wav .
AU اين فرمت متعلق به سيستمهاي عامل UNIX, Linux است و خاصيت آن داشتن حجم کم و البته با کيفيت پايين تر، که نوع MIME اين فرمت برابر است با audio/basic .
AIFF اين فرمت هم متعلق به کامپيوترهاي Macintosh است با کيفيت بالا و حجم بسيار بالا. نوع MIME آن برابر است با audio/aiff .
MIDI اين فرمت با فرمتهاي ديگر صوتي تفاوتهايي دارد. در اين فرمت بجاي ذخيره شدن فرکانس صدا، آهنگ صدا يا همان نت هاي موسيقي را ذخيره و پخش مي کند. بزرگترين مزيت آن حجم بسيار پايين و عيب آن، پخش آهنگ بدون گفتار است. نوع MIME اين فرمت audio/midi است.
<A name=bg>افزودن فايل صوتي به زمينه صفحه
با اضافه کردن تگ <bgsound> به سورس کد صفحه وب، مي توانيد آهنگ يا صدايي را در زمينه صفحه وارد کنيد تا هنگاميکه بيننده صفحه را باز مي کند آن فايل بدون نياز به برنامه کاربردي ديگري پخش شود. اين تگ در حال حاضر کاربردي ندارد چون فقط مرورگراينترنت اکسپلورر نسخه هاي 5.5 به پايين آنرا پشتيباني مي کنند. اين تگ داراي دو خصوصيت ، src براي آدرس دهي فايل صوتي و loop براي کنترل تکرار دفعات پخش مي باشد.
<bgsound src=”mymusic.mid” loop=”2”>
<A name=link>افزودن فايل صوتي بصورت لينک
يکي ديگر از راههاي اضافه کردن فايل صوتي به صفحه از طريق قرار دادن لينک و تگ <a> است که بيننده با کليک کردن بر روي آن لينک مي تواند هم آن فايل را بر روي هارد ديسک خود ذخيره کند و يا آنرا از همانجا باز کند. البته در مرورگراينترنت اکسپلورر نسخه 6.0 ابتدا پيغامي ظاهر مي شود که اگر دکمه Yes را بزنيد آن فايل توسط خود مرورگر پخش خواهد شد. در تگ لينک بايد از خصوصيت href براي آدرس دهي استفاده کنيد، فقط دقت کنيد که پسوندها را درست بنويسيد.
<a href=”musics/mysong.wav”> music file </a>
<A href="http://iran-talk.ir/htmltut/examples/sound01.htm" target=_blank>مثال
افزودن فايل صوتي از طريق object
يکي از بهترين راههايي که مي توان فايل صوتي را به صفحه اضافه کرد، از طريق تگ <object> است. يکي از مزايايي که اين تگ دارد اينست که، شما مي توانيد يک متني را بين تگ آغازين و پايان دهنده اضافه کنيد که اگر مرورگر نتوانست آن فايل را بشناسد، نوشته مذکور در صفحه نمايان شود. در اين تگ براي آدرس دهي از خصوصيت data و براي تعيين MIME آن فايل از خصوصيت type استفاده مي شود، همچنين از خصوصيت height, width براي کنترل طول و عرض لوگوي برنامه پخش کننده فايل استفاده کنيد که در صورت لزوم آنها را برابر با عدد صفر قرار دهيد تا لوگو در صفحه ظاهر نشود.
<object data=”musics/sound.wav” MIME=”audio/wav”>
Your browser doesn’t support this audio format.
</object>
<A href="http://iran-talk.ir/htmltut/examples/sound02.htm" target=_blank>مثال
نکته: هنگاميکه صفحه داراي اين تگ را باز کنيد يک پيغام هشدار در مورد ActiveX ظاهر خواهد شد که براي اجراي فايل بايد دکمه Yes را بزنيد.
Embed file
تکنيک ديگر براي افزودن يک فايل مولتي مديا به صفحه از طريق تگ embed است. اين تگ استاندارد W3C نيست و در بيشتر مرورگرها اجرا نمي شود. از خصوصيت src براي آدرس دهي فايل و براي کنترل طول و عرض لوگوي برنامه کمکي از خصوصيت height, width مي توانيد استفاده کنيد. اين تگ داراي خصوصيات autostart و loop مي باشد که با کلمات false يا true مقدار دهي مي شوند.
<embed src="godfather.mid" autostart="false"
loop="false" height="40" width="150">
<A href="http://iran-talk.ir/htmltut/examples/embed.htm" target=_blank>مثال
Streaming Audio
احتمالاً متوجه شديد که راههاي ذکر شده در بالا به درستي جواب نمي دهند و به خاطر مشکلات امنيتي ، مرورگرها فايلها را پخش نمي کنند. اما تکنيک ديگري هم هست که کليه مرورگرها از آن پشتيباني کرده و حتي با استفاده از آن مي توانيد فايلهاي سنگين را هم در صفحات بکار بريد بدون آنکه بيننده زمان زيادي را براي دانلود آنها صرف کند. اين تکنيک استفاده از روش Streaming Audio and Video است که در صفحه بعد به آن مي پردازيم.

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
06-12-2011 06:20 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,724
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #15
RE: آموزش html برای طراحی سایت
تگهای قسمت Head
<!doctype>
در اين بخش ميخواهم در مورد تگهاي قسمت <head> برايتان توضيح دهم . همانطور که
در بخش های قبلی در ایران تاک ميدانيد تگهاي Html را به دو بخش اصلي تقسيم کرديم ، يکي قسمت سر يا همان head ديگري قسمت بدنه يا body که هر دو مابين دو تگ اصلي
<html></html> نوشته ميشوند، اما يک تگ هم وجود دارد که خارج از اين قانون عمل ميکند و در اولين خط شروع کدنويسي بايد آنرا بنويسيم يعني قبل از تگ آغاز کننده <html>و آن DTD يک صفحه وب ميباشد که مخفف Document Type Definition است و کار آن معرفي نوع تگها خصوصيات آنها و قوانيني که بايد در آن صفحه وب بکار برده شود که بطور خلاصه در تگ مربوط به آن توصيف ميشود. تگ مشخصه DTD ، <!doctype> ميباشد و مانند بقيه تگها داراي خصوصياتي هست، البته اين تگ اختياري است چون بعضي از مرورگرها بدون آن هم صفحه را نمايش ميدهند ولي بهتر است که نوشته شود.
هر نسخه از HTML يک DTD مخصوص به خود را دارد و نسخه هاي معتبر HTML عبارتند از: 2, 3.2, 4 و نسخه جديد آن Html 4.01 ميباشد و اگر از کدهاي XHTML هم استفاده ميکنيد ، آنرا هم بايد مشخص کنيد. همانطور که در بخشهاي قبل گفتم اعلام و به رسميت شناختن تگهاو نسخه هاي HTML , XHTML به عهده <A style="COLOR: blue; TEXT-DECORATION: underline; text-underline: single" href="http://iran-talk.ir/">W3C ميباشد .
DTD براي HTML 4.0
<!DOCTYPE html public “-//w3c//DTD HTML 4.0//en”>
و براي XHTML 1.0
<!DOCTYPE xhtml public “-//w3c//DTD XHTML 1.0 strict//en”>
بعد از اين تگ روال معمول کدنويسي را انجام ميدهيم. حالا ميپردازيم به تگهاي مربوط به قسمت سر يا همان head .
<head></head>
مابين اين دو تگ اطلاعات مربوط به همان صفحه وارد ميشود که در مرورگر نشان داده نميشود و فقط اسم صفحه است که در نوار عنوان مرورگر نمايش داده ميشود. اين اطلاعات بيشتر براي سايتهاي جستجوگر مانند گوگل مفيد ميباشند که در بخش اين سايتها بيشتر توضيح خواهم داد.
تگهاي لازم براي اين قسمت به شرح زير ميباشند:
<title>, <base>, <meta>, <link>, <script>, <style>
<title></title>
بين اين دو تگ هر چي نوشته شود در نوار عنوان مرورگر title bar نمايان خواهد شد. دقت داشته باشيد که از اسامي کوتاه استفاده کنيد چون جمله طولاني را نصفه نشان ميدهد و همچنين اگر فارسي بنويسيد در سيستمهايي که قابليت فارسي ندارند به صورت علامت سوال نمايان ميشود.
<A name=base> <base>
در مواردي که بخواهيد آدرس اصلي وب سايت را همان ابتدا معرفي کنيد ، از اين تگ استفاده ميکنيد. خاصيت اين تگ اينست که در هنگام درست کردن لينکهاي داخلي وب سايت ديگر نيازي به نوشتن آدرس کامل نيست و فقط ميتوانيد در خصوصيت href=” “ لينکها، اسم دايرکتوري در صورت نياز و اسم خود فايل را بنويسيد.
<base href="http://www.sitename.com">
دقت کنيد که نوشتن پروتکل http اجباري است.
<A name=meta> <meta>
متا تگها اطلاعات مربوط به موتورهاي جستجوگر را کنترل ميکنند. در اين تگها هر نوع اطلاعات که براي جستجو نياز باشد را وارد ميکنيد ، مانند کلمات کليدي يا نام سازنده سايت و يا تاريخ راه اندازي و از اين قبيل که در بخش سايتهاي جستجوگر بيشتر توضيح خواهم داد. خصوصياتي را که در اين تگ ميتوانيد بکار بريد،
http-equiv=” “, name=” “ , content=” “
براي معرفي کلمات کليدي سايت بايد خصوصيت http-equiv=”keyword” قرار دهيم و کلمات مورد نظر را در خصوصيت content=” “ وارد کنيم،
<meta http-equiv=”keyword” content=”html, web, amoozesh, amouzesh”>
همچنين ميتوانيد نوع رمزگذاري encoding مرورگر را در اين قسمت معين کنيد که براي بکار بردن حروف فارسي بايد از utf-8 استفاده کنيد که در قسمت فارسي نويسي توضيح خواهم داد.
<meta http-equiv=”content-type” content=”text/html;charset=utf-8”>
اين تگ به مرورگر ميفهماند که بايد از حروف و علامتهاي يونيکد براي نمايش صفحه استفاده کند. براي وارد کردن اطلاعات ديگر هم مانند زير عمل ميکنيد:
<meta name=”author” content=”your-name”>
اگر شما نميخواهيد که صفحه اي در هارد ديسک کاربر سايت شما ذخيره شود تا بتوان آنرا بصورت offline هم ببينند، از اين تگ بايد استفاده کنيد:
<meta name=”pragma” content=”no-cache”>
يا اينکه آن صفحه هر لحظه اطلاعاتش عوض ميشود و ميخواهيد تا بيننده سريع آن اطلاعات را ببيند، از خاصيت refresh مرورگر استفاده کرده و اين تگ را اضافه ميکنيد:
<meta http-equiv=”refresh” content=”5”>
که آن عدد زمان بر حسب ثانيه است. اگر ميخواهيد که بعد زمان معين همان صفحه به يک صفحه ديگر يا يک وب سايت ديگر هدايت شود خصوصيت زير را اضافه کنيد
<meta http-equiv=”refresh” content=”5;url=http://www.sitename.com/page01.htm”>
<A name=link> <link>
اين تگ براي زماني است که ما بخواهيم از اطلاعات يک فايل مانند style sheet در آن صفحه استفاده کنيم،
<link rel=”stylesheet” href=”stylesheets_folder/menu.css”>
<A name=script> <script>
کدهايي مانند javascript را در اين تگ کنترل ميکنيم که در بخش جاوا اسکريپت توضيح خواهم داد.
<A name=style><style>
تگ مشخصه Style sheet ميباشد که در بخش مربوطه توضيح داده شده است.

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
06-12-2011 06:22 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,724
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #16
RE: آموزش html برای طراحی سایت
خصوصيات تگ body

همانطور که ميدانيد هر عنصر HTML که بخواهيد در صفحه وب نمايش داده شود بايد ما بين تگ body يعني <body></body> قرار گيرد. در کليه فايلهاي HTML اين تگ وجود دارد مگر اينکه بخواهيد از عنصر فريم استفاده کنيد که در اينصورت بايد <frameset> را بکار بريد.
اما خود تگ body جدا از اهميتي که در فايلهاي HTML دارد، خود داراي خصوصياتي مي باشد که در نمايش صفحه موثر است که به توضيح آنها خواهيم پرداخت.
bgcolor اين خصوصيت وظيفه کنترل رنگ زمينه يک صفحه را به عهده دارد که مي توانيد از کد هگز رنگها ،
<body bgcolor=”#ccff00”>
و يا نام رنگ را بکار بريد، مانند:
<body bgcolor=”black”>
<A title="Body background color" href="http://iran-talk.ir/htmltut/examples/bodybgcolor.htm" target=_blank>مثال
نکته: دقت کنيد که رنگ زمينه با رنگ فونتهاي داخل صفحه يکسان نباشد، چون در اين حالت متن در صفحه محو خواهد شد.
background توسط اين خصوصيت بجاي رنگ مي توانيد از عکس هم در زمينه صفحه استفاده کنيد، فقط کافيست که آنرا برابر با آدرس عکس مورد نظر قرار دهيد،
<body background=”images/filename.gif”>
توجه داشته باشيد که حجم عکس در سنگيني صفحه و پايين آمدن سرعت تکميل شدن آن موثر است. هنگاميکه از اين خصوصيت استفاده مي کنيد آن عکس نسبت به اندازه اي که دارد در صفحه تکرار مي شود تا فضاي آنرا بپوشاند که با استفاده از StyleSheet تکرار آنرا مي توانيد کنترل کنيد.
<A title="Body background" href="http://iran-talk.ir/htmltut/examples/bodybg.htm" target=_blank>مثال
bgproperties هنگاميکه عکسي به زمينه اضافه مي شود همراه با ديگر عناصر صفحه مانند عنصر متن scroll مي شود يعني به بالا و پايين يا چپ و راست حرکت مي کند که با بکار گرفتن اين خصوصيت و مقدار دادن آن با fixed عکس در زمينه ثابت مي ماند و عناصر بر روي آن حرکت مي کنند.
<body background=”../images/bg.jpg” bgproperties=”fixed”>
<A title="Background properties" href="http://iran-talk.ir/htmltut/examples/bodybgpro.htm" target=_blank>مثال
لازم بذکر است که اين خصوصيت در حال حاضر فقط در مرورگرهاي اينترنت اکسپلورر و اپرا قابل اجراست.
topmargin توسط اين خصوصيت حاشيه بالاي صفحه کنترل مي شود که مقدار آن عدد در مقياس پيکسل مي باشد.
<A name=leftm>leftmargin حاشيه سمت چپ صفحه را کنترل مي کند که اگر نيازي به حاشيه نداريد آنرا برابر با عدد صفر قرار دهيد.
<body topmargin=”0” leftmargin=”0”>
<A title=Margins href="http://iran-talk.ir/htmltut/examples/margin.htm" target=_blank>مثال
text اگر بخواهيد متن يک صفحه بطور کل يک رنگ واحد داشته باشد و خصوصيت رنگ را مرتب در تگها تکرار نکنيد ، مي توانيد اين خصوصيت را به تگ body اضافه کنيد و آنرا برابر با نام رنگ يا کد هگز آن قرار دهيد.
<body text=”#99ccff”>
<A title="Body text color" href="http://iran-talk.ir/htmltut/examples/textcolor.htm" target=_blank>مثال
dir اين خصوصيت براي تعيين جهت نوشتن حروف است که از راست به چپ باشد مانند فارسي که در اينصورت بايد برابر با مقدار rtl و چپ به راست مانند حروف انگليسي که برابر با ltr مي باشد. توجه داشته باشيد که اگر اين خصوصيت را در تگ body بکار بريد و آنرا برابر rtl قرار دهيد محل scroll صفحه مرورگر از سمت راست به چپ منتقل مي شود.
<A name=lang>lang اين خصوصيت تعيين زبان بکار گرفته شده براي متن آن صفحه را به عهده دارد که بصورت قراردادي دو حرف از اسم آن زبان را بايد بنويسيد، مثلاً براي زبان فارسي fa و براي انگليسي en را مي نويسيد.
<body lang=”fa” dir=”rtl”>
<A title="Body language and direction" href="http://iran-talk.ir/htmltut/examples/bodydir.htm" target=_blank>مثال
link در حالت عادي کليه لينکهاي داخل يک صفحه برنگ آبي هستند ولي اگر بخواهيد رنگ آنها را تغيير دهيد اين خصوصيت را بکار مي بريد و مانند هميشه يا نام رنگ و يا کد هگز آنرا مي نويسيد. البته خصوصيت ديگري هم در اين ارتباط هست که بخواهيد رنگ لينک فعال يا همان لينکي که در حال کليک کردن بر روي آن هستيد تغيير کند بايد از خصوصيت alink و اگر رنگ لينکهاي مشاهده شده را بخواهيد تغيير دهيد از خصوصيت vlink استفاده مي کنيد.
<body link=”#990000” alink=”#009900” vlink=”#000099”>
<A title="Link color" href="http://iran-talk.ir/htmltut/examples/bodylink.htm" target=_blank>مثال
خصوصيات ديگري هم هست مانند onload که مربوط به زبان جاوا اسکريپت مي باشد که در بخش مربوطه با آنها آشنا خواهيد شد.

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
06-12-2011 06:27 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,724
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #17
RE: آموزش html برای طراحی سایت
Html 4.01 و تفاوتهاي آن با نسخه 4.0

HTML 4.01 نسخه اصلاح شده 4.0 ميباشد که براي هماهنگي با نسخه جديد يعنيXHTML و نسل بعدي زبان وب که XML باشد، در وب منتشر شد. اين نسخه با تغييرات کمي عرضه شد اما شما مجبور هستيد که اين قوانين را رعايت کنيد اگر ميخواهيد وب سايت شما هماهنگي بيشتري با نسخه جديد داشته باشد. بعضي از اين تغييرات را در اين بخش برايتان ميگويم ولي نکات اساسي در اين زمينه را در بخش XHTML خواهم گفت. بهتر است که شما بعد از فراگيري مجموعه HTML 4 قوانين بکار برده شده در XHTML را رعايت کنيد تا در آينده وب سايت شما به مشکل جدي برنخورد.استفاده يکسري تگها از طرف انجمن W3C ديگر توصيه نميشود وحتي بعضي از آنها ممنوع شدند.
براي شروع کدنويسي در HTML 4.01 اولين چيزيکه بايد رعايت کنيد DTD آن فايل است که در حال حاضر مرورگر ها بدون آن هم صفحه را نمايش ميدهند ولي در آينده ممکن است اينچنين نباشد. همانطور که ميدانيد DTD بايد قبل ازتگ <HTML> نوشته شود. براي اين نسخه سه مدل در نظر گرفته شده است که در مدل اول صفحه شما فقط از تگهاي استاندارد و قابل قبول استفاده خواهد کرد:
<!DOCTYPE HTML PUBLIC
‘’-//W3C//DTD HTML 4.01//EN”
“http://iran-talk.ir/TR/html4/strict.dtd”>
همچنين اگر از عنصر Frame استفاده ميکنيد اين مدل را بکار بريد:
<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Frameset//EN”
“http://iran-talk.ir/TR/html4/frameset.dtd”>
بعد از مشخص کردن DTD آن صفحه بايد دقت کنيد که در اين نسخه بايد کليه تگها ، پايان دهنده داشته باشند. بعضي از تگها يا تگ پايان دهنده نداشتند و يا نوشتن آنها اجباري نبود مانند <img>,<p> . اما همه بايد بسته شوند و آنهاييکه تگ پايان دهنده نداشتند، در همان تگ و قبل از بستن تگ با علامت > بايد علامت slash يعني/ را بگذارند. مانند:
<img src=”…/images/mypic.gif” />
اين قبيل تگها را بدين صورت بکار بريد:
<meta/>, <br/>, <blockquote/>, <hr/>, <basefont/>, <Q/>, <li/>, <dt/>, <dd/>, <img/>, <area/>, <frame/>, <input/>, <param/>, <bgsound/>
نکته: اگر تگ <a> در حالت Anchor بود يعني حالتيکه لينک به يکي از نقاط داخل همان صفحه پيوند داده خواهد شد، بايد آنرا بصورت <a/> بنويسيد.
اينها قوانيني بودند که در اين نسخه تغيير کردند تا اين نسخه با XHTML سازگار شود.

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
06-12-2011 06:35 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,724
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #18
RE: آموزش html برای طراحی سایت
آموزش Xhtml
زبان XHTML که مخفف EXtensible HyperText Markup Language در تاریخ 26 ژانویه سال 2000 منتشر شد و به قول بعضيها همان HTML 5 میباشد که در واقع اینچنین نیست. این زبان نسل جدید زبان وب ميباشد که داراي یکسري اصول و قوانین خاص است تا کمبودهايHTML را در مورد دستگاههاي کوچک الکترونیکي که به وب هم متصل ميشوند مانند تلفنهاي همراه، را جبران کند.

مدتي است که وب آماده معرفي زبان آينده خود يعني XML است که XHTML اين وظيفه را بعهده دارد. در اين نسخه کدهايHTML بايد در DTD نوشته شوند. هر مرورگر وب ، داخل خود يک نوع DTD دارد و به همين دليل است که يکسري از دستورات نسخه هاي مختلف HTML در بعضي از مرورگرها نمايش داده نميشوند. از اين به بعد شما بايد دستورات HTML را در DTD خاص خود بکار بريد، چون انجمن W3C ميخواهد يک استاندارد را معين کند تا هماهنگي لازم بين زبان وب و کليه User-agent ها برقرار شود. User-agent برنامه هاي تحت وب مانند مرورگرها را گويند.
W3C پيشنهاد داده که HTML بايد يک برنامه کاربردي تحت XML باشد تا برنامه نويسان وب مجبور به رعايت استاندارد آن شوند.
با قبول کردن DTD برايXHTML و نوشتن آن ، بايد اصول و قوانين اين نسخه را هم رعايت کنيد البته اگر ميخواهيد صفحات شما سازگاري بيشتري با نسل آينده وب داشته باشد.
پس ابتدا از DTD براي اين نسخه شروع ميکنيم . همانطور که ميدانيد DTD براي نسخه هاي HTML لازم نبود و بدون آن هم صفحات بخوبي نمايش داده ميشدند ولي براي XHTML نوشتن و تعيين آن اجباري است. در حال حاضر سه نوع DTD براي حالتهاي مختلف وجود دارد:
حالت اول براي صفحه اي است که فقط از دستورات صحيح XHTML استفاده شده و براي مرورگرهايي است که از CSS پشتيباني ميکنند،<! DOCTYPE HTML PUBLIC
“-//W3C//DTD XHTML 1.0 Strict//EN”
“http://iran-talk.ir/TR/xhtml1/DTD/xhtml1-strict.dtd”>

حالت بعدي براي صفحه اي است که مخلوطي از کدهاي HTML و XHTML باشد و مرورگرهاييکه از CSS پشتيباني نميکنند هم آنرا نمايش دهند،<! DOCTYPE HTML PUBLIC
“-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://iran-talk.ir/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

و حالت آخر هم براي استفاده عنصر فريم Frame در صفحه است،<! DOCTYPE HTML PUBLIC
“-//W3C//DTD XHTML 1.0 Frameset//EN”
“http://iran-talk.ir/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

فراموش نکنيد که نوشتن يکي از آنها اجباري است.
حالا نکاتي را که بايد در اين نسخه رعايت کنيد:
<LI dir=rtl style="MARGIN-LEFT: 0in; DIRECTION: rtl; MARGIN-RIGHT: 0.5in; unicode-bidi: embed; TEXT-ALIGN: right">
نوشتن تگهاي</head></body> که در HTML اجباري نبود در XHTML اجباري است. <LI dir=rtl style="MARGIN-LEFT: 0in; DIRECTION: rtl; MARGIN-RIGHT: 0.5in; unicode-bidi: embed; TEXT-ALIGN: right">
وجود تگهاي پايان دهنده اجباري است مانند: <p>….</p>, <hr/>, <br/> <LI dir=rtl style="MARGIN-LEFT: 0in; DIRECTION: rtl; MARGIN-RIGHT: 0.5in; unicode-bidi: embed; TEXT-ALIGN: right">
کليه تگها و خصوصيات آنها بايد بصورت حروف کوچک انگليسي نوشته شود. مانند: <body bgcolor=”#ffcc45”> <LI dir=rtl style="MARGIN-LEFT: 0in; DIRECTION: rtl; MARGIN-RIGHT: 0.5in; unicode-bidi: embed; TEXT-ALIGN: right">
مقادير خصوصيات در تگها بايد بين دو علامت “…” قرار گيرند.
ترتيب قرار گرفتن تگها داخل هم بايد رعايت شود، <b><i> TEXT </b></i> روش غلط
<b><i> TEXT </i></b> روش صحيح
بعضي از خصوصيات در HTML نياز به مقداردهي نداشتند اما در XHTML آنها را بايد مقداردهي کنيم، <input type=”radio” checked> روش غلط
<input type=”radio” checked=”checked”> xhtml روش صحيح در

<LI dir=rtl style="MARGIN-LEFT: 0in; DIRECTION: rtl; MARGIN-RIGHT: 0.5in; unicode-bidi: embed; TEXT-ALIGN: right">
در تگ <pre> فقط از متن بايد استفاده کنيد و داخل آن از تگهاي ديگر نميتوانيد استفاده کنيد. <LI dir=rtl style="MARGIN-LEFT: 0in; DIRECTION: rtl; MARGIN-RIGHT: 0.5in; unicode-bidi: embed; TEXT-ALIGN: right">
يک فرم را داخل فرم ديگر نبايد بکار بريد. <LI dir=rtl style="MARGIN-LEFT: 0in; DIRECTION: rtl; MARGIN-RIGHT: 0.5in; unicode-bidi: embed; TEXT-ALIGN: right">
دستورات فايل CSS بايد به صورت حروف کوچک نوشته شوند و بهتر است که براي Style sheet از فايل خارجي استفاده کنيد. <LI dir=rtl style="MARGIN-LEFT: 0in; DIRECTION: rtl; MARGIN-RIGHT: 0.5in; unicode-bidi: embed; TEXT-ALIGN: right">
کليه خصوصياتي را که ميتوان با style sheet کنترل کرد از خصوصيات HTML آنها بهتر است استفاده نشود.
دستورات زبان جاوااسکريپت هم بهتر است در فايل خارجي باشد و توسط تگ <link> فراخواني شوند ولي اگر ميخواهيد داخل XHTML DTD از آنها استفاده کنيد بايد مانند زير عمل کنيد: <script language=”JavaScript” type=”text/javascript”>
<![CDATA [
document.write(“ Hi Friends “);
] ]>
</script>
ديگر از تگ <!-- ….. --> براي بيان نظريه و توضيح نميتوانيد استفاده کنيد. در صورت نياز مانند زير عمل شود،
<[CDATA […comment…] ]>

همانطور که ميبينيد يکسري محدوديتهايي هست که در HTML نبود و سادگي زبان HTML که باعث محبوبيت فراوان آن شده در نسل جديد دارد از بين ميرود ولي در عوض به گفته W3C دو خاصيت بسيار مهم در نسخه جديد زبان وب وجود دارد، Extensibility و Portability .

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
06-12-2011 06:42 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,724
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #19
RE: آموزش html برای طراحی سایت


Cascading Style Sheet
آموزش استایل شیت

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

<A name=set>تعیین الگو و style
هر style باید برای یک تگ خاص تعریف شود . به محتوای داخل تگی که میخواهیم یک style نسبت دهیم selector یا انتخاب کننده میگویند که الگوی تعریف شده در تگ آغاز کننده یک عنصر تا تگ پایان دهنده آن تاثیر خواهد داشت.
برای تعیین و تعریف یک الگو ابتدا باید selector را مشخص و بنویسیم مانند h1 سپس خصوصیات و مقادیر آنها را بین دو علامت { } بگذاریم که طرز نوشتن خصوصیت و مقدار آن بین { } به این ترتیب میباشد:
ابتدا خصوصیت را نوشته سپس علامت : میگذاریم و بعد مقدار مشخصه آنرا مینویسیم ،h1 { color:green }

اگر بخواهیم چند خصوصیت را به یک selector نسبت دهیم ، بعد از هر کدام یک ; میگذاریم،h1 { color:green; text-align:center }


<A name=method>روشهای تعریف الگو و style
Style ها را به سه روش میتوان تعریف کرد:
<LI dir=rtl style="MARGIN-LEFT: 0in; DIRECTION: rtl; MARGIN-RIGHT: 0.5in; unicode-bidi: embed; TEXT-ALIGN: right">
روش اول: به عنوان یک الگوی خارجی که اطلاعات در یک فایل نوشته میشود و با پسوند .css ذخیره میشود که در تگ <link> داخل قسمت head آدرس دهی و فراخوانده میشود.
<LI dir=rtl style="MARGIN-LEFT: 0in; DIRECTION: rtl; MARGIN-RIGHT: 0.5in; unicode-bidi: embed; TEXT-ALIGN: right">
روش دوم: style را میتوانیم در قسمت head نوشته و جاسازی کنیم که با تگهای<style></style> مشخص میشوند.
روش سوم: با قرار دادن style به عنوان خصوصیت در یک تگ و مقدار دهی آن. مانند تگ زیر:
<div style=”color:green”>


نکته: اگر برای یک selector به چند روش style تعیین شود، آن الگویی که به تگ نزدیکتر است اجرا خواهد شد، پس طبق این اصل روش سوم نسبت به بقیه مؤثرتر است. در ضمن هیچ محدودیتی در تعیین selector ها ویا خصوصیات آنها نیست. به مثال زیر توجه کنید:<style>
body { color:yellow; background-color:red }
h1,h2, h3, p { color:green }
</style>

<A name=class>تعریف الگو از طریق class
گاهی اوقات یک style به روشهای اول یا دوم تعریف میشود، اما شما نمیخواهید که آن الگو در همه جا اعمال شود، پس میایید یک اسم واحد برایselector انتخاب میکنید ، بدین ترتیب که بلافاصله بعد از selector یک نقطه میگذارید و اسمی را مینویسید. پس از این کار در هر تگی که نیاز به آن الگو هست خصوصیت class=” “ را مینویسیم و برابر با آن اسم قرار میدهیم،<head>
<style>
p.name { color:green }
</style>
</head>
<body>
<p class=”name”>……..</p>
</body>

<A name=link>فراخوانی فایل css در تگ <link>
ارزش واقعی style sheet زمانی به چشم میاید که یکبار آنرا تعریف کنید و در تمام صفحات از آن بهره ببرید. برای این منظور شما فقط از طریق روش اول میتوانید اینکار را انجام دهید، بدین ترتیب که style ها را در برنامه ویرایشگر متن مانند notepad مینویسید و سپس آن فایل را با پسوند .css ذخیره کرده و در دایرکتوری اصلی وب سایتتان قرار میدهید. css مخفف Cascading Style Sheet است.

نکته: دراین روش نیازی به نوشتن تگهای<style></style> نیست و فقط selector ها و خصوصیات را مینویسید. در صورت رعایت نکردن این موضوع الگوهای تعریف شده در آن فایل در صفحات اعمال نخواهند شد.

پس از ذخیره فایل style sheet میتوانید برای هر صفحه که میخواهید آنرا فراخوانی کنید، برای انجام این عمل باید تگ <link> را در قسمت head قرار دهید و سه خصوصیت مربوط به آنرا وارد کنید. خصوصیت rel=” “ است که برابر با کلمه stylesheet قرار میدهید و سپس type=” " وبا text/css مقداردهی میشود و در آخر با خصوصیت href=” “ فایل را آدرس دهی میکنید،<link rel=”stylesheet” type=”text/css” href=”آدرس فایل “>

این تگ نیازی به پایان دهنده ندارد.

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
06-12-2011 06:46 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
! Omid StaR ! آفلاین
امید کریم زاده
******
مدیر کل سایت

ارسال‌ها: 4,724
تاریخ عضویت: Oct 2011
اعتبار: 104
ارسال: #20
RE: آموزش html برای طراحی سایت
ساخت نقشه تصويری ( image map )

Image map يکي از تکنيکهاي ساخت عکس بصورت لينک است که گاهي اوقات به کمک ما ميايد. بطور مثال ما نقشه ايران را در صفحه اي قرارداده و ميخواهيم که بيننده سايت هرگاه روي يک استان کليک کرد صفحه مربوط به آن باز شود تا اطلاعات مربوطه را در اختيار کاربر قرار دهد. اين حالت حجم عکس را افزايش نخواهد داد و بهتر است از عکسهايي با حجم بالا استفاده نکنيم که در اين مورد به قسمت عکسها رجوع کنيد.
خب حالا عکس مورد نظر را با استفاده از تگ <img>درصفحه قراردهيد، سپس خصوصيت usemap=" " را به تگ اضافه کنيد که آنرا برابربا يک اسم واحد بايد قرار دهيم تا از آن اسم در جاي ديگر استفاده شود. اين خصوصيت به مرورگر ميفهماند که عکس را بصورت Image map ميخواهيم بکار بريم.
<img src="images/mypic.gif" usemap="#map01">
به علامت # دقت کنيد که بايد نوشته شود. در حال حاضر عکس آماده است و بايد تگهاي نقشه را وارد کنيم.ابتدا تگ <map name="map01"> وارد ميکنيم تا مرورگر بفهمد که نقشه آغاز شده و با استفاده از خصوصيتname=" " مشخص ميشود که چه عکسي قرار است اين خاصيت را داشته باشد. حالا نوبت به تعيين قسمتهاي مختلف عکس رسيده که هر قسمت در چه اندازه اي و به کجا بايد لينک شود. اين قسمتها ميتوانند اشکال هندسي نظيردايره، چهارگوش وچند ضلعي باشند. اين اطلاعات در تگ <area> مشخص ميشوند، اين تگ داراي سه خصوصيت ميباشد:
Shape=" " مشخص ميکند که هر قسمت داراي چه شکل هندسي ميباشد. اگر چهارگوش rectangle باشد آنرا برابر با "rect" قرار ميدهيم، اگر دايره circle بخواهيم برابر با "circle" و اگر چند ضلعي polygon بخواهيم برابر با "poly" قرار ميدهيم.
Coords=" "اين خصوصيت، مختصات نقاط تشکيل دهنده شکلها را مشخص ميکند که مختصات هر نقطه بر اساس محور x, y در مقياس پيکسل ميباشد. براي تشکيل يک لينک به شکل چهارگوش بايد مختصات دو نقطه گوشه چپ طرف بالاوگوشه راست طرف پايين آنرا بدست بياوريم ، چون هر نقطه داراي دو مختصات ميباشد يکي بر روي محور xها و ديگري yها پس چهار عدد بايد بنويسيم و هر عدد را با علامت کاما جدا کنيم.
Coords="10,10,65,65"
همچنين براي درست کردن يک لينک به شکل دايره مختصات مرکز آن و اندازه طول شعاع را بايد پيدا کنيم که با توجه به گفته بالا سه عدد بايد نوشته شود و براي چند ضلعي به تعداد هر نقطه دو عدد مينويسيم که ديگر محدوديت ندارد.
href=" " که در اين قسمت آدرس صفحه يا سايت مورد نظر را وارد ميکنيم.
<img src="images/mypic.gif" usemap="#map01">
<map name="map01">
<area shape="rect" coords="25,25,55,50" href="page.htm">
<area shape="circle" coords="124,243,40" href= "www.yahoo.com">
<area shape="poly" coords="22,30,76,90,147,199,289,270,140,111,44,67" href="pages/first.html">
</map>
خب سوالي که حالا پيش ميايد، اينست که مختصات اين نقاط را چگونه پيدا کنيم؟ دو راه براي آن وجود دارد، يکي استفاده از برنامه هاي مختلف مانند Photoshop و ديگري که برايتان توضيح خواهم داد بدون استفاده از برنامه جانبي است و داخل همان صفحه ، با کمک مرورگر اينترنت اکسپلورراست. بعد از اينکه يک عکس را در صفحه قرار داديم و مراحل تشکيل Image map را انجام داديم يک تگ و يک خصوصيت به اين کدها اضافه ميکنيم و آنچه را که ميخواهيم براحتي بدست مياوريم. ابتدا تگ مخصوص لينک را قبل از<img> قرار ميدهيم تا عکس ما بصورت يک لينک ظاهر شود و سپس خصوصيت ismap را به تگ<img>اضافه ميکنيم و فايل را ذخيره ميکنيم. حالا آنرا باز کرده و همانطور که موس را روي عکس حرکت ميدهيد يک نگاه به نوار وضعيت status bar مرورگر در پايين بياندازيد، اعدادي را که مشاهده ميکنيد مختصات نقاط ميباشند.
<a href=" # "><img src="image.gif" usemap="#newmap" ismap>
<map name="newmap">
</map>
</a>
فراموش نکنيد که بعد از پيدا کردن مختصات نقاط، تمام مراحلي را که اضافه کرديد دوباره برداريد.

زندگی به من آموخت

که همیشه منتظر حمله احتمالی کسی باشم
که به او محبت فراوانی کرده ام
06-12-2011 06:53 PM
مشاهده‌ی وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
موضوع بسته شده است 


پرش به انجمن:


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

اخبار فناوری اطلاعات | نرم افزار املاک | هتل آپارتمان مشهد | ترجمه تخصصی | نرم افزار رستوران | نرم افزار تاکسی سرویس | نرم افزار رستوران | دانلود نرم افزار مطب | دانلود نرم افزار تاکسی سرویس | مجله پزشکی آسان طب | اتوماسیون پزشکی | کنکور آسان است | نرم افزار دفترچه تلفن نرم افزار چاپ چک نرم افزار رستوران نرم افزار فست فود نرم افزار کافی شاپ نرم افزار تاکسی سرویس نرم افزار نمایشگاه خودرو نرم افزار املاک نرم افزار هتلداری نرم افزار مطب نرم افزار دندانپزشکی نرم افزار انبارداری نرم افزار حسابداری فروشگاه نرم افزار وکالت مجله اینترنتی پارسی وان | مجله اینترنتی زیگیل | خرید بک لینک | خرید رپورتاژ | سینما تئاتر مای استیج | یک مهاجر | دنیای مهاجرت | مجله گردشگری کاروان | وردپرس دانلود | مجله تفریحی تندیس فان | نرم افزار Software | جوک جدید | اخبار هنر | اخبار کامپیوتر | سایت پزشکی | فروشگاه اینترنتی | سایت خبری | دانلود موزیک | اندروید سه | بانک شماره موبایل | پایگاه صالحین | مجله کامپیوتری | جاب لر | نوین ساخت | سهام نت | تکی کو | تم کد | مجله اینترنتی وبدون | پورتال خبری | سایت تفریحی تک لایو | مجله سرگرمی سیب رنک | سایت پزشکی دکتر طب | خرید گیفت کارت | مدرن بوک | چت روم | گیفت کارت | تولید کننده روغن زیتون ماشین آلات صنایع غذایی تولید کننده جعبه و کارتن تولید کننده ادویه
X بستن تبلیغات