?? ????? ?? Web Standards

“?? Web standards ????????? ?? ????? ??? ????? ????... ??? ???? ??? ???????? ?? web ???? ?? browsers ?? ???? ????????? ?? ??????? ?? ???????????? ?? ???? ?????????”.

Eric Meyer

?? Web Standards

? W3C (World Wide Web Consortium) ?? ????? ?????????? ????? ????????? ??????????? ??? ?? ?????????? ??? ?? ????????? ?????? ??? ?? web. ?? ???????? standards ?????:

??????? ??????? ??????

• Extensible Hypertext Markup Language (XHTML) 1.0
• XHTML 1.1
• Extensible Markup Language (XML) 1.0

??????? ??????????? ??????

• Cascading Style Sheets (CSS) Level 1
• CSS Level 2
• CSS Level 3

???????

• Document Object Model (DOM) Level 1 (Core)
• DOM Level 2

Scripting ???????

• ECMAScript 262 (the standard version of JavaScript)

????? ??????? ??????????? ?????? (Markup)

• Mathematical Markup Language (MathML) 1.01
• MathML 2.0
• Scalable Vector Graphics (SVG) 1.0

?? ?? ????? ?? ?????? ?? Web Standards;

?? Web Standards ???????????? ???? ??:

• ?????????? ?? ?????????? ????????????? ?? ??? ?? ?????? ????????????? ???????
• ?????????? ?? ?????????? ?????? ??????????? ??????? ??? ?? web
• ?????????? ??? ?????? ??? ?? ???????? ?? ?????? ?????????
• ?????????? ?????????? ?????? ???????????? ?? ????????????? ????????? ??? ?? ???????????? ???????? ???????????? ?? ?? Internet
• ?????????? ?? ????????? ????? ????? ?? browsers ???????????? ??? ???? ???????? ?????????????? ??? ??? ??????? ??? ??????

??? ???? web designers ??? ???? developers, ?? Web Standards ??????????? ?? ?? ????? standards (??? ?? ??????, ??? ?????????? ??? ??????) ??? ?? ??? ????????? ????????? ???? ?? ????????? ?? ???????, ?? ??????? ??? ?? ?????.

??? ?????? ???? ????? ??????

?????? ????? website

? ?????????? ?????? ????? websites ????? ??? ???????? ??? ??????????? ?????? ??? ?????? ??? ????????????, ??? ?????????? ??? ???? ?? ????? ?? ???? 5-6 ???????????? browsers. ?? ????? ?????????????? ?????????????:

• ???????? layout ?? ???????
• ?????????? ?? ???????? ???? ???? ???? ?? ?? ????? (?.?. font tags)
• ??????? ?? ???????
• ??????? ?? ???????????
• ??????? ????????? ?? ????? ????? ??? ?????? ???????

“Web Standards” website

?? Web Standards ??????????????? ?? web ?? ??? ??????????? ???????? ????????????, ?? ????? ?????? ?? ????? ?????????? ?? ??????? ?????? ???????? ??? ????????. ?? ????? ?????????????? ?????????????:

• ?????? ?????? ??? ??????
• ??????? ???????
• ??????????? ??????? (??? ????????? ??? ????????)
• Cascading Style Sheets (CSS) ??? ?? ?????????? ??? ???????????? ??? ??? ?????????? ?????

?????? ?????? ??? ??????

???? ???????? ????? html ????????? ?????????? ??? ??? ???? ?????????. ?????? ???? ????????????:

• ??? ??? ???????????? ????? heading tags ?????????? ?? H1
• ??? ??????????? ????? ??? p tag
• ??? ?????? ????? ??? li tag

?? ????? ? ??????? ???????;

?? Validation ????? ??? ?????????? ??????? ???? ??????? ?? ???? ?? standards, ???? ???? ???????????? ??? ??? W3C. ??? ?????? ??? ???? ??????? ??? ??????? ??? ?????? ????????? ??????.

????? ?? ???????????? ??????? ?????? ??????;

• ? ??????? ??????? ?? “?????????” ??????????? ??? ?? ?? ??????
• ? ??????? ??????? ?? “?????????” ??? ????? ??? ?? ?? ??????
• ?? browsers ???????? ?? ?? ????? ???????? ?? ?? standards ?? ???? ????????? ??? ?? ??????? ??????? ?????? ?? ??????????

??? ?? ???????? ??? ? ??????? ??? ????? ???????

• W3C Markup Validation Service
• W3C CSS Validation Service
• WDG HTML Validator
• Stylesheets.com CSS Validator
• ????? ??????????? ???????????? ???????? ??????? ??? ?????? ???

??? ?????? ??????? ?????? ??????;

• ? ??????? ???????? ?? ?? ????? doctype
• ? developer ???????? ?? ??????????? ???? doctype
• ? developer ??????????? ?? ????? ????????????
• ??? ?? HTML tags ????????
• ????? alt ??? ??? ???????
• ??????? HTML hacks
• ????? ????? ??? HTML validators
• ???????? ????? ???? ???? ???? ????? ???? ????
• ? ??????? ????????? ??????? ????? ??? ???????? ??? developer

????? ?? ??????????? ??????? ?????????? ??????;

• ????? ????????? ???????? ??? ???????? ??? ???? ??? ????????????? ????????? (?.?. ?? ?????????? ??????)
• ????? ????????? ???????? ??? ???????? ??? ???? ??? ???????????? ???????? (?.?. screen readers, text browsers, search engines)
• ????? ????? ??? ?????? ?????????? ??? ?????? ??? ??????????????? ??? ?? ??????

??? ?????? ??????? ?????????? ??????;

• ??????? ????????? ?? ??????? ??? ??????????? ??? ??? ????? ???????
• ??????????? ??????????? ??????? ????????
• ??????????? ??????????? ?????? (label for, id, fieldset, legend)
• ??????????? ?????? ???? ??????? ??? ?? ????????? ??? ??????????
• ??????? ???????? ???????? ??? ?????
• ??????? ??????? ?????????
• ??????????? style sheets ?? ????? ???? ?? ??????? ?? ??? ??????????? ??? ??????
• ????????? ?? ???????? ???? ??????? ????? ??? ????? style sheets
• ??????? metadata ??? ?? ???????????? ???? ??????? ???

????? ?? ?????????????? ??????? CSS ??? ?? ?????????? ?? ??????????? ??? ?? ???????? ??????????? ???? ?????;

?? web developers ????????? ??? ?? ???????????? ??? ?????? ?? ???????? ?????? ??? ?????????? ??? ?? ??????????? ?? ?????? ??? ?? ??????????? ????? ????????? ??? HTML ?????? ??? ??? “??????” ???????. ???? ?????????:

• ??????? ??????????? ?? ???????????? ????????
• ?????????? ?????? ??? ????? ??? ??????, ????? ? ???????? ??? ??????? ??????????? ??? ??? ???? ??????
• ????????? ??????/??????????? “?????????” ??? ??????? - ????????? ??????? ?? ??? ??????
• ???????? ?????? ?? ??? ?????? - ?????????? ??????? ???? ??????
• ?? ??????? ??????? ?? ??????????????? ??????????? ???? ??????? ?? ??? ??????? ????
• ?????????? ??? ???????? ?????? ??? ??????

???????? ??? ??????????? ?? ???? ??? ???????

??????????? ????????? ??? ?? ??????????? ???? ???????

??????????? CSS ?????? ??? ???????????? ????????

??? site ????????? ?? CSS ?????? ???? ?????

??? ??? ?? ??? ????????? ?????????????? ????? ??? ??????? ????? ??? ?? ??????????? ???? ?????? ???? ????, ???? ?? ??? ????????????? ?????? ?? ???????, ????? ?? ????????? ??????? ? html ???????.

• ??????????? ????? ????
• ??????????? ????? ???? ???? ?? <div> containers
• ?????, ??????? ???????
• ?????? ?? ????
• ????????????? ??? ????
• ?????? ???? ????????

??? ?? ?????????? ??? ?????????? ??? ?? Web Standards;

• ?? ?????? “???????????” ??????????? (????????? ???????, ??????? ???????, ??????? ???????)
• ?? ??????????? ????? ?????????? ??? ????????????? ??????? (????????? ???????, ?????? ???????, ??????? ?? ?????????? ?????? ???????, ??????? ?? ????????, ??????? ?? ???????? ?????????? ???)
• ?? ??????????? ????? ?????????? ?? ???????????? ???????? (screen readers, browsers, text based browsers, hand helds, search robots, printers, fridges ???)
• ?? ??????? ????? ?? ?????????? ?? ???????????? ??? ???????? ??? ????? ???? ??????? ???? (style switchers)
• ??????? ?????? ??? site ???? ????????

??? ?? ??????? ??? ?????????? ??? ?? Web Standards;

• ??????????? ??????? ???? ???????? ??? (????????? ???????)
• ????????? ????? ?????????? (hosting) (????????? ???????)
• ???????? ????? ???? ??????? ??????????
• ?? ??????????? ?????? ?? ???????????? ??????????? ????? ?? ???????? ? ??????? ??? HTML ??????
• ?? ??????? ??????? ?? ???????????? ??? ????????
• ?? ??????? ??????? ?? ?????????? ??????? ??? ????? ??????????? ??? ?????
• ?????????????? (?????????? ??? ??????? ??? ??????????? ?? ?? ??????)

??? ????? ????????? ??? ?? Web Standards;

• ??????????? ??? ????????? ???????
• ??????? ??? ????????? ???????? ??? ??? ???????? ????????? ???
• ?????????????????, ????? ? ?????? ??? web ???????? ???? ?? ?????????? ????? Web Standards.

???? ????? ?? ?????????????

• ???????? ?????????
• ?????????? ?? ??? ???????????? ???????? ??? browser
• ?????? layouts ?????????????? ???? ?????????? ?? ?? ????? ??????? ???? ??? CSS

??? ??????? ??????????? ?? ???????? ?? ?? Web Standards;

?? Web Standards ??? ????? ??? ???? “????? - ?????”. ???? ?? developers ?? ?????? ???? ???????? ?? ???????? ???? ???? ??? ??????????.

? ?????????? ??????? ????? ??? ?????????? ?????? ??????????. ???? ?? ???????????? ????????? ??? ??? ??????, ??????????? ?? ?????? ???????????? ???????. ?????? ????????????:

??????? ???????

• ????????? ??? ????? doctype ?? ???? ??? ???????
• ????????? ??????????? ??????? ?? ???? ??? ???????
• ????????? ??????????? ??????? ???? ???????

??? ???????????? ???????

• ??????? ???????
• ?????? ??????? ???????
• ????????????? ??? font tags ??? ??? inline ???????? ?? CSS
• ??????????? ??????, ??????? ??? ?????

???????????? ???????

• ?????????? ??? ????? ??? ????????? ??? ??????? ?? CSS (padding, margins etc) ??? ?? layout ??????????? ??? ???????
• ?????? ?????????? ??? ????? ??? ????????? ??? ??????? ?? CSS - ????? ??????? ???????

??????

?? Web Standards ????????:

• ??????????? “?????????” ??? ???????
• ?????? ?????????? ?? ????????????? ????????? ??? ???????? ?????????
• ??????????????? ???? ??????? ??? ???? ???????
• ?????????? ??? ??????????? ?????????
• ???????? ????? ?????????? (hosting)
• ???????? ???? ???? ?????? ??? ??? ??????? ??????????
• ?????????????????

?????

Web Standards

• http://www.zeldman.com
• http://webstandards.org
• http://webstandardsgroup.org
• http://www.nypl.org/styleguide/

??????? ?? ??????

• http://brainstormsandraves.com/articles/semantics/structure/

Validation

• http://validator.w3.org/
• http://www.htmlhelp.com/tools/validator/
• http://webboy.net/presentation/ict2004/validation.htm
• http://webboy.net/presentation/validation.cfm

??????????????

• http://www.joeclark.org/
• http://www.accessify.com/
• http://www.juicystudio.com/

CSS

• http://webboy.net/presentation/ict2004/01.htm
• http://webboy.net/presentation/ict2004/02.htm
• http://webboy.net/presentation/ict2004/03.htm
• http://westciv.com/style_master/academy/css_tutorial/
• http://css.maxdesign.com.au
• http://www.thenoodleincident.com/tutorials/css/

????: http://www.maxdesign.com.au/presentation/benefits/index.htm