Тимур Машнин - Введение в веб-разработку с HTML, CSS, JavaScript

Введение в веб-разработку с HTML, CSS, JavaScript
Название: Введение в веб-разработку с HTML, CSS, JavaScript
Автор:
Жанры: Программы | Интернет | Программирование
Серии: Нет данных
ISBN: Нет данных
Год: 2023
О чем книга "Введение в веб-разработку с HTML, CSS, JavaScript"

Изучите основы веб-разработки, создавая веб-страницы с помощью HTML, CSS и JavaScript. С этой книгой Вы научитесь использовать HTML для создания веб-страницы с абзацами, divs, изображениями, ссылками и списками, добавлять стили на веб-страницу с помощью идентификаторов и классов CSS, делать веб-страницу интерактивной с помощью команд JavaScript. Вы узнаете как создать веб-страницу, которая будет так же удобна на мобильном телефоне, как и на настольном компьютере. Научитесь работать с объектной моделью документа DOM и узнаете что такое фронтенд и бэкенд разработка.

Бесплатно читать онлайн Введение в веб-разработку с HTML, CSS, JavaScript


Начало работы

Для начала работы с веб-проектами необходимо настроить среду разработки.

Какие инструменты составляют среду разработки?

Во-первых, для веб-разработки можно использовать браузер Google Chrome.

Браузер Google Chrome уже поставляется с инструментами CDT, Chrome Developer Tools.



Далее нам нужен редактор кода.

И в качестве редактора кода можно использовать редактор Sublime Text 3.



Sublime чрезвычайно быстр и очень хорошо поддерживается с точки зрения сторонних плагинов.

Для установки редактора Sublime в интернете можно найти дитрибутив в том числе и портативной версии.

Нам также понадобится Git.



Git – это система управления версиями, с помощью которой можно хранить информацию о всех изменениях в вашем коде в репозитории.

Репозиторий Git – это место, где хранится ваш код и вся информация о его изменениях.

Репозитории могут находиться локально у вас на компьютере или на удалённом компьютере.



Для установки Git скачаем и запустим дистрибутив, и далее будем следовать инструкциям.



Также мы можем использовать инструмент под названием Browser Sync.

Browsersync – это модуль Node.js.

Node.js – это среда выполнения приложений JavaScript, которая выполняет код JavaScript вне веб-браузера.

И Browsersync обеспечивает синхронизированное тестирование веб приложений в браузере.

Browsersync создает сервер по адресу http://localhost:3000/ и наблюдает за изменениями файлов веб приложения. И когда файлы изменяются, Browsersync автоматически перезагружает браузер и мгновенно показывает эти изменения.

Таким образом экономится наше время на обновление браузера во время разработки веб приложения.

И чтобы установить Browser Sync, нам нужно установить Node.js.



Для этого скачаем и запустим дистрибутив Node.js, и далее будем следовать инструкциям.



Далее установим Browsersync.

Если вы хотите запускать Browsersync из командной строки в любом каталоге, его можно установить глобально с помощью выше показанной команды в терминале командной строки.

Здесь NPM (Node Package Manager) – это менеджер пакетов Node.js. И NPM устанавливается вместе с Node.js.



Теперь можно запускать файлы проекта веб-приложения с помощью Browsersync.

Для этого нужно открыть терминал и ввести выше показанную команду.

Эта команда запускает локальный сервер по адресу http://localhost:3000, открывает и проверяет изменения файла index.html.

Можно также запустить сервер Browsersync для каталога приложения, отслеживая все его файлы.

Введение в HTML

Итак, что же такое HTML? Что вообще означает термин HTML и как он связан с Интернетом?



HTML – это язык гипертекстовой разметки. И давайте рассмотрим каждое из этих слов и выясним, что именно они означают.

Во-первых, гипертекст. И гипертекст – это текст, который содержит ссылки на другие тексты, и так, по сути, устроена вся сеть Интернет. Один документ указывает на другой документ, который указывает на кучу других документов, и так далее.



Следующий термин – разметка. И разметка означает пометить что-то, аннотировать, т.е. добавить аннотацию.

Например, если у вас есть какой-то контент, например, если у вас есть HTML документ, и вы хотите аннотировать его, чтобы сообщить браузеру, что это за контент и что делает этот HTML документ, вы обертываете этот контент в язык разметки, состоящий из тегов.

Например, тег title, заголовок, сообщает нам и другому программному обеспечению, что это название этого документа.

Таким образом, теги описывают структуру документа.

И последнее слово – это язык, а язык подразумевает, что у него есть собственный синтаксис, означающий, что есть правильный и неправильный способ кодирования.



Так, например, в этом примере закрывающий тег div появляется после закрывающего тега h1, что является синтаксической ошибкой.

Теперь, на самом деле Интернет основывается на трех базовых технологиях HTML, CSS, и JavaScript.

HTML, как мы уже выяснили, описывает структуру документа.

Например, документ может иметь один заголовок, два абзаца и нижний колонтитул.

И обратите внимание, что это ничего не говорит о том, как эти компоненты визуально расположены, как они выглядят, какого они цвета и какой при этом размер шрифта.

Цвет и стиль – это роль CSS.



Язык Cascading Style Sheets (CSS) определяет цвет, макет, стиль шрифта, размер шрифта, другими словами стиль документа.

И кроме HTML и CSS, есть еще язык JavaScript, работа которого заключается в обеспечении поведения или функциональности документа.

JavaScript добавляет функциональность странице, например, что происходит, когда пользователь нажимает на заголовок документа.

Теперь, как появился HTML?

До 1997 года не существовало никаких стандартов Интернета, и браузеры делали все, что хотели. Они изобретали новые теги и по-разному реализовывали одни и те же теги.

И вы могли зайти на веб-сайт и получить сообщение о том, что ваш браузер несовместим с этим веб-сайтом, поэтому вам нужно перейти на другой браузер.

И примерно в 1997 году Консорциум World Wide Web, W3C, придумал первый стандарт для браузеров, это был HTML4, и они очень быстро обновили его до HTML4.01.



Этот стандарт был довольно свободным, и у браузеров было слишком много свободы действий внутри этого стандарта в отношении того, как его реализовывать и как отображать страницы.

Поэтому, примерно в 2000 году W3C предложил другую спецификацию под названием XHTML 1.0, и эта спецификация была основана на языке разметки XML. И W3C хотели продолжить работу, создав XHTML 2.0.

Но проблема была в том, что поставщики браузеров решили, что работа W3C продвигается слишком медленно, и, кроме того, они считали, что спецификации W3C движутся в неправильном направлении.

Поэтому, производители браузеров объединились и создали еще одну группу разработки спецификаций, которая называлась WHATWG, группа технологий веб-гипертекстовых приложений.

И эта группа была гораздо менее демократична, чем W3C, так как там есть один главный редактор, который принимает окончательные решения, поэтому все представители поставщиков браузеров могут спорить сколько угодно, но в конце концов назначенный редактор принимает окончательные решения.

И в течение долгого времени эти две организации не сходились во взглядах и не работали вместе, так что они действительно шли в двух разных направлениях. Но в конце концов, примерно в 2007, 2009 годах, WHATWG и W3C начали совместную работу, и создали то, что мы имеем сейчас, стандарт HTML5.



Теперь, W3C отвечает за стандарты, а WHATWG отвечает за реализацию стандартов браузерами.

И чтобы узнать, будет ли ваш HTML работать в браузерах, вы можете использовать валидатор, который есть на веб-сайте W3.org.



Здесь вы можете проверить свой код HTML, является ли он действительным и будет ли он хорошо работать в браузере.


С этой книгой читают
Python является наиболее популярным языком программирования, используемым для объектно-ориентированного программирования. И конечно, Python – это интерактивный язык программирования, который предоставляет широкий спектр возможностей для создания GUI (Graphical User Interface) и разработки настольных приложений. В этой книге вы познакомитесь с различными фреймворками Python для создания настольных приложений с графическим интерфейсом пользователя,
Эта книга познакомит с практическим использованием языка MetaQuotes Language 5 (MQL5) программирования технических индикаторов, торговых роботов и вспомогательных приложений для автоматизации торговли на финансовых рынках с помощью торговой платформы MetaTrader 5.Вы научитесь создавать MQL5 приложения, используя как процедурное программирование, так и объектно-ориентированное программирование.Познакомитесь с общей структурой и свойствами техничес
Apache Hadoop – это платформа для распределенной обработки больших наборов данных на кластерах компьютеров с использованием простых моделей программирования. В этой книге вы познакомитесь с общей архитектурой платформы, компонентами стека, такими как HDFS и MapReduce, приложениями Hadoop.
Хотите понять, как основные поисковые системы ранжируют Ваш сайт в своих результатах поиска и как привлечь трафик? Научитесь поисковой оптимизации SEO.С этой книгой Вы познакомитесь с основными элементами поисковой оптимизации и изучите основные стратегии и тактики SEO для продвижения веб-сайтов, а также тактики, которых следует избегать, чтобы предотвратить наказание со стороны поисковых систем.Вы узнаете, как создать эффективную стратегию SEO и
Если вам наскучило работать в Интернете только с помощью Internet Explorer и забирать почту, только используя Outlook Express, если вы хотите узнать, какие еще программы, кроме ICQ, помогают общаться в Сети, если вы чувствуете, что для работы в Интернете вам еще что-то нужно, но не знаете что, то вам стоит заглянуть в эту книгу. Здесь рассмотрены самые разные программы, помогающие выполнять различные задачи в Интернете: альтернативные браузеры и
В книге рассказывается об известной немецкой разработке – программе ArCon, предназначенной для быстрого моделирования жилых зданий и оформления их интерьера и экстерьера. Программа достаточно проста в использовании, не требует практически никаких навыков трехмерного моделирования, однако позволяет создавать дизайнерские проекты, которые почти ничем не уступают разработанным в 3ds Max или Maya.Книга содержит подробное описание функционала последне
Эта книга поможет вам разобраться в премудростях Microsoft Excel 2007.Информационная насыщенность учебного материала позволяет утверждать, что мультимедийный курс будет интересен и новичкам, и опытным пользователям, которые уже владеют основными навыками работы в Excel и стремятся к достижению профессиональных результатов в своей работе.
Telegram-бот. Создание и Монетизация – практическое руководство для всех, кто хочет создать успешного Telegram-бота, способного привлекать и удерживать пользователей, а также приносить стабильный доход. В книге подробно рассмотрены все ключевые этапы: от разработки и настройки первых команд до монетизации через рекламу, подписки, партнерские программы и донаты. Вы узнаете, как грамотно продвигать бот, взаимодействовать с аудиторией, получать обра
Всё начинается с морского приключения на суше, где невменяемые сюжетные дороги запутываются в кольцо. Горящая ратуша становится предвестником критических событий в маленьком городке. Девушка находит в поле труп каждое новое утро. Отец отшельник пытается воспитать детей, находясь не в своём уме. Насколько бочка соевой простокваши опасна в окружении идиотов? Сражение между сыщиком и преступником выходят из рамок времени и материи. Молодой риэлтер о
Он получил признание лишь в конце своей жизни. Его работы подвергались безжалостной и язвительной критике. Всю свою жизнь он пытался доказать всем и, в первую очередь самому себе, что его картины вправе называться произведениями искусства. Кто помнит сегодня имена его злопыхателей и завистников? Зато имя Поля Сезанна известно каждому образованному человеку, а его полотна украшают лучшие музеи и частные коллекции мира. Мечта художника сбылась, пус
«Хорошо, давай будем спать, – повторял он, теряя терпение, и она соглашалась, после чего ложилась на подушку рядом с Олегом, а через пару минут он слышал её спокойное ровное дыхание и не понимал, она правда спит, или только притворяется.»Рассказ ранее был опубликован в повести «Юлькина честь».
Нон-фикшн. Десятилетний роман, в котором автор прошла все стадии от безусловного обожания до полного безразличия. Любовная история, знакомая большинству.