نمایش نسخه قابل چاپ
سلام دوستان در این موضوع قصد دارم که با توجه به روش آموزشی وب سایت w3schools زبان برنامه نویسی html 5 رو بهتون آموزش بدم.سعی میکنم سریع تموم کنم به خاطر همین روزی 7 8 تا پست ارسال میکنم. امیدوارم بتونم خوب آموزش بدم.یه سری هم به هاستینگمون بزنین لطفا:->:
hostime.ir
سعی میکنم زیاد دقیق وارد نشم که مشکلی پیش نیاد همه ساده بفهمن که چی میگم.
به زودی آموزش CSS3 رو هم آغاز میکنم...
<DOCTYPE html!>:
در اول هر صفحه html قرار میگیرد و به ما و مرورگر و ...... می فهماند که این صفحه از کدهای html 5 تشکیل شده.
به یاد داشته باشین کوچک یا بزرگ بودن حروف فرقی ندارد یعنی:
<DOCTYPE html!>
=
<doctype html!>
کامنت<!-- -->:
کامنت به نوشته های در کد html میگن که در زمان اجرا کد نمایش داده نمیشن و شما اونارو گذاشتین برای یاد آوری مثلا یه کامنت بالای کد تصویرتون قرار میدین و درش می نویسین که بعد از این کامنت کد تصویر هست و در آخر کد تصویرتون یه کامنت باز میکنین و می نویسین کد نمایش تصویر تموم شد!!
البته معمولا برای بخش هایی مثل هدر ، ناویگیشن و ... به کار میره که به زودی بهتون میگم.البته اگه بچه باهوشی هستین و لازم به کامنت ندارین اصلا لازم نیست که از کامنت استفاده کنین.
قرار دادن کامنت در html:کد:<!doctype html>
<html>
hostime
<!--
it is a comment
-->
</html>
برای امتحان کد نوشته شده از آدرس زیر استفاده کنین:
http://w3schools.com/html5/tryit.asp...ml5_video_bear
یادتون باشه هرگز کدهای html رو از تو مطلبام کپی نکنین و برای امتحان کد خودتون اون رو بنویسین!
<html>:
ما برنامه نویس ها به نوشته هایی که شروع و پایان مشخصی دارن و نوشته های دیگه ای رو که درون خودشون دارن رو با توجه به خودشون تغیر میدن میگیم "تگ"
یعنی تگی هست که مثلا مشخص میکنه نوشته چه رنگی باشه یا چه سایزی باشه یا.....
<html> هم یکی از این تگ هاست که شروع و پایانش همه کد رو در بر میگیره.
سلام
خیلی خوب بود ممنون.
<a>:
این تگ مشخص کنند آدرس هست.
یعنی شما اگه رو نوشته زیر کلیک کنین وارد سایت ما میشین:
هاستایم
خوب حالا چه جوری استفاده کنم:کد HTML:<!DOCTYPE html><html><body>
<a href=http://hostime.ir target=blank>
Hostime
</a>
<body/><html/>
<body>:
این تگ یعنی تگ بدنه هست(مکان متن لینک جدول ها و....) که بعد مکان اصلیشو بهتر درک میکنین.(در مثال ها)
دیدین که بعد از "href=" من آدرس رو نوشتم.شما هم همین کارو میکنین.
پس "target" اینجا چیکاره بود؟
خوب این همون چیزیه که مشخص میکنه صفحه ای ما در کجا باز بشه(همین صفحه ، صفحه جدید و...)
که در تاپیک بعدی دربارش توضیح میدم.
این تگ رو امتحان کنین:
Tryit Editor v1.5
یادتون باشه کپی نکنین و خودتون بنویسین!
target در <a> و روش قرار گیری تگ ها:
انواع target در html 5:1-_blank
3-_self
1-در صفحه جدید باز بشه
2-در همون صفحه باز میشه
این دو تا مهمترش بودن که بهتون گفتم
خوب حالا ترتیب قرار گرفتن تگ ها و بسته شدنشون چه جوریه؟
کد HTML:<body>
<html>
hostime
</body>
Hostime2
</html>
خوب همون طور که می دونین طرز قرار گیری تگ ها در بالا کاملا غلته!
چون اول تگ html رو باز گردیم و دوباره اون رو اول بستیم!
اگه تگی رو اول باز میکنیم باید آخر ببندیم و اگه آخر باز میکنیم باید اول ببندیم!
پس یعنی اگه بخوایم کد های بالا رو درست کنیم:
کد HTML:<html>
<body>
hostime
</body>
Hostime2
</html>
لطفا به نوشته های زیر توجه نکنین;)
کد 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>
<abbr>:
شاید وقتی موس رو روی یه نوشته ای میبرین میبینین کنار موس یه نوشته ای زاهر میشه
با این تگ می تونین همین کارو بکنین.
روش استفاده در آدرس زیر:کد HTML:<!DOCTYPE html><html><body>
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
</body></html>
<br>:
به وسیله ی این تگ می تونین خط بعدی رو مشخص کنین.
یعنی وقتی دارین html مینویسی اگه میخواین به خط بعدی برین شاید در زمان نوشتن کد با اینتر به خط بعدی برین ولی در زمان اجرا اینتور نیست:کد HTML:<!DOCTYPE html><html><body>
hello my friend <br />
how are you?
</body></html>
همونطور که توجه کردین در بالا ما یک تگ نوشتیم و شروع و پایانش فقط در خودش بود.
اونایی که HTML کار کردن شاید بگن غلطه و من اشتباه نوشتم و درستش اینه:کد HTML:<br> </br>
شاید نوشته بالا در HTML 4.1 درست باشه ولی در HTML 5 نوشته بالا درست نیست و این درسته:کد HTML:<br />
<p>:
این تگ برای پاراگراف بندی هست.
همونطور که یادتونه <br> برای خط بود خوب این هم برای پاراگراف بندی هست که در کنار <br> استفاده میشه
فک نکنم بیشتر نیازی به توضیح داشته باشه.
<img>:
این تگ زیاد استفاده میشه مثل <a> و تگه مهمیه برای نمایش تصویر در صفحه.
این تگ هم مثل <br /> شروع و پایانش در خودش هست:کد HTML:<img src="http://up.vatandownload.com/images/yxz3n6dgnwi015mz9cys.png" />
مثال دیگر:
Tryit Editor v1.5
<b>:
این تگ باعث میشه که نوشته شما بزرگ بشه:
big
فک نکنم به توضیح بیشتری نیاز داشته باشه