آموزش کامل 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...ml5_video_bear
یادتون باشه هرگز کدهای html رو از تو مطلبام کپی نکنین و برای امتحان کد خودتون اون رو بنویسین!

**hostime** · July 8th, 2012, 19:32

<html>:
ما برنامه نویس ها به نوشته هایی که شروع و پایان مشخصی دارن و نوشته های دیگه ای رو که درون خودشون دارن رو با توجه به خودشون تغیر میدن میگیم "تگ"
یعنی تگی هست که مثلا مشخص میکنه نوشته چه رنگی باشه یا چه سایزی باشه یا.....
<html> هم یکی از این تگ هاست که شروع و پایانش همه کد رو در بر میگیره.

**javadhejazifar** · July 9th, 2012, 16:39

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

**hostime** · July 9th, 2012, 20:01

<a>:
این تگ مشخص کنند آدرس هست.
یعنی شما اگه رو نوشته زیر کلیک کنین وارد سایت ما میشین:
هاستایم
خوب حالا چه جوری استفاده کنم:

کد HTML:

<!DOCTYPE html><html><body>

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

<body/><html/>

<body>:
این تگ یعنی تگ بدنه هست(مکان متن لینک جدول ها و....) که بعد مکان اصلیشو بهتر درک میکنین.(در مثال ها)
دیدین که بعد از "href=" من آدرس رو نوشتم.شما هم همین کارو میکنین.
پس "target" اینجا چیکاره بود؟
خوب این همون چیزیه که مشخص میکنه صفحه ای ما در کجا باز بشه(همین صفحه ، صفحه جدید و...)
که در تاپیک بعدی دربارش توضیح میدم.
این تگ رو امتحان کنین:
Tryit Editor v1.5
یادتون باشه کپی نکنین و خودتون بنویسین!

**hostime** · July 9th, 2012, 20:36

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>

**hostime** · July 16th, 2012, 19:25

<abbr>:
شاید وقتی موس رو روی یه نوشته ای میبرین میبینین کنار موس یه نوشته ای زاهر میشه
با این تگ می تونین همین کارو بکنین.
روش استفاده در آدرس زیر:

Tryit Editor v1.5

کد HTML:

<!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 مینویسی اگه میخواین به خط بعدی برین شاید در زمان نوشتن کد با اینتر به خط بعدی برین ولی در زمان اجرا اینتور نیست:

کد HTML:

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

</body></html>

**hostime** · July 16th, 2012, 19:35

همونطور که توجه کردین در بالا ما یک تگ نوشتیم و شروع و پایانش فقط در خودش بود.
اونایی که HTML کار کردن شاید بگن غلطه و من اشتباه نوشتم و درستش اینه:

کد HTML:

<br> </br>

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

کد HTML:

<br />

موضوع: آموزش کامل html 5

ابزارهای موضوع

نحوه نمایش موضوع

آموزش کامل html 5

تعداد تشکر ها از hostime به دلیل پست مفید

پاسخ : آموزش کامل html 5

تعداد تشکر ها ازhostime به دلیل پست مفید

پاسخ : آموزش کامل html 5

تعداد تشکر ها از hostime به دلیل پست مفید

پاسخ : آموزش کامل html 5

تعداد تشکر ها از hostime به دلیل پست مفید

پاسخ : آموزش کامل html 5

پاسخ : آموزش کامل html 5

پاسخ : آموزش کامل html 5

پاسخ : آموزش کامل html 5

پاسخ : آموزش کامل html 5

پاسخ : آموزش کامل html 5

اطلاعات موضوع

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

موضوعات مشابه

کتاب آموزش html

فیلم آموزشی تبدیل psd به html با سورس آموزشی(7بخش)_فارسی_کاملا رایگان

بهترین منبع آموزشی html

[آموزش html]جلسه پنجم : پاراگراف ها

[آموزش html]جلسه سوم : خواص html

مجوز های ارسال و ویرایش