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

• Tweet

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Ma passion pour la santé conjuguée à ma formation d’enseignante et d’orthopédagogue ont fait fleurir un vif intérêt pour sensibiliser les gens à l’importance d’avoir de saines habitudes de vie pour eux mais aussi pour leurs enfants. La santé est un bien précieux et nous gagnons à ouvrir notre cœur pour en prendre soin. johanne.cote@gmail.com 418.554.3435

Johanne Côté

Tous les articles publiés par Johanne Côté