HTML и CSS для непрограммистов. Создай свое портфолио, посадочную страницу и многое другое E-Book
Cuantum Technologies
Erhalten Sie Zugang zu diesem und mehr als 300000 Büchern ab EUR 5,99 monatlich.
- Herausgeber: Спринт Бук
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Russisch
Хотите создать собственный веб-сайт, не путаясь в сложном техническом жаргоне и не залезая в дебри кодирования? Давайте вместе воплотим мечту в реальность! Это практическое руководство предлагает пошаговый подход к изучению основ HTML и CSS, и от вас не потребуется опыта программирования. С помощью интерактивных упражнений, наглядных материалов и увлекательных проектов вы изучите основные концепции HTML, которые позволят структурировать свой веб-сайт и четко и организованно определить его содержание; подключите возможности CSS для персонализации внешнего вида веб-сайта; сможете управлять цветами, шрифтами, макетами и создавать визуально потрясающий дизайн, отражающий ваш уникальный стиль; объедините HTML и CSS, воплотив идеи в функциональную и привлекательную онлайн-площадку.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 356
Veröffentlichungsjahr: 2025
Das E-Book (TTS) können Sie hören im Abo „Legimi Premium” in Legimi-Apps auf:
Ähnliche
Переводчик Е. Мансурова
Cuantum Technologies
HTML и CSS для непрограммистов. Создай свое портфолио, посадочную страницу и многое другое. — СПб.: Питер, 2025.
ISBN 978-5-4461-4171-5
© ООО Издательство "Питер", 2025
Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.
Оглавление
От издательства
Для удобства читателя все примеры текстов и комментариев из программного кода книги переведены на русский язык.
Примеры в оригинале, а также дополнительные материалы вы можете найти на веб-сайте книги (доступ бесплатный, но требуется регистрация):
https://books.cuantum.tech/html-css-non-coders/code/
Ваши замечания, предложения, вопросы отправляйте по адресу [email protected](издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
На веб-сайте издательства www.piter.com вы найдете подробную информацию о наших книгах.
Об авторах
Cuantum Technologies — ведущая инновационная компания в сфере технического образования и разработки программного обеспечения, которая уделяет особое внимание возможностям искусственного интеллекта и передовых технологий.
Мы специализируемся на разработке веб-приложений и написании литературы по программированию и искусственному интеллекту, а также на создании увлекательных веб-ресурсов средствами HTML, CSS, JavaScript и Three.js. В ассортимент продуктов входят CuantumAI — инновационное программное обеспечение как услуга — и множество книг, посвященных Python, NLP, PHP, JavaScript и многому другому.
Наша философия
Цель Cuantum Technologies — разрабатывать инструменты, которые помогают людям повышать качество жизни благодаря искусственному интеллекту и новейшим технологиям. Мы убеждены, что технологии — не просто инструмент, а мощный катализатор положительных изменений и развития во всех сферах нашей жизни.
Мы хотим не только двигать технологии вперед, но и строить будущее, где каждый сможет получить знания и инструменты, необходимые для использования всего их потенциала. С помощью своих продуктов и услуг мы стремимся развеять мифы об искусственном интеллекте и технологиях, сделать их понятными и доступными для всех желающих.
Наш опыт
У нас разносторонний опыт работы с технологиями. Во-первых, мы предоставляем программное обеспечение как услугу (SaaS), как в случае с CuantumAI, а благодаря глубоким знаниям и навыкам в веб-разработке создаем инновационные и интуитивно понятные приложения. Мы применяем возможности искусственного интеллекта, чтобы решать практические задачи и повышать эффективность компаний.
Во-вторых, мы — увлеченные своим делом преподаватели. Наши книги подробно рассказывают о разных языках программирования и искусственном интеллекте, помогая как начинающим, так и опытным программистам пополнить свои знания и обрести новые навыки. Мы гордимся тем, что можем быстро обучать специалистов, объясняя сложные идеи простым и понятным языком.
Кроме того, мы — настоящие мастера в создании интерактивных веб-интерфейсов. Объединяя HTML, CSS, JavaScript и Three.js, мы создаем захватывающие и привлекательные цифровые платформы, которые запоминаются пользователям и выводят их взаимодействие с онлайн-сервисами на новый уровень.
Для кого эта книга
В современном цифровом мире умение создать и поддерживать свой сайт становится незаменимым навыком, который пригодится всем: и владельцам малого бизнеса, и творческим людям, желающим продемонстрировать свои работы, и тем, кто просто хочет исследовать безграничные возможности интернета. Книга «HTML и CSS для непрограммистов» поможет вам шаг за шагом понять азы веб-разработки, сделав ее понятной, интересной и доступной для тех, у кого еще нет такого опыта.
В этом разделе вы узнаете, почему освоить HTML и CSS важно каждому, кто стремится заявить о себе в онлайн-пространстве. Мы покажем, почему наша книга станет идеальным путеводителем в мир веб-разработки.
Что такое HTML и CSS?
HTML (язык гипертекстовой разметки) и CSS (каскадные таблицы стилей) лежат в основе любого сайта. HTML отвечает за структуру веб-страниц: с его помощью вы создаете заголовки, абзацы, ссылки и не только. CSS, в свою очередь, позволяет изменить их внешний вид: задает цвета, шрифты и размещение элементов. Вместе они позволяют создавать веб-проекты, которые не только эффективно выполняют свои задачи, но и радуют глаз.
Зачем учить HTML и CSS, если вы раньше не программировали?
Независимость в цифровом пространстве. Освоив HTML и CSS, вы сможете самостоятельно создать и развивать свой сайт, блог или портфолио, не прибегая к услугам сторонних платформ и разработчиков. Вы получите полную свободу и сможете продемонстрировать свой бренд так, как вам этого захочется.
Развитие мышления. Знания в области программирования, даже на базовом уровне, помогают лучше решать задачи и развивают логическое мышление. Вы научитесь экспериментировать и перестанете бояться ошибок, что полезно в любом профессиональном или творческом начинании.
Повышение цифровой грамотности. Сегодня основы веб-разработки становятся частью цифровой грамотности. Поняв, как устроен интернет, вы научитесь активнее пользоваться его возможностями.
Новые возможности для заработка. В век, когда цифровые платформы и фриланс набирают популярность, личный сайт становится вашим преимуществом. Он поможет продавать товары и услуги или создать собственный бренд, который поднимет вас на новые карьерные высоты.
Сообщество и поддержка. Сообщество веб-разработчиков очень большое, оно готово прийти на помощь и всегда открыто к сотрудничеству. Освоив HTML и CSS, вы не только обретете новые навыки, но и сможете общаться с другими профессионалами, учиться у них и работать вместе над интересными проектами.
Чем поможет эта книга
Материал в книге «HTML и CSS для непрограммистов» организован так, чтобы провести вас по пути от начинающего до опытного веб-разработчика. Давайте посмотрим, как это работает.
Пошаговое руководство. Каждая концепция представлена в доступной форме, разбита на удобные разделы и объяснена простым, понятным языком. Практические примеры и упражнения помогут вам закрепить полученные знания.
Работа с настоящими проектами. Чтобы закрепить полученные знания и применить их на практике, вы создадите настоящий веб-проект: онлайн-портфолио или посадочную страницу цифрового продукта.
Рекомендации веб-разработчикам. Мы уделим особое внимание современным подходам в веб-разработке — от принципов доступности до адаптивной верстки. Вы научитесь создавать красивые и удобные сайты, которые будут эффективно выполнять поставленные задачи.
Ресурсы для дальнейшего обучения. Мы понимаем, что обучение не заканчивается на последней странице книги. Именно поэтому мы предлагаем вам доступ к ресурсам, инструментам и сообществу, которые помогут развиваться в сфере веб-разработки и всегда быть в курсе новых технологий.
Заключение
«HTML и CSS для непрограммистов» — не просто книга. Она создана специально для тех, кто раньше и подумать не мог о том, чтобы создать собственный сайт. Мы покажем, что при правильном подходе веб-разработка станет доступна каждому, независимо от уровня подготовки. Прочитав эту книгу до конца, вы не только освоите основы HTML и CSS, но и почувствуете в себе силы и желание продолжать исследовать бескрайние и захватывающие горизонты, которые открывает перед вами мир веб-разработки.
Благодарности
Написание книги не происходит в одиночку, и книга «HTML и CSS для непрограммистов» в этом плане не исключение. На ее страницах собрано множество идей, которые стали результатом упорного труда и опираются на накопленный опыт. Мы хотим выразить искреннюю благодарность всем, кто вложил силы в этот проект.
Прежде всего мы искренне благодарим невероятную команду Cuantum Technologies. Ваш энтузиазм, преданность делу и профессионализм вдохновляют каждый день. Эта книга стала результатом нашего сотрудничества и неутолимой любви к веб-разработке. Каждый из вас внес неоценимый вклад — от обсуждения идей до скрупулезной работы над деталями. Ваша помощь была неоценима, без нее этот труд не вышел бы в свет.
Мы выражаем глубокую признательность университетам и образовательным учреждениям, которые включили наши материалы в учебные программы. Для нас огромная честь вносить свой вклад в развитие будущих веб-разработчиков и дизайнеров. Ваше признание нашей работы вдохновляет нас создавать качественный и полезный контент.
Мы также хотим поблагодарить рецензентов, корректоров и редакторов, которые внимательно изучали наши черновики, вносили предложения и исправляли ошибки. Ваши проницательные замечания и конструктивные комментарии, несомненно, улучшили качество этой книги.
И в заключение мы хотели бы выразить глубочайшую признательность всем тем читателям, которые избрали эту книгу верным спутником на пути к знаниям. Мы надеемся, что навыки, которые вы освоите, станут вашим надежным помощником в учебе или работе. Ваш успех — наивысшая награда.
Мы стремимся совершенствоваться вместе с вами и будем благодарны за любые замечания и предложения, которые в этом помогут. Спасибо за то, что стали важной частью прекрасного путешествия.
Введение
Идея написать книгу «HTML и CSS для непрограммистов. Создай свое портфолио, посадочную страницу и многое другое» обернулась волнующим приключением, наполненным открытиями удивительного мира веб-разработки.
Книга — не просто сборник технических инструкций и синтаксических правил. Это тщательно проработанное пособие, которое разрушает мифы о веб-дизайне и веб-разработке, превращая создание сайта в легкий и увлекательный процесс с бесконечными возможностями для творчества.
Наша задача — снабдить вас, дорогие читатели, всеми необходимыми ресурсами, знаниями и уверенностью в своих силах. Мы хотим, чтобы вы разобрались в основах, на которых построен интернет, и нашли вдохновение для создания собственных цифровых шедевров.
Наше путешествие
В наше время, когда без цифровой среды невозможно представить себе общение, образование и ведение бизнеса, способность творить на бескрайних просторах интернета приобрела особую ценность. При написании книги «HTML и CSS для непрограммистов» мы понимали, что путь к освоению веб-разработки предполагает не только «как», но и «почему». Важно не просто писать код, а видеть за ним возможности для создания уникального опыта, решения проблем и влияния на окружающий мир.
Для кого эта книга
Эта книга предназначена для мечтателей, творцов и мыслителей — всех, кто когда-либо хотел воплотить свои идеи в жизнь, но столкнулся с техническими трудностями веб-разработки. Она поможет предпринимателю, пытающемуся заявить о себе в интернете, художнику, желающему продемонстрировать свои работы, педагогу, которому важно обмениваться знаниями, и любому, кто хочет учиться на протяжении всей жизни. Если вы только начинаете свой путь в веб-разработке или уже имеете некоторый опыт, но хотите систематизировать знания, книга станет вашим верным спутником в захватывающем путешествии.
Структура книги
Наше путешествие по миру HTML и CSS построено так, чтобы вы могли начать с нуля и постепенно заложить прочный фундамент, на который будут опираться более сложные концепции. Сначала мы откроем вам тайны интернета и расскажем, как работают веб-страницы. Это подготовит вас к погружению в тонкости HTML — основного языка, на котором создаются сайты. Как только вы научитесь структурировать контент, мы познакомим вас с CSS, языком, способным сделать ваши веб-страницы стильными и привлекательными.
Но эта книга предлагает больше, чем просто основы программирования. Вместе мы погрузимся в тонкости веб-дизайна, работы с пользовательским опытом и адаптивными интерфейсами. Вы научитесь создавать удобные, привлекательные сайты, которые стабильно работают и доступны любым пользователям. Практические задания позволят вам сразу же применять полученные знания на практике. Вы создадите онлайн-портфолио и посадочную страницу цифрового продукта — они станут подтверждением ваших навыков.
Лучшие практики
На протяжении всей книги мы будем уделять особое внимание лучшим практикам веб-разработки — от написания чистого и поддерживаемого кода до создания доступных и удобных интерфейсов. Мы научим вас не просто делать сайты, а делать их качественно, чтобы каждое творение было инклюзивным, эффективно выполняло свою задачу и могло развиваться в долгосрочной перспективе.
Путь к запуску сайта
Запуск сайта — особая веха на пути созидания. Мы подробно расскажем вам о веб-хостинге, выборе доменного имени и настройке SSL-сертификатов, чтобы развеять мифы о сложности этих этапов. Вы также узнаете основы SEO и аналитики, которые помогут вашему сайту не только увидеть свет, но и занять достойное место в цифровой среде.
Непрерывное обучение
Книга «HTML и CSS для непрограммистов» станет вашим надежным проводником в переменчивом мире веб-разработки и заложит прочный фундамент для профессионального развития. Мы предоставим вам все необходимые ресурсы для дальнейшего обучения и поможем найти сообщества, где вы сможете обмениваться опытом и получать новые знания. Наша миссия — мотивировать вас постоянно развиваться, экспериментировать и создавать неповторимые проекты.
ЧАСТЬ I. ВВЕДЕНИЕ В ВЕБ-РАЗРАБОТКУ
Глава 1. Что такое интернет и как он работает
Добро пожаловать в удивительный и разнообразный мир веб-разработки! Каждое увлекательное путешествие к знаниям должно начинаться с основ. Чтобы понять, как работают веб-технологии, нужно изучить фундамент, на который они опираются: интернет.
В первой главе мы подробно расскажем о принципах его работы. Поначалу некоторые идеи и понятия могут показаться сложными, но не волнуйтесь. В этой книге мы постараемся раскрыть и упростить их, чтобы разобраться мог каждый читатель, независимо от своего опыта и знаний.
1.1. Общее представление об интернете
Интернет — это огромная переплетенная сеть, объединяющая компьютеры, серверы, маршрутизаторы и другие устройства, благодаря которой мы можем беспрепятственно обмениваться информацией. Он похож на запутанную паутину с бесчисленными соединениями и путями, по которым данные могут свободно перемещаться в любую точку мира.
Представьте, что интернет — это международное почтовое отделение, только вместо бумажных писем оно отправляет пакеты цифровых данных от одного компьютера к другому за считаные миллисекунды. Содержимое пакетов может быть разным: в них встречается текст, изображения, видео и многое другое. Просто удивительно, как интернет помогает преодолевать расстояние между людьми, компаниями и организациями, позволяя им общаться и сотрудничать, где бы они ни находились.
Кроме того, благодаря интернету в корне изменился способ получения информации. Всего несколько нажатий клавиш — и нам доступны огромные базы данных, онлайн-библиотеки и знания по множеству различных тем. Образование стало доступнее: теперь каждый, у кого есть выход в интернет, может постоянно учиться и расширять кругозор.
Однако Сеть стала не только средством общения и обмена информацией, но и важнейшим инструментом торговли. С тех пор как появились онлайн-магазины, платформы электронной коммерции и цифровые маркетплейсы, изменилось представление о покупке и продаже товаров и услуг. Теперь компании могут привлекать клиентов по всему миру, а малый бизнес и частные предприниматели повысили шансы на успех.
Изобретение интернета во многом изменило привычный мир. У нас появилось больше возможностей для общения и развития, а дни стали гораздо насыщеннее. Теперь интернет — неотъемлемая часть современного общества. Он влияет на то, как мы взаимодействуем с окружающим миром в любой сфере, будь то работа, образование, торговля или обмен информацией.
1.1.1. Как работает интернет?
Данные в Сети передаются с помощью широко распространенного интернет-протокола (IP).При этом каждое устройство с выходом в интернет — от смартфона до мощного сервера, на котором размещен ваш любимый сайт, — получает уникальный IP-адрес.
Он играет ту же роль, что и обычные домашние адреса: обеспечивает точную и надежную передачу информации выбранному получателю, но при этом действует в цифровой среде.
Если вы решите перейти на сайт, расположенный по определенному адресу (URL), он откроется в несколько этапов. Давайте рассмотрим их, чтобы лучше понимать общий принцип работы.
1. Поиск на сервере DNS
Первый этап для получения доступа к сайту. Когда вы ввели в адресную строку доменное имя, удобное для человеческого восприятия (например, www.example.com), браузеру нужно узнать соответствующий IP-адрес. Для этого он отправляет запрос на сервер системы доменных имен (DNS-сервер), который действует в роли посредника, преобразуя имена в соответствующие адреса. DNS-сервер ищет в базе IP-адрес, связанный с введенным доменным именем, и затем возвращает его браузеру. Получив адрес, браузер пытается подключиться к сайту и загрузить нужную веб-страницу.
2. Подключение
Полученный IP-адрес позволяет браузеру подключиться к серверу, на котором расположен сайт. Такое подключение также называется «сетевым» и играет решающую роль: без него невозможно связаться с сервером и загрузить содержимое сайта.
При попытке подключиться к серверу браузер отправляет ему запрос на доступ к сайту, сообщая при этом различную информацию, например тип и версию браузера и другие необходимые сведения. Затем сервер обрабатывает запрос и в ответ подтверждает подключение, передавая данные для отображения сайта.
В случае успешного подключения браузер и сервер начинают обмениваться пакетами данных. В них содержатся инструкции и другая необходимая информация, с помощью которой можно извлечь и показать содержимое сайта. Благодаря постоянной связи браузер правильно загружает веб-страницы и обрабатывает действия пользователя, например переход по ссылкам или заполнение форм.
Таким образом, доступ к сайту невозможен без сетевого подключения. Лишь взаимодействуя с сервером, браузер способен загрузить сайт и поддерживать его беспрепятственную работу.
3. Запрос и ответ
Подключившись к серверу, браузер запрашивает у него содержимое сайта. В этом запросе подробно указано, какие именно данные нужны для отображения веб-страницы. Затем сервер обрабатывает запрос и в ответ передает различные файлы, которые отвечают за создание сайта, включая HTML, CSS, JavaScript и другие. Получив их, браузер интерпретирует данные и отображает на экране сайт, с которым можно взаимодействовать.
Таким образом, когда вы вводите в браузере адрес сайта, для загрузки веб-страницы запускается несколько незаметных для вас процессов. Без них браузер не сможет извлечь и правильно отобразить содержание веб-страниц на экране.
Хотя загрузка страницы кажется мгновенной, этот процесс состоит из множества этапов и работает благодаря слаженному взаимодействию веб-технологий.
1.1.2. IP-адреса и DNS
IP-адрес
IP-адрес, или адрес интернет-протокола, — это уникальная цифровая метка, присваиваемая каждому устройству с выходом в интернет. Он служит идентификатором, с помощью которого устройства могут устанавливать связь и обмениваться информацией.
Проще говоря, он похож на почтовый адрес, по которому устройства могут находить друг друга и взаимодействовать в Сети. Без IP-адресов было бы невозможно подключаться к интернету и получать доступ к огромному количеству информации и множеству сервисов.
DNS
Система доменных имен (DNS) играет ключевую роль в инфраструктуре интернета. Она напоминает телефонный справочник: для понятного нам доменного имени в ней найдется соответствующий IP-адрес.
Это значительно упрощает доступ к сайтам и различным онлайн-ресурсам. Только представьте, что вместо знакомых имен нам приходилось бы запоминать и вручную вводить все цифровые IP-адреса. Пользоваться интернетом было бы чрезвычайно неудобно.
Помимо преобразования доменных имен, DNS помогает управлять почтовыми службами, используется для маршрутизации интернет-трафика и обеспечивает безопасное подключение. Благодаря этой системе возможен эффективный обмен информацией и связь между устройствами по всему миру.
Иными словами, DNS создает условия для удобной и беспрепятственной работы в интернете и упрощает доступ к онлайн-ресурсам.
Таким образом, IP-адреса и DNS — это основные составляющие интернета, которые обеспечивают непрерывную связь и доступ к информации. Вместе они помогают нам просто и быстро ориентироваться в онлайн-мире.
1.1.3. Пример кода: из чего состоит URL
URL (унифицированный указатель ресурса) — не просто адрес страницы в интернете. В нем содержится подробная информация о том, как получить доступ к ресурсу. Давайте посмотрим, из чего состоит URL.
https://www.example.com:80/path/to/page.html?query=123#section
• https: протокол, который используется для доступа к ресурсу. Если в URL указан HTTPS, это означает, что подключение зашифровано для повышения безопасности. Такой протокол позволяет избежать несанкционированного доступа к данным, которыми ваше устройство обменивается с сайтом.
• www.example.com: доменное имя сайта. Оно выступает в роли адреса, по которому сайт расположен в интернете.
• 80: номер порта (порты, используемые по умолчанию, часто опускаются). Порты похожи на точки доступа, через которые различные службы могут обмениваться данными.
• /path/to/page.html: путь к определенному ресурсу или странице сайта. Указывает на точное местоположение контента, который вам нужен.
• ?query=123: строка запроса, с помощью которой можно передать серверу определенные параметры для отображения веб-страницы.
• #section: фрагмент — идентификатор для перехода к определенной части страницы. Помогает быстро открывать нужный раздел или элемент страницы, тем самым упрощая поиск информации.
Поняв принципы работы интернета, вы сможете правильно оценить многогранность и потенциал веб-разработки. В этой книге мы расскажем, как с помощью HTML и CSS создавать и оформлять веб-страницы, которыми вы будете пользоваться каждый день. Кроме того, мы рассмотрим различные технологии и фреймворки, например JavaScript и адаптивный дизайн, без которых немыслима современная веб-разработка.
Овладев основами, вы сможете создавать сайты, которые не только отлично выглядят, но и хорошо функционируют на устройствах с экранами любых размеров. Не забывайте, что каждый профессионал был когда-то новичком, а ваш путь в веб-разработке только начинается. Давайте вместе отправимся в это увлекательное путешествие и преодолеем весь путь шаг за шагом.
1.1.4. Роль веб-серверов и браузеров
Веб-серверы
Серверами называются мощные компьютеры, выделенные для специальных задач и постоянно подключенные к интернету. Они спроектированы для хранения и обработки веб-страниц, а также их быстрой и надежной передачи на устройства пользователей.
Получив запрос от браузера на содержимое определенной веб-страницы, сервер немедленно отправляет все файлы и другие данные для ее правильного отображения. Благодаря этому контент становится доступен без каких-либо задержек. Чтобы пользователю было удобно взаимодействовать с сайтом и просматривать страницы, сервер должен быстро доставлять запрашиваемую информацию.
Продвинутые технологии и инфраструктура современных серверов позволяют им обрабатывать множество запросов, поступающих одновременно от разных пользователей. Благодаря этому сервер эффективно справляется с большой нагрузкой и своевременно передает данные всем пользователям.
Однако серверы не просто отправляют браузерам файлы — они играют важную роль в хранении и обработке данных. Их оборудуют чрезвычайно вместительными накопителями, что позволяет обеспечить сайты и онлайн-приложения необходимыми ресурсами для нормальной работы. Кроме того, в серверах установлены мощные процессоры и надежные системы программного обеспечения (ПО). Благодаря этому можно проводить многосложные операции, управлять базами данных, передавать файлы для отображения веб-страниц, обеспечивать защиту сайтов с помощью протоколов безопасности и выполнять другие задачи.
Таким образом, именно серверы поддерживают работу всей Сети и играют ключевую роль в беспрепятственной доставке контента. В результате пользователи могут без труда просматривать веб-страницы. Благодаря своей эффективности, надежности и постоянному подключению к интернету серверы стали неотъемлемой частью цифровой инфраструктуры, на которую опирается современный онлайн-мир.
Веб-браузеры
Браузеры — это приложения, которые интерпретируют и отображают веб-страницы, полученные от сервера. Они открывают пользователям доступ к огромному объему информации в интернете и предлагают инструменты для работы с полученными знаниями и ресурсами.
Браузеры, например Google Chrome, Firefox или Safari, играют важнейшую роль в области веб-разработки. Они служат связующим звеном между сервером и конечным пользователем, обеспечивая беспрепятственный доступ к созданному контенту.
Значение браузеров трудно переоценить, ведь с их помощью пользователи могут просматривать сайты и мультимедиа, а также работать с различными веб-приложениями. Для полноценной работы с интернет-ресурсами нужен специальный инструмент, и без браузеров наши возможности были бы сильно ограниченны.
В связи с этим веб-разработчики должны хорошо понимать, как различные браузеры обрабатывают веб-страницы и с какими ограничениями придется столкнуться. Только так можно создавать привлекательные, удобные и интуитивно понятные сайты, тем самым улучшая пользовательский опыт аудитории в увлекательном путешествии по глобальной Сети.
1.1.5. Протоколы, отличные от HTTP и HTTPS
Чаще всего веб-разработчики используют HTTP (HyperText Transfer Protocol, протокол передачи гипертекста) и HTTPS (HyperText Transfer Protocol Secure — HTTP с поддержкой шифрования). Однако важно также познакомиться с другими протоколами, которые встречаются в интернете.
FTP
FTP (File Transfer Protocol, протокол передачи файлов) широко используется для эффективной и безопасной передачи файлов между клиентом и сервером в одной сети. Он обладает большим набором функций и отлично подойдет для тех, кому нужно обмениваться разнообразными файлами.
Благодаря FTP можно передавать документы, изображения или видео одинаково надежно и безопасно. Протокол обеспечит их сохранность и конфиденциальность на всех этапах обмена.
SMTP
SMTP (Simple Mail Transfer Protocol, простой протокол передачи почты) — важный протокол для бесперебойной передачи электронной почты. Он выступает в качестве надежного и эффективного канала связи, обеспечивая мгновенную и точную доставку писем адресатам.
Изучив работу SMTP, мы сможем понять, как отправляются и принимаются электронные письма, а также какие механизмы в этом задействованы. Это позволит эффективно устранять проблемы в работе электронной почты, оптимизировать отправку писем через маршрутизатор и защищать учетные записи от спама и несанкционированного доступа.
Кроме того, в SMTP есть важнейшие средства для аутентификации отправителей. С их помощью можно проверять подлинность источников и снижать риск фишинга и других видов интернет-мошенничества. Таким образом, знать принципы работы SMTP чрезвычайно полезно всем, кто взаимодействует с электронной почтой, будь то отдельные пользователи или сотрудники компаний и организаций.
IMAP и POP3
IMAP (Internet Message Access Protocol, протокол доступа к интернет-сообщениям) и POP3 (Post Office Protocol Version 3, протокол почтового отделения) — два важнейших протокола для доступа к электронной почте. Благодаря им пользователи могут легко работать с электронными письмами.
IMAP предлагает различные средства для управления электронной почтой и доступа к ней с нескольких устройств. Это означает, что пользователи могут переключаться между устройствами и взаимодействовать с письмами, не думая о проблемах синхронизации.
POP3, напротив, предназначен для загрузки электронной почты только на одном устройстве. Он подойдет сторонникам более традиционной системы, которые предпочитают хранить письма на определенном устройстве и иметь к ним доступ без подключения к интернету. IMAP и POP3 играют важную роль в обработке электронной почты и могут удовлетворять различные потребности пользователей.
Изучив эти интернет-протоколы, мы лучше узнаем инфраструктуру, которая лежит в основе различных онлайн-сервисов и приложений.
1.1.6. Безопасность и конфиденциальность в интернете
Объем конфиденциальной информации, которой пользователи регулярно обмениваются в интернете, постоянно увеличивается. Поэтому мы считаем необходимым как можно подробнее рассказать читателям о том, как защитить персональные данные.
Хотя в книге уделяется внимание защищенному соединению HTTPS, следует подробнее остановиться на теме безопасности и рассказать о том, почему важно понимать и соблюдать политику конфиденциальности. Мы также хотим познакомить вас с принципами шифрования данных, которые помогают защитить конфиденциальную информацию от несанкционированного доступа и потенциальных угроз.
Стоит отметить, насколько важно регулярно обновлять операционные системы и программное обеспечение. Это позволит устранять уязвимости, которыми могли бы воспользоваться злоумышленники. Помните, что надежные и уникальные пароли для каждой учетной записи помогают снизить риск взлома.
Будьте осторожны, сообщая в интернете личные данные: киберпреступники могут выманивать у пользователей конфиденциальную информацию с помощью фишинга и социальной инженерии. Не теряйте бдительности и следите за новостями в сфере кибербезопасности — так вы сможете защититься от интернет-мошенничества.
Рекомендуем регулярно проверять настройки конфиденциальности в социальных сетях и других онлайн-сервисах, чтобы определять, какая информация о вас доступна другим пользователям. Внимательно следите за тем, что вы публикуете, и ограничивайте доступ к личным данным — так вы значительно повысите свою конфиденциальность и безопасность в интернете.
1.1.7. Эволюция интернета
Чтобы понять непростую природу интернета и выяснить, какие изменения нас ждут, нужно познакомиться с историческими этапами его развития. В первую очередь отметим, что интернет изменился со времен статических веб-страниц (Web 1.0) — до динамических и интерактивных платформ, на которые мы полагаемся сегодня (Web 2.0). Зная об этом, проще представить будущее цифрового мира.
Например, теперь потенциал и дальнейшее развитие интернета во многом обусловлены стандартом Web 3.0 и такой концепцией, как «интернет вещей» (IoT). Узнав о них больше, вы сможете лучше ориентироваться в переменчивой сфере цифровых технологий.
Знания о том, как функционирует интернет, помогут заложить прочный фундамент для дальнейшего изучения веб-разработки.
Продолжив изучение этого руководства, вы поймете, что мы постарались изложить материал просто и понятно. Так информация будет доступна каждому читателю — даже тем, кто только начинает изучать веб-разработку и еще не имеет большого опыта в программировании.
Разъяснив сложные концепции, мы поможем вам взаимодействовать с постоянно развивающимся миром веб-разработки.
1.2. Введение в веб-разработку
Ваша цель может быть любой: поделиться ценными знаниями, продемонстрировать впечатляющее портфолио или создать процветающий бизнес в Сети. Чего бы вы ни пожелали, мощнейшие инструменты веб-разработки позволят вам установить и расширить цифровое присутствие. Давайте исследуем глубины веб-разработки с неиссякаемым оптимизмом и неутолимой жаждой знаний.
1.2.1. Что такое веб-разработка?
Веб-разработка — это многосложный процесс создания и поддержки сайтов, включающий в себя широкий спектр задач. Он охватывает не только видимую, но и скрытую, «закулисную» часть работы, необходимой для правильного функционирования веб-страниц.
Веб-разработчики должны хорошо разбираться в различных языках программирования, инструментах и технологиях, а также уметь с ними работать. Нужно постоянно учиться новому и быстро адаптироваться в условиях стремительно меняющейся цифровой среды.
Когда речь заходит о веб-разработке, выделяют два основных направления, которые отличаются своими задачами.
Фронтенд-разработка
Фронтенд-разработка (также «разработка клиентской части», «разработка интерфейса») сосредоточена на пользовательском интерфейсе. Фронтенд-разработчики решают, как будут выглядеть все элементы, с которыми взаимодействует пользователь, и делают сайт привлекательным и интуитивно понятным.
Они применяют HTML (Hypertext Markup Language, язык гипертекстовой разметки), CSS (Cascading Style Sheets, каскадные таблицы стилей) и язык JavaScript, а также различные фреймворки и библиотеки (например, React, Angular или Vue.js), которые позволяют повысить функциональность и интерактивность сайта.
Фронтенд-разработчики тесно сотрудничают с UX-дизайнерами1 и вместе создают бесшовный интерфейс, ориентированный на удобство пользователей. Зная потребности целевой аудитории, они могут оптимизировать сайт, повысить его доступность для людей с ограниченными возможностями, а также быстродействие на различных устройствах и в браузерах.
Кроме того, фронтенд-разработчики следят за последними тенденциями в своей области, чтобы страницы всегда выглядели современно и отвечали требованиям пользователя. Они постоянно изучают новые технологии и совершенствуют свои навыки, благодаря чему создают инновационные сайты высокого качества.
Таким образом, фронтенд-разработка — динамичная, постоянно развивающаяся область, в которой нужны творческий подход, знание технологий и умение ориентироваться на пользователя, что позволит создавать удобные и привлекательные сайты.
Бэкенд-разработка
В отличие от фронтенд-разработки, которая в основном посвящена внешнему виду сайта, в бэкенд-разработке (также «разработке серверной части») стараются обеспечить его бесперебойную и эффективную работу.
Бэкенд-разработчики отвечают за функционирование сайта на стороне сервера и занимаются целым рядом важнейших задач, включая управление хранилищем данных, обработку пользовательских запросов и поддержку бесперебойной связи между сайтом и базой данных. Благодаря им сайт работает эффективно и радует пользователей.
Для выполнения своих задач бэкенд-разработчики используют несколько языков программирования, наиболее распространенные из которых — Python, PHP, Ruby и Java.
Но разработчики должны не только хорошо знать эти языки, но и уметь создавать инфраструктуру на стороне сервера и реализовывать многосложную логику работы сайта. Благодаря их знаниям и навыкам сайт может достичь поставленных целей.
Помимо фронтенд- и бэкенд-разработки, существуют и другие специализации, например разработка полного цикла, которая включает в себя оба направления и требует цельного представления о процессе создания сайта.
Также выделяют мобильную веб-разработку, которая сосредоточена на создании сайтов, оптимизированных для мобильных устройств, и учитывает соответствующие особенности просмотра веб-страниц и требования пользователей.
Кроме того, в веб-разработке необходимо не только иметь высокий уровень технической подготовки, но и творчески подходить к созданию страниц. Чтобы сайт был удобным и привлекательным, нужны специалисты с широким набором навыков, включая дизайн, принятие решений и коммуникацию. Сфера веб-разработки постоянно развивается и учитывает последние тенденции и технологии. Она формирует современный цифровой мир и определяет то, как мы будем пользоваться интернетом в дальнейшем.
1.2.2. Знакомство с HTML и CSS
HTML и CSS — основные инструменты веб-разработки. HTML, язык гипертекстовой разметки, отвечает за структуру и контент веб-страниц. С его помощью определяют заголовки, абзацы, списки, изображения, ссылки и другие элементы.
Кроме того, HTML предлагает широкий набор атрибутов и тегов для дополнительной настройки поведения и функций веб-страницы. Например, можно использовать атрибут href для создания кликабельных гиперссылок или src, чтобы добавить изображение или видео.
В свою очередь, технология каскадных таблиц стилей CSS отвечает за внешний вид сайта и макеты страниц. Она позволяет выбирать цвета, шрифты, настраивать внешние отступы, внутренние поля и другие параметры, чтобы сайт выглядел привлекательнее.
С помощью CSS можно создавать красивые дизайны и макеты. Благодаря различным стилям заголовков, абзацев и других элементов сайт будет выглядеть уникально и при этом гармонично.
Также CSS предлагает множество функций для создания интерактивных и динамических эффектов. CSS-анимации, переходы и трансформации помогут оживить веб-страницы и повысить вовлеченность пользователей.
Объединив возможности HTML и CSS, вы сможете создавать привлекательные интерактивные страницы, с которыми пользователям будет приятно взаимодействовать. Инструменты, заложенные в HTML и CSS, подходят для разработки как личного блога, так и сайта электронной коммерции.
Основы HTML
HTML — сокращение от Hypertext Markup Language, язык гипертекстовой разметки — ключевой компонент веб-разработки. Стоит упомянуть, что он не относится к традиционным языкам программирования, а является именно языком разметки. Он сообщает браузеру, как выстраивать веб-страницы и представлять их пользователям, которые посещают сайт во время путешествия по интернету.
Благодаря широкому набору элементов HTML позволяет организовывать и структурировать разделы сайта, чтобы вы могли настраивать и персонализировать их функции и внешний вид в соответствии со своими требованиями.
Так вы сможете создавать уникальные запоминающиеся страницы, которые привлекают аудиторию и удерживают ее внимание. В результате ваш сайт будет красиво выглядеть и отлично работать.
Рассмотрим небольшой пример документа на языке HTML.
<!DOCTYPE html>
<html>
<head>
<title>Моя первая веб-страница</title>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это моя первая страница. Я изучаю веб-разработку!</p>
</body>
</html>
ОБЪЯСНЕНИЕ КОДА
• <!DOCTYPEhtml> — важный элемент, который объявляет тип документа и версию HTML.
• <html> — корневой элемент, который охватывает все содержимое страницы.
• <head> играет ключевую роль, так как предоставляет метаинформацию в документе, включая заголовок.
• <title> определяет название документа, которое отображается в строке заголовков окна или на вкладке браузера.
• <body> содержит основное наполнение документа, например текст или изображения.
Основы CSS
CSS — сокращение от Cascading Style Sheets, каскадные таблицы стилей — невероятно мощный и функциональный язык стилевого оформления, который позволяет изменить внешний вид вашего сайта.
Благодаря CSS дизайнеры могут задать оформление элементов для различных условий, например на экране компьютера, при печати на бумаге или в других медиаформатах.
Так сайт будет единообразен на огромном количестве платформ и устройств, а пользователи смогут оценить его уникальный интерфейс и бесшовную работу. Кроме того, CSS предлагает широкий набор функций и свойств для дополнительной оптимизации и настройки внешнего вида веб-страниц. Адаптивные дизайны, созданные с помощью этого языка, могут автоматически реагировать на изменения в размере и ориентации устройства, чтобы пользователям всегда было приятно просматривать ваш сайт.
Итак, CSS — незаменимый инструмент веб-дизайнеров, с помощью которого можно создавать красивые и удобные сайты для просмотра на различных платформах и устройствах.
Рассмотрим, как добавить стили CSS в предыдущий пример страницы HTML.
<!DOCTYPE html>
<html>
<head>
<title>Моя первая веб-страница</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
background-color: #f0f0f2;
}
h1 {
color: #333366;
}
p {
color: #666666;
}
</style>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Это моя первая страница. Я изучаю веб-разработку!</p>
</body>
</html>
ОБЪЯСНЕНИЕ КОДА
Тег <style>, расположенный в разделе <head>, содержит правила CSS, которые применяются к различным элементам раздела <body>. Эти правила задают внешний вид и стиль веб-страницы.
Без тега <style> было бы сложно настроить разметку, цвета, шрифты и дизайн других элементов <body>. Включая его в раздел <head>, веб-разработчики могут эффективнее организовывать CSS-код и создавать привлекательные страницы в едином стиле.
Подведем итоги
Знакомство с HTML и CSS — отправная точка вашего путешествия в мир веб-разработки. По мере изучения языков вы будете приобретать знания и умения, необходимые для создания привлекательных интерактивных и динамических веб-страниц.
Чтобы освоить веб-разработку, вам потребуются время, усердие, упорство и желание преодолевать трудности. Каждая концепция опирается на предыдущую, создавая прочный фундамент ваших знаний. Но по-настоящему закрепить изученный материал и достичь мастерства поможет практика.
Поэтому любопытство и интерес к веб-разработке — ваши верные помощники. Экспериментируйте с кодом, исследуйте различные пути достижения целей. Не бойтесь рисковать и ошибаться, ведь так вы получите ценные уроки и станете успешным веб-разработчиком. Идите вперед шаг за шагом. Именно непрерывное обучение позволит вам по-настоящему преуспеть в этой сфере.
1.3. Упражнения. Типы сайтов и их назначение
Поздравляем! Настало время увлекательной части нашего путешествия. Вы уже сделали первые шаги в огромном мире веб-разработки: узнали о принципах работы интернета и его основах — HTML и CSS. Теперь давайте немного изменим тактику и рассмотрим материал в более интерактивной форме.
В этом разделе мы предлагаем вам выполнить несколько упражнений, чтобы изучить различные типы сайтов и их назначение. Это поможет не только оценить, насколько хорошо вы поняли материал, но и пробудить воображение и предоставить возможности веб-разработки. Так что держитесь крепче — мы отправляемся!
Упражнение 1. Изучите типы сайтов
Интернет похож на мозаику из сайтов различных типов, каждый из которых имеет собственное назначение. Ниже представлены типы сайтов и их описания. Вам необходимо выбрать правильный тип для каждого описания.
Типы сайтов
А. Сайт электронной коммерции
Б. Сайт-портфолио
В. Блог
Г. Новостной сайт
Д. Социальная сеть
Е. Образовательный сайт
Описания
1. На таких сайтах люди и компании демонстрируют свои проекты и навыки потенциальным клиентам или работодателям. На страницах часто встречаются галереи, описания проектов и контактная информация.
(Ваш ответ)
2. Онлайн-платформа, на которой можно приобретать товары и услуги. На ней предусмотрены списки товаров, корзина и обработка платежей.
(Ваш ответ)
3. Платформа, на которой люди или организации делятся мнениями, советами, историями или новостями на определенные темы. Она регулярно обновляется, и на ней можно оставлять комментарии.
(Ваш ответ)
4. На этом сайте представлена актуальная информация о текущих событиях, аналитика и материалы на различные темы. Он может содержать статьи, видео и интервью.
(Ваш ответ)
5. Сайт, на котором люди могут общаться друг с другом и делиться контентом. Он поддерживает профили, публикацию контента и взаимодействие с сообществом.
(Ваш ответ)
6. Сайт с ресурсами, которые помогают получить новые знания или навыки. Может содержать обучающие материалы, курсы и проверку знаний в различных форматах (текст, видео и тесты).
(Ваш ответ)
Упражнение 2. Определите назначение сайтов
Кратко опишите основное назначение сайта каждого типа из упражнения 1. Подумайте, чем эти сайты полезны для пользователей и владельцев.
Пример:
А. Сайт электронной коммерции
Назначение: упрощает процесс покупок в интернете, позволяет приобретать товары и услуги, не выходя из дома, и дает возможность компаниям привлечь больше покупателей.
Ваши ответы (по каждому из типов):
Б. Сайт-портфолио
В. Блог
Г. Новостной сайт
Д. Социальная сеть
Е. Образовательный сайт
Упражнение 3. Создайте простую веб-страницу
Выберите один сайт из предыдущих упражнений и с помощью HTML сделайте для него простую веб-страницу. Не нужно создавать весь сайт, достаточно одной страницы, которая отобразит его суть.
Шаблон HTML, с которого можно начать2
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Название сайта</title>
</head>
<body>
<!-- Добавьте здесь содержимое страницы HTML, чтобы представить сайт выбранного типа-->
<h1>Добро пожаловать на мой сайт</h1>
<p>Простая страница для [сайта выбранного типа]...</p>
<!-- Здесь можно добавить другие элементы -->
</body>
</html>
Вместо фразы в квадратных скобках укажите тип выбранного сайта (блог, портфолио и т.д.) и добавьте заголовки, абзацы и изображения, соответствующие его назначению.
ОБЪЯСНЕНИЕ КОДА
• <!DOCTYPEhtml>. Сообщает браузеру, что это документ на языке HTML. Представьте, что здесь написано: «Это не обычный текст, а сайт!»
• <html>. Тег, обозначающий начало HTML-кода. Все, что находится внутри него, определяет структуру и содержимое сайта.
• lang="ru". Атрибут, определяющий язык страницы, в нашем случае — русский.
• <head>. Раздел со скрытой информацией о странице, например ее названием и кодировкой символов.
• metacharset="UTF-8". Сообщает браузеру, как интерпретировать символы на странице, и помогает отобразить ударения и другие знаки.
• <title>. Название, которое будет выводиться на вкладке браузера и в результатах поиска. В нашем примере текст временный, его нужно заменить на собственный вариант.
• <body>. Раздел, содержащий видимую часть сайта, с которой взаимодействуют пользователи.
• <h1>. Тег для создания заголовка, в нашем случае — большой текст «Добро пожаловать на мой сайт». Номера обозначают размер и уровень заголовка (h1, h2, h3 и т.д.).
• <p>. Тег для создания абзаца, в нашем случае — с новой строки сообщается тип сайта. Можно написать более длинный текст, состоящий из нескольких абзацев.
• <!---->. Комментарий, который скрыт от пользователей и виден только вам. Используйте его для заметок или напоминаний.
Что нужно запомнить
• Это только начало! Во время чтения книги вы научитесь добавлять другие элементы, в том числе изображения, кнопки и ссылки, и сможете создать уникальный сайт.
• Каждый элемент задается с помощью собственного тега, а атрибуты позволяют настроить его вид и поведение.
Упражнения помогут вам оценить разнообразие контента в интернете и понять, как этот контент структурирован и какими средствами представлен. Выполняя их, помните, что эта сфера не стоит на месте и специалистам нужно постоянно учиться и приспосабливаться к изменениям. Исследуйте, задавайте вопросы и разрабатывайте сайты. Чем больше практики, тем увереннее вы будете работать с необходимыми инструментами и языками.
1.4. Проект. Создание простого документа с описанием будущего сайта
Добро пожаловать в ваш первый проект на пути к захватывающему миру веб-разработки! У вас появилась уникальная возможность помечтать и составить план. Используйте полученные знания и представьте сайт, который вы хотели бы создать.
Упражнение поможет четко сформулировать цели и спланировать путь к личному блогу, портфолио или любому другому сайту. Давайте начнем с простого, но очень важного шага: создадим документ, в котором будет описан ваш замысел.
Шаг 1. Представьте свой сайт
Для начала подумайте, какой сайт вы хотели бы создать. Что вас интересует? Хотите ли вы показать свои хобби или профессиональные навыки? Может быть, есть нечто особенно важное для вас? Сайт поможет выразить любые интересы, стремления и ценности.
Шаг 2. Определите цель
Как только в голове появится идея, определите назначение сайта. Спросите себя, какой цели вы хотите добиться с его помощью. Может быть, поделиться знаниями, показать свою работу, взаимодействовать с сообществом или продавать товары? Если сразу определить назначение сайта, управлять проектированием и разработкой станет проще.
Шаг 3. Составьте черновик документа
Создайте новый документ на компьютере или просто возьмите лист бумаги. Для начала напишите заголовок: «Проект моего сайта». Затем добавьте следующие подзаголовки и под каждым из них дайте подробные объяснения.
• Идея сайта. Кратко опишите концепцию. О чем будет сайт?
• Назначение. Четко сформулируйте цель, с которой создается сайт. Чего вы хотите достичь или что готовы предложить пользователям?
• Целевая аудитория. Для кого вы создаете сайт? Опишите целевую аудиторию.
• Типы контента. Какие типы контента будут на вашем сайте? Вы можете добавить записи в блоге, списки товаров, галереи, обучающие материалы и т.д.
• Идеи для дизайна. Запишите любые идеи оформления или отметьте сайты, которые вас вдохновляют. Что вам в них нравится?
• Функции. Перечислите все функции, которые задумали для своего сайта. Это может быть форма для связи, галерея фотографий, интернет-магазин и т.д.
• Возможные трудности. Подумайте, какие трудности встретятся вам при создании этого сайта. Как их преодолеть?
Предлагаем простой шаблон для документа:
# Проект моего сайта
## Идея сайта
[Здесь должна быть ваша идея]
## Назначение
[Укажите цель создания сайта]
## Целевая аудитория
[Опишите целевую аудиторию]
## Типы контента
[Перечислите типы контента, которые планируете использовать]
## Идеи для дизайна
[Отметьте все идеи, включая цвета, макет или другие сайты]
## Функции
[Подробно опишите функции, которые хотите добавить]
## Возможные трудности
[Определите возможные трудности и то, как их преодолеть]
Шаг 4. Поразмышляйте и доработайте
Когда вы закончите документ, отложите его и подумайте о том, что написали. Увлекает ли вас идея этого сайта? Нужно ли что-то уточнить или описать подробнее? Дорабатывайте документ до тех пор, пока он не будет точно отражать ваш замысел.
Такой документ послужит путеводителем при создании сайта. По мере обучения он может меняться вместе с вашими идеями и планами. Но сейчас он станет важной отправной точкой и ключевым этапом для воплощения вашей задумки в жизнь.
Краткое содержание главы 1
Во вступительной главе мы познакомились с интернетом и основами веб-разработки. Интернет — это огромная сеть, которая объединяет весь земной шар и служит основой для любых веб-проектов. Данные в Сети перемещаются от одного компьютера к другому, а находят их с помощью уникальных идентификаторов, которые называют IP-адресами. Чтобы пользователю не приходилось запоминать идентификаторы, система DNS преобразует их в удобные для восприятия имена.
Основные инструменты веб-разработки — это HTML и CSS. HTML, язык гипертекстовой разметки, широко используется для создания структуры сайтов. Его элементы, например абзацы, заголовки и ссылки, помогают организовывать и форматировать контент в интернете. CSS, каскадные таблицы стилей, применяются совместно с HTML для оформления веб-страниц. Из примеров вы узнали, как с помощью CSS изменять цвета, шрифты и разметку, и поняли, что с помощью этого инструмента можно создавать привлекательные сайты.
Мы предложили упражнения, посвященные различным типам сайтов, их назначению и функциям. Так, в интернете встречаются блоги, портфолио, образовательные платформы, социальные сети и т.д. Выполнив эти упражнения, вы смогли расширить свое представление об интернете и найти идеи для будущих проектов.
Наконец, мы попросили вас представить и спланировать собственный сайт. Нужно было не только помечтать, но и заложить основы для осуществления своей мечты. Вы определили назначение сайта, его целевую аудиторию, типы контента и функции, а также подобрали интересные идеи для дизайна. Так вы начали путь к воплощению своего замысла в жизнь.
1 UX (User Experience) — пользовательский опыт; UX-дизайн — проектирование интерфейсов с учетом удобства пользователя. — Примеч. пер.
2 Обычно тексты для HTML-файлов создают в простых текстовых редакторах, например «Блокнот» в Windows. При сохранении такого файла (он должен иметь расширение html) не забудьте указать кодировку UTF-8, иначе русский текст не будет отображаться правильно. — Примеч. ред.
