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

О книге

Автор книги - Александр Сивичев. Произведение относится к жанрам интернет, программирование. Оно опубликовано в 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-3650095-3" class="rsya-rtb-block"><div class="rs-placeholder"></div></div> <script> window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ "blockId": "R-A-3650095-3", "renderTo": "yandex_rtb_R-A-3650095-3" }) }) </script> <div class="show-more show-more_reader text-center mt-4"> <a class="btn btn-primary" href="/view/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-4 col-lg-3 book-card "> <div class="book-card__wrap"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/bk/72234536-samouchitel-internet-i-seti-dlya-teh-kto-vchera" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/a8/a83681f6447c0ba0e896738e192e1286486d5e45.jpg" alt="Самоучитель: Интернет и сети. Для тех, кто вчера купил компьютер" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="book-card__meta"> <div class="book-card__title-wrap"> <a class="book-card__title" href="/bk/72234536-samouchitel-internet-i-seti-dlya-teh-kto-vchera"><b>Самоучитель: Интернет и сети. Для тех, кто вчера купил компьютер</b></a> </div> <div class="mt-2 book-card__author-list"> <a class="book-card__author text-dark" href="/creator/aleksandr-sivichev">Александр Сивичев</a> </div> </div> <div class="text-center book-card__links"> <a class="btn book-card__link" href="/bk/72234536-samouchitel-internet-i-seti-dlya-teh-kto-vchera">Читать</a> </div> </div> </div> <div class="col-12 col-sm-6 col-md-4 col-lg-3 book-card "> <div class="book-card__wrap"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/bk/72234512-internet-kak-on-est-ot-voennyh-setey-do-cifrovyh" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/b8/b8d0498c507481f3d8d9ea77435354832a87b9d6.jpg" alt="Интернет как он есть: От военных сетей до цифровых миражей свободы" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="book-card__meta"> <div class="book-card__title-wrap"> <a class="book-card__title" href="/bk/72234512-internet-kak-on-est-ot-voennyh-setey-do-cifrovyh"><b>Интернет как он есть: От военных сетей до цифровых миражей свободы</b></a> </div> <div class="mt-2 book-card__author-list"> <a class="book-card__author text-dark" href="/creator/aleksandr-sivichev">Александр Сивичев</a> </div> </div> <div class="text-center book-card__links"> <a class="btn book-card__link" href="/bk/72234512-internet-kak-on-est-ot-voennyh-setey-do-cifrovyh">Читать</a> </div> </div> </div> <div class="col-12 col-sm-6 col-md-4 col-lg-3 book-card "> <div class="book-card__wrap"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/bk/72304886-povedenie-kak-proekciya-soznaniya" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/c9/c93a8ed29117bf1a9d97d58f87009153e8483f89.jpg" alt="Поведение как проекция сознания" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="book-card__meta"> <div class="book-card__title-wrap"> <a class="book-card__title" href="/bk/72304886-povedenie-kak-proekciya-soznaniya"><b>Поведение как проекция сознания</b></a> </div> <div class="mt-2 book-card__author-list"> <a class="book-card__author text-dark" href="/creator/aleksandr-sivichev">Александр Сивичев</a> </div> </div> <div class="text-center book-card__links"> <a class="btn book-card__link" href="/bk/72304886-povedenie-kak-proekciya-soznaniya">Читать</a> </div> </div> </div> <div class="col-12 col-sm-6 col-md-4 col-lg-3 book-card "> <div class="book-card__wrap"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/bk/72135734-cifrovoy-gosudar-iskusstvo-vlasti-v-epohu" > <img class="card__img book-card__img 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="book-card__meta"> <div class="book-card__title-wrap"> <a class="book-card__title" href="/bk/72135734-cifrovoy-gosudar-iskusstvo-vlasti-v-epohu"><b>Цифровой государь: Искусство власти в эпоху алгоритмов</b></a> </div> <div class="mt-2 book-card__author-list"> <a class="book-card__author text-dark" href="/creator/aleksandr-sivichev">Александр Сивичев</a> </div> </div> <div class="text-center book-card__links"> <a class="btn book-card__link" href="/bk/72135734-cifrovoy-gosudar-iskusstvo-vlasti-v-epohu">Читать</a> </div> </div> </div> <div class="col-12 col-sm-6 col-md-4 col-lg-3 book-card "> <div class="book-card__wrap"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/bk/72339119-kultura-sily-kak-perestat-byt-zhertvoy-i-nachat" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/6e/6e3732c9b32ed8d83ab34bae62830ba369fefd85.jpg" alt="Культура силы: как перестать быть жертвой и начать управлять своей судьбой" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="book-card__meta"> <div class="book-card__title-wrap"> <a class="book-card__title" href="/bk/72339119-kultura-sily-kak-perestat-byt-zhertvoy-i-nachat"><b>Культура силы: как перестать быть жертвой и начать управлять своей судьбой</b></a> </div> <div class="mt-2 book-card__author-list"> <a class="book-card__author text-dark" href="/creator/aleksandr-sivichev">Александр Сивичев</a> </div> </div> <div class="text-center book-card__links"> <a class="btn book-card__link" href="/bk/72339119-kultura-sily-kak-perestat-byt-zhertvoy-i-nachat">Читать</a> </div> </div> </div> <div class="col-12 col-sm-6 col-md-4 col-lg-3 book-card "> <div class="book-card__wrap"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/bk/72126101-zhenshchiny-kak-sleduet-znakomitsya-ovladevat-i" > <img class="card__img book-card__img 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="book-card__meta"> <div class="book-card__title-wrap"> <a class="book-card__title" href="/bk/72126101-zhenshchiny-kak-sleduet-znakomitsya-ovladevat-i"><b>Женщины. Как следует знакомиться, овладевать и обращаться с ними. Справочник для мужчин</b></a> </div> <div class="mt-2 book-card__author-list"> <a class="book-card__author text-dark" href="/creator/aleksandr-sivichev">Александр Сивичев</a> </div> </div> <div class="text-center book-card__links"> <a class="btn book-card__link" href="/bk/72126101-zhenshchiny-kak-sleduet-znakomitsya-ovladevat-i">Читать</a> </div> </div> </div> <div class="col-12 col-sm-6 col-md-4 col-lg-3 book-card "> <div class="book-card__wrap"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/bk/68996228-zdravstvuyte-mse-pol" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/ff/ff82a7b20bc7b8b20645be203645d0961aa3ab67.jpg" alt="Здравствуйте, мсье Поль!" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="book-card__meta"> <div class="book-card__title-wrap"> <a class="book-card__title" href="/bk/68996228-zdravstvuyte-mse-pol"><b>Здравствуйте, мсье Поль!</b></a> </div> <div class="mt-2 book-card__author-list"> <a class="book-card__author text-dark" href="/creator/aleksandr-gulichev">Александр Гуличев</a> </div> </div> <div class="text-center book-card__links"> <a class="btn book-card__link" href="/bk/68996228-zdravstvuyte-mse-pol">Читать</a> </div> </div> </div> <div class="col-12 col-sm-6 col-md-4 col-lg-3 book-card "> <div class="book-card__wrap"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/bk/68996231-life-coder" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/c6/c6fe32d5ad9d8467220e6a764308ac7ce98d9da4.jpg" alt="Life Coder" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="book-card__meta"> <div class="book-card__title-wrap"> <a class="book-card__title" href="/bk/68996231-life-coder"><b>Life Coder</b></a> </div> <div class="mt-2 book-card__author-list"> <a class="book-card__author text-dark" href="/creator/gadel-zagrutdinov">Гадель Загрутдинов</a> </div> </div> <div class="text-center book-card__links"> <a class="btn book-card__link" href="/bk/68996231-life-coder">Читать</a> </div> </div> </div> <div class="col-12 col-sm-6 col-md-4 col-lg-3 book-card "> <div class="book-card__wrap"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/bk/72503990-algoritm-probuzhdeniya" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/81/8188e2e11a8d75f34fcfbe38916ea9ceaed58e51.jpg" alt="Алгоритм пробуждения" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="book-card__meta"> <div class="book-card__title-wrap"> <a class="book-card__title" href="/bk/72503990-algoritm-probuzhdeniya"><b>Алгоритм пробуждения</b></a> </div> <div class="mt-2 book-card__author-list"> <a class="book-card__author text-dark" href="/creator/eduard-serousov-33522019">Эдуард Сероусов</a> </div> </div> <div class="text-center book-card__links"> <a class="btn book-card__link" href="/bk/72503990-algoritm-probuzhdeniya">Читать</a> </div> </div> </div> <div class="col-12 col-sm-6 col-md-4 col-lg-3 book-card "> <div class="book-card__wrap"> <div class="book-card__img-wrap"> <a class="card__img-link book-card__img-link" href="/bk/72503996-veroyatnostnaya-opera" > <img class="card__img book-card__img book-img img img-fluid lazyload" width="200" height="300" data-src="/uploads/covers/65/656cd8e218c24f61dde748e2a796a2492ef2ab9e.jpg" alt="Вероятностная опера" > <div class="lazy__img-spinner" style="width: 200px; height: 300px;" ></div> </a> </div> <div class="book-card__meta"> <div class="book-card__title-wrap"> <a class="book-card__title" href="/bk/72503996-veroyatnostnaya-opera"><b>Вероятностная опера</b></a> </div> <div class="mt-2 book-card__author-list"> <a class="book-card__author text-dark" href="/creator/eduard-serousov-33522019">Эдуард Сероусов</a> </div> </div> <div class="text-center book-card__links"> <a class="btn book-card__link" href="/bk/72503996-veroyatnostnaya-opera">Читать</a> </div> </div> </div> </div> </div> </section> </div> </main> </div> <footer class="footer bg-light pt-1 mt-4"> <div class="container"> <div class="row"> <div class="col-12 text-center py-1"> <a href="/dmca">Правообладателям</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://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js", "ym"); ym(94610767, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/94610767" style="position:absolute; left:-9999px;" alt="" /></div></noscript>  </div> </body> </html>