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

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

Дизайн и публикуване в Интернет

Екатерина Мицева http://sdkteachers.wordpress.com/

http://sdkteachers.wordpress.com/

Hypertext Markup Language

HTML - HyperText Markup Language "език за маркиране на хипертекст"

Версии на HTMLКрая на 80-те години на XX век –ТимБърнърс-Лий – метод за обмяна на информация с учени от ЦЕРН1991 – HTML first mentioned – Tim Berners-Lee – HTML tags1993 – HTML (first public version, published at IETF)1993 – HTML 2 draft1995 – HTML 2 – W3C

Hypertext Markup Language

1995 – HTML 3 - Качване на файлове с формуляри1997 – HTML 3.2 – “Wilbur”1997 – HTML 4 – ”Cougar” – CSS1999 – HTML 4.01 (final)2000 – XHTML 2001 – XHTML (final)2008 – HTML5 / XHTML5 –HTML5 е представен като работен проект от W3C2011 – версия 5 е в процес на развитие на техническите спецификации. Пълната спецификация се очаква до 2014 г.

http://bg.wikipedia.org/wiki/HTML5

http://bg.wikipedia.org/wiki/W3C

Създаване на HTML страница

HTML документ трябва да бъде с файлово разширение .htm или .html HTML файловете се създават с text editors:NotePad, NotePad ++, PSPad, Sublime text и др.Или с HTML editors (IDEs):

MS Visual StudioMS Visual Web DeveloperAdobe DreamWeaverEclipseAptanaJetBrains WebStorm и др.

Създаване на HTML страница

Browser Tools● Firebug● WebInspector● WebDeveloper Toolbar● F12 (IE)● Inspect● Console● Bookmarklets

Drawing and Slicing ToolsGimp, 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>


<head> елементСъдържа заглавието на документа, и може да съдържа стилове (CSS), скриптове(JS), енкодинг, meta тагове

<html><head> <title>Заглавие на документа</title></head>…</html>


<body> елементСъдържа форматиране видимо за потребителя - текст, хиперлинк, картинки, таблици, бутони, параграфи, форми и т.н.<html><head> <title>Заглавие на документа</title></head><body> Съдържание на документа...</body></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>

http://www.w3.org/TR/html4/strict.dtd



Текст форматиращи тагове<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>

https://sdktheachers.wordpress.com

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

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. Три


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. Три


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>


Definition List - Описателни сисъци <dl>Това са списъци от термини/имена с описание на всеки термин/име. Такъв списък се указва с тага <dl> в съчетание с таговете:<dt> - за всеки термин/име<dd> - за всяко описание на термина/името<dl><dt>Биричка</dt><dd>- студена напитка</dd><dt>Шкембе</dt><dd>- освежаващо, сутрешно ястие</dd></dl>

Биричка

- студена напиткаШкембе

- освежаващо, сутрешно ястие

Section Elements: div / spanBlock and Inline Elements

Block Elements - Блокови елементи

● формират блок от съдържание● блоковите елементи винаги започват на нов ред● блоковите елементи винаги заемат 100% от

ширината на родителския елемент(“родителския елемент” е този, който съдържа в себе си други елементи, които директно произлизат от него)

<div>, <p>, <h1>, <ul>, <table> и др. са блокови елементи

Section Elements: div / span

Inline Elements - Инлайн елементиНа текстов параграф - искаш да удебелиш определено изречение от този параграф. Или искаш дадена дума да служи като линк към друга уеб страница-постигне се с инлайн елементите.● не променят структурата на уеб страницата, а

следват нейното съдържание● винаги започват и завършват на един и същи ред● ширината им е равна на съдържанието, което ги

изпълва<strong>, <span>, <img>, <a>, <td>, <b> и др.


DIV tags Div тагът се използва за разделяне на страницата на секции. Блоков елемент, може да съдържа както блокови така и инлайн елементи.Позволява на автора да отдели част от съдържанието на страницата и с употребата на CSS.Най често се употребява в комбинация с атрибутите class или id.

id, class, width, height, title, style, dir, lang, xml:lang


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 FieldsSingle-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" />

ButtonsReset 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 ButtonsCheckboxes<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 FieldsDropdown 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 атрибут контролира реда, в който полета на формуляри и хипервръзки са фокусирани когато многократно натискане на клавиша TABtabindex="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

http://modernizr.com/

https://code.google.com/p/html5shiv/

Валидиране HTML Какво е валидация?

Валидацията е един от критериите за качествена уеб страница, но има ощемного други.Валидна уеб страница означава, че създателя ѝ следва и прилага успешно установените стандарти.Понякога страниците, които създаваш няма да бъдат сто процента валидни.Голяма част от световно популярните уеб сайтове имат грешки в своя код, но това не е пречка на милиони потребители да ги използват ежедневно.

Валидиране HTML

Предимства на валидирането

● Лесен за поддръжка код● Добра съвместимост с бъдещи технологии (нови

стандарти/браузъри/програми)● Признак на професионализъм● Достъпност от голям кръг от потребители● Страницата зарежда по-бързо● Инструмент за откриване на грешки

Валидиране HTML W3C(World Wide Web Consortium)е

основната организация по стандартизация, установяваща международни стандарти за технологии като HTML, xHTML, CSS и много други.

Какво е валидатор?

Валидатора е онлайн инструмент (програма), който ни служи за да проверим дали кода на нашата страница е написан според установените стандарти.

http://validator.w3.org/

http://www.w3.org/



Валидиране HTML Какво е валидация?

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

Когато кода на нашата страница “премине” успешно валидацията казваме, че той е валиден. И обратно, когато кода не премине валидацията успешно казваме, че той не е написан според стандартите.

Валидиране HTML Как да валидираме нашата страница?

● Валидиране чрез URI;● Валидиране чрез качване на файл;● Валидиране чрез директно въвеждане;

Знак за валидност -когато страницата премине успешно валидация получаваме като награда една специална иконка, която можем да добавим в страницата като знак за добре свършена работа.

Полезни линкове

http://www.w3schools.com/http://validator.w3.org/http://bg.wikipedia.org/wiki/HTMLhttp://www.w3.org/html/http://html.net/http://uroci.net/http://www.youtube.com/watch?v=aED7jRgvIKghttp://www.youtube.com/watch?v=8eJvYvCy-bA……...

https://www.google.bg

……...

http://www.w3schools.com/

http://www.w3schools.com/



http://bg.wikipedia.org/wiki/HTML

http://bg.wikipedia.org/wiki/HTML

http://www.w3.org/html/

http://www.w3.org/html/

http://html.net/

http://html.net/

http://uroci.net/

http://uroci.net/

http://www.youtube.com/watch?v=aED7jRgvIKg

http://www.youtube.com/watch?v=aED7jRgvIKg

http://www.youtube.com/watch?v=8eJvYvCy-bA

http://www.youtube.com/watch?v=8eJvYvCy-bA



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

Дизайн и публикуване в Интернет

Екатерина Мицева http://sdkteachers.wordpress.com/

http://sdkteachers.wordpress.com/

Education

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