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;
● Валидиране чрез качване на файл;
● Валидиране чрез директно въвеждане;
Знак за валидност -когато страницата премине
успешно валидация получаваме като награда една
специална иконка, която можем да добавим в
страницата като знак за добре свършена работа.