Как да добавите фоново изображение в HTML: 13 стъпки

За да добавите изображение към уеб страница, ще ви трябват HTML и да направите снимка на уеб страница, HTML и CSS са задължителни. HTML (езика за маркиране на хипертекст) е стандартизиран език за маркиране на документи, който показва браузъра за показване на уеб страницата. CSS (таблици за каскадни стил) е език на описание на появата на документ, който се използва за промяна на външния вид и оформлението на уеб страницата. Ще ви е необходим изображение, което сте задали като фон на уеб страница.

Стъпка

Част 1 от 5:

Как да създадете папка и файл

един. Създайте папка за съхранение на HTML файл и фоново изображение. Име на името на папката, за което ще бъде лесно да се намери.

Името на папката може да бъде всеки, но по-добре, ако се състои от една кратка дума.

2. Копирайте фоновото изображение в създадената папка.

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

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

3. Създайте HTML файл. Отворете текстов редактор и след това създайте нов файл. Запазете го като индекс.HTML.

Можете да използвате всеки текстов редактор, например Notepad в Windows или Textedit в Mac OS X.

Ако искате да използвате текстов редактор за работа с HTML, Изтеглете ATOM редактора, което поддържа Windows, Macos и Linux.

Ако използвате Textedit, преди да започнете да пишете HTML код, отворете менюто "Формат" и изберете "Конвертиране в прост текст". В този случай HTML файлът ще бъде заредена правилно в уеб браузър.

Мощни текстови редактори като Microsoft Word не са много подходящи за писане на HTML код, защото добавят невидими символи и форматиране, което може да попречи на правилния дисплей на съдържанието на HTML файла в уеб браузъра.

Част 2 от 5:

Как да напишем HTML код

един. Копирайте и поставете стандартния HTML код. Маркирайте и копирайте HTML кода по-долу и след това го поставете в индекс на отворен файл.HTML.

Заглавие на страница {Фоново изображение: URL (" ") -}

2. Добавете URL фоново изображение. В индексния файл.Html намерите низ Фоново изображение: URL (" "Чест-. Поставете курсора в скобите и след това въведете името на фасада на фоновото изображение. Не забравяйте да укажете разширението на файловото изображение.

Фоново изображение: URL ("заден план.jpg"Чест-

Ако просто въведете името на файла (без неговия URL адрес или път), уеб браузърът ще търси снимка в папка с HTML файл. Ако изображението е в друга папка, въведете пълния път към файла.

Запазете HTML файла. Изображение, озаглавено 2627945 6 1

Част 3 от 5:

Как да видите HTML файл

един. Отворете HTML файл в уеб браузър. Кликнете с десния бутон върху индексния файл.HTML и го отворете в избрания уеб браузър.

Ако желаната снимка не е отворена в браузъра, проверете правилно името на файла с изображението правилно в прозореца на текстовия редактор.
Ако в уеб браузъра се появи HTML код, а не на снимка на фона, индексния файл.HTML е запазен като документ в RTF формат. В този случай редактирайте HTML файла в друг текстов редактор.

2. Направете промени в HTML файл. В прозореца на текстовия редактор поставете курсора между етикетите и влезте "Здравейте, мир!". Обновете страницата в браузъра, така че въведеният текст се показва на фона на картината.

Част 4 от 5:

Как да разберем HTML кода

един. Не забравяйте какви са етикетите в HTML и CSS. HTML кодът се състои от отваряне и затваряне на етикети. Например, маркер се отваря и - затваряне. На всеки отварящ маркер трябва да има съответния затварящ елемент към уеб страницата, заредена правилно.

2. Запомни Doctype Tag. Висококачественият HTML код трябва да започне с . Този маркер информира уеб браузъра, който HTML файлът е HTML файл.

3. Направете промени в HTML файл. В прозореца на текстовия редактор поставете курсора между етикетите и въведете "Hi, World!". Обновете страницата в браузъра, така че въведеният текст се показва на фона на картината.

4. Не забравяйте какви са етикетите в HTML и CSS. HTML кодът се състои от отваряне и затваряне на етикети. Например, маркер се отваря и - затваряне. На всеки отварящ маркер трябва да има съответния затварящ елемент към уеб страницата, заредена правилно.

пет. Запомни етикета . Той съдържа текст, който се показва в заглавната лента на прозореца на браузъра, както и текста, показан на раздела на браузъра.

6. Запомни етикета Това показва съдържанието на CSS. Всичко, което е между етикети

7. Запомни етикета . Всеки текст, разположен между тагове , ще се покаже, както е въведено (ако не е HTML или CSS код).

Осем. Направете промени в HTML файл. В прозореца на текстовия редактор поставете курсора между етикетите и влезте "Здравейте, мир!". Обновете страницата в браузъра, така че въведеният текст се показва на фона на картината.

Част 5 от 5:

Как да разберем CSS код

един. Изчислете CSS код. В индексния файл.HTML CSS код, разположен между тагове

2. Виж CSS код.

Тяло {Фоново изображение: URL ("заден план.jpg") -}

4. Запомни CSS кодовите части. CSS стилове се състоят от две части: Селектор и съобщения.

Тяло

Фоново изображение: URL ("заден план.jpg"Чест

Селекторът може да бъде всеки HTML таг.

Рекламите винаги се състоят в къдрави скоби {}.

пет. Не забравяйте каква обява за CSS. CSS AD се състои от две части: свойства и стойности. Съдържание в къдрави скоби
фонов образ е собственост като URL ("заден план.jpg"Чест е смисъл.

Имотът описва темата (в нашия пример той е фонов модел), а стойността е стилът на елемента (в нашия пример е картина с картина).

Собственост и стойност са винаги разделени от дебелото черво (:).

CSS реклами винаги завършват с точка и запетая (-).