نحوه درج تصویر در صفحه html

برای درج تصویر-تصویر در سایت (عکس یا هر گرافیک) باید با استفاده از تگ img مسیر منبع (فایل تصویر) را مشخص کنید تگ img مخفف تصویر انگلیسی (تصویر، تصویر) است. ، src
مهم: وزن و اندازهتصاویر (کوچک) نام فایل(بدون فاصله و فقط حروف و اعداد لاتین) فرمت تصویر(افزونه ها. GIF، JPG، JPEG، PNG. می توان از تصاویر متحرک (GIF) استفاده کرد.
بسته به جایی که تصویر در سایت شما یا در اینترنت در منابع شخص ثالث قرار دارد، مسیر تصویر مطلق یا نسبی نشان داده می شود (سپس باید URL را مشخص کنید)

مه هنرمند ولادیمیر کنیاگنیتسکی

کد. کد حاوی یک آدرس نسبی است (نسبت به پوشه روی سرور من)

کد. کد حاوی آدرس مطلق تصویر است

اندازه تصویر و ضخامت قاب

اندازه واقعی این عکس: Width (width)="499" Height (height)="434". بدون متوسل شدن به فتوشاپ، می توانید تصویر روی صفحه را بزرگتر یا کوچکتر از اندازه واقعی آن نشان دهید. برای این کار از ویژگی ها استفاده می شود. عرضو ارتفاع. به عنوان مثال، برای اینکه تصویر 2 برابر کوچکتر به نظر برسد، عرض (width)="250" و ارتفاع (height)="217" را مشخص کنید. و یک حاشیه ضخیم 4 پیکسل اضافه کنید( مرز"4"). در سمت چپ یک تصویر با یک قاب، در سمت راست، برای مقایسه، بدون قاب است

ویژگی های تگ IMG

src-ویژگی مورد نیاز که نشان دهنده آدرس تصویر (آدرس، مکان آن) است.
IMG SCR="img/kartinka.gif"

تراز کردن- تصویر را در یک طرف سند تراز می کند
align="left" - تراز چپ
align="right" تراز راست
align="bottom" تراز پایین
align="top" تراز بالا
align="middle" تراز کردن در وسط

alt- نمایش متن برای تصویر جایگزینی برای گرافیک اگر لود نشود
مرز- عرض فریم اطراف تصویر را بر حسب پیکسل تنظیم می کند. فریم به طور پیش فرض استفاده نمی شود.

عرضعرض تصویر بر حسب پیکسل یا درصد
ارتفاع- ارتفاع تصویر بر حسب پیکسل یا درصد

hspaceافست افقی
vspaceافست عمودی

نمونه هایی از تراز کردن یک تصویر با متن با استفاده از HTML

تصویر قبل از متن بدون مشخص کردن هیچ ویژگی قرار می گیرد. بدون قالب بندی متن نتیجه آن چیزی است که می بینید. تصویر در سمت چپ متن با استفاده از ویژگی align تنظیم شده در سمت چپ قرار می گیرد. align = چپ " .
این البته خیلی بهتر از نسخه قبلی محل قرارگیری عکس با متن است. اما من فکر نمی کنم که کسی آن را دوست داشته باشد وقتی تصویر نزدیک به متن فشار داده می شود. پروانه، پروانه، پروانه. و متن، متن، متن در مورد یک پروانه، پروانه، پروانه. خیلی نزدیک به تصویر تصویر نباید با متن ادغام شود، حتی اگر متن صرفاً به صورت متن نوشته شده باشد، تا بصری متن پیچیده شده در اطراف تصویر را نشان دهد. بسیار مهم است که تصویر روی صفحه با متن ادغام نشود، تحریک نشود، چشم را خوشحال کند و در جای خود قرار گیرد. مقدار کافی از متن مثال را با وضوح بیشتری تجزیه می کند.
در انتشار کتاب قوانین صفحه بندی وجود دارد، در ساخت وب سایت باید قوانین صفحه بندی وجود داشته باشد. تصویر با استفاده از ویژگی در سمت چپ متن قرار داردبا مقدار LEFT، تورفتگی از متن - 20 پیکسل به صورت افقی تراز کنید.
align="left" hspace=20 Padding با استفاده از ویژگی ها اضافه می شود HSPACE(تورفتگی افقی) و VSPACE(تورفتگی عمودی). در این حالت، تورفتگی عمودی روی صفر تنظیم می شود تا بالای تصویر با خط بالای متن همسطح باشد. اگر تورفتگی صفر باشد مشخص نمی شود. خوب، تورفتگی عمودی در ویژگی مشخص شده است. و در حالی که اکنون از مدیران وب خواسته می شود تا ویژگی های HTML را کنار بگذارند و به طور کامل به CSS منتقل شوند، به نظر من سادگی این روش به آن حق وجود می دهد.
کد تصویر در سمت راست متن قرار دارددر مورد کمک ویژگی تراز کردن در مورد ارزشدرست، بالشتک با ویژگی ها اضافه شد HSPACE(تورفتگی افقی). و VSPACE(تورفتگی عمودی). در اصل، همه چیز مانند نسخه قبلی است، فقط به جای ترک کرد، مشخص شده درستو تصویر نه قبل از متن، بلکه تقریباً در وسط درج می شود. قالب بندی با ویژگی ها تراز کردن(تراز خطی) و با کمک تورفتگی به صورت افقی و عمودی نتیجه ای کاملا طبیعی می دهد. تصویر با متن در سمت چپ، بالا و پایین پیچیده شده است (در صورت وجود متن کافی). فرورفتگی متن از تصویر به سمت چپ، بالا و پایین برابر با 20 پیکسل است. همه چیز همانطور است که در کد نشان داده ایم.
دو نوع تراز (چپ و راست) بیشترین استفاده را دارند و بقیه... تقریباً بقیه منسوخ شده اند. در سایت های مدرن، تمام تصاویر (و در واقع کل طراحی) با استفاده از شیوه نامه های آبشاری (CSS) طراحی می شوند.

متن، متن، متن ادامه متن

تصویر با استفاده از ویژگی align قرار می گیردبا معنی وسط. اضافه شدن بالشتک با ویژگی ها HSPACE(تورفتگی افقی) و VSPACE. به نظر می رسد این است، کد زیر نوشته شده است .. اینجا جایی است که ویژگی های موقعیت یابی تصویر به پایان می رسد

نحوه استفاده از ویژگی های alt و title

ویژگی‌های alt و title حاوی عنوان تصویر هستند. ALT جایگزینی برای تصویری است که به دلایلی بارگذاری نشده است. عنوان عنوان تصویر است. زمانی که ماوس خود را روی تصویر می برید ظاهر می شود.
اگر فقط برای خود سایتی می سازید، نمی توانید این ویژگی ها را اعمال کنید. اگر سایت برای افراد در نظر گرفته شده است، پس این ویژگی ها باید با ارائه توضیحات واضح و دقیق از تصویر پر شوند.
اولاً برای بازدیدکنندگان راحت است و ثانیاً برای موتورهای جستجو ضروری است. این متن داخل تگ IMG است که به ربات های جستجوگر اجازه می دهد تصاویر را فهرست بندی کنند، آنها را بر اساس کلمات کلیدی مرتب کنند و آنها را بر اساس درخواست کاربر صادر کنند. به هر حال، Yandex حتی هشدار می دهد که اگر تصویر توصیف معنی داری نداشته باشد، وارد جستجو نمی شود. فقط تصاویر فرمت های گرافیکی استاندارد (JPEG، GIF و PNG) نمایه می شوند. تصاویر پس‌زمینه و تصاویری که با استفاده از یک اسکریپت گسترش می‌یابند ایندکس نمی‌شوند.

کد تصویر با alt و عنوان پر شده است

چگونه یک تصویر را لینک کنیم

هر پیوندی با استفاده از تگ A و ویژگی href (اگر یک ابرپیوند باشد) یا نام if (پیوندی به یک پاراگراف یا عنصر واقع در همان صفحه) ایجاد می شود.
برچسب شروع منبع تصویربرچسب بسته شدن

وقتی در اینترنت گشت و گذار می کنید، مطمئناً در بسیاری از سایت ها تصاویر، بنرها، عکس ها و گرافیک های مختلفی را مشاهده می کنید. امروز ما یاد خواهیم گرفت که چگونه تصاویر را در یک صفحه HTML قرار دهیم.

افزودن تصویر در دو مرحله انجام می شود: ابتدا یک فایل گرافیکی با اندازه و فرمت مورد نیاز تهیه می شود و سپس از طریق یک برچسب به صفحه وب اضافه می شود: . خود سند HTML فقط برای نمایش تصویر مورد نیاز در نظر گرفته شده است بدون تغییر آن.

هنگام تهیه تصاویر باید به چند نکته توجه داشت.

1. از آنجایی که صفحه وب از طریق شبکه بارگذاری می شود، یک عامل مهم است اندازه ("وزن") فایل گرافیکیدر یک سند وب تعبیه شده است. هرچه کوچکتر باشد، تصویر سریعتر نمایش داده می شود.

2. اغلب، ابعاد فیزیکی یک تصویر (عرض و ارتفاع) باید در عرض و ارتفاع محدود شود (کاهش شود). به عنوان مثال، عرض را روی بیش از 700-800 پیکسل تنظیم کنید. در غیر این صورت، کل تصویر در پنجره مرورگر قرار نمی گیرد و نوارهای اسکرول ظاهر می شوند.

فرمت های گرافیکی برای وب سایت ها

دو فرمت اصلی وجود دارد که بیشترین استفاده را برای گرافیک وب دارند: gifو JPEG. ویژگی هایی مانند: تطبیق پذیری، تطبیق پذیری، حجم کمی از فایل های منبع با کیفیت خوب کافی، به خوبی به این فرمت ها عمل کرده اند، در واقع آنها را به عنوان استانداردی برای تصاویر وب تعریف می کنند.

قالب دیگری نیز وجود دارد: PNG، که در هنگام افزودن تصاویر توسط مرورگرها نیز پشتیبانی می شود و در دو نوع ارائه می شود: PNG-8و PNG-24. با این حال، محبوبیت فرمت PNG در تشخیص فرمت‌های GIF و JPEG بسیار پایین‌تر است..

معمولا برای تصاویر (تصاویر) یک پوشه جداگانه در پوشه ریشه ایجاد می شود و تمامی تصاویر سایت به آن اضافه می شود. گاهی اوقات چندین پوشه از این قبیل وجود دارد (اگر ساختار سایت به آن نیاز دارد یا برای شما راحت تر است). این پوشه معمولاً به صورت زیر شناخته می شود: imgیا تصاویر (تصاویر). مسیر کامل فایل گرافیکی (محلی که تصویر در آن قرار دارد) در کد صفحه وب و همچنین نام این فایل (تصویر) که می خواهید در سند html درج کنید، نوشته شده است.

نوشتن کد برای قرار دادن یک تصویر در یک صفحه وب

برای درج تصاویر در یک سند HTML، از ساختار مشخص شده در آن استفاده کنید فهرست 8.1.این کد در جای مناسب در صفحه وب (جایی که می خواهید تصویر را ببینید) درج شده است.

در صفحه ما که به خودروها اختصاص دارد، دو تصویر را آماده و درج کردم. می توانید کد جاسازی اولین تصویر را در لیست 8.1 مشاهده کنید.

فهرست 8.1.

اولین تصویر درج شده در صفحه وب سایت به این صورت خواهد بود:

و اکنون در مورد آنچه در آن نوشته شده است با جزئیات بیشتری نظر خواهم داد فهرست 8.1.

خود تصویر با استفاده از تگ "درج" می شود: img src. ورودی کامل به این شکل است: img src="img/mers1.jpg"، جایی که "img/mers1.jpg"- نشان می دهد که تصویر ما در پوشه است: imgو نام فایل گرافیکی (تصویر): mers1.jpg.

در اصل، این برای درج یک تصویر در یک صفحه وب کافی است، بقیه پارامترها اختیاری هستند، اما با این وجود، توصیه می کنم همیشه آنها را تجویز کنید. در غیر این صورت، تصویر ممکن است در معرض اعوجاج هندسی باشد..

بیایید به گزینه های اضافی نگاه کنیم:

مرز = "0"- نشان می دهد که هیچ قاب در اطراف تصویر وجود ندارد، سعی کنید 0 را به عدد دیگری تغییر دهید، به عنوان مثال، به 1 ، - مربوط به ضخامت قاب اطراف تصویر در است 1 پیکسل، 2 - مربوط به ضخامت قاب اطراف تصویر در دو پیکسل و غیره است.

مهم! اگر قصد دارید تصویر را لینک کنید، حتما مقدار آن را مشخص کنید: مرز = "0".

عرض = "400"– نشان می دهد که عرض تصویر برابر است با: 400 پیکسل(عرض واقعی تصاویر خود را قرار دهید).

ارتفاع = 209- مشخص می کند که ارتفاع تصویر: 209 پیکسل(ارتفاع واقعی تصاویر خود را قرار دهید).

اگر پارامترها را مشخص نکنید: عرضو ارتفاع، سپس تصویر ممکن است دچار اعوجاج هندسی شود.

hspace="20"- نشان دهنده یک تورفتگی متنی در اطراف تصویر 20 پیکسلی است.

align = "چپ"- این یک برچسب از قبل برای شما آشناست ... .. درست است، به معنی تراز چپ است، همچنین می تواند مقدار را به خود بگیرد: درست- تراز سمت راست

alt="(!LANG: نمای جلوی خودرو" !}- در اینجا متن جایگزین نوشته شده است که با قرار دادن ماوس روی تصویر نمایش داده می شود.

دقیقاً به همین ترتیب، تصویر دوم را در صفحه وب "درج" می کنیم، تنها با این تفاوت که در سمت راست تراز می شود.

نظرات در مورد این مقاله (درس):

میشه لطفا بگید دقیقا کجا باید پوشه img رو ایجاد کنم؟

پوشه img فقط یک نام معمولی است، شما می توانید آن را هر چه دوست دارید صدا کنید، اگر بعدا متوجه شوید. می توانید آن را در هر جایی ایجاد کنید، برای سادگی، آن را در دایرکتوری ریشه ایجاد کنید و تمام تصاویر را در آنجا قرار دهید.

واقعیت این است که تصویر نمایش داده نمی شود، فقط کتیبه است. چه اشکالی می تواند داشته باشد؟ متشکرم.

به فهرست 8.1 بالا نگاهی دقیق بیندازید. آن را کاملا به خودت ببر در پوشه ریشه (جایی که تمام فایل های HTML سایت شما قرار دارند)، یک پوشه img بسازید. تمام تصاویر خود را در این پوشه قرار دهید. در لیست، mers1.jpg را به نام فایل خود تغییر دهید. مقادیر عرض و ارتفاع را به ابعاد واقعی فایل خود نیز تغییر دهید. موفق باشید.

خیلی ممنون، همه چیز درست شد.

سلام منم مثل اسپیکر قبلی دارم کد رو مینویسم فقط اسم فایل رو عوض میکنم به جای mers.1 / jpeg یه سری مرسدس / jpeg میزارم فقط یه پنجره روی صفحه میاد با نوشته "نمای جلوی ماشین" و هیچ تصویری وجود ندارد. به نظر من مرورگر نمی تواند مسیر عکس را پیدا کند یا به درستی ثبت نشده است. کد من اینجاست: ب

به کد img/mercedes/jpeg خود دقت کنید. درست متوجه شدید که مرورگر مسیر فایل گرافیکی را پیدا نمی کند. 2. نام فایل نادرست است، ببینید من چگونه mers1.jpg را دارم

خب من کد رو کپی کردم و تو بیضی بدون عکس گذاشتم تو بیضی بالا لینکش هست!

سلام!مشکل هم همینه، من در همان محل اسناد سایت یک پوشه به نام img ایجاد کردم، تصاویر با نام 1.jpg در این پوشه ذخیره می شود، همه چیز را مانند مثال شما تجویز می کنم.

اگر متوجه شدید عکس من در پوشه img است

مقاله بسیار مفید برای مبتدیان "مسترهای وب". تنها نکته به ویژگی "alt". در رابطه با شکل موجود در مقاله، تعبیر زیر آورده شده است: "alt="(!LANG: نمای ماشین جلویی" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута title. alt - альтернативный текст, который отобразится, если у пользователя графика отключена или картинка не загрузилась; title - атрибут, позволяющий отображать всплывающее пояснение к картинке при наведении на неё курсора.!}

کد من اینجاست پس چرا هنگامی که وظیفه آن مرکز است، تصویر در کناری قرار می گیرد؟

و اگر از سایت شخص دیگری عکس بگیرم، آیا این نقض حق چاپ نیست؟

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

دیمیتری، هیچ معجزه ای وجود ندارد، شما در جایی اشتباه کردید، تمام مسیرهای رسیدن به عکس ها را بررسی کنید، یعنی. نحوه نوشتن تصاویر در کد

این کد من است، همه چیز به جز تصویر در صفحه آشکار می شود، من تمام روز را به هر طریقی تلاش کرده ام اما هیچ چیز. لطفا بگویید چکار کنم

AndreyK، لطفاً به نامه من مراجعه کنید. من به هیچ وجه نمی توانم تصویری را وارد کنم، همه چیز را درست وارد می کنم اما به هیچ وجه فقط یک قاب و یک کتیبه آشکار می شود

الویرا، نامه شما و همچنین تمام نظرات و نامه های دیگر را خواندم. اما کجا باید جواب داد ... به روستای پدربزرگ ؟؟؟

نمیدونم چرا همه عجله دارن!؟ فقط لازم نیست کدها را کپی کنید، سپس آنها را پیست کنید، بلکه خودتان آنها را بنویسید و همه چیز درست می شود.. اینم متن عکس من

من لیست شما را کپی کردم، مقادیرم را چسباندم - یک عکس وجود دارد. بعد، من در همان چیزی (به صورت دستی) در زیر رانندگی می کنم، هیچ عکسی وجود ندارد - چه معجزه ای؟

AndreyK لطفا به من بگویید اشتباه کجاست؟ چند بار امتحان کردند جواب نداد ((

آندری، به من بگو چرا نمی توانی تصویر را ببینی. کد من: کپشن هست ولی عکس نداره نشانی من: [ایمیل محافظت شده]متشکرم.

خیلی هم طول کشید، اما جواب داد! در واقع، پوشه imj باید در یک سند HTML باز شود.

حتما امتحان میکنم ممنون

من

منم خیلی وقته زجر کشیدم معلومه پوشه عکس باید همون جای index.html باشه ممنون النا

چسباندن آندری اول:

چسباندن آندری اول: و من عکسی در سند ندارم فقط کتیبه!!!آدرس من اینه: [ایمیل محافظت شده]

کد من ... همچنین بدون تصویر. پوشه img همون پوشه index هست... لطفا راهنمایی کنید. [ایمیل محافظت شده]با تشکر!

خب من نمی دانم. من همه نظرات را خوانده ام. من همه چیز را امتحان کرده ام. اطلاعاتم را کپی و پیست کردم. هیچ چیز کار نمی کند. پوشه تصاویر (img) در همان مکان index.html قرار دارد. اما تصویری وجود ندارد. در عوض یک صلیب قرمز و یک کتیبه من در مرورگر IE کار می کنم. این چیزی است که من وارد کردم:

من به کد HTML صفحه به جای عکس در درس نگاه کردم: کد موجود در صفحه با آنچه در لیست موجود است متفاوت است. چرا؟ و اتفاقاً در صفحه زیر کد "mers1.jpg" خط کشیده شده است. کپی کردن با زیرخط انجام نشد. من هم سعی کردم داخلش کنم هنوز تصویری نیست موضوع چیه؟

از خود می پرسیم، خودمان پاسخ می دهیم. برای مدت طولانی تصویر درج نشده بود. معلوم شد: 1، به جای تگ src، من srk 2 داشتم. وقتی مسیر عکس را طی کردم گیج شدم. نام پوشه را به IMG تغییر دادم و همه چیز درست شد. من تقریبا دو روز برای این کار وقت گذاشتم اما ارزشش را داشت.

عشق ولی الان تا آخر عمر یادت میمونه:) شوخی میکنم البته ناراحت نشو. اما به طور جدی، اگر شخصی آدرس بازگشت را ترک نکند، تقریبا غیرممکن است که به او کمک کنم.

سلام، میشه به من بگید چطوری یک عکس رو بالا، دومی پایین سمت چپ و سومی پایین سمت راست قرار بدم))))

...........خطای تصویر گم شده من چیست؟

همه چیز در کد درست است، اگر چیزی به هم نخورد همه چیز باید کار کند. اما نام فایل (تصویر) را با حروف انگلیسی بنویسید. بسیاری از سرورها لاتین را قبول ندارند.

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

مارینا، هیچ ترفند یا تحریکی وجود ندارد :). در کد لیست 8.1. نشان می دهد که این تصویر در پوشه: img است. اگر نام پوشه را برای تصاویر موجود در هاست خود تغییر دهید، سپس آن را در لیست تغییر دهید، این کل ترفند است.

من سعی می کنم یک تصویر درج کنم !!! من همه چیز را از طریق یک دفترچه یادداشت تجویز می کنم ، همه کارها را درست انجام می دهم ، شاید ارزش آن را از طریق یک دفترچه یادداشت نداشته باشد؟

و من همه چیز را در جدیدترین موزیلا فایر فاکس باز می کنم))

مسیر عکس من C:Documents and SettingsDenisDesktopkoffevinogradwwwImg هستش و اسم عکسش گیف هست اسمش هم 1.gif هست...تو نوت پد اینکارو میکنم انجام داد و مسیر کامل بیرون نمی‌آید

دنیس، نام پوشه Img را به img تغییر دهید، یعنی. همه با حروف بزرگ، و نام مسیر به آن را نیز تغییر دهید. بسیاری از سرورها حروف بزرگ را به درستی نمایش نمی دهند.

من هنوز همان سوال را دارم: چرا نه تصاویر، بلکه فقط یک کتیبه. من یک پوشه جداگانه برای سایت ایجاد کردم: شامل یک صفحه وب و یک عکس است. درج شده: کمک کنید خطای ایمیل من چیست: [ایمیل محافظت شده]

چگونه می توان یک تصویر ایجاد کرد تا بتوان آن را بزرگ یا کوچک کرد؟

بنا به دلایلی، تصویر برای من هم مرکز نیست. مشکل چیست؟.. کد این است:

تصاویر - شاید آنها ایده کلی ما از وب جهانی را تشکیل می دهند. موافق باشید که یک فرد اطلاعات گرافیکی را به طور کلی بسیار بهتر از اطلاعات متنی به خاطر می آورد. بنابراین، تصاویر بخش مهمی از هر سایت و هر صفحه وب هستند. و بنابراین من می خواهم به شما بگویم که چگونه یک تصویر را در html وارد کنید.

درج تصویر در html با استفاده از تگ

حتما می دانید که تمامی دستورات در html با استفاده از تگ ها انجام می شود. بنابراین برای تصاویر آنها با برچسب خود آمدند - . مجرد است یعنی قسمت بستن ندارد.

مهمترین ویژگی تگ img src (منبع) است - مسیر رسیدن به تصویر. در آن آدرسی که تصویر در آن قرار دارد را یادداشت می کنید. می توان آن را مطلق نوشت ( site/images/images2/image.jpg) یا به صورت نسبی ( images/images2/image.jpg).

هر دوی این مسیرها به یک فایل image.jpg منتهی می شوند که در پوشه image2 قرار دارد. آن یکی به نوبه خود در دایرکتوری تصاویر و آن یکی در پوشه ریشه است. اگر همه چیز را نسبی بنویسید، وقتی نام دامنه سایت خود را تغییر دهید، همه چیز عملیاتی می شود. به عنوان مثال، ویرایشگر wordpress URL های مطلق را به طور پیش فرض درج می کند. اما شخصاً قصد ندارم دامنه را تغییر دهم و برای من مناسب است.

ویژگی های اضافی و یک ظاهر طراحی شده از طریق css

بنابراین با دور شدن از موضوع، برای نمایش یک تصویر کافی است ویژگی src را برای آن مشخص کنید، اما ویژگی های بسیاری دیگر برای طراحی آن وجود دارد.

• عرض و ارتفاع، عرض و ارتفاع تصویر هستند. می توان آن را در ویژگی های مربوطه در تگ img تنظیم کرد
• align - تراز کردن تصویر با توجه به متن. به طور پیش فرض، در سمت چپ (چپ) تراز شده است. همچنین می توانید آن را در سمت راست و در مرکز (راست، مرکز) قرار دهید.
• alt - متن جایگزینی که اگر کاربر تصاویر را در مرورگر غیرفعال کرده باشد، نمایش داده می شود. خوب است که آن را پر کنید.
• عنوان تقریباً یکسان است. نوعی توصیف تصویر که با نگه داشتن ماوس روی آن نمایش داده می شود
• vspace و hspace - تورفتگی عمودی و افقی تصویر از بقیه مطالب. توجه! ویژگی ها قبلاً منسوخ شده اند و بهتر است این تورفتگی ها را از طریق شیوه نامه تنظیم کنید
• class - یک کلاس سبک که به تصویر متصل می شود و برخی از سبک ها را به آن اعمال می کند

یک عکس زیبا گذاشتیم در اینجا کلاس preview را آویزان کردیم و اکنون با css از طریق آن می توانیم به آن مراجعه کرده و هر سبکی را تجویز کنیم. مثلاً اینها:

پیش‌نمایش (بالشتک: 20 پیکسل؛ حاشیه: 10 پیکسل؛ حاشیه: 5 پیکسل نارنجی یکدست؛ تبدیل: skewX (10 درجه؛ کادر سایه: 0 0 15 پیکسل 10 پیکسل بنفش )

بگذارید خلاصه کنم

بنابراین، برای نمایش یک تصویر، فقط باید یک تگ img بنویسید و ویژگی src را در آن تنظیم کنید، که مسیر تصویر را تعیین می کند. هر چیز دیگری ویژگی های اضافی است - تراز، ابعاد، متن جایگزین، چرخش، فریم و غیره.

و در نهایت، در حالت ایده آل، همه اینها باید از طریق CSS نوشته شوند. یعنی ابعاد را در ویژگی ها تنظیم نکنید، بلکه یک کلاس سبک اضافی را روی تصویر آویزان کنید که ابعاد را تعیین می کند. در مورد alignment که در css می توان با استفاده از ویژگی text-align و همچنین بلوک های شناور این کار را انجام داد.

امیدواریم این مقاله برای شما مفید باشد. خواندن مبارک!

تصاویر فوراً به ما اطلاع می دهند که این سایت یا مقاله چقدر می تواند برای ما جالب باشد، حال و هوای ایجاد کند و موضوعی را به روشی جدید نشان دهد. گاهی اوقات یک عکس ارزش هزار کلمه را دارد.

اما اگر اینستاگرام یا فروشگاه آنلاین نیستید، ارزشش را ندارد که از آنها جدا شوید. مطلوب است که تصاویر:

• آموزنده بودند
• با رنگ بندی سایت شما مطابقت داشته باشد
• مناسب بودند

اگر عکس مناسبی ندارید، می توانید از به اصطلاح استفاده کنید فتوستاک (بانک عکس) - مکانی که بسیاری از عکس ها، تصاویر و گرافیک های برداری در آن ذخیره می شود. چنین منابع زیادی وجود دارد، حتی ممکن است نام یکی از بزرگترین آنها - Shutterstock را شنیده باشید، اما دانلودها در آنجا پرداخت می شوند.

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

فرمت های تصویر

شبکه جهانی وب عمدتا از 3 نوع تصویر استفاده می کند:

gif(فرمت تبادل گرافیکی - فرمت تبادل تصویر)

این اولین فرمتی است که در اینترنت مورد استفاده قرار گرفت. از مزایای این قالب می توان به وجود آن اشاره کرد تصاوير متحركو اندازه کوچک، صفحه به سرعت بارگذاری می شود. علاوه بر این، از شفافیت پشتیبانی می کند. نقطه ضعف - فقط استفاده می شود 256 رنگ(به همین دلیل اندازه کوچک است)، یعنی. نمی توان از آن برای تصاویر تمام رنگی استفاده کرد.

jpeg، او هست jpg(گروه مشترک کارشناسان عکاسی - گروه مشترک کارشناسان عکاسی -نام سازمان توسعه دهنده است

مناسب برای ایجاد تصاویر تمام رنگی و با کیفیت بالا، عکس ها. اندازه چنین تصاویری بزرگ است، بنابراین معمولاً بار زیادی را روی سرور وارد می کنند. اگر نیاز به فشرده سازی jpeg دارید (برای وزن کمتر)، توصیه می کنیم اندازه تصویر نهایی را بگیرید. مضرب هشت ، بنابراین افت کیفیت حداقل خواهد بود.

png(گرافیک شبکه قابل حمل - گرافیک شبکه قابل حمل. تلفظ همان پینگ، i.e. )

این قالب در ابتدا برای وب توسعه داده شد، یعنی. تصویر معمولاً وزن کمی دارد و هنگام بارگذاری صفحه را کند نمی کند. این قالب برای جایگزینی گیف منسوخ ساخته شده است، اما بر خلاف آن، از انیمیشن پشتیبانی نمی کند. Png-8مانند gif، تنها از 256 رنگ استفاده می کند. فرمت png-24از 16 میلیون رنگ پشتیبانی می کند، اگرچه وزن آن در حال حاضر نسبتاً بزرگ است. Png-32دارای همان تعداد رنگ png-24 است و به علاوه به شما امکان می دهد یک تصویر دریافت کنید با پس زمینه شفاف و می توانید میزان شفافیت را تنظیم کنید. هنگام کاهش اندازه png، کیفیت رنگ کاهش نمی یابد.

بیایید خلاصه کنیم

gif- برای انیمیشن

jpeg- برای عکس

png- برای آیکون ها، دکمه ها، پس زمینه، آرم ها، اسکرین شات ها، نقاشی ها، متون، عکس های با پس زمینه شفاف

درج تصویر در فایل html

برای افزودن یک تصویر به یک صفحه، استفاده کنید برچسب زدن (از تصویر انگلیسی - تصویر، تصویر).این یک تگ است و نیازی به تگ بسته شدن ندارد. این تگ شامل ویژگی ها می باشد.

صفت src(از منبع انگلیسی - منبع) مسیر فایل (محلی که تصویر در آن قرار دارد) را نشان می دهد. اگر تصویر در رایانه شما (سایت هنوز در حال توسعه است) یا روی سرور شما است، از یک پیوند نسبی استفاده کنید. اگر تصویر از وب باشد، یک پیوند مطلق لازم است. نحوه انجام این کار، مقاله "پیوندها" را بخوانید.

بنابراین، برای قرار دادن یک تصویر در صفحه وب خود، باید کد زیر را بنویسید:

ویژگی alt(از انگلیسی جایگزین - جایگزین) متنی را نشان می دهد که در صورت لود نشدن تصویر کاربر مشاهده خواهد کرد. مسیر به اشتباه مشخص شده است، تصویر حذف شده است، اینترنت بد است - دلایل زیادی می تواند وجود داشته باشد، و مطلوب است که فرد بفهمد پشت این نماد منفور چه چیزی نهفته است.

موتورهای جستجو برای اطمینان از پر شدن این ویژگی توجه زیادی دارند. و اعتباردهنده html (منبعی برای بررسی صحت کد) عدم وجود ویژگی alt را به عنوان یک خطا درک می کند. اگر تمام صفات پر می شود و حتی در صورت امکان حاوی کلمات کلیدی است - دید سایت شما به طور قابل توجهی افزایش می یابد، یعنی. بیشتر در جستجوها نشان داده می شود. این مربوط به حوزه سئو است و در این مرحله کافی است بدانیم که چنین ویژگی وجود دارد و برای یک سایت "زنده" باید آن را پر کرد. در حالی که سایت روی دیسک ما است، کاملاً ممکن است آن را خالی بگذاریم.

در مثال زیر، ما عمداً یک مسیر ناموجود برای تصویر مشخص کردیم تا بتوانید نحوه عملکرد ویژگی alt را ببینید.

ارتفاع و عرض تصویر

همچنین می توانید ارتفاع و عرض تصویر را تنظیم کنید، اگر تصویر اصلی به عنوان مثال باشد. بیشتر از آنچه نیاز دارید

در HTML5 توصیه می شود این کار با CSS یا ویژگی سبک ، مثل این:

در این مثال، ما 30 درصد از عرض را گرفتیم، اما نه تصویر اصلی، بلکه اندازه پنجره مرورگر را. وقتی عرض = 100% باشد، تصویر در تمام عرض مرورگر باز می شود. این ویژگی را به خاطر بسپارید درصد، به عنوان واحدهای اندازه گیری

به هر حال، اگر فقط عرض را می نوشتیم، نتیجه یکسان می شد، سعی کنید:

< img src = "https://website/tutorials/wp-content/uploads/2016/07/panda.jpg" alt= "پاندای روی درخت" style="width:30%;" >

همچنین می توانید عرض و ارتفاع را در آن تنظیم کنید پیکسل هادر مورد پاندا ما، که ابعاد اصلی آن 1196 x 796 پیکسل است، به طوری که حیوان در هنگام فشرده سازی رنج نمی برد، باید نسبت ها را حفظ کنیم، اما در اینجا بدون ماشین حساب نمی توانید انجام دهید. فرض کنید می خواهیم اندازه تصویر را 3 برابر کاهش دهیم، سپس باید ابعاد را روی 399 در 265 پیکسل قرار دهیم.

لطفا توجه داشته باشید که اگر تصویر را به تناسب افزایش دهیم، برای مثال کافی است فقط یک پارامتر را مشخص کنیم. عرض یک مرورگر هوشمند به طور خودکار اندازه کامل تصویر را محاسبه می کند.

این کد را اجرا کنید و نتیجه را ببینید:

< img src = "https://website/tutorials/wp-content/uploads/2016/07/panda.jpg" alt= "پاندای روی درخت" style="width:399px;" >

همیشه ابعاد تصویر را تنظیم کنید. معمولاً بارگذاری تصاویر بیشتر از بقیه کدهای html طول می کشد. اگر مرورگر بداند چقدر فضا برای تصاویر رزرو می کند، می تواند بدون منتظر ماندن برای بارگیری تصاویر، سایت را بارگیری کند.

کمی نفتالین

اگر کد یک سایت ایجاد شده در HTML-4 یا حتی قبل از آن را بررسی کنید، متوجه خواهید شد که اندازه های تصویر با استفاده از موارد خاص تنظیم می شوند. صفات عرض و ارتفاع. این یک روش منسوخ شده است، اگرچه هنوز در HTML5 معتبر است. با این حال، توصیه می کنیم از سبک استفاده کنید، زیرا ویژگی های عرض و ارتفاع را می توان تحت تأثیر سبک های داخلی یا خارجی قرار داد که در مرورگر یا فایل CSS شما زندگی می کنند. هنگامی که به CSS نگاه می کنیم با جزئیات بیشتری به این موضوع می پردازیم، اما در حال حاضر، فقط به نمونه ای از نحوه تأثیر سبک ها بر ویژگی های ارتفاع و عرض نگاه کنید.

در این پنجره 3 تب وجود دارد: در اولی کد html را می بینید، در دومی کد CSS و در آخری - مثل همیشه، نتیجه را مشاهده می کنید. این کار طوری عمل می کند که انگار تب اول فایل index.html، تب دوم فایل style.css و تب سوم مرورگر است. بنابراین، اکنون در CSS ما می گوید که همه عناصر با تگ img دارای عرض 100٪ هستند. اندازه‌های پیش‌فرض ویژگی‌های عرض و ارتفاع بر حسب پیکسل هستند، بنابراین نیازی به اضافه کردن واحد در اینجا ندارید.

تفاوت در نتیجه آشکار است 🙂

همچنین در نسخه های قدیمی html از ویژگی های زیر استفاده شده است:

تراز کردن، که برای تراز کردن تصویر به صورت افقی یا عمودی استفاده می شد.

hspace- اضافه کردن عکس به سمت چپ و راست به محتوای اطراف (مانند متن یا تصویر مجاور)

vspace- حاشیه بالا و پایین از تصویر به محتوای اطراف.

مرز- تنظیم ضخامت قاب در اطراف تصویر (پیش فرض صفر است)

اکنون همه این دستکاری‌ها (و خیلی بیشتر) با CSS انجام می‌شوند، بنابراین ما تصمیم گرفتیم در اینجا شما را با این کار اذیت نکنیم. اگر هنوز به نحوه کار با این ویژگی ها علاقه مند هستید - در نظرات بنویسید، ما این مورد را اضافه خواهیم کرد 🙂

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

از جایی که برچسب خود را قرار می دهیم بستگی به نحوه نمایش آن در مرورگر دارد.

مثال شماره 1 - قبل از پاراگراف:

عناصری مانند

و

رجوع شود عناصر بلوک . آنها همیشه از یک خط جدید شروع می کنند و تمام عرض پنجره مرورگر را اشغال می کنند. اگر رتبه اول را بگیرید ، و بعد از آن یک عنصر بلوک، مانند یک پاراگراف، به خط بعدی بسته می شود.

مثال شماره 2 - در ابتدای یک پاراگراف

این یک عنصر درون خطی است، داخل یک عنصر بلوک قرار می گیرد و خط جدیدی را شروع نمی کند. در مثال بالا، متن به دلیل کد به دور تصویر می پیچد در داخل املا شده است

زیرنویس برای تصاویر

برای برچسب گذاری یا امضای یک عکس در یک صفحه استفاده می شود برچسب زدن

(از شکل انگلیسی - نقاشی). این تگ نشان می دهد که محتوایی مانند تصاویر، عکس ها، نمودارها و ... در داخل آن قرار داده شده است.

برچسب بزنید