وب فرم در Web Form 2.0) HTML5)

منتشرشده در آموزش HTML5
جمعه, 19 دی 1393 ساعت 10:21

وب فرم در Web Forms 2.0) HTML5)

 Web Form 2.0 در واقع نسخه گسترش یافته ویژگی های فرم در HTML4 است. عناصر و ویژگی های فرم که در HTML5ارائه شده ازلحاظ  نشانه گذاری یک درجه بالاتر از HTML4 . کارها در HTML4 نیازمند طراحی و برنامه نویسی زیاد و خسته کننده بود.

عنصر  <input>در HTML4 :

عنصر  <input>در HTML4  از صفت type برای مشخص کردن نوع داده استفاده می کند.
در زیر لیستی از مقادیر صفت type را مشاهده می کنید:

محتوای Type شرح عملکرد
text یک فیلد ورودی متن معمولی ایجاد می کند.
password یک فیلد ورودی متن برای اطلاعات حساس ایجاد می کند.
checkbox در فرم یک چک باکس ایجاد می کند.
radio در فرم دکمه های رادیویی ایجاد می کند.(برای زمانی که بخواهید کاربر فقط یک گزینه را انتخاب کند.)
submit یک دکه submit برای ثبت و ارسال داده های فرم ایجاد می کند.
file یک فایل دلخواه از نوع موردنظر(صفت accept) و با نام اختیاری ایجاد می کند.
image برای قرار دادن یک عکس خاص به عنوان دکمه submit استفاده می شود.
hidden زمانی کاربرد دارد که طراح بخواهد نگهداری، ارسال و یا انتقال اطلاعات را بدون اینکه کاربران محتوای آن را مشاهده کنند انجام دهد.
select مقداری را تعیین می‌کند که در زمان بارگذاری صفحه، در فهرست انتخاب شده است.
textarea برای ایجاد نواحی متنی چند خطی استفاده می شود
button برای ایجاد یک دکمه که آغازگر یک رویداد باشد، کاربرد دارد.

 

در پایین یک مثال ساده را مشاهده میکنید، که در آن از برچسب ها، دکمه های رادیویی و دکمه ارسال استفاده شده است:

<form action="http://example.com/cgiscript.pl" method="post">
    <p>
    <label for="firstname">first name: </label>
              <input type="text" id="firstname"><br />
    <label for="lastname">last name: </label>
              <input type="text" id="lastname"><br />
    <label for="email">email: </label>
              <input type="text" id="email"><br>
    <input type="radio" name="sex" value="male"> Male<br>
    <input type="radio" name="sex" value="female"> Female<br>
    <input type="submit" value="send"> <input type="reset">
    </p>
 </form>

 عنصر <input> در HTML5 :

به غیر از موارد ذکر شده در بالا ،مقادیر جدیدی برای  صفت type در HTML5 معرفی شده، که در پایین لیست شده اند:

 

محتوای Type شرح عملکرد
datetime برای دریافت تاریخ و زمان از کاربر، بدون اطلاعات منطقه زمانی محلی کاربرد دارد.
datetime-local برای دریافت تاریخ و زمان از کاربر، با اطلاعات منطقه زمانی محلی کاربرد دارد.
date برای دریافت تاریخ از کاربر کاربرد دارد.
month برای دریافت یک ماه از سال کاربرد دارد.
week برای دریافت یک هفته خاص از سال کاربرد دارد.
time برای دریافت زمان از کاربر کاربرد دارد.
number برای دریافت اعداد از کاربر کاربرد دارد. برای مثال سن کاربر
range همانند گزینه number می باشد اما خروجی از نظر ظاهری متفاوت است.
email برای دریافت پست الکترونیکی از کاربر کاربرد دارد. در صورتی که کاربر در ورودی چیزی غیر از فرمت پست الکترونیکی وارد کند،آن را نپذیرفته و پیغام خطا می دهد.
url برای دریافت آدرس اینترنتی url از کاربر کاربرد دارد. در صورتی که کاربر در ورودی چیزی غیر از فرمت آدرس اینترنتی وارد کند،آن را نپذیرفته و پیغام خطا می دهد.

 عنصر  <output>در HTML5 :

در HTML5 عنصر جدیدی به نام  معرفی شده که برای  نمایش خروجی های مختلف حاصل از یک محاسبه کاربرد دارد، مانند خروجی حاصل از یک کد اسکریپت.
شما می توانید از خاصیت for در عنصر <output> برای ایجاد ارتباط با سایر عناصربرای محاسبه استفاده کنید. ویژگی برای مشخص کردن یک رابطه بین عنصر خروجی و عناصر دیگر در سند که تحت تاثیر محاسبه .
خاصیت for با لیستی از شناسه های عناصر دیگر که با فاصله از هم جدا می شوند مقدار دهی می شود.


در زیر نمونه ای از عنصر  <output>در HTML5 را مشاهده می کنید: 

<form action="action_page.asp"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range"  id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>

 صفت placeholder در HTML5 :

این صفت در داخل فیلد مورد نظر یک عبارت را به صورت کم رنگ ایجاد می کند که با فوکوس بر روی آن از بین رفته و فیلد خالی می شود. صفت  placeholderدر عناصر <input>  و <textarea>  کاربرد دارد.

در زیر نمونه ای از صفت placeholder در HTML5  را مشاهده می کنید:

<input type="text" name="search" placeholder="search the web"/>

 این صفت تنها توسط آخرین نسخه موزیلا (Mozila)، سافاری (Safari)  و گوگل کروم  (Google Chrome) پشتیبانی می شود.


صفت  autofocus  در HTML5 :

صفت  autofocus  یک ویژگی جدید درHTML5  است که با عث می شود بعد از لود شدن صفحه بر روی فرم موردنظر تمرکز (فوکوس) شود.
در زیر نمونه ای از صفت  autofocus  در HTML5 را مشاهده می کنید:

<input type="text" name="search" autofocus/>

 این صفت تنها توسط آخرین نسخه موزیلا (Mozila)، سافاری (Safari)  و گوگل کروم  (Google Chrome) پشتیبانی می شود.

 

صفت  required  در HTML5 :

صفت required  یک ویژگی جدید درHTML5  است که مشخص می کند فیلد قبل از ارسال به سرور حتما پر شده باشد.
در زیر نمونه ای از صفت  required  در HTML5 را مشاهده می کنید:

<input type="text" name="search" required/>

 این صفت تنها توسط آخرین نسخه موزیلا (Mozila)، سافاری (Safari)  و گوگل کروم  (Google Chrome) پشتیبانی می شود.

 

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

آموزش صفت ها (Attributes) در HTML5

منتشرشده در آموزش HTML5
دوشنبه, 08 دی 1393 ساعت 10:47

صفت ها (Attributes ) در HTML5 :

عناصر ممکن است دارای خواص مختلفی باشد که شما می توانید با صفت ها در HTML5 این خواص را تنظیم کنید.

برخی از صفت ها در سطح عمومی تعریف شده و می توانید بر روی تمام عناصراستفاده کنید.

 سایر صفت ها که به صورت ویژه تعریف شده ، تنها برای یک عنصر استفاده می شود.

صفت ها یا همان خاصیت ها در HTML5 از یک نام و یک مقدار تشکیل می شود، که در مثال زیر نمونه آن را مشاهده می کنید.

در زیر نمونه ای از صفت ها در HTML5 قرار دارد ، که در آن عنصر div با صفت class و مقدار صفت example را مشاهده می کنید .

<div class=\"example\">...</div>

 صفت ها تنها در تگ شروع قرار می گیرند و از آنها در تگ پایان نبایداستفاده کرد.

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

صفات اصلی  HTML5 :


این صفت ها توسط تمام عناصر (تگ ها) درHTML5 پشتیبانی می شوند.به غیر از عناصر <head>  ،<html>  ،<meta> ،   <param>  ،<script>  ،<style>  ، <base> و  <title> .

صفت ها مقادیر شرح عملکرد
class توسط کاربر برای طبقه بندی یک عنصر و مشخص کردن یک یا چند classname برای عنصر استفاده می شود.
id توسط کاربر برای نسبت دادن یک شناسه یکتا به عنصر استفاده می شود.
style شیوه نامه css مشخص کردن شیوه درون خطی برای یک عنصر یا نسبت دادن ویژگی های css به طور مستقیم استفتده می شود.
title توسط کاربر برای افزودن اطلاعات بیشتر و عنوان ”Pop-up” استفاده می شود.

 

صفات زبانی در HTML5 :

این صفت ها توسط تمام عناصر (تگ ها) درHTML5 پشتیبانی می شوند.به غیر از عناصر <param>  ،<iframe>  ،<hr> ،<frameset>  ،<frame>  ،<br>  ،<base>  و <script> .

صفت ها شرح عملکرد
dir برای طبقه بندی یک عنصر و مشخص کردن یک یا چند classname برای عنصر استفاده می شود.
lang برای نسبت دادن یک شناسه یکتا به عنصر استفاده می شود.

 

صفات مربوط به صفحه کلید در HTML5 :

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


سایر صفات استاندارد در HTML5 :

صفت ها مقادیر شرح عملکرد
align right, left, center موقعیت عنصر را تعیین می کند.
background آدرس تصویر یک تصویر در پس زمینه عنصر ایجاد می کند.
bgcolor نام رنگ RGB، مقدار هگزادیسمال یک رنگ در پس زمینه عنصر ایجاد می کند.
contenteditable true, false مشخص میکند که آیا کاربر اجازه ویرایش عنصر را دارد یا نه.
contextmenu ID منو یک منو را برای عنصر تعیین می کند.
data-XXXX توسط کاربر صفات سفارشی – نویسنده سند می توند صفات را خودش تعریف کند و باید با “data-” شروع شود.
draggable true,false, auto مشخص میکند که آیا کاربر اجازه کشیدن عنصر را دارد یا نه.
height مقدار عددی ارتفاع جداول ، تصاویر ، یا سلول های جدول را مشخص می کند.
hidden hidden مشخص میکند که آیا عنصر قابل مشاهده باشد یا خیر.
item لیست عناصر برای ایجاد گروهی از عناصر استفاده می شود.
itemprop لیست آیتم ها برای ایجاد گروهی از آیتم ها استفاده می شود.
spellcheck true, false مشخص می کند که آیا عمل بررسی واژه ها در عنصر مجاز است یا خیر.
subject Id توسط کاربر آیتم مربوط به آن عنصر را مشخص می کند.
valign top, middle, bottom موقعیت عمودی عنصر را تعیین می کند.
width مقدارعددی عرض جداول ، تصاویر ، یا سلول های جدول را مشخص می کند.


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


صفات سفارشی :

یکی از ویژگی های جدید معرفی شده در HTML5 ایجاد عناصر داده سفارشی می باشد.
یک عنصر داده سفارشی با data- شروع شده و به همراه نام موردنظر شما قرار میگیرد.
در زیر نمونه ای ازیک  صفت سفارشی در HTML5 را مشاهده می کنید:

<div class="example" data-subject="physics" data-level="complex">
...
</div>

در بالا دو صفت سفارشی معتبر در HTML5 با نام های  data-subject و data-level استفاده شده است.
شما میتوانید مقادیر این صفت هارا همانند صفت های استاندارد توسط برنامه های کاربردی جاوا اسکریپت یا css دریافت کنید.

 

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

آموزش قواعد نوشتاری (Syntax) در HTML5

منتشرشده در آموزش HTML5
یکشنبه, 07 دی 1393 ساعت 22:17

قواعد نوشتاری یا سینتکس ها در HTML5 :

قواعد نوشتاری یا HTML5 Syntax  با  HTML 4 و اسناد XHTML1  که بر روی وب منتشر شده است،سازگار می باشد اما با ویژگی های باطنی تر SGML از HTML 4  سازگار نیست.
HTML5  از موارد زیر پشتیبانی می کند و بسیار انعطاف پذیر می باشد:

•    تگ های دارای حروف بزرگ.
•    نقل قول برای صفات.
•    مقادیر برای صفات اختیاری است.
•    بستن عناصر خالی اختیاری است.

DOCTYPE :

مشخص می کند که از چه نوع تگ هایی استفاده می شود.
DOCTYPEs  در نسخه های قدیمی تر HTML  طولانی تر بودند زیرا  زبانHTML برپایه SGML  استوار بود و به همین دلیل نیازمند ارجاع به یک DTD بود.
نویسندگان HTML 5 می توانند از کد ساده زیر برای مشخص کردن  DOCTYPE استفاده کنند:

<!DOCTYPE html>

کد بالا به طور کامل به حروف کوچک و بزرگ حساس است.

کدگذاری در HTML5 :

نویسندگان HTML 5 می توانند از کد ساده زیر برای مشخص کردن نوع  Encoding استفاده کنند:

<"meta charset="UTF-8>

 کد بالا به طور کامل به حروف کوچک و بزرگ حساس است.

 کد بالا به طور کامل به حروف کوچک و بزرگ حساس است.

تگ <script> :

روشی معمول برای اضافه کردن یک ویژگی با محتوای " متن / جاوا اسکریپت "  به صورت زیر است :

<script type="text/javascript" src="/scriptfile.js"></script>

 HTML 5 اطلاعات اضافی اما مورد نیاز را حذف می کند و شما می توانید به سادگی زیر از استفاده کنید:

<script src="/scriptfile.js"></script>

 تگ <link> :

تا کنون تگ <link> را شکل زیر نوشته می شد:

<link rel="stylesheet" type="text/css" href="/stylefile.css">

 HTML 5 اطلاعات اضافی اما مورد نیاز را حذف می کند و شما می توانید به سادگی زیر استفاده کنید:

<link rel="stylesheet" href="/stylefile.css">

 عناصر درHTML5  :

عناصر HTML5 با یک تگ شروع و یک تگ پایان مشخص می شوند. تگ ها ،با نام تگ در بین دو براکت زاویه مشخص می شود.
تفاوت بین این دو تگ وجود یک علامت اسلش "/" قبل از نام تگ پایان است.
نمونه ای از یک عنصر HTML5 :

<p>...</p>

 نام تگ ها در  HTML5 به حروف کوچک و بزرگ حساس نیست و ممکن است تماما با حروف بزرگ و یا  ترکیبی از حروف بزرگ و کوچک نوشته شود، اگر چه معمولا با حروف کوچک نوشته می شود.

بسیاری از تگ ها درHTML5  مطالبی را در برمی گیرند مانند تگ <p>...</p> که شامل یک پاراگراف می شود.
برخی از تگ ها در HTML5 محتوایی را در بر نمی گیرند که آنها را تگ خالی می نامیم مانند br ،  hr، link ، meta و ...
در قسمت عناصر HTML5 می توانید لیست کاملی از عناصر HTML5 را مشاهده کنید.

صفت ها (Attributes ) در HTML5 :

عناصر ممکن است دارای خواص مختلفی باشد که شما می توانید با صفت ها در HTML5 این خواص را تنظیم کنید.
برخی از صفت ها در سطح عمومی تعریف شده و می توانید بر روی تمام عناصراستفاده کنید.
 سایر صفت ها که به صورت ویژه تعریف شده ، تنها برای یک عنصر استفاده می شود.
صفت ها در HTML5 از یک نام و یک مقدار تشکیل می شود، که در مثال زیر نمونه آن را مشاهده می کنید.
در زیر نمونه ای از صفت ها در HTML5 قرار دارد ، که در آن عنصر div با صفت class و مقدار صفت example را مشاهده می کنید .

<div class="example">...</div>

 صفت ها تنها در تگ شروع قرار می گیرند و از آنها در تگ پایان نبایداستفاده کرد.

صفت ها در  HTML5 به حروف کوچک و بزرگ حساس نیست و ممکن است تماما با حروف بزرگ و یا  ترکیبی از حروف بزرگ و کوچک نوشته شود، اگر چه معمولا با حروف کوچک نوشته می شود.
در قسمت صفت ها در HTML5 می توانید لیست کاملی از عناصر HTML5 را مشاهده کنید.

صفحات در HTML5 :

برای درک بهتر شما برخی از تگ ها در زیر معرفی می شوند:
section : ازتگ section برای بخش بندی صفحه استفاده می شود، به این صورت که قسمت هایی را که با هم ارتباط معنایی دارند به عنوان یک بخش در نظر گرفته وبه عنوان نماینده آن بخش عمل می کند. همچنین می توان از H1-H6 در کنارش برای مشخص کردن ساختار سند استفاده کرد.
article : از تگ  article برای ایجاد یک قسمت مستقل از محتوای یک صفحه، مانند وبلاگ یا مقاله روزنامه استفاده می شود. این تگ نسبت به تگ section مستقل تر و دقیقتر می باشد، نکته دیگر در تفاوت این دو تگ در این است که تگ article را به صورت تو در تو نمی توان استفاده کرد اما همانند تگ section میتوان در داخل تگ article از تگ های section, nav, aside به همراه تگ  header و footer استفاده کرد.
aside : این تگ نشان دهنده یک قطعه از محتوا است که تنها کمی به بقیه صفحه مربوط است. همچنین برای استفاده در ستونهای کناری کاربرد دارد، در صورتی که ازتگ aside در تگ دیگری استفاده می کنیم (برای مثال تگ article )باید قسمت هایی که در این تگ قرار می گیردبا محتوای تگ article ارتباط معنایی داشته باشد.
header : از تگ header برای قرار دادن سرصفحه یا سربرگ در یک بخش استفاده ه می شود.
footer : از تگ footer برای قرار دادن پانویس در یک بخش استفاده ه می شود می توانند اطلاعاتی از قبیل نویسنده، اطلاعات کپی رایت، و ...را در برگیرد.
Nav : با استفاده از تگ nav می توان بخشی را به لینک ها اختصاص داد.
Dialog : از تگ dialog برای ایجاد یک کادر محاورهای یا باکس استفاده می شود.
figure :  از تگ figure برای همراه کردن محتوای متنی با تصاویر یا ویدیو استفاده می شود.

در زیر نمونه ای ازیک  سند HTML5 را مشاهده می کنید:

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>...</title>
</head>
<body>
  <header>...</header>
  <nav>...</nav>
  <article>
    <section>
      ...
    </section>
  </article>
  <aside>...</aside>
  <footer>...</footer>
</body>

 

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

HTML5 چیست؟ - معرفی

منتشرشده در آموزش HTML5
شنبه, 06 دی 1393 ساعت 12:38

آموزش HTML5

HTML5  نسخه ای جدیدتر و پیشرفته تر از نسخه  HTML می باشد.
HTML  از نظر فنی یک زبان برنامه نویسی نیست، بلکه یک زبان نشانه گذاری است.
این آموزش درک بسیار خوبی درمورد HTML5 به ما  می دهد.

معرفی  HTML5

HTML5  بازبینی دوباره ای از HTML و استاندارد جانشین HTML 4.01، XHTML 1.0، و XHTML 1.1  است.

HTML5 استانداردی برای ساختار و ارائه محتوا در شبکه جهانی وب است.

HTML5  حاصل همکاری بین کنسرسیوم وب جهان گستر (W3C) و گروه کاری (WHATWG) است.

استاندارد جدید دارای ویژگی هایی مانند پخش ویدئو و کشیدن و رها کردن آیتم ها می باشد ، که قبلا وابسته به پلاگین های مرورگرهایی مانند Adobe Flash ، Microsoft Silverlight وGoogle Gears  بوده است.

پشتیبانی مرورگر:

آخرین نسخه از اپل سافاری، گوگل کروم، موزیلا فایرفاکس و اپرا تماما از بسیاری ویژگی های HTML5  و اینترنت اکسپلورر 9.0 نیزاز برخی از قابلیت های HTML5 حمایت  می کنند.
مرورگرهای وب تلفن همراه که از پیش بر روی آیفون، iPads  ها، و تلفن های آندروید نصب شده اند. همه ازHTML5  پشتیبانی عالی می کنند.

ویژگی های جدید:

HTML5  دربرگیرنده عناصر و ویژگی های جدید است که به ما در ساخت یک وب سایت مدرن کمک می کند.

در زیر ویژگی های اضافه شده به HTML5  معرفی می شوند .

•    عناصر جدید معنایی:   عناصری مانند<header>, <footer>  و  <section>.

•    فرم (Forms 2.0): ارتقاء فرم های وب HTML که در آن ویژگی های جدید وجودد دارد و با تگ <input>  معرفی می شود.

•    وب آفلاین: با این قابلیت HTML5 کاربر می تواند حتی در زمان قطع شبکه ایمترنت نیز به مرور سایت ها بپردازد.

•    WebSocket: فن آوری ارتباطات دو طرفه نسل جدید برای برنامه های کاربردی وب.

•    HTML5  دارای ویژگی های مشترکی با Flash می باشد و بسیار از کارشناسان و تحلیلگران بر این عقیده اند که فراگیر شدن HTML% به معنای پایان کار Flash خواهد بود.

•    شی  Canvas: از این ویژگی می توانید برای طراحی اشکال هندسی و گرافیکی بر روی صفحات وب با استفاده از جاوا اسکریپت ( JavaScript ) استفاده نمایید .

•    صدا و ویدئو (Audio & Video ) :  شما می توانید در صفحات وب خود صدا یا تصویر قرار دهید بدون اینکه  به پلاگین ثالثی نیاز داشته باشید.

•    موقعیت جغرافیایی ( Geolocation ): موقعیت جغرافیایی کاربر در صورت پذیرفتن خود شخص نمایش داده می شود.

•    میکرو داده (Microdata) : با استفاده از تگ های microdata شما میتوانید موتورهای جستجوگر را با گفتن موضوع  مطلب راهنمایی کنید.

•    کشیدن و رها کردن (Drag and drop ): کشیدن و رها کردن آیتم ها را از یک محل به محل دیگری در همان صفحه را امکان پذیر می کند.

سازگای رو به عقب ( Backward Compatibility ) :

HTML5  تا آنجا که ممکن است با مرورگرهای وب نسخه های قدیمی تر سازگار است و ایجاد ویژگی های جدید در ویژگی های موجود به شما اجازه ارائه  محتوا به صورت مجدد برای مرورگرهای قدیمی تر را می دهد.

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

 

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

عضویت در وب استیودنت

در شبکه های اجتماعی همراه ما باشید

با ما در ارتباط باشید

سامانه پیامک: 50004657100

تلفن: 02122616859

دورنگار: 02189775650

ایمیل: info @ WebStudent.ir

تارنما: webstudent.ir

انجمن: forum.webstudent.ir

 

JoomShaper