برترین مقالات کامپیوتر

برترین مقالات کامپیوتر

برترین مقالات کامپیوتر

برترین مقالات کامپیوتر

HTML

در این درس با پیوندها ( 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 صفحه http://www.khaterat.com/www/index.cgi خواهد رفت.

لگر مقصد پیوند در همان صفحه قرار دارد نیازی به قید 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 - فهرست عناصر - فهرست شناسه ها

ADMIN سه‌شنبه 20 تیر‌ماه سال 1385 ساعت 11:49
0 نظر

HTML

در این درس با المان جدول ( 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 تعریف عنوان جدول

    ADMIN سه‌شنبه 20 تیر‌ماه سال 1385 ساعت 11:49
    0 نظر

    HTML

    با کمک فریمها قادر به نمایش همزمان بیش از یک صفحه وب در پنجره مرورگر خواهید شد. در این درس با مفاهیم فریم ( 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)

    ADMIN سه‌شنبه 20 تیر‌ماه سال 1385 ساعت 11:48
    0 نظر

    HTML

    این درس شما را با نحوه نمایش انواع فهرستها شامل فهرستهای مرتب(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>
    1. Red
    2. Blue
    3. Green 
    <ol dir="rtl" >
<li>قهوه</li>
<li>شیر</li>
<li>چای</li>
</ol>
    1. قهوه
    2. شیر
    3. چای

    داخل تگهای <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 تعریف معنی و شرح اصطلاح در فهرستهای تعریفی

    ADMIN سه‌شنبه 20 تیر‌ماه سال 1385 ساعت 11:48
    0 نظر

    HTML

    از طریق استفاده از عنصر <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="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
    Male
    Female 
    <form dir="rtl">
<input type="radio" name="sex" value="male"> مرد
<br>
<input type="radio" name="sex" 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
    ADMIN سه‌شنبه 20 تیر‌ماه سال 1385 ساعت 11:47
    0 نظر

    HTML

    در این درس با تگ 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 ی برابر http://www.google.com/images/logo.gif است.در این 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!" >

    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 . در این مثال هر بخش از نواحی تعریف شده قابل کلیک بوده و به پیوندی اختصاصی اشاره میکند.

    • ADMIN سه‌شنبه 20 تیر‌ماه سال 1385 ساعت 11:47
    0 نظر

    HTML

    در این درس با چگونگی تعیین تصاویر و رنگ پس زمینه (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 ها برای تعیین رنگ زمینه آورده شده است.


    ADMIN سه‌شنبه 20 تیر‌ماه سال 1385 ساعت 11:46
    0 نظر

    منظور از وب چیست؟

    در این درس با مفاهیم وب، اینترنت، مرورگرها و استانداردهای وب آشنا خواهید شد.

    منظور از وب چیست؟
    • وب شبکه ای است متشکل از تمامی کامپیوترهای دنیا، شبکه ای از شبکه ها.
    • اینترنت، وب، WWW ، web یا World Wide Web همگی یک چیزند.
    • تمامی کامپیوترهای وب میتوانند با هم ارتباط داشته باشند.
    • کامپیوترهای موجود در وب با کمک استاندارد ارتباطی یا پروتوکل HTTP با هم ارتباط برقرار میکنند .
    نحوه کارکرد وب چگونه است؟
    • اطلاعات وب داخل فایلهائی به نام Web Pages و یا صفحات وب قرار دارند.
    • این فایلها یا صفحات روی Web Server یا کامپیوترهای سرویس دهنده وب ذخیره شده اند.
    • برای دیدن صفحات وب از نرم افزاری به نام مرورگر و یا Web Browser استفاده میشود.
    • دو مرورگر Internet Explorer و Netscape Navigator جزو معروفترین مرورگرها حساب میشوند.
    • مرورگر Internet Explorer متعلق به شرکت مایکروسافت و مرورگر Netscape Navigator متعلق به شرکت نت اسکیپ میباشد.
    مرورگرها چگونه به خواندن صفحات وب میپردازند؟
    • یک مرورگر با کمک یک Request درخواستی برای خواندن یک صفحه از وب سرور میکند.
    • این Request یا درخواست بر اساس استاندارد ارتباطی یا پروتوکل HTTP بوده و شامل آدرس صفحه مورد نظر میباشد.
    • آدرس یک صفحه وب چیزی شبیه http://www.khaterat.com/faq.html است. بخش //:http نوع پروتوکل و یا استاندارد ارتباطی را تعیین میکند، www.khaterat.com نام دومین یا Domain است و faq.html نام صفحه ای است که باید خوانده شود.
    مرورگرها چگونه صفحات وب را نمایش میدهند؟
    • چگونگی نمایش یک صفحه وب بصورت مستتر در آن وجود دارد.
    • مرورگرها از روی دستورالعملهای داخل صفحات وب و با کمک تگ ها به نمایش صفحات میپردازند.
    • وظیفه اصلی تگ های اچتمل ( HTML tags ) بیان چگونگی نمایش اطلاعات میباشد.
    • یک تگ اچتمل چیزی شبیه <p> این تگ پاراگراف است! </p> است.
    چه کسانی استاندارد های وب را تعیین میکند؟
    • تعیین استاندارد های وب ربطی به شرکتهای مایکروسافت و یا نت اسکیپ ندارد.
    • World Wide Web Consortium یا W3C متولی تعیین استانداردهای وب است.
    • HTML, CSS and XML از مهمترین استانداردهای تصویب شده وب میباشند.
    • آخرین استاندارد HTML استاندارد XHTML 1.0 میباشد .
    ADMIN سه‌شنبه 20 تیر‌ماه سال 1385 ساعت 11:45
    0 نظر

    مقدمه ای بر HTML

    در این درس با ویژگیهای فایلهای HTML یا اچتمل و نحوه ایجاد یک فایل ساده و نمایش آن در صفحه مرورگرتان آشنا خواهید شد.

    یک فایل HTML چیست؟
    • HTML را "اچ تی ام ال" و یا اچتمل بخوانید.
    • HTML برگرفته از حروف اول Hyper Text Markup Language میباشد.
    • یک فایل HTML فایلی از نوع text میباشد که متشکل از markup tag ها میباشد.
    • مرورگر یا Browser از روی markup tag ها می فهمد که چگونه باید صفحه را نمایش بدهد.
    • یک فایل HTML باید دارای انشعاب htm و یا html باشد.
    • یک فایل HTML فایلی از نوع text میباشد که با هر ادیتور ساده ای قابل ایجاد است.
    • وظیفه اصلی تگ های اچتمل ( markup tags ) بیان چگونگی نمایش اطلاعات میباشد.
    میخواهید که یک فایل اچتمل بسازید؟

    اگر از ویندوز مایکروسافت استفاده میکنید، Notepad را باز کرده (Mac کارها از SimplaeText استفاده کنند. ) و متن زیر را در آن تایپ کنید:

    <html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first html page. <b>This text is bold</b>
</body>
</html>

    سپس فایل را با نام مثلا test.html در درایو c: ذخیره کنید.

    برای دیدن فایل اچتمل بالا در مرورگر یا Brower تان ( معمولا اینترنت اکسپلورر و یا نتسکیپ نویگیتور ) کافی است که از روی منوی File/Open file فایل بالا را از روی محل ذخیره شده بخوانید. ( به آدرس فایل در قسمت Address توجه کنید، مثلا c: est.html)
    یکی از مهمترین وظایف مرورگرها نمایش صفحات اچتمل میباشد، چه این صفحات روی کامپیوتر شما ذخیره شده باشند و یا اینکه از اینترنت خوانده شوند. با کلیک روی این لینک فایلی شبیه فایل ذخیره شده توسط شما از روی وب سرور توسط مرورگرتان خوانده شده و سپس نمایش داده خواهد شد!!! ( به آدرس فایل در قسمت Address توجه کنید، مثلا http://www.khaterat.com/html/dars/test.html )

    توضیح مثال بالا

    اولین تگ مثال بالا تگ <html> میباشد. از روی این تگ، مرورگر نوع متن یعنی اچتمل بودنش را یافته و از روی <html/> انتهای متن اچتمل را میبابد.

    متن بین تگ <head> و تگ <head/> اطلاعات شناسنامه ای یا "Header information" متن اچتمل بوده و نمایش داده نخواهند شد. در این مثال با کمک تگهای <title> و <title/> تیتر و یا Title صفحه که در این مثال عبارت "Title of page" میباشد در بالای مرورگر نمایش داده خواهد شد.

    متن بین تگ <body> و انتهای آن یعنی تگ <body/> تنها اطلاعاتی است که توسط مرورگرنمایش داده خواهند شد.

    متن بین تگ <b> و انتهای آن یعنی تگ <b/> بصورت Bold و یا توپر نمایش داده خواهند شد.

    انشعاب فایل htm یا html ؟

    اغلب مرورگرها هر دو نوع انشعاب را به خوبی میشناسند ولی ترجیحا به هنگام ذخیره فایلهای اچتمل از html استفاده کنید.( استفاده از انشعابهای سه حرفی مانند htm مربوط به قدیم و سیستم عاملهائی چون DOS بودند.)

    نکته ای در مورد ادیتورهای اچتمل ( HTML Editors )

    با وجودیکه با استفاده از ادیتورهای اختصاصی اچتمل مانند FrontPage و یا Claris Home Page امکان نوشتن و طراحی صفحات اچتمل بصورت WYSIWYG یا "What You See Is What You Get" وجود دارد اما توصیه میشود که از ادیتورهای معمولی متن برای تهیه صفحات خود استفاده کرده، عملکرد تگها را شناخته و هیچگاه بدون اینکه بدانید کاربرد یک تگ چیست آنرا بکار نبرید.

    بیشترین سوالات پرسیده شده ( FAQ ) :

    فایلم را درست کردم ولی هنوز نمیتوانم آنرا در صفحه مرورگرم ببینم، مشکل کجاست؟
    مطمئن شوید که فایل را با انشعاب درست (htm یا html ) ذخیره کرده اید. در ضمن مطمئن شوید که همان فایل را Open کرده اید.( نام و مسیر فایل را در قسمت Address مرورگرتان چک کنید.)

    هر بار پس از تغییر و ادیت مثالها نسخه اولیه را در صفحه مرورگرم میبینم و تغییرات داده شده مشاهده نمیشود، مشکل کجاست؟
    به خاطر بالا بردن سرعت، همیشه مرورگرها از نسخه های موجود در Cache یا حافظه موقت خود برای خواندن صفحات استفاده میکنند.برای وادار کردن مرورگر به خواندن اصل صفحه کافی است که در مرورگرتان Refresh/Reload کنید. در اینترنت اکسپلورر کلید F5 یا View/Refresh و در نت اسکیپ Ctrl+R یا View/Reload اینکار را انجام خواهند داد.

    آیا میتوانم از هر دو مرورگر Internet Explorer و Netscape Navigator استفاده کنم؟
    بله، فقط اگر از استاندارد یونیکد برای فارسی نویسی استفاده میکنید، برای دیدن درست صفحات فارسی باید از نسخه 5 Internet Explorer و به بالا و در مورد Netscape Navigator از نسخه 6.2 و به بالا استفاده کنید.

    کجا میتوانم آخرین نسخه از مرورگرهای Internet Explorer و Netscape Navigator را داونلود کنم؟
    Internet Explorer اینجاست و Netscape Navigator اینجا.

    ADMIN سه‌شنبه 20 تیر‌ماه سال 1385 ساعت 11:44
    0 نظر

    اسمبلی یاد بگیریم - 9

    دستورالعمل LOOP

    تا اینجا هروقت که میخواستیم یک حلقه ایجاد کنیم از دستورالعمل CMP و پرشهای
    شرطی استفاده میکردیم . راه ساده تری برای اجرای مکرر دستورالملها وجود دارد و آن
    استفاده از LOOP است . دستور LOOP به تعداد دفعاتی که با ثبات CX مشخص میکنیم
    حلقه ای را ایجاد میکند .
    برای ایجاد چنین حالتی ابتدا مقدار لازم را در ثبات CX قرار میدهیم . دستور Loop
    همیشه از مقدار CX یک واحد،یک واحد کم میکند تا به 0 برسد . وقتی که مقدار CX
    برابر 0 شد ، از حلقه خارج میشود . بنا براین برای ایجاد حلقه ای که 100 بار
    تکرار شود، CX را برابر 100 قرار میدهیم . MOV CX/100


    حلقه مورد نظر بین دستور loop و یک برچسب انجام میشود . برچسب ، در ابتدای حلقه
    و دستور loop در انتهای آن قرار میگیرد.


    MOV CX/100
    LPCNT :
    :
    :
    :
    LOOP LPCNT


    در بالا با mov cx/100 میخواهیم حلقه ای داشته باشیم که 100 بار انجام بشود. وقتی
    به loop lpcnt میرسیم ، یکواحد از مقدار CX کاسته شده و مجددا به lpcnt پرش
    میکنیم .
    به همین سادگی ! .
    تمرین : برنامه ای بنویسید که کاراکتر های با کد اسکی 32 تا 255 را نمایش دهد.

    راهنمائی :
    چون همیشه CX در حال کاهش است ، برای اینکه بتوانیم از 32 تا 255 برویم ، باید
    عدد داخل CX را برابر 31=224-َ255 قرار بدهیم تا تعداد 254 حرف چاپ بشود. سپس
    مقدار CX را از 255 کم کرده و داخل AL قرار میدهیم تا با تابع 0Eh ار وقفه 10h
    چاپ شود . این وقفه را در برنامه ALLCHR.ASM توضیح دادیم .

    پشته (Stack) ، ذخیره و بازیابی ثباتها

    ما تعدادی ثبات برای نگهداری و انتقال اعداد و مقادیر داریم ولی کافی نیستند .
    بخصوص در DEBUG که نمیتوانیم متغیرتعریف کنیم . یا در برنامه پیش می آید
    بخواهیم برای یک کار خاص و بطور موقت مقدار ثبات را تغییر دهیم ،در این مواقع
    مقدار ثبات را در پشته ذخیره کرده و بعدا مجددا بازیابی میکنیم .
    در برنامه های EXE. پشته یا Stack یک سگمنت مستقل است و آدرس آن در ثبات SS
    (Stack Segment) قرار دارد . در برنامه های COM. پشته به آنصورت وجود ندارد و
    خود DOS فضای لازم را برای برنامه فراهم میکند . در هر صورت ما به اینکه پشته در
    کجاست کاری نداریم و به یک شکل مقادیر را به پشته فرستاده (PUSH) یا از آن
    خارج میکنیم (POP) .
    خاصیت مهمی که در PUSHو POPو کردن مقادیر به پشته وجود دارد اینست که همیشه
    اولین مقداری که به پشته فرستاده میشود، آخرین مقداری است که از پشته خوانده
    میشود . مثلا فرض کنید که ابتدا AX و بعد CX را به پشته میفرستیم . حال برای خارج
    کردن درست این مقادیر، ابتدا CX و بعد AX را خارج میکنیم .
    این قانون اسمبلی است و به (FILO=First In Last Out) معروف است .

    برای فرستادن مقدار یک ثبات به پشته از دستور PUSH استفاده میکنیم .
    مثلا برای قرار دادن AX مینویسیم : PUSH AX . PUSH
    نمیتواند مقدار یک نیم ثبات را در پشته قرار دهد و حتما باید یک ثبات
    کامل دوبایتی باشد .
    وقتی ثباتی را PUSH کردیم ، مقدار آن در Stack نگهداری میشود و میتوانیم مقدار آن
    را تغییر دهیم .
    پس از آن ، از دستور POP برای خارج کردن ثبات از پشته استفاده میکنیم مانند . POP AX


    مثال :


    1] MOV AX/0AH ; ax = 0Ah
    2] MOV BX/0BH ; bx = 0Bh
    3] PUSH AX ; push ax to stack
    4] PUSH BX ; hold bx in stack
    5] MOV AX/5 ; now ax=5
    6] MOV BX/2AH ; and bx=2Ah
    7] : ; other commands and
    8] : ; statements ...
    9] POP BX ; POP bx from stack
    10] POP AX ; read ax from stack


    در سطر 3وَ4 مقادیر axو bxو را به پشته میفرستیم . در سطر 5و 6و مقادیر جدید به ax
    bx/ میدهیم و بعد از آن یکسری دستورات دیگر هستند ... . در سطر 10 مقدار BX
    از داخل Stack بیرون کشیده میشود . توجه داشته باشید که bx را بعد از ax در پشته
    قرار داده ایم ولی در هنگام خارج کردن به ترتیب عکس عمل میکنیم .

    بعلاوه دستور PUSHF به معنی PUSH FLAGS ، ثبات پرچم را در پشته قرار میدهد . نحوه
    کار با آن هم مثل PUSH معمولی است ولی آرگومان ندارد .
    مثال : PUSHF


    در قسمت بعد، این مطالب را تمرین میکنیم و چند برنامه نمونه میبینیم ، حتی
    یک برنامه گرافیکی با 256 رنگ مینویسیم و در آن از دستورات LOOPو PUSHو
    استفاده میکنیم .

    ADMIN سه‌شنبه 20 تیر‌ماه سال 1385 ساعت 11:37
    0 نظر