آموزش طراحي سايت با html: آشنايي با html Image

آموزش طراحي سايت با html: آشنايي با html Image

جلسه دوازدهم: آشنايي با html image

آموزش طراحی وب سایت با Html

 

امروزه تقريبا Link Image در تمامي صفحات وب يافت ميشود. اين قابليت html، اين امکان را فراهم ميسازد تا بتوانيم در یک صفحه وب، یک فایل تصویری قرار بدهیم.

ميخواهيم يک عکس را در صفحه html ايجاد کنيم. يک عکس در سيستم خود در نظر بگيريد. عکس را دقيقا در همان محلي که ميخواهيد فايل html را ذخيره کنيد، قرار دهيد. براي مثال ميتوانيد لوگو شرکت فرکيان تک را دانلود کنيد. بر روی این لینک کلیک کنید تا تصویر لوگو شرکت فرکیان تک برای شما نمایش داده شود. سپس بر روی آن راست کلیک کنید و روی گزینه Save as کلیک کنید.  در دسکتاپ، یک فولدر ایجاد کنید به نام image. تصویر را در این فولدر ذخیره کنید.

برای قرار دادن یک عکس یا image، در صفحات html، از تگ <img> استفاده میکنیم. به صورت پیش فرض، همزمان با ایجاد تگ <img> ، عبارت ” “=src  درون این تگ ایجاد میشود. اگر ایجاد نشد خودتان عبارت ” “=src را ایجاد کنید.

 

تگ img

 

<html>
<body>

<img src=”Farkiantech-logo.png” alt=”Farkiantech” width=”700″ height=”400″>

</body>
</html>

src: در اين عبارت شما ميتوانيد مسير يک فايل را مشخص کنيد. در قسمت بالا، من در قسمت src، نام عکس يا لوگو شرکت فرکيان تک را نوشته ام.

Farkiantech-logo
Farkiantech-logo.png

alt: در این قسمت، یک متن ایجاد میکنیم. متنی که در این قسمت ایجاد میشود، به تصویر مرتبط میباشد. این متن زمانی نشان داده خواهد شد که تصویر به هر دلیلی نشان داده نشود.

Width (عرض) و height (ارتفاع): اين دو عبارت، طول و عرض تصوير را به صورت يک مقدار عددي تعريف ميکند.

اکنون پروژه را در فولدر image که از قبل ایجاد کردیم ذخیره کنید. به این دلیل که فایل html و عکسی که میخواهید نمایش دهید، باید در یک محل ذخیره شده باشند. سپس فایل html را باز کنید.

image html
همانطور که مشاهده میکنید، لوگو شرکت فرکیان تک، برای من ایجاد شد.

 

در جلسه بعدی آموزش، با قابلیت های بیشتر html link Image آشنا خواهید شد. با ما همراه باشید.

محمد امین مکارم

مطالب مرتبط

نقد و بررسی‌ها

نظر: