Както и в HTML, вмъкнете изображение графично, фон. Как да вмъкнете изображение в HTML от компютъра, в центъра, в таблицата

Визуалната част е една от най-важните при работа с обекти. Разбира се, тя е по-лоша от функционалната, но не трябва да се изхвърля. Нека да поговорим за това как да инсталирате HTML изображение от вашия компютър на вашия сайт. Една възможност за това е предоставена или няколко? Как в HTML да вмъкнете изображение, така че други хора да го виждат? Какво е по-добре да използвате - компютър или сървър?

Какво представлява HTML?

Маркиращ език за хипертекстови документи - така стои съкращението. С него е бил гръбнакът на бъдещата сайта, тук той е работил поставяне на основните елементи. След това каскадните стилови листове и php файловете, които са отговорни за прехвърлянето на данни, вече са конфигурирани. Но в сърцето на всяка страница е HTML. С негова помощ, между другото, изображенията се коригират. Има и други начини, но ако искате да се осигури първоначална цена от нещо по-просто, като например рисуване, използвайте името му. И сега се обръщаме към въпроса как да вмъкнете изображение в HTML.

Използвайки маркера img

Започваме да използваме графика. Как да вмъкна фоново изображение в HTML документ? И на първо място, това означава вмъкване на файл като обект на страница. За такова допълнение се използва img. Този маркер е договорена покупка, в която има заменяемо съдържание. Той носи само четири части език на хипертекстова маркировка. Едната е src, височина и ширина, те ще бъдат обсъдени по-късно. Другите три са обект, вграждане (за вграждане на медийно съдържание) и iframe (използване на пламъци). Маркерът работи така, сякаш съдържа малък елемент. Единствената разлика е, че се използва външно външно съдържание, което се показва. Трябва обаче да има файл на трета страна, който в действителност ще бъде зареден. Ако имате въпрос за това как да вмъкнете фоново изображение в HTML, то е по-добре да го изпуснете. Тъй като ще се показва само когато се изпълнява самият компютър, на който се намира изображението.

Използване на атрибутите src

Така че, ние работим върху въпроса как да вмъкнете графично изображение в HTML документ. За да укажете пътя към изображението, което трябва да бъде заредено, използвайте src. Общата схема е, както следва: трябва да използвате този атрибут, равен знак и да посочите адреса.

След като браузърът стигне до маркера при анализа на HTML, той незабавно създава област, в която ще се покаже договорената покупка. Той е в него и ще бъде зареден външен файл. Пътят не трябва да съдържа грешки, тъй като ще бъде програмата, която ще се изпълнява върху нея. И ако не намери файла, ще се покаже иконата за грешка, която не изглежда много естетически. Как да вмъкнете изображение в таблицата с HTML документи? Необходимо е да напишете всички необходими кодове в желаната клетка.

Конфигуриране на изображението на сървъра: височина и ширина в маркера img

Значи знаем как да вмъкваме изображение в HTML. Ще го разберем сега, как да го настроим. Веднага след като файлът започне да се изтегля на компютъра на потребителя, размерът на снимката ще бъде определен незабавно. А какво ще стане, ако първоначалните параметри не съвпадат с това, което искате? В този случай параметрите за височина и ширина (в пиксели) могат да ви помогнат. В този случай кодът ще бъде написан както следва: първо src и адреса на файла. Тогава подобен дизайн определя ширината и какво трябва да бъде ширината. И последната - височина и височина. Уеб администраторите често правят такава грешка: те качват голям файл на сървъра, чийто размер е няколко мегабайта. Пътят се предписва и изображението се коригира до желания размер. В резултат потребителят може да види как малко изображение се зарежда доста бавно. Това не е много атрактивен външен вид.

Препоръки за работа

За да избегнете негативност, намалете размера на изображението предварително. Ако не сте сигурни кои параметри са необходими за привлекателен външен вид, създайте копие и експериментирайте с него. Също така трябва да се внимава за оптимизиране на теглото. Необходимо е да се намали теглото на графичните файлове без загуба на качество, като се прехвърлят на други разширения или се използват специални онлайн услуги и програми. Това ще бъде оценено не само от потребителите на сайта, но и от уеб администратора - в края на краищата тези файлове ще се зареждат по-бързо и ще имат по-малко място за заемане на хостинга.

Пример за възможности за запис

Нека да разгледаме как можете да зададете пътя към изображението:

1. Име на файл.

2. Посочете адреса на изображението, разположен на един локален компютър (сървър).

3. Подробният път към местоположението на файла на другия хост.

Когато използвате примера от първия абзац, изображението трябва да бъде в същата директория като изображението. Второто местоположение е подпапка, отнасяща се до текущата страница. Третият пример определя абсолютния път, където може да се намери желаното изображение. В последния случай, имайте предвид, че на снимката може да бъде на всеки сървър (ако такова използване не е забранено в .htaccess файла). Ако обаче бъде изтрит, изображението на сайта Ви ще изчезне. HTML е функция, която изисква наличието на само маркиране на документа, а всичко останало може да бъде качен на сървъра страна. Тези методи често се използват за увеличаване на скоростта на изтегляне (но тук трябва да знаете как да използвате този инструмент).

Присвояване на alt и заглавие на img?

Какво трябва да направя, когато графичен файл не е зареден с HTML документ по някаква причина? Ако пътят или нещо друго е неправилно написан, трябва да използвате атрибута Alt. Той изпълнява задачата за алтернативно представяне на картината. Да предположим, че графикът не е зареден. Но браузърът все пак ще формира областта под изображението. Също така е необходимо в случаите, когато потребителят очаква натоварване и е необходимо да му покажем, че програмата се готви да приеме графика.

За да покажете придружаващия текст, използвайте специалния атрибут на заглавието. Всъщност това подсказка и можете да го използвате за почти всеки видим елемент от HTML кода. Това е добре, защото ни позволява да обясним някои аспекти. Използването на две показано в този субтитри атрибут е както следва: в горния пример след първата височина натрупват н, а след това и титлата.

И тези атрибути не само служат за създаване на удобство за посетителя. Те могат да окажат положително влияние върху популяризирането на сайта. Затова винаги трябва да използвате ключови думи в тях. Това ще бъде подобряване класирането ресурс в класирането на сайтове и услуги на изображения на търсачките. Но във всичко трябва да бъдете внимателни и рационални.

Подравняване на снимки

За изображенията и общо четирите елемента на маркиращия език, споменати по-рано, беше въведен атрибутът "align". С него можете да промените местоположението на снимката. По подразбиране той е подравнен с долния край. За това дъното е отговорен. И как да направя на върха? Това изисква връх. На практика ще изглежда така: след src, където е указан адресът на изображението, добавете подравняването на атрибута и неговата стойност.

И в реда, където се намира картината, тя ще бъде подравнена на горния край. Как в HTML да вмъкнете изображението в центъра? Има още една възможност за запис - средата. С използването му нищо не се променя съществено. Ако използвате този код, изображението ще бъде подравнено в средата. Можете също да направите текста обвит около снимката. За тази цел се прилагат десните и левите атрибути. В такива случаи изображението става "плаващо". Офсетовът вляво изглежда същият като другите правописни вариации. Използването вдясно ще даде подобен резултат с разликата, че картината ще бъде поставена отдясно. Прилагането на тези инструкции има свои собствени нюанси. Значимият проблем е много близката позиция на текста към изображението. Поради това се създава ефект на сцепление, което е доста неприятно за окото. Но можете да го направите с каскаден стилов лист или HTML код. Използвайте атрибутите vspace и hspace за такива промени. Първият поставя вдлъбнатината отдолу и отгоре, а втората - отдясно и отляво.

Осъществяване на фона

Как да вмъкнете изображение в HTML страницата на сайта? Функционалният атрибут е много полезен за постигането на тази цел. Тя е част от елемента на тялото. Целта му е да покаже пътя към графичния файл, който трябва да попълните страница, таблица или отделна клетка. На практика използването изглежда така: адреса на изображението вече е написан като стойността на параметъра bodybackground. Направеното по този начин фоново изображение се повтаря по координатите и абцисата, започвайки от горния ляв ъгъл. Предишен тук док със следното. Ако искате да се попълни нещо толкова просто като един цвят, вместо да използвате снимка, можете да използвате това кратко описание: брой мащаб е посочен като параметър характерен за тялото BGCOLOR. Има малки промени. Както можете да видите, атрибутът bgcolor вече се използва. За това трябва само да посочите кой цвят ще бъде попълнен от страницата или нейната част. Ето как да вмъкнете изображение в HTML от вашия компютър, за да го направите фон и променете цвета. По принцип, за да се овладее напълно HTML, достатъчно е да му дадете седмица време и това е достатъчно с отмъщение.

заключение

HTML, въпреки че не може да претендира за пълноправен език за програмиране, въпреки това е изключително ценен при създаването на уебсайт. Той е истинският скелет. И ние можем да кажем с увереност, че сега знаете как да работите с фон и неподвижни картини, а също и да прикачите връзки към тях. Ето защо отговорът на въпроса за това как да вмъкнете изображение в HTML трябва да е ясен.