نحوه درج یک تصویر در HTML - ویرایش، تراز، ویژگی ها. تصاویر در HTML

سلام!!! در این مقاله با نحوه درج یک تصویر در یک سند HTML آشنا خواهید شد. اصلا سخت نیست. اما ابتدا، من می خواهم چند نکته در مورد تصاویر در یک صفحه وب به شما ارائه کنم.

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

بیا شروع کنیم.

چگونه یک تصویر را در html وارد کنیم؟
بنابراین، همانطور که گفتم - هیچ چیز پیچیده ای در اینجا وجود ندارد، این کد html را اضافه کنید.

کارتینکا نام عکس است
jpg پسوند تصویر است. پسوند می تواند gif، png، bmp باشد.

اگر تصویر در پوشه images قرار دارد، مسیر تصویر به صورت زیر خواهد بود:

images - نام پوشه ای که تصویر "kartinka.jpg" در آن قرار دارد.

اگر عکس در سایت دیگری باشد، کد به این صورت خواهد بود:

https://www.site آدرس سایت است.

مثال :

برای انجام این کار، به سادگی تصویر را بین عنصر مرجع قرار دهید:

ویژگی های تصویر

ALIGN - این ویژگی برای بسته بندی یا تراز کردن تصویر به صورت افقی استفاده می شود.
ترک کرد - در تراز چپ، متن به سمت راست پیچیده می شود.
درست - تراز راست، متن به سمت چپ پیچیده می شود.

نتیجه :

تراز سمت راست

HSPACE - تورفتگی های افقی از تصویر (به پیکسل).
VSPACE - فاصله عمودی از تصویر (بر حسب پیکسل).

نتیجه :

حاشیه های تصویر

HEIGHT - ارتفاع تصویر (بر حسب پیکسل).
WIDTH - عرض تصویر (به پیکسل).

نتیجه :

عنوان - این عنوان عکس است زمانی که نشانگر ماوس را روی تصویر ببرید عنوان نمایش داده می شود.

title="(!LANG:سلام به همه - وب سایت!!!!}">

نتیجه :

عنوان عکس

BORDER - این ویژگی مسئول اندازه قاب اطراف تصویر است. فریم ها در چنین مواردی ظاهر می شوند زمانی که یک تصویر را پیوند می کنید. اگر مشخصه BORDER را صفر کنید، هیچ حاشیه ای نمایش داده نمی شود.

نتیجه :

و اگر مقدار border را به 5 تغییر دهید:

نتیجه :

هر تصویری را می توان به عنوان پس زمینه استفاده کرد. برای این کار، ویژگی پس زمینه را به تگ body اضافه کنید.

background="your_background.jpg">

متن را می توان در پس زمینه تصویر نمایش داد.

مثال :

نتیجه :

تصویر به عنوان پس زمینه

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

حالا این همه مطمئن است. بریم سراغ درس بعدی.

کار با تصاویر در HTML (نحوه درج یک تصویر، تغییر اندازه آن، تبدیل تصویر به یک لینک).

درج تصویر

یک تگ جفت نشده برای درج یک تصویر در یک سند html استفاده می شود. ، که در سندی که قرار است تصویر در آن درج شود قرار می گیرد. این تگ دارای یک پارامتر مورد نیاز است src، که مقدار آن مسیر تصویر مورد نظر را در فهرست سایت شما مشخص می کند.

به عنوان مثال، برای قرار دادن یک تصویر در صفحه:

در جای مناسب در سند خط قرار داده شده است:

این به مرورگر اجازه می دهد تا بداند که در فهرست اصلی سایت قرار دارد www.mysite.comیک زیر شاخه وجود دارد img 1.png

در اینجا ما مسیر کامل (یا آدرس مطلق) به تصویر. و می توانید مشخص کنید آدرس نسبیتصاویر:

مرورگر این خط را به صورت زیر تفسیر می کند: در فهرستی که این سند html در آن قرار دارد، یک زیر شاخه وجود دارد img، حاوی تصویری به نام است 1.png، که باید در صفحه قرار گیرد.

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

مرورگر چنین خطی را به صورت زیر تفسیر می کند: ترکیبی از کاراکترها ../ به این معنی که از دایرکتوری که سند html داده شده در آن قرار دارد، باید یک سطح به بالا بروید. و سپس، مانند مثال قبلی: در دایرکتوری که در آن به پایان رسیدیم یک زیر شاخه وجود دارد img، حاوی تصویری به نام است 1.png، که باید در صفحه قرار گیرد.

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

ابعاد تصویر

اندازه هر تصویر با دو پارامتر عرض و ارتفاع مشخص می شود. برچسب بزنید گزینه های مربوطه وجود دارد: عرضو ارتفاع. این پارامترها مقادیر پیکسل (px) را می گیرند.

شما می توانید ابعاد واقعی تصویر را تنظیم کنید:

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

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

به عنوان مثال، برای بزرگنمایی تصویر خود 1.5 برابر، می توانیم بنویسیم:

یا

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

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

به عنوان مثال، اگر بخواهیم تصویری دقیقاً نصف عرض صفحه ما باشد، موارد زیر را می نویسیم:

و به دست خواهیم آورد:

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

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

به عنوان مثال، به این صورت می توانیم یک حاشیه ضخیم 3 پیکسلی به تصویر خود اضافه کنیم:

این چیزی است که مرورگر به ما نشان می دهد:

رنگ قاب با رنگ متن روی صفحه مطابقت دارد که با استفاده از پارامتر تنظیم می شود متنبرچسب زدن (درس 6. ویژگی های صفحه - تنظیمات برچسب بدنه را ببینید)، به طور پیش فرض سیاه است.

و اگر نمی خواهید قاب را ببینید، پارامتر را مجبور کنید مرزمقدار صفر:

متن جایگزین

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

زمان و اگر تصویر بارگذاری شد، متن جایگزینهنگامی که ماوس خود را روی همان تصویر ببرید نشان داده می شود.

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

می توانید متن جایگزین چند خطی ایجاد کنید.

برای این کار کافیست یک خط شکست در سند html وارد کنید.

متن">

تراز تصویر

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

در زیر جدولی از مقادیر پارامتر ممکن است تراز کردن:

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

بالشتک دور تصویر

برای جلوگیری از بسته شدن متن خیلی نزدیک به تصویر، می توانید padding را در اطراف تصویر تنظیم کنید. شما می توانید این کار را با استفاده از پارامترها انجام دهید hspace(تورفتگی چپ و راست) و vspaceبرچسب (تورفتگی بالا و پایین). .

مثال زیر حالتی را نشان می‌دهد که متن دور یک تصویر می‌پیچد، با تصویر تراز چپ و 5 پیکسل در اطراف آن قرار گرفته است:

در شهر استکهلم، در معمولی ترین خیابان، در معمولی ترین خانه، معمولی ترین خانواده سوئدی به نام سوانتسون زندگی می کنند. این خانواده متشکل از معمولی ترین پدر، معمولی ترین مادر و سه تا از معمولی ترین فرزندان - Bosse، Betan و The Kid است.

این نتیجه در مرورگر است:

در شهر استکهلم، در معمولی ترین خیابان، در معمولی ترین خانه، معمولی ترین خانواده سوئدی به نام سوانتسون زندگی می کنند. این خانواده متشکل از معمولی ترین پدر، معمولی ترین مادر و سه تا از معمولی ترین فرزندان - Bosse، Betan و The Kid است.

تقسیم یک تصویر به قطعات

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

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

مقادیر تهی: مرز = "0", cellpacing = "0", cellpadding = "0".

در مثال زیر تصویر را به 4 قسمت تقسیم می کنیم. جدول به این صورت است:

و این هم از نتیجه:

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

بنابراین، قرار دادن یک تصویر در html نیز یکی از مهم‌ترین مؤلفه‌ها است، بنابراین هرکسی که می‌خواهد به تنهایی وب‌سایت بسازد، حتماً باید آن را بداند. این دقیقاً همان کاری است که ما امروز با این همه باکانالیا انجام خواهیم داد)))

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

1. برچسب تک است، بنابراین نیازی به بستن آن نیست
2. تگ همیشه در ارتباط با ویژگی کار می کند که مسیر تصویر را مشخص می کند.

به طور کلی، بیایید به یک مثال برای تجمیع همه این اقدامات نگاه کنیم. درست میگم؟ مطالب درس را دانلود کرده و فایل html را در notepad باز کنید. و حالا قبل از متن اصلی موارد زیر را بنویسید:

همه چيز. در اینجا چنین رکورد کوتاهی تصویری را در سایت ما در اختیار ما قرار می دهد. سعی کنید آن را در یک سند بنویسید.

حالا فایل را ذخیره کرده و در مرورگر خود اجرا کنید. بیایید ببینیم چه کاری می توانیم انجام دهیم. من اینجوری گرفتم

ویژگی های

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

alt

اگر به طور ناگهانی به دلایلی عکس بارگیری نشد یا در دسترس نباشد، متنی را مشاهده می کنید که با مقدار مشخصه Alt نوشته شده است. معمولا آنچه در تصویر نشان داده شده است در اینجا نوشته شده است، i.e. اگر چیزی در مورد ملیت ها به تصویر کشیده شده است، بهتر است "مردان و زنان از ملیت های مختلف" را به صورت alt بنویسید. به عنوان مثال، به نظر می رسد این است:

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

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

عرض و ارتفاع

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

Width مسئول عرض تصویر است و خود اندازه در مقادیر آن تنظیم می شود. به طور کلی، اگر تصویری دارید، به عنوان مثال، 640 * 480 پیکسل، و باید آن را در سایت 320 * 240 نمایش دهید، فقط باید موارد زیر را انجام دهید:

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

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

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

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

ما پس انداز می کنیم و اکنون به آنچه به دست آورده ایم نگاه می کنیم. هوم، این چیزی نامتناسب است). در مجموع فکر می‌کنم متوجه موضوع شده‌اید. کمی خودتان تمرین کنید تا اندازه کار محکم شود و سپس به ویژگی بعدی بروید.

تراز کردن

خوب، شما قبلاً با این ویژگی از آن مقاله آشنا هستید، زمانی که ما اصلاً آن را مرور کردیم. و احتمالاً قبلاً حدس زده اید که او مسئول مکان تصویر است.

در کل پنج پارامتر برای تراز کردن وجود دارد:

• تراز چپ - چپ
• تراز راست - راست
• وسط - تراز کردن تصویر در امتداد خط پایه خط (با یک مثال خواهید دید که این به چه معناست)
• بالا - بالای تصویر داده شده از نظر ارتفاع با بلندترین عنصر در ردیف داده شده تراز شده است
• پایین - تراز کردن حاشیه پایین تصویر با توجه به متن

خوب، بیایید اینجا لیست نکنیم، اما طبق سنت همه چیز را با یک مثال نشان خواهم داد. سند html آماده شده را از اینجا دانلود کرده و باز کنید. در آنجا 5 پاراگراف یکسان را خواهید دید. تصاویر را با ویژگی های توصیف شده در آنجا درج کنید:

خوب، حالا ما سند خود را طبق معمول ذخیره می کنیم و می بینیم که چه چیزی به دست آورده ایم. خوب؟ تفاوت را ببین؟ اکنون می دانید که این پارامترها چگونه متفاوت هستند).

مرز

ویژگی border برای ضخامت حاشیه روی تصویر تنظیم شده است. و هرچه بزرگتر باشد، قاب به همان نسبت ضخیم تر است. سعی کنید این ویژگی را به تصویر خود اضافه کنید، اما دائماً مقدار آن را تغییر دهید و خودتان خواهید دید که مرز چقدر ضخیم تر می شود.

hspace و vspace

خوب، بیایید به آخرین ویژگی های تگ img برای امروز نگاه کنیم. Space (انگلیسی) به عنوان space، space، space (کلید) و غیره ترجمه می شود. پیشوندهای H و V به معنای افقی و عمودی هستند. اینجا نباید سوالی باشد.

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

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

ضمناً می‌توانید این تصاویر را به‌عنوان سربرگ برای سایت‌ها درج کنید، تصاویر را به‌عنوان لینک و غیره بسازید. من در مورد همه اینها صحبت کردم.

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

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

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

با احترام، دیمیتری کوستین

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

1. نحو برچسب

توضیحات تصویر"src="URL" [ویژگی‌ها]>

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

ویژگی src مورد نیاز است. آدرس تصویر خروجی را مشخص می کند. شما می توانید یک URL مطلق یا نسبی را مشخص کنید. اگر آدرس را مشخص نکنید یا با خطا بنویسید، تصویر نمایش داده نمی شود.

ویژگی alt="(!LANG:description" - не является обязательным, но лучше сразу себя приучить к тому, чтобы прописывать его каждому изображению, поскольку это нужно как для пользователей, так и для поисковых систем.!}

بقیه صفات اختیاری هستند و در ادامه مورد بحث قرار خواهند گرفت. ابتدا یک مثال ساده از نمایش یک تصویر در html ارائه می دهیم.

2. نحوه درج یک تصویر در html

برای درج تصویر در html از تگ استفاده کنید . در بالا در مورد نحو بحث کردیم. بیایید مثال های عملی بیاوریم.

مثال 2.1. استفاده از برچسب

... ...

این کد

در این مثال، ما آدرس مستقیم تصویر را از تصاویر در Yandex Photo مشخص کرده ایم. اغلب، پیوندهایی به تصاویری که در همان URL قرار دارند نشان داده می شوند. به عنوان مثال، src="/img/kartinka.jpg"، i.e. یک آدرس نسبی مشخص شده است.

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

مثال 2.2. نمایش چندین تصویر در html یکی پس از دیگری

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

در صفحه به شکل زیر تبدیل می شود:

اگر تصویر دیگری ارسال می‌کردیم، در یک خط جدید قرار می‌گرفت، زیرا دیگر در این خط نمی‌خورد.

مثال 2.3. استفاده از متن جایگزین (alt) در img

توصیه می شود متن جایگزین (خصلت alt) در تگ بنویسید ، تا خود را در مقابل در دسترس نبودن تصویر بیمه کنید. در زیر مثالی با استفاده از متن جایگزین آورده شده است. در مورد اول، اندازه تصویر را تعیین نکردیم، اما در مورد دوم انجام می دهیم.

... نمونه تصویر"src="321.jpg"> ...

در صفحه به شکل زیر تبدیل می شود:

اگر تصویر دیگری قرار می‌دادیم، روی یک خط جدید قرار می‌گرفت، زیرا دیگر روی این خط قرار نمی‌گرفت.

حالا بیایید تمام ویژگی های برچسب را با جزئیات بررسی کنیم. .

3. ویژگی ها و ویژگی ها را تگ کنید

1. خاصیت align="parameter" - تراز تصویر را تعیین می کند. این مقدار بر نحوه پیچیدن متن در اطراف تصویر نیز تأثیر می گذارد. می تواند پارامترهای زیر را داشته باشد:

• تراز چپ - چپ
• وسط - وسط تصویر را با خط پایه خط فعلی تراز کنید
• پایین - تراز کردن حاشیه پایین تصویر با متن اطراف
• بالا - حاشیه بالای تصویر با بالاترین عنصر خط فعلی تراز شده است
• تراز راست - راست

مثال 3.1. تراز راست تصویر در html

... https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

در صفحه به شکل زیر تبدیل می شود:

2. ویژگی alt="(!LANG:text" - подсказка/описание картинки. Выполняет сразу две важные функции:!}

• یک راهنمای ابزار در شناور می دهد
• اگر تصاویر در مرورگر غیرفعال باشند، این متن نمایش داده می شود

این ویژگی همچنین هنگام رتبه بندی تصاویر در Yandex Images و Google Images بسیار مهم است. باید برای هر تصویر نوشته شود، زیرا این یکی از عوامل در الگوریتم های موتورهای جستجو است.

مثال 3.2. خروجی تصویر در html با فریم (حاشیه)

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

در صفحه به شکل زیر تبدیل می شود:

4. ویژگی bordercolor="color" - رنگ فریمی را که دور تصویر می پیچد را تعیین می کند. تنها زمانی منطقی است که مشخصه مرزی بزرگتر از 0 باشد.

مثال 3.3. نمایش تصویر در html با حاشیه رنگی

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

نتیجه را می توان کمی بالاتر دید.

توجه داشته باشید

ویژگی های border و bordercolor را می توان در سبک های CSS برای img تنظیم کرد:

... http://img-fotki.yandex.ru/get/4423/80300288.f/0_631d9_e822264_M.jpg"> ...

5. ویژگی height="NUMBER" - ارتفاع تصویر را بر حسب پیکسل یا درصد تنظیم می کند. به عنوان مثال، اگر اندازه یک تصویر 400x200 باشد و ارتفاع آن را 150 پیکسل تعیین کنیم، آنگاه به 300x150 (25٪ کوچکتر) فشرده می شود. متناسب

6. Property width="NUMBER" - عرض تصویر را بر حسب پیکسل یا درصد تنظیم می کند. به عنوان مثال، اگر اندازه یک تصویر 1000x800 باشد و عرض آن 1200 پیکسل باشد، به طور خودکار 20٪ به 1200x960 گسترش می یابد.

7. خاصیت hspace="NUMBER" - افست افقی تصویر را بر حسب پیکسل از سایر اشیاء html تنظیم می کند.

8. Property vspace="NUMBER" - افست عمودی تصویر را بر حسب پیکسل از سایر اشیاء html تنظیم می کند.

توجه داشته باشید

به جای hspace و vspace به شما توصیه می کنم از حاشیه قدیمی و اثبات شده استفاده کنید (می توانید در درس توضیح سبک های html در مورد آن بیشتر بخوانید). بگذارید به طور خلاصه یادآوری کنم:

• margin-top: X px; (X - تورفتگی بالا)
• margin-bottom: Ypx; (Y - تورفتگی پایین)
• حاشیه سمت چپ: Lpx; (L - تورفتگی سمت چپ)
• حاشیه سمت راست: Rpx; (R - تورفتگی سمت راست)

تورفتگی از اشیاء را در پیکسل تنظیم کنید. مقادیر منفی مجاز است. مقدار پیش فرض یا از جد به ارث برده می شود یا روی 0 تنظیم می شود.

مثلا. بالشتک سمت چپ 50 پیکسل و قسمت بالایی 10 پیکسل است.

... margin-top: 10px; حاشیه سمت چپ: 50 پیکسل"src=" https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"> ...

در صفحه به شکل زیر تبدیل می شود:

در این مثال، تورفتگی در بالا 10 پیکسل، در سمت چپ 50 پیکسل بود.

9. Property class="class_name" - می توانید یک کلاس به یک تصویر اختصاص دهید تا استایل را برای همه تصاویر این کلاس تنظیم کنید.

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

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

مثلا

... image_url"> ...

5. نحوه گرد کردن گوشه های یک تصویر

https://img-fotki.yandex.ru/get/173114/19749220.11/0_da31c_45c53ada_orig.jpg"style="border-radius: 30px">

خواننده عزیز، اکنون شما چیزهای بیشتری در مورد تگ html img یاد گرفته اید. اکنون به شما توصیه می کنم که به درس بعدی بروید.

تمام آنچه در مورد این مرد شناخته شده است
اینکه او به زندان نرفته است، اما چرا به زندان نرفته است، معلوم نیست.
مارک تواین

این درس در مورد نحوه درج تصویر در html، نحوه چیدمان آن، نحوه پیچیدن متن دور یک تصویر و غیره. به هر حال، مشخص است که تصاویر باعث جذابیت بیشتر و متمایز شدن سایت از سایر منابع می شود، بنابراین امکان استفاده از برچسب و ویژگی های آن در اینترنت امروزی بسیار مفید است. اما نکته اصلی اینجا حس نسبت است!

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

در درس در مورد، قبلاً در مورد اینکه چگونه می توانید از تصاویر به عنوان پس زمینه یک سند html استفاده کنید صحبت کردم. حال بیایید در مورد نحوه استفاده از گرافیک در "لایه بالایی" صفحه html صحبت کنیم.

§ 1. نحوه درج یک تصویر

برای درج تصاویر در HTML، از تگ استفاده کنید imgاز جانب اجباریصفت SRC. این ویژگی مسیر فایل تصویر را به مرورگر می گوید. آن ها برای درج تصویر با عنوان logo.jpgبه یک مکان خاص در صفحه (به شرطی که هم صفحه و هم تصویر قرار گرفته باشند در یک پوشه(دایرکتوری)) باید کد html زیر را در این مکان وارد کنید:

src="logo.jpg">

اگر تصویر و صفحه در ناهمساندایرکتوری ها (پوشه ها)، باید مسیر تصویر را مشخص کنید به طور نسبیصفحات به عنوان مثال، اگر صفحه html در سایت دایرکتوری (پوشه) قرار دارد، در همان دایرکتوری (پوشه) یک زیر شاخه (پوشه) تصاویر وجود دارد که تصویر logo.jpg ما در آن قرار دارد، سپس برای درج آن نیاز دارید برای نوشتن اینگونه:

images/logo.jpg">

و شما نمی توانید رنج بکشید و اشاره کنید آدرس کامل عکس. به عنوان مثال، مانند این:

http://www.png">

در حالت دوم، مرورگر کد را به صورت زیر نمایش می دهد:

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

علاوه بر ویژگی مورد نیاز SRCدر برچسب imgچند ویژگی اختیاری دیگر نیز وجود دارد. بیایید آنها را با جزئیات بیشتر در نظر بگیریم.

§ 2. تعیین اندازه تصویر

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

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


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

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

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

width="50" height="20">

width="10%" height="5%">

§ 3. متن جایگزین

اگر کاربر نمایش تصاویر را در تنظیمات مرورگر غیرفعال کرده باشد، به جای تصویر، می توانید متن جایگزینی را نمایش دهید که توضیح دهد چه نوع گرافیکی باید در اینجا باشد. این با استفاده از ویژگی به دست می آید ALT:

در این صورت، مرورگر فضای صفحه را برای تصویر رزرو می کند، اما به جای خود تصویر، متنی را که می نویسید در مقدار مشخصه نشان می دهد. ALT:

باز هم اگر کاربر نمایش گرافیک را غیرفعال کرده باشد این اتفاق می افتد. در غیر این صورت، تصویر متن جایگزین را مخفی می کند.

§ 4. تراز تصویر

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

• ترک کرد- تصویر در لبه سمت چپ صفحه قرار دارد و متن در اطراف تصویر در سمت راست قرار می گیرد.


• درست- تصویر در لبه سمت راست صفحه قرار دارد و متن و سایر عناصر در سمت چپ دور تصویر می پیچند.

مثلا کد HTML

مرورگر به این صورت نمایش داده خواهد شد

و این کد HTML:

به این صورت خواهد بود:

برای جلوگیری از پیچیدن متن در اطراف یک تصویر، می توانید از برچسب استفاده کنید BR(برای ما از بخش آخر در مورد آشنا هستیم). برچسب بزنید BRیک ویژگی وجود دارد روشن، که می تواند سه مقدار داشته باشد:

• ترک کرد- توقف بسته بندی متن در اطراف تصاویر تراز چپ.


• درست- توقف بسته بندی متن در اطراف تصاویر تراز راست.


• همه- از پیچیدن متن در اطراف تصاویری که هم تراز چپ و هم راست هستند، جلوگیری کنید.