Как да вмъкнете картина в HTML без проблеми

За създаването на уеб страници и дори на цели сайтове е известно, че се използва специален HTML маркиращ език (Hypertext Markup Language), но без снимки и различни изображения, всеки сайт би бил само структуриран и скучен текст. Ето защо добавянето на изображения към сайта използва специален код, който е изключително лесен за използване и позволява и двете вмъкване на картина в HTML в

Къде да започнем?

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

От кой маркер ще ни трябва?

След като сте решили с програмата да напишете кода, трябва да разберете, че в него да пишете, как да вмъкнете снимка в HTML в бележник или друга програма. Започнете с свободен край />. Този маркер декларира снимка в HTML документ, тя е единична и не изисква затваряне.

И какво следва?

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

• Ако изображението се намира на сайт на трета страна, кодът ни ще изглежда така:

• В случай на намиране на картинката в същата папка като нашия HTML файл, кодът ще изглежда така:

Алтернативен текст

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

пояснения

Между другото, етикета има още един атрибут на заглавието. Поради този атрибут, когато задържите курсора на мишката върху изображението, алтернативният текст ще се покаже в подсказката. Тази функция обаче се поддържа само от Internet Explorer, така че такива съобщения да се появяват в други браузъри, ще са необходими специални приставки. Съветите на инструментите се използват заедно с алфа атрибута, те са по избор, но ако ги използвате, кодът ще изглежда така:

Размер на изображението

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

Ако посочите само един от атрибутите за размера, то втората ще бъде изчислена автоматично, но по такъв начин, че да се поддържа аспектното съотношение на изображението. Когато посочвате и двата параметъра, е важно да запомните, че ако размерите надвишават оригиналните, картината ще се разтегли и ако размерите са по-малки, тя се свива.

Изображение като фон

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

...

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

Завъртете текста с текст

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

Ако използвате лявата стойност, изображението ще бъде поставено отляво на текста и ако използвате атрибута вдясно, съответно отдясно. Този код изглежда така:

или

Ако искаме текстът да бъде разположен между две изображения, кодът ще изглежда така:

И след този код ще бъде поставен текстът, който трябва да бъде сключен между тези две снимки.

Изображенията ви позволяват да разнообразите сайта, да го направите по-светъл, по-привлекателен и по-запомнящ се, но не забравяйте, че твърде много снимки ще забавят зареждането на сайта и ще отвлекат вниманието му от текста.