html – програмиране и валидиране
DESCRIPTION
HTML – програмиране и валидиранеTRANSCRIPT
HTML-програмиране и валидиране
Дизайн и публикуване в Интернет
Екатерина Мицева 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 г.
Създаване на 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>
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 / spanBlock 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 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
Валидиране 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/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
……...
HTML-програмиране и валидиране
Дизайн и публикуване в Интернет
Екатерина Мицева http://sdkteachers.wordpress.com/