PDA

توجه ! این یک نسخه آرشیو شده میباشد و در این حالت شما عکسی را مشاهده نمیکنید برای مشاهده کامل متن و عکسها بر روی لینک مقابل کلیک کنید : آموزش کامل html 5


hostime
July 8th, 2012, 16:04
سلام دوستان در این موضوع قصد دارم که با توجه به روش آموزشی وب سایت w3schools زبان برنامه نویسی html 5 رو بهتون آموزش بدم.سعی میکنم سریع تموم کنم به خاطر همین روزی 7 8 تا پست ارسال میکنم. امیدوارم بتونم خوب آموزش بدم.یه سری هم به هاستینگمون بزنین لطفا:->:
hostime.ir
سعی میکنم زیاد دقیق وارد نشم که مشکلی پیش نیاد همه ساده بفهمن که چی میگم.
به زودی آموزش CSS3 رو هم آغاز میکنم...
hostime
July 8th, 2012, 16:32
<DOCTYPE html!>:
در اول هر صفحه html قرار میگیرد و به ما و مرورگر و ...... می فهماند که این صفحه از کدهای html 5 تشکیل شده.
به یاد داشته باشین کوچک یا بزرگ بودن حروف فرقی ندارد یعنی:
<DOCTYPE html!>
=
<doctype html!>
hostime
July 8th, 2012, 16:46
کامنت<!-- -->:
کامنت به نوشته های در کد html میگن که در زمان اجرا کد نمایش داده نمیشن و شما اونارو گذاشتین برای یاد آوری مثلا یه کامنت بالای کد تصویرتون قرار میدین و درش می نویسین که بعد از این کامنت کد تصویر هست و در آخر کد تصویرتون یه کامنت باز میکنین و می نویسین کد نمایش تصویر تموم شد!!
البته معمولا برای بخش هایی مثل هدر ، ناویگیشن و ... به کار میره که به زودی بهتون میگم.البته اگه بچه باهوشی هستین و لازم به کامنت ندارین اصلا لازم نیست که از کامنت استفاده کنین.
قرار دادن کامنت در html:


<!doctype html>
<html>
hostime
<!--
it is a comment
-->
</html>


برای امتحان کد نوشته شده از آدرس زیر استفاده کنین:
http://w3schools.com/html5/tryit.asp?filename=tryhtml5_video_bear
یادتون باشه هرگز کدهای html رو از تو مطلبام کپی نکنین و برای امتحان کد خودتون اون رو بنویسین!
hostime
July 8th, 2012, 19:32
<html>:
ما برنامه نویس ها به نوشته هایی که شروع و پایان مشخصی دارن و نوشته های دیگه ای رو که درون خودشون دارن رو با توجه به خودشون تغیر میدن میگیم "تگ"
یعنی تگی هست که مثلا مشخص میکنه نوشته چه رنگی باشه یا چه سایزی باشه یا.....
<html> هم یکی از این تگ هاست که شروع و پایانش همه کد رو در بر میگیره.
javadhejazifar
July 9th, 2012, 16:39
سلام
خیلی خوب بود ممنون.
hostime
July 9th, 2012, 20:01
<a>:
این تگ مشخص کنند آدرس هست.
یعنی شما اگه رو نوشته زیر کلیک کنین وارد سایت ما میشین:
هاستایم (http://hostime.ir)
خوب حالا چه جوری استفاده کنم:


<!DOCTYPE html><html><body>

<a href=http://hostime.ir target=blank>
Hostime
</a>

<body/><html/>




<body>:
این تگ یعنی تگ بدنه هست(مکان متن لینک جدول ها و....) که بعد مکان اصلیشو بهتر درک میکنین.(در مثال ها)
دیدین که بعد از "href=" من آدرس رو نوشتم.شما هم همین کارو میکنین.
پس "target" اینجا چیکاره بود؟
خوب این همون چیزیه که مشخص میکنه صفحه ای ما در کجا باز بشه(همین صفحه ، صفحه جدید و...)
که در تاپیک بعدی دربارش توضیح میدم.
این تگ رو امتحان کنین:
Tryit Editor v1.5 (http://w3schools.com/html5/tryit.asp?filename=tryhtml5_a)
یادتون باشه کپی نکنین و خودتون بنویسین!
hostime
July 9th, 2012, 20:36
target در <a> و روش قرار گیری تگ ها:
انواع target در html 5:
1-_blank
3-_self


1-در صفحه جدید باز بشه
2-در همون صفحه باز میشه
این دو تا مهمترش بودن که بهتون گفتم
خوب حالا ترتیب قرار گرفتن تگ ها و بسته شدنشون چه جوریه؟




<body>

<html>

hostime

</body>

Hostime2

</html>



خوب همون طور که می دونین طرز قرار گیری تگ ها در بالا کاملا غلته!
چون اول تگ html رو باز گردیم و دوباره اون رو اول بستیم!
اگه تگی رو اول باز میکنیم باید آخر ببندیم و اگه آخر باز میکنیم باید اول ببندیم!
پس یعنی اگه بخوایم کد های بالا رو درست کنیم:




<html>

<body>

hostime

</body>

Hostime2

</html>




لطفا به نوشته های زیر توجه نکنین;)


<body>
<script type="text/javascript"><!--
var _gaq = _gaq || [];
_gaq.push(
['_setAccount', 'UA-10241535-3'],
['_trackPageview']
);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//-->
</script>

<script type="text/javascript"><!--
var _gaq = _gaq || [];
_gaq.push(
['_setAccount', 'UA-10241535-3'],
['_trackPageview']
);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
//-->
</script>
hostime
July 16th, 2012, 19:25
<abbr>:
شاید وقتی موس رو روی یه نوشته ای میبرین میبینین کنار موس یه نوشته ای زاهر میشه
با این تگ می تونین همین کارو بکنین.
روش استفاده در آدرس زیر:
Tryit Editor v1.5 (http://w3schools.com/html5/tryit.asp?filename=tryhtml5_abbr)



<!DOCTYPE html><html><body>
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
</body></html>
hostime
July 16th, 2012, 19:32
<br>:
به وسیله ی این تگ می تونین خط بعدی رو مشخص کنین.
یعنی وقتی دارین html مینویسی اگه میخواین به خط بعدی برین شاید در زمان نوشتن کد با اینتر به خط بعدی برین ولی در زمان اجرا اینتور نیست:


<!DOCTYPE html><html><body>
hello my friend <br />
how are you?

</body></html>
hostime
July 16th, 2012, 19:35
همونطور که توجه کردین در بالا ما یک تگ نوشتیم و شروع و پایانش فقط در خودش بود.
اونایی که HTML کار کردن شاید بگن غلطه و من اشتباه نوشتم و درستش اینه:


<br> </br>


شاید نوشته بالا در HTML 4.1 درست باشه ولی در HTML 5 نوشته بالا درست نیست و این درسته:



<br />
hostime
July 16th, 2012, 19:43
<p>:
این تگ برای پاراگراف بندی هست.
همونطور که یادتونه <br> برای خط بود خوب این هم برای پاراگراف بندی هست که در کنار <br> استفاده میشه
فک نکنم بیشتر نیازی به توضیح داشته باشه.
hostime
July 16th, 2012, 19:49
<img>:
این تگ زیاد استفاده میشه مثل <a> و تگه مهمیه برای نمایش تصویر در صفحه.
این تگ هم مثل <br /> شروع و پایانش در خودش هست:


<img src="http://up.vatandownload.com/images/yxz3n6dgnwi015mz9cys.png" />


مثال دیگر:
Tryit Editor v1.5 (http://w3schools.com/html5/tryit.asp?filename=tryhtml5_img)
hostime
July 16th, 2012, 20:27
<b>:
این تگ باعث میشه که نوشته شما بزرگ بشه:
big
فک نکنم به توضیح بیشتری نیاز داشته باشه