سلام ، این جلسه می خوام ببینیم چطوری می تونیم تصاویر رو به صفحات وب اضافه کنیم ، اول از همه بهتون پیشنهاد می کنم جلسه قبل رو یه مروری بکنید .
اگه می خواید برای پس زمینه (بک گراند) یه رنگ انتخاب کنید ، باید رنگ رو در تگ BODY تعریف کنید ، در این تگ شناسه bgcolor را بنویسید و مقدار اون رو برابر رنگ مورد نظرتون قرار بدید ، مثلاً من میخوام رنگ پس زمینه رو قرمز کنم برای این کار در تگ body شناسه bgcolor رو برابر قرمز قرار می دم :
<Body bgcolor=”red” >
</Body>
به جای نام رنگ می تونید از معادل هگزا دسیمال رنگ هم استفاده کنید . روش دیگه برای تغییر رنگ پس زمینه استفاده از CSS هست که این روش بهتره و بیشتر از این روش استفاده می کنند .
وارد کردن تصویر در پس زمینه
برای این کار باید یه شناسه به تگ BODY اضافه کنید . یه فاصله بعد از Body می گذاریم و این شناسه رو میذاریم ” “=background و حالا تگ body به این صورت خواهد بود اگر فرمان های دیگه ایی بهش اضافه نکرده باشید :
<body background=” “>
و الان باید آدرس عکس رو داخل دابل کوتیشن قرار بدید . برای این کار دوتا روش وجود داره :
- اگه صفحه و عکس در یه مسیر هستند می تونیم فقط نام عکس همراه با پسوند اون رو بنویسیم مثلاً :
<body background=”image.jpg”>
- اگر صفحه و عکس در یه مسیر نیستند می تونید باید از آدرس کامل عکس استفاده کنید . مثلاً :
<body background=”https://web30ty.com/img/background.jpg”>
در CSS هم می تونیم تصویر زمینه رو تغییر یدیم ، اینارو در بخش CSS آموزش خواهم داد .
وارد کردن عکس در صفحه وب
برای استفاده کردن از عکس در صفحه وب باید از تگ </ ” “=img src> استفاده کنیم ، این تگ نیازی به تگ پایانی ندارد و src به معنی سورس هستش ، اسم عکس همراه با پسوندش داخل دابل کوتیشن src قرار می گیره . اگه می خواید از عکسی استفاده کنید که خیلی بزرگه یا اندازه اش مد نظر شما نیست . برای تغییر عرض عکس کافی است شناسه width رو داخل img بنویسید و مقدار اون رو مشخص کنید و برای ارتفاع عکس از height استفاده کنید . عرض و ارتفاع عکس معمولاً با پیکسل (px) نشان داده می شود .فرض کنید یه عکسی داریم در ابعاد 250px در 350px و ما میخوایم این عکس رو در ابعاد 250px در 250px نشون بدیم ، برای این کار اندازه های مد نظرمون رو داخل دابل کوتیشن میذاریم ، عین مثال زیر :
<img src=”background.jpg” width=”250″ height=”250″ />
ایجاد لینک در صفحه
برای اینکه بخواهیم یه لینکی در صفحه به وجود بیاریم از تگ زیر استفاده می کنیم :
<a href=” URL “> متن لینک مورد نظر </a>
هر متنی که به جای متن لینک مورد نظر قرار بدیم به عنوان یه لینک خواهد بود و میتونه مارو به یه صفحه وب یا سایت دیگه ببره . مثلاً یه صفحه ایی رو طراحی کردیم و تو این صفحه میخوایم به سایت وب سیتی لینک بدیم برای این کار به این صورت عمل می کنیم :
<a href=”https://web30ty.com”> سایت وب سیتی </a>
نتیجه به این صورت خواهد بود : سایت وب سیتی
حالا اگه بر روی این لینک کلیک کنید به سایت وب سیتی خواهید رفت . اگه بخوایم از یه عکس به عنوان لینک استفاده کنیم اینطوریه که به جای متن لینک مورد نظر که در بالا گفتم از تگی که عکس رو تو صفحه نشون میده استفاده می کنیم یعنی به این صورت :
<a href=”URL”><img src=”image.jpg” /></a>
الان اگه این کد رو اجرا کنید ، عکس مورد نظر توی صفحه وب به عنوان یه لینک عمل می کنه و با کلیک برروی اون به آدرس مورد نظر میره . تنها نکته ایی که باید فراموش نکنید اینه که نباید تگ لینک رو قبل از تگ عکس ببندید .
