گذاشتن تصویر در html
سلام عرض میکنم خدمت تمامی دوستان محترم ، امیدوارم که حالتون خوب باشه. لطفا در ادامه با آموزش نحوه گذاشتن تصویر در html با من همراه باشید.
برای اینکه بتونیم یک تصویر یا Image را در یک صفحه وب قرار دهیم باید از تگ <img> استفاده نماییم، شکل کلی برای استفاده از این تگ در HTML بصورت زیر می باشد.
<img data-src=”url”>
که فقط کافیست در قسمت src بجای url آدرس تصویر مورد نظرمون رو وارد نماییم.
تگ img از تگ های تنها یا خالی در HTML می باشد، یعنی تگ پایانی برای بستن ندارد.
مثال عملی – برای مشاهده مثال بصورت آنلاین لطفا بروی دکمه امتحان کنید کلیک نمایید
<body>
<img src=”https://free-learn.ir/Try/html/html_learn/images/cat.gif”>
</body>
صفت alt در تگ img
اگر بخش های قبلی از آموزش HTML را دنبال کرده باشید میدانید که ما در بخش کار با صفات با صفت alt و چندین صفت کاربردی دیگر در HTML آشنا شدیم حال در این قسمت نیز میخواهیم با این صفت آشنا شویم.
این صفت یکی از صفات مهمی است که میتوان در تگ <img> استفاده کرد، با استفاده از این صفت میتوان یک متن را جایگزین یک تصویر کرد تا اگر مشکلی در نمایش تصویر به وجود آید، آن متن به نمایش درآید.
شاید براتون سواله که دلیل اصلی استفاده از این صفت چیه و اینکه چرا باید از این صفت استفاده کنیم؟ بیشترین موارد استفاده از این صفت برای موتورهای جستجوگر و بعد برای استفاده کاربرانی است که نابینا هستند و یا با استفاده نرم افزارهای مخصوص صفحات وب را گوش میدهند.
<body>
<img src=”images/girls-1.jpg” alt=”ALT TEXT IN HERE”>
</body>
نحوه ایجاد تصویر لینک دار
همانطور که میدانید ما برای ایجاد یک لینک به راحتی میتوانیم از تگ <a> استفاده نماییم و کاربر با کلیک بروی یک متن میتواند به مکانی دیگر منتقل شود، ولی خب ممکن است بخواهیم کاربر با کلیک بروی یک تصویر به مکانی دیگر منتقل شود اونوقت باید چکار کرد!؟
برای ایجاد یک تصویر لینک دار یا تصویری که بتوان با کلیک بروی آن به مکانی دیگر منتقل شویم کافیست از تگ <img> درون تگ <a> استفاده نماییم. لطفا به مثال زیر توجه نمایید.
<body>
<a href=”https://free-learn.ir”>
<img src=”images/logo-1.png”>
</a>
</body>
منبع: سایت آموزشی فری لرن
برای مشاهده آموزش های بیشتر و همچنین دانلود فایل های PDF این آموزش لطفا به سایت مراجعه نمایید.