sms love

content="HTML, CSS, JavaScript, VBScript">

برچسب meta کاربرد های ديگری نيز دارد که به در جای خود راجع به آنها صحبت خواهيم کرد. در اينجا به ذکر يکی از آنها می پردازيم. فرض کنيد شما قبلا يک سايت وب با نام youname.com داشتيد و بنا به دلايلی می خواهيد از نام جديد yournewname.com استفاده کنيد درضمن محتويات هر دو سايت مثل هم می باشد در اين صورت نيازی به صرف هزينه اضافه برای هر دو سايت نداريد و کافی است کاربرانی را که به آدرس قبلی شما مراجعه می کنند را به آدرس جديد هدايت کنيد و برای اين کار می توانيد از برچسب meta و از دو مشخصه http-equiv و content به شيوه زير استفاده کنيد :

content="5;url=http://www.yournewname.com">

عدد 5 که در content مشاهده می کنيد مدت زمانی است طول می کشد تا کاربر به آدرس جديد منتقل شود و اين زمان بر حسب ثانيه می باشد؛ که اگر از عدد 0 استفاده کاربر فورا به آدرس جديد منتقل شود. در ضمن بهتر است لينکی در فايل خود قرار دهيد تا اگر کاربر به طور خودکار به آدرس جديد منتقل نشد بتواند با کليک بر لينک موجود به آدرس جديد برود :

http://www.yournewname.com

برچسب <link>

اين برچسب بيشتر مورد استفاده CSS می باشد. CSS که مخفف Cascading Style Sheets می باشد خود مبحثی گسترده است و در دوره های آموزشی بعدی مفصلا به آن خواهيم پرداخت لذا در اينجا فقط اشاره ای مختصر به آن می کنيم.

برای اضافه کردن شيوه های نگارش به تعداد زيادی از صفحات استفاده از يک برگه شيوه نگارش خارجی کار ايده آلی می باشد. يعنی استفاده از يک فايل CSS که تنها با ويرايش آن می توانيد ظاهر کليه صفحات خود را تغيير دهيد. هر صفحه بايد توسط برچسب <link> ( که در سربرگ صفحه قرار می گيرد يعنی داخل برچسب <head>) به فايل CSS که شيوه های نگارش در آن تعيين شده اند، متصل شود.

type="text/css" href="mystyle.css" >

در مثال فوق مرورگر شيوه های نگارش تعيين شده را از فايل mystyle.css خواهد خواند و متن فايل را بر اساس آنها قالببندی می کند. يک فايل CSS توسط هر ويرايشگر ساده متن از مانند برنامه notepad قابل نوشتن است و اين فايل نبايد هيچ يک از برچسب های HTML را داشته باشد و فقط بايد شامل دستورات CSS باشد و بهتر است با پسوند .css ذخيره شود. در مثال زير يک فايل CSS نشان داده شده است :

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url("images/back40.gif")}

برچسب <style>

اين برچسب نيز مورد استفاده CSS می باشد. به جای آنکه دستورات CSS در فايلی جدا قرار داده شوند می توانند در داخل فايل HTML ما قرار گيرند. شيوه نگارش داخلی را در داخل سربرگ و توسط برچسب <style> تعيين می کنيم. مانند مثلا زير :

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

برچسب <script>

از اين برچسب زمانی استفاده می کنيم که بخواهيم دستورات vbscript يا javascript و ... را در فايل HTML خود به کار ببريم، يا اين دستورات را از فايلی ديگر بخوانيم.

*به عنوان مثال دستور زير کدهای java را از فايل MyScripts.js فراخوانی می کند.

مثال زير کدهای java را در HTML ما می نويسد که توسط مرورگر اجرا خواهد شد.

www.arsanjan.blogfa.com!

+ نوشته شده در پنجشنبه بیست و چهارم اردیبهشت 1388ساعت 18:11 توسط shaki |

*نکته

بعضی از مروگر های قديمی برچسب <frame> را پشتيبانی نمی کنند که در اين صورت نمی توانند قابهای شما را نمايش دهند و کاربر صفحه ای خالی را خواهد ديد. برای رفع اين مشکل می توانيد از برچسب <noframe> استفاده کنيد و اطلاعاتی را داخل آن بنويسيد. در اين حالت اين گونه از کاربران اطلاعات داخل اين برچسب را خواهند ديد

سربرگ HTML

برچسب <head>

اين برچسب شامل اطلاعاتی عمومی درباره فايل HTML می باشد. عناصر داخل برچسب <head> توسط مرورگر نشان داده نمی شوند. بر اساس استانداردهای HTML فقط تعداد کمی از برچسبها مجاز به قرار گرفتن در برچسب <head>می باشند و آنها عبارتند از :<title> و <base> و <link> و <meta> و <style> و <script>.

برچسب <title>

توسط اين برچسب می توانيم عنوانی در نوار عنوان مرورگر بنويسيم. همانطور که در مثال زير می بينيد عبارت The title در نوار عنوان به نمايش در خواهد آمد. در ضمن اين عبارت در متن مرورگر ديده نمی شود و فقط محتويات داخل برچسب پاراگراف ديده خواهد شد.

برچسب <base>

توسط اين برچسب که معمولا با مشخصه target همراه است می توان شيوه ارجاع به صفحه ديگری را در لينکها تعيين کرد. و ديگر نيازی به تعيين مجدد آن در برچسب <a> نمی باشد. مشخصه target به طور کامل در مبحث لينک ها توضيح داده شده است. به عنوان مثال اگر از دستور زير

در فايل HTML خود استفاده کرده باشيم دو دستور زير کاملا مثل هم عمل خواهند کرد يعنی هر دو سايت Yahoo را در پنجره جديدی باز خواهند کرد.

This link

This link

برچسب <meta>

هدف استفاده از برچسب <meta> تدارک اطلاعاتی اضافی درباره فايل می باشد. و اغلب شامل اطلاعاتی می باشد که مربوط به مرورگر و موتورهای جستجو است مانند شرحی از محتويات فايل HTML. معمولا همراه اين برچسب از دو مشخصه name و content استفاده می شود. بعضی از موتورهای جستجو از اين اطلاعات برای فهرست بندی صفحه شما استفاده می کنند. از آنجا که بعضی از طراحان و مديران سايت های وب برای اينکه سايتشان مقام بهتری در موتورهای جستجو بدست آورد گاهی کلمات کليدی را چندين بار تکرار می کردند و به عبارتی در رتبه بندی واقعی موتورهای جستجو اختلال ايجاد می کردند، به همين دليل بعضی از موتورهای جستجو از استفاده اطلاعاتی که توسط برچسب meta تدارک ديده می شود خودداری می کنند. ولی به هر حال شما استفاده از اين برچسب را فراموش نکنيد و استفاده از آن را در برنامه کاری خود قرار دهيد.

دستور زير توضيحی درباره صفحه شما به فايل HTML اضافه می کند.

content="This page is a tutorials on HTML.">

دستور زير کلمات کليدی صفحه شما را به فايل HTML اضافه می کند.

+ نوشته شده در پنجشنبه بیست و چهارم اردیبهشت 1388ساعت 18:11 توسط shaki |

<html> <body> <fieldset> <legend>Health information:</legend> <form> Height <input type="text" size="3"> Weight <input type="text" size="3"> </form> </fieldset> </body> </html>

مشخصه action در فرمها و دکمه ارسال

وقتی که کاربر بر دکمه Submit کليک می کند، محتويات فرم به فايل يا آدرس ديگری فرستاده خواهد شد. مشخصه action، نام آن فايل يا آدرس را مشخص می کند، آن فايل معمولا دارای ابزاری برای دريافت اطلاعات فرستاده می باشد. اين ابزار در مباحث ASP و CGI توضيح داده می شوند. در مثال زير شيوه ارسال اطلاعات توسط method="get" مشخص می شود، اين شيوه ها مورد بحث ASP و CGI و ... می باشد.

نکته

شما می توانيد در فرم دکمه ای قرار دهيد که کاربر با کليک بر آن اطلاعات فرم را به صورت پيش فرض در آورد. اين دکمه توسط عبارت ايجاد می شود.

قابها (Frame) در HTML

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

برچسب <frameset>

اين برچسب مشخص می کند که پنجره مرورگرچگونه بايد بين فايلهای HTML يعنی همان قابها تقسيم شود. هر Frameset مجموعه ای از قابهای سطری يا ستونی را مشخص می کند. اندازه هر قاب سطری يا ستونی، مقدار فضايی از صفحه که آن قاب اشغال می کند را مشخص می کند.

برچسب <frame>

اين برچسب فايلهای HTML که درون هر قاب بايد قرار بگيرند را مشخص می کند. در مثال زير ما يک مجموعه از قاب با سه ستون داريم. ستون اول و سوم هرکدام 25% و ستون دوم 50% پهنای مرورگر را اشغال می کنند. فايل frame_a.htm در ستون اول، frame_b.htm در ستون دوم و frame_c.htm در ستون سوم قرار می گيرند.

+ نوشته شده در پنجشنبه بیست و چهارم اردیبهشت 1388ساعت 18:9 توسط shaki |

<html> <body> <form> <textarea name="text1" rows="5" cols="20"> The cat was playing in the garden.

فرم حاشيه دار

توسط برچسب <fieldset> شما می توانيد يک حاشيه دور عناصر فرم خود ايجاد کنيد و توسط برچسب <legend> می توانيد کلماتی را روی قسمت بالايی حاشيه بنويسيد.

مشخصه action در فرمها و دکمه ارسال

وقتی که کاربر بر دکمه Submit کليک می کند، محتويات فرم به فايل يا آدرس ديگری فرستاده خواهد شد. مشخصه action، نام آن فايل يا آدرس را مشخص می کند، آن فايل معمولا دارای ابزاری برای دريافت اطلاعات فرستاده می باشد. اين ابزار در مباحث ASP و CGI توضيح داده می شوند. در مثال زير شيوه ارسال اطلاعات توسط method="get" مشخص می شود، اين شيوه ها مورد بحث ASP و CGI و ... می باشد.

+ نوشته شده در پنجشنبه بیست و چهارم اردیبهشت 1388ساعت 18:9 توسط shaki |

جعبه کلمه عبور

از اين جعبه هنگامی استفاده می شود که بخواهيم کاربر کلمه عبور يا هر چيزی که نخواهيم اطرافيان او با نگاه به صفحه نمايش متوجه آن شوند را، بنويسد که در اين حالت با فشار هر کليد صفحه کليد يک * در جعبه کلمه عبور نمايش داده می شود. جعبه کلمه عبور توسط مشخصه type="password" تعيين می شود.

دکمه

دکمه توسط type="button" مشخص می شود و نوشته روی آن توسط مشخصه value="text" معرفی خواهد شد. ساخت دکمه شيوه ديگری نيز دارد وآن استفاده از برچسب <button>است.

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

جعبه drop down

اين جعبه همان گونه که در شکل زير می بينيد فهرستی است که يکی از گزينه های آن قابل رويت است و با کليک کردن روی آن بقيه گزينه ها نيز ديده می شوند. درضمن تنها يکی از موارد آن را می توانيم انتخاب کنيم. اين جعبه توسط برچسب <select> مشخص می شود وموارد فهرست نيز توسط برچسب <option> ايجاد خواهند شد. به طور پيش فرض گزينه اول اين فهرست انتخاب شده است و اگر بخواهيم که گزينه ديگری از فهرست انتخاب شده باشد بايد کلمه selected را به برچسب <option> در گزينه مورد نظر اضافه کنيم. مثال زير طريقه استفاده را مشخص می کند.

جعبه textarea

گای اوقات شما نياز داريد که کاربر متنی طولانی تر از يک خط را بنويسد. بنابر اين نمی توانيد از جعبه متن استفاده کنيد چون فقط در آن می توانيد يک خط را بنويسيد. اما توسط اين جعبه شما می توانيد به کاربر اجازه دهيد که بيش از يک خط را بنويسد. اين جعبه توسط برچسب <textarea> مشخص می شود و همانطور که در مثال زير می بينيد تعداد سطرها وستونها توسط مشخصه های rows و cols تعيين می شوند.

فرم حاشيه دار

توسط برچسب <fieldset> شما می توانيد يک حاشيه دور عناصر فرم خود ايجاد کنيد و توسط برچسب <legend> می توانيد کلماتی را روی قسمت بالايی حاشيه بنويسيد.

مشخصه action در فرمها و دکمه ارسال

وقتی که کاربر بر دکمه Submit کليک می کند، محتويات فرم به فايل يا آدرس ديگری فرستاده خواهد شد. مشخصه action، نام آن فايل يا آدرس را مشخص می کند، آن فايل معمولا دارای ابزاری برای دريافت اطلاعات فرستاده می باشد. اين ابزار در مباحث ASP و CGI توضيح داده می شوند. در مثال زير شيوه ارسال اطلاعات توسط method="get" مشخص می شود، اين شيوه ها مورد بحث ASP و CGI و ... می باشد.

+ نوشته شده در پنجشنبه بیست و چهارم اردیبهشت 1388ساعت 18:4 توسط shaki |

<html> <body> <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> </body> </html>

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

از اين دکمه ها هنگامی استفاده می شود که بخواهيم کاربر يکی از چند گزينه به تعداد محدود را انتخاب کند؛ و توسط مشخصه type="radio" تعيين می شود. با انتخاب يکی از دکمه ها، دکمه ديگری با همان نام اگر در حالت انتخاب باشند، از حالت انتخاب خارج می شود. اگر کلمه checked را در برچسب input از نوع دکمه های راديويی بنويسيد آن دکمه به طور پيش فرض به صورت انتخاب شده خواهد شد.

جعبه انتخاب

از اين جعبه ها هنگامی استفاده می شود که بخواهيم کاربر يک يا چند گزينه از گزينه هايی به تعداد محدود را انتخاب کند؛ و توسط مشخصه type=" checkbox" تعيين می شود. کاربر می تواند يک يا چند جعبه انتخاب را همزمان انتخاب کند. اگر کلمه checked را در برچسب input از نوع جعبه انتخاب بنويسيد آن جعبه به طور پيش فرض به صورت انتخاب شده خواهد شد.

+ نوشته شده در پنجشنبه بیست و چهارم اردیبهشت 1388ساعت 18:4 توسط shaki |

<html> <body> <ul> <li><p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p></li> <li><table border="1"><tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr><tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr></table></li> </ul> </body> </html>

فهرستهای شماره دار

منظور از فهرستهای شماره دار، فهرستهايی است که موارد آن توسط عدد، شماره گذاری شده اند. فهرستهای شماره دار توسط برچسب <ol> شروع شده و هر مورد آن با بر چسب <li> مشخص می شود. مثال زير طريقه ساخت يک فهرست شماره دار را نشان می دهد.

فهرستهای دارای توضيح

اينگونه از فهرستها دارای شماره يا شکل نمی باشند وبرای مواردی که می خواهيم توضيحی در کنارشان باشد به کار می روند. فهرستهای دارای توضيح توسط برچسب <dl> شروع شده و هر مورد آن با بر چسب <dt> مشخص می شود و توضيحات در داخل برچسب <dd> قرار می گيرند. مثال زير طريقه ساخت يک فهرست دارای توضيح را نشان می دهد.

مشخصه type در فهرستها

توسط اين مشخصه می توانيد شکلی را که در کنار موارد فهرستهای بدون شماره قرار می گيرد و يا اعداد فهرستهای شماره دار را به نوع دلخواه تغيير دهيد. شکلها می توانند سه نوع دايره توپر ، دايره توخالی و مربع (disc , circle , square) باشند و شماره گذاری ها می توانند به چهار صورت
"a b c"، "A B C"، "i ii iii" يا "I II III" باشند که به ترتيب با a، A، i، I مشخص می شوند.

در زير مثالی ازاستفاده type در فهرست بدون شماره را می بينيد.

در زير مثالی ازاستفاده type در فهرست شماره دار را می بينيد.

مثال زير روش استفاده از فهرستهای تودرتو را نشان می دهد. همان طور که می بينيد فهرست داخلی توسط شکل ديگری ( دايره تو خالی ) مشخص شده است.

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

يک فرم ناحيه ای در صفحه HTML است که شامل عناصری می باشد. عناصر فرم به کاربر اجازه می دهند که اطلاعاتی را وارد صفحه ما کند؛ و ما با دريافت آن اطلاعات به اهدافی که داريم برسيم. يک فرم توسط برچسب

ايجاد می شود.

برچسب <input>

پرکاربرد ترين برچسب درفرمها برچسب<input> می باشد در اينجا انواع اين بر چسب را شرح می دهيم.

جعبه متن

از اين جعبه هنگامی استفاده می شود که بخواهيم کاربر کلمات يا اعدادی را در فرم بنويسد؛ و توسط مشخصه type="text" تعيين می شود. مثال زير در همين رابطه است. توجه داشته باشيد که خود فرم قابل رويت نمی باشد وفقط عناصر داخل آن را می توانيم ببينيم. در ضمن اندازه پيش فرض برای جهبه متن در اکثر مرورگر ها 20 حرف می باشد و اگر می خواهيد اين پيش فرض را تغيير دهيد بايد از مشخصه size استفاده کنيد (size=40).

+ نوشته شده در پنجشنبه بیست و چهارم اردیبهشت 1388ساعت 18:0 توسط shaki |

*مشخصه width عرض جدول يا يک خانه را تعيين می کند و مشخصه height ارتفاع جدول يا يک خانه را تعيين می کند. و مقدار اين دو مشخصه معمولا بر حسب pixel می باشد.

*توسط مشخصه background می توانيد تصويری در پس زمينه جدول يا خانه ها قرار دهيد.

<html> <body> <table border="1" height="200" width="200" background="background.jpg"> <tr> <td background="test.bmp">First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td></tr> </table> </body> </html>

*از مشخصه align برای مرتب کردن محتويات خانه های يک جدول در جهت افقی استفاده می شود که مثلا در سمت راست يا وسط ويا سمت چپ خانه قرار بگيرند ويا اينکه اگر محتويات خانه متن است، متن به صورت justify مرتب شود؛ و از مشخصه valign برای مرتب کردن محتويات خانه های يک جدول در جهت عمودی استفاده می شود.

Make-Up

Make-Up

*مشخصه ديگری که در جدولها کاربرد دارد مشخصه frame است که دارای انواع border ، box ، void ، above ، below ، hsides ، vsides ، lhs، rhs می باشد. سه مثال زير کاربرد اين مشخصه را نشان می دهد.

نکته

يکی از نکات مهم در زيبايی صفحه HTML شما استفاده از طرح بندی (layout) مناسب است. يکی از معمولترين راهها در ايجاد طرحبندی دلخواه استفاده از جداول می باشد.

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

فهرستها در HTML

HTML فهرستهای شماره دار، بدون شماره و فهرستهای دارای توضيح را پشتيبانی می کند.

فهرستهای بدون شماره

اينگونه فهرستها توسط يک شکل کوچک مشخص می شوند؛ و توسط برچسب <ul> شروع شده و هر مورد آن با بر چسب <li> مشخص می شود. مثال زير طريقه ساخت يک فهرست بدون شماره را نشان می دهد.

در داخل موارد فهرست همانند خانه های جدول شما می توانيد پاراگراف، تصوير، جدول، يک فهرست ديگر و... قرار دهيد. مثال زير طريقه استفاده از اين روش را نشان می دهد.

+ نوشته شده در پنجشنبه بیست و چهارم اردیبهشت 1388ساعت 17:59 توسط shaki |

ساخت لينک بر روی قسمتی از تصوير

برای اين کار بايد از دو برچسب <map> و <area> استفاده کنيد. روش کار بدين صورت است که ناحيه هايی را می خواهيد کاربر با کليک بر روی آن به صفحه ديگری متصل شود را توسط اشکالی مشخص می کنيد. اين اشکال دايره، مستطيل و چند ضلعی خواهند بود که توسط مشخصه shape تعيين می شوند.

*دايره به صورتshape="circle" معرفی می شود و مختصات آن توسط مشخصه coords تعيين می شود. مثلا در coords="39, 41, 32" دو عدد اول مختصات مرکز دايره و عدد سمت راست اندازه شعاع دايره می باشد. مشخصه آشنای href که در برچسب از آن استفاده کرديم، صفحه ای را که کابر با کليک بر ناحيه مشخص شده توسط شکل به آن منتقل خواهد شد را تعيين می کند.

*مستطيل توسط shape="rect" و مختصات قطر آن مثلا توسط coords="77, 12, 112, 72" تعيين می شود که دو عدد سمت چپ مختصات گوشه بالای سمت چپ و دو عدد سمت راست مختصات گوشه پايين سمت راست می باشند.

*برای استفاده از چند ضلعی بايد از shape="polygon" استفاده کنيد و اعداد دوبه دو مختصات گوشه های آن را تعيين می کند : coords="146, 7, 124, 68, 193, 64, 183, 53, 184, 20".

همانطور که در مثال زير می بينيد برچسب مشخصه ای به نام name دارد که توسط آن برچسب با برچسب ارتباط برقرار می کند برای ايجاد اين ارتباط بايد در برچسب از مشخصه usemap استفاده کنيم که مقدار اين مشخصه نام برچسب می باشد. ضمنا نام برچسب بايد همراه با علامت # به کار برده شود. مانند:

usemap="#picture"

مثال زير روش استفاده از برچسب ها و مشخصه های ذکر شده را مشخص خواهد کرد.

ساخت لينک برای تصوير

شما می توانيد با کليک بر روی هر جای تصوير به آدرس مورد نظر متصل شويد برای اينکار بايد از روش زير استفاده کنيد، که در اينجا مثلا با کليک بر روی تصوير buttonnext.gif به صفحه nextpage.htm خواهيد رفت.

جدول ها در HTML

جدول ها در HTML توسط برچسب <table> ايجاد می شوند. يک جدول توسط برچسب <tr> به سطرها تقسيم می شود و هر سطر توسط برچسب <td> به خانه های اطلاعاتی تقسيم می شود. يک خانه اطلاعاتی متواند شامل متن، تصوير، فهرست، پاراگراف، فرم، جدول و يا هر چيز ديگری باشد. دو مثال زير طريقه استفاده از برچسبهای گفته شده را نشان می دهد.

* مثال زيريک جدول حاشيه دارمی باشد که ضخامت حاشيه توسط مشخصه border="1" تعيين شده است.

* در مثال زير يک جدول بدون حاشيه نشان داده شده است.

مشخصه border

اگر شما مشخصه border را تعيين نکنيد جدول شما حاشيه نخواهد داشت. گاهی اوقات جدول بدون حاشيه برای طرحبندی صفحه مفيد است ولی اغلب اوقات می خواهيد که جدولتان حاشيه داشته باشد. برای نمايش جدولی با حاشيه بايد از مشخصه border استفاده کنيد؛ همانند جدول مثال قبل.

عنوانها در جدول

عناوين ستونها در يک جدول توسط بر چسب <th> مشخص می شوند. به مثال زير توجه کنيد.

توسط برچسب <caption> می توانيد عنوانی برای جدول خود در نظر بگيريد. به مثال زير توجه کنيد.

خانه های خالی در جدول

گاهی اوقات ما نياز پيدا می کنيم که بعضی از خانه های جدول خالی باشند. اگر جدول ما دارای حاشيه باشد و در خانه مورد نظر چيزی ننويسيم (<td>td>) در اين صورت جدول ما به صورت زير ديده می شود.

برای جلوگيری از بهم خوردن حاشيه بايد حرف نهادی را بکار ببريم يعنی از <td>&nbsp;td> به جای <td>td> استفاده کنيم در اين صورت جدول به صورت زير خواهد بود.

مشخصه colspan

برای درک مفهوم اين مشخصه و کاربرد آن به مثال زير توجه کنيد.

مشخصه rowspan

برای درک مفهوم اين مشخصه و کاربرد آن به مثال زير توجه کنيد.

مشخصه cellpadding

از اين مشخصه برای ساختن فضای خالی بيشتر بين محتويات هر خانه و حاشيه آن استفاده می شود. به مثال زير توجه کنيد.

مشخصه cellspacing

از اين مشخصه برای ساختن فضای خالی بيشتر بين خانه ها استفاده می شود. به مثال زير توجه کنيد.

چند مشخصه ديگر در مورد جداول

*توسط مشخصه bgcolor می توانيد رنگ زمينه جدول يا خانه های آن را تعيين کنيد.

+ نوشته شده در پنجشنبه بیست و چهارم اردیبهشت 1388ساعت 17:58 توسط shaki |

<a href="#tips">Useful Tips</a> <p>This is a text.<br>This is a text.<br>This is a text.</p> <p>This is a text.<br>This is a text.<br>This is a text.</p> <p>This is a text.<br>This is a text.<br>This is a text.</p> <p>This is a text.<br>This is a text.<br>This is a text.</p> <a name="tips">Read the Useful Tips section</a> <p>This is a text.<br>This is a text.<br>This is a text.</p> <p>This is a text.<br>This is a text.<br>This is a text.</p> <p>This is a text.<br>This is a text.<br>This is a text.</p> <p>This is a text.<br>This is a text.<br>This is a text.</p> <p>This is a text.<br>This is a text.<br>This is a text.</p>

لينک به يک آدرس E-Mail

گاهی اوقات می خواهيم در صفحه وب خود آدرس E-Mail خود را در اختيار بينندگان سايت قرار دهيم، که به راحتی می توانيم اين کار را با نوشتن آدرس خود مثلا داخل يک پاراگراف عملی سازيم. مانند :

My E-Mail adress is : you@yourname.com

اما اگر بخواهيم يک لينک به آدرس E-Mail خود ايجاد کنيم که به طور خودکار يکی از برنامه های مخصوص E-Mail را در رايانه کاربر باز کرده و بعضی از موارد مورد نياز مانند آدرس و موضوع و... را به طور خودکار در قسمتهای مخصوص خود بنويسد و بدين ترتيب کار کاربر را کم کند، بايد از شيوه ای همانند دستور زير استفاده کنيم :

href="mailto: you@yourname.com?Subject=Hello%20again">

Send Mail

مثال زير مطلب را روشن تر خواهد کرد :

دستورات فوق را در فايل test.htm ذخيره کرده و آن را باز کنيد يا بر روی دکمه مشاهدا خروجی کليک کنيد. اگر بر روی Send mail! کليک کنيد برنامه Outlook Express باز خواهد شد و همانطور که می بينيد تعدادی از موارد به طور پيش فرض توسط شما مشخص شده است.

چند نکته مفيد :

* هرگاه که می خواهيد لينکی به يک شاخه ايجاد کنيد در انتهای نام شاخه يک / اضافه کنيد چون اگر بخواهيد مثلا لينکی به شاخه html در سايت yourname.com ايجاد کنيد و از ساختار href="http://www.yourname.com/html" استفاده کنيد يک تقاضای اضافه به سرور وب خود تحميل خواهيد کرد چون سرور ابتدا به انتهای آدرس فوق يک / اضافه می کند سپس به آدرس جديد که آدرس زير است پاسخ می دهد و صفحه لازم را برای کاربر می فرستد : href="http://www.yourname.com/html/"
*لينک های دارای نام غالب برای ساخت فهرست مندرجات فايل های طولانی در ابتدای صفحه استفاده می شوند. به اين صورت که هر فصل يک لينک دارای نام دارد و لينکی به هر يک از آنها در ابتدای صفحه داده می شود.
*توجه داشته باشيد هنگامی که در مشخصه href می خواهيد از فاصله استفاده کنيد بايد فاصله را با %20 جايگزين کنيد تا مطمئن باشيد که فاصله ها به درستی توسط مرورگر تشخيص داده خواهند شد.

تصاوير در HTML

برچسب <img> و مشخصه src

تصاوير در فايلهای HTML توسط برچسب <img> قرار داده می شوند. اين برچسب، يک برچسب خالی می باشد يعنی نيازی به برچسب انتهايی ندارد و فقط شامل مشخصه های مربوط به خود می باشد. برای مشخص کردن تصويری که بايد در صفحه قرار بگيرد نياز به استفاده از مشخصه src (source) داريم که به وسيله آن آدرس و نام فايل معرفی می شود.

اگر فايل HTML و تصوير در کنار هم قرار داشته باشند می توانيم از استفاده کنيم و نيازی به ذکر کامل آدرس نيست. مرورگر تصوير را در هرجايی که از برچسب img استفاده کرده ايد قرار خواهد داد. مثلا اگر از اين برچسب بين دو پاراگراف استفاده کرده ايد مرورگر ابتدا پاراگراف اول را نمايش می دهد سپس تصوير و در نهايت پاراگراف ديگر را نشان خواهد داد. به عنوان مثال ديگر اگر عبارت را در جدول به کار ببريد يکی از خانه های جدول شامل تصوير product.gif خواهد بود. (در مورد جداول در مبحث بعدی صحبت خواهيم کرد)

مشخصه alt

اين مشخصه برای ايجاد يک متن توصيفی بر روی تصوير به کار می رود؛ و وقتی کاربر ماوس را روی تصوير می برد و برای چند لحظه نگاه می دارد، اين متن در يک کادر کوچک ديده خواهد شد مانند :

که باعث ديده شدن عبارت Big Boat در يک کادر کوچک می شود وکاربرد اين مشخصه بيشتر وقتی است که اگر تصوير به دليل هر مشکلی در صفحه ديده نشد کاربر بداند که چه تصويری را نديده است که در اين صورت عبارت مشخصه alt به جای تصوير ديده خواهد شد. مانند :

*نکته

سعی کنيد در صفحات وبی که می سازد فقط در صورت نياز از تصوير وعکس استفاده کنيد و از زياد کردن حجم صفحه خود بپرهيزيد چون هنگامی که کاربر در اينترنت صفحه شما را می بيند بايد مدت زيادتری برای تکميل شدن نمايش صفحه شما صبر کند و ممکن است اين موضوع کاربر را از ديدن صفحه پشيمان کند !

تصوير پس زمينه

برای اضافه کردن تصويری به پس زمينه صفحه می توانيد از ساختار :

استفاده کنيد که به جای background.jpg می توانيد نام هر فايل تصويری ديگری را قرار دهيد. اگر ابعاد تصوير شما از صفحه کوچکتر باشد تصوير تا پر کردن کل صفحه تکرار خواهد شد. پس اگر تصميم داريد که تصويری به پس زمينه خود اضافه کنيد توصيه می شود که از فايلهای کوچکی که می توانند مانند موزائيک در کنار هم قرار گيرند، استفاده کنيد. ضمنا در انتخاب تصوير و انتخاب رنگ متن دقت کنيد تا متن شما خوانايی خود را از دست ندهد. مثال زير در همين رابطه است.

مشخصه align در تصاوير

اين مشخصه طريقه تراز شدن تصاوير و متن را تعيين می کند. مثال زير در همين رابطه است.

* توجه داشته باشيد که تصاوير به طور پيش فرض به صورت align="bottom" قرار خواهند گرفت.

همچنين مشخصه align می تواند طرز قرار گرفتن يک تصوير در کنار يک پاراگراف را تعيين کند که مثلا تصوير در سمت راست پاراگراف قرار گيرد يا در سمت چپ. به مثال زير توجه کنيد.

تغيير ابعاد تصاوير

توسط مشخصه width و height می توانيد ابعاد تصوير را تغيير داده و آن را بزرگتر و يا کوچکتر کنيد. فقط دقت کنيد که ابعاد را متناسب تغيير دهيد چون در غير اين صورت تصوير وضوح و زيبايی خود را از دست خواهد داد.

+ نوشته شده در پنجشنبه بیست و چهارم اردیبهشت 1388ساعت 17:56 توسط shaki |