+- انجمن انیاک (http://forum.learninweb.com)
+-- انجمن: آموزش های تصویری (/forumdisplay.php?fid=7)
+--- انجمن: آموزش طراحی صفحات وب (/forumdisplay.php?fid=16)
+--- موضوع: آموزش HTML5 - قسمت اول (/showthread.php?tid=1049)
آموزش HTML5 - قسمت اول - learninweb - 05-31-2015 10:40 PM
با سلام خدمت تمامي کاربران گرامي در زير آموزش تصويري HTML5 را بررسي ميکنيم توجه کنيد که شما ميتوانيد نرم افزار آموزش HTML5 را به همراه چند بخش آموزشي ديگر که بصورت تعاملي و شبيه سازي شده با صدا و متن فارسي درس داده شده است و رايگان نيز ميباشد از لينک آموزش HTML5دانلود کنيد. در نرم افزارهاي آموزشي کارهاي بيان شده را بايد در محيط شبيه سازي شده انجام دهيد. در ابتدا و انتهاي اين آموزش تصويري نيز کل آموزش (هم متن و هم تصويري) در فايل PDF و Word موجود است.
دانلود فايل pdf آموزش تصويري HTML5
دانلود فايل word آموزش تصويري HTML5
به نرم‌افزار آموزش HTML5 محصول شرکت انياک خوش‌آمديد. در اين نرم‌افزار آموزشي شما را با نسخه جديد HTML يعني HTML5 آشنا ميکنيم. HTML5 در واقع ترکيبي ازHTML، JavaScript و CSS3 ميباشد که استفاده از آن به مفهوم سرعت بهتر، هماهنگي بيشتر، رابط کاربري بهتر، کد کمتر و کار بيشتر (Less Code, More Work) و امنيت است. روي دکمه صفحه بعد کليک کنيد.
همانطور که مي‌دانيد براي نوشتن دستورات HTML ميتوانيد از برنامه‌هاي مختلف واژه پرداز استفاده کنيد در اين نرم افزارآموزشي ما از برنامه Notepad استفاده ميکنيم. براي اجراي برنامه Notepad، روي دکمه Start کليک کنيد.
روي گزينه All Programs کليک کنيد.
روي گزينه Accessoriesکليک کنيد.
از منوي باز شده روي گزينه Notepad کليک کنيد.
![[تصویر: 001.gif]](http://forum.learninweb.com/pics/html5-1/001.gif)
همانطور که مشاهده ميکنيد برنامه Notepad اجرا شده است. قبل از اين که شروع به ساخت يک صفحه HTML کنيم بايد با يک سري از قوانين که براي ساخت يک صفحه HTML لازم است آشنا بشويم. اولين قانون اين است که هميشه تگ‌هاي HTML را داخل < > قرار مي‌دهيم. دومين قانون اين است که بعضي از تگها بعد از باز شدن لازم است که بسته شود. در ادامه به سراغ آموزش تگ‌هاي HTML مي‌رويم.
در اولين خط بايد اعلام کنيم که مي‌خواهيم کدهاي HTML5 وارد کنيم. براي اين کار عبارت <!DOCTYPE html> را وارد کرده‌ايم.
اولين تگي که مي‌خواهيم به شما معرفي کنيم، تگ <HTML> است. براي آغاز کردن ساخت يک صفحه HTML از تگ <HTML> استفاده مي‌شود. اکنون دستور <HTML> را تايپ کنيد.
شما ميتوانيد تمامي تگ‌هاي مورد نظر خود را پشت سر هم بنويسيد ولي براي اين که تگ‌هاي وارد شده داراي نظم باشند و قابل درک که مشخص شود چه تگ‌هايي وارد شده است. از کليد Enter استفاده ميکنيم تا به خط پايين برويم. اکنون کليد Enter صفحه کليد را فشار دهيد.
![[تصویر: 002.gif]](http://forum.learninweb.com/pics/html5-1/002.gif)
دومين تگي که مي‌خواهيم به شما معرفي کنيم، تگ <head> ميباشد. داخل تگ <head> اطلاعاتي نوشته مي‌شود که در صفحه نمايش داده نمي‌شود و براي نمايش بهتر صفحه در اين قسمت نوشته مي‌شود. در ادامه با تگ <head> بيشتر آشنا خواهيد شد. حالا دستور <head> را تايپ کنيد.
دکمه Enter صفحه کليد را فشار دهيد.
![[تصویر: 003.gif]](http://forum.learninweb.com/pics/html5-1/003.gif)
براي آنکه تيتر صفحه HTML را تعيين کنيم. از تگ <title> استفاده کنيم. براي اين کار دستور <title> را وارد کنيد.
در اين قسمت بايد عبارت مورد نظر را که مي‌خواهيم در قسمت Title bar مرورگر اينترنت نمايش داده شود، را وارد کنيم. عبارت ENIAC را تايپ نماييد.
در اين مرحله بايد پايان تگ title را اعلام کنيم (تک title را ببنديم). براي بستن تگ مورد نظر، از علامت / قبل از عبارت title استفاده ميکنيم و دستور </title> را وارد ميکنيم. حالا دستور </title> را وارد کنيد.
دکمه Enter صفحه کليد را فشار دهيد.
![[تصویر: 004.gif]](http://forum.learninweb.com/pics/html5-1/004.gif)
در اين قسمت بايد تگ <head> را که قبلاً باز کرده بوديم، ببنديم. براي اين کار همانند تگ title عمل ميکنيم. در ادامه دستور </head> را وارد ميکنيم.
براي اينکه در صفحه اصلي بخواهيم متني را نمايش دهيم از تگ <Body> که به معني بدنه ميباشد، استفاده ميکنيم. اکنون دستور <Body> را تايپ نماييد.
در ادامه متني که مي‌خواهيم در صفحه وب نمايش داده شود، را وارد ميکنيم.
همانطور که مشاهده ميکنيد متن را وارد کرده‌ايم. اکنون مي‌خواهيم اين صفحه HTML را به پايان برسانيم. براي اين کار بايد تمامي تگ‌هايي را که در طول ساخت اين صفحه باز کرده‌ايم را بترتيب ببنديم. پس در ابتدا براساس اولويت بايد تگ Body و سپس تگ HTML بسته شود. دستور </Body> را وارد کنيد.
براي اين که به خط پايين برويم دکمه Enter صفحه کليد را فشار دهيد.
![[تصویر: 005.gif]](http://forum.learninweb.com/pics/html5-1/005.gif)
دستور </html> را وارد کنيد.
همانطور که مشاهده ميکنيد ساخت يک صفحه HTML ساده به پايان رسيد است. در اين مرحله بايد به سراغ ذخيره کردن، صفحه برويم. براي ذخيره کردن اين صفحه روي منوي File کليک نماييد.
![[تصویر: 006.gif]](http://forum.learninweb.com/pics/html5-1/006.gif)
از منوي باز شده روي گزينه Save As.. کليک نماييد.
![[تصویر: 007.gif]](http://forum.learninweb.com/pics/html5-1/007.gif)
مشاهده ميکنيد که يک پنجره براي ذخيره کردن صفحه به نمايش در آمده است. ما مي‌خواهيم اين صفحه را در داخل يک پوشه جديد با نام ENIAC ذخيره کنيم. براي ساخت پوشه جديد روي دکمه New folder کليک کنيد.
براي نامگذاري اين پوشه عبارت ENIAC را تايپ کنيد.
![[تصویر: 008.gif]](http://forum.learninweb.com/pics/html5-1/008.gif)
دکمه Enter صفحه کليد را فشار دهيد.
روي پوشه ENIAC دابل کليک کنيد تا وارد آن بشويم.
![[تصویر: 009.gif]](http://forum.learninweb.com/pics/html5-1/009.gif)
حال بايد نام اين صفحه را در قسمت Name وارد کنيم.
براي اين که صفحه ساخته شده به صورت يک صفحه اينترنتي شناخته شود، پسوند فايل را از فرمت متن (.txt) به
فرمت (.htm) بايد تغيير بدهيم. عبارت .htm را وارد کنيد.
براي اين که نوشته‌هاي فارسي قابل شناسايي باشند در صفحه اينترنتي ما بهتر است در قسمت Encoding گزينه UTF-8 را انتخاب نماييم. روي منوي باز شونده که با کادر مشخص شده است کليک نماييد.
روي گزينه UTF-8 کليک کنيد.
![[تصویر: 010.gif]](http://forum.learninweb.com/pics/html5-1/010.gif)
در اين مرحله روي گزينه Save کليک کنيد تا صفحه HTML مورد نظر ذخيره شود.
![[تصویر: 011.gif]](http://forum.learninweb.com/pics/html5-1/011.gif)
اکنون اين فايل در آدرسي که مورد نظر ما بود ذخيره شده است. حالا برنامه Notepad را ببنديد تا به محلي که اين صفحه را ذخيره کرده‌ايم برويم و صفحه اينترنتي را مشاهده کنيم. روي دکمه Close کليک کنيد.
![[تصویر: 012.gif]](http://forum.learninweb.com/pics/html5-1/012.gif)
روي پوشه مشخص شده دابل کليک کنيد.
![[تصویر: 013.gif]](http://forum.learninweb.com/pics/html5-1/013.gif)
همانطور که مشاهده ميکنيد صفحه مورد نظر ما به صورت يک صفحه اينترنتي ذخيره شده است. روي فايل مشخص شده دابل کليک کنيد تا اين صفحه نمايش داده شود و نتيجه کار خود را مشاهده نماييد.
![[تصویر: 014.gif]](http://forum.learninweb.com/pics/html5-1/014.gif)
مي‌بينيد که در قسمت تيتر مرورگر اينترنت عبارتي که قرار داده بوديم به نمايش در آمده است و در صفحه اصلي متني که وارد کرده بوديم نشان داده شده است.
اکنون مي‌خواهيم تمامي دستورات و تگ‌هايي که در ساخت اين صفحه وجود داشتند را مشاهده نماييم. براي اين کار روي صفحه مرورگر راست کليک کنيد.
از منوي باز شده گزينه View Source را انتخاب کنيد. نکته: در بعضي از مرورگرهاي وب ممکن است به جاي گزينه View Source، گزينه View Page Source وجود داشته باشد.
![[تصویر: 015.gif]](http://forum.learninweb.com/pics/html5-1/015.gif)
همانطور که مشاهده ميکنيد در سمت چپ مشخص شده است که چند خط دستور نوشته شده است و در قسمت دستورات تگها را با رنگ قرمز و متن‌هاي معمولي را به صورت ساده و مشکي نمايش داده مي‌شود. توجه داشته باشيد که شما نمي‌توانيد دستورات را در اين قسمت ويرايش کنيد. حالا روي دکمه Close کليک کنيد تا پنجره View Source بسته شود.
![[تصویر: 016.gif]](http://forum.learninweb.com/pics/html5-1/016.gif)
در اين مرحله مي‌خواهيم دستورات وارد شده را ويرايش کنيم براي اين کار لازم نيست که مرورگر اينترنت را ببنديم. حالا بايد براي ويرايش به پوشه ENIAC که فايل خود را در آن ذخيره کرده‌ايم برويم. روي دکمه Minimize مرورگر اينترنت کليک کنيد.
![[تصویر: 017.gif]](http://forum.learninweb.com/pics/html5-1/017.gif)
در اين مرحله روي فايل مورد نظر کليک راست نماييد.
روي منوي Open with کليک کنيد.
در زير منوي باز شده روي گزينه Notepad کليک نماييد.
![[تصویر: 018.gif]](http://forum.learninweb.com/pics/html5-1/018.gif)
مشاهده ميکنيد که صفحه Notepad که در ابتدا تگ‌هاي مورد نظر خود را در آن وارد کرده‌ايم دوباره اجرا شده است. حالا ما مي‌خواهيم يک متن ديگري را در قسمت body وارد کنيم. در ادامه متن مورد نظر را وارد ميکنيم.
![[تصویر: 019.gif]](http://forum.learninweb.com/pics/html5-1/019.gif)
براي اين که تغيير انجام شده ذخيره شود کليد Ctrl+S را فشار دهيد.
روي آيکون مرورگر اينترنت در Taskbar کليک کنيد.
![[تصویر: 020.gif]](http://forum.learninweb.com/pics/html5-1/020.gif)
مشاهده ميکنيد به علت باز بودن مرورگر تغيير انجام شده روي صفحه ما اعمال نشده است. براي آنکه دوباره صفحه ساخته شده بارگذاري شود، دکمه F5 که عمل Refresh را انجام مي‌دهد، فشار دهيد يا روي دکمه Refresh کليک کنيد.
![[تصویر: 021.gif]](http://forum.learninweb.com/pics/html5-1/021.gif)
همانطور که مي‌بينيد تغييرات مورد نظر روي صفحه اعمال شده است.
کاربر گرامي، شما اکنون در پايان اين بخش هستيد،
![[تصویر: 022.gif]](http://forum.learninweb.com/pics/html5-1/022.gif)
توجه کنيد که شما ميتوانيد نرم افزار آموزش HTML5 را به همراه چند بخش آموزشي ديگر که بصورت تعاملي و شبيه سازي شده با صدا و متن فارسي درس داده شده است و رايگان نيز ميباشد از لينک آموزش HTML5دانلود کنيد. در نرم افزارهاي آموزشي کارهاي بيان شده را بايد در محيط شبيه سازي شده انجام دهيد. در ابتدا و انتهاي اين آموزش تصويري نيز کل آموزش (هم متن و هم تصويري) در فايل PDF و Word موجود است.
دانلود فايل pdf آموزش تصويري HTML5
دانلود فايل word آموزش تصويري HTML5