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

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

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

• ?????????? ????? ????????? ??????????? ????????? ? ???????? ? ????????????? ????????????
• ?????????????? ?????? ????? ?????? ????? ????????????? ???????????
• ?????????? ????????????? ?????? ??? ???????? ??????? ??????????? ???????????
• Inline ????? ? HTML ????????? ????????? ? ????????? ??????????
• ????????? ??????????? ????????? ????????? ?????? ? ???????????
• ?????????? ????????????? ??????????????? ?????? ??????? ?????????? ???????????? ?????????? ??????

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

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