اموزش HTML 5
- پنجشنبه, ۵ آذر ۱۳۹۴، ۰۸:۰۱ ب.ظ
با سلام خدمت دوستان گلم
پانیشر هستم و با توجه به قولی که بهتون داده بودم میخوام اموزش HTML 5رو براتون قرار بدم به صورت جلسه ای و سعی میکنم ظرف 5 جلسه تمومش کنم
امیدوارم موفق و سربلند باشید
با عرض سلام خدمت دوستان گرامی با اولین جلسه HTML5 در خدمت شما هستم .
در ابتدا باید بگم که HTML5 پیشرفت های بسیار چشمگیری داشته در نسخه جدید و کم کم علاوه بر قابلیت مارک آپ (Markup) بودن داره سعی میکنه تو کار های دیگه هم سرک بکشه
با نام و یاد اولین برنامه نویس دنیا شروع میکنیم :)
در این مجموعه آموزش کمی در مورد تغییرات مارک آپی HTML 5 و بعد به بررسی قابلیت ها خواهیم پرداخت
اولین چیزی که در HTML5 تغییر کرده تگ مشخص سازی DOCTYPE هست
زمانی قدیمیای وب مجبور بودن با بد بختی تمام یه چیزی مثل این رو حفظ کنن :
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
که واقعا غیر ممکن بود پس برای همین تصمیم گرفتن که doctype رو کوتاه کرده و به :
<!DOCTYPE html>
تغییرش بدنیک مورد مهم ای رو هم اشاره کنم اینه که دیگه خبری از uppercase ها و lowercase ها نیست و بنابر این :
<!doctype html> = <!DOCTYPE HTML> = <!Doctype Html> = ......
همچنین دیگه در HTML 5 در تگ های سینگل (یک طرفه مانند: img) نیازی به / نیست و بنابراین:
<img />
از نظر w3c غلط حسوب میشه (این فقط در صورتی هست که شما از <!DOCTYPE HTML> استفاده کرده باشید اگه از xhtml یا ورژن های قدیمی تر استفاده کرده باشید میتونید به همون روش های قبل از HTML 5 پیش برید
حداقل یک سند HTML به نسخه جدید به شرح زیر هست :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
و همچنین به خدمت دوستان بگم که این عناصر دیگه در HTML5 ساپورت نمیشوند و یا از جایگزین هایش باید استفاده کنید یا از CSS باید استفاده کنید :
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>
خب اولین عنصری که در HTML 5 شکوفا شده و کلی هم سرو صدا کرده canvas هست که به منظور طراحی گرافیک های جالب استفاده میشود (خیلی از گیم های جالب وب بر اساس CANVAS طراحی میشوند [حتی گیم های سه بعدی هم با canvas میشود ساخت]
دقت کنید که برای کار با canvas بایستی حداقل آشتایی ای با javascript داشته باشید که در همین جا براتون در کلاس های بعدی اموزش میدم
اینترنت اکسپلورر 9، فایرفاکس، اپرا، کروم، و سافاری از عنصر canvas پشتیبانی می کنند ولی مرورگر اینترنت اکسپلورر 8 و نسخه های قبلی، عنصر canvasرا پشتیبانی نمی کنند.
حالا بیایید اولین بوم خودمون رو بسازیم :
<canvas id="ilikephp" width="200" height="100"></canvas>
ما به این بوم یک آیدی به نام ilikephp و با استفاده از دو خصیصه width و height یک ابعادی برای این بوم تعیین کردیم
حالا بیایید با جاوااسکریپت یک مستطیل روی شکل مون رسم کنیم
<script>
var c=document.getElementById("ilikephp");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
در این کد اول عنصری با آیدی ilikephp که همون بوم ما هست رو مشخص کردیم
بعد مشخص کردیم که میخواییم از اون بوم به صورت دو بعدی استفاده بکنیم و به جای x,y,z فقط از x,y استفاده میکنیم
بعد یک رنگی رو برای مستطیلمون انتخاب کردیم
حالا برای کشیدن مستطیل از تابع fillRect() استفاده میکنیم دو پارامتر اول مختصات رو تعیین میکنن(دقت داشته باشید در canvas ما از مختصات برای کشیدن استفاده میکنیم ینی نقطه 0,0 در بالا سمت چپ هست و نقطه ی 200,0 به آخرین نقطه ی بوم از طول اشاره میکنه)
دو پارامتر بعدی طول و عرض مستطیل رو تعیین میکنن که 150 در 75 هستش
پس میشه :
fillRect(x,y,width,height)
برای کشیدن خط روی بوم این کار رو انجام میدهیم
var c=document.getElementById("ilikephp");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
دقت داشته باشید که moveTo مبدا و lineTo مقصد رو مشخص میکند (به همون روش x,y )
عملا اون stroke() هست که خط مورد نظرمون رو میکشه برای ما و moveTo و lineTo فقط جهت مشخص کردن مبدا و مقصد بودن
برای کشیدن دایره از
var c=document.getElementById("ilikephp");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
استفاده میکنیم
arc(x,y,r,start,stop,raduis)
برای رسم دایره، ما باید از یکی از روش های "ink" ، مانند () stroke و یا fill() استفاده کنیم.
stroke برای خط دایره
fill برای پر کردن دایره
برای رسم متن بر روی بوم، مهم ترین خاصیت و روش ها که باید بدونید این ها هستند:
font - خصوصیات فونت را برای متن تعریف می کند
(fillText(text,x,y - یک متن پر شده را بر روی بوم می کشد
(strokeText(text,x,y - یک متن تو خالی را بر روی بوم می کشد
به طور مثال برای ایجاد یک متن 30 پیکسلی تو پر با استفاده از فونت"Arial" بر روی بوم :
var c=document.getElementById("ilikephp");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Karen",10,50);
حالا برای ایجاد یک متن 30 پیکسلی تو خالی با استفاده از فونت"Arial" بر روی بوم باید:
var c=document.getElementById("ilikephp");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Karen",10,50);
در هردوی این دو مورد یعنی strokeText و fillText در پارامتر بعد از خوده متن مختصات متن هستند
برای ایجاد یک تصویر روی canvas هم میتونید از این تایع استفاده کنید :
(drawImage(image,x,y
var c=document.getElementById("ilikephp");
var ctx=c.getContext("2d");
var img=document.getElementById("my image to be loaded");
ctx.drawImage(img,10,10);
به عنوان تکلیف :دی بگردید چجوری توی canvas گرادینت یا gradient یا همون شیب رنگ میسازند (سایه روشن مثلا)
در درس های بعدی بیشتر به موارد دیگه ای در HTML 5 خواهیم پرداخت
دیگه HTML 5 خالی جواب نمیده و به صورت جالبی از سایر زبان ها استفاده میکنه
امیدوارم از این بخش از اموزش Html5 خوشتان اومده باشه
در جلسه بعدی سایر چیز های جدید HTML5 رو با هم بررسی خواهیم کرد
