????????? 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-block ???????? ???????? ????? ???????.

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

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

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

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

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

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

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

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

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

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

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

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

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