نحوه قرار دادن تصویر در صفحه html درج یک فایل گرافیکی در یک صفحه وب

در حین سفر در اینترنت، البته در بسیاری از سایت ها تصاویر، بنرها، عکس ها و تصاویر گرافیکی مختلفی را مشاهده می کنید. امروز یاد خواهیم گرفت که چگونه تصاویر را در یک صفحه 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=" نمای جلوی ماشین" !}– متن جایگزین در اینجا نوشته شده است که وقتی ماوس را روی تصویر می‌برید نمایش داده می‌شود.

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

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

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

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

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

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

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

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

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

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

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

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

یک مقاله بسیار مفید برای وب مسترهای مبتدی. تنها هشدار به ویژگی "alt". در رابطه با شکل، مقاله تفسیر زیر را ارائه می دهد: "alt=" نمای جلوی ماشین" – здесь прописывается альтернативный текст который высвечивается при наведении мыши на картинку." Не совсем точно: для рисунка - это прорегатива атрибута 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 است. اگر نام پوشه را برای تصاویر موجود در هاست خود تغییر دهید، سپس آن را در لیست تغییر دهید، این کل ترفند است.

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

و من همه چیز را در آخرین Mozilla Fire Fox باز می کنم))

مسیر عکس من C:Documents and SettingsdenisDesktopkoffevinogradwwwImg هستش و اسم عکسش گیف هست اسمش هم 1.gif هست...این کار رو تو notepad انجام میدم من این کار را انجام دادم و مسیر کامل بیرون نمی آید، موزیلا عکس کاوشگر را نمی بیند و آن را با صلیب قرمز برجسته می کند.

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

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

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

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

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

1. نحو برچسب

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

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

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

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

ویژگی‌های باقی‌مانده اختیاری هستند؛ در زیر به آنها نگاه خواهیم کرد. ابتدا، اجازه دهید یک مثال ساده از خروجی یک تصویر به HTML ارائه دهیم.

2. نحوه درج یک عکس در html

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

مثال 2.1. استفاده از تگ

... ...

این کد

در این مثال، آدرس مستقیم تصویر را از تصاویر در Yandex Photos نشان دادیم. اغلب، پیوندهایی به تصاویری ارائه می شود که در همان 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="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: Y px; (Y - تورفتگی پایین)
• حاشیه سمت چپ: L px; (L - تورفتگی سمت چپ)
• حاشیه سمت راست: R px; (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. چگونه یک تصویر را به یک پیوند تبدیل کنیم

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

مثلا

... آدرس_تصویر"> ...

5. چگونه گوشه های یک عکس را گرد کنیم

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

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

26.06.2015

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

تصویر پس زمینه به عنوان پس زمینه قرار می گیرد که در بالای آن می توانید تصاویر، متن، جداول و غیره دیگر را درج کنید.

تصویر معمولی سایر عناصر صفحه (سایر تصاویر، متن، جداول و غیره) را از بین می برد. با استفاده از مثال، همه چیز را خواهید دید و درک خواهید کرد.
برای صفحات وب، استفاده از فرمت های تصویری JPEG (JPG)، GIF و PNG توصیه می شود.

○ چگونه یک عکس به عنوان پس زمینه درHTML

برای ایجاد یک تصویر پس زمینه برای یک برچسب شما باید ویژگی "background" را مشخص کنید:

حالا بیایید به مثال کامل نگاه کنیم. فایل تصویری “fon.jpg” را در کنار فایل HTML قرار دهید.

و این کد را در فایل HTML قرار دهید:

Jpg">

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

توجه

نام اشتباه:

نام صحیح:

○ نحوه درج تصویر درHTML

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

حالا بیایید به مثال کامل نگاه کنیم. فایل تصویر “kartinka.jpg” را در کنار فایل HTML قرار دهید و این کد را در فایل HTML بنویسید:

سلام، این اولین صفحه من در سایت است.

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

توجه: نام عکس باید به لاتین نوشته شود در غیر این صورت تصویر نمایش داده نمی شود.

نام اشتباه:

نام صحیح:

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

Jpg">

○ نحوه درج یک عکس در صورتی که در پوشه باشد "img" یا "تصاویر"؟

اگر تصویر در پوشه "img" یا "images" است، باید مسیر فایل HTML به پوشه "img" یا "images" را مشخص کنید و سپس فقط نام تصویر را با پسوند وارد کنید. شبیه این خواهد شد:

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

پست قبلی
ورودی بعدی

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

یکی از اجزای مهم هر تصویر اندازه (حجم، وزن) آن بر حسب کیلوبایت است، زیرا هر چه بزرگتر باشد، بارگذاری صفحه HTML بیشتر طول می کشد. بنابراین، سه فرمت رایج در اینترنت وجود دارد که دارای نسبت بهینه اندازه و کیفیت تصویر هستند - اینها GIF، JPG (JPEG) و PNG.

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

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

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

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

نمونه ای از درج تصاویر در یک صفحه HTML

اینها پرندگان متفاوتی هستند.

نتیجه در مرورگر

تغییر اندازه تصاویر در HTML

به طور پیش فرض، همه مرورگرها تصاویر را در اندازه طبیعی خود نمایش می دهند. اما با استفاده از ویژگی های عرض و ارتفاع تگ می توانید ارتفاع و عرض آنها را تغییر دهید. مقادیر به صورت اعداد نشان داده می شوند که ابعاد را به پیکسل (نیازی به قرار دادن حروف px در انتهای اعداد نیست) یا درصد نشان می دهند که در این صورت باید علامت % را در انتها قرار دهید.

نمونه ای از تغییر اندازه تصاویر

نتیجه در مرورگر

شما نباید از تغییر اندازه سوء استفاده کنید، زیرا هنگامی که تصاویر را به صورت بصری کاهش می دهید، حجم آنها بر حسب کیلوبایت کاهش نمی یابد و بر این اساس بارگذاری آنها به همان اندازه طول می کشد. و هنگامی که تصاویر را بزرگ می کنید، ممکن است تاری و سایر اعوجاج ها ظاهر شوند.

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

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

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

style="float:left" - تصویر را به سمت چپ کادری که تصویر در آن قرار دارد فشار می دهد و تمام متن در اطراف آن به سمت راست جریان دارد.

style="float:right" - تصویر را در سمت راست بلوک فشار می دهد و متن در اطراف آن به سمت چپ جریان می یابد.

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

پراگراف اول.

متن قبل از عکس

بعد از عکس.

پاراگراف آخر

نتیجه در مرورگر

style="clear:left" - جریان تصاویر تراز چپ را قطع می کند.

style="clear:right" - جریان تصاویر تراز راست را قطع می کند.

style="clear:both" - جریان تصاویر تراز شده در هر دو طرف را قطع می کند.

مثالی از قطع جریان تصویر

پراگراف اول.

متن قبل از عکس

بعد از عکس.

پاراگراف آخر

نتیجه در مرورگر

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

مانند بسیاری دیگر از تگ های HTML، یک ویژگی عنوان وجود دارد که وقتی ماوس را روی تصویر می‌برید، یک راهنمای متنی را نمایش می‌دهد.

title="هر متنی."!}

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

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

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

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