در حال بارگذاری

گروه طراحي وب سایت ، سايت مايت ، با ارائه خدمات طراحي حرفه اي وب سايت ، سئو و بهينه سازي ، امنيت و هک و آموزش و کار آموزي شما را به صبر و شکيبايي جهت بارگذاری کامل وب سایت دعوت مينمايد.
شماره دفتر مرکزي : 03116618188
موبايل واحد فروش : 09136848587

موضوعات
دوستان
آرشیو
آمار سايت
arrow  افراد آنلاین : 1
بازديد ديروز: 303
بازديد امروز: 121
 خروجی فید امروز : 5
arrow  ورودی گوگل : 0
  • برچسب‌ها

  • آموزش html کلاس ششم

    تعداد بازدید : 604   دسته بندی : آموزش HTML , آموزش و کار آموزی سه شنبه ,9 اکتبر , 2012

    آموزش اچ تی ام ال برای دوستان علاقه مند

    آشنایی با تگ های ایجاد کننده لیست ها در HTML

    1ـ تگ <ul>: از این تگ برای ایجاد لیست هایی که موارد تشکیل دهنده آنها از نظر تقدم و تأخر و یا اهمیت، نسبت به یکدیگر، ترتیب خاصی ندارند، استفاده می شود. شکل ظاهری موارد ذکر شده در این نوع از لیست ها به همراه گلوله ای (bullet) در ابتدای آنها می باشد. از آنجا که لیست ها و موارد ذکر شده در آنها از نوع عناصر بلوکی در HTML می باشند، استفاده از آنها تنها محدود به ذکر کلمات، جمله ها و عبارات نبوده و می توان از آنها به عنوان دربرگیرنده عناصر دیگری برای ایجاد ساختار خاص در صفحات وب نیز استفاده کرد. در مورد این نحوه استفاده از لیست ها در ادامه مطلب توضیح بیشتری خواهیم داد.

    2ـ تگ <ol>: کاربرد این تگ شبیه کاربرد تگ <ul> است با این تفاوت که موارد قرار گرفته در این نوع از لیست ها، شماره گذاری می شوند و به این ترتیب، می توان لیست هایی را که موارد تشکیل دهنده آنها تقدم و تأخر خاصی دارند (مانند دستورالعمل استفاده از دستگاه یا نرم افزاری که باید به ترتیب مراحل آن را دنبال کرد)، با این تگ مشخص نمود.

    3ـ تگ <li>: هر کدام از تگ های <ul> و <ol> به عنوان مادر یا عنصر دربرگیرنده موارد لیست به کار می روند و برای ذکر هر کدام از موارد لیست باید یک جفت تگ ابتدایی و انتهایی <li> را همراه با محتویات بین آنها، داخل تگ های <ul> یا <ol> قرار داد.

    آشنایی با نحوه ایجاد جدول ها در HTML

    برای ایجاد جدول ها در ساده ترین شکل خود می توان از کدهای زیر استفاده کرد:

    <table  border=”1”>

    <tr>

    <th>نوع حساب بانکی</th>

    <th>نرخ سود</th>

    </tr>

    <tr>

    <td>سرمایه گذاری کوتاه مدت</td>

    <td>6 درصد</td>

    </tr>

    <tr>

    <td>سرمایه گذاری بلند مدت</td>

    <td>5/13 درصد</td>

    </tr>

    </table>

    در کدهای فوق، تگ های ابتدایی و انتهایی <table>، آغاز کننده و پایان دهنده جدول هستند. چنانکه دیده در کدها دیده می شود، در تگ ابتدایی <table>، از ویژگی (attribute) border با مقدار 1 استفاده شده است. بدون این ویژگی و مشخص کردن مقداری عددی برای آن خطوط جدا کننده ای در میان خانه های جدول وجود نخواهد داشت و همچنین جدول ما دارای کادری نخواهد بود. پس از تگ ابتدایی <table>، تگ های ابتدایی وانتهایی <tr> را مشاهده می کنیم که هر جفت از آنها بیانگر یک ردیف یا سطر از جدول ما هستند. در میان این تگ ها، تگ های <th> و یا <td> قرار می گیرند که اطلاعات اصلی جدول در میان تگ های ابتدایی و انتهایی آنها قرار می گیرد. اطلاعات عمومی تر جدول یعنی آنهایی را که برای دسته بندی اطلاعات دیگر به کار می روند باید در میان تگ های <th> و اطلاعات دارای جزییات جدول را که در واقع بیان مشروح اطلاعات کلی تر هستند، باید در میان تگ های <td> قرار داد. مجموع تگ های <th> و <td> در هر کدام از ردیف های جدول باید با مجموع آنها در ردیف های دیگر، مساوی باشد مگر آنکه تعیین کرده باشیم یک خانه از جدول، فضای دو خانه یا بیشتر را اشغال کند. در غیر این صورت، ممکن است جدول ما به صورت نادرست در بعضی از مرورگرها دیده شود.

     

    آشنایی با ویژگی ها (attributes)تگ های <th> و <td>

    الف ـ colspan: اگر بخواهیم تعیین کنیم که در جدولمان، خانه یا خانه هایی به اندازه بیش از یک خانه در جهت افقی امتداد داشته باشند و در نتیجه به بیش از یک خانه در جهت افقی مربوط شوند، می توانیم از این ویژگی با مقداری عددی استفاده کنیم که بیانگر تعداد خانه هایی است که می خواهیم به خانه مورد نظر ما مربوط شوند.

    ب ـ rowspan: مانند colspan، اگر بخواهیم تعیین کنیم که خانه مورد نظر ما در جدول، در امداد بیش از یک خانه از جدول در ردیف های دیگر اما این بار به صورت عمودی، ظاهر شود، می توانیم از این ویژگی با مقداری عددی استفاده نماییم.

    1ـ تگ <caption>: از این تگ برای ذکر تیتر جدول استفاده می شود. این تگ را تنها یک بار در هر جدول می توان به کار برد و بین آن و تگ ابتدایی جدول نیز، نباید هیچ گونه محتوای دیگری قرار گیرد.

    2ـ تگ <col>: از این تگ برای اعمال صورت ظاهری و فرمت خاصی بر روی ستون های جدول، استفاده می شود.

    ویژگی های (attributes) تگ <col>

    الف ـ span: به وسیله این ویژگی مشخص می نماییم که ستون مورد نظر ما باید در برگیرنده چند ستون از جدول باشد و فرمت مورد نظر ما بر روی چند ستون باید اعمال شود.

    3ـ تگ <colgroup>: از این تگ برای دسته بندی تگ های <col>، استفاده می شود.

    ویژگی ها (attributes) تگ <colgroup>

    الف ـ span: چنانچه بخواهیم، تگ های <col> را از جدولمان حذف نماییم، می توانیم از این ویژگی در تگ <colgroup>، استفاده نموده و مقدار آن را برابر با تعدادی تگ های <col> میان تگ های ابتدایی و انتهایی آن، قرار دهیم.

     

    آشنایی با تگ های ایجاد کننده فرم ها و عناصر داخلی آنها در صفحات وب

    1ـ تگ <form>: این تگ در برگیرنده عناصر هر یک از فرم های موجود در صفحات وب است. هر کدام از عناصری که در داخل تگ های ابتدایی و انتهایی یک فرم به خصوص در صفحه باشند، به آن فرم مربوط می شوند و به این ترتیب، می توان بیش از یک فرم در هر کدام از صفحات وب ایجاد کرد.

    لازم به ذکر است که فرم، یکی از عناصر بلوکی در HTML می باشد.

    آشنایی با ویژگی های (attributes) تگ <form>

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

    ب ـ method: این ویژگی تعیین کننده نحوه ارسال اطلاعات موجود در فرم بوده و یکی از دو مقدار get و یا post را می پذیرد.

    در صورتی که مقدار get را برای این ویژگی قرار دهیم، اطلاعات به آدرس فایل مقصد (فایل پردازش کننده اطلاعات)، افزوده شده و ارسال خواهد شد. به این ترتیب، این اطلاعات در نوار آدرس مرورگر، قابل مشاهده خواهد بود. از این روش بیشتر در موتورهای جستجوگر استفاده می شود و یکی از امتیازات آن، این است که می توان آدرس صفحه مقصد را با کلیه اطلاعات ارسال شده به آن ذخیره کرده و مجدداً به همان صفحه با همان پارامترها، مراجعه نمود. اما، این روش دارای نقاط ضعفی نیز می باشد. تعداد کاراکترهایی که می توان به دنبال آدرس صفحات قرار داد، دارای محدودیت بوده و در مرورگرها و سرورهای مختلف با هم متفاوت است. به همین دلیل، نمی توان کاملاً از ارسال درست و کامل و پردازش اطلاعاتی که به این صورت ارسال می شوند، اطمینان داشت. همچنین، گاهی اوقات اطلاعات موجود در فرم ها دارای حساسیت خاصی است (مثلاً ممکن است نام های کاربری و رمزهای عبور در میان این اطلاعات موجود باشد). به این ترتیب، اگر اطلاعات را با روش get، ارسال کنیم افراد دیگر به جز کاربر نیز می توانند با نگاه کردن به صفحه نمایش رایانه، از این اطلاعات آگاهی یابند.

    به دلایل ذکر شده، در بسیاری از موارد لازم است که از روش post برای ارسال اطلاعات استفاده کنیم. در این روش، اطلاعات کاملاً در پشت صحنه رد و بدل شده و کاربر یا افراد دیگری که در کنار او قرار دارند هیچ گونه نوشته علنی را نخواهند دید.

    پ ـ enctype: مقدار این ویژگی تعیین می کند که اطلاعات موجود در فرم، قبل از فرستاده شدن به سرور، چگونه باید کدگذاری شوند. به صورت پیش فرض، فاصله های (spaces) موجود در اطلاعات به علامت + تبدیل شده و کاراکترهای خاص مانند apostrophe (‘)، علامت درصد و کاراکترهای خاص دیگر، به معادل موجود خود در مبنای شانزده (هگزادسیمال) در سیستم ASCII (American Standard Code for Information Interchange)، تبدیل می شوند.

    این ویژگی سه مقدار application/x-www-form-urlencoded که مقدار پیش فرض آن است (توضیح داده شده در پاراگراف فوق)، multipart/form-data که باعث می شود هیچ گونه کدگذاری بر روی اطلاعات انجام نگیرد (استفاده از این مقدار برای فرم هایی که دارای کنترل آپلود فایل هستند، الزامی است) و text/plain که فاصله ها را به علامت + تغییر می دهد اما کاراکترهای خاص را به معادل هگزادسیمال آنها تبدیل نمی کند، را می پذیرد.

    2ـ تگ <input>: این تگ ایجاد کننده بیشتر عناصر موجود در فرم ها است و بسته به عبارت ذکر شده در مقابل ویژگی type خود، کنترل های متنوعی را در فرم ها ایجاد می کند.

    آشنایی با ویژگی های (attributes) تگ <input>

    الف ـ type: شاید بتوان گفت که این ویژگی، مهمترین ویژگی تگ <input> است چرا که ظاهر و عملکرد کنترل فرمی را که به وسیله این تگ ایجاد می شود، کاملاً تغییر می دهد. این ویژگی می توانند مقادیر مختلفی داشته باشد که در ادامه به بررسی آنها می پردازیم:

    1ـ text: اگر از ویژگی type به همراه این مقدار استفاده نماییم، نوعی از کنترل در فرم ایجاد می شود که برای دریافت متن های تک خطی از کاربر مورد استفاده قرار می گیرد.

    2ـ password: اگر از این مقدار استفاده نماییم، نوعی از کنترل که شبیه نوع قبلی است ایجاد می شود، با این تفاوت که کاراکترهایی که توسط کاربر، در این نوع از کنترل، تایپ می شود، به صورت مبهم (مثلاً به شکل گلوله یا ستاره هایی بسته به مرورگر مورد استفاده)، نشان داده می شوند. بنابر این، معمولاً از این نوع کنترل در فرم برای دریافت اطلاعات حساس مانند رمز عبور، از کاربر استفاده می شود.

    3ـ hidden: در برخی از موارد ممکن است لازم باشد اطلاعاتی را همراه با اطلاعاتی که کاربر در فرم وارد کرده و ارسال می نماید به سرور ارسال نماییم (مثلاً در یکی از موارد استفاده رایج از این کنترل، ممکن است بخواهیم حجم حداکثری را برای فایل هایی که کاربر می تواند همراه با اطلاعات فرم آپلود نماید، مشخص نماییم). در چنین مواردی از عنصر input همراه با این مقدار استفاده می نماییم. چنانچه از نام این مقدار بر می آید، کنترل ایجاد شده در صفحه به صورت مخفی بوده و به این ترتیب، کاربر قرار نیست که اطلاعاتی را در آن وارد نماید بلکه اطلاعاتی که طراح فرم، می خواهد ارسال نماید، در این کنترل قرار می گیرد.

    4ـ checkbox: این مقدار ایجاد کننده کادرهای قابل انتخاب (از نوع کادرهایی که با کلیک کردن آنها علامت تیکی در آنها قرار می گیرد) می باشد. مورد استفاده این نوع کنترل، در مواردی که نیاز به نوعی جواب »بله» یا «خیر» داریم، است. یعنی مثلاً می توان از کاربر سؤال کرد که آیا شرایطی را که ما به عنوان قرارداد، مطرح کرده ایم، قبول دارد یا خیر یا مثلاً می توان از او خواست که علایق خود را از میان گزینه های مختلفی انتخاب نماید.

    5ـ radio: شاید این کلمه گویای کنترلی از فرم که این مقدار ایجاد می کند نباشد اما ظاهراً طراحان اولیه این کنترل، شباهت ظاهری این عنصر را به کنترل های روی دستگاه های رادیوی قدیمی در نظر داشته اند! به هر حال، تا جایی که به بحث ما مربوط می شود، این مقدار ایجاد کننده کنترلی است که برای انتخاب یک گزینه از میان چند گزینه موجود به کار می رود. در هر فرم می توان چند گروه از این کنترل ها را بسته به نیاز، مورد استفاده قرار داد اما هر گروه (گروهی که می خواهیم از بین آنها تنها یک گزینه را انتخاب نماییم)، باید دارای نام مشترکی باشند.

    6ـ file:  از این مقدار هنگامی استفاده می کنیم که می خواهیم در فرممان، کنترلی برای آپلود فایل، قرار دهیم (مثلاً کنترلی که کاربر بتواند از طریق آن، عکس خود را آپلود نماید).

    7ـ submit: این مقدار دکمه ای را ایجاد می کند که وظیفه ارسال اطلاعات وارد شده در فرم را به عهده دارد. برای نشان دادن متن مورد نظر بر روی دکمه، باید برای کنترل فرم، ویژگی value را نیز همراه با کلمه یا عبارت مورد نظر به کار ببریم. در غیر این صورت، مرورگرها (بسته به نوع مرورگر مورد استفاده)، تنها کلمه submit یا submit query را نشان خواهند داد.

    چنانچه بخواهیم به جای دکمه های مرورگر، از عکسی به جای دکمه ارسال کننده اطلاعات استفاده نماییم، باید این مقدار را برابر با image قرار داده و همچنین از ویژگی های src و alt نیز (همانند تگ عکس ها)، استفاده نماییم.

    8 ـ reset: این مقدار دکمه ای را در صفحه ایجاد می کند که کاربر با کلیک کردن آن می تواند کلیه اطلاعات وارد شده در فرم را پاک نماید (مثلاً در صورتی که اطلاعات مورد رضایت او نباشد و بخواهد دوباره آنها را وارد نماید). از آنجا که در بسیاری از موارد این کنترل غفلتاً توسط کاربر، کلیک می شد و در نتیجه، کل زحمتی که کاربر برای تکمیل فرم کشیده بود، بی ثمر می ماند، در سال های اخیر استفاده از این کنترل تقریباً منسوخ شده است.

    ب ـ value: این ویژگی بنا به نوع کنترل مورد نظر، عملکرد متفاوتی خواهد داشت که در ادامه به بررسی آنها می پردازیم.

    برای تگ های <input> که از نوع submit و یا reset باشند، مقدار این ویژگی، نوشته ظاهر شده بر روی دکمه را مشخص می نماید.

    برای تگ های <input> که از نوع text یا password باشند، مقدار این ویژگی نوشته ای را که به صورت پیش فرض، در این کنترل ها ظاهر می شود، تعیین می کند (کاربر می تواند این نوشته را تغییر دهد).

    برای تگ های <input> که از نوع radio، checkbox و یا hidden باشند، مقدار این ویژگی توسط کاربر قابل تغییر نیست و مقداری که از قبل توسط طراح تعیین شده باشد ارسال خواهد شد. البته واضح است که در مورد انواع radio ویا checkbox، کاربر دارای انتخاب می باشد اما در مورد hidden، هیچ نوع انتخابی در اختیار کاربر نیست و اطلاعات موجود در این کنترل حتماً ارسال خواهد شد.

    پ ـ name: در مورد قبلی اشاره کردیم که اطلاعاتی که از طریق کنترل های فرم ارسال می شود، در مقدار ویژگی value قرار دارد. حال باید این نکته را اضافه نماییم که تنها اطلاعات موجود در کنترل هایی که دارای نامی هستند، ارسال خواهد شد و پس از ارسال اطلاعات به سرور، ما جفت هایی از نام و اطلاعات خواهیم داشت که هر کدام از آن ها متعلق به یکی از کنترل های فرم می باشد.

    ت ـ maxlength: برای کنترل هایی از فرم که کاربر باید در آنها متنی را تایپ نماید، می توانیم این ویژگی را با یک مقدار عددی تعیین نماییم و به این ترتیب، تعداد کاراکترهایی را که می توان در کادر مورد نظر تایپ کرد، محدود نماییم.

    ج ـ checked: برای کنترل های نوع radio و checkbox، چنانچه بخواهیم در هنگام لود شدن صفحه، این کنترل های در حالت پیش فرض، انتخاب شده باشند، می توانیم از این ویژگی برای این کنترل ها استفاده نماییم. در نسخه های قبلی HTML، این ویژگی باید به این صورت checked = “checked” نوشته می شد! اما در نسخه کنونی، تنها ذکر کلمه checked، کفایت می کند.

    چ ـ disabled: به کار بردن این ویژگی موجب می شود که کنترل های فرم غیر قابل استفاده شده و کاربر هیچ عملی نتواند بر روی آنها انجام دهد (حتی کپی کردن متن موجود در برخی کنترل ها) اما اطلاعات موجود در آن کنترل، ارسال خواهد شد. به این ترتیب، کاربر در این گونه موارد تنها بیننده این کنترل های خواهد بود و دخالتی در تعیین محتوای آنها نخواهد داشت. این ویژگی نیز نیاز به نام ندارد و تنها ذکر مقدار disabled کافی است.

    ح ـ readonly: این مورد نیز تقریباً مانند مورد قبلی عمل می کند با این تفاوت که در این مورد، امکان انجام بعضی اعمال بر روی کنترل مورد نظر وجود دارد (مثلاً کاربر می تواند متن داخل آن را کپی نماید) اما مقدار موجود در آن را نمی تواند تغییر دهد.

     

     ارسال در حدود 1811 روز قبل  نویسنده : admin  بدون نظر   | ادامه مطلب »

    برترين مطالب
    Best Posts
    آخرین مطالب ارسالی
    Last Posts