سفارش تبلیغ
صبا ویژن

آموزش طراحی سایت -آموزش درج کردن تصویردر HTML

آموزش طراحی سایت -آموزش درج کردن تصویردر HTML-آموزش Html

وارد کردن تصاویر در صفحات HTML

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

 

وارد کردن تصویر

شما می توانید با استفاده از برچسب هر تصویری را وارد صفحه ی وب خود کنید. در زیر ترکیب ساده ی استفاده از این برچسب را می بینید:

 

?
1
src="Image URL" ... attributes-list/>

 

برچسب یک برچسب خالی می باشد، یعنی تنها می تواند دارای لیستی از ویژگی ها باشد و دارای برچسب closing نمی باشد.


 مثال:

برای امتحان کردن مثال، زیر اجازه بدهید فایل html خود یعنی test.htm و فایل تصویر خود یعنی test.png را در یک مسیر قرار دهیم.

 

نمونه یک

 

شما می توانید از فایل تصویر JPEG، PNG یا GIF متناسب با راحتی خود استفاده کنید، اما مطمئن شوید که در ویژگی src نام فایل تصویر را به درستی وارد کردید. نام تصویر همیشه یک مورد هوشمند می باشد.
ویژگی alt یک ویژگی می باشد که اگر تصویر نمایش داده نشود، یک متن جایگزین را برای آن مشخص می کند.

 

تنظیم موقعیت تصویر

آموزش html css

معمولا ما تمام تصاویر خود را در یک مسیر مجزا قرار می دهیم. بنابراین اجازه بدهید فایل test.htm مربوط به HTML را در مسیر اصلی نگه داشته و یک مسیر فرعی images داخل مسیر اصلی، جایی که تصویر test.png را نگهداری می کنیم، ایجاد کنیم.
با فرض اینکه موقعیت تصویر ما "image/test.png" می باشد، مثال زیر را امتحان کنید:

تنظیم طول و عرض تصویر

می توانید طول و عرض تصویر را براساس نیاز خود و با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض تصویر را به پیکسل یا براساس درصد اندازه ی واقعی آن تنظیم کنید.

 مثال:

نمونه سه

 

تنظیم حاشیه ی تصویر

به طور پیش فرض تصویر حاشیه ای در اطراف خود خواهد داشت، شما می توانید ضخامت این حاشیه را با استفاده از ویژگی border و به واحد پیکسل تنظیم کنید. ضخامت 0 یعنی هیچ حاشیه ای در اطراف تصویر وجود ندارد.

تنظیم همترازی تصویر

به طور پیش فرض تصویر در سمت چپ صفحه تنظیم می شود، اما می توانید از ویژگی align برای تنظیم تصویر در سمت راست یا مرکز صفحه استفاده کنید.


 مثال:

نمونه پنج

به دلیل عدم درست  نمایش ندادن نمونه مثال ها لطفا به ادرس دوره آموزش طراحی سایت مراجعه فرمایید. 


آموزش طراحی سایت-رنگ و گرادینت در CSS3

?

  

سلام دوستان...

با آموزش CSS3 از دوره آموزش طراحی سایت همراه ما باشید

 

آموزش رنگها در CSS3

در CSS از اسم رنگ دلخواه, مقدار شانزده شانزدهی (hexadecimal) و RGB (red blue green) پشتیبانی می کند . اما در CSS3 خواص و امکانات نوینی ارائه گردیده که به شرح زیر می باشد :

  • رنگ های RGBA (red, blue, green و alpha)

  • رنگ های HSL (hue-saturation-lightness / اشباع-روشنایی یا سبکی رنگ)

  • رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

  • درجه ی شفافیت و کدری Opacity

 

رنگ های RGBA شامل (red, blue, green و alpha)

 

رنگ های RGBA در واقع همان red, blue, green هستند که در CSS3 با افزوده شدن کانال آلفا (Alpha channel) به آن توسعه داده شده و قابلیت بیشتری پیدا کرده است . این قابلیت جدید به شما امکان می دهد درجه یا میزان کدری و شفافیت (opacity) را تعیین کنید . مقدار رنگ های RGBA باrgba(red, green, blue, alpha) تعریف و مقداردهی می شوند . پارامتر alpha عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) .

?

 

مثال زیر رنگ های RGBA متفاوتی تعریف می کند :

p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */

#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */

#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */

 

آموزش طراحی سایت : رنگ های HSL

اچ HSL مخفف یا سرنام Hue, Saturation و Lightness می باشد .

یک مقدار HSLبا hsl(hue, saturation, lightness) مقدار دهی و مشخص می شود .

مقدار HUE یک درجه روی گردونه ی رنگ آمیزی / color wheel (از 0 تا 360) می باشد :

  • 0 (یا 360) کاملاً قرمز است

  • 120 سبز محسوب می شود

  • 240 آبی محسوب می شود/li>

 

مفهوم Saturation یک مقدار درصدی است : %100 یعنی آن رنگ در قوی ترین و پررنگ ترین حالت آن

مفهوم Lightness نیز یک درصد است : %0 تیره و %100 سفید است .

?

 

مثال زیر رنگ های مختلف HSL را مقداردهی می کند :

#p1 {background-color: hsl(120, 100%, 50%);} /* green */

#p2 {background-color: hsl(120, 100%, 75%);} /* light green */

#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */

#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */

 

رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

مقادیر HSLA در حقیقت همان مقادیر رنگ های HSL هستند که کانال الفا به آن ها افزوده شده است که درجه ی کدری و روشنایی (opacity) رنگ را تنظیم می کند . مقدار رنگ های HSLA با hsla(hue, saturation, lightness, alpha) مشخص می شود, پارامتر آلفا میزان کدری و شفافیت رنگ را تنظیم می کند . پارامتر الفا عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر و تیره) .

?

 

نمونه ی زیر رنگ های HSLA متفاوتی را تعریف و مقداردهی می کند :

#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */

#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */

#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */

#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */

 

مفهوم Opacity (درجه ی تیرگی و شفافیت)

خاصیت Opacity درجه ی تیرگی و شفافیت را ویژه ی یک مقدار RGB مشخص, مقداردهی می کند . مقدار خاصیت opacity باید عدد یا مقداری بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) باشد .

?

 

همان طور که مشاهده می کنید نوشته ی درون رنگ نیز همراه خود رنگ کدر شده است . مثال زیر مقادیر RGB مختلفی را با opacity نشان می دهد :

#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */

#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */

#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */

 

آموزش گرادینت در css

در CSS از اسم رنگ دلخواه, مقدار شانزده شانزدهی (hexadecimal) و RGB (red blue green) پشتیبانی می کند .

اما در CSS3 خواص و امکانات نوینی ارائه گردیده که به شرح زیر می باشد :

  • رنگ های RGBA (red, blue, green و alpha)

  • رنگ های HSL (hue-saturation-lightness / اشباع-روشنایی یا سبکی رنگ)

  • رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

  • درجه ی شفافیت و کدری Opacity

رنگ های RGBA (red, blue, green و alpha)

رنگ های RGBA در واقع همان red, blue, green هستند که در CSS3 با افزوده شدن کانال آلفا (Alpha channel) به آن توسعه داده شده و قابلیت بیشتری پیدا کرده است . این قابلیت جدید به شما امکان می دهد درجه یا میزان کدری و شفافیت (opacity) را تعیین کنید . مقدار رنگ های RGBA باrgba(red, green, blue, alpha) تعریف و مقداردهی می شوند . پارامتر alpha عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) .

?

 

مثال زیر رنگ های RGBA متفاوتی تعریف می کند :

#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */

#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */

#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */

 

رنگ های HSL

رنگ HSL مخفف یا سرنام Hue, Saturation و Lightness می باشد . یک مقدار HSLبا hsl(hue, saturation, lightness) مقدار دهی و مشخص می شود .

مقدار HUE یک درجه روی گردونه ی رنگ آمیزی / color wheel (از 0 تا 360) می باشد :

  • 0 (یا 360) کاملاً قرمز است

  • 120 سبز محسوب می شود

  • 240 آبی محسوب می شود/li>

مفهوم Saturation یک مقدار درصدی است : %100 یعنی آن رنگ در قوی ترین و پررنگ ترین حالت آن

مفهوم Lightness نیز یک درصد است : %0 تیره و %100 سفید است .

?

 

مثال زیر رنگ های مختلف HSL را مقداردهی می کند :

#p1 {background-color: hsl(120, 100%, 50%);} /* green */

#p2 {background-color: hsl(120, 100%, 75%);} /* light green */

#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */

#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */

 

رنگ های HSLA (اشباع-روشنایی یا سبکی رنگی با کانال آلفا)

مقادیر HSLA در حقیقت همان مقادیر رنگ های HSL هستند که کانال الفا به آن ها افزوده شده است که درجه ی کدری و روشنایی (opacity) رنگ را تنظیم می کند . مقدار رنگ های HSLA با hsla(hue, saturation, lightness, alpha) مشخص می شود, پارامتر آلفا میزان کدری و شفافیت رنگ را تنظیم می کند . پارامتر الفا عددی است بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر و تیره) .

?

 

نمونه ی زیر رنگ های HSLA متفاوتی را تعریف و مقداردهی می کند :

#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */

#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */

#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */

#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */

 

درجه ی تیرگی و شفافیت Opacity

خاصیت Opacity درجه ی تیرگی و شفافیت را ویژه ی یک مقدار RGB مشخص, مقداردهی می کند . مقدار خاصیت opacity باید عدد یا مقداری بین 0.0 (کاملاً شفاف) و 1.0 (کاملاً کدر) باشد .

?

 

همان طور که مشاهده می کنید نوشته ی درون رنگ نیز همراه خود رنگ کدر شده است . مثال زیر مقادیر RGB مختلفی را با opacity نشان می دهد :

#p1 {background-color:rgb(255,0,0);opacity:0.6;} /* red with opacity */

#p2 {background-color:rgb(0,255,0);opacity:0.6;} /* green with opacity */

#p3 {background-color:rgb(0,0,255);opacity:0.6;} /* blue with opacity */

آموزش طراحی سایت ادامه دارد

?