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

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

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

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

?????? ?????????? ??????????? ?????????? ???????????? ??????? ?? ???? ????????. ???????????? ???????? ?? ???????? ? ?????????, ????????? ? ????????? ?????????. ????? ?????? ????????????? ??? ???????? ??????? ??????????????.

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

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

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

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

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

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

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

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

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

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