Читать Самоучитель HTML+CSS+JS. Для тех, кто вчера купил компьютер - Александр Сивичев

На данной странице вы можете читать онлайн книгу "Самоучитель HTML+CSS+JS. Для тех, кто вчера купил компьютер" автора Александр Сивичев. Общий объем текста составляет эквивалент 20 бумажных страниц. Произведение многоплановое и затрагивает разнообразные темы, однако его жанры наиболее вероятно можно определить как интернет, программирование. Книга была добавлена в библиотеку 08.07.2025, и с этой даты любой желающий может удобно читать ее без регистрации. Наша читалка адаптирована под разные размеры экранов, поэтому текст будет одинаково хорошо смотреться и на маленьком дисплее телефона, и на огромном телевизоре.

Краткое описание

"Самоучитель HTML+CSS+JS. Для тех, кто вчера купил компьютер" это простая и понятная книга, созданная специально для начинающих "с нуля". Без заумных терминов, без сложностей, всё объясняется по шагам, на живых примерах. Вы узнаете, как устроен код, как писать свои первые программы, сайты или скрипты, и – главное – как не бояться компьютера. Освойте HTML+CSS+JS легко и с интересом!

Лёгкий, дружелюбный самоучитель, который поможет вам сделать свой первый сайт уже через пару часов. Никаких сложностей – только простые объяснения и наглядные примеры.

Книга Самоучитель HTML+CSS+JS. Для тех, кто вчера купил компьютер онлайн бесплатно

Глава 1: Введение в HTML

1. Что такое HTML?

HTML (HyperText Markup Language) – это язык разметки, используемый для создания структуры веб-страниц. Он определяет, какие элементы должны быть на странице, а также как они должны быть структурированы, но не отвечает за оформление или функциональность. HTML является основой всех веб-страниц, предоставляя их структуру, в то время как CSS и JavaScript управляют внешним видом и поведением.

История HTML:

HTML был впервые предложен в 1991 году британским ученым Тимом Бернерс-Ли. Он создал HTML в рамках разработки Всемирной паутины (World Wide Web), чтобы упрощенно разметить текстовую информацию и предоставить гиперссылки между различными документами. Первый стандарт HTML был достаточно прост, и с тех пор он прошел несколько этапов эволюции, добавляя новые возможности и улучшая функциональность. Сегодня HTML является важнейшим стандартом в веб-разработке.

Основные особенности HTML:

Язык разметки: HTML используется для описания структуры веб-страниц, а не для их визуального оформления или логики.

Теговая структура: HTML использует теги, которые обрамляют элементы на странице, такие как текст, изображения, таблицы и формы.

Гипертекст: HTML позволяет создавать гиперссылки между различными веб-страницами и документами.

Мультимедийные элементы: HTML поддерживает вставку изображений, видео, аудио и других мультимедийных объектов.

Применение HTML в веб-разработке:

HTML служит основой для создания всех веб-страниц. Он используется для:

Структурирования контента (заголовки, параграфы, списки и т. д.).

Вставки изображений и мультимедийных объектов.

Создания ссылок для навигации по веб-страницам.

Формирования интерактивных элементов (например, кнопок, форм для отправки данных).

2. Структура HTML-документа

HTML-документ состоит из набора тегов, которые определяют его структуру и содержимое. Каждый документ должен начинаться с объявления типа документа и заканчивается тегом .

Основные теги HTML:

: Начальный и завершающий тег, который оборачивает весь HTML-документ.

: Содержит метаинформацию о документе, такую как теги для подключения стилей или скриптов.

</b>: Задает название страницы, которое отображается в заголовке браузера.</p><p><b><body></b>: Содержит основной контент веб-страницы (текст, изображения, ссылки, формы и т. д.).</p></div> </div> </div>  <div id="yandex_rtb_R-A-11995824-3" class="fspot"><div class="finnerspot"></div></div> <script> window.yaContextCb.push(() => { Ya.Context.AdvManager.render({ "blockId": "R-A-11995824-3", "renderTo": "yandex_rtb_R-A-11995824-3" }) }) </script> <div class="show-more show-more_reader text-center mt-4"> <a class="btn btn-primary" href="/see/72194861-samouchitel-html-css-js-dlya-teh-kto-vchera-kupil?page=2#tx" > Читать дальше </a> </div> </div> </div> </div> </section> <hr class="w-100"> <section> <div class="h2 text-break">Читайте также</div> <div class="container"> <div class="row"> <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 d-flex"> <div class="card book-card w-100"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/work/72205949-starik" > <img class="card-img-top book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/e6/e6e4f5bbafac6ca4b6b54279fc3cee453a0fb5b7.jpg" alt="Старик" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="card-body flex-fill d-flex justify-content-between flex-column"> <div> <div class="h6 card-title"> <a href="/work/72205949-starik">Старик</a> </div> <div class="mt-2"> <a class="text-dark" href="/writer/igor-shein">Игорь Шеин</a> </div> <div class="card-text mt-2"> Мир стариков очень хрупкий. Их взрослые дети не замечают этого, сохраняя свое детское отношение к родителям как к опоре в жизни. </div> </div> <div> <a class="mt-4 book-read-link" href="/work/72205949-starik">Читать онлайн</a> </div> </div> </div> </div> <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 d-flex"> <div class="card book-card w-100"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/work/72205943-hronoten-reys-815" > <img class="card-img-top book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/1c/1cbd3d3f4983e3fa48f95155bf6f110f87dfbbee.jpg" alt="Хронотень: Рейс 815" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="card-body flex-fill d-flex justify-content-between flex-column"> <div> <div class="h6 card-title"> <a href="/work/72205943-hronoten-reys-815">Хронотень: Рейс 815</a> </div> <div class="mt-2"> <a class="text-dark" href="/writer/aleks-dipsi">Алекс Дипси</a> </div> <div class="card-text mt-2"> Обычный рейс Монреаль—Рейкьявик превращается в кошмар, когда Boeing 787 попадает в зону аномальной «чистой» турбулентности – и исчезает с радаров. Над... </div> </div> <div> <a class="mt-4 book-read-link" href="/work/72205943-hronoten-reys-815">Читать онлайн</a> </div> </div> </div> </div> <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 d-flex"> <div class="card book-card w-100"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/work/68990018-konechnaya" > <img class="card-img-top book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/98/9880a05b06694fc02987c2c5414629d8ca8aa47d.jpg" alt="Конечная" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="card-body flex-fill d-flex justify-content-between flex-column"> <div> <div class="h6 card-title"> <a href="/work/68990018-konechnaya">Конечная</a> </div> <div class="mt-2"> <a class="text-dark" href="/writer/roman-smorodskiy">Роман Смородский</a> </div> <div class="card-text mt-2"> Каждый из нас хоть раз задавался вопросом: что ждет нас на конечной станции нашего мимолетного жизненного маршрута?Занимайте места, дорогие читатели. </div> </div> <div> <a class="mt-4 book-read-link" href="/work/68990018-konechnaya">Читать онлайн</a> </div> </div> </div> </div> <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 d-flex"> <div class="card book-card w-100"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/work/68990015-vedma-po-nasledstvu" > <img class="card-img-top book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/a0/a0bf04259497f7c4eaa7e0e3a5f225b84e7b3ed1.jpg" alt="Ведьма по наследству" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="card-body flex-fill d-flex justify-content-between flex-column"> <div> <div class="h6 card-title"> <a href="/work/68990015-vedma-po-nasledstvu">Ведьма по наследству</a> </div> <div class="mt-2"> <a class="text-dark" href="/writer/olga-yaroshinskaya-32209667">Ольга Ярошинская</a> </div> <div class="card-text mt-2"> Одним прекрасным утром я получила в наследство дом. А в придачу – вредного кота, вязанку дохлых летучих мышей, чучело оборотня и список условий, котор... </div> </div> <div> <a class="mt-4 book-read-link" href="/work/68990015-vedma-po-nasledstvu">Читать онлайн</a> </div> </div> </div> </div> <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 d-flex"> <div class="card book-card w-100"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/work/72203534-samouchitel-web-analitics-dlya-teh-kto-vchera-kupil" > <img class="card-img-top book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/b3/b3bcd9bdc5a479a887bf8963c9d7e56667a17c64.jpg" alt="Самоучитель Web Analitics. Для тех, кто вчера купил компьютер" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="card-body flex-fill d-flex justify-content-between flex-column"> <div> <div class="h6 card-title"> <a href="/work/72203534-samouchitel-web-analitics-dlya-teh-kto-vchera-kupil">Самоучитель Web Analitics. Для тех, кто вчера купил компьютер</a> </div> <div class="mt-2"> <a class="text-dark" href="/writer/aleksandr-sivichev">Александр Сивичев</a> </div> <div class="card-text mt-2"> "Самоучитель Web Analitics. Для тех, кто вчера купил компьютер" – это понятная и простая книга для тех, кто делает первые шаги в мире цифр, метрик и и... </div> </div> <div> <a class="mt-4 book-read-link" href="/work/72203534-samouchitel-web-analitics-dlya-teh-kto-vchera-kupil">Читать онлайн</a> </div> </div> </div> </div> <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 d-flex"> <div class="card book-card w-100"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/work/72201611-samouchitel-blockchain-dlya-teh-kto-vchera-kupil" > <img class="card-img-top book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/38/38197d34207d6affdf981916184d81cc870eb973.jpg" alt="Самоучитель Blockchain. Для тех, кто вчера купил компьютер" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="card-body flex-fill d-flex justify-content-between flex-column"> <div> <div class="h6 card-title"> <a href="/work/72201611-samouchitel-blockchain-dlya-teh-kto-vchera-kupil">Самоучитель Blockchain. Для тех, кто вчера купил компьютер</a> </div> <div class="mt-2"> <a class="text-dark" href="/writer/aleksandr-sivichev">Александр Сивичев</a> </div> <div class="card-text mt-2"> Книга представляет собой практическое руководство по криптовалютам для новичков, которые хотят разобраться в этом сложном, но увлекательном мире. В не... </div> </div> <div> <a class="mt-4 book-read-link" href="/work/72201611-samouchitel-blockchain-dlya-teh-kto-vchera-kupil">Читать онлайн</a> </div> </div> </div> </div> <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 d-flex"> <div class="card book-card w-100"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/work/72194867-samouchitel-python-dlya-teh-kto-vchera-kupil" > <img class="card-img-top book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/87/878d0c947f5d86452dc6892aabc4755c334aff21.jpg" alt="Самоучитель Python. Для тех, кто вчера купил компьютер" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="card-body flex-fill d-flex justify-content-between flex-column"> <div> <div class="h6 card-title"> <a href="/work/72194867-samouchitel-python-dlya-teh-kto-vchera-kupil">Самоучитель Python. Для тех, кто вчера купил компьютер</a> </div> <div class="mt-2"> <a class="text-dark" href="/writer/aleksandr-sivichev">Александр Сивичев</a> </div> <div class="card-text mt-2"> "Самоучитель Python. Для тех, кто вчера купил компьютер" это простая и понятная книга, созданная специально для начинающих "с нуля". Без заумных терми... </div> </div> <div> <a class="mt-4 book-read-link" href="/work/72194867-samouchitel-python-dlya-teh-kto-vchera-kupil">Читать онлайн</a> </div> </div> </div> </div> <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 d-flex"> <div class="card book-card w-100"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/work/72194864-samouchitel-php-mysql-dlya-teh-kto-vchera-kupil" > <img class="card-img-top book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/cb/cbd51587bf5130246e648ec961ffa985b8b151d3.jpg" alt="Самоучитель PHP+MySQL. Для тех, кто вчера купил компьютер" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="card-body flex-fill d-flex justify-content-between flex-column"> <div> <div class="h6 card-title"> <a href="/work/72194864-samouchitel-php-mysql-dlya-teh-kto-vchera-kupil">Самоучитель PHP+MySQL. Для тех, кто вчера купил компьютер</a> </div> <div class="mt-2"> <a class="text-dark" href="/writer/aleksandr-sivichev">Александр Сивичев</a> </div> <div class="card-text mt-2"> "Самоучитель PHP+MySQL. Для тех, кто вчера купил компьютер" это простая и понятная книга, созданная специально для начинающих "с нуля". Без заумных те... </div> </div> <div> <a class="mt-4 book-read-link" href="/work/72194864-samouchitel-php-mysql-dlya-teh-kto-vchera-kupil">Читать онлайн</a> </div> </div> </div> </div> <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 d-flex"> <div class="card book-card w-100"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/work/72122738-muzhchiny-kak-ponimat-privlekat-i-stroit" > <img class="card-img-top book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/d9/d90fa6d9d50bea1d6643703b9f822daf36c40e12.jpg" alt="Мужчины: как понимать, привлекать и строить отношения в цифровую эпоху" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="card-body flex-fill d-flex justify-content-between flex-column"> <div> <div class="h6 card-title"> <a href="/work/72122738-muzhchiny-kak-ponimat-privlekat-i-stroit">Мужчины: как понимать, привлекать и строить отношения в цифровую эпоху</a> </div> <div class="mt-2"> <a class="text-dark" href="/writer/aleksandr-sivichev">Александр Сивичев</a> </div> <div class="card-text mt-2"> «Мужчины: как понимать, привлекать и строить отношения в цифровую эпоху» – это практическое руководство для женщин, стремящихся к осознанному и успешн... </div> </div> <div> <a class="mt-4 book-read-link" href="/work/72122738-muzhchiny-kak-ponimat-privlekat-i-stroit">Читать онлайн</a> </div> </div> </div> </div> <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 d-flex"> <div class="card book-card w-100"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/work/72135734-cifrovoy-gosudar-iskusstvo-vlasti-v-epohu" > <img class="card-img-top book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/14/14daebd4777d58d42f73fbc29819d153b9fd7281.jpg" alt="Цифровой государь: Искусство власти в эпоху алгоритмов" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="card-body flex-fill d-flex justify-content-between flex-column"> <div> <div class="h6 card-title"> <a href="/work/72135734-cifrovoy-gosudar-iskusstvo-vlasti-v-epohu">Цифровой государь: Искусство власти в эпоху алгоритмов</a> </div> <div class="mt-2"> <a class="text-dark" href="/writer/aleksandr-sivichev">Александр Сивичев</a> </div> <div class="card-text mt-2"> Он не говорит с трибун. Он пишет код. Он – Цифровой Государь. Эта книга – о новой власти в эпоху алгоритмов. Здесь управляют вниманием, данными и эмоц... </div> </div> <div> <a class="mt-4 book-read-link" href="/work/72135734-cifrovoy-gosudar-iskusstvo-vlasti-v-epohu">Читать онлайн</a> </div> </div> </div> </div> <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 d-flex"> <div class="card book-card w-100"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/work/72122648-istoricheskie-uroki-i-neuchtennye-aspekty" > <img class="card-img-top book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/ed/ed5f2153b2219605b4a97786f5293fb985366283.jpg" alt="Исторические уроки и неучтённые аспекты современной эволюции" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="card-body flex-fill d-flex justify-content-between flex-column"> <div> <div class="h6 card-title"> <a href="/work/72122648-istoricheskie-uroki-i-neuchtennye-aspekty">Исторические уроки и неучтённые аспекты современной эволюции</a> </div> <div class="mt-2"> <a class="text-dark" href="/writer/aleksandr-sivichev">Александр Сивичев</a> </div> <div class="card-text mt-2"> «Исторические уроки и неучтённые аспекты современной эволюции» – это аналитическая книга о том, как прошлое продолжает формировать настоящее, даже ког... </div> </div> <div> <a class="mt-4 book-read-link" href="/work/72122648-istoricheskie-uroki-i-neuchtennye-aspekty">Читать онлайн</a> </div> </div> </div> </div> <div class="col-12 col-sm-6 col-md-6 col-lg-4 col-xl-3 d-flex"> <div class="card book-card w-100"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/work/72126101-zhenshchiny-kak-sleduet-znakomitsya-ovladevat-i" > <img class="card-img-top book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/29/2955387a048cb93a052885dd9c7e32d74f7be956.jpg" alt="Женщины. Как следует знакомиться, овладевать и обращаться с ними. Справочник для мужчин" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="card-body flex-fill d-flex justify-content-between flex-column"> <div> <div class="h6 card-title"> <a href="/work/72126101-zhenshchiny-kak-sleduet-znakomitsya-ovladevat-i">Женщины. Как следует знакомиться, овладевать и обращаться с ними. Справочник для мужчин</a> </div> <div class="mt-2"> <a class="text-dark" href="/writer/aleksandr-sivichev">Александр Сивичев</a> </div> <div class="card-text mt-2"> «Женщины: как следует знакомиться, овладевать и обращаться с ними. Справочник для мужчин» – это практическое руководство по онлайн-знакомствам для муж... </div> </div> <div> <a class="mt-4 book-read-link" href="/work/72126101-zhenshchiny-kak-sleduet-znakomitsya-ovladevat-i">Читать онлайн</a> </div> </div> </div> </div> </div> </div> </section> </div> </main> </div> <footer class="footer bg-primary pt-1 mt-4"> <div class="container"> <div class="row"> <div class="col-12 text-center py-1"> <a href="/copyright">Правообладателям</a> </div> </div> </div> </footer> <script src="/build/runtime.5332280c.js" defer></script><script src="/build/site.3d80c86c.js" defer></script>  <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.webvisor.org/metrika/tag_ww.js", "ym"); ym(97886539, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); </script>  </div> </body> </html>