Цветове и изображения в HTML

Download Report

Transcript Цветове и изображения в HTML

Slide 1

HTML – урок 4
Цвет ове и изображения


Slide 2

1. Обща информация:
• цветовете на фона на страницата и на текста могат
да се задават чрез изписване на английското
название на съответния цвят, например:
Това е син текст

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


Slide 3

2. Кодиране на цветовете:
• Браузърите показват всички цветове чрез
комбиниране на различните стойности на само 3
цвята: червен (Red), зелен (Green) и син (Blue).
Това е т.нар. RGB ст андарт . Всеки един от тези 3
основни цвята може да приема стойности от 0
до 255. Всички останали цветове представляват
някаква комбинация от тези стойности.
Например кода за бял цвят е R:255, G:255,
B:255, а кода за черен цвят е R:0, G:0, B:0,
т.е. нулата "създава" най-тъмната част на
спектъра, а 255 - най-светлата.
• HTML не възприема десетичните стойности на
цветовете, затова те се превръщат в 16-сетични
стойности.
• Така например 255 се изобразява в 16сетичен код като FF, а 0 като 00.


Slide 4

3. HTML-код за цвят:
• HTML-кода за бял цвят има
вида #FFFFFF, а HTML-кода
за черен цвят е #000000.
• text="#000000">
• http://htmllessons.hit.bg/col
ors16.html - таблица на 216
цвята и техните 16-тични
кодове


Slide 5

4. Изображения
• Изображенията - картинки, фотографии и др.,
анимирани или статични - са важна част от почти
всеки сайт в мрежата. Добре подбрани и
разположени, те могат да "освежат" HTMLстраницата ви, но претрупването на една страница
с изображения може да постигне и обратния ефект,
като я направи непривлекателна. Освен това
използването на прекалено много изображения ще
направи страницата "тежка" и трудна за зареждане.


Slide 6

5. Формати на файловете за изображения:


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

- gif файловете могат да бъде анимирани - да съдържат движеща
се картинка.


jpeg или jpg формат (и двете разширения са валидни и
равностойни), който се използва предимно за висококачествени
фотографии. Възможностите на този формат за показване на
цветове и оттенъци са по-богати от тези на gif формата, но за
сметка на това jpg файла не може да бъде анимиран, нито да
съдържа прозрачни елементи.


Slide 7

6. Търсене и сваляне на
изображения от WEB
• Безплатни изображения може да намерите като
търсите по ключови думи, например free images,
free animated gifs, free pictures, free graphics,
free clip art, free buttons, free backgrounds, free
interfaces и т.н.
• Записване на изображение с командата "Save
Picture As". Преди да вземет е някое изображение
и да го използват е в ст раницат а си е нужно да се
уверит е, че т о не е обект на авт орскот о право и
че е безплат но!!!


Slide 8

7. Показване на изображения
в HTML-документа

• По подразбиране изображението се
появява в лявата част на страницата. Ако
желаем да разположим изобрaжението
вдясно или в средата на страницата
трябва да използваме тага
и
атрибута му align със съответните
стойности - left (което е и по
подразбиране), right и center.
Например






Slide 9

8.1. Атрибути на тага за
изображение:
• Атрибутите width и height задават
съответно ширина и височина на
изображението в пиксели.
• Атрибута alt задава алтернативно
название на изображението (текст, който
се показва, в случай, че браузърът не
може да зареди изображението).
height="73" alt="Image Example" />


Slide 10

8.2. Атрибути на тага за
изображение:
• Атрибута align – подравняване на
изображението спрямо текста

align=“top/bottom/middle и др." />

• Атрибута hspace задава свободно
пространство отляво и отдясно на
изображението, а атрибута vspace отгоре и отдолу. Стойностите са в
пиксели.