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

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

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

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

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

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