SlideShare a Scribd company logo
1 of 69
Download to read offline
HTML-програмиране и
валидиране
Дизайн и публикуване в Интернет
Екатерина Мицева http://sdkteachers.wordpress.com/
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
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 г.
Създаване на 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 и др.
Създаване на HTML страница
Browser Tools
● Firebug
● WebInspector
● WebDeveloper Toolbar
● F12 (IE)
● Inspect
● Console
● Bookmarklets
Drawing and Slicing Tools
Gimp, Paint.NET, Pixlr.com, Adobe Photoshop и др.
HTML - Tags
Концепции в HTML
● Tags - тагове
HTML таговете са най-малката съставна част на един
HTML документ.
Те, заедно със своите атрибути (като цвят, размер и
т.н), съставят т.нар. HTML елементи. Таговете са
ключови думи, заградени в ъглови скоби.
Обикновено са по двойки:
● таг за начало < – маркира началото на един
HTML елемент;
● таг за край /> - маркира края на HTML
елемента. За разлика от началния таг, крайният
има наклонена надясно черта пред името си
HTML - Tags
<html>
<body>
<h1> текст </h>
</body>
</html>
Таговете се влагат
един в друг, като
първият отворен таг
се затваря последен.
HTML - Attributes
● Attributes - атрибути
Повечето атрибути на елементи са двойки име-
стойност, разделени със знак за равенство и
записвани в рамките на отварящият таг след името
на елемента. Името може да е с единични или
двойни кавички. Оставянето на стойности на
атрибути без кавички се смята за несигурно.
Има няколко често срещани
атрибута, които може да се
появят в много
елементи:
Id, class, name, style, title
HTML - Attributes
hyperlink
<a href="http://www.w3schools.com">This is a link</a>
хоризонтална линия - няма затварящ таг
<hr width="95%" size="3px"/>
таг за снимка - няма затварящ таг
<img src="images/Снимка.png"/>
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>
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>
HTML - Структура
Основни елементи
<html> елемент
Указва на браузъра, че това
е HTML документ.
Отбелязва началото и края
на документа и съдържа
всичи други негови
елементи(с изключение на
<!DOCTYPE> елемента).
<html>
...
</html>
HTML - Структура
<head> елемент
Съдържа заглавието на документа, и
може да съдържа стилове (CSS),
скриптове(JS), енкодинг, meta тагове
<html>
<head>
<title>Заглавие на документа</title>
</head>
…
</html>
HTML - Структура
<body> елемент
Съдържа форматиране видимо за потребителя -
текст, хиперлинк, картинки, таблици, бутони,
параграфи, форми и т.н.
<html>
<head>
<title>Заглавие на документа</title>
</head>
<body>
Съдържание на документа...
</body>
</html>
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>
Текст форматиращи тагове
<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> шрифт като на пишеща машина
Tags
<br> tags - нов ред.
Няма таг за край !
Този текст съдържа <br> нов ред.
Този текст съдържа
нов ред.
Hyperlink Tags - Указва линк към друга страница.
Най-важният атрибут на този таг е href. Той посочва
URL адреса, към който сочи линка:
<a href="https://sdktheachers.wordpress.com" title=”
SDKteachers”>SDK theachers</a>
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;
Tags
цвят на линията се използва атрибута
color; дебелина на хоризонталната линия
се използва атрибута size.
<hr width="250" align="center" color="#ff0000" size="10" />
Коментари в HTML
<!-- TEКСТ -->
Headings and Paragraphs
Заглавия и Параграф
Headings tags (h1-h6)-Заглавия
<h1> дефинира най-важното заглавие
<h6> дефинира най-маловажното заглавие
<h1>Заглавие 1</h1>
<h2>Подзаглавие 2</h2>
<h3>Подзаглавие 3</h3>
<h4>Подзаглавие 4</h4>
<h5>Подзаглавие 5</h5>
<h6>Подзаглавие 6</h6>
Headings and Paragraphs
Paragraphs tags - Параграф
Браузърите автоматично добавят по един
празен ред преди и след текста, маркиран като
параграф.
<p>Това е параграф.</p>
<p>Това е друг параграф.</p>
Това е параграф.
Това е друг параграф.
Списъци в 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 указва, че
подреждането ще е в низходящ
ред, а присвоената му стойност -
показва началото на номерацията
Списъци в 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. Три
Списъци в 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. Три
Списъци в 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>
Списъци в HTML (Lists)
Definition List - Описателни
сисъци <dl>
Това са списъци от термини/имена с описание на всеки
термин/име. Такъв списък се указва с тага <dl> в съчетание с
таговете:
<dt> - за всеки термин/име
<dd> - за всяко описание на термина/името
<dl>
<dt>Биричка</dt>
<dd>- студена напитка</dd>
<dt>Шкембе</dt>
<dd>- освежаващо, сутрешно ястие</dd>
</dl>
Биричка
- студена напитка
Шкембе
- освежаващо, сутрешно
ястие
Section Elements: div / span
Block and Inline Elements
Block Elements - Блокови елементи
● формират блок от съдържание
● блоковите елементи винаги започват на нов ред
● блоковите елементи винаги заемат 100% от
ширината на родителския елемент(“родителския
елемент” е този, който съдържа в себе си други
елементи, които директно произлизат от него)
<div>, <p>, <h1>, <ul>, <table> и др. са
блокови елементи
Section Elements: div / span
Inline Elements - Инлайн елементи
На текстов параграф - искаш да удебелиш
определено изречение от този параграф. Или искаш
дадена дума да служи като линк към друга уеб
страница-постигне се с инлайн елементите.
● не променят структурата на уеб страницата, а
следват нейното съдържание
● винаги започват и завършват на един и същи ред
● ширината им е равна на съдържанието, което ги
изпълва
<strong>, <span>, <img>, <a>, <td>, <b> и др.
Section Elements: div / span
DIV tags
Div тагът се използва за разделяне на страницата на
секции. Блоков елемент, може да съдържа както
блокови така и инлайн елементи.
Позволява на автора да отдели част от съдържанието
на страницата и с употребата на CSS.
Най често се употребява в комбинация с атрибутите
class или id.
id, class, width, height, title, style, dir, lang,
xml:lang
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>
HTML таблици
Таблици <table></table>
Таблицата е разделена на редове, чрез тага <tr>
(„table row“), а всеки ред е разделен на клетки с
данни (чрез тага <td>, “table data”).
Всяка клетка може да съдържа текст, линкове,
картинки, списъци, форми, други таблици и т.н.
Атрибутът border задава рамка на таблицата.
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
HTML таблици
<table border="1">
<tr>
<th>Колона 1</th>
<th>Колона 2</th>
</tr>
<tr>
<td>ред 1, колона 1</td>
<td>ред 1, колона 2</td>
</tr>
<tr>
<td>ред 2, колона 1</td>
<td>ред 2, колона 2</td>
</tr>
</table>
Колона 1 Колона 2
ред 1, колона 1 ред 1, колона 2
ред 2, колона 1 ред 2, колона 2
HTML5 таблици
Редове се разделят на три семантични
секции:
header, body ,footer
<thead> table header съдържанието <th> елемент,
вместо <td> елемент
<tbody> тяло на таблица,
колекция от редове от таблицата,
които съдържат самите данни
<tfoot> table footer в кода се
пише ПРЕДИ <tbody>
<colgroup> и <col> колони
(използва се за да настроите
ширината на колоните)
HTML5 таблици
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Month Savings
January $100
February $80
Sum $180
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
Nested Table - Вложени таблици
Вложени таблици
Табличните клетки cells могат да да приемат почти
всякакъв вид данни в това число дори и втора
таблица.
Когато поставите една таблица вътре в друга, се казва
че я влагате.
<table>
<tr>
<td>Contact:</td>
<td>
<table>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
</table>
</td>
</tr>
</table>
Complex Table - Комплексни таблици
Complex Tables - Комплексни
таблици
Cell Spacing and Padding
Табличните клетки cells имат два атрибута за
отстояние
cellspacing - Определя празното
пространство между клетките
cellpadding - Определя
празното пространство
около съдържанието
на клетка
Complex Table - Комплексни таблици
Cell Spacing and Padding
<html>
<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td>
<td>Second</td></tr>
</table>
</body>
</html>
HTML таблици - Row and Column Span
Row and Column Span
Клетките имат две атрибута, свързани с обединяване
(merging)
colspan-Определя колко колони клетката заема
rowspan-Определя колко
реда клетката заема
HTML таблици - Row and Column Span
ROWSPAN
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
HTML FORMS - Frames
Форми <form></form>
<form name="myForm" method="post" action="
path/to/some-script.php">
</form>
Атрибутът "method" разказва как трябва да бъдат
изпратени данните от формуляра - чрез GET или
POST заявка
Атрибутът "action" казва къде трябва да бъдат
изпратени данните от формуляра
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" />
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." />
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>
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 и др.
HTML FORMS - Frames
Labels
Етикетите се използват, за да се свърже с
обяснителен текст към поле за форма чрез
използването на ID на полето.
<label for="fn">First Name</label>
<input type="text" id="fn"/>
Кликвайки върху етикет фокусира своята свързано
поле ( отметки се превключват , радио бутони се
провери)
Етикетите са едновременно използваемост и
достъпност функции и са необходими , за да премине
валидация достъпност.
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>
HTML FORMS - Frames
Range and Spinbox HTML5
Ограничава потребителите да въвеждат само
цифри
Допълнителни атрибути мин , макс и стъпка и
стойност
Може да стане Spinbox или Slider , в зависимост от
типа вход
<input type="range" min="0" max="100" />
<input type="number" min="0" max="100" />
Има някои различия в
различните браузъри
HTML FORMS - Frames
Атрибути от HTML 5
Autocomplete
Браузърът съхранява по-рано въведените стойности,
връща обратно по-късно посещение на същата
страница
Autofocus
Полето се превръща в акцент на страница
натоварване
Required
Полето се изисква да бъде попълнено / избрано
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" />
TML FORMS - Frames
TabIndex
Tabindex атрибут контролира реда, в който полета на
формуляри и хипервръзки са фокусирани когато
многократно натискане на клавиша TAB
tabindex="0" (zero) - "естествен " ред
Ако X < Y, тогава елементи с tabindex="X" се повтори
преди елементи tabindex="Y"
Елементи с отрицателна Клавиш се отстраняват ,
обаче , това не е дефинирано в стандарта
<input type="text" tabindex="10"/>
HTML FORMS - Frames
HTML Frames
● Frame и noframe tags
● iframe tag
HTML Frames: <iframe>
Рамки осигуряват начин да покаже множество HTML
документи в един единствен уеб страница
Страницата може да бъде разделена на отделни
екрани (рамки) хоризонтално и вертикално
Рамки бяха популярни в ранните векове на HTML
развитие, но сега тяхното използване се отхвърля
Frames не се поддържат от всички потребителски
агенти (браузъри, търсачки и т.н.)
A <noframes> елемент се използва за предоставяне
на съдържание за не-съвместими агенти.
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>
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>
Semantic HTML
Семантичен HTML е:
По-лесно да се чете от разработчиците
По-лесно да се направи от браузърите
Начин да се покаже на търсенето ? Двигатели на
правилното съдържание
Как да пишем Semantic HTML?
Използвайте HTML5 семантични тагове
<header> , <nav> , <section> , <article> , <aside> ,
<footer>
Използвайте заглавия, когато имате нужда ? За
структуриране на съдържанието в подзаглавия
Във възходящ ред, взирайки се с <h1>
Не използвайте празни тагове
Подобно на <div>
Semantic HTML
HTML5 въвежда
семантичната структура тагове
Това може да бъде
създаден с помощта на ? Всички видове HTML с
елементи<div>, <span>
дори <p>.
Правилният начин :
да се използват
HTML 5 семантични
тагове
<header> </header>
<section> </section>
<aside> </aside>
<footer> </footer>
Semantic HTML
<header>
Заглавна страница или секция горен или статия
заглавна
<footer>
Букмейкър на сайта (по някое време може да бъде
раздел букмейкър)
<nav>
Навигация на сайта (обикновено в горния )
<section>
Раздел на сайта (например новини , коментари ,
линкове)
<article>
Член в раздел (напр. новина)
Semantic HTML
<aside>
Лента (обикновено в ляво или дясно)
<figure>
Фигура(фигура, например вътре в една статия)
<figcaption>
Надписът на фигурата (вътре етикет <figure> )
<audio> / <video>
Аудио / видео елемент (използва вградения плейър)
<details> + <summary>
Акордеон - като джаджа (може да бъде отворен /
затворен)
<hgroup>
Група статия заглавна+подзаглавката(<h1> + <h2>)
Semantic HTML
<time>
Задава дата / час (за пост / статия / новини)
Headings
Винаги използвайте заглавия (<h1> - <h6>), когато
имате нужда от заглавие.
Google го използва, за да маркирате важно
съдържание.
Силна <strong> срещу Bold <b>.
<b> не означава нищо
Той просто прави текста одебелен
<strong> текста е " по-силен ", отколкото на другия
околен текст
Semantic HTML
Emphasis <em> срещу Italic <i>
Emphasis не винаги означава, че кодът трябва
да бъде наклонен.(може да бъде bolder, italic и
underlined)
Стиловете за текст акцент трябва да се дават с CSS
Не чрез HTML!
Стари браузъри ( като IE6) ?
Използвайте Modernizr или HTML5shiv
Валидиране HTML
Какво е валидация?
Валидацията е един от критериите за
качествена уеб страница, но има ощемного
други.
Валидна уеб страница означава, че създателя ѝ
следва и прилага успешно установените
стандарти.
Понякога страниците, които създаваш няма да
бъдат сто процента валидни.
Голяма част от световно популярните уеб сайтове
имат грешки в своя код, но това не е пречка на
милиони потребители да ги използват ежедневно.
Валидиране HTML
Предимства на валидирането
● Лесен за поддръжка код
● Добра съвместимост с бъдещи технологии (нови
стандарти/браузъри/програми)
● Признак на професионализъм
● Достъпност от голям кръг от потребители
● Страницата зарежда по-бързо
● Инструмент за откриване на грешки
Валидиране HTML
W3C(World Wide Web Consortium)е
основната организация по стандартизация,
установяваща международни стандарти за
технологии като HTML, xHTML, CSS и много други.
Какво е валидатор?
Валидатора е онлайн инструмент (програма), който
ни служи за да проверим дали кода на нашата
страница е написан според установените стандарти.
http://validator.w3.org/
Валидиране HTML
Какво е валидация?
Това е процес, през който преминаваме, за да
проверим дали страницата е написана според
установените стандарти за езика, който използваме
(точно както в час по български ни проверяваха дали
изреченията са ни вярни).
Когато кода на нашата страница “премине” успешно
валидацията казваме, че той е валиден. И обратно,
когато кода не премине валидацията успешно
казваме, че той не е написан според стандартите.
Валидиране HTML
Как да валидираме нашата страница?
● Валидиране чрез URI;
● Валидиране чрез качване на файл;
● Валидиране чрез директно въвеждане;
Знак за валидност -когато страницата премине
успешно валидация получаваме като награда една
специална иконка, която можем да добавим в
страницата като знак за добре свършена работа.
Полезни линкове
http://www.w3schools.com/
http://validator.w3.org/
http://bg.wikipedia.org/wiki/HTML
http://www.w3.org/html/
http://html.net/
http://uroci.net/
http://www.youtube.com/watch?v=aED7jRgvIKg
http://www.youtube.com/watch?v=8eJvYvCy-bA
……...
https://www.google.bg
……...
HTML-програмиране и
валидиране
Дизайн и публикуване в Интернет
Екатерина Мицева http://sdkteachers.wordpress.com/

More Related Content

What's hot

мишићни систем човека
мишићни систем човекамишићни систем човека
мишићни систем човекаMaja Simic
 
билките в българия
билките в българиябилките в българия
билките в българияNadia Ropleva
 
65. 66.nastavna jedinica
65. 66.nastavna jedinica65. 66.nastavna jedinica
65. 66.nastavna jedinicaVioletaNovakovi
 
L207 - Biologija - Sisari – Natalija Radenković - Danijela Veljković
L207 - Biologija - Sisari – Natalija Radenković - Danijela VeljkovićL207 - Biologija - Sisari – Natalija Radenković - Danijela Veljković
L207 - Biologija - Sisari – Natalija Radenković - Danijela VeljkovićNašaŠkola.Net
 
Organi za kretanje
Organi za kretanjeOrgani za kretanje
Organi za kretanjeSandra Vuk
 
нивои организације биолошких система
нивои организације биолошких системанивои организације биолошких система
нивои организације биолошких системаMaja Simic
 
Панкреас Kовачевић A.
Панкреас  Kовачевић A.Панкреас  Kовачевић A.
Панкреас Kовачевић A.Violeta Djuric
 
систем органа за циркулацију
систем органа за циркулацијусистем органа за циркулацију
систем органа за циркулацијуMaja Simic
 
Excel formatirane
Excel formatiraneExcel formatirane
Excel formatiraneval1616
 
Дигитални устройства.pptx
Дигитални устройства.pptxДигитални устройства.pptx
Дигитални устройства.pptxssuser6f61061
 

What's hot (20)

žIvotna oblast kopna
žIvotna oblast kopnažIvotna oblast kopna
žIvotna oblast kopna
 
List
ListList
List
 
Svetski dan zdrave hrane
Svetski dan zdrave hraneSvetski dan zdrave hrane
Svetski dan zdrave hrane
 
мишићни систем човека
мишићни систем човекамишићни систем човека
мишићни систем човека
 
билките в българия
билките в българиябилките в българия
билките в българия
 
Dijete
DijeteDijete
Dijete
 
65. 66.nastavna jedinica
65. 66.nastavna jedinica65. 66.nastavna jedinica
65. 66.nastavna jedinica
 
Mekusci
MekusciMekusci
Mekusci
 
L207 - Biologija - Sisari – Natalija Radenković - Danijela Veljković
L207 - Biologija - Sisari – Natalija Radenković - Danijela VeljkovićL207 - Biologija - Sisari – Natalija Radenković - Danijela Veljković
L207 - Biologija - Sisari – Natalija Radenković - Danijela Veljković
 
Tkivo
TkivoTkivo
Tkivo
 
Krv
KrvKrv
Krv
 
Organi za kretanje
Organi za kretanjeOrgani za kretanje
Organi za kretanje
 
нивои организације биолошких система
нивои организације биолошких системанивои организације биолошких система
нивои организације биолошких система
 
Paleobiologija 2 lj 2015
Paleobiologija 2 lj 2015Paleobiologija 2 lj 2015
Paleobiologija 2 lj 2015
 
13. disanje
13. disanje13. disanje
13. disanje
 
Панкреас Kовачевић A.
Панкреас  Kовачевић A.Панкреас  Kовачевић A.
Панкреас Kовачевић A.
 
систем органа за циркулацију
систем органа за циркулацијусистем органа за циркулацију
систем органа за циркулацију
 
Excel formatirane
Excel formatiraneExcel formatirane
Excel formatirane
 
Дигитални устройства.pptx
Дигитални устройства.pptxДигитални устройства.pptx
Дигитални устройства.pptx
 
Izučavanje ćelija
Izučavanje ćelijaIzučavanje ćelija
Izučavanje ćelija
 

Viewers also liked

Училищен курс по програмиране на C# (2013/2014), занятие №12
Училищен курс по програмиране на C# (2013/2014), занятие №12Училищен курс по програмиране на C# (2013/2014), занятие №12
Училищен курс по програмиране на C# (2013/2014), занятие №12DAVID Academy
 
Html presentation
Html presentationHtml presentation
Html presentationfleexy
 
пулпити на времените зъби
пулпити на времените зъбипулпити на времените зъби
пулпити на времените зъбиGergana Georgieva
 
Дентално избелване (курс с Д-р Роберто Турини)
Дентално избелване (курс с Д-р Роберто Турини)Дентално избелване (курс с Д-р Роберто Турини)
Дентално избелване (курс с Д-р Роберто Турини)Nora Damyanova
 
мария магдалена
мария магдаленамария магдалена
мария магдаленаGergana Georgieva
 
композиционни материали
композиционни материаликомпозиционни материали
композиционни материалиGergana Georgieva
 
Алтернативни методи и техники за лечение на пулпата при временни зъби
Алтернативни методи и  техники за лечение на пулпата  при временни зъби Алтернативни методи и  техники за лечение на пулпата  при временни зъби
Алтернативни методи и техники за лечение на пулпата при временни зъби Foofee Mohammad
 
Кръвоснабдяване на ЛЧО
Кръвоснабдяване на ЛЧОКръвоснабдяване на ЛЧО
Кръвоснабдяване на ЛЧОGergana Georgieva
 
периодонтити
периодонтитипериодонтити
периодонтитиmasterdental
 
екстраорални апарати
екстраорални апаратиекстраорални апарати
екстраорални апаратиFoofee Mohammad
 
превантивно неоперативно лечение на зъбния кариес
превантивно неоперативно лечение на зъбния кариеспревантивно неоперативно лечение на зъбния кариес
превантивно неоперативно лечение на зъбния кариесGergana Georgieva
 
колаборация с протезисти и пародонтолози при ортодонтско лечение
колаборация с протезисти и пародонтолози при ортодонтско лечениеколаборация с протезисти и пародонтолози при ортодонтско лечение
колаборация с протезисти и пародонтолози при ортодонтско лечениеGergana Georgieva
 
Естетични композитни ресторации с Genial GC
Естетични композитни ресторации с Genial GCЕстетични композитни ресторации с Genial GC
Естетични композитни ресторации с Genial GCNora Damyanova
 
Инервация на ЛЧО
Инервация на ЛЧОИнервация на ЛЧО
Инервация на ЛЧОGergana Georgieva
 
презентация на пациент
презентация на пациентпрезентация на пациент
презентация на пациентGergana Georgieva
 

Viewers also liked (20)

Училищен курс по програмиране на C# (2013/2014), занятие №12
Училищен курс по програмиране на C# (2013/2014), занятие №12Училищен курс по програмиране на C# (2013/2014), занятие №12
Училищен курс по програмиране на C# (2013/2014), занятие №12
 
Html presentation
Html presentationHtml presentation
Html presentation
 
Atlas help
Atlas helpAtlas help
Atlas help
 
пулпити на времените зъби
пулпити на времените зъбипулпити на времените зъби
пулпити на времените зъби
 
Дентално избелване (курс с Д-р Роберто Турини)
Дентално избелване (курс с Д-р Роберто Турини)Дентално избелване (курс с Д-р Роберто Турини)
Дентално избелване (курс с Д-р Роберто Турини)
 
Apexgenesis et apeksfikacio
Apexgenesis et apeksfikacioApexgenesis et apeksfikacio
Apexgenesis et apeksfikacio
 
мария магдалена
мария магдаленамария магдалена
мария магдалена
 
композиционни материали
композиционни материаликомпозиционни материали
композиционни материали
 
Алтернативни методи и техники за лечение на пулпата при временни зъби
Алтернативни методи и  техники за лечение на пулпата  при временни зъби Алтернативни методи и  техники за лечение на пулпата  при временни зъби
Алтернативни методи и техники за лечение на пулпата при временни зъби
 
Pulp
PulpPulp
Pulp
 
Кръвоснабдяване на ЛЧО
Кръвоснабдяване на ЛЧОКръвоснабдяване на ЛЧО
Кръвоснабдяване на ЛЧО
 
периодонтити
периодонтитипериодонтити
периодонтити
 
екстраорални апарати
екстраорални апаратиекстраорални апарати
екстраорални апарати
 
превантивно неоперативно лечение на зъбния кариес
превантивно неоперативно лечение на зъбния кариеспревантивно неоперативно лечение на зъбния кариес
превантивно неоперативно лечение на зъбния кариес
 
Dentali
DentaliDentali
Dentali
 
колаборация с протезисти и пародонтолози при ортодонтско лечение
колаборация с протезисти и пародонтолози при ортодонтско лечениеколаборация с протезисти и пародонтолози при ортодонтско лечение
колаборация с протезисти и пародонтолози при ортодонтско лечение
 
Естетични композитни ресторации с Genial GC
Естетични композитни ресторации с Genial GCЕстетични композитни ресторации с Genial GC
Естетични композитни ресторации с Genial GC
 
Инервация на ЛЧО
Инервация на ЛЧОИнервация на ЛЧО
Инервация на ЛЧО
 
презентация на пациент
презентация на пациентпрезентация на пациент
презентация на пациент
 
Head
HeadHead
Head
 

Similar to HTML – програмиране и валидиране

Similar to HTML – програмиране и валидиране (20)

Html & css improved
Html & css   improvedHtml & css   improved
Html & css improved
 
html introduction
html introductionhtml introduction
html introduction
 
HTML Introduction (BG)
HTML Introduction (BG)HTML Introduction (BG)
HTML Introduction (BG)
 
Курс по уеб програмиране (2014), занятие №1 - HTML
Курс по уеб програмиране (2014), занятие №1 - HTMLКурс по уеб програмиране (2014), занятие №1 - HTML
Курс по уеб програмиране (2014), занятие №1 - HTML
 
Html1
Html1Html1
Html1
 
Xhtml
XhtmlXhtml
Xhtml
 
Програмиране с Питон - Django, част 2
Програмиране с Питон - Django, част 2Програмиране с Питон - Django, част 2
Програмиране с Питон - Django, част 2
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
DHTML
DHTMLDHTML
DHTML
 
DHTML
DHTMLDHTML
DHTML
 
изработка на сайт
изработка на сайтизработка на сайт
изработка на сайт
 
Izrabotka na site
Izrabotka na siteIzrabotka na site
Izrabotka na site
 
изработка на сайт-seagarden.free.bg
изработка на сайт-seagarden.free.bgизработка на сайт-seagarden.free.bg
изработка на сайт-seagarden.free.bg
 
Web Pro2
Web Pro2Web Pro2
Web Pro2
 
B1 t1 php_basics
B1 t1 php_basicsB1 t1 php_basics
B1 t1 php_basics
 
B1 t1 php_basics
B1 t1 php_basicsB1 t1 php_basics
B1 t1 php_basics
 
Html8
Html8Html8
Html8
 
3block inline
3block inline3block inline
3block inline
 
Html1
Html1Html1
Html1
 

HTML – програмиране и валидиране

  • 1. HTML-програмиране и валидиране Дизайн и публикуване в Интернет Екатерина Мицева http://sdkteachers.wordpress.com/
  • 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КСТ -->
  • 20. Headings and Paragraphs Заглавия и Параграф Headings tags (h1-h6)-Заглавия <h1> дефинира най-важното заглавие <h6> дефинира най-маловажното заглавие <h1>Заглавие 1</h1> <h2>Подзаглавие 2</h2> <h3>Подзаглавие 3</h3> <h4>Подзаглавие 4</h4> <h5>Подзаглавие 5</h5> <h6>Подзаглавие 6</h6>
  • 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
  • 33. HTML таблици <table border="1"> <tr> <th>Колона 1</th> <th>Колона 2</th> </tr> <tr> <td>ред 1, колона 1</td> <td>ред 1, колона 2</td> </tr> <tr> <td>ред 2, колона 1</td> <td>ред 2, колона 2</td> </tr> </table> Колона 1 Колона 2 ред 1, колона 1 ред 1, колона 2 ред 2, колона 1 ред 2, колона 2
  • 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 - Определя празното пространство около съдържанието на клетка
  • 39. Complex Table - Комплексни таблици Cell Spacing and Padding <html> <head><title>Table Cells</title></head> <body> <table cellspacing="15" cellpadding="0"> <tr><td>First</td> <td>Second</td></tr> </table> <br/> <table cellspacing="0" cellpadding="10"> <tr><td>First</td> <td>Second</td></tr> </table> </body> </html>
  • 40. HTML таблици - Row and Column Span Row and Column Span Клетките имат две атрибута, свързани с обединяване (merging) colspan-Определя колко колони клетката заема rowspan-Определя колко реда клетката заема
  • 41. HTML таблици - Row and Column Span 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; ● Валидиране чрез качване на файл; ● Валидиране чрез директно въвеждане; Знак за валидност -когато страницата премине успешно валидация получаваме като награда една специална иконка, която можем да добавим в страницата като знак за добре свършена работа.
  • 69. HTML-програмиране и валидиране Дизайн и публикуване в Интернет Екатерина Мицева http://sdkteachers.wordpress.com/