проф. д.н ДАНИЕЛА БОРИСОВАiit.bas.bg/oup/4.pdf · е файлов формат...

проф. д.н. ДАНИЕЛА БОРИСОВА

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

2. BOX модел. CSS – синтаксис и деклариране на стилове. Деклариране и използване на класове и селектори

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

различия между HTML и XHTML 8. Създаване на темплейти чрез CSS и HTML 9. Въведение в JavaScript. Синтаксис, типове променливи и оператори 10. JavaScript – условия, функции, регулярни изрази, обекти за дата, час,

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

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

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

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

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

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

Д. Борисова

Цветовете в HTML могат да се задават чрез зададените им имена цветове, или RGB, HEX, HSL, RGBA, HSLA

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

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

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

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


RGB – red, green, blue rgb(255, 99, 71)

HEX – шестнадесетична стойност #ff6347

HSL – hue, saturation, lightness hsl(9, 100%, 64%)


hue – степен от цветното колело в интервала 0 до 360

saturation – насищане в проценти, където 0% е оттенък на сивото, а 100% е пълният цвят

lightness – в проценти, където 0% е черно, а 100% е бяло

RGBA = RGB с алфа канал rgba(red, green, blue, alpha)

HSLA = HSL с алфа канал hsla(hue, saturation, lightness, alpha)

Параметърът alpha е число между 0.0 (прозрачно) и 1.0 (непрозрачно)

HWB (Hue, Whiteness, Blackness) e предложен стандарт за CSS4: hwb(120, 10%, 80%)


Федералният стандарт 595 е създаден от US General Services Administration и определя набор от цветове, всеки с уникален референтен номер от 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 милиона, като се използва начин за намаляване на размера на файла без загуба на качеството на съхраняванoто изображение. Форматът рng съдържа в себе си най-доброто от gif и jpg форматите.

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


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

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

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


атрибутите width и height позволяват на браузъра да резервира точното място на екрана, преди изображението да е заредено:


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

Свойството float се използва и за позициониране на изображения и може да приема следните стойности

left - Елементът плува вляво от контейнера си right - Елементът плува отдясно на контейнера си none - default inherit - Елементът наследява стойността на неговия родител


<style> img {float: right;} </style>

clear: none|left|right|both|initial|inherit;


<style> img { float: left;} .clear {clear: both;} </style> <h1>The clear Property</h1> <img src="w3css.gif" width="100" height="132"> <p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>

<p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p> <p><strong>Remove the "clear" class to see the effect.</strong></p>

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


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

border-style:***;


<style> img {border-style: dotted solid double dashed} </style> <h1>The border-style Property</h1> <img src="w3css.gif" width="100" height="132">

border-color: color|transparent|initial|inherit; border-color: red green blue pink;

top border is red right border is green bottom border is blue left border is pink

border-color: red green blue; top border is red right and left borders are green bottom border is blue

border-color: red green; top and bottom borders are red right and left borders are green

border-color: red; all four borders are red


border-style + border-color


<style> img {border-style: dotted solid double dashed; border-color: red yellow blue pink} </style> <h2> The border-style and border-color properties</h2> <p><img src="pineapple.jpg" alt="Pineapple"></p>

border-width: medium|thin|thick|length|initial|inherit; border-width: thin medium thick 10px;

top border is thin right border is medium bottom border is thick left border is 10px

border-width: thin medium thick; top border is thin right and left borders are medium bottom border is thick

border-width: thin medium; top and bottom borders are thin right and left borders are medium

border-width: thin; all four borders are thin


border-style + border-color + border-width


<style> img {border-style: dotted solid double dashed; border-color: red yellow blue pink; border-width: thin medium thick 10px;} </style> <h2>The border-style, border-color & border-width properties</h2> <p><img src="pineapple.jpg" alt="Pineapple" ></p>

background-image – Задава 1 или повече изображения, които да се използват като фон


<style> body {background-image: url("img_tree.gif"), url("paper.gif"); background-color: #cccccc;} </style>

background-repeat


<style> body {background-image: url("img_tree.gif"), url("paper.gif"); background-repeat: no-repeat, repeat; background-color: #cccccc;} </style>

background-repeat: repeat-x – по хоризонтала (background-repeat: repeat-y) – по вертикала


background-attachment: scroll|fixed|local|initial|inherit;


<style> body {background-image: url("img_tree.gif"); background-repeat: no-repeat; background-attachment: fixed;} </style>

background-position:

left top left center left bottom right top right center right bottom center top center center center bottom

Д. Борисова https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position

background-size: auto|length|cover|contain|initial|inherit;


<style> #ex1 {border: 2px solid black; padding: 25px; background: url(mountain.jpg);background-repeat: no-repeat; background-size: auto;} #ex2 {border: 2px solid black; padding: 25px; background: url(mountain.jpg); background-repeat: no-repeat; background-size: 300px 100px;} </style>

background-size: auto|length|cover|contain|initial|inherit; cover – преоразмерява изображението, за да осигури напълно видимо изображение contain – преоразмерява изображението, дори ако трябва да разтегне изображението или да отрежете малко от един от краищата


<style> background: url(image.jpg); background-repeat:no-repeat; background-size:cover; </style>

<style> background: url(image.jpg); background-repeat:no-repeat; background- size:contain; </style>

border-image-repeat: stretch|repeat|round|initial|inherit;

border-image-slice: number|%|fill|initial|inherit; Показва как да се среже изображението, посочено от border-image-source.

Изображението винаги е нарязано на девет секции: четири ъгъла, четири ръба и средата.

#borderimg1 { border: 15px solid transparent; padding: 15px; border-image-source: url(border.png); border-image-repeat: repeat; border-image-slice: 30;} #borderimg2 { border: 15px solid transparent; padding: 15px; border-image-source: url(border.png); border-image-repeat: round; border-image-slice: 30;} #borderimg3 { border: 15px solid transparent; padding: 15px; border-image-source: url(border.png); border-image-repeat: stretch; border-image-slice: 30;}



• HTML5 въвежда елемент <picture>, за да добави повече гъвкавост при уточняване на ресурсите на изображението.

• Елементът <picture> съдържа редица <source> елементи,

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

• Всеки <source> елемент има атрибути, описващи кога

изображението им е най-подходящо.

CSS3 свойството за прозрачност е оpacity и може да има стойност от 0.0 до 1.0, като 0.0 е 100% прозрачно, а 1.0 е 100% непрозрачно.

Изображение с 40% прозрачност и фон с прозрачност 60%:


<img src="rila.jpg" border="0" width="260" height="200" alt="" style="filter:alpha(opacity=40); opacity:0.4;"> <p style="background-color:red; color:#fff; opacity:0.6; filter:alpha(opacity=60)"> фон с прозрачност 60%:</p>

Прозрачност на фона, където е разположен текста:


<style> div.background {width:500px; height:250px; background:url(rila.jpg) repeat; border:2px solid red;} div.transp {width:400px; height:180px; margin:30px 50px; background-color:#ffffff; border:1px solid red; opacity:0.6; filter:alpha(opacity=60); /* For IE8 and earlier */} div.transp p { margin:30px 40px; font-weight:bold; color:#000000;}</style> <div class="background"> <div class="transp"> <p> прозрачен фон, където е разположен текста </p> </div> </div>

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

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

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


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

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

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


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

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


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

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

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

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

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

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

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

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


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


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


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


HTML <canvas> елементът се използва за чертаене на графики в движение чрез използване на JavaScript.

Елементът <canvas> е само контейнер за графики. Трябва да се използва JavaScript за чертането на самата графика.

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


<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 gradient var grd = ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(10,10,150,80); </script>

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




проф. д.н ДАНИЕЛА БОРИСОВАiit.bas.bg/oup/4.pdf · е файлов формат...

Documents

Transcript of проф. д.н ДАНИЕЛА БОРИСОВАiit.bas.bg/oup/4.pdf · е файлов формат...