حالت موضوعی | حالت خطی

**learninweb**

با سلام خدمت تمامي کاربران گرامي در زير آموزش تصويري HTML5 را بررسي ميکنيم توجه کنيد که شما ميتوانيد نرم افزار آموزش HTML5 را به همراه چند بخش آموزشي ديگر که بصورت تعاملي و شبيه سازي شده با صدا و متن فارسي درس داده شده است و رايگان نيز ميباشد از لينک آموزش HTML5دانلود کنيد. در نرم افزارهاي آموزشي کارهاي بيان شده را بايد در محيط شبيه سازي شده انجام دهيد. در ابتدا و انتهاي اين آموزش تصويري نيز کل آموزش (هم متن و هم تصويري) در فايل PDF و Word موجود است.

دانلود فايل pdf آموزش تصويري HTML5
دانلود فايل word آموزش تصويري HTML5

در اين فصل مي‌خواهيم به معرفي دستورات CSS بپردازيم. همانطور که قبلا گفته شده بود HTML5 تلفيقي از HTML، CSS و JavaScript مي‌باشد. دستورات CSS يا همان Cascading Style Sheet هميشه در داخل تگ <head> قرار مي‌گيرد و براي اينکه مشخص شود که مي‌خواهيم از دستورات CSS استفاده کنيم از تگ <style> استفاده مي‌کنيم. هر نوع دستوري که اين قسمت وارد کنيد، در تمامي صفحه اعمال مي‌شود. دستورات CSS به دو صورت داخلي و خارجي وجود دارند که در اين فصل به معرفي آنها مي‌پردازيم. در ادامه به سراغ آموزش ساخت يک CSS داخلي مي‌رويم.
همانطور که مشاهده مي‌کنيد يک صفحه HTML آماده کرده‌ايم. روي قسمت مشخص شده کليک کنيد تا تگ مورد نظر را وارد کنيم.
[تصویر: 001.gif]

در ادامه دستور <style type="text/css"> را وارد مي‌کنيم.
دکمه Enter صفحه کليد را فشار دهيد تا به خط پايين برويم.
[تصویر: 002.gif]

عبارت h1 را تايپ کنيد. با اين کار ما مي‌خواهيم يک سبک جديد براي تگ h1 بسازيم.
شما مي‌توانيد در مقابل عبارت h1، Spaceهاي خالي بگذاريد تا بهتر خوانده شود. دکمه Space صفحه کليد را فشار دهيد.
[تصویر: 003.gif]

براي وارد کردن دستورات کارکتر { را تايپ کنيد.
براي مثال مي‌خواهيم فونت تگ h1 را به Arial تبديل کنيم. براي اين کار از دستور font-family استفاده مي‌کنيم. در ادامه دستور font-family را وارد مي‌کنيم، فقط توجه داشته باشيد که قبل از وارد کردن دستور يک Space (فاصله) وارد مي‌کنيم.
براي وارد کردن دستور بعدي از کاراکتر ; استفاده مي‌شود. ما قصد داريم تعيين کنيم که رنگ h1 ها قرمز شود، براي اين عمل از دستور color استفاده مي‌کنيم. دستور color را تايپ کنيد.
کاراکتر : را وارد کنيد تا رنگ مورد نظر را وارد کنيم.
[تصویر: 004.gif]

دکمه space صفحه کليد را فشار دهيد تا يک فاصله ايجاد شود. (براي وارد کردن مقدار هر دستور بايد يک فاصله قرار بگيرد.)
عبارت red را تايپ کنيد.
[تصویر: 005.gif]

دکمه space صفحه کليد را فشار دهيد.
براي به اتمام رساندن دستورات کاراکتر } را وارد کنيد.
با اين کار تگ h1 داراي همان ويژگيهاي اوليه خود مي‌باشد ولي رنگ نوشته بصورت قرمز و فونت آن Arial خواهد بود. در ادامه در تگ p و h2 هم تغييراتي مي‌دهيم.
[تصویر: 006.gif]

براي اين که مشخص کنيم دستورات CSS به پايان رسيده است، دستور </style> را تايپ کنيد.
براي امتحان کردن اين که دستورات وارد شده درست عمل مي‌کنند يا خير، ابتدا کليدهاي Ctrl + S را فشار دهيد تا تغييرات ذخيره شوند.
[تصویر: 007.gif]

روي آيکون برنامه مرورگر کليک کنيد.
[تصویر: 008.gif]

دکمه F5 صفحه کليد را فشار دهيد تا صفحه دوباره بارگذاري شود.
[تصویر: 009.gif]

مشاهده مي‌کنيد که عبارت shahin momen که داخل تگ h1 وارد شده است بصورت قرمز و با فونت Arial نوشته شده است.
اکنون مي‌خواهيم يک CSS خارجي درست کنيم. در CSS داخلي کدهاي CSS در داخل صفحه نوشته مي‌شود ولي در CSS خارجي کدهاي CSS در يک فايل ديگر (خارجي) نوشته شده و آن فايل را از داخل صفحه فراخواني مي‌کنيم. مزيت اين روش اين است که در صفحات مختلفي مي‌توانيد از کد CSS خارجي استفاده کنيد. براي اين کار نياز به يک صفحه notepad خالي داريم. در ادامه يک صفحه جديد باز مي‌‌کنيم.
[تصویر: 010.gif]

مشاهده مي‌کنيد که يک صفحه جديد و خالي ايجاد کرده‌ايم. به طور مثال مي‌خواهيم براي تگ h1 دستوراتي را وارد کنيم. عبارت h1 را تايپ کنيد.
[تصویر: 011.gif]

دکمه space صفحه کليد را فشار دهيد.
کارکتر { را وارد کنيد.
در ادامه دستوراتي را وارد مي‌کنيم.
[تصویر: 012.gif]

دکمه space صفحه کليد را فشار دهيد.
کارکتر } را وارد کنيد.
در ادامه چند دستور ديگر در مورد تگهاي h2 و p وارد مي‌کنيم.
براي استفاده از اين دستورات بايد آنها را ذخيره کرد. روي منوي File کليک کنيد
[تصویر: 013.gif]

از منوي باز شده روي گزينه Save کليک کنيد.
[تصویر: 014.gif]

توجه کنيد که بايد اين صفحه را در پوشه‌ايي که فايل HTML شما در آن قرار دارد ذخيره کنيد. روي پوشه CSS دابل کليک کنيد.
[تصویر: 015.gif]

اکنون بايد نام فايل را وارد کنيم. توجه داشته باشيد که اين فايل را بايد با پسوند .CSS ذخيره ‌کنيم. در ادامه عبارت styles.CSS را تايپ کنيد.‌
روي دکمه Save کليک کنيد.
[تصویر: 016.gif]

مشاهده مي‌کنيد که اين صفحه ذخيره شده است. حالا قصد داريم از دستورات CSS وارد شده در اين فايل در يک صفحه HTML استفاده کنيم. در ادامه يک صفحه HTML باز مي‌کنيم. روي دکمه close کليک کنيد.
[تصویر: 017.gif]

در اين مرحله ما مي‌توانيم به جاي اين که دستورات CSS را تايپ کنيم، آدرس فايل CSS را قرار بدهيم. توجه داشته باشيد که اين آدرس حتما بايد در داخل تگ <head> قرار بگيرد. براي اين کار در قسمت مشخص شده کليک کنيد.
[تصویر: 018.gif]

براي اينکه به فايل CSS لينک بدهيم
از تگ <link> استفاده مي‌کنيم. در ادامه دستور
<link rel="stylesheet" type="text/css" را وارد مي‌کنيم.
حالا بايد نام فايل را وارد کنيم. براي اين کار از دستور href=”?”> استفاده مي‌کنيم ولي به جاي کاراکتر ? بايد نام فايل و پسوند آن را وارد کنيم. در ادامه دستور href="styles.css"> را وارد مي‌کنيم. در اين جا چون فايل CSS در کنار فايل HTML هست آدرسي وارد نشده و فقط اسم فايل را نوشته‌ايم.
براي امتحان کردن نحوه نمايش اين صفحه کليدهاي Ctrl + S را فشار دهيد تا تغييرات ذخيره شود.
[تصویر: 019.gif]

روي آيکون مرورگر کليک کنيد.
[تصویر: 020.gif]

دکمه F5 صفحه کليد را فشار دهيد تا صفحه مجدد اً بارگذاري شود.
[تصویر: 021.gif]

مشاهده مي‌کنيد که تغييرات انجام شده و تمامي دستورات به درستي عمل کرده‌اند. بر روي آيکون برنامه Notepad کليک کنيد.‌
[تصویر: 022.gif]

فرض کنيد مي‌خواهيم از دستورات CSS در بين دستورات HTML استفاده کنيم. براي اين کار در قسمت مشخص شده کليک کنيد، تا دستور مورد نظر را وارد کنيم.
[تصویر: 023.gif]

ما قصد داريم خصوصيات تگ h2 را با CSS فقط براي يک خط دستور تغيير دهيم. براي اين کار در ابتدا دستور <h2 را وارد کنيد.
دکمه space صفحه کليد را فشار دهيد.
[تصویر: 024.gif]

براي آغاز استفاده از دستورات CSS، عبارت style=" را تايپ کنيد.
اولين دستوري که مي‌خواهيم وارد کنيم، تعيين نوع قلم مي‌باشد. به همين دليل در ادامه عبارتfont-family: arial را وارد مي‌کنيم.
[تصویر: 025.gif]

براي اين که دستور بعدي را وارد کنيم از کاراکتر ; استفاده مي‌کنيم. کاراکتر ; را تايپ کنيد.
[تصویر: 026.gif]

دکمه space صفحه کليد را فشار دهيد.
به عنوان دومين دستور مي‌خواهيم نوع قلم را به صورت حروف مورب(italic) وارد کنيم. براي اين کار در ادامه دستور font-style: italic را وارد مي‌کنيم.
براي اين که مشخص کنيم دستورات مورد نظر ما به پايان رسيده است، از دو کاراکتر "> استفاده مي‌کنيم. کاراکترهاي "> را وارد کنيد.
در ادامه متن مورد نظر را وارد مي‌کنيم.
[تصویر: 027.gif]

دستور </h2> را وارد کنيد، تا انتهاي تگ h2 مشخص شود.
کليدهاي Ctrl + S را فشار دهيد، تا تغييرات انجام شده ذخيره شود.
[تصویر: 028.gif]

روي آيکون مرورگر کليک کنيد.
[تصویر: 029.gif]

دکمه F5 صفحه کليد را فشار دهيد تا عمل Refresh انجام شود و مرورگر دوباره بارگذاري شود.
[تصویر: 030.gif]

مشاهده مي‌کنيد که عبارت در تگ h2 بصورت مورد نظر نمايش داده شده است. توجه کنيد که اگر دوباره در اين صفحه از تگ h2 استفاده کنيد، تغييرات فوق در آن تاثيري نخواهد داشت. ولي در صورتيکه در قسمت style يا بصورت CSS خارجي تغييري بدهيد بر روي تمامي تگهاي h2 تاثير خواهد گذاشت. بر روي آيکون برنامه Notepad کليک کنيد.‌
[تصویر: 031.gif]

حالا مي‌خواهيم براي يک صفحه HTML يک تيتر درست کنيم که رنگ آن قرمز و فونت آن Arial باشد. براي اين کار در قسمت مشخص شده کليک کنيد.
[تصویر: 032.gif]

دستور <style> را تايپ کنيد.
[تصویر: 033.gif]

دکمه Enter صفحه کليد را فشار دهيد.
[تصویر: 034.gif]

تيتر مورد نظر ما تگ h1 مي‌باشد. عبارت h1 را تايپ کنيد.
دکمه space صفحه کليد را فشار دهيد.
[تصویر: 035.gif]

کارکتر { را وارد کنيد.
دکمه space صفحه کليد را فشار دهيد.
اولين دستور تعيين رنگ قلم مي‌باشد. در ادامه دستور color: red را وارد مي‌کنيم.
[تصویر: 036.gif]

براي وارد کردن دستور بعدي از کارکتر ; استفاده مي‌کنيم. کاراکتر ; را وارد کنيم.
دکمه space صفحه کليد را فشار دهيد.
[تصویر: 037.gif]

براي تعيين نوع قلم دستور font-family: arial را وارد مي‌کنيم.
دکمه space صفحه کليد را فشار دهيد.
[تصویر: 038.gif]

براي تعيين انتهاي دستورات، کاراکتر } را وارد کنيد.
در ادامه دستور </style> را وارد مي‌کنيم تا انتهاي تگ style مشخص شود.
کليدهاي Ctrl + S را فشار دهيد، تا تغييرات انجام شده ذخيره شود.
روي آيکون مرورگر کليک کنيد.
[تصویر: 039.gif]

دکمه F5 صفحه کليد را فشار دهيد.
[تصویر: 040.gif]

مشاهده مي‌کنيد که تيتر مورد نظر به خوبي ساخته شده است. نکته: شما مي‌توانيد به جاي اين که چند بار يک دستور را براي تگ‌هاي مختلف تکرار کنيد مي‌توانيد تگ‌ها را پشت سر هم بنويسيد و دستورات را مقابل آنها قرار بدهيد همانند روش زير:
h1, h2, h3 {color: red; font-size: 36px}‌
[تصویر: 041.gif]

در اين قسمت مي‌خواهيم يک کلاس CSS درست کنيم که با استفاده از آن قسمتي که مورد نظر ما است تغيير کند. به طور مثال فرض کنيد مي‌خواهيد يک کلاس خاص براي پاراگراف مقدماتي صفحه HTML خود ايجاد کنيد. براي اين کار يک صفحه Notepad خالي ايجاد کرده‌ايم. چون مي‌خواهيم براي پاراگراف دستوراتي را قرار بدهيم، عبارت p را تايپ کنيد.
[تصویر: 042.gif]

کاراکتر . را وارد کنيد.
در اين قسمت بايد نام کلاس را وارد کنيم. نام کلاس را مي‌خواهيم special بگذاريم. در ادامه عبارت special را تايپ مي‌کنيم.
دکمه space صفحه کليد را فشار دهيد.
[تصویر: 043.gif]

کارکتر { را وارد کنيد.
دکمه space صفحه کليد را فشار دهيد.
[تصویر: 044.gif]

در ادامه دستورات مورد نظر را وارد مي‌کنيم.
دکمه space صفحه کليد را فشار دهيد.
کاراکتر } را وارد کنيد.
در اين مرحله کلاس special براي تگ p بصورت يک CSS خارجي ساخته شد. حالا بايد اين صفحه را ذخيره کنيم. روي گزينه File کليک کنيد.
[تصویر: 045.gif]

از منوي باز شده روي گزينه Save کليک کنيد.
[تصویر: 046.gif]

در ادامه اين فايل را با نام 123.css ذخيره مي‌کنيم
[تصویر: 047.gif]

در اين قسمت مشاهده مي‌کنيد که فايل HTML مورد نظر را باز کرده‌ايم. در بالاي اين کد در تگ link به فايل 123.css لينک داده ايم. در قسمت مشخص شده کليک کنيد تا دستور مورد نظر را وارد کنيم.
[تصویر: 048.gif]

دکمه space صفحه کليد را فشار دهيد.
عبارت class را تايپ کنيد.
در ادامه نام کلاس را بايد وارد کنيم. عبارت ="special" را تايپ مي‌کنيم.
[تصویر: 049.gif]

با اين کار اعلام کرده ايم که در اين تگ p از کلاس special مي‌خواهيم استفاده کنيم. کليدهاي Ctrl + S را فشار دهيد، تا تغييرات انجام شده ذخيره شود.
[تصویر: 050.gif]

روي آيکون مرورگر کليک کنيد.
[تصویر: 051.gif]

دکمه F5 صفحه کليد را فشار دهيد.
[تصویر: 052.gif]

مشاهده مي‌کنيد که پاراگراف مورد نظر به طرح دلخواه در آمده است. بر روي آيکون برنامه Notepad کليک کنيد.‌
[تصویر: 053.gif]

با استفاده از خصوصيت ID شما مي‌توانيد يک تگ را متمايز کنيد. مي‌خواهيم يک تگ p با خصوصيت ID برابر closing بسازيم تا در آن متن نوشته بصورت وسط چين و با حروف بزرگ نمايش داده شود. براي شروع کار روي قسمت مشخص شده کليک کنيد.
[تصویر: 054.gif]

دستور <p id=" را تايپ کنيد.
در ادامه عبارت closing"> را تايپ مي‌کنيد
[تصویر: 055.gif]

در ادامه متني که مي‌خواهيم در اين تگ نمايش داده شود را وارد مي‌کنيم.
دستور </p> را تايپ کنيد.
در ادامه تگ <style> را وارد مي‌کنيم.
[تصویر: 056.gif]

در اين مرحله بايد ID به نام closing را براي تگ p تعريف کنيم. براي اين کار روي قسمت مشخص شده کليک کنيد.
[تصویر: 057.gif]

ابتدا عبارت p را تايپ کنيد تا مشخص شود که تگ p مورد نظر ما مي‌باشد.
کاراکتر # را تايپ کنيد.
براي معرفي نام ID در ادامه عبارت closing را تايپ مي‌کنيم.
در ادامه دستورات مورد نظر خود را وارد مي‌کنيم.
[تصویر: 058.gif]

در قسمت اول دستورات مشخص کرده‌ايم که متن مورد نظر در وسط صفحه و دستور دوم تعيين شده است که با حروف بزرگ نمايش داده شوند. اکنون تغييرات را ذخيره کرده‌ايم روي آيکون مرورگر کليک کنيد.
[تصویر: 059.gif]

براي بارگذاري مجدد صفحه روي دکمه Refresh کليک کنيد يا دکمه F5 صفحه کليد را فشار دهيد.
[تصویر: 060.gif]

مشاهده مي‌کنيد که متن http://www.learninweb.com در وسط و به صورت حروف بزرگ به نمايش در آمده است. روي آيکون برنامه Notepad کليک کنيد.‌
[تصویر: 061.gif]

شما مي‌توانيد براي صفحه خود تعيين کنيد که جهت نمايش متن از فونت و رنگ خاصي استفاده کند و براي چاپ نيز از فونت و رنگ ديگري استفاده نمايد. به طور مثال فرض کنيد که تعيين کرديد رنگ صفحه مشکي و رنگ قلم سفيد باشد. مسلماً براي چاپ اين صفحه چاپگر دچار مشکل مي‌شود و جوهر زياد مصرف مي‌شود. براي جلوگيري از اين اتفاق از دستورات CSS ديگري استفاده مي‌کنيم تا رنگ متن مشکي و رنگ صفحه سفيد باشد. به عنوان يک مثال ديگر فرض کنيد صفحه توليد شده توسط شما در يک مرورگر تلفن همراه بخواهد نمايش داده شود. چون ابعاد صفحه نمايش کامپيوتر با گوشي فرق دارد از يکسري دستورات ديگر جهت تغيير اندازه و رنگ متن استفاده مي‌کنيم. در تمامي مثالهاي فوق از تگ media استفاده مي‌شود. در ادامه به بررسي چند مثال مي‌پردازيم.
در ابتدا براي هر حالتي که مي‌خواهيم (مثل چاپ، نمايش در مرورگر) دستورات مورد نظر را به صورت CSS خارجي ساخته‌ايم و بايد لينک آن را در صفحه HTML وارد کنيم. در ادامه لينک مورد نظر را وارد مي‌کنيم.
حال بايد مشخص کنيم که از اين CSS در چه مواقعي بايد استفاده شود. براي اين کار دستور media را تايپ کنيد.
[تصویر: 062.gif]

شما مي‌توانيد براي صفحه خود تعيين کنيد که جهت نمايش متن از فونت و رنگ خاصي استفاده کند و براي چاپ نيز از فونت و رنگ ديگري استفاده نمايد. به طور مثال فرض کنيد که تعيين کرديد رنگ صفحه مشکي و رنگ قلم سفيد باشد. مسلماً براي چاپ اين صفحه چاپگر دچار مشکل مي‌شود و جوهر زياد مصرف مي‌شود. براي جلوگيري از اين اتفاق از دستورات CSS ديگري استفاده مي‌کنيم تا رنگ متن مشکي و رنگ صفحه سفيد باشد. به عنوان يک مثال ديگر فرض کنيد صفحه توليد شده توسط شما در يک مرورگر تلفن همراه بخواهد نمايش داده شود. چون ابعاد صفحه نمايش کامپيوتر با گوشي فرق دارد از يکسري دستورات ديگر جهت تغيير اندازه و رنگ متن استفاده مي‌کنيم. در تمامي مثالهاي فوق از تگ media استفاده مي‌شود. در ادامه به بررسي چند مثال مي‌پردازيم.
در ابتدا براي هر حالتي که مي‌خواهيم (مثل چاپ، نمايش در مرورگر) دستورات مورد نظر را به صورت CSS خارجي ساخته‌ايم و بايد لينک آن را در صفحه HTML وارد کنيم. در ادامه لينک مورد نظر را وارد مي‌کنيم.
حال بايد مشخص کنيم که از اين CSS در چه مواقعي بايد استفاده شود. براي اين کار دستور media را تايپ کنيد.
[تصویر: 063.gif]

روي آيکون مرورگر کليک کنيد.
[تصویر: 064.gif]

دکمه F5 صفحه کليد را فشار دهيد.
[تصویر: 065.gif]

اکنون صفحه را مطابق با Style حالتن نمايشگر مشاهده مي‌کنيد براي اين که تغيير را در زمان چاپ را مشاهده کنيد به قسمت Print Preview… مي‌رويم. براي اينکار روي قسمت مشخص شده کليک راست کنيد.
[تصویر: 066.gif]

روي گزينه Print Preview… کليک کنيد.
[تصویر: 067.gif]

مشاهده مي‌کنيد که با توجه به CSS وارد شده نمايش صفحه تغيير کرده ‌است و حالتي که در زمان چاپ تعيين شده است را مشاهده مي‌کنيد. بر روي آيکون برنامه Notepad کليک کنيد.‌
[تصویر: 068.gif]

گاهي ممکن است بخواهيد صفحه HTML خود را براي گوشي‌هاي iphone يا گوشي‌هايي با سيستم‌عامل Android يا ipadها استفاده کنيد براي اين کار بازهم از تگ media استفاده مي‌کنيم. براي مثال فرض کنيد که مي‌خواهيم صفحه HTML را در ipad نمايش دهيم. براي اين کار در ادامه دستورات مورد نظر را در يک CSS خارجي وارد مي‌کنيم.
با استفاده از دستور Link به فايل CSS ايجاد شده Link داده‌ايم. حالا مي‌خواهيم تعيين کنيم که مي‌خواهيم اين صفحه در مانيتور و حداکثر عرض دستگاه 1024 باشد. براي اين کار در ابتدا دستور media=" را تايپ کنيد.
[تصویر: 069.gif]

در ادامه براي اين که تعيين کنيم که مي‌خواهيم اين Style در دستگاهي که مانيتور آن حداکثر عرض 1024 دارد نمايش داده شود، دستور زير را وارد مي‌کنيم:
only screen and (max-device-width: 1024px) ‌‌‌‌‌
توجه: اکثر دستگاه‌هاي ipad موجود در بازار داراي عرض 1024 پيکسل مي‌باشند.براي آنکه Style اين صفحه براي گوشيهايي که داراي عرض 480 پيکسل مي‌باشند را تعيين کنيم از دستور زير استفاده مي‌کنيم.
only screen and (max-device-width: 480px) ‌‌
استفاده مي‌شود.
توجه: اکثر دستگاه‌هاي iphone وگوشي‌هايي با سيستم‌عامل Android موجود در بازار هستند داراي عرض 480 پيکسل مي‌باشند.کاربر گرامي، شما اکنون در پايان اين بخش هستيد،
[تصویر: 070.gif]

توجه کنيد که شما ميتوانيد نرم افزار آموزش HTML5 را به همراه چند بخش آموزشي ديگر که بصورت تعاملي و شبيه سازي شده با صدا و متن فارسي درس داده شده است و رايگان نيز ميباشد از لينک آموزش HTML5دانلود کنيد. در نرم افزارهاي آموزشي کارهاي بيان شده را بايد در محيط شبيه سازي شده انجام دهيد. در ابتدا و انتهاي اين آموزش تصويري نيز کل آموزش (هم متن و هم تصويري) در فايل PDF و Word موجود است.

دانلود فايل pdf آموزش تصويري HTML5
دانلود فايل word آموزش تصويري HTML5