دسته ها
دسته‌ها
- php (1)
- امنیت (6)
- اندروید (3)
- اینترنت (2)
- برنامه نویسی (14)
- بوت استرپ (1)
- پایتون (1)
- تازه ها (22)
- ترفند ها (30)
- تکنولوژی های جدید (1)
- جاوا (2)
- جاوا اسکریپت (2)
- سئو (1)
- سخت افزار (4)
- صنعت بازی (1)
- صنعت رباتیک (1)
- طراحی وب (14)
- عکاسی (1)
- فضاهای ذخیره سازی (1)
- فلاتر (1)
- گوشی های هوشمند (1)
- متفرقه (1)
- موبایل (3)
- نرم افزار (17)
- هوش مصنوعی (4)
- وب (1)
- وردپرس (7)
- ویدئو های آموزشی (24)
عکس ها در HTML
تا به حال با این عنصرهای اصلی و پرکاربرد در html آشنا شدیم: هدرها، پاراگراف، لینک ها و لیست ها. در این درس نیز موستانگ شما را با عکس ها در html آشنا خواهد کرد. پس با ما همراه باشید.
نحوه گذاشتن عکس ها در html
عکس ها در HTML عنصرهایی به اصطلاح inline هستند، یعنی می توانند درون یک پاراگراف نیز گذاشته شوند. برای اضافه کردن یک عکس، کافی است تا از تگ <img> استفاده کرده و با ویژگی src، محل قرارگیری آن را تعیین کنید.
<img src="/static/img/code.jpg">
می توانید پس از اتمام لود عکس از کد جاوا اسکریپ برای فعال کردن یک رویداد استفاده کنید:
<img src="/static/img/code.jpg" onload="alert('image loaded')">
با بکارگیری ویژگی های width و height می توان مجدداً عکس را سایزدهی نمود. این کار را با استفاده از CSS نیز می توان انجام داد:
<img src="/static/img/code.jpg" width="100">
<img src="/static/img/code.jpg" style="width: 100px">
مقدار دهی ویژگی alt برای هر عکس بسیار پیشنهاد می شود. زیرا در اینصورت می توانیم زمانی که عکس لود نشود و یا زمانی که موس روی آن قرار گیرد، متنی را نمایش دهیم. همچنین به بهبود سئو سایت نیز بسیار کمک خواهد کرد.
<img src="/static/img/code.jpg" style="width: 100px" alt="A picture of some code">
انواع عکس
سه فرمت اصلی برای عکس ها وجود دارد که می توانید از آن ها استفاده کنید:
- Lossless: برای مواقعی که احتیاج به گرافیک با پیکسل بالا دارید، مفید است (بطور مثال در لوگو سایت). فرمت رایج آن PNG است.PNG همچنین شفافیت آلفا را ساپورت می کند، بدین معنی که پس زمینه عکس شفاف خواهد بود و در واقع شما قادرید تا عکس را بر روی هر پس زمینه ای قرار دهید.
- Lossy: برای نمایش عکس های باکیفیت کارا است. استفاده از این فرمت از عکس، نظیر PNG، باعث بزرگتر شدن حجم عکس خواهد شد. فرمت رایج در این دسته از عکس ها JPG است.
- Animated: برای نمایش عکس های پویا مفید است. فرمت رایج آن GIF است. اگرچه این فرمت بسیار قدیمی است ولی بسیار پشتیبانی می شود و البته معایبی نیز دارد، بطور مثال، محدودیت رنگ 256 برای هر فریم و فشرده سازی بد.
استفاده از ویژگی float برای عکس ها
با بکارگیری این ویژگی می توان عکس ها را در کنار متن جاگذاری نمود تا ترکیب بهتری از متن و عکس بدست آید:
<img src="/static/img/lab.png" style="float: left;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p class="clear: both">Second paragraph</p>
تمرین (عکس ها در html)
1. در تگ <body> یک عکس اضافه کنید. اسم فایل عکس photo.jpg است.
2. اندازه عکس را 100px در 100px تعیین کنید.
3. دستور onload رابه آن اضافه کنید: “(”)onload=”alert با متن: task complete. (دستور onload پس از اتمام لود عکس اجرا می شود).
در نهایت
[*] در این درس آموختید که چگونه نحوه استفاده از عکس ها در html آشنا شدید. در درس آینده با موستانگ همراه باشید تا شروع کنیم به یادگیری استایل ها.
[*] سوالات و نظرات خود را می توانید در پایین این نوشته و در قسمت دیدگاه ها ثبت کنید. موستانگ از بازخوردهای شما استقبال خواهد کرد. برای تمرین کدنویسی نیز حتماً سری به مانژ بزنید. 🙂
