آموزش HTML 5 - قسمت دوم

[learninweb]

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

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

در اين فصل به معرفي يک سري از تگ‌هايي که در مورد نحوه نمايش متن کاربرد دارند، مي‌پردازيم
گاهي اوقات ممکن است شما مي‌خواهيد متن خود را در يک پاراگراف قرار بدهيد، براي اين کار از تگ <p> استفاده مي‌کنيد. همانطور که مشاهده مي‌کنيد يک صفحه HTML براي شما ايجاد شده است. حالا مي‌خواهيم يک پاراگراف به انتهاي متن اضافه کنيم براي اين کار روي قسمت مشخص شده کليک کنيد


دستور <p> را تايپ کنيد.
در ادامه متني را که مي‌خواهيم به صورت پاراگراف نمايش بدهيم را وارد مي‌کنيم.
مشاهده مي‌کنيد که متن مورد نظر را وارد کرده‌ايم. در اين مرحله لازم است تگ <p>را ببنديم. براي اين کار دستور </p> را وارد کنيد.


اکنون بايد کد وارد شده در برنامه notepad را ذخيره کنيم تا تغيير انجام شده اعمال شود. براي ذخيره کردن اين صفحه روي منوي File کليک کنيد.


از منوي باز شده روي گزينه Save کليک کنيد تا اين صفحه ذخيره شود.‌


روي آيکون مرورگر اينترنت در Taskbar کليک کنيد.


براي بارگذاري مجدد صفحه روي دکمه Refresh کليک کنيد يا دکمه F5 صفحه کليد را فشار دهيد.


همانطور که مشاهد مي‌کنيد متن وارد شده به صورت يک پاراگراف در صفحه به نمايش در آمده است.
هر گاه بخواهيد يک خط به پايين بياييد، (همانند عملکرد دکمه Enter در يک ويرايشگر متن) از تگ <br> استفاده مي‌کنيم. هنگام تايپ در قسمت Body استفاده از Enter قابل شناسايي نمي‌باشد به همين دليل از تگ <br> استفاده مي‌کنيم. درادامه به برنامه notepad بازمي‌گرديم.


در ادامه يک متن با استفاده از تگ <br> و يک متن با استفاده از دکمه Enter وارد مي‌کنيم تا تفاوت را مشاهده کنيد. توجه داشته باشيد که اين تگ نيازي به بستن ندارد.
اکنون بايد کد وارد شده در برنامه notepad را ذخيره کنيم تا تغيير انجام شده اعمال شود. براي ذخيره سازي اين کد دکمه Ctrl+ S را فشار دهيد.


روي آيکون مرورگر اينترنت در Taskbar کليک کنيد.


براي بارگذاري مجدد صفحه روي دکمه Refresh کليک کنيد يا دکمه F5 صفحه کليد را فشار دهيد.


مشاهده مي‌کنيد که عبارتي که با تگ<br> وارد کرده بوديم يک خط پايين آمده است ولي عبارت دومي که بدون تگ و با استفاده از دکمه Enter صفحه کليد يک خط پايين آورده بوديم، اينجا به صورت پشت سر هم نوشته شده است.
فرض کنيد يک متن طولاني داريد که در يک خط جا نمي‌شود. با استفاده از تگ <wbr> به مرورگر اجازه مي‌دهيد که به خط پايين بيايد. براي درک بهتر اين تگ به ذکر يک مثال مي‌پردازيم.


مشاهده مي‌کنيد که يک عبارت طولاني وارد کرده‌ايم و در قسمتهايي از اين متن، تگ <wbr> را وارد کرده‌ايم. کليد Ctrl + S را فشار دهيد تا اطلاعات وارد شده ذخيره شود.


روي آيکون مرورگر اينترنت در Taskbar کليک کنيد.


براي بارگذاري مجدد صفحه روي دکمه Refresh کليک کنيد يا دکمه F5 صفحه کليد را فشار دهيد.


مشاهده مي‌کنيد فقط قسمتي که لازم بود به خط پايين آورده شد و بقيه متن به صورت معمولي درج شده است.
فرض کنيد مي‌خواهيد يک بخش را با بخش ديگري به وسيله يک خط جدا کنيد براي اينکه يک خط افقي رسم کنيم، از تگ <hr> استفاده مي‌کنيم. در ادامه به برنامه notepad بازمي‌گرديم.


روي قسمت مشخص شده کليک کنيد تا تگ مورد نظر را وارد کنيم.


دستور <hr> را تايپ کنيد. توجه داشته باشيد اين تک نيازي به بسته شدن ندارد.
اکنون بايد کد وارد شده در برنامه notepad را ذخيره کنيم تا تغيير انجام شده اعمال شود. براي ذخيره‌سازي اين کد دکمه Ctrl+ S را فشار دهيد.


روي آيکون مرورگر اينترنت در Taskbar کليک کنيد.


براي بارگذاري مجدد صفحه روي دکمه Refresh کليک کنيد يا دکمه F5 صفحه کليد را فشار دهيد.


مشاهده مي‌کنيد که يک خط افقي در محل مورد نظر رسم شده است. در صورتيکه بخواهيد اين خط براي مثال 60% عرض صفحه باشد از دستور <hr width="60%"> استفاده مي‌کنيم.
ممکن است شما بخواهيد براي زيبايي متن خود در ابتداي متن يک فضاي خالي قرار بدهيد. براي اين کار از دستور &nbsp; استفاده مي‌کنيم. دستور &nbsp; به اندازه يک space فاصله مي‌گذارد. روي آيکون برنامه Notepad در Taskbar کليک کنيد.


روي قسمت مشخص شده کليک کنيد تا دستور مورد نظر را وارد کنيم.


در ادامه دستور &nbsp; را پنج بار تايپ مي‌کنيم تا پنج space فاصله ايجاد شود. توجه داشته باشيد اين تک نيازي به بسته شدن ندارد.
اکنون بايد کد وارد شده در برنامه notepad را ذخيره کنيم تا تغيير انجام شده اعمال شود. براي ذخيره سازي اين کد دکمه Ctrl+ S را فشار دهيد.


روي آيکون مرورگر اينترنت در Taskbar کليک کنيد.


براي بارگذاري مجدد صفحه روي دکمه Refresh کليک کنيد يا دکمه F5 صفحه کليد را فشار دهيد.

]
مشاهده مي‌کنيد به اندازه پنج space فاصله در ابتداي متن قرار گرفته است. روي آيکون برنامه Notepad در Taskbar کليک کنيد.


حال به بررسي دو تگ جهت درشت کردن و مورب کردن متن مي‌خواهيم بپردازيم.
•تگ <b> = حروف درشت (Bold)
•تگ <i> = حروف مورب (Italic)
در ادامه دو تگ <b> و <i> را با دو متن مشابه وارد مي‌کنيم. توجه کنيد که اين دو تگ حتما بايد بسته شوند تا محل پايان آنها مشخص شود.
اکنون بايد کد وارد شده در برنامه notepad را ذخيره کنيم تا تغيير انجام شده اعمال شود. براي ذخيره‌سازي اين کد دکمه Ctrl+ S را فشار دهيد.

]
روي آيکون مرورگر اينترنت در Taskbar کليک کنيد.


براي بارگذاري مجدد صفحه روي دکمه Refresh کليک کنيد يا دکمه F5 صفحه کليد را فشار دهيد.


مشاهده مي‌کنيد که دو متن وارد شده يکي به صورت درشت (Bold) و ديگري به صورت مورب (Italic) به نمايش در آمده است.
در صورتي که از تگ <pre> استفاده کنيد تا هر عبارتي را که تايپ مي‌کنيد و دکمه Enter را وارد مي‌کنيد براي صفحه HTML قابل شناسايي باشد و پشت سر هم متن را قرار ندهد. در واقع متن به هر صورتيکه داخل اين تگ باشد به همان صورت نيز نمايش داده مي‌شود. روي آيکون برنامه Notepad در Taskbar کليک کنيد.


در ادامه تگ <pre> را به همراه يک متن در برنامه notepad وارد مي‌کنيم. توجه کنيد که اين تگ حتما بايد بسته شود تا محل پايان آن مشخص شود.
اکنون بايد کد وارد شده در برنامه notepad را ذخيره کنيم تا تغيير انجام شده اعمال شود. براي ذخيره‌سازي اين کد دکمه Ctrl+ S را فشار دهيد.


روي آيکون مرورگر اينترنت در Taskbar کليک کنيد.


براي بارگذاري مجدد صفحه روي دکمه Refresh کليک کنيد يا دکمه F5 صفحه کليد را فشار دهيد.


مشاهده مي‌کنيد که متن مورد نظر به همان صورت که در برنامه notepad وارد شده است، در صفحه مرورگر به نمايش در آمده است.
فرض کنيد شما مي‌خواهيد براي متن خود يک تيتر قرار دهيد. براي اين کار شما مي‌توانيد از تگ <h1> تا <h6>، تيتر مورد نظرخود را در سايزهاي مختلف قرار دهيد. روي آيکون برنامه Notepad در Taskbar کليک کنيد.


در ادامه تگ <h1> تا <h6> را وارد مي‌کنيم. توجه کنيد که اين تگ حتما بايد بسته شود تا محل پايان آن مشخص شود.
براي ذخيره‌سازي اين صفحه کليد Ctrl + S را فشار دهيد.


روي آيکون مرورگر اينترنت در Taskbar کليک کنيد.


براي بارگذاري مجدد صفحه روي دکمه Refresh کليک کنيد يا دکمه F5 صفحه کليد را فشار دهيد.


همانطور که مشاهده مي‌کنيد يک متن مشابه را با شش سايز مختلف به نمايش در آمد. با استفاده از اين تگ شما مي‌توانيد اندازه تيتر مورد نظر را انتخاب کنيد و در پروژه به کار ببريد.
حالا فرض کنيد شما مي‌خواهيد يک نقل قول اضافه کنيد، براي اين کار از تگ <blockquote> استفاده مي‌کنيم. روي آيکون برنامه Notepad در Taskbar کليک کنيد.


در ادامه يک متن کوتاه که مي‌خواهيم آن را به صورت نقل قول استفاده کنيم وارد مي‌کنيم و در پايين تگ بسته شده يک متن ديگر هم قرار مي‌دهيم که تفاوت را بهتر درک کنيد. توجه کنيد که اين تگ حتما بايد بسته شود تا محل پايان آن مشخص شود.


براي ذخيره‌سازي اين صفحه کليد Ctrl + S را فشار دهيد.
روي آيکون مرورگر اينترنت در Taskbar کليک کنيد.


براي بارگذاري مجدد صفحه روي دکمه Refresh کليک کنيد يا دکمه F5 صفحه کليد را فشار دهيد.


مشاهده مي‌کنيد متني که به صورت نقل‌قول وارد کرده‌ايم با کمي فاصله در صفحه جاي گرفته است ولي متني که به صورت معمولي وارد کرده‌ايم. به همان صورت معمولي به نمايش در آمده است.
با استفاده از تگ <small> شما مي‌توانيد يک متن را به صورت کوچک نمايش دهيد. مثلا فرض کنيد که از يک شاعر شعري را نوشته‌ايد و مي‌خواهيد نام شاعر را به صورت کوچک در پايين شعر قراردهيد. براي اين کار از اين تگ استفاده مي‌شود. روي آيکون برنامه Notepad در Taskbar کليک کنيد.


در ادامه يک متن را که مي‌خواهيم به صورت کوچک نشان دهيم وارد مي‌کنيم. توجه کنيد که اين تگ حتما بايد بسته شود تا محل پايان آن مشخص شود.
کليد Ctrl + S را فشار دهيد.


روي آيکون مرورگر اينترنت در Taskbar کليک کنيد.


براي بارگذاري مجدد صفحه روي دکمه Refresh کليک کنيد يا دکمه F5 صفحه کليد را فشار دهيد.


همانطور که مي‌بينيد متن وارد شده کمي کوچکتر از بقيه متن‌ها، نشان داده شده است.
شما مي‌توانيد توضيحي در صفحه HTML براي خودتان وارد کنيد که قابل ديدن در صفحه اجرا شده در مرورگر نباشد. براي اين کار از تگ <!-- استفاده مي‌شود و براي مشخص کردن انتهاي توضيح از تگ --> استفاده مي‌کنيم. در ادامه به ذکر يک مثال مي‌پردازيم. روي آيکون برنامه Notepad در Taskbar کليک کنيد


براي اين که اين تگ قابل درک باشد، يک صفحه خالي HTML را آماده کرده‌ايم. براي وارد کردن توضيح روي قسمت مشخص شده کليک کنيد.


براي شروع تگ، عبارت <!-- را وارد کنيد.
در ادامه متن مورد نظر را وارد مي‌کنيم.
براي بستن تگ عبارت --> را وارد کنيد.
اکنون بايد کد وارد شده در برنامه notepad را ذخيره کنيم تا تغيير انجام شده اعمال شود. براي ذخيره‌سازي اين کد دکمه Ctrl+ S را فشار دهيد.


روي آيکون مرورگر اينترنت در Taskbar کليک کنيد.


براي بارگذاري مجدد صفحه روي دکمه Refresh کليک کنيد يا دکمه F5 صفحه کليد را فشار دهيد.


مشاهده مي‌کنيد که هيچ عبارتي در صفحه به نمايش در نيامده است
فرض کنيد شما مي‌خواهيد يک ليست درست کنيد براي اين کار از تگ <ol> استفاده مي‌کنيم. طريقه کار اين تگ به صورت زير مي‌باشد:
<ol>
</li> متن اول <il>
</li> متن دوم <il>
</li> متن سوم <il>
</ol>
وخروجي تگ بالا به صورت زير مي‌باشد:
متن اول 1.
متن دوم 2.
متن سوم 3.
شما مي‌توانيد تعيين کنيد که به جاي عدد، از علائم خاصي استفاده شود. براي اين کار، در مقابل تگ ol يک فاصله قرار مي‌دهيم و دستور type="A" وارد مي‌کنيم. با وارد کردن اين دستور به جاي عدد، حروف نشان داده مي‌شود. براي درک بهتر به مثال صفحه بعد توجه کنيد.


مشاهده مي‌کنيد که در صفحه HTML يک ليست درست کرده‌ايم که مي‌خواهيم به جاي عدد، حروف الفبا قرار بگيرد. روي آيکون مرورگر اينترنت در Taskbar کليک کنيد.


براي بارگذاري مجدد صفحه روي دکمه Refresh کليک کنيد يا دکمه F5 صفحه کليد را فشار دهيد.


مشاهده مي‌کنيد که ليست با حروف انگليسي ساخته شده است. شما مي‌توانيد از علائم ديگر به جاي حروف انگليسي استفاده کنيد. به عنوان مثال چند مورد در جدول زير ذکر شده است.
شما مي‌توانيد به جاي عدد يا حروف، از علامت‌هايي از قبيل دايره، مربع و ... استفاده کنيد. براي اين کار به جاي تگ <ol> از تگ <ul> استفاده مي‌کنيم. با استفاده از تگ <ul> کاراکتر دايره توپر قرار مي‌گيرد. براي درک بهتر به جدول زير توجه کنيد.
طريق ساخت ليست‌هاي تو در تو کاملا مشابه ساخت ليست‌هاي معمولي مي‌باشد. با اين تفاوت که بعد از وارد کردن <ul> که نشانه شروع ساخت ليست است و بعد از وارد کردن <li> مجدد <ul> ديگري را تايپ مي‌کنيم تا يک ليست ديگر ايجاد شود. براي اين که کاملا با روش ساخت ليست تو در تو آشنا شويد در ادامه به ذکر يک مثال مي‌پردازيم.


مشاهده مي‌کنيد که با استفاده از تگ <ul> يک ليست تو در تو ساخته‌ايم. روي آيکون مرورگر اينترنت در Taskbar کليک کنيد.


‌ براي بارگذاري مجدد صفحه روي دکمه Refresh کليک کنيد يا دکمه F5 صفحه کليد را فشار دهيد.


مشاهده مي‌کنيد که يک ليست تو در تو ساخته شده است.
نوع ديگري از ليست وجود دارد که ليست تعريفي نام دارد. اين ليست که به جاي استفاده از علائم، با استفاده از فاصله‌هاي مناسب يک ليست درست مي‌کند. نام اين تگ <dl> مي‌باشد. براي اين که با شکل اين تگ آشنا بشويد
شما مي‌توانيد به جاي يک عبارت يا يک کلمه طولاني، به طور مثال نام يک شرکت را به صورت مخفف بنويسيد، براي اين کار از تگ <abbr> استفاده مي‌کنيم. شکل کلي اين تگ به صورت زير مي‌باشد:
</abbr>مخفف مورد نظر">عبارت مورد نظر<abbr title="‌
در ادامه به ذکر يک مثال مي‌پردازيم.


همانطور که مشاهده مي‌کنيد، يک عبارت که مي‌خواهيم آن را مخفف کنيم وارد کرده‌ايم. روي آيکون مرورگر اينترنت در Taskbar کليک کنيد.


براي بارگذاري مجدد صفحه روي دکمه Refresh کليک کنيد يا دکمه F5 صفحه کليد را فشار دهيد.


مشاهده مي‌کنيد که به جاي عبارت وارد شده، عبارت مخفف آن نمايش داده شده است. با بردن ماوس بر روي عبارت مي‌توان نام کامل را مشاهده کرد. توجه: ممکن است در بعضي از مرورگرها در زير اين عبارت چند نقطه چين وجود دارد تا مشخص کند عبارتي که در حال نمايش است به صورت مخفف مي‌باشد. براي مشاهده اين موضوع ماوس را بر روي عبارت ببريد
ممکن است شما بخواهيد در صفحه اينترنتي خود از کاراکترهاي ويژه استفاده کنيد. براي اين کار از کد‌هاي مخصوصي بايد استفاده کنيد. به طور مثال اگر بخواهيم از علامت © که نشانه کپي‌رايت مي‌باشد استفاده کنيم، بايد از کد &copy; در محل مورد نظر استفاده کنيم.
خروجي
ورودي
shahin©‌‌‌‌
shahin&copy;‌
در جدول صفحه بعد تعدادي از کارکترهاي پرکاربرد با کد آنها ذکر شده است.


کاربر گرامي، شما اکنون در پايان اين بخش هستيد،



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

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