رنگ متن در HTML Archives - آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران https://www.sourcebaran.com/tag/رنگ-متن-در-html یادگیری برنامه نویسی با طعم سورس باران Fri, 23 Jul 2021 15:16:46 +0000 fa-IR hourly 1 https://www.sourcebaran.com/wp-content/uploads/2021/08/cropped-logo_footer-copy-32x32.png رنگ متن در HTML Archives - آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران https://www.sourcebaran.com/tag/رنگ-متن-در-html 32 32 آموزش Html؛ آموزش کار با رنگ ها در HTML http://www.sourcebaran.com/html_colors.html http://www.sourcebaran.com/html_colors.html#respond Tue, 19 Feb 2019 08:43:55 +0000 https://www.sourcebaran.com/?p=45761 در جلسه هفتم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با رنگ ها در HTML از وب سایت آموزش برنامه نویسی سورس باران.در این جلسه رنگ در HTML، رنگ Background، رنگ متن، رنگ کادر و مقدار رنگ‌ ها را خواهیم داشت. با ما همراه باشید… آموزش کار با رنگ ها در […]

The post آموزش Html؛ آموزش کار با رنگ ها در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> آموزش Html؛ آموزش کار با رنگ ها در HTML

آموزش Html؛ آموزش کار با رنگ ها در HTML

در جلسه هفتم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با رنگ ها در HTML از وب سایت آموزش برنامه نویسی سورس باران.در این جلسه رنگ در HTML، رنگ Background، رنگ متن، رنگ کادر و مقدار رنگ‌ ها را خواهیم داشت. با ما همراه باشید…

آموزش کار با رنگ ها در HTML

رنگ‌های HTML با استفاده از نام‌های از پیش تعیین شده یا مقادیر RGB، HEX، HSL، RGBA و HSLA مشخص می‌شوند. در HTML، یک رنگ را می‌توان با استفاده از نام آن مشخص کرد. HTML از ۱۴۰ نام استاندارد رنگ پشتیبانی می‌کند:

HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

</body>
</html>
پیشنمایش

 

آموزش کار با رنگ پشت زمینه در اچ تی ام ال (background color for HTML)

شما می‌توانید برای عناصر HTML یک رنگ پشت زمینه یا background انتخاب کنید که نمونه کد آن را در زیر مشاهده می‌کنید

 <h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
پیشنمایش

 

آموزش کار با رنگ متن در اچ تی ام ال ( Text Color for Html )

در HTML می‌توان برای متن خود یک رنگ مشخص انتخاب کرد. نمونه و کد مربوط به آن را در زیر مشاهده می‌کنید

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

 <h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
پیشنمایش

 

آموزش کار با رنگ کادر در اچ تی ام ال (Border Color for Html)

اگر بخواهید پیرامون یک متن کادری را قرار دهید می‌توانید برای شاخص تر کردن کادر برای آن یک رنگ انتخاب کنید

 <h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
پیشنمایش

 

آموزش کار با مقدار رنگ ها در اچ تی ام ال (Color Values for Html)

در HTML، رنگ ها می‌توانند با مقادیر RGB، مقادیر HEX، مقادیر HSL، مقادیر rgBA و مقادیر HSLA مشخص شوند. در زیر نمونه رنگ «Tomato» نرمال را مشاهده می‌کنید

در اینجا هم نمونه رنگ Tomato را با ۵۰ درصد شفافیت مشاهده می‌کنید

 <h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
پیشنمایش

 

آموزش کار با مقدار RGB در اچ تی ام ال (RGB Value for Html)

در HTML می‌توان با استفاده از فرمول زیر یک رنگ را به عنوان یک مقدار RGB تعریف کرد. RGB سرواژه کلمات «Red، Green و Blue» است. هر یک از پارامترهای قرمز، سبز، آبی شدت رنگ را بین بازه ۰- ۲۵۵ تعریف می‌کند. برای مثال rgb(255, 0, 0) به صورت رنگ قرمز نمایش داده می‌شوند چون رنگ قرمز بالاترین مقدار را داشته و بقیه صفر تعریف شده‌اند. برای نمایش رنگ سیاه، تمام پارامترها باید صفر تعیین شوند مانند rgb(0, 0, 0). برای نمایش رنگ سفید تمام پارامترها باید ۲۵۵ تعیین شوند مانند rgb(255, 255, 255). در ادامه چند نمونه را مشاهده می‌کنید

پیشنمایش

 

سایه خاکستری اغلب با استفاده از تعیین مقادیر مساوی برای هر سه منبع رنگ ایجاد می‌شود

پیشنمایش

 

آموزش کار با مقدار HEX در اچ تی ام ال (HEX Value for Html)

در HTML مقدار رنگ را می‌توان با استفاده از یک مقدار هگزادسیمال به شکل #rrggbb تعریف کرد که در آن rr نماد رنگ قرمز (red)، gg نماد رنگ سبز (green) و bb نماد رنگ آبی (blue)، مقادیری بین 00 و ff (مشابه ۰- ۲۵۵) هستند. برای مثال #ff0000 به صورت رنگ قرمز نمایش داده می‌شود، چون به قرمز بالاترین مقدار (ff) داده شده و بقیه پایین‌ترین مقدار (00) را دارند.

پیشنمایش

 

سایه خاکستری معمولا با استفاده از تعریف مقادیر مساوی برای سه منبع رنگ به دست می‌آید

پیشنمایش

 

آموزش کار با مقدار HSL در اچ تی ام ال (HSL Value for Html)

در HTML یک رنگ را می‌توان با استفاده از ته رنگ، غلظت و روشنایی به شکل HSL یا همان Hue، Saturation‌ و Lightness، مشخص کرد. ته رنگ یا hue درجه‌ ۰ تا ۳۶۰ روی چرخه رنگ است که مقدار ۰ نشان‌دهنده رنگ قرمز، مقدار ۱۲۰ مقدار رنگ سبز و ۲۴۰ معرف رنگ آبی است. غلظت یا Saturation به معنی یک مقدار درصدی است که %0 به معنی سایه‌ی خاکستری و %100 به معنی رنگ کامل است. روشنایی یا Lightness هم به صورت درصدی تعریف می‌شود که %0 به رنگ سیاه، %50 نه روشن و نه تیره و %100 نشان‌دهنده رنگ سفید است

پیشنمایش

 

آموزش کار با غلظت رنگ در اچ تی ام ال (Saturation for Html)

غلظت را می‌توان به عنوان شدت یک رنگ تعریف کرد. ۱۰۰ درصد یعنی یک رنگ خالص که هیچ‌گونه سایه خاکستری ندارد. ۵۰ درصد یعنی ۵۰ درصد سایه خاکستری وجود دارد اما هنوز می‌توانید رنگ اصلی را تشخیص دهید. صفر درصد یعنی خاکستری کامل و شما دیگر نمی‌توانید رنگ اصلی را ببینید

پیشنمایش

 

روشنایی در Html

روشنایی یک رنگ را می‌توان به صورت میزان نوری که می‌خواهید به یک رنگ بدهید تعریف کرد؛ به این صورت که صفر درصد یعنی عدم وجود نور (سیاه)، ۵۰ درصد یعنی ۵۰ درصد نور (نه روشن و نه تیره) و ۱۰۰ درصد به معنی روشنایی کامل (سفید) است.

 

پیشنمایش

 

سایه‌های خاکستری اغلب از طریق قرار دادن مقادیر ته رنگ و غلظت روی صفر و تنظیم روشنایی بین صفر تا صد برای به دست آوردن سایه‌های تیره‌تر یا روشن‌تر ایجاد می‌شوند

 

آموزش کار با مقدار RGBA در اچ تی ام ال (RGBA Value for Html)

مقادیر رنگ‌های RGBA در واقع بسط یافته‌ی مقادیر رنگ‌های RGB به همراه یک کانال آلفا هستند که کدری یک رنگ را مشخص می‌کند. مقدار رنگ RGBA به صورت rgba (red, green, blue, alpha) مشخص می‌شود. پارامتر آلفا یک عدد بین 0.0 (کاملا شفاف) و 1.0 (بدون هیچ‌گونه شفافیت) است

پیشنمایش

 

آموزش کار با مقدار HSLA در اچ تی ام ال (HSLA Value for Html)

مقادیر رنگ‌های HSLA هم بسط یافته‌ی مقادیر رنگ‌های HSL با یک کانال آلفا است که کدری رنگ را مشخص می‌کند. مقدار یک رنگ HSLA به صورت hsla (hue, saturation, lightness, alpha) تعریف می‌شود. پارامتر آلفا یک عدد بین 0.0 (کاملا شفاف) و 1.0 (بدون هیچ‌گونه شفافیت) است:

پیشنمایش

منبع : W3Schools

 

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

The post آموزش Html؛ آموزش کار با رنگ ها در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> http://www.sourcebaran.com/html_colors.html/feed 0 آموزش Html؛ آموزش کار با پاراگراف و استایل در Html http://www.sourcebaran.com/html-paragraphshtml-styles.html http://www.sourcebaran.com/html-paragraphshtml-styles.html#respond Sat, 10 Nov 2018 14:41:07 +0000 https://www.sourcebaran.com/?p=42609 بدون توضیح اضافه آموزش کار با پاراگراف و استایل در Html را شروع خواهیم کرد. لطفا در ادامه مطلب با ما همراه باشید… آموزش کار با پاراگراف(Paragraphs) در Html عنصر <p> پاراگراف را در یک سند HTML تعریف می‌کند <p>This is a paragraph.</p> <p>This is another paragraph.</p> مرورگرها به صورت خودکار به قبل و بعد از […]

The post آموزش Html؛ آموزش کار با پاراگراف و استایل در Html appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> آموزش Html؛ آموزش کار با پاراگراف و استایل در Html

آموزش Html؛ آموزش کار با پاراگراف و استایل در Html

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

آموزش کار با پاراگراف(Paragraphs) در Html

عنصر <p> پاراگراف را در یک سند HTML تعریف می‌کند

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

مرورگرها به صورت خودکار به قبل و بعد از یک پاراگراف کمی فضای سفید اضافه می‌کنند.

پیش نمایش

 

نحوه نمایش HTML

شما نمی توانید از چگونگی نمایش کدهای HTML خود توسط مرورگرها مطمئن باشید. هنگامی که صفحه نمایش بازدید کننده بزرگ یا کوچک باشد و یا پنجره مرورگر در سایز های مختلفی تنظیم شود، شکل نمایش صفحات وب شما تغییر خواهد کرد. با کم و زیاد کردن فضای خالی بین حروف (Space) نمی توانید فاصله بین حروف را در متنی که در کدهای HTML خود می نویسید کم و زیاد کنید. مرورگر تمام فضاهای اضافه ایجاد شده در کد HTML شما را حذف کرده و تنها به یک فضای خالی بین کلمات تبدیل می کند. به هر تعدادی از فضای خالی یا خط خالی بین حروف استفاده کنید، نتیجه یک فضای خالی بین دو کلمه خواهد بود.

 <p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>
پیش نمایش

 

تگ پایانی را فراموش نکنید

بیشتر مرورگرها حتی اگر در هنگام نوشتن کدها تگ پایانی را فراموش کنید باز هم HTML را به درستی نمایش می‌دهند. ولی هرگز تگ پایانی را فراموش نکنید.

<p>This is a paragraph.
<p>This is another paragraph.

مثالی که در بالا آورده شد در بیشتر مرورگرها به درستی کار می‌کند اما بر این اصل تکیه نکنید. فراموش کردن تگ پایانی می‌تواند نتایج پیش‌بینی نشده و یا خطاهایی را به دنبال داشته باشد.

پیش نمایش

 

شکست خط در HTML

عنصر <br> در HTML یک شکست خط را تعریف می‌کند. اگر می‌خواهید بدون ایجاد یک پاراگراف جدید در خط خود شکست ایجاد کرده و به خط بعد بروید از عنصر <br> استفاده کنید:

<p>This is<br>a paragraph<br>with line breaks.</p>

تگ <br> یک تگ خالی محسوب می‌شود یعنی نیازی به تگ پایانی ندارد.

پیش نمایش

 

نمایش شعر در Html

نمایش شعرگونه در سند HTML محتوا را در خطوط تفکیک شده و به صورت جداجدا نمایش می‌دهد که در زیر یک نمونه از آن را مشاهده می‌کنید

<p>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</p>
پیش نمایش

 

عنصر <pre> در HTML

عنصر <pre> در HTML متن‌های از پیش قالب‌بندی شده را تعریف می‌کند. متنی که داخل عنصر <pre> قرار می‌گیرد با فونتی با عرض ثابت (معمولا Courier) نمایش داده شده و فضا و شکست خط را حفظ می‌کند. در زیر یک نمونه از این کد را مشاهده می‌کنید

<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>
پیش نمایش

 

آموزش کار با استایل(Style) در Html

مشخص کردن استایل یک عنصر HTML می‌تواند از طریق خصوصیت style انجام شود که دارای اصول چینش زیر است

<tagname style="property:value;">

Property یک خصوصیت از CSS و value یک مقدار CSS است. ب. CSS به کدهای شما استایل میده و از نظر گرافیکی خیلی برانامه شما رو زیبا می کنه. فیلم های آموزشی بسیاری برای یادگیری CSS روی سایت موجود هست که میتونید استفاده کنید.

 

رنگ پشت زمینه در HTML

خصوصیت background-color در واقع رنگ پشت زمینه را برای یک عنصر HTML تعریف می‌کند. مثال زیر رنگ پشت زمینه صفحه را به آبی تغییر می‌دهد

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
پیش نمایش

 

رنگ متن در HTML

خصوصیت color رنگ متن را برای عنصر HTML تعریف می‌کند

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
پیش نمایش

 

کار با فونت در HTML

خصوصیت font-family در واقع فونتی که باید در یک عنصر HTML به کار رود را تعریف می‌کند

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
پیش نمایش

 

اندازه متن در HTML

خصوصیت font-size اندازه متن را برای هر یک از عنصرهای HTML تعریف می‌کند:

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
پیش نمایش

 

هم ترازی متن در HTML

خصوصیت text-align هم ترازی متن افقی را برای یک عنصر HTML تعریف می‌کند که در زیر نمونه کد آن را مشاهده می‌کنید

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
پیش نمایش

امیدواریم این مطلب مورد توجه دوستان قرار گرفته باشد…

 

لیست جلسات قبل آموزش Html

  1. آموزش اصول اولیه و عناصر HTML
  2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
  3. آموزش کار با پاراگراف و استایل در Html
  4. آموزش کار با قالب بندی متن در Html
  5. آموزش کار با کامنت در HTML
  6. آموزش کار با کامنت در HTML
  7. آموزش کار با رنگ ها در HTML
  8. آموزش کار با تصاویر در HTML
  9. آموزش کار با لینک در HTML
  10. آموزش کار با جدول در HTML
  11. آموزش کار با لیست ها در HTML
  12. آموزش کار با عناصر Block و Inline در HTML
  13. آموزش کار با عنصر Class در HTML
  14. آموزش Html؛ آموزش iframe در HTML
  15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
  16. آموزش کار با عنصر Head در HTML
  17. آموزش Layout در HTML
  18. آموزش طراحی سایت ریسپانسیو در HTML
  19. آموزش عناصر کد کامپیوتر در HTML
  20. آموزش موجودیت (Entities) در HTML
  21. آموزش نمادها (Symbols) در HTML
  22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
  23. آموزش رمزگذاری URL در HTML
  24. آموزش کامل کار با فرم ها در HTML
  25. آموزش انواع ورودی (Input) در HTML
  26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

 

پیشنهاد ویژه 1 : دانلود کاملترین آموزش تصویری HTML به زبان فارسی

پیشنهاد ویژه 2 : دانلود تمامی مجموعه های آموزشی HTML سورس باران

پیشنهاد ویژه 3 : کتاب آموزش HTML5 و CSS3 در قالب پروژه

 

The post آموزش Html؛ آموزش کار با پاراگراف و استایل در Html appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

]]> http://www.sourcebaran.com/html-paragraphshtml-styles.html/feed 0