بانک مقالات و آموزش های html / css

[A3is]

[align=center][/align]

با سلام خدمت دوستان.

در این تاپیک بانک مقالات و آموزش های html و css قرار خواهد گرفت.

باتشکر 3is@ :3:

[A3is]

RE: بانک مقالات و آموزش های html / css

دانلود html5 مترجم: امیرعباس عبدالعلی
[php]
http://a-3is.persiangig.com/learns/html5%28%403is%29.zip
[/php]

دانلود css3 اثر:رﺿﺎ ﺷﯿﺨﻠﻪ
[php]
http://a-3is.persiangig.com/learns/css3%28%403is%29.zip
[/php]

[A3is]

RE: بانک مقالات و آموزش های html / css

برای نوشتن متن در HTML ، تگ های خاصی تعریف شده اند که به فرمت بندی و شکل دهی متن کمک می کنند. این تگ ها شامل تگ های سرتیترها ، پاراگراف ، خط شکن ، توپر ( bold ) کننده ها ، کج کننده ها ( italic ) ، زیرنوشت ، بالانوشت و … است. در این بخش به توضیح این تگ ها ، مثال و نحوه استفاده از آن ها اشاره می کنیم.

نشان اول برای نوشتن متن ها ، سرتیتر ها هستند. سرتیترها ، ضمن یادآوری ویژگی بارزی که برای موتورهای جستجو دارند ، به عنوان تیتر نوشته ها استفاده می شوند. این تگ ها به شامل تگ های <h1> , <h2> , <h3> , <h4> , <h5> , <h6> هستند که به ترتیب از h1 دارای بیشترین اهمیت هستند. این سرتیتر ها ، هرکدام ، دارای ویژگی های شاهری پیش فرضی هستند که در مرورگرها تنظیم شده اند. هرچند که می توان این ویژگی های ظاهری را در CSS ویرایش کرد. استفاده از این تگ ها به صورت زیر است :
[php]<h1> Title </h1>[/php]

تگ بعدی ، تگی است که برای تعریف یک پاراگراف از ان استفاده می شود و آن <p> است. متن پاراگراف بین تگ های <p> و </p> قرار می گیرد. مثال :
[php]<p> This is a Paragraph </p>[/php]

برای این تگ نیز ، استاندارد هایی از قبیل ، فاصله بین خطوط ، فاصله اولین خط از اول خط ، فاصله پاراگراف از کناره ها و … به صورت پیش فرض در نظر گرفته شده است و می توان این ویژگی های ظاهری را با CSS ویرایش کرد.
در پاراگراف ها ، گاهی اوقات نیاز است به اول خط مراجعه کنید. برای رفتن به سطر جدید از تگ <br> استفاده می شود. توجه کنید که این تگ ، تگ بسته شدن ندارد یعنی هرکجا از این تگ استفاده کنید ، به سطر بعد رفته اید. مثال :
[php]<p> First Line <br> Second Line <br> Third Line </p>[/php]

بدین نکته توجه فرمایید که در xHTML به جای <br> از <br /> استفاده می شود که استاندارد است. مثال :
[php]<p> First Line <br /> Second Line <br /> Third Line </p>[/php]

تگ های بعدی که به سراغ آن ها می رویم ، تگ های هستند که نوشته های قسمتی از متن را از بقیه کلمات متمایز می کنند. ویژگی هایی چون کج کردن ، توپر و …
توپر
برای توپر کردن یک کلمه در متن ، از تگ های مختلفی استفاده می شود که از لحاظ سئو نیز در یک سطح هستند. اما استفاده برخی از آن ها متداول تر و به موتورهای جستجو آشناتر است. تگ های زیر سبب توپر شدن کلمه یا متن می شوند :
[php]<strong> , <b>[/php]
هر دو آن ها ، از لحاظ سئو در یک رده هستند.

نکته : توجه نمایید که ، شما ضمن استفاده از این تگ ها ، کلماتی را برای موتور های جستجو ، مهم جلوه می دهید. در حالی که اگر این کار را با CSS انجام دهید ، سطح اهمیت کلمات شما تغییری نمی کند. مثال استفاده :
[php]<strong> I am Strong </strong>
<b> I am Bold </b>[/php]

کج کردن
برای کج کردن یک کلمه یا متن ، از چندین تگ استفاده می شود که این تگ ها از لحاظ سئو در یک سطح نیستند. در این بین استفاده از دو تگ ، متداول تر است و موتورهای جستجو به آن حساس تر هستند. تگ های زیر سبب کج شدن نوشته می شوند :[php]
<i> ( Italics )
<em> ( Emphasized Text )
<dfn> ( Definition Term )
<var> ( Variable )[/php]

نکته : استفاده از دو تگ <em> و <i> بسیار متداول تر است و موتورهای جستجو در صفحات به دنبال محتوای این تگ ها هستند. مثال استفاده از این تگ ها :
[php]<i>Italics</i>
<em>Emphasized text</em>
<dfn>Definition term</dfn>
<var>Variable</var>[/php]

سایر فرمت ها
این تگ ها در طراحی صفحات وب ، دارای اهمیت چندانی نیستند و استفاده از آن ها متداول نیست ، اما موتورهای جستجو تا حدودی برای آن ها اهمیت قائل هستند.
این تگ ها ، برای نقل قول کردن استفاده می شود :
[php]<q> Quotation </q>
<blockquote> Text </blockquote>[/php]

تگ <abbr> برای نشان دادن توضیحات یه مخفف کاربرد دارد :
[php]<abbr title=”World Health Organization”>WHO</abbr>[/php]

تگ <cite> نیز برای معرفی عنوان یک اثر ( نقاشی ، طراحی یا … ) استفاده می شود. مثال :
[php]<cite>The Scream</cite>[/php]

در این بین ، تگ های زیر را نیز معرفی می کنیم :
نوشته هایی که در تگ <small> قرار می گیرند دارای اندازه کوچک تری نسبت به نوشته های کناری هستند. مثال :
[php]<small> This is a Smaller Text </small> This one is bigger[/php]

تگ <sub> ، نشان دهنده یک زیر نوشت است. ( اندیس ) مثال :
[php]M₁[/php]

تگ <sup> ، نشان دهنده یک بالا نوشت است. ( توان ) مثال :
[php]۱۰³[/php]

تگ <del> نشان دهنده نوشته ای است که لغو شده است. ( خط خورده است ). مثال :
[php]<del> This Text is Deleted ! </del>[/php]

منبع : گویا ای تی

[A3is]

RE: بانک مقالات و آموزش های html / css

با سلام خدمت دوستان عزیز

شاید تاکنون برایتان پیش آمده است به دلایلی بخواهید با استفاده از یک iframe ، صفحه html را در وبلاگ یا سایت خود به نمایش بگذارید ولی در آن صفحه ، به تمامی محتوا نیازی نباشد یا مثلا ان صفحه دارای تبلیغات یا متن / عکسی باشد که نیاز به نمایش آن نیست و به گونه دیگر مزاحم است!

به عبارتی دیگر:

[align=center][/align]

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

[php]
<iframe src="http://ayoubsys.ir" width="900" height="500px" scrolling="no" frameborder="0" style="border: 0px; overflow-x: hidden; overflow-y: hidden; float: right; position: absolute; right: 0px; top: -410px;">
</iframe>
[/php]

در قسمت src باید آدرس آن سایت یا صفحه مورد نظر را وارد کنید.
سپس طول(width) و عرض(height) را مشخص کنید.
در قسمت آخر باید فاصله از بالا(top) و راست(right) را تنظیم نماید. اگر میخواهید مثلا هدر سایر نمایش داده نشود باید مقدار top منفی شود ، مثلا 50px-

مثال:
نمایش سایت بصورت عادی
نمایش iframe

// پایان

[A3is]

RE: بانک مقالات و آموزش های html / css

با سلام

شاید تاکنون وب سایت هایی را دیده اید که footer ثابت به شکلهای مختلف مثلا منوی سایت ، دیده اید. در این آموزش ، به ساخت یک Footer ثابت با محتوای متحرک میپردازیم.

[align=center][/align]

[php]
<div style="position:fixed; bottom:0px; width:99%; height:auto;">
<marquee direction="right" scrollamount="20">
<img src="http://img.ie/d0q9z.gif" width="100" height="66" />
</marquee>
</div>
[/php]

- div در ایجا برای ما کار footer ثابت را انجام میدهد! البته این ساده ترین مدل برای مثال است.
در مرحله بعد در style مینویسم : position:fixed; سپس فاصله از بالا ، راست ، پایین و چپ را تعیین میکنیم.

- سپس marquee محتوای ما را به حرکت در می آورد :
1- direction وظیفه سمت حرکت را انجام میدهد و میتوان آن را در جهت های بالا(up) ، پایین(down) ، راست(right) و چپ(left) تنظیم نمود.
2- وظیفه پارمتر scrollamount ، تنظیم سرعت marquee است.
- سپس در بین تگ marquee از یک ایمیج متحرک نیز استفاده شده است ، تا کار را زیباتر گرداند.
1- در src آدرس تصویر مورد نظر را وارد میکنیم.
2- سپس طول(width) و عرض(height) تصویر را تنظیم میکنیم.
.

نمایش دمو

موفق باشید.

[A3is]

گزینه ارسال توسط پیامک در صفحه موبایل سایت ها

بنام خدا

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




نحوه اجرای این ابزار به اینگونه است که زمانی که کاربر توسط موبایل روی این گزینه کلیک میکند ، موارد داده شده توسط برنامه نویس در قسمت ارسال پیام موبایل ظاهر شده و این امکان را میدهد تا کاربر به دوستان خود ان را sms نماید.
برای این کار ، وارد فایل (html / php) برنامه نویسی شده برای صفحه موبایل شوید. اگر برای نمایش پست ها نیز صفحه جداگانه ای را طراحی کرده اید آن را در یک ایدیتور (notepad / Dreamweaver) باز نمایید.
در ابتدا دو متغیر برای آدرس پیج و عنوان پیج تعریف کنید. و سپس کد زیر را در جایی مناسب برای نمایش در صفحه موبایل قرار دهید :

<a href="sms:?body=[title]  .  [link]">Send Sms</a> 

که میتوانید بجای [title] متغیر عنوان صفحه خود و بجای [link] متغیر لینک صفحه تان را قرار دهید.
همچنین میتوانید به لینک بالا ،عکس نیز جهت زیبایی کار اضافه نمایید و یا در قسمت Body به دلخواه موارد خواسته شده خود را قرار دهید تا کاربران سایت آن را پیامک کنند.

موفق باشید. 3is@

[A3is]

آموزش چسباندن کپی رایت به متن کپی شده از سایت

با سلام خدمت دوستان عزیز.

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

شما میتوانید با استفاده از این کد ، در انتهای مطالب کپی شده از سایت شما ، متن درخواستی خود را قرار دهید.

[php]<script>
function addLink()
{ var body_element = document.getElementsByTagName('body')[0];
var selection; selection = window.getSelection();
var pagelink = "<br />برگرفته از وبسایت <a href='http://url site shoma' target='_blank'> عنوان وب سایت شما </a> ";
var copytext = selection + pagelink; var newdiv = document.createElement('p');
body_element.appendChild(newdiv); newdiv.innerHTML = copytext; selection.selectAllChildren(newdiv);
window.setTimeout(function() { body_element.removeChild(newdiv); },0);} document.oncopy = addLink;
</script>[/php]

بجای "عنوان وب سایت شما" ، عنوان وب سایت خود را نوشته و بجای "url site shoma" نیز آدرس وب سایت خود را قرار دهید.

همچنین اگر متن دیگری مدنظرتان بود ، میتوانید از قسمت var pagelink شخصی سازی نمایید.

به عنوان مثال:

[php] var pagelink = "Your Text";[/php]

بجای "your text" متن مورد نظر خود را قرار دهید ، همچنین میتوانید از تگ های html ، مانند <a> یا <img> و ... نیز استفاده نمایید.

موفق باشید. 3is@

[A3is]

آشنایی با تگ video در Html

[align=center][/align]

با سلام. در این مبحث با آموزش تگ video در Html در خدمت شما هستیم.

حتما تاکنون برایتان پیش آمده باشد که بخواهید یک فایل تصویری را در وبلاگ یا سایت خود به نمایش بگذارید که اکنون در این رابطه با تگ video آشنا خواهید شد.

این تگ یکی از آن دسته تگهای جدید در html5 است.

تگ video در Internet Explorer 9 به بالا ، Firefox ، Opera ، Chrome و Safari پشتیبانی میشود.

لازم به ذکر است ، تگ video در ورژن Internet Explorer 8 به پایین پشتیبانی نمیشود.

تگ video با کد <video> شروع و با کد </video> به پایان میرسد و متنی که بین این دو کد نوشته شود ، در صورتی که مرورگر از این تگ پشتیبانی نکند ، نمایش داده خواهد شد.

بعنوان مثال:
[php]<video>
Your browser does not support the video tag.
</video>[/php]

در حال حاضر تگ video از سه فرمت MP4 ، WebM و Ogg پشتیبانی میکند.
[align=center][/align]

خواص تگ video :

1- width و height (طول و عرض) . این خواص بر اساس pixels مقدار دهی میشود. مثال :
[php]<video height="320" width="240">[/php]

2- controls (نمایش ابزار مدیریت ویدو.start.stop,...) و loop (شروع مجدد پس از پایان) و autoplay (شروع خودکار). مثال:
این خواص در قسمت اول تگ video قرار داده میشوند و میتوان از هر سه همزمان استفاده کرد:
[php]<video controls>

<video controls loop>

<video controls loop autoplay>[/php]

3- src : آدرس دهی فایل ویدویی . مثال :
[php]<video width="320" height="240" controls>
<source src="movie.mp4">
</video>[/php]

4- poster : وظیفه این خصوصیت ، نشان دادن یک تصویر ، قبل از شروع فایل است.(زمانی که هنوز کاربر بروی start کلیک نکرده است.) مثال:
[php]<video controls poster="/images/w3html5.gif">[/php]

در آخر یک فایل دمو که از تمامی این خواص استفاده شده است :
[php]<!DOCTYPE html>
<html>
<body>

<video width="320" height="240" poster="http://ayoubsys.ir/blog/site_logo_print.jpg" controls loop>
<source src="http://ayoubsys.ir/demo/movie.mp4" type="video/mp4">
مرورگر شما از این قابلیت پشتیبانی نمیکند
</video>

</body>
</html>[/php]
مشاهده دموی آنلاین این کد

موفق باشید. 3is@

[A3is]

آموزش ساخت سربرگ (Tab) در html

[align=center][/align]

با سلام خدمت دوستان خوبم در ایران هک. امیدوارم که خوب باشید. بابت تاخیر در درج مطالب جدید عذر میخوام. ایشالا مثل قبل اکتیو میشم. :5:

در این مبحث به آموزش ساخت سربرگ (Tab) در html به کمک جاوا اسکریپت (Java Script) خواهیم پرداخت.

+ میتوان برای ساخت سربرگ ها (Tab) از Java Script ، jquery ، Css کمک گرفت.

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

کد Html
[php]<html>
<head>
<title>Tab</title>
</head>
<body>

<a id="linktab_1" onClick="SetCurrent(1);" class="link_select">تب یک</a> |
<a id="linktab_2" onClick="SetCurrent(2);">تب دو</a> |
<a id="linktab_3" onClick="SetCurrent(3);">تب سه</a> |
<a id="linktab_4" onClick="SetCurrent(4);">تب چهار</a>

<div id="divtab_1">/// تست تب یک ///</div>
<div id="divtab_2" style="display:none">||| تست تب دو |||</div>
<div id="divtab_3" style="display:none">\ تست تب سه \</div>
<div id="divtab_4" style="display:none">--- تست تب چهار ---</div>

</body>
</html>[/php]

در این قسمت باید به دو عنصر مهم از جمله تگ a و div دقت کرد. تگ a با مقدار دهی id به linktab_1 شروع شده و id در سایر تگ های a افزایش پیدا میکند : linktab_2 , linktab_3 و ...

♦ وظیفه تگهای a در این آموزش ، جابجایی بین تگ ها است.

+ سپس بعد از مقداردهی id به مرحله بعد که رویداد onClick است میرسیم. در این قسمت نیز این رویداد را با (SetCurrent(1 مقداردهی کرده و مقدار داخل پرانتز را در سایر تگ های a افزایش پیدا میکند : (SetCurrent(2 و (SetCurrent(3 و ...

♦ وظیفه این رویداد ، ارسال مقدار داخل پرانتز و ارتباط با جاوا اسکریپت و اعمال دستورات است.

همچنین div نیز با مقدار دهی id به divtab_1 شروع شده و در سایر divها این مقدار افزایش پیدا میکند : divtab_2 و divtab_3 و...

♦ وظیفه div در این آموزش ، نمایش محتوا تب ها میباشد. لازم به ذکر است به جز divtab_1 که به عنوان پیشفرض هنگام load شدن صفحه وب نمایش داده میشود ، سایر div ها از خاصیت "style="display:none استفاده نمایید تا مخفی شوند.

کد JavaScript (محل قرارگیری : بین تگ head)
[php]<script>
var CurrentStep = 1;
function SetCurrent(val)
{
if(CurrentStep!=val)
{
document.getElementById('divtab_' + CurrentStep).style.display = 'none';
document.getElementById('divtab_' + val).style.display = 'block';
document.getElementById('linktab_' + CurrentStep).className = '';
document.getElementById('linktab_'+val).className = 'link_select'
}
CurrentStep = val;
}
</script>
[/php]
در این قسمت ، توسط جاوااسکریپت Div مورد نظر خود را که مقدار آن توسط رویداد onClick از قبل ارسال شده است را به نمایش میگذاریم و سایر div نیز با خاصیت "style.display = "none مخفی میشوند.

همچنین تگ a مورد نظری که بروی آن کلیک شده است نیز ، دارای کلاس link_select میشود. که در style این کلاس دستوراتی جهت تغییر شکل درج شده است.

کد Style (محل قرارگیری : بین تگ head)
[php]<style>
a { cursor: pointer}
.link_select { color:#FFf;}
</style>[/php]
در این قسمت ابتدا به تمامی تگهای a خاصیتی داده ایم که با قرارگرفتن موس بروی تگ ، به شکل Pointer تغییر پیدا کند.

سپس کلاس link_select جهت تغییر تگ کلیک شده نسبت به سایر تگ های a را کدنویسی میکنیم. که اکنون فقط تغییر رنگ لحاظ شده است. شما میتوانید تغییرات بیشتری را لحاظ کنید(shadow و ...)

و اما یک مثال پایانی :
[php]<html>
<head>
<title>Tab</title>

<style>
a {text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-weight:bold; font-size:18px; margin:0 10px; color:#CC3399; text-shadow:0px 0px 10px #fff; cursor: pointer}
.link_select { color:#FFf;}
</style>

<script>
var CurrentStep = 1;
function SetCurrent(val)
{
if(CurrentStep!=val)
{
document.getElementById('divtab_' + CurrentStep).style.display = 'none';
document.getElementById('divtab_' + val).style.display = 'block';
document.getElementById('linktab_' + CurrentStep).className = '';
document.getElementById('linktab_'+val).className = 'link_select'
}
CurrentStep = val;
}
</script>

</head>
<body style="text-align:right; float:right; direction:rtl;">

<div style="background:#ccc;">
<a id="linktab_1" onClick="SetCurrent(1);" class="link_select">تب یک</a> |
<a id="linktab_2" onClick="SetCurrent(2);">تب دو</a> |
<a id="linktab_3" onClick="SetCurrent(3);">تب سه</a> |
<a id="linktab_4" onClick="SetCurrent(4);">تب چهار</a>
</div>

<div style=" width:350px; height:100px; border:1px dashed #ccc; padding:10px; color:#0099FF; font-family:tahoma; font-size:12px;">
<div id="divtab_1">/// تست تب یک ///</div>
<div id="divtab_2" style="display:none">||| تست تب دو |||</div>
<div id="divtab_3" style="display:none">\\\ تست تب سه \\\</div>
<div id="divtab_4" style="display:none">--- تست تب چهار ---</div>
</div>

</body>
</html>[/php]
مشاهده دمو آنلاین تب

موفق باشید. ارادتمند 3is@

[A3is]

اعتبار سنجی داده های ورودی در فرم های HTML

[align=center][/align]

با سلام. در این مبحث آموزشی با اعتبار سنجی داده های ورودی در فرم های Html توسط جاوا اسکریپت آشنا میشوید.

یکی از الزامات در طراحی فرم های html ، اعتبار سنجی ورودی ها میباشد تا کاربر اطلاعات را به درستی وارد کرده باشد.

برای اعتبار سنجی ورودها میتوان هم قبل از ارسال داده ها به سمت سرور بررسی شود و همچنین بعد از ارسال به سرور. ولی اگر قبل از ارسال اعتبار سنجی انجام شود ، میتواند به سرعت پردازش و... کمک کند.

نحوه ارتباط ورودها با جاوا اسکریپت
برای ارتباط با جاوا اسکریپت یا تابع(function) باید در یکی از رویداد های شی مورد نظر نام تابع را به صورت زیر تایپ نماییم:
[php]<input type="text" id="LastName" onChange="MyFuncName();" />[/php]

اکنون رویداد onChange را انتخاب کرده ایم ، وظیفه این رویداد این میباشد که با تغییر داده تابع ()MyFuncName را فراخوانی مینماید.

ولی اکنون به رویداد onBlur نیاز داریم. وظیفه این رویداد این میباشد که اگر فیلد مورد نظر با موس انتخاب شد و مقدار دهی گردید و یا با Tab به فیلد بعدی برویم ، تابع را فراخوانی میکند.

سپس توسط id برای input مورد نظر یک نام قرار میدهیم. مقدار id در کدنویسی جاوا اسکریپت مورد استفاده قرار میگیرد . پس در انتخاب آن دقت نمایید.

♦ محل قرار گیری استاندارد جاوا اسکریپت و تابع ها(Function) در بین تگ Head میباشد. ولی میتوان آن را نیز در Body قرار داد. مثال :
[php]<html>
<head>
<script>
function MyFuncName()
{
/// function Code ///
}
</script>
</head>
<body>
//// Body Code ////
</body>
</html>[/php]

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

1- ورودی دارای مقدار باشد. (فیلد مورد نظر مقدار دهی شده باشد. به عبارت دیگر خالی نباشد)
2- ورودی از نوع عدد باشد. (به عنوان مثال : شماره تماس)
3- ورودی ایمیل باشد.
که به هر سه مورد در ادامه پرداخته میشود.

♦ وضعیت یک : ورودی دارای مقدار باشد :
نحوه فراخوانی:
[php]نام : <input type="text" id="lastname" onBlur="textfunc();" />[/php]
در این قسمت input از نوع text با مقداردهی id به lastname خواهیم داشت که تابع textfunc را در رویداد onBlur فراخوانی میکند.
تابع برای بررسی مقدار ورودی:
[php]<script>
function textfunc(){
var L_S=document.getElementById('lastname').value;
if(L_S==null || L_S==""){
alert("لطفا نام و نام خانوادگی را تمکیل نمایید.");
}}
</script>[/php]
در این قسمت ، ابتدا متغیری به نام L_S تعریف و با داده ورودی فیلدی که id آن lastname میباشد مقداردهی شده است.
سپس توسط دستور شرطی If ، اگر متغیر L_S خالی از ورودی باشد ، پیغامی مبنی بر این مورد به کاربر نمایش می دهد.

♦ وضعیت دو : ورودی از نوع عددی باشد :
نحوه فراخوانی :
[php]شماره تماس : <input type="text" id="telephone" onBlur="numfunc();" />[/php]
در این قسمت نیز ، input از نوع text ایجاد و id ، رویدادی برای تابع قرار گرفته است.

تابع برای بررسی عددی بودن ورودی:
[php]<script>
function numfunc(){
var tell=document.getElementById('telephone').value;
var checknum=!isNaN(parseFloat(tell)) && isFinite(tell);
if(checknum==false){
alert("لطفا شماره تماس را به درستی وارد نمایید");
}}
</script>[/php]
در ابتدا متغیری به نام tell تعریف و با داده ورودی فیلدی که id آن telephone میباشد مقداردهی شده است.
سپس متغیر tell مورد پردازش قرار میگیرد و اگر نوع آن عددی نباشد ، پیغامی مبنی بر این مورد به کاربر نمایش میدهد.

♦ وضعیت سه : ورودی ایمیل باشد :
نحوه فراخوانی :
[php]ایمیل : <input type="text" id="your_email" onBlur="emailfunc();" />[/php]
input از نوع text ایجاد و id و رویداد تایع مورد نظر اضافه گردیده است.

تابع برای ایمیل بودن ورودی:
[php]<script>
function emailfunc(){
var email=document.getElementById('your_email').value;
var atpos=email.indexOf("@");
var dotpos=email.lastIndexOf(".");
if (atpos<2 || dotpos < atpos+3 || dotpos+2 >= email.length )
{
alert("لطفا ایمیل معتبری وارد نمایید");
}}
</script>[/php]
در ابتدا متغیری به نام email تعریف و با داده ورودی فیلدی که id آن your_email میباشد مقداردهی شده است.
سپس دو متغیر atpos و dotpos تعریف و مقدار دهی شده است . وظیفه این دو متغیر و دستور شرطی if ، بررسی وجود داشتن @ سپس بعد از آن . میباشد.
که اگر شرط برقرار نباشد ، پیامی مبنی بر عدم صحت ورودی به کاربر نمایش داده میشود.

مثال پایانی :
[php]<html>
<head>
<title>دمو اعتبارسنجی ورودی ها در html</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="fa">
<style>
body { font-family:tahoma; font-size:12px; text-align:right; float:right; background:#eee; direction:rtl; color:#0099FF}
input { text-align:left}
.ok{ border:1px solid #00CC33}
.error{ border:1px solid red;}
</style>
<script>
function textfunc(){
var lname=document.getElementById('lname').value;
if(lname==null || lname==""){
document.getElementById('lname').className = 'error';
}else{
document.getElementById('lname').className = 'ok';
}}
function numfunc(){
var tell=document.getElementById('tell').value;
var checknum=!isNaN(parseFloat(tell)) && isFinite(tell);
if(checknum==true){
document.getElementById('tell').className = 'ok';
}else{
document.getElementById('tell').className = 'error';
}}
function emailfunc(){
var x=document.getElementById('email').value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<2 || dotpos < atpos+3 || dotpos+2 >= x.length )
{
document.getElementById('email').className = 'error';
}else{
document.getElementById('email').className = 'ok';
}}
</script>
</head>
<body>
<div style="width:500px; border:1px dashed #ccc; padding:10px;">
<b>عضویت در سایت :</b>
<br><br>
<form action="" method="post">
نام : <input type="text" id="lname" onBlur="textfunc();" /><br>
شماره تماس : <input type="text" id="tell" onBlur="numfunc();" /> <br>
ایمیل : <input type="text" id="email" onBlur="emailfunc();" /><br><br>
<input type="submit" name="reg_sub" value="عضویت">
</form>
</div>
</body>
</html>[/php]
مشاهده دموی آنلاین "اعتبارسنجی ورودی ها در html"

در فایل دمو بجای استفاده از alert برای نمایش نتیجه ، از تغییر رنگ کادر input استفاده شده است که میتوانید از طریق کد بالا متوجه تغییرات شوید.

ارادتمند. 3is@

[A3is]

آشنایی با خاصیت جا به جایی (Drag & Drop) در html5

[align=center][/align]

با سلام. در این مبحث ، با آموزش خاصیت جا به جایی عناصر در html5 در خدمت شما خواهیم بود.

یکی از قابلیت های جالب در html5 جابجایی عناصر صفحات وب میباشد که این امکان را به کاربر میدهد شیء را از قسمتی به قسمت دیگر منتقل نماید.

پشتیبانی مرورگرها از این خاصیت:
[align=center][/align]

مرورگرهای مختلفی از این المنت یا عنصر پشتیبانی می کنند مثل:اینترنت اکسپلورر ۹,فایر فاکس,کروم,اپرا ۱۲ و سافاری ۵ .
توجه داشته باشید که عنصر Drag and drop در مرورگر سافاری نسخه ۵٫۱٫۲ پشتیبانی نمی شود.

مرحله اول : اضافه کردن قابلیت جابجایی به شی یا عنصر مورد نظر
برای اینکه بتوانیم یک شی یا عنصر را دارای خاصیت جابجایی کنیم باید به آن خاصیت draggable با مقدار true دهیم. مثال:
[php]<html>
<body>

<img src="a110.jpg" draggable="true"/>

</body>
</html>[/php]

در این مثال از تگ img استفاده شده است. اما میتوان از خاصیت برای سایر تگها نیز استفاده کرد مثل: p , div و ...

♦ سپس بعد از افزودن خاصیت draggable ، نوبت به اضافه کردن رویداد ondragstart به شی مورد نظر میباشد.
این رویداد تعیین می کند چه عنصری می خواهد drag شود . این رویداد زمانی اتفاق می افتد که شما دکمه موس را بر روی عنصر کلیک کرده و سعی می کنید آن را بکشید .

مثالی از اضافه شدن رویداد ondragstart به شیء و مکان قرارگیری تابع drag :
[php]<html>
<head>

<script>
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
</script>

</head>
<body>

<img src="a110.jpg" draggable="true" ondragstart="drag(event)"/>

</body>
</html>
[/php]

♦ در آخرین قسمت از مرحله اول ، به شیء مورد نظر یک id با مقدار دلخواه اضافه میکنیم. مثال :
(اضافه کردن id به شیء ضروری میباشد. در غیر این صورت عمل جابجایی انجام نخواهد شد)

[php]<img id="img1" src="a110.jpg" draggable="true" ondragstart="drag(event) "/>[/php]

مرحله دوم : مکان قرارگیری شیء یا عنصر جابجا شونده
در این مرحله مکان قرارگیری شیء یا عنصری که قرار است جابجا شود را ایجاد و مشخص مینماییم. برای این کار ابتدا یک Div ایجاد و به آن id با مقدار دلخواه میدهیم. مثال:
[php] <div id="div1"></div>[/php]
♦ در قسمت بعد به div مورد نظر دو رویداد ondrop و ondragover با مقادیر زیر نسبت میدهیم:
[php]<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>[/php]
♦ اکنون باید دو تابع جاوا اسکریپت drop و allowDrop را در تگ <script> بین تگ <head> قرار دهیم. بدین صورت:
[php]<html>
<head>

<script>
function allowDrop(ev){
ev.preventDefault();
}

function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data ));
}
</script>

</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>

</body>
</html>[/php]
اکنون کار به اتمام رسیده است و اگر عکس را با موس بگیرید و به داخل Div مورد نظر بکشید ، مکان قرارگیری عکس جابجا میشود. فقط برای div مورد نظر طول و عرض و یک border قرار دهید تا متوجه جابجایی شوید.

اما مثال پایانی :
[php]<html>
<head>
<style>
#div1 { border:1px solid red; width:150px; height:150px;}
</style>
<script>
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}

function allowDrop(ev){
ev.preventDefault();
}

function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data ));
}

</script>

</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<img id="img1" src="a110.jpg" draggable="true" ondragstart="drag(event) "/>

</body>
</html>[/php]

دموی آنلاین Drag & Drop در Html5

ارادتمند. 3is@

[black-sec]

آموزش HTML

نام کتاب : آموزش HTML

تعداد صفحه : 101

نویسنده : حمید ریاضی

لینک دانلود : DOWNLOAD

موفق باشید .

[black-sec]

101 نکته و ترفند برای استفاده از CSS در طراحی وب

در این پست برای شما کتاب آموزشی 101 نکته و ترفند برای استفاده از CSS در طراحی وب قرار دادم

نام کتاب : 101 نکته و ترفند برای استفاده از CSS در طراحی وب

تعداد صفحه : 48

لینک دانلود : Download

موفق باشید.[img]images/smilies/Smileys/8.gif[/img]

[black-sec]

RE: بانک مقالات و آموزش های html / css

 نام کتاب : آموزش HTML 5

تعداد صفحه : 61

لینک دانلود : Download

موفق باشید.