Атохон Ганиев – Основы HTML + CSS: Полное руководство для начинающих по созданию первого веб-сайта (страница 1)
Атохон Ганиев
Основы HTML + CSS: Полное руководство для начинающих по созданию первого веб-сайта
Введение
Добро пожаловать в мир веб-разработки! Если вы когда-либо задумывались, как создаются веб-сайты, или хотели создать собственную страницу в интернете, вы попали именно туда, куда нужно. Эта книга специально разработана для молодых людей, подобных вам, которые никогда раньше не программировали, но любопытны и хотят воплотить свои идеи в жизнь онлайн.
Каждый веб-сайт, который вы посещаете, от социальных сетей до онлайн-игр, создан с использованием HTML и CSS. Это фундаментальные строительные блоки веба. HTML обеспечивает структуру и содержание, а CSS делает всё красивым. Вместе они формируют основу, которую должен освоить каждый веб-разработчик.
Почему это важно
В современном цифровом мире понимание того, как работает веб, – это больше, чем просто полезный навык. Это суперспособность. Независимо от того, мечтаете ли вы стать профессиональным разработчиком, хотите создать портфолио для своих художественных работ или просто желаете понять технологию, которой пользуетесь каждый день, HTML и CSS – ваша отправная точка.
Прекрасная особенность веб-разработки в том, что вы можете видеть результаты немедленно. В отличие от многих других навыков, на освоение которых уходят месяцы, у вас будет работающая веб-страница к концу этого часа. Эта мгновенная обратная связь делает обучение захватывающим и поддерживает вашу мотивацию.
Что вы узнаете
Эта книга проведёт вас через создание вашей самой первой веб-страницы с нуля. Вы научитесь структурировать контент с помощью HTML-тегов, стилизовать его красиво с помощью CSS и опубликовать своё творение там, где его смогут увидеть другие. Мы начнём с самых основ и будем постепенно двигаться вперёд, гарантируя, что вы понимаете каждую концепцию, прежде чем идти дальше.
К концу этого путешествия у вас будет полноценная персональная веб-страница с вашим именем, фотографией, информацией о себе и стилизованная цветами и шрифтами, которые вы выбрали. Что ещё важнее, вы поймёте принципы того, что создали, подготовив себя к дальнейшему обучению.
Для кого эта книга
Эта книга написана специально для молодых людей, не имеющих абсолютно никакого предыдущего опыта программирования. Если вы никогда в жизни не написали ни строчки кода, отлично! Мы не предполагаем ничего, кроме вашего любопытства и готовности попробовать что-то новое.
Вам не нужно никакого специального программного обеспечения или дорогих инструментов. Всё, что мы будем использовать, бесплатно и доступно на любом компьютере с доступом в интернет. Вам не нужно хорошо разбираться в математике, и вам определённо не нужно быть компьютерным гением. Если вы можете просматривать веб-страницы и печатать на клавиатуре, у вас есть всё необходимое.
Как пользоваться этой книгой
Эта книга разработана для чтения по порядку, от начала до конца. Каждая глава опирается на предыдущую, поэтому пропуск вперёд может сбить вас с толку. Не торопитесь с каждым разделом, пробуйте примеры кода по мере прочтения и не беспокойтесь об ошибках. Ошибки – это то, как мы учимся.
В книге вы найдёте примеры кода. Набирайте их самостоятельно, а не копируйте и вставляйте. Процесс набора помогает вашему мозгу запомнить и понять синтаксис. Вы также найдёте упражнения в конце большинства глав. Они необязательные, но настоятельно рекомендуются для закрепления ваших знаний.
Теперь давайте начнём ваше путешествие в веб-разработку. Всего за один час вы превратитесь из человека, который никогда не программировал, в того, кто создал свою первую веб-страницу. Готовы? Погружаемся!
Глава 1: Понимание основ
Что такое HTML и CSS?
Прежде чем начать программировать, давайте разберёмся, с чем мы работаем. Представьте себе строительство дома. HTML – это как структура: стены, полы и комнаты. CSS – это как дизайн интерьера: цвета краски, расстановка мебели и декоративные штрихи. Вместе они создают полноценный, красивый веб-сайт.
HTML расшифровывается как HyperText Markup Language (язык гипертекстовой разметки). Не пугайтесь технического названия. Это просто способ разметки текста, чтобы придать ему смысл и структуру. Когда вы пишете HTML, вы сообщаете веб-браузеру, что представляет собой каждый фрагмент контента. Это заголовок? Абзац? Изображение? HTML даёт эти ответы.
CSS расшифровывается как Cascading Style Sheets (каскадные таблицы стилей). Здесь происходит визуальное волшебство. CSS позволяет вам контролировать цвета, шрифты, размеры, интервалы и макет. Без CSS каждый веб-сайт выглядел бы простым и скучным, как документ из 1990-х годов. CSS привносит индивидуальность и красоту в веб.
Как работают веб-сайты
Когда вы вводите адрес веб-сайта в свой браузер, ваш компьютер запрашивает файлы с сервера где-то в интернете. Сервер отправляет обратно HTML-файлы, которые ваш браузер читает и отображает. Если эти HTML-файлы ссылаются на CSS-файлы, браузер также их загружает и применяет инструкции по стилизации.
Ваш браузер невероятно умён. Он читает HTML-код, понимает, что означает каждый тег, загружает необходимые ресурсы, такие как изображения или CSS-файлы, а затем отображает всё на вашем экране в соответствии с правилами CSS. Всё это происходит за миллисекунды.
Ваша среда разработки
Чтобы начать создавать веб-страницы, вам нужны всего две вещи: текстовый редактор и веб-браузер. У вас, вероятно, уже есть и то, и другое на вашем компьютере. В качестве текстового редактора подойдёт «Блокнот» в Windows или TextEdit на Mac, хотя специализированные редакторы кода, такие как Visual Studio Code, делают работу проще благодаря полезным функциям.
Для просмотра вашей работы подходит любой современный браузер. Chrome, Firefox, Safari или Edge корректно отображают HTML и CSS. На протяжении всей этой книги мы будем создавать файлы на вашем компьютере и открывать их в браузере, чтобы увидеть результаты.
HTML-теги: строительные блоки
HTML работает с использованием тегов. Тег – это фрагмент кода, заключённый в угловые скобки, например: <p>. Большинство тегов идут парами – открывающий тег и закрывающий тег. Закрывающий тег выглядит так же, но имеет косую черту, например: </p>. Всё, что находится между открывающим и закрывающим тегами, подпадает под действие этого тега.
<p>Это абзац.</p>
В этом примере <p> говорит браузеру «начать абзац здесь», а </p> говорит «закончить абзац здесь». Текст между ними становится абзацем на вашей веб-странице. Просто, правда?
Существуют десятки различных HTML-тегов, каждый со своей конкретной целью. Одни создают заголовки, другие создают ссылки, а некоторые вставляют изображения. Не беспокойтесь о запоминании их всех прямо сейчас. Вы изучите самые важные, пока мы вместе строим вашу первую страницу.
Глава 2: Написание вашего первого HTML
Базовая структура
Каждая HTML-страница следует базовой структуре. Думайте о ней как о скелете, который держит всё вместе. Хотя вы не можете видеть большую часть этой структуры при просмотре веб-страницы, она необходима для того, чтобы браузер правильно понял и отобразил вашу страницу.
Конец ознакомительного фрагмента.
Текст предоставлен ООО «Литрес».
Прочитайте эту книгу целиком, купив полную легальную версию на Литрес.
Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.