طراحی وب سایت قدرتمند، امن و با کیفیت را با شرکت سایت سازان تجربه کنید !
02188471521 –– 02140881038 –– 09120199386

نمایش کدهای کامپیوتری، کامنت گذاری و رنگ عناصر HTML

نمایش کدهای کامپیوتری، کامنت گذاری و رنگ عناصر HTML

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

  • نمایش کدهای کامپیوتری در HTML
  • کامنت گذاری در زبان HTML
  • رنگ عناصر HTML

نمایش کدهای کامپیوتری در HTML

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		
		<p> کدهای زیر، کدهای برنامه نویسی هستند: </p>

		<code>
			var x = 5;<br>
			var y = 6;<br>
			document.getElementById("demo").innerHTML = x + y;
		</code>

	</body>
</html>

آموزش html

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

تگ <kbd>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>عنوان صفحه</title>
    <style>
        body{direction: rtl; font-family: "IRAN Sans";}
    </style>
</head>
<body>
        
 <p>برای نمایش دکمه های ورودی صفحه کلید از تگ kbd استفاده می کنیم:</p>

 <p>برای ذخیره سند در نرم افزار سابلایم از<kbd>Ctrl +
  S</kbd>استفاده کنید.</p>

</body>

</html>

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

تگ <samp>

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		
		<p>The samp element represents sample output from a computer program:</p>

		<samp>
			demo.example.com login: Apr 12 09:10:17
			Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
		</samp>

	</body>
</html>

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

تگ <code>

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		
		<p>Programming code example:</p>

		<code>
			var x = 5;
			var y = 6;
			document.getElementById("demo").innerHTML = x + y;
		</code>

	</body>
</html>

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

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		
		<p> برای حفظ فاصله بین خطوط کدها، آنها را در تگ پری قرار می دهیم </p>

		<pre>
			<code>
				var x = 5;
				var y = 6;
				document.getElementById("demo").innerHTML = x + y;
			</code>
		</pre>

	</body>
</html>

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

تگ <var>

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		
		<p> معادله سهمی : <var> y </var> = <var> x </var> <sup> 2</sup> . </p>

	</body>
</html>

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

کامنت گذاری در زبان HTML

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

<!--توضیحاتی در مورد تگ ها برای یاد آوری نکات و یا ارائه اطلاعاتی برای پیدا کردن خطاها  -->

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		
		<!-- توضیحاتی در مورد تگها برای یادآوری و یا اطلاعاتی برای کسی که کدها را بررسی می کند -->

		<p> پاراگرافهایی در صفحه </p>

		<!-- کامنتها در مرورگر نمایش داده نمی شوند -->

	</body>
</html>

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

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

<!–[if IE 9]>

…. some HTML here ….

<![endif]–>

رنگ عناصر HTML

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		
		<p style="background-color:red "> این پاراگراف به رنگ قرمز است </p>

		<p style="background-color:orange "> این پاراگراف به رنگ نارنجی است </p>

		<p style="background-color:yellow "> این پاراگراف به رنگ زرد است </p>

		<p style="background-color:blue "> این پاراگراف به رنگ آبی است </p>

	</body>
</html>

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

استفاده از RGB

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		
		<p style="background-color: rgb(0,0,0); color: white"> این پاراگراف سیاه است </p>
		<p style="background-color: rgb(255,0,0); "> این پاراگراف به رنگ قرمز است </p>

		<p style="background-color: rgb(0,255,0); "> این پاراگراف به رنگ سبز است </p>

		<p style="background-color: rgb(0,0,255); "> این پاراگراف به رنگ آبی است </p>

		<p style="background-color: rgb(255,255,255); "> این پاراگراف به رنگ سفید است </p>

	</body>
</html>

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

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		
		<p style="background-color: rgb(0,0,0); color: white"> rgb(0,0,0) </p>

		<p style="background-color: rgb(120,120,120); color: white"> rgb(120,120,120) </p>

		<p style="background-color: rgb(60,60,60); color: white"> rgb(60,60,60) </p>

		<p style="background-color: rgb(30,30,30); color: white"> rgb(30,30,30) </p>

		<p style="background-color: rgb(15,15,15); color: white"> rgb(15,15,15) </p>

		<p style="background-color: rgb(255,255,255); color: black"> rgb(255,255,255) </p>

	</body>
</html>

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

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

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

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

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		
		<p style="background-color: #ff0000; "> #ff0000 </p>

		<p style="background-color: #00ff00; "> #00ff00 </p>

		<p style="background-color: #0000ff; "> #0000ff </p>

		<p style="background-color: #ffff00; "> #ffff00 </p>

		<p style="background-color: #ff00ff; "> #ff00ff </p>

		<p style="background-color: #00ffff; "> #00ffff </p>

	</body>
</html>

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

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

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title> عنوان صفحه </title>
	</head>
	<body>
		
		<p style="background-color: #000000; color:white "> #000000 </p>

		<p style="background-color: #404040; color:white "> #404040 </p>

		<p style="background-color: #808080; color:white "> #808080 </p>

		<p style="background-color: #cccccc; color:white "> #ffff00 </p>

		<p style="background-color: #ffffff; color:black "> #ffffff </p>

	
	</body>
</html>

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

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

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

 

خلاصه
نمایش کدهای کامپیوتری، کامنت گذاری و رنگ عناصر HTML
عنوان
نمایش کدهای کامپیوتری، کامنت گذاری و رنگ عناصر HTML
توضیحات
آموزش HTML را با نمایش کدهای کامپیوتری، کامنت گذاری و رنگ بندی عناصرادامه می دهیم و در این جلسه نکات تازه ای از این زبان نشانه گذاری را می آموزیم.
شرکت
وب سایت
سایت سازان
لوگوی شرکت

دیدگاه ‏خود را بنویسید