آموزی زبان HTML با شیوه Encoding

[okhpatoos]

ساختن لینک پست الکترونیک، قسمت اول

---

برای ایجاد یک لینک که بیننده با آن بتواند به شما ایمیل بفرستد باید ز تگ استاندارد لینک استفاده کنیم. اما تفاوت این لینک با لینک به یک صفحه در آدرسی است که به عنوان مقصد لینک نوشته می شود. برای اینکه مرورگر را مجبور کنیم لینک را به عنوان یک لینک ایمیل بشناسد، باید از این عبارت :mailto به جای //:http در آغاز آدرس استفاده کنیم و بعد از آن آدرس ایمیل را بنویسیم. به یک مثال توجه کنید:
<a href="mailto:[email protected]">متن لینک</a>
لینکی که در صفحه مشاهده خواهید کرد به صورت زیر است که برای فرستادن ایمیل به آدرس [email protected] ساخته شده است.

تنها کاری که شما باید انجام دهید جایگزین کردن [email protected] با آدرس ایمیل خودتان است.
اگر روی این نوع لینک کلیک کنید مرورگر شما پنجره ای تازه برای ارسال ایمیل باز می کند که آدرس در یافت کننده در آن تایپ شده است.
شما میتوانید همچنین یک موضوع هم برای ایمیل در لینک قرار دهید تا بیننده مجبور نباشد چیزی غیر از متن اصلی بنویسد.
این کار ار می توانید با افزودن علامت سوال به انتهای آدرس ایمیل و نوشتن =subject بعد از آن انجام دهید. مانند زیر:
<a href="mailto:[email protected]?subject=this is the subject">متن لینک</a>
با کلیک کردن بر روی این لینک صفحه ای برای فرستادن ایمیل باز می شود که قسمت آدرس(to) و قسمت موضوع (subject) در آن کامل شده است و آماده ارسال است.

 

[okhpatoos]

معرفی فرم در html و شناسه های مهم آن

---

اگر در صفحه بخواهیم از بازدید کننده اطلاعاتی را دریافت کنیم باید از فرم برای این کار استفاده کنیم. فرم برای انتقال اطلاعاتی که توسط کاربر وارد شده اند به یک آدرس مشخص استفاده می شود. هر فرم می تواند شامل اجزایی مانند کادر ورودی متن (Text Field)، جعبه مربوط به ورود متن (Text Area)، دکمه های رادیویی (Radio Button)، منوهای کشویی، چک باکس و ... باشد.
در بخشهای بعدی به توضیح اجزایی که می توانند در یک فرم به کار روند خواهیم پرداخت. در این قسمت به تگ
<form> و شناسه هایی که در آن به کار می روند می پردازیم. شکل کلی این تگ معمولاً به صورت زیر است :
<form action="formProcessor.php" method="get" name="formName" target="_blank">
.................اجزای مورد استفاده برای فرم .................
</form>
از میان شناسه های مورد استفاده در فرم استفاده از شناسه action ضروری است. این شناسه مشخص کننده صفحه ای است که اطلاعات فرم باید به آن ارسال شود. آدرس صفحه مورد نظر باید به عنوان مقدار این شناسه قرار گیرد. لازم به یادآوری است که پس از اینکه کاربر اطلاعات مورد نظر را وارد کرد و دکمه ارسال را کلیک کرد صفحه action برای پردازش اطلاعات باز خواهد شد.
البته استفاده از شناسه method هم اهمیت زیادی دارد ولی در صورتی که از این شناسه استفاده نشود از مقدار پیش فرض آن یعنی get استفاده می شود.
در اینجا لیستی از شناسه های پر استفاده در تگ فرم آورده شده است :

• action :
  همانطور که گفته شد از این شناسه برای مشخص کردن صفحه پردازش کننده اطلاعات ورودی کاربر استفاده می شود.
• method :
  این شناسه طریقه ارسال اطلاعات را به فایل action مشخص می کند و شامل دو مقدار زیر است:
  • get : در این روش اطلاعات از طریق آدرس صفحه (نوار آدرس) ارسال می شوند. به این صورت که اطلاعات وارد شده در فرم پس از یک علامت سؤال بعد از آدرس صفحه action قرار می گیرند و ارسال می شوند. از این روش نمی توان برای اطلاعات طولانی یا کاراکترهای غیر ASCII استفاده کرد. همچنین بهتر است برای اطلاعات مهم از قبیل نام کاربری و کلمه عبور هم از این روش استفاده نشود. چون در این صورت این اطلاعات در نوار آدرس مرورگر نمایش داده می شوند.
  • post : این روش برای ارسال اطلاعات از آدرس صفحه استفاده نمی کند. مزیت این روش نسبت به روش قیل امنیت بیشتر به دلیل عدم نمایش اطلاعات ارسالی به کاربر و همچنین امکان ارسال اطلاعات طولانی تر است.
• name :
  از این شناسه برای تعریف کردن یک نام منحصر به فرد برای فرم استفاده می شود.
• target :
  این شناسه روش باز شدن صفحه پردازشگر اطلاعات را مشخص میکند. می توان برای مقدار این شناسه از نام یک فریم برای باز شدن صفحه action در آن فریم استفاده کرد یا از مقادیر از پیش تعریف شده زیر:
  • blank_ : صفحه action در یک پنجره جدید باز خواهد شد.
  • self_ : صفحه action در فریمی که فرم در آن قرار دارد باز خواهد شد.
  • parent_ : صفحه action در frameset محتوی فرم باز خواهد شد.
  • top_ : صفحه action در تما پنجره باز خواهد شد.

علاوه بر شناسه های بالا که فقط مربوط به فرم هستند از شناسه های استاندارد زیر نیز می توان در تگ فرم استفاده کرد:
id, class, title, style, dir, lang, xml:lang
رویدادهای زیر هم در تگ فرم قابل استفاده هستند.
onsubmit, onreset, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

 

[okhpatoos]

ساختن لینک پست الکترونیک، قسمت دوم

---

در بخش اخیر ما در مورد اینکه چگونه یک Subject را برای پیام خود از طریق یک لینک E-mail مشخص کنیم بحث کردیم. ما این کار را با استفاده از این عبارت
=subject? و نوشتن موضوعی که می خواهیم در بخش subject در ایمیل نوشته شود بعد از عبارت مذکور انجام می دهیم. برای مثال لینک زیر برای ارسال پیام با موضوع Learn HTML به کار می رود:
<a href="mailto:[email protected]?subject=learn html">متن لینک</a>
به جز اضافه کردن موضوع شما می توانید چیزهای دیگری را هم اضافه کنید.
برای مثال شما میتوانید یک رونوشت (Carbon Copy) از پیام را به همراه آن برای کس دیگری بفرستید. یا یک نسخه مخفی را برای دیگری بفرستید. یا هر دوی اینها را به کار ببرید و باهم ترکیب کنید و...
برای فرستادن یک رونوشت از ایمیل باید بعد از علامت سوال از فرمان =cc استفاده کرده و بعد آدرس ایمیل کسانی که قرار است رونوشت را دریافت کنند بنویسید. در سطر زیر یک نمونه از این نوع لینک آورده شده است:
<a href="mailto:[email protected]?cc=corboncopy@ex ample.com">متن لینک</a>
برای فرستادن یک نسخه مخفی از ایمیل نیز مانند بالا عمل می کنیم فقط به جای cc در فرمان بالا از bcc استفاده می کنیم. مانند زیر:
<a href="mailto:[email protected]?bcc=corboncopy@e xample.com">متن لینک</a>
اگر خواستید یک ایمیل را به چند نفر بفرستید باید بین آدرسهای مختلف از کاما استفاده کنید. مانند زیر:
<a href="mailto:[email protected][email protected] om, [email protected]">متن لینک</a>
اگر می خواهید بیش از یکی از این فرمانها را در یک لینک استفاده کنید باید برای فرمان اول از علامت سوال استفاده کنید و برای فرمانهای بعد از علامت & استفاده می شود (در انتهای فرمان اول). برای مثال اگر می خواهید با یک لینک هم موضوع پیام را مشخص کنید هم یک رونوشت از آن برای فرد دیگری فرستاده شود باید به اینگونه عمل کنید:
<a href="mailto:[email protected]?subject=learn html&[email protected]">متن لینک</a>

 

[okhpatoos]

وقتی که شما یک صفحه HTML می نویسید می توانید چیزهای زیادی را در آن با اضافه کردن شناسه هایی به تگ <BODY> تغییر داد. تگ زیر را در نظر بگیرید:
<body bgcolor="green" text="blue" link="yellow" alink="red" vlink="white" background="image.gif">
شما می توانید به هر تعداد از این شناسه ها که خواستید به این تگ اضافه کنید. اگر از شناسه ای استفاده نکنید این گزینه مطابق پیش فرض مرورگر تنظیم می شود. در زیر توضیحی برای هر کدام از شناسه های تگ BODY آورده شده است. البته در مورد هر کدام از آنها به طور کامل در درسهای بعد توضیح خواهیم داد:
"bgcolor="color

این شناسه رنگ زمینه صفحه شما را تغییر می دهد. شما می توانید آنرا به هر رنگی که دوست دارید تغییر دهید. فقط به جای « رنگ » در فرمان بالا اسم رنگی را که می خواهید یا معادل هگزا دسیمال آنرا قرار دهید. برای دیدن لیست رنگها به صورت هگزا دسیمال به سر فصل این بحث بروید. گزینه پیش فرض این ویژگی معمولاً سفید یا خاکستری است.
"text="color

این شناسه رنگ متنی را که در پنجره مرورگر به نمایش در می آید تعیین می کند. شما می توانید آنرا به هر رنگی که دوست دارید تغییر دهید. فقط به جای « رنگ » در فرمان بالا اسم رنگی را که می خواهید یا معادل هگزا دسیمال آنرا قرار دهید.گزینه پیش فرض این ویژگی مشکی است.
"link="color

این شناسه رنگ تمام لینکهای باز نشده در صفحه را تغییر می دهد. شما می توانید آنرا به هر رنگی که دوست دارید تغییر دهید. فقط به جای « رنگ » در فرمان بالا اسم رنگی را که می خواهید یا معادل هگزا دسیمال آنرا قرار دهید. گزینه پیش فرض برای لینکهای باز نشده معمولاً آبی است.
"alink="color

این شناسه رنگ لینکهای فعال را در صفحه شما تعیین می کند. این لینکها آنهایی هستند که به وسیله کاربر بر روی آنها کلیک شده است. شما می توانید آنرا به هر رنگی که دوست دارید تغییر دهید. فقط به جای « رنگ » در فرمان بالا اسم رنگی را که می خواهید یا معادل هگزا دسیمال آنرا قرار دهید.
"vlink="color

این شناسه رنگ لینکهای باز شده را در صفحه تعیین می کند. شما می توانید آنرا به هر رنگی که دوست دارید تغییر دهید. فقط به جای « رنگ » در فرمان بالا اسم رنگی را که می خواهید یا معادل هگزا دسیمال آنرا قرار دهید. گزینه پیش فرض این ویژگی بنفش است.
"background="image.gif

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

 

[AzarΚharid]

اگه عیبی نداره منم چندتا از آموزش هایی که دارم رو اینجا میذارم

 

[AzarΚharid]

یک فایل HTML چیست؟
HTML مخفف زبان نشانه گذاری فرا متنی است (hyper text markup language)
یک فایل HTML یک فایل متنی حاوی برچسب های کوچک نشانه گذاریست
بر چسب های نشانه گذاری به مرورگرهای وب بیان می کنند که صفحه را چگونه نشان دهد
یک فایل HTML باید دارای پسوند html. یا html. باشد
یک فایل HTML می تواند توسط یک ویرایشگر متنی ساده ساخته شود

 

[AzarΚharid]

اگر در حال کار با ویندوز هستید برنامه note pad را اجرا کنید. متن زیر را تایپ کنید.

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

فایل را تحت عنوان "mypage.htm"ذخیره کنید.
مرورگر اینترنت خود را باز کنید، از منوی فایل گزینه "open" یا "open page" را انتخاب کنید. یک جعبه گفتگو ظاهر خواهد شد .گزینه "brows" یا "choose file" را انتخاب کنید و در مکانی که فایل HTML خود را ساخته اید قرار گیرید. آن را انتخاب کنید و روی گزینه "open" کلیک کنید.حالا شما یک آدرس در جعبه گفتگوی خود مشاهده خواهید کرد. بعنوان مثال "C:\mypage.html" گزینه ok را کلیک کنید و مرورگر صفحه را به شما نشان خواهد داد.

 

[AzarΚharid]

اولین برچسب در فایل HTML شما ، <html> است.این برچسب به مرورگر شما می فهماند که این آغاز یک فایل HTML است، آخرین برچسب در فایل شما <html/> است.این برچسب به فایل شما می فهماند که این انتهای یک فایل HTML است.
متن های بین برچسب و اطلاعات سرانداز (header)شماست .اطلاعات سر انداز در پنجره مرورگر نشان داده نخواهد شد. متن بین برچسب <title>، سرتیتر پرونده شماست. سرتیتر در قسمت عنوان صفحه مرورگر نشان داده خواهد شد.
متنی که در مرورگر نشان داده خواهد شد ، متنی است که بین برچسب <body> نشان داده خواهد شد.
متنی که بین برچسب <b> قرار گیرد در مرورگر بصورت برجسته نشان داده خواهد شد.

 

[AzarΚharid]

هنگامی که شما یک فایل HTML را ذخیره می کنید شما می توانید هرکدام از پسوندهای htm. یا html. را انتخاب کنید.ما در مثال هایمان از پسوند htm. استفاده می کنیم. این ممکن است یک رفتار بد موروثی از گذشته باشد که بیشتر نرم افزارهایی که استفاده می شوند فقط پسوند سه حرفی را قبول می کنند.با نرم افزار جدیدتر ما فکر می کنیم که اگر از پسوند html. استفاده کنیم بسیار ایمن تر خواهیم بود.

 

[AzarΚharid]

شما می توانید به سادگی با استفاده از یک ویرایشگر WYSIWY("what you see is what you get") فایل های HTML را ویرایش کنید ، مثل FRONT PAGE,Claris Home Page یا Adob PageMill.
اگر شما می خواهید یک توسعه دهنده وب توانا باشید ما توصیه اکید می کنیم که شما از یک ویرایشگر متنی ساده استفاده کنید تا اصول اولیه HTML را یاد بگیرید.

 

[AzarΚharid]

س: پس از اینکه فایل HTML را ویرایش می کنم نمی توانم نتیجه را در مرورگر مشاهده کنم. چرا؟
ج:اطمینان حاصل کنید که فایل را با یک نام و پسوند صحیح ذخیره کرده اید مثل"C:\mypage.htm". همچنین اطمینان حاصل کنید که از همان نام هنگام باز کردن فایل در مرورگر استفاده کرده اید.
س:من سعی کردم فایل HTMLام را ویرایش کنم. اما تغییرات در مرورگرم نشان داده نشد. چرا؟
ج:مرورگر صفحه را کاشه(cach) کرده بنا بر این یک صفحه را دو بار نمی خواند. هنگامی که شما یک صفحه را تغییر می دهید مرورگر آن را نمی داند. از کلید REFRESH/RELOAD مرورگر استفاده کنید تا آن را مجبور کنید صفحه را دوباره بخواند.
س:از چه مرورگری باید استفاده کنیم؟
ج:شما می توانید تمام این آموخته ها را با مرورگرهای متعارف انجام دهید مثل Internet Explorer, Netscape,Mozilla و Opera. هر چند که تعدادی از مثال های مادر کلاس های پیشرفته به آخرین نسخه مرورگرها نیاز دارند.

 

[okhpatoos]

	متاتگ ها راهی برای شناساندن وب سایت شما به جهان خارج است . عنوان تگ هایی که برای صفحات سایت خود تعریف میکنید موتور های جستجوگر را در شناختن مطالب داخل سایت شما یاری میکند . دو نوع اصلی متاتگ وجود دارد : این متاتگ باعث میشود که اطلاعات اضافی ای همراه صفحه وب درخواستی شما در http header به مرورگر ارسال شود . مثلا میتوانید تاریخ انقضای اطلاعات را تعیین کنید یا میتوانید صفحه وب را با یک متا تگ خاص پس از چند ثانیه به صفحه دیگری بفرستید بدون دخالت کاربر ! HTTP-EQUIV این نوع از متاتگ برای تعیین اطلاعات داخل صفحه وب استفاده میشود که باعث میشود صفحه وب شما با راحتی بیشتری برای موتورهای جستجوگر شناخته شود ... مثلا زبان این صفحه ، نام طراح ، کلمات کلیدی این صفحه و ... NAME متاتگ ها کجای صفحه وب نوشته میشوند ؟ متاتگ ها را باید داخل تگ head نوشت . در صفحه هایی که از چند فریم درست شده باید در تمام صفحات متاتگ را نوشت. به مثال های زیر دقت کنید : content در متاتگ کارش معرفی مقداری هست که متاتگ با یکی از دو صفت name و HTTP-EQUIV در خود دارد . مثال : NAME="keywords" CONTENT=" persian macromediax dreamweaver"> تگ بالا را یه نگاه کنید . از نوع name است . مقدار name مساوی با keywords است . یعنی این متاتگ کارش شناساندن کلمات کلیدی سایت به موتور های جستجوگر است ... اگر میخواهید موتور های جستجو مانند گوگل سایت شما را بهتر بشناسند این تگ را به قالب سایت یا وبلاگ خود بیفزایید و در جلوی content کلمات کلیدی سایت خود را بنویسید . مثال : NAME="description" CONTENT=" persian web design center"> تگ بالا کارش افزودن توضیحات سایت شما به موتور های جستجوگر است . اگر این تگ را به وب سایت یا وبلاگ خود اضافه کنید از ماه آینده اگر کسی بصورت تصادفی در گوگل به سایت شما بر بخورد توضیحات داخل این متا تگ را بجای توضیحات میبیند . یعنی گوگل دقیقا از این متاتگ برای ذخیره اطلاعات درباره سایت شما استفاده میکند . پس بکاربردن این متا تگ ها خیلی مهمه ! مثال :<META HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT"> تگ بالا تاریخ انقضای این صفحه وب را تعیین میکند . یعنی اگر کسی این صفحه وب را یکبار دیده باشد وقتی این زمان فرا برسد و او دوباره آدرس این سایت را در مرورگرش بزند این صفحه از داخل cache لود نمیشود بلکه از سرور دانلود میشود . منابع : htmlhelp.com و html-reference.com

 

[okhpatoos]

امروز 2 تا از تگ های HTML5 رو معرفی میکنیم : تگ <video> برای قرار دادن مستقیم فایل های ویدیو در صفحه HTML و تگ <Audio> برای قرار دادن فایل صوتی.Audioفعلا فقط 3 فرمت Ogg ، MP3 و Wav رو میشه استفاده کرد:​

​

مثال:​

<audio src="song.ogg"></audio>

خاصیت ها:
autoplay که از اسمش معلومه خودش شروع به اجرا میکنه
controls دکمه play/pause و تایم و volume رو به شکل زیر نمایش میده:​

​

loop برای تکرار شدن آهنگ
preload اگه خاصیت autoplay رو فعال نکرده باشیم، preload بعد از لودصفحه ، فایل صوتی رو به طور کامل لود میکنه که آماده پخش بشه.
src که همون آدرس فایله (*ضروری)​

تگ audio میتونه مثل تگ های noframe و noscript عمل کنه. یعنی هرچیزی که بین تگ باشه ، وقتی نشون داده میشه کهمرورگر از این تگ پشتیبانی نمیکنه
​

<audio src="song.ogg" controls="controls" loop="loop"> Your browser does not support the audio element : ( <a href="download-link.ogg">but you can download this audio!</a> </audio>

 

[okhpatoos]

Videoبا این ویژگی ، فایل های ویدیویی به طور مستقیم درصفحه قرار میگیرن و برای نمایش به Flash Player و Silverlight و Quicktime نیازی نیست!
ویدیو ها با یه تگ ساده قابل نمایش میشن:​

<video src="movie.ogg" controls="controls"> </video>

فقط 2 فرمت MP4 و OGG فعلا پشتیبنی میشن:​

​

8) طبق تحقیقات اخیر من:
فایرفاکس 3.5 به بعد از تگ ویدیو پشتیبانی میکنه.
اینترنت اکسپلورر 6 و 7 و 8 … (بهتره چیزی نگم!) فقط ورژن 9 (منتشر نشده هنوز) از فرمت mp4 قراره پشتیبانی کنه
اینترنت اکسپلورر9 و سافاری 5 از فرمت هایOgg/Theora/Vorbis پشتیبانی نمیکنن.
اپرا 10،6 و فایرفاکس 3،6 از فرمت های MPEG-4/H-264/AAC پشتیبانی نمیکنن.
نسخه بعدی مرورگر های chrome و firefox یعنی کروم 7 و فایرفاکس 4 از فرمت جدید WebM/VP8 هم پشتیبانی میکنن.مثال:​

<video src="movie.ogg" width="320" height="240" controls="controls">Your browser does not support the video tag. </video>

خاصیت ها هم مثل همون تگمشکل اینجاست که مرورگر های قدیمی از این تگ ها پشتیبانی نمیکنن

و برای حل این مشکل می تونیم فایل های صوتی و تصویری رو برای این مرورگر ها به روش قدیمی قرار بدیم:​

<audio src="song.ogg" controls="controls" loop="loop"> We can place a JavaScript audio here! </audio>

و​

<video src="movie.ogg" width="320" height="240" controls="controls"> We can place a flash embedded video here! </video>

​

 

[okhpatoos]

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

Canvas ؛ یکی از امکانات فوق العاده HTML5 ـه که میتونه به طورمستقیم گرافیک رو درصفحه ایجاد کنه
​

نمونه های استفاده از Canvas رو میتونید در این سایت ببینیدتگ Canvas وضعیت نسبتا مناسبیدر بین مرورگرها داره و در همه مرورگرهای مدرن و IE9+ ساپورت میشه.
این تگ یه محیط مستطیل شکل ، مثل یک بوم نقاشی ایجاد میکنه و شما میتونید بر روی هر پیکسل از این بوم ، گرافیک ایجاد کنید.برای ایجاد یک کانواس، از تگ canvas که یکی از تگ های HTML5 هست استفاده میکنیم:​

<canvas id="canvas1" width="400" height="200"></canvas>

همونطور که گفتم ، برای ایجاد گرافیک از جاوا اسکریپت استفاده میکنیم.​

 

[okhpatoos]

کشیدن مستطیل با استفاده از Canvas

میخوایم یه مستطیل بنفش بکشیم؛ کدهای زیر رو در یک تگ Script (یا فایل js) قرار میدیم:​

var c=document.getElementById("canvas1");var mostatil=c.getContext("2d");mostatil.fillStyle="#dd00ff"; mostatil.fillRect(0,0,200,100);

تو کد بالا، در خط دوم ، id المنت کانواس (که در کد قبل، canvas1 نامگذاری کرده بودیم) رو مشخص کردیم (و در متغییر c قراردادیم)در خط سوم متغییر mostatil رو ایجاد کردیم و نوعش رو 2d یا دوبعدی مشخص کردیم (که برای قرار دادن اشکال هندسی ، متن ، عکس و… استفاده میشه.)خط 4 رنگ مستطیل رو بنفش تنظیم میکنیم.و در خط پنجم هم موقعیت طول و عرض مستطیل رو مشخص میکنیم؛ اعداد به پیکسل و به ترتیب زیر هستن:1.فاصله نقطه شروع نسبت به سمت چپ کانواس
2.فاصله شروع نسبت به بالای کانواس
3.فاصله عمودی نقطه پایان نسبت به نقطه شروع
4.فاصله افقی نسبت به نقطه شروع​

​

همونطور که متوجه شدید، اسکریپت برای کشیدن اشکال از یه مکان نما استفاده میکنه. برای کشیدن مستطیل بنفش، مکان نما از نقطه 0,0 شروع کرد به کشیدن مستطیل و در نقطه 200, 100 کار کشیدن رو تموم کرد.​

 

[okhpatoos]

کشیدن خط با استفاده از Canvas

برای کشیدن خط ، کافیه مثل همون مستطیل ، اول نوعش رومشخص کنیم و بعد مختصات رو تنظیم کنیم:​

var khat=c.getContext("2d"); khat.lineTo(20,50); khat.lineTo(230,120);khat.stroke();

یعنی آبجکت khat از مختصات 20 و 50 شروع کنه به کشیدن و در مختصات 230 و 120 توقف کنه.
خط آخر هم مشخص میکنه که khat توپر باشه (قابل دیدن باشه!)​

​

برای نمایش تصویر در Canvas ، از کد زیر استفاده میکنیم:​

var ax=c.getContext("2d"); var img=new Image(); img.src="YourImageURL";ax.drawImage(img,0,0);

خط اول که نوع آبجکت رو مشخص میکنه
خط دوم آبجکت رو با نام img ایجاد میکنه.
خط سوم آدرس عکس رو مشخص میکنه و خط آخر هم آبجکت ax در مختصات مشخص شده در کانواس نمایش میدهحتی میتونید با تغییر خط آخر کد، سایز عکس رو تغییر بدید:​

ax.drawImage(img,0,0,400,300);

اینجوری طول عکس به 400 پیکسل و عرضش به 300 پیکسل تغییر میکنه​

 

[okhpatoos]

کشیدن دایره با استفاده از Canvas

​

var mycircle=c.getContext("2d"); mycircle.fillStyle="#FF0000";mycircle.beginPath(); mycircle.arc(50,50,15,0,Math.PI*2,true);mycircle.closePath(); mycircle.fill();

خط اول نوع آبجکت رو مشخص میکنه و خط دوم رنگ دایره رو
برای کشیدندایره به یه path احتیاج داریم.خط سوم path رو آغاز میکنه
در خط چهارم با استفاده از تابع arc دایره رو برای مختصات 50 , 50 د رکانواس تنظیم میکنه. قطرش رو 15 پیکسل در نظر میگیره.
تابع arc کارش ایجاد کمانه. برای اینکه کمان ما 360 درجه باشه و یه دایره کامل تشکیل بده، از دو عدد 0 و Math.PI*2 برای ایجاد کمان کامل استفاده میکنیم.
Math.PI*2 بر حسب رادیان، کمان رو یه دور کامل میچرخونه. پس اگه این دو مقدار رو تغییر بدیم میتونیم دایره های ناقص (کمان) ایجاد کنیم.
مقدار true کمان رو ساعتگرد ایجاد میکنه. اگه false بذاریم میشه غیر ساعتگرد. (البته برای دایره کامل تفاوتی نداره که کمان ساعتگرد کشیده شده باشه یا غیر ساعتگرد)خط پنجم path که در خط سوم برای کشیدن دایره شروع کرده بودیم رو میبنده و خط آخر هم آبجکت Circle مون که این بلاها رو سرش آوردیم ، در کانواس نمایش میده ​

 

[okhpatoos]

نوشتن متن در Canvas


​

var mytxt = c.getContext('2d'); mytxt.font ="13px Courier";mytxt.fillText("pasargad-graphic.com",100,100);

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

 

[okhpatoos]

[h=2]برای HTML5 آماده شوید![/h]

​

حتما اسم HTML5 به گوشتون خورده که قراره تغییرات زیادی تو وب ایجاد کنه و کلی ابزار و امکانات جالب و خفن داره!
تعریف HTML5 به نقل از ویکی پدیا: HTML5 به عنوان نسخه جدید زبان نشانه گذاری ابرمتن برای ایجاد صفحات وب گسترش داده شدهاست. اولین بار در ژوئن 2004 بحث برای ایجاد نسخه جدیدی از زبان نشانه گذاری HTML آغاز شد و در فوریه 2010 نسخه های تقریبا نهایی ، از این استانداردها ایجاد شدند.خوب! حالا این نسخه جدید چه چیز هایی داره؟
برای آشنایی با قدرت HTML5 می تونید به سایت html5rocksکه در اینجا درموردش گفته بودیم ، یه نگاهی بندازید.
اگه مرورگر سافاری 5 یا گوگل کروم 6 روی سیستمتون دارین، به صفحه HTML5 در سایت اپلبرید تا قابلیت های HTML5 که در موتور Webkit پشتیبانی میشن رو ببینید.
+ میتونید نمونه های استفاده از HTML5 رو در سایت html5demosببینید

HTML5 قرارنیست جای HTML4 رو بگیره، همونطورکه XHTML1 به طور کامل جای HTML4 رو نگرفت.
در واقع یه طراح وب این اختیاررو داره که از نسخه HTML دلخواهش استفاده کنه ​