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

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

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

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

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

• ????????????? ???? ????????? ??????????? ????? ? ???????? ? ?????????? ????????????
• ?????????? ?????????? ????? ?????? ????? ????????? ?????
• ?????????? ??????????????? ?????? ??? ???????? ????????? ??????????? ???????????
• ?????????? ????? ? HTML ????????? ???????????? ? ????????? ???????
• ????????? ??????????? ??????????? ??????? ???????? ? ???????????
• ?????????? ????????????? ??????????????? ?????? ??????? ???????????? ???????????? ?????????????? ??????

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

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