آموزش HTML - بخش 4

آموزش 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 - بخش 4 | آموزش طراحی سایت

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

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

 

آشنایی با تگ <kbd>

حروف kbd از لغت keyboard گرفته‌شده است. از تگ <kbd> برای نمایش keyboard input استفاده می‌کنیم:

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

                   <p>The kbd element represents keyboard input:</p>

 

                   <p> <kbd>File | Open...</kbd> </p>

 

          </body>

</html>

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

آشنایی با تگ <samp>

همان‌طور که در بالا دیدید، برای نمایش کدهای برنامه‌نویسی از تگ <code> استفاده کردیم. در طراحی سایت برای نمایش خروجی کدهای کامپیوتری، از تگ <samp> استفاده می‌کنیم:

<!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 | آموزش طراحی سایت

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

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

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

کامنت‌ها در مرورگر نمایش داده نمی‌شوند اما اگر در یک طراحی سایت، به کدهای آن دسترسی داشته باشید می‌توانید کامنت‌ها را نیز مشاهده نمایید.

<!DOCTYPE html>

<html lang="en">

          <head>

                   <meta charset="UTF-8">

                   <title> عنوان صفحه </title>

          </head>

          <body>

 

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

 

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

 

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

 

          </body>

</html>

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

بررسی کدها با مرورگر:

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

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

<!--[if IE 9]>

.... some HTML here ....

<![endif]-->

 رنگ در زبان HTML

برای هر قسمت از صفحه می‌توان رنگ زیبایی را برای جذابیت بیشتر انتخاب کرد. در زبان HTML برای انتخاب رنگ ۳ روش دارم:

  • استفاده از نام رنگ
  • 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) باهم ترکیب می‌کنیم. هرکدام از رنگ‌ها می‌توانند مقداری بین ۰ تا ۲۵۵ داشته باشند. این اعداد ۰ تا ۲۵۵ میزان شدت هر رنگ هستند. برای اعمال این رنگ‌ها، در این روش نیز از همان اتریبیوت style و پراپرتی background-color استفاده می‌کنیم. برای فهم بیشتر استفاده از این روش به مثال زیر دقت فرمایید:

<!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 استفاده می‌کنیم. برای مقداردهی ابتدا علامت # را می‌نویسیم. برای هر رنگ (قرمز، سبز، آبی) دو حرف داریم. این دو حرف می‌توانند مقداری از ۰ تا FF بگیرند. پس شکل کلی مقدار رنگ به‌صورت #rrggbb خواهد بود. همان‌طور که می‌بینید دو حرف اول شدت رنگ قرمز، دو حرف دوم شدت رنگ سبز و دو حرف سوم شدت رنگ آبی را تعیین می‌کنند. هرکدام از این ۶ حرف باید مقادیر هگزا دسیمال بگیرند؛ یعنی برای مقداردهی از ۰ شروع می‌کنیم و تا عدد ۹ می‌توانیم مقدار را عدد بدهیم. برای مقادیر بیشتر از ۹ به ترتیب از حروف الفبای لاتین استفاده می‌کنیم؛ یعنی حرف a معادل عدد ۱۰ و حرف b معادل عدد ۱۱ و به همین ترتیب تا 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 | آموزش طراحی سایت

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

دسته بندی طراحی سایت در سایت سازان