-
در اين درس با پيوندها ( Links ) ، تگ هاي مربوطه مخصوصا تگ Anchor يا A و نحوه به کار گيري آنها آشنا خواهيد شد. همچنين شناسه هاي بسيار مهم href ،target و name تشريح خواهند شد.
در محيط وب، صفحات اچتمل با کمک پيوندها به يکديگر متصل (Link) ميشوند. اصطلاح ابرمتن (Hyper Text) در مقابل متن خطي (Linear) قرار دارد. در يک متن معمولي خواندن به شکل خطي و از ابتدا به انتها ميباشد و در مقابل در يک متن مختلط (Hyper) با کمک پيوندها ميتوان از يک متن به هر صفحه ديگر در وب متصل شد.اين کار با کمک عنصري معلوم الحال! به نام A يا Anchor ميسر ميگردد.
مثالها
ايجاد پيوندها با کمک متن
اين مثال چگونگي ايجاد يک پيوند، لينک يا Link را در يک متن اچتمل نشان ميدهد.
ايجاد پيوندها با کمک تصاوير
اين مثال چگونگي ايجاد يک پيوند، لينک يا Link را با کمک يک تصوير (image) نشان ميدهد.
تگ Anchor و شناسه href
براي ايجاد پيوند به صفحات ديگر از تگ <a> استفاده ميشود. پيوندها ميتوانند به بخش ديگري از همان صفحه، صفحات ديگر وب، تصاوير، فايلهاي صوتي يا حتي فيلم ها و ... اشاره کنند.
فرم کلي يک پيوند به قرار زير است:
<a href="url">Some Text</a>
در مثال بالا تگ <a> براي ايجاد پيوندي به صفحه اي ديگر که آدرس اينترنتي آن url ميباشد بکار رفته است. براي تعيين مقصد و يا آدرس صفحه جديد از شناسه اي به نام href که همان hyerlink reference ميباشد، استفاده ميشود و مقدار اين شناسه در واقع همان آدرس اينترنتي صفحه مقصد است. بخش قابل رويت پيوند و در واقع متــنــي (و يا تصويري ) که توسط مرورگر نمايش داده خواهد شد و بازديدکننده روي آن کليک خواهد کرد ميان تگهاي <a> و </a> قرار داده ميشود و هر چند که در مثال بالا اين بخش متن "Some Text" است ولي ميتواند حتي يک تصوير باشد.
براي نمونه کد اچتمل زير پيوندي به سايت google.com ايجاد خواهد کرد:
<a href="http://www.google.com/">Visit Google Site</a>
و مرورگر پيوند بالا را به شکل زير نمايش داده و در اثر کليک روي پيوند توسط بازديدکننده، مرورگر به سايت Google خواهد رفت.
Visit Google Site
شناسه target در پيوندها:
با کمک شناسه target امکان تعيين مقصد پيوند جديد فراهم ميشود. در مثال بالا پس از کليک روي پيوند، مرورگر سايت google.com را باز کرده و جايگزين سايت فعلي خواهد شد. اگر ميخواهيد که مرورگر پيوند را در صفحه اي جديد باز کند بايد از شناسه target و مقدار "_blank" براي آن استفاده کنيد . مثال زير سبب باز شدن سايت google.com در پنجره جديدي خواهد شد:
<a href="http://www.google.com/" target="_blank">Visit Google Site</a>
خوتان آزمايش کنيد : Visit Google Site
شناسه Name :
با کمک شناسه name ميتوانيد پيوندها را نام گذاري کنيد.پيوندهاي نامگذاري شده امکان حرکت ميان قسمتهاي مختلف يک صفحه يا page را فراهم ميکنند. در اينصورت مثلا براي رفتن به آخر يک متن ديگر نيازي به Scrool down کردن تمامي صفحه نيست و کافي است که بازديدکننده روي پيوندي که به آخر صفحه اشاره ميکند کليک کند.
استفاده از پيوندهاي نامگذاري شده شامل دو مرحله است:
1- ايجاد يک پيوند نامگذاري شده (اين قسمت به عنوان لنگر کار خواهد کرد.) :
فرم کلي يک پيوند نام گذاري شده به قرار زير است:
<a name="label">Text to be displayed</a>
وظيفه شناسه name تعيين نام براي پيوند است و مقدارآن همان نام پيوند ميباشد. نام پيوند هم هر نام لاتيني ميتواند باشد. در فرم کلي بالا، نام پيوند label و متني که بعنوان پيوند نمايش داده ميشود عبارت "Text to be displayed" خواهد بود. مثال زير به ايجاد يک پيوند نامگذاري شده با نام top ميپردازد:
<a name="top">Here is top of my page!</a>
2- ايجاد يک پيوند به پيوند نامگذاري شده ديگر:
براي دادن لينک به پيوندي نام گذاري شده، کافي است که پيوندي معمولي ايجاد کرده و در قسمت href آن ابتدا url مقصد و سپس نويسه # و در نهايت نام پيوند نامگذاري شده را درج کنيد. مثال زير ايجاد پيوندي است که به لينک نامگذاري شده اي به نام top اشاره ميکند:
<a href="http://www.khaterat.com/www/index.cgi#top"> Goto Top! </a>
در اثر کليک روي پيوند بالا مرورگر مستقيما به ابتداي بخش top صفحه
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
خواهد رفت.
لگر مقصد پيوند در همان صفحه قرار دارد نيازي به قيد url نيست و فقط نويسه # و سپس نام پيوند کافي است:
<a href="#top"> Goto Top! </a>
چند نکته کاربردي در مورد پيوندها:
* يکي از کاربردهاي رايج پيوندهاي نام گذاري شده در صفحات و متوني ميباشد که فهرست و يا ليستي از اقلام نمايش داده شده است، مانند بخش سرفصل مطالب، فهرست FAQ و يا ... در همين صفحه در دو مورد از پيوندهاي نامگذاري شده استفاده شده است، آيا ميتوانيد آنها را بيابيد؟!
* اگر مرورگر نتواند يک پيوند نامگذاري شده را بيابد ابتداي صفحه مقصد را نمايش خواهد داد.
مثالهاي بيشتر
باز کردن پيوند در پنجره اي جديد
اين مثال نحوه ايجاد پيوندهائي که در پنجره اي جديد باز ميشوند را نشان ميدهد. در اين حالت بازديدکنندگان سايتتان را از دست نخواهيد داد.
ارجاع به قسمت ديگري از صفحه
با کمک اين مثال نحوه تعريف پيوندهاي نام گذاري شده را فراگرفته و چگونگي ارجاع به قسمتهاي مختلف يک صفحه اچتمل را فرا خواهيد گرفت.
رهائي از شر فريم ها
اين مثال کاربرد شناسه target و مقدار top_ و نحوه رهائي از فريم ها را شرح خواهد داد.
نحوه ايجاد يک پيوند mailto
اين مثال نحوه ايجاد يک پيوند از نوع mailto براي باز کردن برنامه مديريت ايميل ها را نشان ميدهد. در اين حالت اگر بازديدکننده سايت برنامه هاي مربوط به ارسال و مديريت ايميل ها را نصب کرده باشد ميتواند به ارسال ايميل بپردازد.
مثالي کاملتر در مورد mailto
مثال از ارسال ايميل با امکان تعيين مقادير cc ، bcc، subject و body
Start Tag Purpose کاربرد عنصر Anchor
<a> Defines an anchor تعريف يک پيوند يا Anchor در يک صفحه اچتمل
Target Attributes کاربرد حالتهاي مختلف شناسه target
target="_blank" مرورگر پيوند را در يک پنجره جديد باز ميکند.
target="_self" مرورگر پيوند را همان پنجره باز ميکند. (حالت پيش فرض يا default)
target="_parent" مرورگر پيوند را فريم parent باز ميکند. (کاربرد در مبحث فريمها)
target="_top" مرورگر پيوند را در فريم مادر و اصلي باز ميکند.(روشي خوب براي نجات از شر فريمها )
براي مطالعه بيشتر در مورد شناسه target سري به اين صفحه بزنيد.
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
-
در اين درس با المان جدول ( Table ) ، سلولها يا خانه ها، مرز و border در جداول و تگ هاي مربوطه مخصوصا تگهاي TABLE ، TD , TR آشنا خواهيد شد. توجه داشته باشيد که جداول يکي از مهمترين المانهاي آرايش و layout ميباشند.
مثالها:
جداول، آرايه ها
مثال ساده اي براي ايجاد جداول
مرز جداول
نقش شناسه border در تعيين مرز جداول
مثالهاي بيشتر
جدولها
براي تعريف جداول از تگ <table> استفاده ميشود. يک جدول از يک يا چند سطر که با کمک تگ <tr> تعريف ميشوند، تشکيل ميشود. هر رديف يا row از يک يا چند سلول، خانه يا cell تشکيل گرديده که با کمک تگ <td> ايجاد ميشوند. نام هاي td و tr به ترتيب خلاصه شده table row و table data ميباشند.
محتوي يک سلول ميتواند متن، تصوير، فهرستها، جداول ديگر، پاراگرافها و ... باشد.
مثال زير جدولي است با دو سطر و سه ستون :
کد اچتمل جدولي با دو سطر و سه ستون نمايش جدول روبرو توسط مرورگر
<table border="1" dir="rtl">
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
<td>رديف 1، سلول 3</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td>رديف 2، سلول 2</td>
<td>رديف 2، سلول 3</td>
</tr>
</table>
رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3
رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3
جدولها و شناسه border و dir :
در مثال بالا شناسه border مرز جدول را مشخص ميکند، مقدار 1 مرزي با ضخامت يک پيکسل را نمايش خواهد داد و مقدار صفر جدول را بدون مرز نمايش خواهد داد. توجه داشته باشيد که حالت پيش فرض يعني جدولي بدون شناسه border ، جداول بدون مرز را نمايش خواهد داد.
در مثال بالا شناسه dir يا direction و مقدار rtl براي آن، سبب تعيين نمايش جهت متون از راست به چپ خواهد شد و چو ن در داخل تک table تعريف شده است به تمامي سلولهاي جدول اعمال خواهذ شد.
ساده ترين جدول ممکن در اچتمل، جدولي است با يک سطر و يک ستون!
سرستون در جداول (Headings)
سرستونها در جداول با کمک تگ <th> تعريف ميشوند. مثال زير نحوه تعريف سرستونها را در جداول نمايش ميدهد:
کد اچتمل جدولي با سه سطر و سه ستون نمايش جدول روبرو توسط مرورگر
<table border="1" dir="rtl">
<tr>
<th>سرستون ا</th>
<th>سرستون 2</th>
<th>سرستون 3</th>
</tr>
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
<td>رديف 1، سلول 3</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td>رديف 2، سلول 2</td>
<td>رديف 2، سلول 3</td>
</tr>
</table>
سرستون ا سرستون 2 سرستون 3
رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3
رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3
همانطوريکه مشاهده ميکنيد سر ستونها مانند سلولهاي معمولي جداول تعريف ميشوند و فقط به جاي td از th استفاده شده و لي در نمايش محتواي سر ستونها bold يا توپر نمايش داده خواهند شد.
خانه هاي خالي در جداول (Empty Cells)
اگر محتواي خانه اي از يک جدول خالي باشد چه چيزي بايد نمايش داده شود؟ بسته به مرورگري که استفاده ميکنيد نتيجه نمايش متفاوت است و مثلا در مثال زير خانه خالي جدول بدون مرز نمايش داده خواهد شد:
کد اچتمل جدولي با دو سطر و دو ستون نمايش جدول روبرو توسط مرورگر
<table border="1" dir="rtl">
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td></td>
</tr>
</table>
رديف 1، سلول 1 رديف 1، سلول 2
رديف 2، سلول 1
در اينگونه موارد براي رفع مشکل کافي است که از non-breaking space (&nbsp;) يا همان نويسه و کاراکتر قاصله و بلانک استفاده شود و در مورد مثال ذکر شده مرورگر جدول را به شکل زير نمايش خواهد داد:
کد اچتمل جدولي با دو سطر و دو ستون نمايش جدول روبرو توسط مرورگر
<table border="1" dir="rtl">
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td>&nbsp;</td>
</tr>
</table>
رديف 1، سلول 1 رديف 1، سلول 2
رديف 2، سلول 1
توجه داشته باشيد که اينبار مرزهاي خانه خالي جدول بدرستي ترسيم گرديده اند.
چند نکته اساسي در مورد جداول:
در جداول، رديفها، خانه ها و سر ستونها از تعداد زيادي از شناسه ها ميتوانيد استفاده کنيد که شرح همگي آنها از حوصله اين دوره مقدماتي خارج است و توصيه ميشود که از مثالهاي زير و جدول واقع در انتهاي اين صفحه براي مطالعه هر چه بيشتر در مورد جزئيات شناسه ها استفاده شود.
شناسه dir قابل استفاده در بسياري از تگها ( مثلا table ، tr ، td ، th ) ميباشد. با کمک شناسه dir و مقدار rtl براي آن، جهت نمايش متون فارسي از "راست به چپ" تعيين ميگردد. توجه داشته باشيد که مقدار شناسه dir به صورت موروثي از table به tr و th و از tr و th به td خواهد رسيد.مثلا براي تعيين مقدار rtl براي تمامي خانه هاي يک جدول کافي است که فقط شناسه مزبور را در تگ table قيد کنيد و نيازي به قيد آن در تمامي خانه هاي جدول نيست. البته ميتوانيد که در مورد يک رديف خاص و يا يک خانه خاص شناسه dir را موردي تعيين کنيد.
مثالهاي بيشتر
مرز در جداول
اين مثال کاربرد شناسه border را در نمايش جداول نشان ميدهد.
تعيين جهت نمايش متن در خانه هاي يک جدول
اين مثال کاربرد شناسه dir است در تعيين جهت نمايش متن در خانه هاي يک جدول.
عنوان جداول و تگ caption
مثالي در مورد تگ caption در تعريف جداول
توسعه سطري يا ستوني در جداول
مثالي در مورد شناسه هاي colspan و rowspan در جداول
جدولي با محتويات مختلف
محتوي يک خانه جدول تقريبا ميتواند هر عنصر اچتملي باشد.
فاصله گذاري بين خانه هاي جداول
اين مثال نحوه ايجاد فاصله بين خانه هاي جدول را نشان ميدهد.(cellspacing)
لايه گذاري خانه هاي جدول
اين مثال نحوه ايجاد فاصله خالي بين خانه هاي جدول و مرز آنها را نشان ميدهد.(cellpadding)
تعيين رنگ زمينه يا تصوير زمينه کل يک جدول
تعيين رنگ زمينه يا تصوير زمينه سراسري جداول با کمک شناسه هاي bgcolor و background
تعيين رنگ زمينه يا تصوير زمينه يک يا چند خانه از جدول
تعيين رنگ زمينه يا تصوير زمينه در خانه هاي جداول با کمک شناسه هاي bgcolor و background
تراز بندي محتوا در خانه هاي جداول
اين مثال نحوه ترازبندي محتواي خانه هاي جداول با کمک شناسه "align" را نشان ميدهد.
شناسه frame در جداول
مثالي در مورد کاربرد شناسه "frame" در المان table جهت تعيين شکل مرز جداول.
تراز بندي محتوا در خانه هاي جداول
اين مثال نحوه ترازبندي محتواي خانه هاي جداول با کمک شناسه "align" و "valign" را نشان ميدهد.
تگهاي جداول
Start Tag Purpose کاربرد
<table> Defines a table تعريف جدول
<th> Defines a table header تعريف سرستون در جداول
<tr> Defines a table row تعريف رديف ها در جداول
<td> Defines a table cell تعريف سلول يا خانه هاي يک جدول
<caption> Defines a table caption تعريف عنوان جدول
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
-
با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. در اين درس با مفاهيم فريم ( Frame ) و تگ هاي مربوطه مخصوصا تگهاي Frame و Frameset آشنا خواهيد شد.
مثالها:
مجموعه فريمهاي عمودي
مثالي در مورد ايجاد مجموعه فريمهاي عمودي توسط تگ هاي frameset و frame
مجموعه فريمهاي افقي
مثالي در مورد ايجاد مجموعه فريمهاي افقي توسط تگ هاي frameset و frame
مثالهاي بيشتر
فريمها (Frames)
با کمک فريمها قادر به نمايش همزمان بيش از يک صفحه وب در پنجره مرورگر خواهيد شد. هر صفحه يا دريچه، فريم (frame) ناميده شده و فريمها کاملا مستقل از هم ميباشند. محتواي هر فريم هم ميتواند هر صفحه يا وب سايتي باشد. هر چند که فريمها طراحي سايتهاي کوچک و متوسط را بسيار آسان ميکنند ولي استفاده از آنها در کارهاي حرفه اي توصيه نميشود.(به جز در موارد خاص)
معايب استفاده از فريمها:
موتورهاي جستجو با صفحات طراحي شده با فريمها مشکل دارند.
چاپ و print صفحاتي که از فريمها استفاده ميکنند مشکل است.
صفحاتي که از فريمها استفاده ميکنند معمولا مبتدي بودن طراح سايت را نشان ميدهد!!
تگ فريم ست (Frameset)
تگ <frameset> به تعريف فريمها و تقسيم بندي پنجره مرورگر ميپردازد.
هر تگ <frameset> مجموعه اي از رديفها يا ستونها را تعريف ميکند.
داخل هر فريم ميتواند frameset ديگري قرار دهيد.
با کمک شناسه هاي rows و cols ابعاد و نسبت هر فريم تعيين ميگردد.
تگ <frameset> درون تگهاي <html> و <html/> قرار ميگيرد.(نيازي به قيد تگ body هنگام معرفي يک frameset نيست.)
تگ فريم (Frame)
کاربرد اصلي تگ <frame> تعيين source يا نام صفحه اي است که بايد در فريم ها نمايش داده شود.
مثال زير مجموعه اي از فريمها را که شامل دو فريم عمودي ميباشند معرفي ميکند. از سمت چپ فريم اول 75 درصد و فريم دوم 25 درصد از عرض پنجره مرورگر را به خود نمايش خواهند داد. در ادامه تعريف محتويات هر فريم، درون فريم اول فايل "frame_left.html" و درون فريم دوم فايل "frame_right.html" نمايش داده خواهد شد.
<html>
<frameset cols="75%,25%">
<frame src="frame_left.html">
<frame src="frame_right.html">
</frameset>
</html>
براي نمايش مثال بالا به سه فايل نياز داريد، frame_left.html ،frame_right.html و فايل کد اچتمل بالا.
شناسه هاي cols و rows در تگ frameset
شناسه مقدار شناسه کارکرد
cols عرض پنجره بر اساس پيکسل، درصد يا علامت * تعيين تعداد و اندازه ستونها در فريم ست
rows عرض پنجره بر اساس پيکسل، درصد يا علامت * تعيين تعداد و اندازه رديفها در فريم ست
مثالهاي زير را در نظر بگيريد:
مثال 2 مثال 1
<html>
<frameset cols="25%,50%,25%">
<frame src="frame_3.html">
<frame src="frame_2.html">
<frame src="frame_1.html">
</frameset>
</html>
<html>
<frameset cols="*,200">
<frame src="frame_2.html">
<frame src="frame_1.html">
</frameset>
</html>
نمايش توسط مرورگر نمايش توسط مرورگر
در مثال يک عرض فريم اول از سمت راست 200 پيکسل تعيين شده و بقيه عرض پنجره که با علامت * مشخص ميشود به فريم دوم اختصاص خواهد يافت.
در مثال دوم عرض پنجره با مقادير درصدي به فريمها اختصاص يافته است.
در مورد شناسه rows دقيقا قراردادهاي بالا برقرارند.
نکات کاربردي:
* اگر فريمهاي طراحي شده مرزهاي قابل مشاهده دارند توسط کاربر قابل تغيير اندازه (resize) خواهند بود و براي جلوگيري از تغيير اندازه فريمها توسط کاربر بايد از شناسه اي به نام noresize در داخل تگ <frame> استفاده شود. در اين مثال noresize نميتوانيد که فريمها را تغيير اندازه بدهيد.
* اگر ميخواهيد که فريمها scroll نشوند (بالا و پايين بردن صفحه توسط ماوس) بايد در تگ frame مقدار شناسه scrolling را برابر "no" قرار دهيد. (مقادير ممکن "yes" ، "no" و "auto" ميباشند.) در اين مثال scrolling صفحات قابل scroll نيستند.
* اگر ميخواهيد که مرز بين فريمها نمايش داده نشوند بايد در تگ frame مقدار شناسه frameborder را برابر "0" قرار دهيد. (مثال frameborder )
* درصد بسيار کمي از مرورگرها از تگهاي مربوط به frame و frameset پشتيباني نميکنند. براي اين موارد بايد از تگ <noframes> جهت نمايش صفحه جايگزين استفاده شود.
مثالهاي بيشتر
مجموعه فريمهاي مرکب
مثالي در مورد ايجاد مجموعه اي مرکب از فريمهاي عمودي و افقي
مثالي کاربردي در مورد فريمها
در اين مثال کاربردي با کمک سه فريم امکان نمايش صفحات مختلف به آساني فراهم ميشود. فريم افقي و بالائي سرتيتر و نام اصلي سايت را نمايش خواهد داد و فريم سمت راست لينکهاي مهم صفحه را در بر گرفته و امکان navigation را فراهم ميسازد و نهايتا فريم اصلي و سمت چپ صفحات مختلف سايت را به نمايش خواهد گذاشت. توجه داشته باشيد که براي اين مثال حداقل به يک فايل براي معرفي مجموعا فريمها(frameset) و سه صفحه اچتمل براي فريمهاي بالائي، سمت چپ و راست احتياج خواهد بود.
فريمهاي شناور و يا درجا (Inline frame)
مثالي در مورد فريمهاي شناور و درجا (iframe)، فريمي درون يک صفحه اچتمل
مثالي کاربردي در مورد فريمهاي درجا (Inline frame)
مثالي کاربردي در مورد فريمهاي شناور و درجا (iframe) با کمک 7 صفحه اچتمل مختلف
شوخي با فريم هاي شناور
مثالي در مورد نمايش درايو لوکال (مثلا c:\ بازديدکنندگان سايت به آنها
فريمها و پيوندهاي نامگذاري شده
مثالي کامل در مورد فريمها و پيوندهاي نامگذاري شده و نحوه استفاده از آنها در طراحي سايتي ساده متشکل از چهار فايل اچتمل
فريمها و پيوندهاي نامگذاري شده کامل
همان مثال بالا در صفحه کامل مرورگر با شناسه هاي کامل در تگ frame
تگ هاي فريم
Start Tag Purpose کاربرد
<frameset> Defines a set of frames تعريف مجموعه اي از فريم ها
<frame> Defines a sub window (a frame) تعريف يک فريم
<noframes> Defines a noframe section for browsers that do not handle frames تعريف جايگزين براي مرورگرهائي که از فريم ها پشتيباني نميکنند.
<iframe> Defines an inline sub window (frame) تعريف فريم هاي درجا (inline)
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
-
اين درس شما را با نحوه نمايش انواع فهرستها شامل فهرستهاي مرتب(ordered) ، نامرتب(unordered) و فهرستهاي تعريفي(definition lists) و تگ هاي مربوطه يعني li ، ol ، ul ، dl ، dt و dd آشنا خواهد کرد. مثالها:
فهرستهاي نامرتب
مثالي بسيار ساده در مورد فهرستهاي نامرتب
فهرستهاي مرتب
مثالي در مورد فهرستهاي مرتب و نحوه نمايش متون فارسي
مثالهاي بيشتر
فهرستهاي نامرتب(unordered list)
فهرستهائي هستند از يک يا چند قلم اطلاعات که معمولا با دايرهاي کوچک و سياه رنگ در شروع نمايش داده ميشوند. يک فهرست از نوع نامرتب با تگ <ul> شروع شده و هر رقم اطلاعات با تگ <li> مشخص ميگردد.
HTML code نمايش توسط مرورگر
<ul>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ul>
Red
Blue
Green
<ul dir="rtl" >
<li>قهوه</li>
<li>شير</li>
<li>چاي</li>
</ul>
قهوه
شير
چاي
داخل تگهاي <li> ميتوانيد از پاراگرافها، تگهاي br ، تصاوير و حتي فهرستهاي ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامي تگهاي مربوط به فهرستها ممکن ميباشد.
فهرستهاي مرتب(ordered list)
اين نوع فهرست بسيار شبيه فهرستهاي نامرتب بوده و فقط مرورگر به هنگام نمايش اقلام اطلاعاتي از اعداد به جاي دايره هاي کوچک سياه رنگ استفاده ميکند. يک فهرست از نوع مرتب با تگ <ol> شروع شده و همانند فهرستهاي نامرتب هر رقم اطلاعات با تگ <li> مشخص ميگردد.
HTML code نمايش توسط مرورگر
<ol>
<li>Red</li>
<li>Blue</li>
<li>Green</li>
</ol>
Red
Blue
Green
<ol dir="rtl" >
<li>قهوه</li>
<li>شير</li>
<li>چاي</li>
</ol>
قهوه
شير
چاي
داخل تگهاي <li> ميتوانيد از پاراگرافها، تگهاي br ، تصاوير و حتي فهرستهاي ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامي تگهاي مربوط به فهرستها ممکن ميباشد.
فهرستهاي تعريفي(definition list)
فهرست تعريفي فهرستي است از اصطلاح ها و تشريح و توصيف آنها.
فهرستهاي تعريفي با <dl> شروع شده و هر ذوج اصطلاح و تعريف مربوط به آن با تگهاي <dt> و <dd> تعريف ميشوند.
HTML code نمايش توسط مرورگر
<dl>
<dt>HTTP</dt>
<dd>Hypertext Transfer Protocol</dd>
<dt>FTP</dt>
<dd>File Transfer Protocol</dd>
<dt>IP</dt>
<dd>Internet Protocol</dd>
</dl>
HTTP
Hypertext Transfer Protocol
FTP
File Transfer Protocol
IP
Internet Protocol
<dl dir="rtl" >
<dt >مقدمه</dt>
<dd>خلاصه اي از مقدمه</dd>
<dt>فصل 2</dt>
<dd>خلاصه اي از فصل 1</dd>
<dt>فصل 2</dt>
<dd>خلاصه اي از فصل 2</dd>
</dl>
مقدمه
خلاصه اي از مقدمه
فصل 1
خلاصه اي از فصل 1
فصل 2
خلاصه اي از فصل 2
داخل تگهاي تشريح يعني <dd> ميتوانيد از پاراگرافها، تگهاي br ، تصاوير و حتي فهرستهاي ديگر استفاده کنيد. به شناسه dir در مثال بالا توجه کنيد، امکان تعيين سمت و جهت نمايش متون در تمامي تگهاي مربوط به فهرستها ممکن ميباشد.
مثالهاي بيشتر
انواع فهرستهاي مرتب
مثالي در مورد فهرستهاي مرتب به همراه استفاده از شناسه type جهت تعيين نوع نمايش فهرست
انواع فهرستهاي نامرتب
مثالي در مورد فهرستهاي نامرتب به همراه استفاده از شناسه type جهت تعيين نوع نمايش فهرست
فهرستهاي تودرتو
مثالي در مورد فهرستهاي ترکيبي. اعضاي فهرست ميتوانند از فهرستهاي ديگر تشکيل شوند.
فهرستهاي تعريفي
مثالي در مورد فهرستهاي تعريفي به همراه استفاده از شناسه dir
تگهاي فهرست
Start Tag Purpose کاربرد
<ol> Defines an ordered list تعريف فهرستهاي مرتب
<ul> Defines an unordered list تعريف فهرستهاي نامرتب
<li> Defines a list item تعريف يک آيتم و قلم از يک فهرست
<dl> Defines a definition list تعريف فهرستهاي تعريفي
<dt> Defines a definition term تعريف اصطلاح در فهرستهاي تعريفي
<dd> Defines a definition description تعريف معني و شرح اصطلاح در فهرستهاي تعريفي
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
-
از طريق استفاده از عنصر <form> و چند تگ مرتبط قادر به دريافت اطلاعات از بازديدکنندگان صفحاتتان و يا تبادل اطلاعات بين صفحات مختلف خواهيد شد. با کمک اين گروه از تگ ها قادر به نمايش باکسهاي ورود اطلاعات متن (text fields) ، چک باکسها (check-boxes) ، راديو باتونها (radio-buttons) و ... شده و همچنين امکان گذاشتن دکمه هاي ارسال (submit button) و يا حذف (reset) را خواهيد داشت. اين فصل با شرح تگ هاي form و input و ... به چگونگي ايجاد ارتباط با بازديدکنندگان و گرفتن اطلاعات از آنها بصورت لاتين و يا فارسي خواهد پرداخت.
توجه داشته باشيد که براي پردازش اطلاعات دريافتي از کاربر بايد با يکي از زبانهاي cgi از قبيل ASP، perl، PHP، CFM ، JSP يا Java آشنائي داشته باشيد. مثالهاي cgi مدرسه وب از ربان اسکريپت Perl استفاده ميکنند.
مثالها:
وروديهاي متن يا Text fields
مثالي ساده در مورد ايجاد text field ها . با کمک text field ها کاربران قادر به وارد کردن و تايپ متن خواهند شد.
وروديهاي رمز عبور يا Password fields
مثالي ساده در مورد ايجاد password field ها . با کمک password field ها کاربران قادر به ورود رمز عبور يا پسورد خواهند شد.
مثالهاي بيشتر
فرمها (Forms)
تمامي عناصر و تگهائي که تاکنون ديده ايد فقط به نمايش اطلاعات پرداخته اند و هيچکدام به گرفتن و اخذ اطلاعات از کاربر نپرداخته اند. فرمها که با تگ <form> معرفي ميشوند، طراح سايت را قادر به جمع آوري و اخذ اطلاعات از بازديدکننده سايت خواهند کرد. عنصر فرم و گروهي از عناصر و تگهاي درون آن به دريافت و ارسال اطلاعات به سمت وب سرور کمک خواهند کرد و لازم به ذکر است که تمامي تگهاي مربوط به فرمها بايد درون تگهاي <form> و <form/> قرار ميگيرند.
درون تگ فرم گروه زيادي از عناصر و تگهاي مختلف قابل استفاده هستند از قبيل عناصر ورود متن يک سطري(text fields)، عناصر ورود متنهاي چند سطري (Textarea)، منوهاي drop-down و radio buttons و ...
تگ Input
به عنوان پر مصرف ترين تگ مربوط به ورود اطلاعات بايد از تگ <input> نام برد. در اين تگ شناسه اي به نام type به تعيين نوع اطلاعات ورودي اختصاص دارد. مقادير ممکن براي اين شناسه به قرار زيرند:
text , checkbox , radio , password , hidden , submit , reset , button , file , image
در ادامه به شرح بعضي از type هاي کاربردي خواهيم پرداخت:
وروديهاي متن (Text Fields)
اگر ميخواهيد که بازديدکننده اطلاعاتي از قبيل متن، اعداد و ... را وارد کند از شناسه اي با مقدار "text" استفاده ميشود.
کد اچتمل نمايش توسط مرورگر
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
First name:
Last name:
<form dir="rtl" >
نـــــــــــــــام:
<input type="text" name="firstname">
<br>
نام خانوادگي:
<input type="text" name="lastname">
</form>
نـــــــــــــــام:
نام خانوادگي:
توجه داشته باشيد که تگ <form> چيزي را به نمايش نخواهد گذاشت بلکه تگهاي درون آن توسط مرورگر نمايش داده خواهند شد. در مثال فارسي بالا به شناسه dir و مقدار rtl آن توجه داشته باشيد.لازم به يادآوري است که اغلب مرورگرها در حالت پيش فرض براي وروديهاي متن اندازه 20 کاراکتر را در نظر ميگيرند و اگر ميخواهيد که اندازه پيش فرض وروديهاي متن را تغيير دهيد بايد از شناسه اي به نام size استفاده کنيد.
وروديهاي Radio Buttons
اگر ميخواهيد که بازديدکننده گزينه اي را از بين چند گزينه محدود انتخاب کند، از مقدار "radio" براي شناسه type استفاده کنيد:
کد اچتمل نمايش توسط مرورگر
<form>
<input type="radio" name="---" value="male"> Male
<br>
<input type="radio" name="---" value="female"> Female
</form>
Male
Female
<form dir="rtl">
<input type="radio" name="---" value="male"> مرد
<br>
<input type="radio" name="---" value="female"> زن
</form>
مرد
زن
همانطور که مشاهده ميشود فقط امکان يکي از گزينه ها براي کاربر ميسر است.
وروديهاي Checkboxes
اگر ميخواهيد که بازديدکننده يک يا چند گزينه را از بين چند گزينه محدود انتخاب کند، از مقدار "checkbox" براي شناسه type استفاده کنيد:
کد اچتمل نمايش توسط مرورگر
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>
I have a bike
I have a car
<form dir="rtl">
<input type="checkbox" name="bike">
دوچرخه دارم
<br>
<input type="checkbox" name="car">
ماشين دارم
</form>
دوچرخه دارم
ماشين دارم
شناسه Action و دکمه Submit در فرمها ( Form's Action Attribute & Submit Button)
در فرمها براي ارسال اطلاعات کسب شده از دکمه اي به نام ارسال يا Submit Button استفاده ميشود و در اثر کليک کاربر بروي اين دکمه "Submit" ، اطلاعات درون فرم به فايلي ديگر ارسال خواهند شد. براي تعيين مقصد ارسال اطلاعات بايد درون تگ form از شناسه اي به نام action استفاده کنيد. مقدار شناسه action آدرس يا url فايلي است که به دريافت و سپس پردازش اطلاعات دريافتي خواهد پرداخت. معمولا فايلهاي بخش action برنامه ها و اسکريپت هائي نوشته شده با ربانهاي cgi مانند ASP، Perl ، PHP و ... بوده و وظيفه آنها دريافت اطلاعات فرمها و سپس پردازش آنها ميباشد.
تعيين مقدار "submit" براي شناسه type سبب نمايش دکمه Submit يا ارسال خواهد گرديد.
کد اچتمل نمايش توسط مرورگر
<form name="input" action="form_action.cgi">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
Username:
<form name="input" action="form_action.cgi" dir="rtl">
نام کاربر
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
نام کاربر
در مثال بالا در باکس ورودي متن، کلمه اي را وارد کرده و دکمه ارسال را کليک کنيد. مرورگر به محض کليک دکمه ارسال، اطلاعات درون فرم را که در اين مثال متني ساده است به سمت فايلي که در شناسه action تعيين شده است ارسال کرده و در اين مثال برنامه اي به زبان Perl با نام form_action.cgi در سمت سرور به ذخيره و سپس نمايش متني خبري خواهد پرداخت.
ورود متن فارسي در عناصري مانند Text field يا Text area:
همانطور که در مثالهاي بالا مشاهده کرديد در مورد المانهاي Text field و Textarea با کمک شناسه dir ميتوان سمت و جهت ورود اطلاعات را "از راست به چپ" تعيين کنيد. ولي اگر کاربري ويندوز فارسي نداشته باشد، از کامپيوترهاي مکينتاش استفاده کند و يا سيستمش را فارسي نکرده باشد قادر به ورود اطلاعات به زبان فارسي نخواهد بود و نويسه هاي تايپ شده لاتين خواهند بود!، در اينگونه موارد چه بايد کرد؟
معمولا برنامه نويسان وب براي فراهم ساختن امکان ورود متن فارسي از يکي از دو روش زير استفاده ميکنند:
استفاده از اپلتهاي جاوا با اين مزيت که سورس و کد اصلي فارسي سازي قابل استفاده توسط ديگران نيست!!
استفاده از زبان جاوا اسکريپت و با اين عيب که سورس و کد اصلي JavaScript قابل مشاهده و استفاده توسط ديگران است!
مدرسه وب بر اساس دستورالعملهاي "پروژه فارسي وب" از روش دوم استفاده کرده و از کد جاوا اسکريپت فراهم شده توسط اين پروژه استفاده ميکند. مثال زير نحوه استفاده از کد فارسي ساز جاوا اسکريپتي مذکور را شرح خواهد داد:
فارسي ساز جاوا اسکريپتي
مثالي در مورد نحوه استفاده از فارسي ساز جاوا اسکريپتي در يک فرم متشکل از Textfield ها
مثالهاي بيشتر
حالتهاي مختلف ورودي Input
در تگ input و با کمک شناسه type و مقادير مختلف براي آن ميتوان انواع مختلف اطلاعات را از وبگرد گرفت.
Checkboxes
مثالي در مورد نحوه تعريف فرمي متشکل از Checkbox ها
Radiobuttons
مثالي در مورد نحوه تعريف فرمي متشکل از Radiobutton ها
فهرست کرکره اي ساده
مثالي در مورد نحوه تعريف فرمي متشکل از drop down box ها
فهرست کرکره اي ديگر
مثالي در مورد نحوه تعريف فرمي متشکل از drop down box ها با تعيين پيش گزينه
Textarea
مثالي در مورد نحوه تعريف فرمي متشکل از Textarea ، ناحيه اي براي ورود بيش از يک سطر متن (نکته: استفاده از اديتور ما براي اين مثال امکان پذير نيست! اگر گفتيد چرا!؟)
تعريف فرمي با کمک دکمه يا button
مثالي در مورد نحوه تعريف فرمي با کمک دکمه يا button
ترسيم مرز در اطراف فرم
مثالي در مورد نحوه تعريف فرمي دلخواه و ترسيم مرزي بدور آن به همراه تعيين عنواني براي فرم با کمک عنصر Fieldset
ارسال ايميل با کمک فرمها
مثالي در مورد نحوه ارسال ايميل با کمک فرمها
ساختن فهرستي از سايتهاي مورد علاقه
مثالي در مورد نحوه استفاده از تگ فرم و منوهاي کرکره اي و کمي جاوا اسکريپت براي ساخت فهرستي از سايتها
تگهاي فرم
Start Tag Purpose کاربرد
<form> Defines a form for user input تعريف فرم ورود اطلاعات
<input> Defines an input field تعريف ورودي از نوع Input
<textarea> Defines a text-area (a multi-line text input control) تعريف ورودي متن چند سطري يا text-area
<label> Defines a label to a control تعريف برچسب يا label
<fieldset> Defines a fieldset تعريف fieldset
<legend> Defines a caption for a fieldset تعريف عنوان براي fieldset ها
<select> Defines a selectable list (a drop-down box) تعريف فهرستهاي انتخابي يا drop-down box
<optgroup> Defines an option group تعريف option group ها
<option> Defines an option in the drop-down box تعريف گزينه اي از drop-down box ها
<button> Defines a push button تعريف دکمه فشاري، متفاوت با button تگ input
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
-
در اين درس با تگ img ، شناسه src و alt ، تگهاي Map و Area و چگونگي نمايش تصاوير و همچنين تنظيم محل آنها در سندهاي اچتمل آشنا خواهيد شد.
مثالها:
درج تصوير
نحوه درج تصاوير با کمک تگ img
درج تصويري واقع در فضاي آدرسي ديگر
درج تصويري واقع در دايرکتوريي غير از آدر س صفحه اچتمل و يا تصويري واقع در فضاي آدرسي ديگر سايتها
مثالهاي بيشتر
تگ img و شناسه src يا source
در زبان اچتمل تصاوير را با کمک تگ <img> تعريف ميکنند. تگ <img> از نوع تگهاي خالي است، بدين معنا که فقط داراي يک يا چند شناسه و attribute بوده و داراي تگ انتهائي يا <img/> نيست.
مهمترين شناسه براي درج و تعريف يک تصوير src يا source نام دارد و مقدار اين شناسه آدرس يا URL تصوير ميباشد. تصاويري که مرورگر در يک صفحه وب نمايش ميدهد ميتوانند در همان دايرکتوري صفحه اچتمل، در ديگر دايرکتوريهاي همان سايت و يا در فضاي بيکران وب قرار داشته باشند.
شکل ساده درج يک تصوير:
<img src="url">
مقدار url آدرس اينترنتي تصوير ميباشد و مثلا اگر تصويري که قرار است که در صفحه درج شود در همان دايرکتوري قرار دارد و نامش me.jpg ، کافي است که به جاي url فقط نام تصوير يعني me.jpg را بنويسيد و اگر تصوير در سايتي ديکر قرار دارد url کامل آنرا بنويسيد. مثلا تصوير لوگو سايت google.com داراي url ي برابر
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
است.در اين url نام تصوير logo.gif بوده، در دايرکتوري images قرار داشته و روي وب سايت google.com قرار دارد.
شناسه هاي width و height در تگ img
کاربرد شناسه هاي width و height تعيين عرض و ارتفاع نمايش تصوير است. اگر از اين شناسه ها استفاده نکنيد، مرورگر ابتدا تصوير را لود کرده و سپس طول و عرض آنرا يافته و در نهايت نمايش ميدهد. با نوشتن مقاديري غير از مقادير واقعي طول و عرض تصوير ميتوانيد به تغيير شکل و ابعاد آن بپردازيد و آنرا مثلا کوچکتر، بزرگتر و يا کشيده تر نمايش دهيد. مثال زير نحوه درج تصويري را با قيد ابعاد آن شرح ميدهد:
<img src="http://www.google.com/images/logo.gif" width="276" height="110" >
توصيه ميشود که حتما ابعاد تصوير را با کمک شناسه هاي width و height قيد کنيد، اينکار سبب کمک به مرورگر در تسريع شروع نمايش صفحه خواهد شد.(در واقع با قيد ابعاد تصوير، مرورگر قبل از لود تصوير ميداند که چه مقدار از صفحه نمايش بايد به تصوير بايد اختصاص داده شود و قبل از لوذ شدن تمامي تصاوير مرورگر شروع به نمايش قالب و چارچوب کلي صفحه خواهد کرد.)
شناسه Alt يا "alternate text" يا متن جايگزين
اگر مرورگر به هر دليلي نتواند که يک تصوير را نمايش دهد و يا مرورگر از نوع مرورگرهائي باشد که فقط متن را نمايش ميدهند، متن و text ي که با کمک شناسه alt تعيين شده است نمايش داده خواهد شد. همچنين در اغلب مرورگرها با قرارگرفتن ماوس بروي يک تصوير، متن تعيين شده توسط شناسه alt نمايش داده خواهد شد. با کمک alt اطلاعات اضافي مربوط به تصوير قابل نمايش ميباشد.مثال زير نحوه درج تصويري را با قيد متن جايگزين آن شرح ميدهد:
<img src="images/ganjafzar.gif" alt="Iran Developers!" >
وبلاگها و اضافه کردن تصاوير:
اگر وبلاگي داشته و ميخواهيد که تصويري به آن اضافه کنيد دو حالت مختلف ممکن است که پيش آيد:
الف) تصوير روي سايتي ديگر قرار داشته و شما هم ميخواهيد از آن تصوير که در سايتي ديگر قرار دارد استفاده کنيد. در اين حالت از آدرس مستقيم تصوير در شناسه src استفاده کنيد، مانند :
<img src="http://www.google.ca/images/hp0.gif" width=258 height=78 >
در اين مثال تصوير روي سايت google.ca قرار داشته و لزومي به ذخيره آن توسط شما نيست.
ب) تصوير روي هارد کامييوتر شما است و هنوز بروي وب منتقل نشده است. در اين حالت چون اغلب سيستم هاي وبلاگ امکان ذخيره تصاوير را به شما نمي دهند بايد ابتدا تصويرتان را با کمک FTP يا روشهاي ديگر به روي سايتي ديگر منتقل کنيد. شرکتهاي مختلفي فضاي مجاني براي ساخت صفحات وب و ذخيره اطلاعات و تصاوير در اختيار شما قرار ميدهند و در يکي از سؤالهاي اين FAQ فهرست اين شرکتها را ميتوانيد ببينيد. بنابراين ابتدا فضائي در وب تهيه کرده، سپس تصويرتان را Upload کرده (با کمک FTP يا روشهاس ديگر ) و سپس در شناسه src از تگ img آدرس جديد تصوير را قيد کنيد.
چند نکته مهم:
اگر در يک صفحه اچتمل از 10 تصوير استفاده شده باشد، مرورگر بايد 11 فايل را لود کند.( خود صفحه به علاوه 10 تصوير)
استفاده از تصاوير، سرعت لود شدن صفحات را پايين مي آورد.با احتياط از تصاوير استفاده کنيد و به اندازه و حجم تصوير توجه داشته باشيد.
لود تصويري با حجم 50 کيلوبايت براي کسي که از مودمي با سرعت 28kbps استفاده ميکند حداقل 15 ثانيه طول خواهد کشيد.
براي ديدن مشخصات تصاوير در وب کافي است که روي تصوير Right click کرذه و سپس در بخش properities آدرس،ابعاد و ظرفيت تصوير را ببينيد.
براي ذخيره تصاوير در وب کافي است که روي تصوير Right click کرذه و سپس در بخش "Save picture as" آنرا ذخيره کنيد.
مثالهاي بيشتر
تصاوير زمينه
مثالي در مورد نحوه تعيين تصاوير زمينه با کمک شناسه background در تگ body
ترازبندي تصاوير
اين مثال نحوه ترازبندي تصاوير در کنار متون را نشان ميدهد.
تصاوير شناور در متن
آزاد گذاشتن تصوير در سمت چپ يا راست
نمايش تصاوير در ابعاد مختلف
مثالي در مورد استفاده از شناسه هاي width و height و نمايش تصاوير در ابعاد مختلف
نمايش متن جايگزين براي تصاوير
مثالي در مورد استفاده از شناسه alt
استفاده از تصاوير هنگام ايجاد پيوند ها
مثالي در مورد نحوه استفاده از تصاوير هنگام ايجاد پيوند ها
ايجاد image map ها
مثالي در مورد ايجاد image map . در اين مثال هر بخش از نواحي تعريف شده قابل کليک بوده و به پيوندي اختصاصي اشاره ميکند.
تگ هاي تصاوير
Start Tag Purpose کاربرد
<img> Defines an image درج تصوير
<map> Defines an image map تعريف Image map يا ؟؟؟
<area> Defines an area inside an image map تعريف ناحيه اي در داخل Image map
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
-
در اين درس با چگونگي تعيين تصاوير و رنگ پس زمينه (Background) آشنا خواهيد شد. رنگ و يا تصوير پس زمينه فاکتور بسيار مهمي در طراحي صفحات اچتمل بوده و استفاده از رنگ و يا تصوير مناسب نقشي تعيين کننده در خوانا بودن صفحات دارد.
مثالها:
رنگ متن و زمينه متناسب
انتخاب رنگ مناسب متون و پس زمينه به خوانا بودن متن کمک شايان توجهي خواهد کرد.
رنگ متن و زمينه نامتناسب
مثالي از انتخاب نامناسب رنگ متن و پس زمينه
مثالهاي بيشتر
رنگ و تصوير زمينه در صفحات اچتمل:
تگ <body> داراي دو شناسه مهم براي تعيين رنگ و تصوير پس زمينه ميباشد. پس زمينه صفحات اچتمل رنگ و يا يک تصوير ميتواند باشد.
شناسه bgcolor براي رنگ پس زمينه (background color)
شناسه bgcolor رنگ پس زمينه را تعيين ميکند. مقدار رنگ پس زمينه ميتواند نام رنگ (مثل red يا blue ) ، مقدار آن بر اساس استاندارد RGB و يا حتي مقدار هگزادسيمال (Hexadecimal) باشد.
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
در تمامي مثالهاي بالا با کمک شناسه bgcolor رنگ زمينه صفحه "سياه" تعيين ميشود.
شناسه Background براي تصوير پس زمينه:
براي تعيين تصويري که به عنوان پس زمينه صفحه نمايش داده ميشود از شناسه background استفاده ميشود.مقدار اين شناسه URL يا آدر س تصوير (image) ميباشد.اگر ابعاد تصوير کوچکتر از ابعاد صفحه مرورگر باشد، تصوير زمينه تکثير خواهد شد تا حدي که تمام صفحه نمايش از تصوير زمينه پوشانده شود.
<body background="bg.gif">
<body background="http://www.khaterat.com/images/bg.gif">
در مثال اول از آدرس دهي نسبي (relative) براي تعيين URL يا آدرس تصوير استفاده شده و در واقع در اين مثال فايل اچتمل و تصوير bg.gif بايد در يک دايرکتوري قرار گيرند. در مقابل مثال دوم از آدرس دهي مطلق (absolute) براي تعيين آدرس تصوير استفاده شده است و همانطور که ميدانيد آدرس تصوير در هر نقطه از فضاي وب ميتواند باشد.
نکات مهم: اگر از تصاوير پس زمينه در صفحات اچتمل استفاده ميکنيد به نکات زير توجه کنيد :
هرتصويري با فرمت gif و يا jpg قابل استفاده به عنوان تصوير زمينه ميباشد.
از تصاوير بزرگتر از ده کيلوبايت ظرفيت به هيچ وجه استفادا نکنيد، در غير اين صورت سرعت load صفحه بشدت پايين خواهد آمد.
از تصاوير زمينه هماهنگ با ديگرتصاوير صفحه استفاده کنيد.
از تصاوير زمينه هماهنگ با متون صفحه استفاده کنيد.
در رزولوشنهاي مختلف به ديدن و آزمايش تصاوير پس زمينه بپردازيد.
پر مصرف ترين رنگهاي زمينه وب سايتها، رنگهاي سفيد، سياه و خاکستري ميباشند.
اغلب سايتهاي وب از تصاوير پس زمينه استفاده نمي کنند! مثلا همين سايت!!!
نکته مهم در سازگاري با نسخه هاي جديد اچتمل و XHTML
شناسه هاي bgcolor و background در تگ <body> در نسخه 4 اچتمل و XHTML پشتيباني نميشوند و در واقع از رده خارج محسوب ميشوند. در عوض کنسرسيوم W3C استفاده از Style Sheet ها را توصيه ميکند و در واقع در نسخه 4 اچتمل و استاندارد جديد XHTML تمامي اطلاعات مربوط به نمايش يا presentation و layout بايد در style sheet ها قرار گيرند.
مثالهاي بيشتر
استفاده مناسب از تصوير زمينه 1
در اين مثال بدليل استفاده از تصوير مناسب براي زمينه، نوشته هاي صفحه کاملا خوانا هستند.
استفاده مناسب از تصوير زمينه 2
در اين مثال در اثر استفاده از تصوير مناسب براي زمينه، نوشته هاي صفحه کاملا خوانا هستند.
استفاده نامناسب از تصوير زمينه
در اين مثال نوشته هاي صفحه خوانا نيستند.
استفاده از تصوير زمينه با آدرس مطلق
در اين مثال آدرس تصوير زمينه بصورت مطلق و کامل آورده شده است.
تعيين رنگ زمينه با Style Sheet ها
در اين مثال چگونگي استفاده از Style Sheet ها براي تعيين رنگ زمينه آورده شده است.
-
با وجوديکه هنوز بعضي از اچتمل کاران از تگ <font> براي تعيين نام و نوع قلم، رنگ و اندازه متون استفاده ميکنند ولي در استاندارد جديد اچتمل (نسخه 4) و همچنين XHTML از تگ <font> پشتيباني نميشود و استفاده از Style Sheet ها به عنوان جايگزين معرفي شده است.
تگ <font>
در نسخه هاي 3.2 و قبلي تر زبان اچتمل از تگ <font> براي تعيين نام قلم، رنگ و اندازه متون استفاده ميشود. در اين تگ شناسه face نام قلم ، شناسه size انداره قلم و شناسه color معرف رنگ متن خواهد بود. مثالهاي زير کاربرد تگ <font> خدابيامرز را نشان ميدهند:
کد اچتمل نمايش کد روبرو توسط مرورگر
<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>
This is a paragraph.
<p dir="rtl">
<font size="1" face="Times" color="#FF9900">
متني با قلم Times و اندازه 1 و رنگ FF9900
</font>
</p>
متني با قلم Times و اندازه 1 و رنگ FF9900
<p dir="rtl">
<font size="2" face="Tahoma" color="red">
اين متني با قلم Tahoma و اندازه 2 و رنگ قرمز
</font>
</p>
متني با قلم Tahoma و اندازه 2 و رنگ قرمز
شناسه هاي تگ <font>
Attribute Example کاربرد
size="number" size="2" تعيين اندازه قلم
size="+number" size="+1" افزايش اندازه قلم
size="-number" size="-1" کاهش اندازه قلم
face="face-name" face="Times" تعيين نام قلم
color="color-value" color="#eeff00" تعيين رنگ قلم
color="color-name" color="red" تعيين رنگ قلم
*** بيان مختصر عملکرد تگ <font> در اين دروس فقط جهت اطلاع بوده و استفاده از آنها در طراحي صفحات اچتمل توصيه نميشود.
ديگر از تگ <font> استفاده نکنيد!
تگ <font> از رده خارج محسوب ميشود و کنسرسيوم جهاني تعيين استانداردهاي وب (World Wide Web Consortium, W3C) اين تگ را از مجموعه تگهاي استاندارد اچتمل کنار گذاشته است و اکيدا توصيه ميشود که از Style Sheet ها براي تعريف هر گونه خواص نمايشي و آرايشي (layout & Presentation) المانها در اچتمل استفاده شود.
روش صحيح تعيين نام قلم، اندازه و رنگ متون با کمک Style Sheet ها:
هر چند که مبحث و کلاسهاي درس Style Sheet ها در "مدرسه وب" در دست تهيه بوده و اميدواريم که بزودي ارائه شوند ولي تا قبل از آن استفاده از شناسه اي به نام style در بسياري از المانها کار گشا خواهد بود. مثالهاي ساده زير نحوه تعيين نام قلم، اندازه و رنگ متون را با کمک شناسه style به نمايش خواهند گذاشت:
تعيين نام قلم
مثالي در مورد تعيين نام قلم در يک استيل درجا (inline)
تعيين اندازه قلم
مثالي در مورد تعيين اندازه قلم در يک استيل درجا (inline)
تعيين رنگ قلم
مثالي در مورد تعيين رنگ قلم در يک استيل درجا (inline)
تعيين نام، اندازه و رنگ قلم
مثالي در مورد تعيين نام، اندازه و رنگ قلم در يک استيل درجا (inline)
مثال کاربردي در مورد Style Sheet ها
مثالي در مورد نحوه تعريف استيلهاي مختلف نمايش متون در جداول
تگ <span>
تگ <span> سبب تعريف محدوده و گستره اي مشخص ميشود. تمامي المان هائي که درون تگهاي <span> و <span/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصي از قبيل استيل (Style) و يا سمت و جهت نمايش متون(dir).
بر خلاف تگ هاي <p> و <div> مرورگرها هيچ سطر جديدي به اول يا آخر المان <span> اضافه نمي کنند.
مثال:
کد اچتمل نمايش کد روبرو توسط مرورگر
<p>Some text <span style="color:#0000AF;">another text</span> again text...</p>
Some text another text again text...
id, class, title, style, dir, lang شناسه هاي استاندارد المان span
مثالهائي از نحوه استفاده از المان span و Style sheet ها:
روش قديمي روش صحيح
<font color="#FF00FF">Hello!</font> <span style="color:#FF00FF">Hello!</span>
<font color="rgb(255,0,255)">Hello!</font> <span style="color:rgb(255,0,255)">Hello!</span>
<font style="color:Fuchsia">Hello!</font> <span style="color:Fuchsia">Hello!</span>
<font color="#FF00FF" size="3">Hello!</font> <span style="color:#FF00FF;font-size:100%">Hello!</span>
تگ <div>
تگ <div> سبب تعريف محدوده و گستره اي مشخص ميشود. تمامي المان هائي که درون تگهاي <div> و <div/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصي از قبيل استيل (Style) و يا سمت و جهت نمايش متون(dir).
بر خلاف تگ <span> مرورگرها يک سطر جديد به اول و آخر المان <div> اضافه مي کنند.
مثال:
کد اچتمل نمايش کد روبرو توسط مرورگر
<p>Some text <div style="color:#0000AF;">another text</div> again text...</p>
Some text
another text
again text...
id, class, title, style, dir, lang شناسه هاي استاندارد المان div
تعيين جهت نمايش متون
مثالي در مورد استفاده از تگ div و اعمال "جهت نمايش متون" به بخشي از صفحه اچتمل
Start Tag Purpose کاربرد
<div> Defines a division/section in a document تعريف بخش و ناحيه اي از صفحه اچتمل
<span> Defines a section in a document تعريف بخش و ناحيه اي از صفحه اچتمل
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
-
در نسخه جديد(4/0) اچتمل امکان جداسازي کامل فرمت دهي از ساختار صفحات اچتمل فراهم شده است. در اين نسخه توصيه ميشود که تمامي اطلاعات مربوط به نمايش و ترازبندي به فايلهائي مجزا از صفحه اچتمل منتقل شوند. بخشي از صقحات اچتمل که مربوط به نمايش، ترازبندي و فرمت دهي است، استايل شيت يا "Style Sheet" ناميد شده و معمولا به صورت فايلي مجزا درون بخش <head> صفحات اچتمل معرفي ميگردند. در اين درس به صورت بسيار خلاصه با روشهاي مختلف استفاده از استايل شيتها در صفحات اچتمل آشنا خواهيد شد.
مثالها
استيلها در اچتمل
در اين مثال نحوه تعريف استايل شيتها درون بخش <head> صفحات اچتمل شرح داده شده است. (Internal Style Sheet)
پيوندي بدون خط افقي زيري
در اين مثال نحوه ايجاد پيوندي بدون "خط افقي زيري" شرح داده شده است. (Inline Styles)
اتصال به فايلهاي استايل شيت خارجي
در اين مثال نحوه استفاده از تگ <link> جهت اتصال به فايلهاي استايل شيت خارجي شرح داده خواهد شد. (External Style Sheet)
چگونگي استفاده از استايل شيتها:
مرورگرها از روي استيلهاي تعريف شده توسط استايل شيتها به فرمت دهي و نمايش اطلاعات درون صفحه اچتمل ميپردازند. تعريف و استفاده از استايل ها در صفحات اچتمل به سه روش مختلف ممکن ميباشد:
1)استايل شيتهاي خارجي (external style sheet) :
در اين روش تمامي استيلها و تعاريف نمايشي درون فايلي جداگانه قرار گرفته و بسيار مناسب حالتهائي است که قرار است که استايلي به بيش از يک صفحه اچتمل اعمال شود. مزيت اين روش سهولت در تغيير ظاهر صفحات يک وب سايت ميباشد و براي يک تغيير کلي در سايت کافي است که فايل استايل شيت کل سايت که معمولا يک فايل واحد است تغيير داده شود. (بايد توجه داشت که در اين حالت تمامي صفحات سايت بايد به يک فايل استايل شيت واحد لينک شده باشند.) استايل شيتهاي خارجي توسط تگ <link> که درون بخش head صفحات اچتمل قرار ميگيرد، معرفي ميشوند.
در مثال زير با کمک شناسه href از تگ link نام و در حالت کلي url فايل در برگيرنده استايلهاي تعريف شده تعيين ميگردد:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2)استايل شيتهاي داخلي (Internal Style Sheet) :
کاربرد اين روش در حالتهائي است که صفحه اچتمل نيازمند تعريف استايلي منحصر به فرد و مجزا بوده و استايل طراحي شده فقط بدرد آن صفحه خواهد خورد. در اين حالت بايد کدهاي حاوي تعريف استايل درون تگ هاي <style> و <style/> قرار گرفته و معمولا نتيجه درون بخش head صفحه اچتمل گذاشته ميشود.مثال:
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
3)استايل شيتهاي درجا (Inline Styles) :
کاربرد اين روش در مواردي است که بايد براي يک المان (يا گروهي) خاص استايلي اعمال شود. در اين حالت بايد از شناسه اي به نام style که تقريبا در تمامي تگها قابل اعمال است استفاده شود. مثال:
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
تگ هاي استايل
Start Tag Purpose کاربرد
<style> Defines a style in a document تعريف استيلها درون يک سند
<link> Defines the relationship between two linked documents تعيين و تعريف فايل استايل شيت خارجي
<font> Deprecated. Use styles instead کنار گذاشته شده.از استايل شيتها استفاده شود.
<basefont> Deprecated. Use styles instead کنار گذاشته شده.از استايل شيتها استفاده شود.
<center> Deprecated. Use styles instead کنار گذاشته شده.از استايل شيتها استفاده شود.
مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها
تغييرات در نسخه جديد اچتمل (4/0) :
هدف اوليه از طراحي زبان اچتمل ايجاد زباني براي تعريف اطلاعات محض بدون در برداشتن جزئيات مربوط به فرمت و نمايش بود ولي با ايجاد نسخه 3/2 زبان اچتمل و اضافه شدن تگهاي فرمت دهي مانند <font> و يا شناسه هائي مانند color و Align محتوا و نمايش در صفحات اچتمل ادغام گرديده و همين امر سبب بروز مشکلات عديده اي براي طراحان و برنامه نويسان وب گرديد. براي رفع اين مشکل در نسخه 4/0 اچتمل توصيه بر جداسازي کامل اين دو گروه از اطلاعات بوده و در نسخه هاي آينده اچتمل اين جداسازي اجباري خواهد گرديد و توصيه مدرسه وب نيز استفاده از استايل شيتها براي هر نوع تعريف فرمت و ترازبندي ميباشد. براي مثال در کد اچتمل زير که بر اساس نسخه 3/2 اچتمل ميباشد، ساختار و محتوا (تگي از نوع پاراگراف با محتواي "This is a paragraph") با اطلاعات نمايش يعني رنگ و ترازبندي (رنک قرمز متن و ترازبندي در وسط صفحه) همزمان و در کنار هم آورده شده اند و اين ادغام امکان تغيير و توسعه کد را بسيار محدود خواهد کرد:
<p align="center"><font color="red">This is a paragraph</font></p>
کد معادل مثال فوق با استفاده از استايل شيتها در اين مثال شرح داده شده است.(هر چند که اين مثال از تمامي امکانات استايل شيتها و ايجاد فايلي کاملا مستقل براي تعريف استايل استفاده نکرده است.)
-
NAME W3C HTML NS MSIE DESCRIPTION
A HTML40 NS3+ MSIE3+ anchor
ABBR HTML40 abbreviated form (e.g., WWW, HTTP, etc.)
ACRONYM HTML40
ADDRESS HTML40 NS3+ MSIE3+ information on author
APPLET HTML40 NS3+ MSIE3+ Java applet
AREA HTML40 NS3+ MSIE3+ client-side image map area
B HTML40 NS3+ MSIE3+ bold text style
BASE HTML40 NS3+ MSIE3+ document base URI
BASEFONT HTML40 NS3+ MSIE3+ base font for the page
BDO HTML40 MSIE5+ I18N BiDi over-ride
BGSOUND MSIE3+ background sound
BIG HTML40 NS3+ MSIE3+ enlarge text style
BLINK NS3+ blinking text
BLOCKQUOTE HTML40 NS3+ MSIE3+ long quotation
BODY HTML40 NS3+ MSIE3+ document body
BR HTML40 NS3+ MSIE3+ forced line break
BUTTON HTML40 MSIE4+ push button
CAPTION HTML40 NS3+ MSIE3+ table caption
CENTER HTML40 NS3+ MSIE4+ shorthand for DIV align=center
CITE HTML40 NS3+ MSIE3+ citation font format
CODE HTML40 NS3+ MSIE3+ computer code fragment
COL HTML40 MSIE3+ table column
COLGROUP HTML40 MSIE3+ table column group
COMMENT MSIE3+ comment ignored by the browser
DD HTML40 NS3+ MSIE3+ definition description
DEL HTML40 MSIE4+ deleted text
DFN HTML40 MSIE3+ instance definition
DIR HTML40 NS3+ MSIE3+ directory list
DIV HTML40 NS3+ MSIE3+ generic language/style container
DL HTML40 NS3+ MSIE3+ definition list
DT HTML40 NS3+ MSIE3+ definition term
EM HTML40 NS3+ MSIE3+ emphasis
EMBED NS3+ MSIE3+ embeds external object in HTML
FIELDSET HTML40 MSIE4+ form control group
FONT HTML40 NS3+ MSIE3+ local change to font
FORM HTML40 NS3+ MSIE3+ interactive form
FRAME HTML40 NS3+ MSIE3+ subwindow
FRAMESET HTML40 NS3+ MSIE3+ window subdivision
H1 HTML40 NS3+ MSIE3+ heading
H2 HTML40 NS3+ MSIE3+ heading
H3 HTML40 NS3+ MSIE3+ heading
H4 HTML40 NS3+ MSIE3+ heading
H5 HTML40 NS3+ MSIE3+ heading
H6 HTML40 NS3+ MSIE3+ heading
HEAD HTML40 NS3+ MSIE3+ document head
HR HTML40 NS3+ MSIE3+ horizontal rule
HTML HTML40 NS3+ MSIE3+ document root element
I HTML40 NS3+ MSIE3+ italic text style
IFRAME HTML40 MSIE3+ inline subwindow
ILAYER NS4+ positioning content
IMG HTML40 NS3+ MSIE3+ Embedded image
INPUT HTML40 NS3+ MSIE3+ form control/field
INS HTML40 MSIE4+ inserted text
ISINDEX HTML40 NS3+ MSIE4+ single line prompt
KBD HTML40 NS3+ MSIE3+ text to be entered by the user
KEYGEN NS4+ for use in web-based certificate management systems
LABEL HTML40 MSIE4+ form field label text
LAYER NS4+ positioning content
LEGEND HTML40 MSIE4+ fieldset legend
LI HTML40 NS3+ MSIE3+ list item
LINK HTML40 NS4+ MSIE3+ a media-independent link
MAP HTML40 NS3+ MSIE3+ client-side image map
MARQUEE MSIE3+ scrolling text field
MENU HTML40 NS3+ MSIE3+ menu list
META HTML40 NS3+ MSIE3+ generic metainformation
MULTICOL NS3+ multiple column formatting
NOBR NS3+ MSIE3+ ensures that a line of text does not wrap to the next line
NOEMBED NS3+ alternative text for embedded objects
NOFRAMES HTML40 NS3+ MSIE3+ alternate content container for non frame-based rendering
NOLAYER NS3+ positioning content
NOSCRIPT HTML40 NS3+ MSIE3+ alternate content container for non script-based rendering
OBJECT HTML40 NS4+ MSIE3+ generic embedded object
OL HTML40 NS3+ MSIE3+ ordered list
OPTGROUP HTML40 option group
OPTION HTML40 NS3+ MSIE3+ selectable choice
P HTML40 NS3+ MSIE3+ paragraph
PARAM HTML40 NS3+ MSIE3+ named property value
PLAINTEXT NS3+ MSIE3+ text format
PRE HTML40 NS3+ MSIE3+ preformatted text
Q HTML40 MSIE4+ sets apart a quotation in text
S HTML40 NS2+ MSIE3+ strike-through text style
SAMP HTML40 MSIE3+ sample program output, scripts, etc.
SCRIPT HTML40 NS3+ MSIE3+ script statements
SELECT HTML40 NS3+ MSIE3+ option selector
SERVER NS3+ specifies server-side JavaScript statements
SMALL HTML40 NS3+ MSIE3+ small text style
SPACER NS3+ inserts a space in a document
SPAN HTML40 NS4+ MSIE3+ generic language/style container
STRIKE HTML40 NS3+ MSIE3+ strike-through text
STRONG HTML40 NS3+ MSIE3+ strong emphasis
STYLE HTML40 NS4+ MSIE3+ style info
SUB HTML40 NS3+ MSIE3+ subscript
SUP HTML40 NS3+ MSIE3+ superscript
TABLE HTML40 NS3+ MSIE3+ table
TBODY HTML40 MSIE4+ table body
TD HTML40 NS3+ MSIE3+ table data cell
TEXTAREA HTML40 NS3+ MSIE3+ multi-line text field
TFOOT HTML40 MSIE4+ table footer
TH HTML40 NS3+ MSIE3+ table header cell
THEAD HTML40 MSIE4+ table header
TITLE HTML40 NS3+ MSIE3+ document title
TR HTML40 NS3+ MSIE3+ table row
TT HTML40 NS3+ MSIE3+ teletype or monospaced text style
U HTML40 NS3+ MSIE3+ underlined text style
UL HTML40 NS3+ MSIE3+ unordered list
VAR HTML40 NS3+ MSIE3+ instance of a variable or program argument
