?????? HTML ? CSS ??? ????????

?????????? ???-???????? ????? ?????? ? ???????? ???? ????????? ????????????. HTML ???????? ?? ????????? ? ??????? ???????. CSS ?????????? ?????????? ???????? ?????????.

???????????? ?????????? HTML ??? ?????????? ??????, ???????????, ?????? ? ?????? ???????????. CSS ????????? ????????? ???????, ?????????, ??????? ? ???????????? ???????????. ??? ????? ????????????? ?????? ? ??????????? ???? ?????.

????????? ?????? ?????? ???? ???? ? ????????? ???-????????????. ?????? ??????????????? ????????? ???????????? ????????? ?????????? ? ?????????? ?????. ??????? ???????????? ????? ?????????? ??????? ???????????? ?????? ? ????????????? ?? ? ??????????? ???????.

??? ????? HTML ? ????? ?? ????????? ???????

HTML ???????????????? ??? HyperText Markup Language. ???? ???????? ????????????? ??????????? ???-?????????? ? ????????????? ??????? ???-???????. ???????? ???????????? HTML-??? ? ???????????? ?????????? ? ????? ??? ????????????? ????.

?????? ??????? ???-???????? ???????????? ??????? ???????????. ????????, ?????????, ???????, ??????? ? ????? ????????? ? ??????? ?????. ???? ???????? ????? ??????????, ??????????? ? ??????? ??????. ??????? ?????? ??? ??????? ? ?????? ?????????? ??????????? ???????????.

??? HTML ?????????? ????????? ?????? ?????? ?????? ????. ???? ???????? ????????? ?????????? ??? ???? ????????-????????. ????????? ??????? ??????????? HTML-????????? ??? ?????????? ???-???????. ?????????? ???????? ????????? ????? ??????? ? ??????????? ???????.

HTML ?????????? ?????????????? ? ???????? ?????? ???????. ?????????? ?????? HTML5 ???????????? ?????, ????? ? ????????????? ?????. ??????????? ????? ????????? ???????? ???????? ??? ?????????? ??????????. ????????? ???? ???????? ?????? ????? ???????????? ???? ????????? ????????? ???-????????.

???????? ???? ? ??????????? ???-????????

????? HTML-???????? ????? ???????????? ??????????? ???????????. ???????? ????????? html ???????? ??? ??????? ????????. ?????? ??????????? ??? ???????? ?????: head ? body.

???? head ???????? ????????? ?????????? ? ????????. ????? ???????????? ???????? ????????, ?????????????? ????? ? ???????. ???????????? ?? ????? ??????? ????? ?????????? ???????????????. ?????? body ???????? ???? ??????? ????????.

??? ???????????????? ????????? ???????????? ?????? ?????:

• h1-h6 ????????? ???????? ????????? ???????
• p ????????? ????????? ?????????
• a ??????? ????? ?? ?????? ????????
• img ???????? ??????? ? ????
• ul ? ol ????????? ????????????? ? ???????????? ??????
• table ????????????? ???????? ? ????????? ????

????????? ???? ??????? ???????? ????? ????????. ??????? header ????????? ????? ???????. ??????? nav ???????? ????????????? ??????. ????????? main ???????? ??????? ?????????? ???-????????. Footer ??????????? ? ?????????? ?????? ? ???????? ?????????? ????????.

?????????? ??????????? ???????? ????? ??? ???????????. ??????? ?????? ? ?????? ??????????? ?????? ?????? ??? ????????? ?? ????????. ???????????????? ????????? ?????? ???????? ???????? ???????? ????? ??????????? ????????. ???????? ????????? ????????????? ????? ?? ???? ??????????? ?????????.

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

CSS ???????????????? ??? Cascading Style Sheets. ????????? ??????? ?????? ?????????? ??????????? ??????????? HTML-?????????. ?????????? ????????? ?????????? ?? ????????? ????????.

??? ?????? ??? ???????? ???????????? ????????????. ??????? ?????????? ????? ?????? ???????? ?? ????? ??????? ?????. ????????? ??????????? ??????? ????????. CSS ???????? ???????? ?????? ???????? ???????? ????.

????? ????? ?????????? ????? ??????????. ????????? ???? ??????????? ? HTML-?????????? ??????????? ??? link. ?????????? ????? ?????????? ? ???????? style. Inline ????? ???????????? ? ????????? ??????????.

??????????? ?????????? ??????????? ?????????? ????????. ?????????? ????? ???????? ???????????? ?????????. ?????????? ????? ?????????????? ?????????. ??????? ??????????? ????? ??????????? ??????? ? ??????? ????????.

CSS ???????????? ????? ??????????? ??????????. ???????????? ?????????? ????? ??????? ????? ? ??????. ????? ???????????? ????????, ????????? ? ????? ???????????. ?????????? ?????? ?????? ??????????? ???????? ? ???????? ??? ???????????? ????????????? ?????????? ????????.

?????????, ???????? ? ???????? ? CSS

????????? CSS ??????????? ?? ???? ???????????. ???????? ?????????? ??????? ??? ????????????. ???????? ?????? ?????????????? ???????. ???????? ?????????? ?????????? ??????????.

????????? ???????? ?????????? ?? ?????? ?????????. ???????? ???? ?????????? ????? ?? ???? ????????? ????????????? ????. ???????? ?????? ???????? ? ?????????? class. ???????? ?????????????? ?????????? ?????????????? ??????? ?? ???????? id.

????????? ????????? ????????? ????? ??????????? ?????????. ???????? ??????? ???????? ??????????? ??????????. ???????? ????????????????? ???? ????????? ?????? ? ??????? ????????????. ???????????? ????????? ????? ??? ?????????? ??????????.

???????? ?????? ????????? ??????? ??????????. ???????? color ? background-color ???????????? ???????? ??????. ????????? width ? height ????????????? ????????. ???????? margin ? padding ?????????? ????.

????????? ???????????? ? ????????? ?????????. ????? ??????????? ? ????????????????? ????, RGB ??? ??????????. ??????? ???????? ? ????????, ????????? ??? ????????????? ?????????. ????????? ????????????? ?????????? ???????? ?????? ?????????? ???????????? ???????? ????????? ?????????.

?????????? ? ??????, ??????????? ? ?????????

???????? ?????? ?????????? ?????????? ????????? ????????. ???????? color ???????? ??? ???????. ???????? background-color ?????? ??? ??????????. ???? ????????????? ??????????? ??????????: ???????, ?????????????????? ?????? ??? ?????????? RGB.

????????????????? ?????? ???????? ? ????? ?????. ??? ??????????? ?? ????? ??????, ???????????? ???????, ??????? ? ????? ????????????. ?????? RGB ?????????? ???????? ???????? ?? 0 ?? 255 ??? ??????? ??????????. ??? RGBA ?????? ???????? ??????????????.

??????????? ?????? ?? ??????????????? ?????????. ??????? font-family ?????????? ??? ??????. ???????? font-size ?????? ??????? ??????. ???????? font-weight ????????? ???????? ??????????. ???????? line-height ?????? ??????????? ????????.

??????????? ?????? ???????????? ?? ???? ???????????. ??????-?????? ??????????? ? ????????? ??????. ????????? Google Fonts ???????????? ?????????? ????????? ???????. ???????????? ?????? ????????? ??????? ? ?????????????????? ????????.

??????? ????????? ????? ????? ?????????. ??????? margin ??????? ???????? ???? ????? ??????????. ???????? padding ??????? ?????????? ????????? ?? ?????? ?? ???????????. ??????? ????? ????????????? ??? ?????? ????? ????????? ??? ?????? ?????????? ????? ??? ???? ??????. ?????????? ?????????? ?????? ?????? ???????? ?????????? ???????? ? ?????????? ????????.

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

??????? ????? ????????????? ????????? ??????? HTML-????????. ????????? ??????? ?? ??????? ????????: ???????????, ??????????? ?????????, ??????? ? ???????? ????. ????????? ???? ????????? ????????? ??? ??????? ????????????? ?????????.

???? ???????? ???????? ????? ? ???????????. ?????????? ???????? padding ?????????? ????? ????? ????????? ? ????????. ??????? border ?????????? ??????? ??????? ??????. ??????? ?????? margin ??????? ???????? ?? ??????? ???????????.

???????? box-sizing ???????? ?????????? ????????. ???????? content-box ????????? ?????? ??????????. ???????? border-box ???????? padding ? border ? ????????? ??????.

??????? display ????????????? ????? ???????????. ??????? ?????????? ??????????? ??? ????????? ??????. Inline ?????????? ????????????? ? ????? ????. ???????? inline-block ????????? ??????????? ????? ?????.

???????? position ?????????? ?????????????. ??????? relative ?????????? ????????? ???????????? ?????????? ?????????. Absolute ??????????? ????????? ???????????? ???????? ?????. ???????? ?????? ?????? ??????????? Flexbox ? Grid ??? ?????????? ?????????????? ??????????.

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

?????? ??????? ???????????? ?????????? ????????????? ????? ?? ???? ????????. ?????????? ???????? ?? ???????? ? ???????????, ?????????? ????????? ? ????????? ?????????. ????? ??????? ?????????????? ??? ?????? ?????? ??? ?????????????.

???????????? ????????? ????? ? ????? ?? ??????? ?????????. ??????? @media ????????? ?????? ???????? ? ?????? ????????. ???????????? ?????????? ?????????????? ????????? ?????? ??? ????????? ??????????? ????????.

??????? mobile-first ???????? ?????????????? ? ???????? ??? ?????????. ???????? ????? ????????? ?????????? ??? ????????? ???????. ???????????? ????????? ?????????? ??? ??????? ???????.

?????????? ????? ?????????? ????????????? ???? ???????. ?????? ????????? ??????????????? ? ????????? ?????? ????????????? ?????. Flexbox ? Grid ?????????? ?????????? ?????? ??? ??????? ?????????.

??????????? ????????? ??????????? ???????? ??? ?????????. ??????? max-width ?? ????????? 100% ????????? ?????????? ???????? ?? ???? ??????????. ???????? srcset ????????? ??????????? ?????????????? ??????????. ????????? ?????????? ?????? ?????? ???????? ???????????????? ?????????? ?? ???? ????? ?????????.

???????? ??????? ?????????? ??? ?????? ? HTML ? CSS

?????????? ???????????? ????????? ???????????????? ??????? ??? ???????? ???????. ????????? ?????? ??????? ????????? ???????? ?? ? ?????? ???????. ??????????? ????????? ?? ?????? ?????? ????????? ????? ? ???????? ???????? ?????????.

??????? ?????? ??? ?????????? ? ????????? ? ???????:

• ???????? ????? ????????? ??????????? ???????? ? ???????? ? ?????????? ?????????????
• ?????????????? deprecated ????? ?????? ?????????? ????????? ???????????
• ?????????? ????????????? ?????? ??? ??????????? ??????? ??????????? ????????
• ?????????? ????? ? HTML ????????? ????????? ? ????????????? ???????
• ???????????? ???????? ??????????? ??????? ?????? ? ???????????
• ?????????? ?????????????? ??????????????? ?????? ??????? ???????????? ????????? ?????????? ??????

?????? ? CSS ????? ??????????? ?????????. ??????? ???????? ??????????? ??????? ??????? ??? ???????? ????????. ????????? ?????????? ????????? ????????? ??????????????? ??????. ?????????? ????????? ?????? ???????? ????????? ??????????? ? ??????????? ?? ????????? ??????????.

????????????? ??????????????? ????????? ????? ? ??????????. ???????? ????? ????????? ???????????? ? ????? ???????????? ? ??????????? ? ??????. ???????? ???? ??????????? ??????????? ??????????? ???????????? ?????????????? ???????. ??????????????? ??????????? ???????????? ?????? ???????????? ???????? ??????? ???????????????? ? ??????????????? ??????.