ОСНОВИ НА УЕБ ПРОГРАМИРАНЕТОiit.bas.bg/oup/3.pdfЦветоветевhtml...

ДАНИЕЛА БОРИСОВА

1. Въведение в уеб-програмирането – езици за уеб програмиране, синтаксис на езика HTML

2. Форматиране на текст и списъци3. Използване на цветове и изображения4. Таблици – тагове и атрибути5. Формуляри – елементи, методи за изпращане на информация от

формуляри6. Използване на рамки и мултимедия, нови елементи в HTML5,

различия между HTML и XHTML7. CSS – основни понятия, деклариране на стилове8. Оформление на HTML документ чрез CSS9. Въведение в JavaScript. Синтаксис, типове променливи и оператори10. JavaScript – условия, функции, Regular Expressions, обекти за дата, час,

годинаД. Борисова

Използване на цветове

Използвани формати на изображения

Изображения – атрибути и стойности

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

Мащабируема векторна графика

Д. Борисова

Цветовете в HTML могат да се задават чрез техните английски именаили чрез техния 16-ичен код. Разликата е, че чрез имена могат да сезадават ограничен брой цветове и оттенъци, а освен това не всичкибраузъри възприемат имената. Препоръчително е да се задаватцветовете в техния 16-ичен код.

Всеки цвят и оттенък може да се представи в 16-ична стойност. Точнотези стойности са разрешени за използване в HTML:

Съвременните браузъри поддържат 140 имена на цветове.

17 стандартни цвята: aqua, black, blue, fuchsia, gray, green, lime,maroon, navy, olive, orange, purple, red, silver, teal, white и yellow.


Федералният стандарт 595 е създаден от US General ServicesAdministration и определя набор от цветове, всеки с уникаленреферентен номер от 5 цифри.

FS 595 Highway Colors, US Safety Colors, Camouflage Colors,Vivid Colors, European Signal Colors, Food Colors

https://www.w3schools.com/w3css/w3css_color_libraries.asp


<span style="font-size:24px; padding:8px; color:#fff;background-color:#ee9600"> School bus </span>

FS 595 Safety Colors


<span style="color:#fff; background-color:#bd1e24">DANGER!</span>

Английският стандарт за цветове е BS 381 https://www.w3schools.com/colors/colors_british.asp

381 101 (Sky blue) до 381 797 (Light violet)

Стандартът BS 4800 определя 122 цвята за строителни и монтажниработи.

Стандартът BS 4800 включва и 22 допълнителни ярки цветове заотразяване на последните тенденции за обществени сгради.


През 1985 г. е създаден Australian Independent Colour Standard AS 2700:

Blue Colors: B11 Rich Blue - B64 Charcoal

Green Colors: G11 Bottle Green - G67 Zucchini

Neutral Colors: N11 Pearl Grey - N65 Graphite Grey

Purple Colors: P11 Magenta - P52 Plum

Red Colors: R11 International Orange - R65 Maroon

Blue/Green Colors: T11 Tropical Blue - T63 Teal

Yellow/Red Colors: X11 Butterscotch - X65 Dark Brown

Yellow Colors: Y11 Canary - Y66 Mudstone


RAL Color Standard - е един от най-популярните европейскистандарти за цвят използван и днес.

Reichs-Ausschuß für Lieferbedingungen und Gütesicherung(Imperial Commission for Delivery Terms and Quality Assurance)

RAL Colors RAL 1000 #CCC58F Green beige

............ ............ RAL 9023 #828282 Pearl dark grey

RAL Signal Colors:


ISCC-NBS е система за имена на цветовете, базирана на 12 цвята. ISCC(Inter-Society Color Council) е основана през 1930 от делегати наAmerican trade organizations & National Bureau of Standards.

NCS – Natural Color System е стандарт за цветове в Швеция,Испания, Норвегия и Южна Африка. Стандартът NCS е уникален,защото се основава изцяло върху възприемането на цветовете (какочите виждат червено, жълто, синьо, зелено, бяло, и черно). NCSцветове не могат да се използват директно в HTML, защото HTMLобработва цветови стойности по различен начин.

Списък с имена на цветове X11 е разработен в MIT по време наразвитието на цвовете на базата на системата на дисплея накомпютъра


Форматите на изображения, използвани в HTML са: gif, jpg, png, SVG.

Graphic Interchange Format (gif) –използва се предимно заизображения, които не са оцветени в богата цветова гама и несъдържат "сложни" оттенъци и светлосенки. Файловете с разширениеgif имат 2 важни предимства:

1) могат да съдържат "прозрачен" елемент в себе си – това напримерможе да е фона на буквите от някакъв надпис, който ще прозира ипод него ще се вижда фона на страницата. Тогава този файл ще бъдеподходящ за страници, оцветени в различен фон, освен ако наизображението не е зададен ефект "сянка" – тогава фонът трябва да есъщия, с който е правен ефекта.

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


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

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


Portable Network Graphics (png) е графичен файлов формат,разработен специално за компресиране на изображения в Интернет-среда. Възможните цветове във всеки пиксел са 16.7 милиона, като сеизползва начин за намаляване на размера на файла без загуба накачеството на съхраняването изображение. Форматът рng съдържа всебе си най-доброто от gif и jpg форматите.

Scalable Vector Graphics (SVG) е файлов формат за векторна графика.Файловете са много малки в сравнение с jpg и gif и изображенията втях да могат да бъдат преоразмерявани, без това да увеличи размерана файла.


Тагът <img> се използва за поставяне на изображение в документа иняма затварящ таг. По подразбиране едно изображение е вграден (in-line) елемент, което означава, че се премества заедно с текста, точнокакто става и с една дума например. Вмъкването на изображение сеотразява върху начина на пренасяне на редовете, а самотоизображение се влияе от настройките на текста, като напримерзададените полета на страницата.

Тагът <img> има множество атрибути, които определят начина напоказване на изображението. Най-важният от тях е атрибутът src,който съдържа пътя до графичния файл – източника наизображението. Синтаксистът е:


Пример, в който се използва абсолютен път до файла сизображението:

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

Освен задължителния атрибут src, тагът <img> притежава и другважен атрибут, alt. Атрибутът alt се използва за присвояване натекст към изображенито – напр. кратък текст, поясняващизображението.


Следващият код илюстрира използването на изображение в HTMLдокумент:


<h2>На разходка из Рила планина</h2><p>Маршрутът води към хижа „Седемте езера” <img src= "rila.jpg" alt="Това e част от Рила планина"/>. От тук е изходния пункт за най-красивата и посещавана езерна група в България – седемте рилски езера. </p>

Други два атрибута, които често се използват с тага <img>, са width иheight. И двата атрибута се задават в пиксели. Ако не бъде зададенаширина и височина, браузърът показва подразбиращо се графичнополе с определени размери, докато изображението се зареди в него.След това изображението се оразмерява точно, при което текстът наекрана се премества.

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


Ето един пример за използване на атрибутите width и height:

Тагът <img> чрез атрибута align може да управлявапозиционирането на изображението и обтичането на текста околонего.

left – подравнява изображението в ляво, като текстът обвиваизображението от дясно.


<p> Маршрутът води към хижа „Седемте езера”<img src= "rila.jpg" alt="Това e част от Рила планина"align="left" />. От тук е изходния пункт за най-красиватаи посещавана езерна група в България – седемте рилскиезера. </p>

right – подравнява изображението в дясно, като текстът обвиваизображението отляво, както е показано:


top – подравнява горната част на изображението по горния край натекущия ред от текста или по най-високото изображение в текущияред, както е показано:


texttop – подравнява горната част на изображението по горния крайна текущия ред от текста.

middle – подравнява средата на изображението по долния край натекущия: ред от текста, често наричан опорна линия на текста:


absmiddle – подравнява средата на изображението по средата натекущия ред от текста или по най-високото изображение в текущияред.

center – подравнява средата на изображението по средата на текущияред от текста или по най-високото изображение в текущия ред, коетодублира ефекта на absmiddle.

bottom – подравнява долната част на изображението по долната частна текущия ред от текста (наричана обикновено опорна линия натекста).

absbottom – подравнява долната част на изображението по долнатачаст на текущия ред от текста или по долната част на най-високотоизображение в реда.


Прекъсване на подравняването на текст спрямо дясната или ляватастрана на изображението може да постигнем чрез атрибута clear натага <br>. Три са възможните стойности:

left – указва на текста да продължи едва когато е свободно лявотопространство на страницата (когато отляво няма никаквоизображение)

right – указва текста да продължи едва когато е свободно дяснотопространство на страницата (когато отдясно няма никаквоизображение)

all – указва текста да продължи едва когато е свободнопространството и отляво и отдясно на страницата (когато и отляво иотдясно няма изображение).


Чрез атрибута border може да зададем рамка около изображението впиксели. Ако не използваме този атрибут, около изображението поподразбиране няма да се появи никаква рамка. Това се отнася само заизображения, които не са хипервръзки.


<img src="html.jpg" border="2" width="204" height="204" alt="изображение">

Типът на рамката около изображението се определя чрез атрибута border като възможните стойности са: none, dotted, dashed, solid, double, groove, ridge, inset, outset.


Цветът на рамката около изображението се определя с атрибута styleи съответен 16-ичен код или име:


Атрибутът hspace определя разстоянието (в пиксели) симетричноотляво и отдясно на изображението.

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

Ето и един пример:


Изображенията могат да се използват и като хипервръзка:достатъчно е да се вложи тага за изображение между таговете нахипервръзката <a> и </a>:

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


За да добавим изображение, което да служи като фон на страницата, използваме атрибута background на тага body:

<body style="background-image:url('water.jpg');">


Чрез атрибута style може да зададем повтаряне на изображениетосамо по хоризонтала (background-repeat: repeat-x), само по вертикала(background-repeat: repeat-y) или да не се повтаря (background-repeat: no-repeat).

Фоново изображение, повтарящо се по хоризонтала:<body style="background-image:url('rila.jpg');

background-repeat: repeat-x;">


Фоново изображение, повтарящо се по вертикала:<body style="background-image:url('rila.jpg');

background-repeat: repeat-y;">


Едно-единствено фоново изображение може да зададем чрезатрибута style, като определим пътя до изображението (background-image), неговото позициониране спрямо хоризонталата ивертикалата (background-position) и съответно неговото повторениеbackground-repeat, както е показано:


Дадено изображение може да бъде разделено на отделни части(области), като към тези части се присвоят определени хипервръзки.Такова изображение се нарича „изображение карта“.

Дефинираните „горещи зони“, към които се присвояват съответнитевръзки, могат да бъдат под формата на правоъгълник, окръжност,многоъгълник или точка.

Координатите на изброените геометрични форми се задават впиксели спрямо горния ляв ъгъл (0,0) на конкретното графичноизображение.


rect – правоъгълна зона, чийто координати се определят отстойностите в пиксели на горния ляв ъгъл и долния десен, спрямонулевата координата на графиката. Активната зона е вътрешносттана правоъгълника;

circle – кръгова зона, чийто координати се определят от двойкаточки. Първата определя центъра на окръжността, втората точкалежи на линията на окръжността. Активната зона е вътрешността наопределената окръжност;

poly – многоъгълна зона, зададена чрез списък от координати,представляващи върховете на многоъгълника. Многоъгълната зонаможе да бъде дефинирана с не повече от 100 двойки координати.Активната зона е вътрешността на многоъгълника;


point – активната зона се дефинира от координатите на една точка,зададени спрямо горния ляв ъгъл на изобразената графика;

default – е атрибут, с помощта на който се означават областите вграфичното изображение, които не са били описани като активнизони от други дефиниции.


SVG (Scalable Vector Graphics) се базира на езика XML за описване надвумерна векторна графика, която поддържа интерактивност ианимация. Предимствата на използването на SVG изображенията:

могат да се създават и редактират с всеки текстов редактор,

могат да бъдат търсени, индексирани, компресирани,

мащабируеми са,

могат да бъдат отпечатани с високо качество и с всякакваразрешаваща способност,

могат да бъдат увеличени без загуба на качество,

SVG е отворен стандарт,

SVG файловете са чист XML код.


Ето един пример за използване на SVG формат – изображение назапълнена окръжност в червен цвят и с контурна линия в черен цвят:


Пример за изображение на правоъгълник в SVG формат със заоблени ъгли:


Пример за разполагане на текст по определена крива:


The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.

The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.


<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>


<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;“>canvas>

<script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");ctx.moveTo(0,0);ctx.lineTo(200,100);ctx.stroke();</script>


<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas><script>var c = document.getElementById("myCanvas");var ctx = c.getContext("2d");// Create gradientvar grd = ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red");grd.addColorStop(1,"white");// Fill with gradientctx.fillStyle = grd;ctx.fillRect(10,10,150,80);</script>

https://www.w3schools.com/graphics/tryit.asp?filename=trycanvas_clock_start




ОСНОВИ НА УЕБ ПРОГРАМИРАНЕТОiit.bas.bg/oup/3.pdfЦветоветевhtml...

Documents

Transcript of ОСНОВИ НА УЕБ ПРОГРАМИРАНЕТОiit.bas.bg/oup/3.pdfЦветоветевhtml...