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

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

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

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

HTML

وظیفه گروهی از تگ های اچتمل فرمت دهی و تعیین شکل نمایش متون ( مثلا ضخیم و bold بودن و یا مورب و ایتالیک بودن ) میباشد و در این درس با این گروه از تگهای formating آشنا خواهید شد:

<b> , <big> , <code> , <del> , <em> , <i> , <ins> , <kbd> , <pre> , <s> , <samp> , <small> , <strike> , <strong> , <sub> , <sup> , <tt> , <u> , <var>

مثالهای شکل دهی متون (Text Formatting)
در مثالهای زیر نحوه استفاده از عناصر و تگهای شکل دهی متون شرح داده شده اند:

شکل دهی متون
شکلهای مختلف نمایش متون با کمک عناصر b , strong , big , em , i , small , sub , sup

متون از قبل شکل دهی شده
نمایش متون از قبل شکل دهی شده با کمک عنصر pre یا pre Formatted
برای نمایش اشعار فارسی استفاده از عنصر pre بهترین انتخاب میباشد.

عناصر دیگر شکل دهی متن
نمایش متون deleted، underline و ... با کمک عناصر code , kbd , tt , samp , var , del , ins

نحوه دیدن سورس کدهای اچتمل (HTML Source)

  • اگر میخواهید که سورس کدهای اچتمل صفحات وب را ببینید کافی است که در منوی View مرورگرتان حالت Source یا Page Source را انتخاب کرده و مرورگر کد اچتمل را درون ادیتوری باز کرده و قابل ذخیره توسط شما برای استفاده های بعدی میباشد.
  • اگر صفحه مورد نظر از مجموعه فریمها (Frameset) استفاده کرده باشد برای دیدن سورس کد اصلی فریمها کافی است که ابتدا با کمک روش بالا به مشاهده سورس کدهای اچتمل پرداخته (لازم به توضیح است که در این حالت فقط تعاریف کلی فریمها قرار دارند.) و سپس برای دیدن کد اچتمل اختصاصی هر صفحه باید پس از "Right Click" روی هر صفحه "View Source" کرده و کد اچتمل هر فریم را جداگانه ببینید.
  • اگر طراح سایت با کمک Java Script مانع دیدن سورس توسط شما میشود، ابتدا در منوی Tools/Internet Options.../Security/Custom Level مرورگرهای اکسپلورر امکانات جاواسکریپت مرورگر را غیر فعال کرده (disable) و سپس مراحل بالا را تکرار کنید!!!

چند نکته کاربردی:

  1. در استفاده از Underline دقت کنید چون در اکثر مرورگرها، پیوندها با این خطوط نشان داده می شوند و این مساله میتواند کاربران را دچار اشتباه کند .
  2. به کارگیری تگهای EM و STRONG که جایگزین تگهای I و B هستند ، این اطمینان را می دهد که صفحه شما توسط همه مرورگرها بصورت صحیح نمایش داده خواهد شد .
  3. به ترتیب بسته شدن تگهای پایانی در مثال زیر دقت کنید، همان گونه که مشاهده می کنید عنصر STRONG بعد از عنصر U شروع شده است ، به همین خاطر تگ خاتمه دهنده آن قبل از تگ خاتمه دهنده U قرار می گیرد.
    <U>version <STRONG>2.0</STRONG></U>
تگهای فرمت دهی متون
Start Tag Purpose کاربرد
<b> Defines bold text نمایش توپر
<big> Defines big text نمایش در اندازه بزرگ
<em> Defines emphasized text  نمایش بصورت تاکید شده
<i> Defines italic text نمایش ایتالیک یا کج
<small> Defines small text نمایش در اندازه کوچک
<strong> Defines strong text نمایش قوی ؟!
<sub> Defines subscripted text نمایش پایین تر از خط افقی
<sup> Defines superscripted text نمایش بالاتر از خط افقی
<ins> Defines inserted text نمایش به صورت خط زیر
<del> Defines deleted text نمایش به صورت خط خورده
<s> Deprecated. Use <del> instead از رده خارج
<strike> Deprecated. Use <del> instead از رده خارج
<u> Deprecated. Use styles instead از رده خارج

Start Tag Purpose کاربرد
<code> Defines computer code text نمایش کدهای برنامه نویسی
<kbd> Defines keyboard text  نمایش متن بصورت صفحه کلیدی
<samp> Defines sample computer code نمایش کدهای نمونه برنامه نویسی
<tt> Defines teletype text نمایش تله تایپ
<var> Defines a variable نمایش متغییرها
<pre> Defines preformatted text نمایش متون از قبل فرمت شده

مرجع : HTML 4.01 Specification - فهرست عناصر - فهرست شناسه ها

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

HTML

تگ ها ( tags ) اجزا تشکیل دهنده عناصر یا elements های اچتمل هستند و در این فصل با عناصر و تگ های پایه و مهم:
<hr> , <br> , <h1> .... <h6> , <!-- comment --> , <p>
آشنا خواهید شد . یکی از بهترین روش های یادگیری تگ های اچتمل دیدن مثالها و تغییر آنها میباشد و با کمک ادیتور اختصاصی ما و با استفاده از امکانات فارسی نویسی آن به صورت آنلاین میتوانید به مطالعه و یادگیری مثالها پرداخته، کدهای اچتمل را تغییر داده و با کلیک روی دکمه "نمایش نتایج" به مشاهده نتایج بپردازید.

مثالها :

مثالی ساده از یک صفحه اچتمل
در این مثال بسیار ساده جمله "!Hellow World" در صفحه مرور گر نمایش داده میشود و در واقع محتوا و متن عنصر body تماما نمایش داده خواهد شد.

پاراگرافهای ساده:
چگونگی نمایش متون با کمک تگ <p> و بصورت پاراگرافی

نمایش متون فارسی:
چگونگی نمایش متون فارسی. برای جزئیات بیشتر به فصل فارسی نویسی مراجعه کنید.

مثالهای بیشتر:

سر تیترها (Headings)
سر تیترها با کمک تگ های <h1> تا <h6> تعیین میشوند. <h1> معرف بزرگترین سر تیتر و <h6> معرف کوچکترین سر تیتر است. مرورگر به هنگام نمایش یک سر تیتر بصورت اتوماتیک یک سطر خالی قبل و بعد از هر سر تیتر اضافه خواهد کرد. 
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
مثال بالا در صفحه مرورگر بدین شکل نمایش داده خواهد شد.
پاراگرافها (Paragraphs)
پاراگرافها با کمک تگ <p> معرفی میشوند.مرورگر به هنگام نمایش یک پاراگراف بصورت اتوماتیک یک سطر خالی قبل و بعد از آن اضافه خواهد کرد. 
<p>This is a paragraph</p> 
<p>This is another paragraph</p>
مثال بالا در صفحه مرورگر بدین شکل نمایش داده خواهد شد.

سطر جدید (Line Breaks)

برای رفتن سر سطر جدید از تگ <br> استفاده میشود.در اینحالت یک پاراگراف جدید ایجاد نمیشود. تگ <br> از نوع تگ های خالی بوده و دارای تگ انتهائی (مثلا <br/> ) نمیباشد. 

<p>This <br> is a para<br>graph with line breaks</p>
مثال بالا در صفحه مرورگر بدین شکل نمایش داده خواهد شد.
کامنت ها در اچتمل (Comments)

برای نوشتن شرح و توضیحات در مورد کدهای اچتمل باید از تگ خاصی استفاده کنید. برای اینکار باید متن و شرحتان را درون علائم <-- و --!> قرار دهید. مرور تگ های comment را در نظر نگرفته و محتوی آنها را نمایش نخواهد داد و فقط شرح و توضیحات برای برنامه نویس و دیگر افرادی که احتمالا در آینده با کد اچتمل کار خواهند کرد مفید خواهد بود. (به محل نویسه "!" توجه کنید! فقط یکی و آنهم در ابتدا) 

<!-- This is a comment -->
مثالی در مورد comments و نحوه استفاده از آن
چند نکته کاربردی:

توجه داشته باشید که بدلیل وجود مرورگرهای متفاوت (اکسپلورر، نت اسکیپ، ..) و به دلیل تفاوت دقت نمایش صفحه نمایش کامپیوترها، صفحات اچتمل با اندکی تفاوت در حالتهای مختلف نمایش داده میشوند و همیشه سعی کنید که صفحاتتان را نه تنها با اکسپلورر که معروفترین مرورگر است بلکه با نت اسکیپ و حتی مرورگرهای کامپیوترهای مکینتاش چک کرده و همچنین در دقت های نمایش 800x600 و 1024X768 آن را امتحان کنید.

از نظر فاصله و سطر بندی، متنی که در صفحه ادیتورتان تایپ میکنید با چیزی که مرورگر نمایش خواهد داد متفاوت خواهد بود.همیشه به یاد داشته باشید که فاصله های اضافی (space) و خطهای خالی متن در صفحه ادیتور توسط مرورگر در نظر گرفته نشده و نمایش داده نخواهد شد.

برای نمایش بیش از یک فاصله خالی باید از نویسها یا ترکیب کاراکتری خاصی (None Breaking Space) استفاده کنید. در بخش ( Entities ) نهادها به این مطلب بیشتر پرداخته خواهد شد.

فاصله های اضافی بین کلمات در یک متن اچتمل توسط مرورگرها دیده نخواهد شد و در نمایش همیشه تبدیل به یک فاصله (space) خواهد شد. در ضمن یک خط خالی در متن ادیتور بصورت یک فاصله یا space نمایش داده خواهد شد.

برای ایجاد یک سطر جدید هیچگاه از یک تگ <p> خالی استفاده نکنید و به جای آن از تگ <br> استفاده کنید..

مرورگرها به هنگام نمایش بعضی عناصر بصورت اتوماتیک یک سطر خالی قبل و بعد از آن عنصر نمایش خواهند داد. برای نمونه این گروه از عنصرها میتوان از پاراگراف (<p>) و سرتیترها (<h..>) نام برد.

تگ <hr> یا Horizontal Roler سبب نمایش یک خط افقی خواهد شد و در واقع بخش های مختلف مطالب این صفحات با کمک این تگ از هم جدا شده اند.

مثالهای بیشتر:

باز هم مثال پاراگرافها
این مثال بعضی از مقادیر قراردادی عناصر پاراگراف را شرح میدهد.

ترازبندی پاراگراف ها
این مثال نحوه تراز بندی یک پاراگراف را با کمک شناسه یا attribute ای به نام align نشان میدهد. در این حالت پاراگراف در وسط ناحیه نمایش داده خواهد شد.
( "align="center )

رفتن سر سطر جدید
این مثال نحوه استفاده از تگ <br> را در یک متن اچتمل نشان میدهد.

سر تیترها
این مثال نحوه استفاده از تگهای <h1> .... <h6> را در یک متن اچتمل نشان میدهد.

ترازبندی سر تیترها
این مثال نحوه تراز بندی یک سر تیتر را با کمک شناسه یا attribute ای به نام align نشان میدهد. در این حالت سر تیتر در وسط ناحیه نمایش داده خواهد شد.
( "align="center )

نمایش خطوط افقی
این مثال نحوه نمایش خطوط افقی با استفاده از تگ <br> میباشد.

استفاده از comment
این مثال نحوه استفاده از comment در کدهای اچتمل را نمایش میدهد.

تعیین رنگ زمینه صفحه
این مثال نحوه تعیین رنگ زمینه صفحه را با کمک یکی از شناسه های (attribute ) عنصر body با نام bgcolor نشان میدهد. (Background Color)
( "bgcolor ="blue )

تگهای اصلی
در جدول زیر عناصر معرفی شده در این فصل به همراه لینکهای مربوطه جهت مطالعه بیشتر آورده شده است. توجه داشته باشید که برای هر عنصر فهرستی از شناسه ها یا Attributes موجود است و همچنین به شناسه های کنارگذاشته شده (Deprecated) در نسخه های آینده اچتمل توجه داشته باشید و سعی کنید که از آنها استفاده نکنید.


:

Start Tag Purpose کاربرد
<html> Defines a html document نشان شروع متن اچتمل
<body> Defines the document's body تعیین بدنه و قسمت اصلی صفحه اچتمل
<h1>-<h6> Defines heading 1 to heading 6 تعریف سر تیترهای h1 تا h6
<p> Defines a paragraph تعریف پاراگراف
<br> Inserts a single line break رفتن سر خط جدید
<hr> Defines a horizontal rule نمایش خط افقی
<!--> Defines a comment in the HTML source code نوشتن شرح و comment

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

HTML

در این درس با فارسی نویسی، فارسی سازی و استاندارد یونیکد و نحوه استفاده از ادیتور آنلاین و فارسی این سایت آشنا خواهید شد. همچنین متاتگ http-equiv و شناسه dir نیز معرفی خواهد شد.

سؤالات مربوط به فارسی نویسی را میتوان به سه گروه عمده تقسیم کرد:
- چگونه فارسی بنویسم ؟
- چگونه فارسی بخوانم؟
- چگونه صفحات اچتمل فارسی را نمایش دهم؟

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

* راهنمای فارسی سازی ویندوز
* استفاده از استانداردِ یونیکد
* وبلاگ فارسی FAQ

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

  • روش کدگزاری UTF-8
    اکیدا توصیه میشود که برای تایپ و تمایش متون فارسی از استاندارد یونیکد و روش کدگزاری UTF-8 اسنفاده شود و این روشی است که مطالب این سایت و ادیتور آنلاینش از آن استفاده میکند.نکته مهم در نمایش صحیح متون فارسی تعیین نوع کدگزاری یا encoing صفحات فارسی است که برای اینکار باید از متاتگ خاصی به نام http-equiv در بخش head صفحات اچتمل به شکل زیر استفاده شود:

    • <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    در اینصورت مرورگر یا Browser قبل از نمایش صفحه از روی متاتگ فوق نوع کدگزاری (Encoding) را تشخیص داده و دیگر مثلا نیازی به تعیین دستی (دراکسپلورور 5 : View/Encoing/Unicode / UTF-8 ) نوع Encoing توسط بازدیدکننده سایت نخواهد بود.

  • شناسه یا attribute ی به نام dir
    جهت نمایش متون لاتین به صورت پیش فرض و default از چپ به راست (ltr) میباشد.در مورد متون و جملات فارسی باید با کمک روشی جهت نمایش پیش فرض را به "راست به چپ" تغییر دهید. شناسه یا attribute ی به نام dir یا همان direction این کار را برای شما انجام میدهد. این شناسه دارای دو مقدار ممکن میباشد :


    • dir="ltr" , Left-to-right text. - چپ به راست
    dir="rtl" , Right-to-left text. - راست به چپ

    مثلا برای نمایش جمله فارسی "سلام بر دنیای وب!" با کمک عناصر p یا div کافی است که به یکی از شکلهای زیر عمل شود:

    <p dir="rtl"> سلام بر دنیای وب </p>
    <div dir="rtl"> سلام بر دنیای وب </div>

    در بسیاری از عناصر و تگ های اچتمل امکان استفاده از شناسه dir میسر بوده و به عنوان نمونه میتوان از عناصر زیر نام برد:

    <p> , <div> , <html> , <body> , <table> , <tr> , <td> , <h1 ... h6> , <input> , <pre> , <select> , <span> , ...

    مثالهای زیر نحوه ترازبندی متون فارسی را به نمایش میگذارند و برای مطالعه بیشتر در مورد ترازبندی متون "راست به چپ" به این صفحه مراجعه کنید. (عناصر BDO ، Span و شناسه lang هم برای مطالعه مفید میباشند.)

    مثالهای فارسی نویسی:
    مثال 1 : سلام بی وفا
    به بخش head و تگ div توجه کنید. متا تگ http-equiv نوع کدگزاری را تعیین میکند و در اینجا با کمک تگ div جهت نوشتن مطالب (از راست به چپ یا بلعکس) تعیین میگردد. dir به معنای direction و جهت بوده و rtl مخفف right to left و ltr معادل left to right میباشد.

    مثال 2 : متن ها و پاراگراف بندی
    به عناصر div و p توجه کنید. با کمک شناسه dir جهت نوشتن مطالب (از راست به چپ یآ بلعکس) تعیین میگردد.

    مثال 3 : متون فارسی و لاتین در کنار هم
    مثالی کاملتر با راهنمای استفاده از عنصر div و شناسه dir آن

    مثال 4 : شناسه dir در عنصر html
    اگر شناسه dir را در عنصر html بکار ببرید جهت نمایش تمامی متون از راست به چپ شده و برای نوشتن از چپ به راست باید به صورت موردی شناسه "dir="ltr را استفاده کنید. همچنین در این حالت ماسماسک! Scrool down مرورگر در سمت چپ صفحه نمایش داده خواهد شد. در صورت استفاده شناسه dir در عنصر body ماسماسک همان سمت راست خواهد ماند.

    مثال 5 : مثال کامل
    نحوه استفاده شناسه dir در عنصرهای مختلف

    لازم به ذکر است که برای فارسی نویسی از کدهای java script موجود در این آدرس که ابزارهای برنامه نویسی فراهم شده توسط شورای عالی انفورماتیک و دانشجویان دانشگاه صنعتی هستند، استفاده شده است و توصیه میشود که پروژه farsiweb.info را فراموش نکرده زیرا که استاندارد آینده فارسی نویسی اینترنتی در ایران خواهد شد.

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

    HTML

    در استاندارد اچتمل گروهی از نویسه ها (Character) دارای معنی خاصی بوده ( مثلا نویسه < شروع یک تگ و نویسه > انتهای یک تگ را نشان میدهد. ) و برای نمایش آنها در صفحاتتان مستقیما قابل مصرف نمیباشند. در این فصل با فهرست این نویسه ها آشنا شده و نحوه درج آنها را با کمک Character Entities فرا خواهید گرفت.

    Character Entities
    در اچتمل بعضی از نویسه ها دارای معنی خاصی بوده و برای نمایش آنها در صفحاتتان باید از character entities ها استفاده کنید. یک character entities از سه قسمت تشکیل میشود:

    1- نویسه ampersand (&)
    2- نام entity یا نویسه # و سپس شماره عددی entity
    3 - و نهایتا نویسه semicolon (;)
    برای مثال برای نمایش نویسه > دو روش وجود دارد، باید از &lt; یا از &#60; استفاده کنید. در این مثال lt نام entity و 60 شماره عددی آن میباشد.

    مزیت استفاده از نام entity در مقابل استفاده از شماره عددی آن سهولت یادآوری آن از روی نامش میباشد و عیب آن این است که تمامی مرورگرها نام گذاریهای موجود برای Entity ها را قبول ندارند ولی در عوض همگی شماره های عددی entity ها را بخوبی میشناسند. توجه داشته باشید که entity ها به کوچک و بزرگی حروف حساس هستند و در واقع Case Sensitive میباشند.

    پر کاربردترین character entity در اچتمل، نویسه فاصله یا Space یا Blank میباشد و نام رسمی آن non-breaking space میباشد. همانطور که میدانید مرورگرها فاصله های اضافی را در نظر نگرفته (truncate spaces) و مثلا از 10 نویسه فاصله، 9 تای آنرا نادیده میگیرند و برای نمایش فاصله های اضافی باید از &nbsp; استفاده کنید.

    فهرست پرکاربردترین Character Entities ها

    Result (نمایش) Description (شرح) Entity Name (نام) Entity Number (شماره عددی)
      non-breaking space &nbsp; &#160;
    < less than &lt; &#60;
    > greater than &gt; &#62;
    & ampersand &amp; &#38;
    " quotation mark &quot; &#34;
    ' apostrophe    &#39;

    چند Character Entitie با کاربردهای کمتر

    Result Description Entity Name Entity Number
    ¢ cent &cent; &#162;
    £ pound &pound; &#163;
    ¥ yen &yen; &#165;
    § section &sect; &#167;
    © copyright &copy; &#169;
    ® registered trademark &reg; &#174;
    × multiplication &times; &#215;
    ÷ division &divide; &#247;

    برای دیدن فهرست کل character entities ها سری به این صفحه بزنید.

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

    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 نظر