Урок 1. Магия браузера. | Основы веб-разработки.

Данная инструкция для обучения основам html прендазначено для людей с некоторой степенью владения компютером и интернетом. Программирование в данном случае не используется.

1. File.html;
2. Html-разметка;
3. Css-стили;
4. Подключить файл css к html-странице;
5. Javascript, как он работает в браузере по умолчанию;
6. Подключить js файл к html-странице;

Создадим папку site, в ней создадим файл и назовём его file.html.

Теперь откроем этот файл в простом тесктовом редакторе. 
И напишем "Эй, привет!"

Сохраним файл.

Затем откроем этот файл через браузер. 

Бинго! 

Мы с помощью браузера можем читать простой текст!

Добавить разметку

Добавим html-разметку в наш файл:

Что такое HTML разметка?

HTML (HyperText Markup Language) разметка используется для создания и структурирования содержимого веб-страниц.

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

HTML разметка это набор тегов, которые описывают содержание веб-страницы.

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


Зачем нужна HTML разметка

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

2. SEO оптимизация: Правильная HTML разметка помогает поисковым системам индексировать и ранжировать веб-страницы, что улучшает видимость сайта в поисковых результатах.

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

4. Модульность и повторное использование: HTML разметка делает возможным создание шаблонов и компонентов, которые можно повторно использовать на разных страницах сайта, что упрощает процесс разработки и поддержки веб-сайтов.

HTML разметка является основой веб-разработки, обеспечивая структурирование и форматирование контента для веб-страниц. Без неё создание и поддержка удобных и функциональных сайтов было бы невозможно.

Основные функции HTML разметки

1. Структурирование контента: HTML позволяет структурировать контент, создавая заголовки, абзацы, списки, таблицы и другие элементы. Это помогает организовать информацию на странице и сделать её более читабельной.

2. Форматирование текста: HTML используется для форматирования текста, например, для выделения жирным шрифтом, курсивом, подчеркивания и создания ссылок.

3. Встраивание медиафайлов: С помощью HTML можно встраивать изображения, видео, аудио и другие мультимедийные элементы на веб-страницу.

4. Создание гиперссылок: HTML позволяет создавать гиперссылки, которые связывают разные страницы или участки одной страницы. Это основа навигации в интернете.

5. Формы и ввод данных: HTML предоставляет теги для создания форм, которые позволяют пользователям вводить данные (например, текстовые поля, кнопки, выпадающие списки).

Добавим в html-разметку теги 

Дополним наш site/file.html тегами h1, form, checkbox, button

Список всех тегов на странице. Их не так много, из них часто используютсяиспользуются следующие:

 

• h1, h2, h3... - заголовки
• p - paragraph, параграфы
• form
• input
• textarea
• button
• select
• img
• table
• div

Теги могут быть как элементы для ввода данных пользователя, так и теги функциональные, такие как выпадающие списки, календарь проверка на email, password и другие 

CSS

CSS расшифровываются как "каскадные таблицы стилей", и с помощью них определяется внешний вид, стиль ваших html элементов. Сейчас я не буду особо останавливаться на "стилях", покажу только саму концепцию.

Стили для элемента можно задать через атрибут styles этого элемента, например сделать фон кнопки красным:

Теперь мы создадим секцию style, где определим все наши стили:

• Зададим форме границу черного цвета и шириной 1px, установим внутренний отступ в 5px, обращаясь к форме по тегу form; 
• Тегу select присвоим класс с именем "my-choise", и зададим цвет текста синим и стиль написания сделаем жирным;
• Кнопке присвоим id с каким-нибудь названием и перенесем background-color также в секцию style.

Подключение файла стилей

Также стили можно (предпочтительно) подключить к html-странице, и хранить их в отдельном файле .css. Для этого создадим в папке site файл с названием my-styles.css и уберем наши стили туда:

Теперь подключим наш css к нашей html странице:

Как видите, всё продолжает работать, но код теперь выглядит более привычным и удобным для разработки. В коде страницы можно увидеть тег link, с помощью которого мы подключили файл css, а также весь код, который мы написали.

Javascript

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

Про JS в этой статье расскажу только то, что он работает прямиком из браузера. То есть нам ничего подключать даже не нужно. Просто берем и используем Javascript, только js-код нужно поместить в теги script

Таким образом, используя JS, мы можем взаимодействовать с элементами на странице, с формами, отправлять запросы на сервер и т.д.. А также JS позволяет делать страницы более живыми и удобными для пользователя.

Подключить js-файл к html-странице.

Часто не удобно когда весь код написан в одном месте и разработчики стараются отделить одно от другого, поэтому наш js-код желательно вынести в отдельный файл, а сам файл просто подключить к странице. Создадим файл my-script.js и откроем его в текстовом блокноте

Подключим наш скрипт на html-странице 

Вот что нам покажет браузер

Это говорит нам о том, что js-файл подключен корректно и все работает как ожидается.

Также стоит упомянуть, что мы можем программировать на языке JavaScript прямо в браузере:

По сути, мы только что создали стандартную html страницу, осталось только подгрузить  туда нужные нам данные и отобразить их для пользователя. У нас есть html элементы, у нас есть css-стили, у нас есть js-файл. У нас нет ещё базы данных и какого-то сервера, но я думаю этого никто не заметит))