آموزش گام به گام و تصویری HTML قسمت نهم (ایران گستر)
HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"]
HTML[/caption]نقل قول و استناد
به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <body> <p>Here is a quote from WWF's website:</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote> </body> </html> |
گروه WWF یکی از گروه های فعال محیط زیستی است که با کمک مردم دنیا سعی در حفظ طبیعت این کره ی خاکی را دارد و متن بالا قسمتی از توضیح وب سایت خودشان در این مورد است. از آن جایی که ما عیناً نوشته ی وب سایت آن ها را برداشته و کپی کرده ایم باید آن را به صورت نقل قول بیاوریم تا مشخص شود که متعلق به ما نیست. اگر به خروجی این کد دقت کنید متوجه می شوید که قسمت نقل قول شده کمی جلوتر از قسمت های دیگر است و این استایل پیش فرض HTML در مورد نقل قول ها است.(ایران گستر )
بیایید تگ های آن را بررسی کنیم.
تگ <q>
تگ <q> مخفف quotation یا نقل قول است و وظیفه اش مشخص کردن نقل قول های مختصر و کوتاه است. اگر از این تگ استفاده کنید معمولا مرورگرها محتوایش را بین دو علامت Quotation (“) قرار می دهند. مثال:(ایران گستر )
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <body> <p>Browsers usually insert quotation marks around the q element.</p> <p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p> </body> </html> |
معمولا نقل قول هایی که از این قبیل هستند بسیار کوتاهند (در حد یک جمله یا کمتر) اما اگر بخواهیم قسمت طولانی تری را نقل کنیم چطور؟(ایران گستر )
تگ <blockquote>
تگ <blockquote> در زبان HTML وظیفه ی استناد و نقل قول قسمت کاملی از متن را دارد و مرورگرها معمولا آن را indent (جلوتر قراردادن نسبت به بقیه ی متن) می کنند. مثال:(ایران گستر )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <body> <p>Browsers usually indent blockquote elements.</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote> </body> </html> |
همانطور که می بینید در این نوع از نقل قول ها، متن طولانی تر است و تقریبا یک پاراگراف را شامل می شود.
تگ <abbr>
تگ <abbr> مخفف abbreviation و به معنی کلمات مخفف است. به طور مثال کلماتی که شکل اختصاری آن ها به کار می رود و یا سرواژه ها در این دسته قرار می گیرند. شما می توانید با استفاده از این تگ اعلام کنید که فلان کلمه ی متن یک سرواژه است یا مخفف عبارت خاصی است:(ایران گستر )
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <body> <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> <p>Marking up abbreviations can give useful information to browsers, translation systems and search-engines.</p> </body> </html> |
سوال: چرا متن را به صورت عادی ننویسیم؟ آیا لازم است از این تگ استفاده کنیم؟(ایران گستر )
پاسخ: از نظر فنی خیر اما با استفاده از این تگ به موتورهای جستجو کمک می کنید تا آنها بهتر متن سایتتان را درک کنند و سایت اصولی تری خواهید داشت. همچنین در صورت استفاده از این تگ، اگر کاربری از سیستم های ترجمه (مانند افزونه google translate و …) استفاده کند، می تواند ترجمه ی بهتری دریافت کند.(ایران گستر )
تگ <address>
تگ <address> در زبان HTML اطلاعات تماس نویسنده ی صفحه و یا صاحب وب سایت را به کاربر ارائه می کند. محتوای این نوع تگ ها معمولا به صورت مورب (italic) به نمایش در می آیند. همچنین اکثر مرورگرها قبل و بعد از آن، یک line break (اینتر) اضافه می کنند:(ایران گستر )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <body> <p>The HTML address element defines contact information (author/owner) of a document or article.</p> <address> Written by John Doe.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address> </body> </html> |
در خروجی، نحوه ی نمایش اطلاعات را مشاهده می کنید که italic هستند.
تگ <cite>
تگ <cite> در هنگام نقل قول معمولا عنوان یک اثر را مشخص می کند. به طور مثال:(ایران گستر )
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <body> <p>The HTML cite element defines the title of a work.</p> <p>Browsers usually display cite elements in italic.</p> <img src="https://www.w3schools.com/html/img_the_scream.jpg" width="220" height="277" alt="The Scream"> <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p> </body> </html> |
در مثال بالا نقاشی معروف ادوارد مانچ به نام “The Scream” را آورده ایم و از آنجا که The Scream نام اثر است آن را در cite قرار داده ایم.(ایران گستر )
تگ <bdo>
تگ <bdo> مخفف bi-directional override (به معنی «باطل کردن دو طرفه») می باشد. دلیل استفاده از آن باطل کردن یا نادیده گرفتن text direction فعلی است. text direction یعنی نوشته ی ما از راست به چپ نوشته می شود (مانند فارسی) یا از چپ به راست (مانند انگلیسی) و با استفاده از این تگ می توانید در وسط یک جمله این جهت را عوض کنید:(ایران گستر )
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <body> <p>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):</p> <bdo dir="rtl">This line will be written from right to left</bdo> </body> </html> |
اگر به خروجی کد بالا بروید می بینید که جمله ی This line will be written from right to left کاملا برعکس شده است.(ایران گستر )
آموزش گام به گام و تصویری HTML قسمت هشتم (ایران گستر)
HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"] HTML[/caption]
ویژگی Style
در جلسه ی قبل در مورد attribute ای به نام style صحبت کردیم و با هم دیدیم که می توان با آن شکل ظاهری عناصر را در HTML تغییر داد اما وقتی صحبت از متون عادی می شود، HTML موارد خاصی را برای تغییر چهره شان دارد!(ایران گستر)
<b>متون را bold (پررنگ) می کند.<strong>نشان دهنده ی یک متن مهم است.<i>متون را italic (مورب) می کند.<em>بر متن تاکید می کند.<mark>متن را علامت گذاری می کند.<small>متن را کوچک می کند.<del>نشان دهنده ی متن حذف شده است.<ins>نشان دهنده ی متن اضافه شده است.<sub>نشان دهنده ی متن زیروند است.<sup>نشان دهنده ی متن بالاوند است.
سوال: برخی از این تگ ها متن را به یک شکل نمایش می دهند. چرا برای یک شکل چند تگ مختلف داریم؟ایران گستر
پاسخ: استفاده ی صحیح از این تگ ها بسیار مهم است! اگر بنا بر تغییر ظاهر متن بود، می توانستیم از همان style و زبان CSS استفاده کنیم اما اینجا بحث بر سر برنامه نویسی semantic (معنایی) است. هر کدام از این تگ ها علاوه بر نمایش دادن متن به شکل متفاوت، معنی متفاوتی برای موتورهای جستجو دارند. در ادامه ی این دوره بیشتر در مورد آن ها صحبت می کنیم.ایران گستر
تگ های <b> و <strong>
حتما متوجه شده اید که هر دوی این تگ ها متن را bold و پررنگ می کنند و در ذهنتان سوال می کنید که فرقشان چیست؟ باید بگویم که <b> تنها متن را پررنگ می کند و هیچ معنایی فراتر از آن ندارد:ایران گستر
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <body> <p>This text is normal.</p> <p><b>This text is bold.</b></p> </body> </html> |
اما تگ <strong> علاوه بر پررنگ کردن متن یا کلمه، معنی strong (قوی یا مهم) را به آن متن اضافه می کند. شما در عمل و در کدهایتان هیچ تفاوتی را متوجه نمی شوید اما موتورهای جستجو بین این تگ ها و معانی فرق قائل می شوند. مثالی از تگ strong:ایران گستر
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <body> <p>This text is normal.</p> <p><strong>This text is strong.</strong></p> </body> </html> |
تگ های <i> و <em>
دقیقا مانند تفاوت تگ های قبلی، تگ <i> در زبان HTML متن مورد نظرتان را مورب می کند و هیچ اهمیت خاص یا معنی دیگری به آن اضافه نمی کند:ایران گستر
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <body> <p>This text is normal.</p> <p><i>This text is italic.</i></p> </body> </html> |
اما تگ <em> جدا از مورب کردن متن، به آن معنی و اهمیت خاصی نیز می دهد. مثال استفاده از این تگ را در کد زیر می بینید:ایران گستر
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <body> <p>This text is normal.</p> <p><em>This text is emphasized.</em></p> </body> </html> |
اگر بخواهم به طور خلاصه بگویم:
مرورگرها تگ های <strong> و <b> و تگ های <em> و <i> را به یک شکل نمایش می دهند اما تگ های <b> و <i> تنها کارکرد نمایشی دارند در حالی که <strong> و <em> به موتورهای جستجو می گویند فلان متن مهم است و معنی خاصی را همراهشان دارند.ایران گستر
تگ <small>
تگ <small> متن مورد نظر شما را به شکل بسیار کوچک نمایش می دهد. به این مثال توجه کنید:
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <body> <h2>HTML <small>Small</small> Formatting</h2> <p>This is a paragraph and <small>smaller text goes here</small></p> </body> </html> |
تگ <mark>
تگ <mark> در زبان HTML متون مورد نظر شما را به حالت هایلایت شده (ماژیک فسفری) نمایش می دهد تا به مخاطب بفهماند فلان قسمت از متن اهمیت خاصی دارد:ایران گستر
1 2 3 4 5 6 7 8 | <!DOCTYPE html> <html> <body> <h2>HTML <mark>Marked</mark> Formatting</h2> </body> </html> |
تگ های <del>
در ابتدای مقاله در مورد تگ <del> به طور خلاصه نوشتم «نشان دهنده ی متن حذف شده است.» احتمالا این توضیح بیشتر شما را گیج کرده است! بگذارید واضح تر بگویم؛ برخی اوقات مطلبی را روی سایت خود منتشر می کنید اما پس از مدتی متوجه می شوید آن مطلب دیگر صحیح نیست. آنجاست که از تگ <del> استفاده می کنیم.ایران گستر
سوال: چرا از اول آن نوشته را حذف نکنیم و این همه به خودمان دردسر بدهیم؟
پاسخ: این تگ نوشته را حذف نمی کند بلکه نشان دهنده ی متن حذف شده است. یعنی دانستن این موضوع که قبلا این متن در وب سایت ما بوده است اهمیت دارد. به طور مثال ما در آموزش برنامه نویسی جاوا اسکریپت می گوییم از فلان دستور جاوا اسکریپت برای دریافت خصوصیات یک شیء استفاده می شود. بعد از گذشت یک سال یا دو سال یا هر مقدار زمان دیگر، نسخه ی جدیدی از جاوا اسکریپت معرفی شده و دستور ما منسوخ می شود. حالا می توانیم از تگ <del> استفاده کنیم تا به مخاطب بفهمانیم دستور جدید این است اما فلان دستور قدیمی نیز وجود داشته است تا اگر کنجکاو بود در مورد آن تحقیق کند. این تنها یک مثال از مثال های عملی بسیار برای این تگ بود.ایران گستر
به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <body> <p>The del element represents deleted (removed) text.</p> <p>My favorite color is <del>blue</del> red.</p> </body> </html> |
تگ <ins>
تگ <ins> نشان دهنده ی متن اضافه شده است. این یعنی چه؟
اول از همه باید بگویم این تگ در فضای وب فارسی تقریبا هیچ استفاده ای ندارد چرا که فرهنگ استفاده از آن جا نیفتاده است. در وب سایت های انگلیسی زبان، زمانی که بخواهند به مخاطب نشان دهند فلان قسمت از متن بعدا اضافه شده است، از این تگ استفاده می کنند.می توان به جای آنکه مثل من تمرینات را به شکل یک تصویر ارائه کرد، آن ها را متنی ارائه کرد تا با فشرده شدن دکمه ای، جواب ها (قسمت های جاافتاده) به کدهای اصلی (متن حاضر) اضافه شود.ایران گستر
مثال:
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <body> <p>The ins element represent inserted (added) text.</p> <p>My favorite <ins>color</ins> is red.</p> </body> </html> |
تگ <sub>
تگ <sub> در زبان HTML، متون زیروند را مشخص می کند. استفاده از این حروف در موقعیت های مختلفی امکان دارد که یکی از آن ها فرمول های شیمیایی است! فرمول شیمیایی زیر نحوه ی تبدیل کربن دی اکسید (co2) به کربن مونو اکسید (co) را نشان می دهد:ایران گستر
CO2 + 2 e− + 2H+ → CO + H2O
می بینید که می توانیم به سادگی از این تگ برای نمایش زیروند ها استفاده کنیم. تصور کنید که انجام این کار با CSS و تگ Style چقدر زمان بر خواهد بود!ایران گستر
تگ <sup>
تگ <sup> دقیقا بر خلاف تگ <sub> عمل می کند و برای بالاوند کردن متون استفاده می شود. از مثال های کاربردی آن باز هم می توان به سراغ مثال های علمی رفت؛ بیایید فرمول معروف آلبرت انیشتین را در رابطه با «هم ارزی جرم و انرژی» بنویسیم:ایران گستر
E=mc2
می بینید که برای اضافه کردن توان 2 از این تگ استفاده کرده ایم. البته تمام کاربرد های این تگ و تگ قبلی محدود به متون علمی نیست بلکه اینها یک مورد از چندین مورد استفاده ی آن هستند.ایران گستر
آموزش گام به گام و تصویری HTML قسمت هفتم (ایران گستر)
HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"] HTML[/caption]
ویژگی Style
کلمه ی style در لغت به معنی «سبک» یا «طرح» یا همان «استایل» ای است که در فارسی نیز می گوییم. در واقع کار این تگ اعمال دستورات زبان CSS در کد های HTML است. ساختار کلی style به این شکل است:(ایران گستر)
1 | <tagname style="property:value;"> |
در این ساختار، property یک خصوصیت CSS (مانند سایز فونت و …) است و value نیز مقداری که آن خصوصیت می گیرد (مانند 25px و …). در مورد این تگ در دوره ی آموزشی CSS به طور مفصل صحبت خواهیم کرد.(ایران گستر)
بهترین راه برای یادگیری این ویژگی استفاده از مثال های مختلف است بنابراین چندین مثال از آن را برایتان آماده کرده ایم.
رنگ پس زمینه در HTML
خصوصیت background-color، یک رنگ پس زمینه را برای سند HTML ما و یا یکی از عناصر آن تعیین می کند. در مثال زیر رنگ پس زمینه ی سند HTML را به رنگ powderblue تنظیم کرده ایم. اگر نمی دانید این رنگ چیست می توانید در گوگل جست و جو کنید.(ایران گستر)
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body style="background-color:powderblue;"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> |
سوال: من از کجا بدانم چه رنگ هایی می توانم به عنوان value بگذارم؟
پاسخ: جواب این سوال طولانی است اما به صورت خلاصه بدانید که رنگ ها در CSS به دو صورت حرفی (مانند brown به معنی قهوه ای و ..) و کُدی (مانند fff#) انتخاب می شوند. در دوره ی CSS با آن ها به طور کامل آشنا خواهیم شد اما برخی از این رنگ ها را به صورت خلاصه به شما معرفی می کنم.(ایران گستر)
| نام رنگ به صورت حرفی | کد HEX |
| Aqua | #00FFFF |
| Black | #000000 |
| CadetBlue | #5F9EA0 |
| Coral | #FF7F50 |
| Crimson | #DC143C |
| Cyan | #00FFFF |
| DarkOrange | #FF8C00 |
| DeepSkyBlue | #00BFFF |
| HotPink | #FF69B4 |
شما می توانید از هر کدام از این رنگ ها که خواستید استفاده کنید. در واقع تعداد این رنگ ها بیشتر از این ها است و جدول بالا تنها مشتی از خروار است! اگر دقت کرده باشید متوجه می شوید رنگ هایی که در جدول بالا آورده ایم هم نام دارند و هم کد. این یعنی در زبان CSS می توانید به جای کد هایشان از نام هایشان استفاده کنید (مانند "style="background-color:powderblue) اما بسیاری از رنگ هایی که ما می خواهیم دارای نام نیستند بنابراین تنها راه استفاده از آن ها تعیین رنگ به وسیله ی کد HEX است.(ایران گستر)
اگر نیاز به کد رنگ خاصی دارید، می توانید به وب سایت htmlcolorcodes.com یا امثال آن مراجعه کنید.
سوال: آیا رنگ ها فقط در کد HEX هستند؟
پاسخ: خیر رنگ ها در قالب های HSL و HSA و … نیز موجود هستند که در دوره ی CSS مورد بحث قرار خواهند گرفت.(ایران گستر)
رنگ متون
خصوصیت color رنگ متن یک عنصر HTML را تعیین می کند. به مثال زیر توجه کنید:(ایران گستر)
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body> <h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> </body> </html> |
فونت متون
خصوصیت font-family نوع فونت یک متن را انتخاب می کند. البته بر اساس نحوه ی استفاده، می توانید فونت کل سند HTML را نیز تغییر دهید. مثال:(ایران گستر)
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body> <h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p> </body> </html> |
همانطور که در خروجی مشاهده می کنید در این متن از دو فونت verdana و courier استفاده کرده ایم.
سوال: آیا می توانیم نام هر فونتی را به این خصوصیت بدهیم؟(ایران گستر)
پاسخ: بستگی دارد! اگر فونتی که انتخاب کرده اید از فونت های پیش فرض موجود در مرورگر ها نباشد باید آن را import کنید که خودش بحث جداگانه ای دارد و در دوره ی CSS مورد بحث قرار خواهد گرفت.(ایران گستر)
اندازه ی متون
خصوصیت font-size اندازه ی فونت یک عنصر را مشخص می کند. در واقع این خصوصیت همان خصوصیتی است که در قسمت های قبلی در موردش صحبت کردیم و گفتیم می توانید با آن اندازه ی heading ها را تغییر دهید! به مثال زیر توجه کنید:(ایران گستر)
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body> <h1 style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p> </body> </html> |
اگر خروجی این کد را مشاهده کنید می بینید که اندازه ی تگ های h1 و p به اندازه ی پیش فرضشان نیستند و بزرگترشان کرده ایم.(ایران گستر)
سوال: چرا اندازه ی فونت ها به درصد تعیین شده است؟
پاسخ: در CSS شما می توانید از واحد های مختلفی برای تعیین سایز عناصر، سایز متون و … استفاده کنید. یکی از آن ها درصد است. از دیگر واحد ها می توان پیکسل (px) را نام برد. توضیح کامل این موارد مربوط به دوره ی CSS است و در بحث ما نمی گنجد، بلکه نگاه ما به این کد ها به عنوان ویژگی (attribute) های HTML است.(ایران گستر)
تراز کردن افقی متون
خصوصیت text-align کار ترازبندی افقی متون را بر عهده دارد. به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body> <h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p> </body> </html> |
در این مثال ما ترازبندی را center (به معنی «وسط») قرار داده ایم و در خروجی نیز مشخص است که متون ما در وسط صفحه قرار گرفته اند.(ایران گستر)
سوال: آیا می توانیم چندین خصوصیت را به یک ویژگی style بدهیم؟
پاسخ: بله! این کار را در مثال زیر انجام داده ام:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <body> <p>I am normal</p> <p style="color:red; font-size:300%; text-align:center;">I am red</p> <p style="color:blue; font-family:courier;">I am blue</p> <p style="font-size:50px; font-family:calibri;">I am big</p> </body> </html> |
آموزش گام به گام و تصویری HTML قسمت ششم (ایران گستر)
HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"] HTML[/caption]
ویژگی Style
کلمه ی style در لغت به معنی «سبک» یا «طرح» یا همان «استایل» ای است که در فارسی نیز می گوییم. در واقع کار این تگ اعمال دستورات زبان CSS در کد های HTML است. ساختار کلی style به این شکل است:(ایران گستر)
1 | <tagname style="property:value;"> |
در این ساختار، property یک خصوصیت CSS (مانند سایز فونت و …) است و value نیز مقداری که آن خصوصیت می گیرد (مانند 25px و …). در مورد این تگ در دوره ی آموزشی CSS به طور مفصل صحبت خواهیم کرد.(ایران گستر)
بهترین راه برای یادگیری این ویژگی استفاده از مثال های مختلف است بنابراین چندین مثال از آن را برایتان آماده کرده ایم.
رنگ پس زمینه در HTML
خصوصیت background-color، یک رنگ پس زمینه را برای سند HTML ما و یا یکی از عناصر آن تعیین می کند. در مثال زیر رنگ پس زمینه ی سند HTML را به رنگ powderblue تنظیم کرده ایم. اگر نمی دانید این رنگ چیست می توانید در گوگل جست و جو کنید.(ایران گستر)
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body style="background-color:powderblue;"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> |
سوال: من از کجا بدانم چه رنگ هایی می توانم به عنوان value بگذارم؟
پاسخ: جواب این سوال طولانی است اما به صورت خلاصه بدانید که رنگ ها در CSS به دو صورت حرفی (مانند brown به معنی قهوه ای و ..) و کُدی (مانند fff#) انتخاب می شوند. در دوره ی CSS با آن ها به طور کامل آشنا خواهیم شد اما برخی از این رنگ ها را به صورت خلاصه به شما معرفی می کنم.(ایران گستر)
| نام رنگ به صورت حرفی | کد HEX |
| Aqua | #00FFFF |
| Black | #000000 |
| CadetBlue | #5F9EA0 |
| Coral | #FF7F50 |
| Crimson | #DC143C |
| Cyan | #00FFFF |
| DarkOrange | #FF8C00 |
| DeepSkyBlue | #00BFFF |
| HotPink | #FF69B4 |
شما می توانید از هر کدام از این رنگ ها که خواستید استفاده کنید. در واقع تعداد این رنگ ها بیشتر از این ها است و جدول بالا تنها مشتی از خروار است! اگر دقت کرده باشید متوجه می شوید رنگ هایی که در جدول بالا آورده ایم هم نام دارند و هم کد. این یعنی در زبان CSS می توانید به جای کد هایشان از نام هایشان استفاده کنید (مانند "style="background-color:powderblue) اما بسیاری از رنگ هایی که ما می خواهیم دارای نام نیستند بنابراین تنها راه استفاده از آن ها تعیین رنگ به وسیله ی کد HEX است.(ایران گستر)
اگر نیاز به کد رنگ خاصی دارید، می توانید به وب سایت htmlcolorcodes.com یا امثال آن مراجعه کنید.
سوال: آیا رنگ ها فقط در کد HEX هستند؟
پاسخ: خیر رنگ ها در قالب های HSL و HSA و … نیز موجود هستند که در دوره ی CSS مورد بحث قرار خواهند گرفت.(ایران گستر)
رنگ متون
خصوصیت color رنگ متن یک عنصر HTML را تعیین می کند. به مثال زیر توجه کنید:(ایران گستر)
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body> <h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p> </body> </html> |
فونت متون
خصوصیت font-family نوع فونت یک متن را انتخاب می کند. البته بر اساس نحوه ی استفاده، می توانید فونت کل سند HTML را نیز تغییر دهید. مثال:(ایران گستر)
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body> <h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p> </body> </html> |
همانطور که در خروجی مشاهده می کنید در این متن از دو فونت verdana و courier استفاده کرده ایم.
سوال: آیا می توانیم نام هر فونتی را به این خصوصیت بدهیم؟(ایران گستر)
پاسخ: بستگی دارد! اگر فونتی که انتخاب کرده اید از فونت های پیش فرض موجود در مرورگر ها نباشد باید آن را import کنید که خودش بحث جداگانه ای دارد و در دوره ی CSS مورد بحث قرار خواهد گرفت.(ایران گستر)
اندازه ی متون
خصوصیت font-size اندازه ی فونت یک عنصر را مشخص می کند. در واقع این خصوصیت همان خصوصیتی است که در قسمت های قبلی در موردش صحبت کردیم و گفتیم می توانید با آن اندازه ی heading ها را تغییر دهید! به مثال زیر توجه کنید:(ایران گستر)
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body> <h1 style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p> </body> </html> |
اگر خروجی این کد را مشاهده کنید می بینید که اندازه ی تگ های h1 و p به اندازه ی پیش فرضشان نیستند و بزرگترشان کرده ایم.(ایران گستر)
سوال: چرا اندازه ی فونت ها به درصد تعیین شده است؟
پاسخ: در CSS شما می توانید از واحد های مختلفی برای تعیین سایز عناصر، سایز متون و … استفاده کنید. یکی از آن ها درصد است. از دیگر واحد ها می توان پیکسل (px) را نام برد. توضیح کامل این موارد مربوط به دوره ی CSS است و در بحث ما نمی گنجد، بلکه نگاه ما به این کد ها به عنوان ویژگی (attribute) های HTML است.(ایران گستر)
تراز کردن افقی متون
خصوصیت text-align کار ترازبندی افقی متون را بر عهده دارد. به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 | <!DOCTYPE html> <html> <body> <h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:center;">Centered paragraph.</p> </body> </html> |
در این مثال ما ترازبندی را center (به معنی «وسط») قرار داده ایم و در خروجی نیز مشخص است که متون ما در وسط صفحه قرار گرفته اند.(ایران گستر)
سوال: آیا می توانیم چندین خصوصیت را به یک ویژگی style بدهیم؟
پاسخ: بله! این کار را در مثال زیر انجام داده ام:
1 2 3 4 5 6 7 8 9 10 11 | <!DOCTYPE html> <html> <body> <p>I am normal</p> <p style="color:red; font-size:300%; text-align:center;">I am red</p> <p style="color:blue; font-family:courier;">I am blue</p> <p style="font-size:50px; font-family:calibri;">I am big</p> </body> </html> |
آموزش گام به گام و تصویری HTML قسمت پنجم (ایران گستر)
HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. ار این پس آموزش های HTML مارا دنبال کنید.
HTML[/caption]Heading چیست؟
<h1> شروع شده و تا <h6> ادامه پیدا می کنند. به صورتی که <h1> مهم ترین عنوان یا تیتر و <h6> کم اهمیت ترین عنوان را مشخص می کند.(ایران گستر)به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <body> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> </body> </html> |
همانطور که در خروجی مشاهده کردید، این تگ ها در ظاهر نیز با هم متفاوت هستند و هر چه اهمیتشان بیشتر باشد، بزرگتر می شوند اما اهمیت اصلی آن ها در ظاهرشان نیست چرا که ظاهر را می توان با CSS نیز تغییر داد. اهمیت اصلی در مسئله ی سئو است؛ موتورهای جست و جو از heading ها استفاده می کنند تا ساختار یک صفحه ی وب را ایندکس کنند. بنابراین نباید از ساختار صفحات وب خود غافل شوید.(ایران گستر)
برای ساختاربندی صحیح توجه کنید که <h1> همیشه باید عنوان اصلی تمامِ صفحه باشد بنابراین نباید در هر صفحه بیشتر از یک عدد <h1> داشته باشیم. سپس به ترتیب اهمیت از تگ های <h2> و <h3> و … استفاده کنید. برای مشاهده ی ساختار HTML صفحه ی خود می توانید از وب سایت هایی مانند HTML 5 Outliner استفاده کنید. برای مثال ما سایت روکسو را به آن دادیم و نتیجه به شکل زیر بود:(ایران گستر)
این ساختار، ساختار صحیح و درستی است. همانطور که می بینید هر دسته به همراه زیر مجموعه هایش و بر اساس اهمیت جداسازی شده اند اما اگر شما در سایتتان از heading های صحیح استفاده نکنید دیگر با چنین ساختار مرتبی مواجه نخواهید شد. همیشه به این فکر کنید که کدام مطلب زیر مجموعه ی کدام مطلب دیگر است.(ایران گستر)
همچنین کاربران سایت نیز صفحات شما را بر اساس heading ها بررسی می کنند تا مطالب مورد نظرشان را پیدا کنند.
سوال: اگر بخواهیم heading من اندازه ی بزرگتری داشته باشد چکار کنم؟(ایران گستر)
پاسخ: همانطور که گفتیم تمام این موارد در CSS نوشته می شود اما برای مثال این مورد را برایتان توضیح میدهم. شما می توانید از font-size استفاده کنید:(ایران گستر)
1 2 3 4 5 6 7 8 9 10 | <!DOCTYPE html> <html> <body> <h1 style="font-size:60px;">Heading 1</h1> <p>You can change the size of a heading with the style attribute, using the font-size property.</p> </body> </html> |
من سایز این heading را روی 60 پیکسل گذاشته ام. شما می توانید به JSBin بروید و این مقدار را تغییر دهید تا ببینید چطور کوچک و بزرگ می شود.(ایران گستر)
استفاده از <hr>
تگ <hr> در زبان HTML هنگامی استفاده می شود که بخواهیم یک قسمت از صفحه را از قسمتی دیگر جدا کنیم. معمولا زمانی که قسمتی از مطلب ما از مطالب دیگر جدا است از این تگ استفاده می کنیم. خروجی این تگ به صورت یک خط افقی در صفحه است:(ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <body> <h1>This is heading 1</h1> <p>This is some text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> </body> </html> |
اگر می خواهید خروجی این تگ را ببینید باید آن را در JSBin مشاهده کنید.
برچسب <head> چیست؟
بسیاری از طراحان مبتدی تگ <head> را با heading ها اشتباه می گیرند اما واقعیت این است که این دو تگ هیچ ارتباطی با هم ندارند. در واقع عنصر <head> نگهدارنده ی اطلاعات metadata است و بین تگ های <html> و <body> قرار می گیرد. metadata اطلاعاتی است که در مورد خودِ سند HTML است و هیچ گاه به نمایش در نمی آیند. بگذارید مثالی را ببینیم:(ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html> <html> <head> <title>My First HTML</title> <meta charset="UTF-8"> </head> <body> <p>The HTML head element contains meta data.</p> <p>Meta data is data about the HTML document.</p> </body> </html> |
به غیر از عناصر p در کد بالا چیز دیگری به نمایش در نمی آید. یکی از metadata هایی که در کد بالا استفاده کرده ایم meta charset است که مشخص می کند سند ما از چه نوع encoding ای پشتیبانی می کند. برای زبان فارسی باید UTF-8 را به کار ببرید اما امروزه پیشنهاد می شود به طور کلی از هر زبانی استفاده کردید این مقدار را روی UTF-8 تنظیم کنید. در مورد این تگ ها نیز بعدا به طور مفصل صحبت خواهیم کرد.(ایران گستر)