Поставяне на графики на HTML страници. Дистанционни курсове, HTML Работен ред

Графиката е включена WEB ‑страници

Въведение

Безопасна палитра

Някои формати за запис на графики на уеб страници

Типични графични елементи на уеб страници


Въведение

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

Стилът на интернет сайта се определя от комбинация от текст, графика и активни елементи (форми, диалогови прозорци, мултимедия). Важен е и изборът на компоненти, техните свойства (размер, цвят) и методите за поставяне на страницата.

Цветове

В момента RGB е най-популярният начин за определяне на цвят и почти всяка графична програма има способността да описва цвят в този формат. Комбинацията от три еднобайтови стойности (24 бита) ви позволява да дефинирате 16,7 милиона цвята (по-точно 2 24).

HSL (Hue, Saturation, Luminance, т.е. нюанс, наситеност, яркост) е палитра от цветове, дефинирана от комбинация не от основни цветове (какъвто е случаят с RGB), а от нюанс, наситеност и яркост. Този конвенционален начин за описване на цвета е много по-интуитивен и близък до естественото възприятие на цветовете от хората. Много по-лесно е да промените цвета от оранжев на жълт чрез промяна на нюанса, наситеността и яркостта, отколкото да изберете правилната комбинация от червено, зелено и синьо.

· CMY, CMYK

Палитрата CMY (циан, магента, жълто, т.е. синьо-зелено, лилаво, жълто) е друг начин за определяне на цвят. Той представлява алтернатива на RGB. Палитрата CMY, разширена с черно, се обозначава като CMYK и се използва широко от печатащите устройства.

Безопасна цветова палитра

Безопасната цветова палитра е набор от 216 цвята, общи за всички платформи с инструменти. Всеки от тях може да бъде зададен като еднобайтов код. Има 216 от тях, тъй като 8-битовата дефиниция ви позволява да посочите 256 цвята (2 8). Въпреки това е обичайно поле от 40 цвята да бъде запазено за операционната система, след което остават 216 цвята за използване в потребителски приложения. Картини, показвани на компютърни монитори, които могат да показват правилно 256 цвята (8-битова графика), се показват правилно (и предвидимо), стига да се използват 216 безопасни цвята. Останалите бои се прехвърлят като смес от компоненти от безопасна палитра.

Въпросът за адекватното отразяване на цветовете беше от голямо значение преди няколко години, когато компютрите с 8-битови графични карти бяха широко използвани. Счита се за добра практика да се използва безопасен набор от цветове на уеб страниците. Сега всички използваме 24-битова графика. Ето защо изглежда по-подходящо да се използват пълните възможности на съвременните компютри и да се използват различни комбинации от цветове на уеб страниците, включително такива, които надхвърлят безопасната палитра.

Някои формати за запис на графики Мрежа ‑страници

GIF (GraphicInterchangeFormat - Графичен формат за обмен) е един от първите графични формати. Днес той продължава да бъде най-често използваният формат за запис на графики и прости анимации за интернет сайтове. GIF форматът е разработен от CompuServ (онлайн информационна услуга). През 1987 г. излиза първата му версия GIF-87. По-нататъшната работа по разширяване на възможностите за запис на изображения завърши със създаването на нова версия на GIF-89a. Тази нова версия въвежда възможността за дефиниране на избрания цвят като прозрачен, презредово зареждане и запис на анимация. Важно предимство на GIF формата е неговата гъвкавост - днес всички интернет браузъри поддържат показване на изображения във формат GIF.

Графиките, записани в GIF формат, се компресират с помощта на LZW (Lempel-Ziv-Welch) алгоритми. Това е алгоритъм за компресиране без загуби, базиран на елиминиране на излишната информация, така че картината се показва 100% в съответствие с оригинала. Компресирането включва намиране на повтарящи се последователности от точки и записване на информация за размера на тази последователност и къде започва. Този метод ви позволява значително да намалите размера на файла, когато записвате изображения, които имат доста големи области от един и същи цвят.

GIF-89a се състои от заглавка и блокове с данни. Хедърът показва: версия на GIF формат, предпочитани параметри на изображението - височина, ширина, размер на палитрата, резолюция, цвят на фона. Отделните байтове съдържат информация за глобалната цветова палитра - всеки цвят е 3-байтова стойност, която определя RGB цветовата комбинация. Заглавието е последвано от контролни блокове, блокове с изображения и допълнителни блокове.

1) Контролният блок съдържа информация за продължителността на експозицията (времето на показване на екрана) и метода на преход от картина към картина. Форматът GIF-89a ви позволява да записвате много изображения в един файл и да задавате стойности на експозицията и зацикляне на анимацията.

2) Блокове с изображения (може да има няколко от тях, ако във файла е записана анимация) съдържат подробно описание на параметрите на изображението, локална цветова палитра (ако се различава от глобалната палитра) и компресирани данни за последователности от точки на изображението.

3) Допълнителният блок съдържа данни, които не се показват, например коментар, свързан с тази снимка.

Ограничение на GIF формата е размерът на цветовата палитра - максимум 256 цвята, тоест цветовата палитра може да има размери от 2 1 до 2 8 или 2, 4, 8, 16, 32, 64, 128 и 256 цвята. На практика това означава, че ако в картината се появяват 7 цвята, то при използване на палитра от 16 цвята някои от полетата на палитрата остават неизползвани. В този случай намаляването на цветовата палитра до стойност 8 няма да доведе до загуба на качество, но ще намали размера на файла за запис на изображението. Стесняването на цвета е обичайна опция за писане на GIF файл.

LZW кодирането ви позволява да възпроизведете компресираното изображение точно както е било преди компресирането. Такива алгоритми за компресиране се наричат ​​„без загуби“ за разлика от „загубените“ алгоритми, които включват загуба на част от информацията за изображението. LZW компресията намалява размера на GIF файла толкова ефективно, че на практика става неизгодно допълнителното архивиране и компресиране на този тип файлове с ZIP, ARJ и др. програми. Компресирането на изображението се извършва от графични програми.

През 1990 г. Joint Photographic Expert Group (JPEG) предложи схема за компресиране, която впоследствие получи световно признание като стандартен метод за обработка на неподвижни изображения. JPEG е алгоритъм за компресиране на изображения. Но стана обичайно да се прилага името JPEG към файлове, написани във формат JFIF (JPEGFileInterchangeFormat). JPEG (или JFIF) е формат за запис на изображения, използван както в интернет сайтове, така и за печат, както и в цифровата фотография.

Процесът на компресиране на изображение в JPEG формат протича на няколко етапа:

1) Ако е необходимо, пикселните данни на изображението първо се преобразуват от системата RGB в системата YCbCr, която е подобна на HSL и ви позволява да изразите яркостта на цветовете.

2) Намаляване на ширината на скалата Cb и Cr (свойства на цвета) наполовина при запазване на оригиналната скала на яркост Y. Скалата се стеснява чрез осредняване на стойностите на Cb и Cr на съседните пиксели.

3) Анализ на блокове от изображения: 8*8 пиксела. Дискретното косинусово преобразуване (DCT) закръгля стойностите на яркостта на цвета.

4) Масивът от данни, който приблизително описва оригиналното изображение, може да бъде подложен на друга компресия (този път без загуба), тъй като в резултат на закръгляването са се появили много идентични стойности.

Предимствата на алгоритъма за компресиране, използван във формата JPEG, са особено забележими при обработката на големи многоцветни изображения (например снимки). За малки изображения (икони) или картини с преобладаване на един цвят е по-добре да използвате GIF формат.

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

Форматът BMP (Bitmap) е много лесен начин за записване на графики за използване в Windows система.

По принцип този формат не се използва в интернет. BMP е вътрешната графична система на Windows. По-специално в този формат се записват „екранни снимки“. Просто натискайте клавишите , така че системният буфер да съдържа изображението в момента на екрана. BMP форматът не включва компресиране на данни или по-скоро само 4- и 8-битови графични елементи могат да бъдат компресирани. В такива случаи архивирането на данни става на принципа на груповата компресия - отпечатване на съседни точки от един и същи цвят и заместване на последователност от идентични данни с двойка стойности, представляващи цветовия индекс на палитрата и броя на пикселите на даден цвят в последователността. Без компресиране размерът на файловете, записани в този формат, е много голям. Освен това този формат не се поддържа от много браузъри, което означава, че някои интернет потребители няма да видят изображения, записани във формат BMP на екрана си. Този формат се поддържа специално от Internet Explorer. Съществен недостатък на BMP формата е, че създадените файлове са твърде големи.

Благодарение на графиките на уеб страниците WWW се превърна в най-популярната интернет услуга и на нея дължим цялото това разнообразие от страници.

Особеността на графиката, използвана в уеб страниците, е, че тя има своите определени ограничения, които трябва да вземем предвид и да се възползваме от тях.

Има два основни файлови формата, използвани за използване в уеб сайтове: GIF и JPG. Популяризира се нов формат за уеб графики, наречен PNG (произнася се „пинг“), но той все още не се използва широко и не всички браузъри го разбират, така че засега няма да се занимаваме с този формат.

И така, нека започнем да анализираме форматите GIF и JPG, да опишем основните им свойства и характеристики.

GIF формат

Поддържа не повече от 256 цвята (по-малко е възможно и често е необходимо);

Използва цветова палитра;

Използва компресия без загуби, използвайки метода LZW (който е подобен на този, използван в архиватора PKZIP и следователно GIF файловете практически не се компресират);

Поддържа презредово сканиране;

Това е стрийминг формат, т.е. показването на картина започва по време на изпомпване;

Позволява ви да присвоите прозрачния атрибут на един от цветовете в палитрата, който се използва при създаване на така наречените прозрачни GIF файлове;

Има възможност за запазване на няколко изображения в един файл, който се използва при производството на анимирани GIF файлове;

Поддържа възможността за вмъкване на контролни блокове във файл, което ви позволява да вмъквате коментари във файла (например относно авторските права:), забавяне между показването на изображения и т.н.

А сега малко уточнение – до какво могат да доведат тези свойства. GIF поддържа максимум 256 цвята, което означава, че всички изображения, които запазваме във формат GIF, изрично или косвено намаляват броя на цветовете, за да отговарят на това ограничение (различни програми с различен успех). И оттук заключението - ако трябва да поставите красива снимка с плавни преходи и фини нюанси на цвета, тогава след трансформацията всичко ще бъде много по-лошо - нюансите вече няма да са фини и цялата снимка ще придобие неестествен, нереалистичен вид. Ето защо, ако все още трябва да запазите снимката във формат GIF и да предадете всички нюанси, тогава трябва да прибягвате до трикове. Например, можете да приложите някакъв артистичен филтър към снимка и да я превърнете в рисунка или да приложите тониране. Но няма проблеми със запазването на снимки и рисунки в този формат, те като правило са добре компресирани и не съдържат много цветове. Сега нека да разгледаме свойствата и функциите на втория най-популярен формат в Интернет.

JPEG формат

Позволява ви да запазвате пълноцветни изображения с брой цветове от 16,7 милиона цвята (или 24bpp), а ако картината има по-малко цветове, тогава преди запазване на файла тя все още се преобразува в пълноцветно изображение; Използва компресия със загуби, поради което постига диви нива на компресия на файлове; Поддържа прогресивно сканиране, т.е. Първоначално изображението се появява с лошо качество и постепенно се подобрява в процеса на зареждане. Може би това са всички предимства на JPG формата, а основната му цел е да съхранява изображения с фотографско качество.

Графична оптимизация

Цялата работа по графична обработка се извършва в междинен формат

Нека да разгледаме някои характеристики на работата с графики. Въпреки факта, че записваме изображения в GIF файл с поддръжка на 256 цвята или в JPG файл с 16,7 милиона цвята, трябва да работим с изображението в някакъв междинен формат, който ни позволява да запазим изображението без изкривяване и без загуба на дълбоки цветове (например TIFF и вътрешни формати на редактори като PSD). Факт е, че по време на работа ще трябва да промените или изкривите изображението много пъти, което в крайна сметка води до многократно пренаписване на файла. Многократният запис във формат GIF ще доведе до загуба на нюанси на изображението, а във формат JPG всяко ново презаписване на файла ще въведе нови изкривявания и след известно време снимката ще изглежда ужасна. Следователно цялата работа по графичната обработка се извършва в междинен формат (въпреки че има големи размери на файлове) и само на последния етап изображението се преобразува в желания формат (често едновременно с оптимизирането на размера на файла).

За уеб страниците въпросът за размера на снимката е много важен. Какъв размер да ги направя? Ще им отнеме ли твърде много време за зареждане? Когато оптимизирате, можете да намалите размера на файла, но едва ли си струва да оптимизирате снимка, която не носи никакво значение. Първият етап от оптимизацията е подчертаване на основното във снимката (изхвърляне на всичко останало) и фокусиране върху илюстрирания елемент. Това се постига чрез операцията по изрязване и намиране на най-изразителната част, която предава смисъла на снимката. След тази операция вече можете да оптимизирате изображението и в този случай то всъщност ще има най-малкия размер.

И с размера на снимките трябва да се придържате към определен компромис - не ги правете твърде малки, в които не можете да видите нищо дори под лупа, и не трябва да ги правите твърде големи, за да не разтегли времето във вечността. Въпреки че, разбира се, има изключения: правилно оптимизирана голяма снимка може да отнеме време за прехвърляне, еквивалентно на времето за прехвърляне на обикновена снимка и, обратно, зареждането на лошо оптимизирана малка снимка ще отнеме до края на дните. Обикновена снимка може да се счита за снимка, която е с размер приблизително 250x300 пиксела и заема около 6-10 килобайта. Това не означава, че всички снимки трябва да са с този размер, но площта на снимката трябва да е еквивалентна на него. Тези препоръки се отнасят за снимки, които „илюстрират“ текст и не се отнасят за рисунки, които служат като елементи за навигация.

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

2.2.1. Вмъкване на графики в html документ

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

Графичните компоненти на една уеб страница могат да бъдат разделени на три големи категории според предназначението им:

– илюстративни графики, включително придружаващи текстови снимки, обяснителни чертежи , чертежи, диаграми;

– функционална графика, който представлява контроли (бутони за навигация, броячи и интерактивни елементи на формата);

– декоративна графика -елементите на дизайна на страницата са включени в него за красота и не носят информационен товар (фонови изображения, разделители, направени под формата на графични файлове, заглавки и много други).

Графични формати.Поради използването на интернет изтеглянето на графики отнема известно време. И колкото по-кратко е това време, толкова по-удобно е за потребителя. Следователно трите най-популярни формата, използвани сега за графични изображения, са GIF, JPEG и PNG. Те съдържат различни алгоритми за компресиране на изображения със загуба, които могат значително да намалят размера на целевия файл.

GIF-формат.През 1978 г. израелските изследователи Джейкъб Зив и Ейбрахам Лемпел разработиха нов за това време алгоритъм за компресиране на данни без загуба на данни (LZ78 е името на проекта). Няколко години по-късно американският програмист Тери Уелч го подобри (LZW) и също представи разработката си за използване от всички.

През 1987 г. Боб Бери създава принципно нов графичен формат GIF, базиран на алгоритъма LZW. Същността на алгоритъма за компресиране: намаляването на размера на графичния файл се постига чрез смесване на подобни нюанси в един; информацията за изображението в GIF файла се записва ред по ред, т.е. това е масив от описания на линии с височина един пиксел. Свойства: смесване на подобни нюанси в един, работа с фиксирана палитра от 256 цвята.

GIF форматът се използва в HTML документ само за показване на бизнес графики: диаграми, лога, бутони, други елементи от дизайна на страницата - и картини с цветова палитра от 256.

Друго свойство на GIF е преплитането, т.е. изображението не се зарежда изцяло, а на части (прочитат се 1-ви, 5-ти, 10-ти ред, след това 2-ри, 6-ти, 11-ти и т.н.), тоест изглежда, че се проявява.

През 1989 г. CompuServe пусна нова версия на GIF89a, която използва така наречения „алфа канал“ - който е маска на прозрачността на изображението - за създаване на изображение с прозрачен фон, като го запази заедно с файла. Цветовете, които са наситени като прозрачни, стават невидими в браузъра.

Друга характеристика на GIF89a е, че този формат ви позволява да съхранявате няколко различни изображения във формула с едно физическо заглавие, показвайки ги на екрана последователно едно след друго.

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

Механизмът за компресия се състои от три етапа.

    Изображението се преобразува в LAB цветно изображение, което разлага изображението на три независими канала: L – запазване на интензитета на цвета, A и B – за съхраняване на информация за цвета.

    Компресия: Приблизително три четвърти от информацията за цвета се премахва от получения цветен модел, след което изображението се разделя на секции с размери 8x8 пиксела и се преобразува в числов масив от данни. Заглавието на всеки блок описва доминиращия цвят на зоната, останалата част от информацията описва по-малко забележими нюанси.

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

Декомпресията на JPEG се извършва в обратен ред.

Максималният брой цветове, които едно JPEG изображение може да съдържа, е 16 милиона.

PNG-формат.Този формат е разработен през 1995 г., за да замени GIF формата, след като Unisys защити авторските права върху своя алгоритъм за компресия LZW. В същото време бяха разработени някои технически характеристики, по-специално подобряване на качеството и увеличаване на броя на поддържаните цветове.

Активиране на графики вуеб-страница.Интегрирането на графики в HTML документ се извършва с помощта на един таг < IMG >.

Атрибутът SRC (източник) указва URL адреса на изображението (Фигура 2.3).

Ориз. 2.3. Примерен пример за показване с етикет < IMG >

Този атрибут е задължителен в маркера < IMG > (Таблица 2.2).

Таблица 2.2

Атрибути на тагове< IMG>

Предназначение

Стойност на атрибута

Примери за записване

Адрес на изображението

Позициониране на обекти на екрана (незадължителен атрибут)

изравняване

ЛЯВО – ляво

ДЯСНО – дясно

СРЕДЕН – по линията на линията

TOP – на върха

ДЪНО – на дъното

Ширина на изображението (незадължителен атрибут)

в пиксели

Височина (незадължителен атрибут)

в пиксели

Край на масата. 2.2

Предназначение

Стойност на атрибута

Примери за записване

Подсказка (незадължителен атрибут)

съдържа алтернативен текст

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

дебелина в пиксели

Празно място над изображението

в пиксели

Празно пространство отляво и отдясно

Стойност на пиксела

HEIGHT="215" BORDER="5" ALT="лилия">!}

Използването на таг в този пример ви позволява да поставите изображение от файл от дясната страна на прозореца на браузъра, задава размера на това изображение и го поставя в рамка (вижте Фигура 2.3).

Работна тема:Поставяне на графики на уеб страница.

Цел на работата:Научете се да вграждате графични изображения в HTML документ.

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

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

URL адрес" ALT=" текст" HEIGHT=n1 WIDTH=n2 ALIGN=!} горе|среда|долу|текстгоре>

Елементи на синтаксиса на етикета:

Задължителен параметър, който има същия синтаксис като стандартен URL адрес. Този URL адрес казва на браузъра къде се намира изображението. Картината трябва да се съхранява в графичен формат, поддържан от браузъра. Днес GIF и JPG форматите се поддържат от повечето браузъри.

ALT="текст" !}

Този незадължителен елемент указва текста, който ще се показва в браузър, който не поддържа графики или с деактивирана смяна на изображения. Обикновено това е кратко описание на изображението, което потребителят може или ще може да види на екрана. Ако този параметър отсъства, тогава на мястото на картината повечето браузъри показват пиктограма (икона), която, когато е активирана, потребителят може да види изображението. Тагът ALT се препоръчва, ако вашите потребители използват браузър, който не поддържа графичен режим, като например Lynx.

ВИСОЧИНА=n1

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

WIDTH=n2

Параметърът също е незадължителен, както предишния. Позволява ви да зададете абсолютната ширина на изображението в пиксели.

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

От HTML 2.0 етикетът появиха се допълнителни параметри:

URL адрес" ALT=" текст" HEIGHT=n1 WIDTH=n2 ALIGN=!} горе|среда|долу|текстгоре|над средата|базова линия|абсдолу BORDER=n3 VSPACE=n4 HSPACE=n5>

Нови опции:

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

Същото като VSPACE, но само хоризонтално.

Фонови снимки

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

Ходработа:

Поставяне на графики на уеб страница.

#FFFFFF" TEXT="#330066">

График

класове във вторник

Направете сами промени във файла график. html, след като изпробва използването на такива графични атрибути като ALT, BORDER, HEIGHT, WIDTH. Пример за използване на атрибути е даден в таблицата по-долу:

Атрибут

формат

Описание

Надписът „снимка“ се показва на екрана, когато преместите показалеца на мишката върху изображението.

Задава рамка с дебелина 3 пиксела около изображението.

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

Вертикалният размер на изображението е принуден до 111 пиксела.

Хоризонталният размер на изображението е принуден на 220 пиксела.

Атрибутът добавя горно и долно празно поле с височина 8 пиксела.

Добавя ляво и дясно празни полета с ширина 8 пиксела.

Фоново показване на графики на уеб страница

Поставете файла обратно. jpg в същата папка като график. html. Направете промени във файла график. html:

HTML учебен файл

График

класове във вторник

На екрана ще видите:

https://pandia.ru/text/78/365/images/image003_82.jpg" width="300" height="197 src=">

Линийки и капачки

Графичните елементи могат да се използват като различни видове „декорации“. Ако измислите нещо оригинално, вашата уеб страница ще изглежда необичайно и ще бъде запомнена от посетителя. Ето няколко опции за това използване на графики, които вече са станали традиционни.
Първо, това са различни графични разделители, обикновено хоризонтални, използвани вместо хоризонтална лента (

).

Ето как изглежда в прозореца на браузъра:

Въпреки че етикетът

и персонализиран, графичен разделител вместо това
често изглежда по-добре:

r. gif" WIDTH="60" HEIGHT="59" BORDER="0" ALT="B">

B", така че потребител с деактивирана графика да не се налага да гадае за първата буква.

Поставете го във вашия документ график. htmlразделител anim_hr. gif. Дайте на това изображение височина от 2 пиксела. Преместете анимирания разделител в центъра на документа. С една дума Графикзамени буквата Ризображение, можете да го вземете в папката с лабораторни упражнения (r.gif файл). Като промените стойността на атрибута ALIGN, постигнете най-доброто разположение на буквата на екрана. С помощта на всеки графичен редактор създайте свой собствен алтернативен образ на буквата Ри го вградете в документа.

Графични маркери.

HTML ви позволява да създавате списъци с водещи символи и номерирани списъци.

Пример за списък с водещи символи:

  • елемент от списъка

  • елемент от списъка

  • елемент от списъка

    Пример за номериран списък:

    5. списък елемент

    6. списък елемент

    8. списък елемент

    От гледна точка на HTML това изглежда така:

  • елемент от списъка

  • елемент от списъка

  • елемент от списъка

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

    Първо трябва да създадете такъв триъгълник във всяка програма или да копирате готов от папката с лабораторни упражнения (файлов маркер. gif) Този файл трябва да бъде поставен до вече създадения файл график. html. Сега нека влезем в етикета