طراحی سایت تهران، سیدخندان به سمت رسالت شرق، خیابان کابلی (دبستان)، نبش کوچه آگاهی، پلاک ۴ ، واحد ۱۵
02188471521   ۰۲۱۴۰۸۸۱۰۳۸

آموزش HTML – بخش چهارم

آموزش HTML | آموزش HTML5

آموزش های زبان HTML را در بخش چهارم با آموزش مطالب زیر پی می گیریم:

  • نمایش کدهای برنامه نویسی در زبان HTML
  • کامنت گذاری در زبان HTML
  • تنظیم رنگ المان ها در HTML

نمایش کدهای برنامه نویسی در زبان HTML

آموزش های این بخش را با یک مثال آغاز می کنیم:

آموزش html

برای نمایش کدهای برنامه نویسی در مرورگر، از تگ های <kbd>  و <samp>  و <code>  استفاده می کنیم. همانطور که در تصویر بالا مشاهده می کنید، متن این المان ها با اندازه و فونت متفاوتی نمایش داده می شوند. در ادامه به توضیح و نحوه استفاده از این تگ ها می پردازیم.

تگ <kbd>

حروف kbd از لغت keyboard گرفته شده است. از تگ <kbd>  برای نمایش ورودی های صفحه کلید استفاده می کنیم. مثلا برای ذخیره یک سند از Ctrl+S استفاده می کنیم پس Ctrl و S ورودی های صفحه کلید هستند:

آموزش HTML - بخش چهارم

تگ <samp>

برای نمایش خروجی کدهای برنامه نویسی یا سیستم های محاسباتی، از تگ <samp>  استفاده می کنیم. در خروجی عبارات با فونت monospace نمایش داده خواهند شد:

آموزش HTML - بخش 4 | آموزش طراحی سایت

تگ <code>

در زبان HTML برای نمایش کدهایی که نوشته ایم، از تگ <code>  استفاده می کنیم. نکته ای که در مورد این تگ باید در نظر بگیرید این است که این تگ فاصله خالی ( whitespace ) را از بین می برد و هنگام استفاده از این تگ نمی توان بین حروف، فاصله دلخواه قرار داد. برای حل این مشکل می توان کل تگ را درون تگ <pre>  که در جلسات گذشته با آن آشنا شدیم، قرار داد. همچنین مانند کاری که در مثال ابتدای این بخش انجام دادیم، برای جدا کردن خطوط کدها از تگ <br>  استفاده کنید. اما معمولا به جای این کار، یک بار از تگ <pre>  استفاده کنیم بهتر است.

آموزش HTML - بخش 4 | آموزش طراحی سایت

همانطو که در عکس بالا می بینید، همه ی کدها در یک خط نمایش داده شده اند. بنابراین باید کل تگ <code>  و محتوای آن را در بین تگ <pre>  قرار می دهیم:

آموزش HTML - بخش 4 | آموزش طراحی سایت

تگ <var>

برای نمایش معادلات ریاضی و یا کدهای برنامه نویسی، متغیر ها را درون تگ <var>  قرار می دهیم.

آموزش HTML - بخش 4 | آموزش طراحی سایت

توضیحات ( Comments ) در زبان HTML

کامنت ها اطلاعات و توضیحاتی در مورد تگ ها هستند که توسط برنامه نویس و برای خوانایی بیشتر، به تگ ها اضافه می شود. برای کامنت گذاری به صورت زیر عمل می کنیم:

توضیحات در مرورگر نمایش داده نمی شوند اگر با استفاده از مرورگر کدهای یک سایت را بررسی کنید، توضیحات نمایش داده می شوند.

آموزش HTML - بخش 4 | آموزش طراحی سایت

اینترنت اکسپلورر بعضی از تگ ها را پشتیبانی نمی کند. برای رفع خطاها از کامنت هایی استفاده می کنیم که به آنها Conditional Comment یا کامنت های شرطی می گوییم.

<!–[if IE 9]>

…. some HTML here ….

<![endif]–>

رنگ در زبان HTML

برای هر المان از سند HTML می توان رنگ زیبایی را برای جذابیت بیشتر انتخاب کرد. در زبان HTML برای انتخاب رنگ 3 روش داریم:

  • استفاده از نام رنگ
  • RGB: برای رنگ های Red و Green و Blue مقداری را تعیین می کنیم و این رنگ ها با هم ترکیب می شوند و رنگ دلخواه ما را می سازند.
  • استفاده از کد هگزا دسیمال رنگ ها.

در ادامه این بخش با این سه روش آشنا می شویم.

استفاده از نام رنگ ها

با استفاده از خصیصه style و ویژگی background-color می توان هر قسمت از صفحه را رنگ آمیزی کرد:

آموزش HTML - بخش 4 | آموزش طراحی سایت

استفاده از RGB

در زبان HTML می توان با تر کیب سه رنگ قرمز و سبز و آبی هر رنگ دلخواهی را ساخت. این رنگ ها را به صورت rgb( red , green , blue )  با هم ترکیب می کنیم. میزان شدت هر رنگ با عددی بین 0 تا 255 تعیین می شود. برای فهم بیشتر این روش به مثال زیر دقت فرمایید:

آموزش HTML - بخش 4 | آموزش طراحی سایت

در این روش می توان با تنظیم مقادیر مساوی به هر سه قسمت، سایه هایی از رنگ سیاه را ایجاد کرد:

آموزش HTML - بخش 4 | آموزش طراحی سایت

استفاده از مقادیر هگزا دسیمال

یک روش دیگر که برای ایجاد رنگ دلخواه وجود دارد و از دو روش گفته شده کامل تر است، استفاده از مقادیر هگزا دسیمال می باشد. در این روش نیز از خصیصه style و ویژگی background-color استفاده می کنیم.

برای مقدار دهی ابتدا علامت # را می نویسیم. برای هر رنگ ( قرمز، سبز، آبی ) دو حرف داریم. این دو حرف می توانند مقداری از 0 تا FF بگیرند. پس شکل کلی مقدار رنگ به صورت #rrggbb خواهد بود. همانطور که می بینید دو حرف اول شدت رنگ قرمز، دو حرف دوم شدت رنگ سبز و دو حرف سوم شدت رنگ آبی را تعیین می کنند.

هر کدام از این 6 حرف باید مقادیر هگزا دسیمال بگیرند. یعنی برای مقدار دهی از 0 شروع می کنیم و تا عدد 9 می توانیم مقدار عددی انتخاب کنیم. برای مقادیر بیشتر از 9 به ترتیب از حروف الفبای لاتین استفاده می کنیم. یعنی حرف a معادل عدد 10 ، و حرف b معادل عدد 11 و به همی ن ترتیب تا f می توانیم مقداری را انتخاب کنیم.

آموزش HTML - بخش 4 | آموزش طراحی سایت

در مثال زیر نحوه ایجاد سایه هایی از رنگ سیاه را مشاهده خواهید کرد:

آموزش HTML - بخش 4 | آموزش طراحی سایت

ابزار آنلاین برای یافتن کدهای هگزا دسیمال، مقدار RGB و نام رنگ ها وجود دارد که می توانید با جستجو در اینترنت از این ابزار که در وبسایت های مختلف وجود دارد، استفاده نمایید.

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

 

نوشته های مرتبط