آموزش HTML5 ( مقدماتی )

با عرض سلام خدمت تمامی دوستان امروز با آموزش HTML5 در خدمتتون هستم . در قدم اول یک معرفی کلی از طراحی سایت می کنیم و ساز کار رو توضیح میدیم و بعد به صورت قدم به قدم HTML5 رو توضیح میدم . در این آموزش ما HTML,HTML5 رو با هم درس میدیم ولی چون HTML5 کاملتر از HTML هست ما در لفظ فقط میگیم HTML5 و اینکه خصوصیات کاربردی آموزش داده میشه خصوصیاتی که همه سایتها ازش استفاده می کنن نه همه ی دستورات .

خوب در قدم اول باید بگم که ما در دنیای طراحی وب سایت کلأ دو نوع وب سایت داریم :

۱ – ایستا         ۲ – پویا

ایستا یا استاتیک یا STATIC همونجوری که از اسمش هم مشخصه صفحات ثابت هستند که فقط جنبه نمایش اطلاعات دارن حتی ثبت نام هم نمیشه در این سایت ها انجام داد چون این سایت ها فقط از HTML5 استفاده می کنن مثل سایت شرکت ها .

پویا یاDINAMIC اینا سایت ها هستند که فعالا قابلیت بروز رسانی دارم میشه داخلش ثبت نام کرد میشه مثل سایت ها خبری هروز یا هر موقع که میخواستید داخلش مطلب بذارید یا مثل فروشگاه های آنلاین که با کاربر تو تعامل هستن مثلا کاربر تو سایت فروشگاهی یه جنس رو انتخاب می کنه تعداد و رنگ مورد نظر رو انتخاب می کنه بعد انلاین پول رو واریز میکنه به این سایت ها که از کاربر یه داده مثل همون رنگ و تعداد جنس رو می گیرن ، پردازشش میکنن .

خوب حالا رسیدم قدم دوم ، سایت ها از سه قسمت استفاده می کنن :

قسمت اول : HTML5 هست که با اون ساختار ، قسمت بندی و شاکله سایت رو درست می کنن ، فقط نکته مهم اینه که HTML5 زبان برنامه نویسی نیست فقط در وحله ول سایت چه استاتیک چه داینانیک ساختار و قسمت بندی سایت رو درست می کنن حتی تو سایت های داینامیک هم اول با HTML5 ساختار سایت درست میشه بعد با کد های زبان های برنامه نویسی فعال و پویا میشن .

قسمت دوم : که از CSS و JQUERY و JAVASCRIPT استفاده میشه برای رنگ بندی و ظاهر سایت و یه سری افکت استفاده میشه این نکته رو هم بگم که با JAVASCRIPTC و JQUERY خیلی کارای پیشرفته رو هم میشه کرد مخصوصا با جاوا اسکریپت که در مواقعی برنامه نویسی هم می کنن .

قسمت سوم : که از زبان های برنامه نویسی مثل PHP , C# , JAVA , ….. استفاده میشه ، با استفاده از این دستورات سایت هایی که ایستا هستند و با HTML5 درست شدند رو به سایت های دانینامیک و فعال تبدیل می کنن و مثل سایت های فروشگاهی و خبری .

در کل اگه یه مثال کلی بخوام بزنم ، اگه یه ساختمان رو در نظر بگیرید اسکلت بندی ساختمان و مصالح به کار برده شده در ساختمان رو به HTML5 تشبیه می کنیم ، رنگ ساختمان نمای داخالی و خارجی ساختمان و دکوراسیون رو میشه به CSS3 و پیشرفته تر از اون مثلا تو یه ساختمان آب نما داره استخر سونا داره اینا رو با جاوا اسکریپت و جیکوئری درست میشن و بعد از اینا تاسیسات برقی ، گازی ، سرمایشی گرمایشی و از از این قبیل امکانات که با کار بر در تعامل هست مثلا شیر آب رو باز و بسته کنی یا برق رو خاموش روشن کنی میشه برنامه نویسی و دستورات PHP , C# , JAVA و … استفاده می شه .

 

خوب حالا دیگه میرسیم به آموزش HTML5 :

وقتی که شما یک صفحه ای HTML5 رو توی نوت پد ، دریم ویور ، ویژال استدیو یا هر ویرایشگری باز می کنید ، تو اون صفه سه تا تگ اصلی ((TAG) دستورات HTML5 رو میگن تگ ) وجود داره که اولین تگی که شما میبینید <DOCTYPE> هست که نشون میده این صفحه از امکانات HTML5 استفاده میشه بعدش هم تگ <HTML> با ز میشه و در آخر تمامی دستورات برنامه نویسی و تگ ها HTML5 تگ </HTML> بسته میشه ، دقت کنید که تمامی دستورات اصلی بین این دو تا تگ <HTML> و </HTML> قرار میگیرن ، یه دقت دیگه هم بکنین ، اینکه اکثر تگ ها HTML5 یک با باز میشن مثل <TAGNAME> و یه بار دیگه با این فرق که بعد از علامت بزرگتر یک / هم می ذاریم به معنای این که این تگ بسته شده مثل </TAGNAME> فقط چند تا محدود هستند که نیازی به تگ بسته شدن ندارن .

یه نکته هائز اهمیت هم هست شاید براتون سوال بشه که ما میگیم که HTML5 ولی تو تگ ها می نویسیم HTML خوب اینجا باید بگم که چون در اول صفحه ما از تگ <DOCTYPE> استفاده می کنیم دیگه لازم نیست در صفحه HTML5 نوشته بشه .

بعد از اینکه ما تگ <DOCTYPE> رو نوشتیم و بعدش هم <HTML> رو نوشتیم میرسیم به یه تگ خیلی مهم که مشخصات سایت توش نوشته میشه اسم صفحه نوشته میشه و در زمینه سئو هم خیلی کاربردیه تگ HEAD که با تگ <head> باز میشه و با تگ </head> بسته میشه ، همینجور هم که از اسمش پیداست یعنی سر ، اسن تگ برای سر صفحه سایت استفاده میشه که داخل اون تگ title هست که اسم صفحه سایت یا شرکت داخل نوشته میشه و به این شکل <title>sitename</title> نوشته میشه ، داخل تگ head همونطور که اشاره شد در زمینه سئو کاربرد زیادی دارده که با استفاده از یک سری متا تگ ها <meta></meta> داخل این دو تا تگ متا نوشته میشن ؛ کلمات کلیدی سایت شما هستن که در جستو جوی بهتر سایت شما از گوگل خیلی کمک می کنه .

بعد از این تگ ها شما می تونید صفحات css3 , javascript رو به صفحه لینک کنید ، مثلا با استفاده از تگ زیر یک صفحه جاوااسکریپت یا جیکوئری به صفحه اچ تی ام ال ما وصل میشه:

<script src=”………………………”   type=”text/javascript”   language=”javascript”>

</script> شما فقط کافیه بجای نقطه چین ها آدرس صفحه ایی که جاوا اسکریپتتون رو نوشتید بذارید تا صفحتون لینک بشه . این روش رو اکسترنال می گن یعنی از خارج وصل شده مثل هارد اکسترنال که با یوس اس بی وصل میشه

شما میتونید اگه نخواید دستورای جاوا اسکریپت یا جیکوئری رو در یه صفحه جداگونه بنویسید میتونید از روش inline یعنی داخل خط استفاده کنید به این روش که شما تگ <script type=”text/javascript” language=”javascript”> رو اول می نویسید بعد درستورات جاوا اسکریپت یا جیکوئری رو می نویسید بعد با تگ پایانی </script> می بندید به همین راحتی.

برای لینک کردن صفحات css3 با استفاده از تگ :

<link href=”………………………….”   Rel=”stylesheet” type=”text/css”> هست که به جای نقطه چین آدرس صفحه css3 تون رو می نویسید تا به سایتتون لینک بشه .

دستورات css3 رو هم میتونید inline بنویسید ، با این تفاوت که دیگه تو این روش از تگ link استفاده نمیشه به جاش از تگ <style> استفاده میشه به این روش :

<style rel=”stylesheet” type=”text/css”> رو اول می نویسیم بعدش دستورای css3 می نویسیم و بعدش با تگ </style> می بندیم . این نکته رو بگم من زمانیکه می گم دستورای css3 منظورم این نیست که دیگه از css استفاده نمیشه کرد بلکه برعکس میشه استفاده کرد به خاط این می گم که css3 کامل تره دیگه کلی میگم css3.

لیست دیدگاه‌ها

  • amir ۲۹ / ۱۲ / ۱۳۹۳ پاسخ

    سلام من همون امیراندرویدکده هستم خیلی ممنون از این اموزش لطفا اگه امکانش هست اینارم به صورت ویدیویی منتشر کنید

پاسخ دهید