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

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

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

?????? ??????? ????????????? ?????????? ????????????? ???-??????? ?? ???? ???????. ???????????? ????????? ?? ???-???????? ? ???????????, ????????? ? ????????? ?????????. ????? ??????? ?????????????? ??? ???????? ?????? ?????????????.

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

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

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

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

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

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

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

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

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

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