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

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