The Interactive Atlas of Human Anatomy Version 3.0 provides versatile tools for studying anatomy, including:
1) High-quality anatomical plates from Frank H. Netter, MD and Carlos A. G. Machado, MD that can be viewed with or without labels.
2) Features like spoken labels, study guides, practice tests, and customizable exams to aid student learning.
3) Navigation options that allow searching or browsing by region, system, or plate number.
A presentation about HTML5 and CSS3. It presents the main features of the two essential programming languages for the web. There are animation and sound in it.
Курс по уеб програмиране (2014), занятие №1 - HTMLDAVID Academy
Kурс по уеб програмиране (2014)
Занятие №1: HTML
--
Въведение в HTML
Елементи и тагове
Мета съдържание
Структуриране на текст
Хипервръзки
Изображения
Таблици
Списъци
Форматиране на таблици
Форми
Въведение в HTML5
Структуриране на страница
Форми и валидиране
Аудио и видео
2. Hypertext Markup Language
HTML - HyperText Markup Language
"език за маркиране на хипертекст"
Версии на HTML
Края на 80-те години на XX век –ТимБърнърс-Лий
– метод за обмяна на информация с учени от ЦЕРН
1991 – HTML first mentioned – Tim Berners-Lee –
HTML tags
1993 – HTML (first public version, published at IETF)
1993 – HTML 2 draft
1995 – HTML 2 – W3C
3. Hypertext Markup Language
1995 – HTML 3 - Качване на файлове
с формуляри
1997 – HTML 3.2 – “Wilbur”
1997 – HTML 4 – ”Cougar” – CSS
1999 – HTML 4.01 (final)
2000 – XHTML
2001 – XHTML (final)
2008 – HTML5 / XHTML5 –HTML5 е представен като
работен проект от W3C
2011 – версия 5 е в процес на развитие на
техническите спецификации. Пълната
спецификация се очаква до 2014 г.
4. Създаване на HTML страница
HTML документ трябва да бъде с файлово
разширение .htm или .html
HTML файловете се създават с text editors:
NotePad, NotePad ++, PSPad, Sublime text и др.
Или с HTML editors (IDEs):
MS Visual Studio
MS Visual Web Developer
Adobe DreamWeaver
Eclipse
Aptana
JetBrains WebStorm и др.
5. Създаване на HTML страница
Browser Tools
● Firebug
● WebInspector
● WebDeveloper Toolbar
● F12 (IE)
● Inspect
● Console
● Bookmarklets
Drawing and Slicing Tools
Gimp, Paint.NET, Pixlr.com, Adobe Photoshop и др.
6. HTML - Tags
Концепции в HTML
● Tags - тагове
HTML таговете са най-малката съставна част на един
HTML документ.
Те, заедно със своите атрибути (като цвят, размер и
т.н), съставят т.нар. HTML елементи. Таговете са
ключови думи, заградени в ъглови скоби.
Обикновено са по двойки:
● таг за начало < – маркира началото на един
HTML елемент;
● таг за край /> - маркира края на HTML
елемента. За разлика от началния таг, крайният
има наклонена надясно черта пред името си
7. HTML - Tags
<html>
<body>
<h1> текст </h>
</body>
</html>
Таговете се влагат
един в друг, като
първият отворен таг
се затваря последен.
8. HTML - Attributes
● Attributes - атрибути
Повечето атрибути на елементи са двойки име-
стойност, разделени със знак за равенство и
записвани в рамките на отварящият таг след името
на елемента. Името може да е с единични или
двойни кавички. Оставянето на стойности на
атрибути без кавички се смята за несигурно.
Има няколко често срещани
атрибута, които може да се
появят в много
елементи:
Id, class, name, style, title
9. HTML - Attributes
hyperlink
<a href="http://www.w3schools.com">This is a link</a>
хоризонтална линия - няма затварящ таг
<hr width="95%" size="3px"/>
таг за снимка - няма затварящ таг
<img src="images/Снимка.png"/>
10. HTML - Elements
● Elements - Елементи
HTML елемент е комбинация между таг и атрибути
Основни елементи
html, head, body, doctype
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1251">
<title>Заглавие на документа</title>
</head>
<body>
<p>Здравей, свят!!</p>
<p>Validate <a href="http://validator.w3.org/check/referer">XHTML
Basic 1.0</a></p>
11. HTML - Elements
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://validator.w3.org/images/vxhtml-basic10"
alt="Valid XHTML Basic 1.0!" height="31" width="88" /></a>
</p>
</body>
</html>
12. HTML - Структура
Основни елементи
<html> елемент
Указва на браузъра, че това
е HTML документ.
Отбелязва началото и края
на документа и съдържа
всичи други негови
елементи(с изключение на
<!DOCTYPE> елемента).
<html>
...
</html>
13. HTML - Структура
<head> елемент
Съдържа заглавието на документа, и
може да съдържа стилове (CSS),
скриптове(JS), енкодинг, meta тагове
<html>
<head>
<title>Заглавие на документа</title>
</head>
…
</html>
14. HTML - Структура
<body> елемент
Съдържа форматиране видимо за потребителя -
текст, хиперлинк, картинки, таблици, бутони,
параграфи, форми и т.н.
<html>
<head>
<title>Заглавие на документа</title>
</head>
<body>
Съдържание на документа...
</body>
</html>
15. HTML - Структура
<!DOCTYPE> елемент
Декларира се първи, още преди <html> тага.
Валидира документа. <!DOCTYPE> не е HTML таг.
Той е инструкция за уеб браузъра - указва HTML
версията, на която е написана страницата:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.
w3.org/TR/html4/strict.dtd">
<!DOCTYPE html>
<html>
<head>
<title>Заглавие на документа</title>
</head>
<body>
<h1>Моето първо заглавие.
</h1>
Съдържание на документа......
</body>
</html>
16. Текст форматиращи тагове
<b> </b> bold - Удебелява текста
<u></u> underlined - Подчертава текста
<i></i> italicized - Задава курсив/наклон
<sup></sup>
текстsuperscript
<sub></sub>
текстsubscript
<strong></strong> Указва важен текст
<em></em> наклонен подобно на тага <i>
<pre></pre> текста точно както сте го написали
<del></del> изтрит текст
<blockquote></blockquote> Указва част от текста, който е цитат
<code></code> шрифт като на пишеща машина
17. Tags
<br> tags - нов ред.
Няма таг за край !
Този текст съдържа <br> нов ред.
Този текст съдържа
нов ред.
Hyperlink Tags - Указва линк към друга страница.
Най-важният атрибут на този таг е href. Той посочва
URL адреса, към който сочи линка:
<a href="https://sdktheachers.wordpress.com" title=”
SDKteachers”>SDK theachers</a>
18. Tags
Image Tags - Дефинира картинка.
Има два задължителни атрибута: src и alt. Атрибутът src
указва URL адреса на картинката, alt - указва алтернативен
текст на картинката, а hight и width - указват съответно
височината и ширината на картинката в пиксели.
<img src="smiley.gif" alt="Smiley face" height="42" width="42">
<hr> tag - Таг за хоризонтална линия.Няма таг за край!
Атрибути на тага за хоризонтална линия:
width задава дължината на хоризонталната линия;
задаване на местоположение е align и може да
приема стойности left, right и center;
19. Tags
цвят на линията се използва атрибута
color; дебелина на хоризонталната линия
се използва атрибута size.
<hr width="250" align="center" color="#ff0000" size="10" />
Коментари в HTML
<!-- TEКСТ -->
21. Headings and Paragraphs
Paragraphs tags - Параграф
Браузърите автоматично добавят по един
празен ред преди и след текста, маркиран като
параграф.
<p>Това е параграф.</p>
<p>Това е друг параграф.</p>
Това е параграф.
Това е друг параграф.
22. Списъци в HTML (Lists)
Списъците могат да се влагат
един в друг.
Ordered List - подредени сисъци <ol></ol>
Подредените списъци започват с тага <ol>, а всеки
елемент на списъка – с тага <li>:
<ol>
<li>Кола</li>
<li>Още една кола</li>
</ol>
1. Кола
2. Още една кола
<ol reversed>
<li>Едно</li>
<li>Две</li>
</ol>
1. Едно
2. Две
Атрибутът reversed указва, че
подреждането ще е в низходящ
ред, а присвоената му стойност -
показва началото на номерацията
23. Списъци в HTML (Lists)
Ordered List - подредени сисъци
<ol start="4">
<li>Едно</li>
<li>Две</li>
<li>Три</li>
</ol>
<ol reversed start="5">
<li>Едно</li>
<li>Две</li>
<li>Три</li>
</ol>
Атрибутът start задава
началото на номерацията
4. Едно
5. Две
6. Три
5. Едно
4. Две
3. Три
24. Списъци в HTML (Lists)
Ordered List - подредени сисъци
I. Едно
II. Две
III. Три
Атрибутът type задава вида на маркерите (букви
или цифри), например 1, a, A, i, I:
<ol type="I">
<li>Едно</li>
<li>Две</li>
<li>Три</li>
</ol>
<ol type="a">
<li>Едно</li>
<li>Две</li>
<li>Три</li>
</ol>
<ol type="i">
<li>Едно</li>
<li>Две</li>
<li>Три</li>
</ol>
<ol type="A">
<li>Едно</li>
<li>Две</li>
<li>Три</li>
</ol>
a. Едно
b. Две
c. Три
i. Едно
ii. Две
iii. Три
A. Едно
B. Две
C. Три
25. Списъци в HTML (Lists)
Unordered List - неподредени
сисъци <ul> </ul>
При тези списъци номерацията не е с цифри или
букви, а с кръгли точки. Всеки списък започва с тага
<ul>, а всеки елемент на списъка – с тага <li>:
● Едно
● Две
● Три
<ul type="disc">
<li>Едно</li>
<li>Две<li>
<li>Три</li>
</ul>
<ul type="squer">
<li>Едно</li>
<li>Две</li>
<li>Три</li>
</ul>
★ Едно
★ Две
★ Три
❏ Едно
❏ Две
❏ Три
<ul type="star">
<li>Едно</li>
<li>Две<li>
<li>Три</li>
</ul>
26. Списъци в HTML (Lists)
Definition List - Описателни
сисъци <dl>
Това са списъци от термини/имена с описание на всеки
термин/име. Такъв списък се указва с тага <dl> в съчетание с
таговете:
<dt> - за всеки термин/име
<dd> - за всяко описание на термина/името
<dl>
<dt>Биричка</dt>
<dd>- студена напитка</dd>
<dt>Шкембе</dt>
<dd>- освежаващо, сутрешно ястие</dd>
</dl>
Биричка
- студена напитка
Шкембе
- освежаващо, сутрешно
ястие
27. Section Elements: div / span
Block and Inline Elements
Block Elements - Блокови елементи
● формират блок от съдържание
● блоковите елементи винаги започват на нов ред
● блоковите елементи винаги заемат 100% от
ширината на родителския елемент(“родителския
елемент” е този, който съдържа в себе си други
елементи, които директно произлизат от него)
<div>, <p>, <h1>, <ul>, <table> и др. са
блокови елементи
28. Section Elements: div / span
Inline Elements - Инлайн елементи
На текстов параграф - искаш да удебелиш
определено изречение от този параграф. Или искаш
дадена дума да служи като линк към друга уеб
страница-постигне се с инлайн елементите.
● не променят структурата на уеб страницата, а
следват нейното съдържание
● винаги започват и завършват на един и същи ред
● ширината им е равна на съдържанието, което ги
изпълва
<strong>, <span>, <img>, <a>, <td>, <b> и др.
29. Section Elements: div / span
DIV tags
Div тагът се използва за разделяне на страницата на
секции. Блоков елемент, може да съдържа както
блокови така и инлайн елементи.
Позволява на автора да отдели част от съдържанието
на страницата и с употребата на CSS.
Най често се употребява в комбинация с атрибутите
class или id.
id, class, width, height, title, style, dir, lang,
xml:lang
30. Section Elements: div / span
Span tags
<span> се използва за предаване на определени
свойства на няколко думи или символи.
Инлайн елемент.
Не създавайте отделна област (параграф) в
документа.
Има смисъл само с някои CSS.
<div style="font-size:24px; color:red">DIV</div>
<p>This one is <span style="color:red; font-weight:
bold">only a test</span>.</p>
31. HTML таблици
Таблици <table></table>
Таблицата е разделена на редове, чрез тага <tr>
(„table row“), а всеки ред е разделен на клетки с
данни (чрез тага <td>, “table data”).
Всяка клетка може да съдържа текст, линкове,
картинки, списъци, форми, други таблици и т.н.
Атрибутът border задава рамка на таблицата.
32. HTML таблици
<table border="1">
<tr>
<td>ред 1, колона 1</td>
<td>ред 1, колона 2</td>
<td>ред 1, колона 3</td>
</tr>
<tr>
<td>ред 2, колона 1</td>
<td>ред 2, колона 2</td>
<td>ред 2, колона 3</td>
</tr>
</table>
ред 1, колона 1 ред 1, колона 2 ред 1, колона 3
ред 2, колона 1 ред 2, колона 2 ред 2, колона 3
34. HTML5 таблици
Редове се разделят на три семантични
секции:
header, body ,footer
<thead> table header съдържанието <th> елемент,
вместо <td> елемент
<tbody> тяло на таблица,
колекция от редове от таблицата,
които съдържат самите данни
<tfoot> table footer в кода се
пише ПРЕДИ <tbody>
<colgroup> и <col> колони
(използва се за да настроите
ширината на колоните)
36. HTML5 таблици
<table>
<colgroup>
<col span="2" style="background-color:
red">
<col style="background-color:yellow">
</colgroup>
<tr>
<th>ISBN</th>
<th>Title</th>
<th>Price</th>
</tr>
<tr>
<td>3476896</td>
<td>My first HTML</td>
<td>$53</td>
</tr>
<tr>
<td>5869207</td>
<td>My first CSS</td>
<td>$49</td>
</tr>
</table>
ISBN Title Price
3476896 My first HTML $53
5869207 My first CSS $49
37. Nested Table - Вложени таблици
Вложени таблици
Табличните клетки cells могат да да приемат почти
всякакъв вид данни в това число дори и втора
таблица.
Когато поставите една таблица вътре в друга, се казва
че я влагате.
<table>
<tr>
<td>Contact:</td>
<td>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
38. Complex Table - Комплексни таблици
Complex Tables - Комплексни
таблици
Cell Spacing and Padding
Табличните клетки cells имат два атрибута за
отстояние
cellspacing - Определя празното
пространство между клетките
cellpadding - Определя
празното пространство
около съдържанието
на клетка
40. HTML таблици - Row and Column Span
Row and Column Span
Клетките имат две атрибута, свързани с обединяване
(merging)
colspan-Определя колко колони клетката заема
rowspan-Определя колко
реда клетката заема
42. HTML FORMS - Frames
HTML Forms - Форми
● Form Fields and Fieldsets
● Text boxes
● Buttons
● Checkboxes and Radio Buttons
● Select fields
● Hidden fields
● Sliders and Spinboxes
● Validation fields
43. HTML FORMS - Frames
Форми <form></form>
<form name="myForm" method="post" action="
path/to/some-script.php">
</form>
Атрибутът "method" разказва как трябва да бъдат
изпратени данните от формуляра - чрез GET или
POST заявка
Атрибутът "action" казва къде трябва да бъдат
изпратени данните от формуляра
44. HTML FORMS - Frames
Text Fields
Single-line text input fields:
<input type="text" name="FirstName"
value="This is a text field" />
Multi-line text input fields (textarea):
<textarea name="Comments">This is a multi-line text
field</textarea>
Password input – текстово поле, където въведения
текст е с * признаци
<input type="password" name="pass" />
Buttons
Reset button-носи формата на първоначалното си
състояние
<input type="reset" name="resetBtn" value="Reset the form" />
45. HTML FORMS - Frames
Submit button
<input type="submit" value="Apply Now" />
Image button
<input type="image" src="submit.gif" name="submitBtn" alt="
Submit" />
Ordinary button – no default action, used with JS
<input type="button" value="click me" />
Checkboxes and Radio Buttons
Checkboxes
<input type="checkbox" name="fruit" value="apple" />
Radio buttons
<input type="radio" name="title" value="Mr." />
46. HTML FORMS - Frames
Radio buttons - могат да бъдат
групирани, което позволява само
един да бъде избран от група:
<input type="radio" name="city" value="Lom" />
<input type="radio" name="city" value="Ruse" />
Select Fields
Dropdown menus
<select name="gender">
<option value="Value 1"
selected="selected">Male</option>
<option value="Value 2">Female</option>
<option value="Value 3">Other</option>
</select>
47. HTML FORMS - Frames
Multiple-choice menus
<select name="products" multiple="multiple">
<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
</select>
Hidden Fields - Скрити полета съдържат невидими
данни
<input type="hidden" name="Account" value="This is a hidden
text field" />
Не е показано на потребителя
Използва се от JavaScript и от страна на сървъра код
ViewState, SessionState и др.
48. HTML FORMS - Frames
Labels
Етикетите се използват, за да се свърже с
обяснителен текст към поле за форма чрез
използването на ID на полето.
<label for="fn">First Name</label>
<input type="text" id="fn"/>
Кликвайки върху етикет фокусира своята свързано
поле ( отметки се превключват , радио бутони се
провери)
Етикетите са едновременно използваемост и
достъпност функции и са необходими , за да премине
валидация достъпност.
49. HTML FORMS - Frames
Fieldsets-са използвани,
за да приложат група свързани полета
на формуляра. <legend> е заглавието на Fieldset
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
50. HTML FORMS - Frames
Range and Spinbox HTML5
Ограничава потребителите да въвеждат само
цифри
Допълнителни атрибути мин , макс и стъпка и
стойност
Може да стане Spinbox или Slider , в зависимост от
типа вход
<input type="range" min="0" max="100" />
<input type="number" min="0" max="100" />
Има някои различия в
различните браузъри
51. HTML FORMS - Frames
Атрибути от HTML 5
Autocomplete
Браузърът съхранява по-рано въведените стойности,
връща обратно по-късно посещение на същата
страница
Autofocus
Полето се превръща в акцент на страница
натоварване
Required
Полето се изисква да бъде попълнено / избрано
52. HTML FORMS - Frames
Input Fields with Validation
Email – осигурява прост валидиране на имейл
Може да бъде приет модел за валидиране
На мобилно устройство носи имейл клавиатурата
<input type="email" required="true"
pattern="[^ @]*@[^ @].[^ @]"/>
URL – има валидиране на URL
На мобилно устройство носи URL клавиатурата
<input type="url" required="true" />
Telephone
<input type="tel" required="true" />
53. TML FORMS - Frames
TabIndex
Tabindex атрибут контролира реда, в който полета на
формуляри и хипервръзки са фокусирани когато
многократно натискане на клавиша TAB
tabindex="0" (zero) - "естествен " ред
Ако X < Y, тогава елементи с tabindex="X" се повтори
преди елементи tabindex="Y"
Елементи с отрицателна Клавиш се отстраняват ,
обаче , това не е дефинирано в стандарта
<input type="text" tabindex="10"/>
54. HTML FORMS - Frames
HTML Frames
● Frame и noframe tags
● iframe tag
HTML Frames: <iframe>
Рамки осигуряват начин да покаже множество HTML
документи в един единствен уеб страница
Страницата може да бъде разделена на отделни
екрани (рамки) хоризонтално и вертикално
Рамки бяха популярни в ранните векове на HTML
развитие, но сега тяхното използване се отхвърля
Frames не се поддържат от всички потребителски
агенти (браузъри, търсачки и т.н.)
A <noframes> елемент се използва за предоставяне
на съдържание за не-съвместими агенти.
55. HTML FORMS - Frames
HTML Frames
<html>
<head>
<title>Пример за фрейм</title>
</head>
<frameset cols="30%,*">
<frame src="left.html" name="left" />
<frame src="right.html" name="right" />
</frameset>
</html>
56. HTML FORMS - Frames
Inline Frames: <iframe>
Inline frames осигурява начин да се покаже един сайт
в друг сайт:
<iframe name="iframeGoogle" width="600" height="
400" src="http://www.google.com" frameborder="yes"
scrolling="yes"></iframe>
57. Semantic HTML
Семантичен HTML е:
По-лесно да се чете от разработчиците
По-лесно да се направи от браузърите
Начин да се покаже на търсенето ? Двигатели на
правилното съдържание
Как да пишем Semantic HTML?
Използвайте HTML5 семантични тагове
<header> , <nav> , <section> , <article> , <aside> ,
<footer>
Използвайте заглавия, когато имате нужда ? За
структуриране на съдържанието в подзаглавия
Във възходящ ред, взирайки се с <h1>
Не използвайте празни тагове
Подобно на <div>
58. Semantic HTML
HTML5 въвежда
семантичната структура тагове
Това може да бъде
създаден с помощта на ? Всички видове HTML с
елементи<div>, <span>
дори <p>.
Правилният начин :
да се използват
HTML 5 семантични
тагове
<header> </header>
<section> </section>
<aside> </aside>
<footer> </footer>
59. Semantic HTML
<header>
Заглавна страница или секция горен или статия
заглавна
<footer>
Букмейкър на сайта (по някое време може да бъде
раздел букмейкър)
<nav>
Навигация на сайта (обикновено в горния )
<section>
Раздел на сайта (например новини , коментари ,
линкове)
<article>
Член в раздел (напр. новина)
60. Semantic HTML
<aside>
Лента (обикновено в ляво или дясно)
<figure>
Фигура(фигура, например вътре в една статия)
<figcaption>
Надписът на фигурата (вътре етикет <figure> )
<audio> / <video>
Аудио / видео елемент (използва вградения плейър)
<details> + <summary>
Акордеон - като джаджа (може да бъде отворен /
затворен)
<hgroup>
Група статия заглавна+подзаглавката(<h1> + <h2>)
61. Semantic HTML
<time>
Задава дата / час (за пост / статия / новини)
Headings
Винаги използвайте заглавия (<h1> - <h6>), когато
имате нужда от заглавие.
Google го използва, за да маркирате важно
съдържание.
Силна <strong> срещу Bold <b>.
<b> не означава нищо
Той просто прави текста одебелен
<strong> текста е " по-силен ", отколкото на другия
околен текст
62. Semantic HTML
Emphasis <em> срещу Italic <i>
Emphasis не винаги означава, че кодът трябва
да бъде наклонен.(може да бъде bolder, italic и
underlined)
Стиловете за текст акцент трябва да се дават с CSS
Не чрез HTML!
Стари браузъри ( като IE6) ?
Използвайте Modernizr или HTML5shiv
63. Валидиране HTML
Какво е валидация?
Валидацията е един от критериите за
качествена уеб страница, но има ощемного
други.
Валидна уеб страница означава, че създателя ѝ
следва и прилага успешно установените
стандарти.
Понякога страниците, които създаваш няма да
бъдат сто процента валидни.
Голяма част от световно популярните уеб сайтове
имат грешки в своя код, но това не е пречка на
милиони потребители да ги използват ежедневно.
64. Валидиране HTML
Предимства на валидирането
● Лесен за поддръжка код
● Добра съвместимост с бъдещи технологии (нови
стандарти/браузъри/програми)
● Признак на професионализъм
● Достъпност от голям кръг от потребители
● Страницата зарежда по-бързо
● Инструмент за откриване на грешки
65. Валидиране HTML
W3C(World Wide Web Consortium)е
основната организация по стандартизация,
установяваща международни стандарти за
технологии като HTML, xHTML, CSS и много други.
Какво е валидатор?
Валидатора е онлайн инструмент (програма), който
ни служи за да проверим дали кода на нашата
страница е написан според установените стандарти.
http://validator.w3.org/
66. Валидиране HTML
Какво е валидация?
Това е процес, през който преминаваме, за да
проверим дали страницата е написана според
установените стандарти за езика, който използваме
(точно както в час по български ни проверяваха дали
изреченията са ни вярни).
Когато кода на нашата страница “премине” успешно
валидацията казваме, че той е валиден. И обратно,
когато кода не премине валидацията успешно
казваме, че той не е написан според стандартите.
67. Валидиране HTML
Как да валидираме нашата страница?
● Валидиране чрез URI;
● Валидиране чрез качване на файл;
● Валидиране чрез директно въвеждане;
Знак за валидност -когато страницата премине
успешно валидация получаваме като награда една
специална иконка, която можем да добавим в
страницата като знак за добре свършена работа.