Раздел 1. Язык гипертекстовой разметки HTML

Дисциплина направлена на формирование компетенций в соответствии с трудовыми функциями разработчика Web-сайтов. В курсе рассматриваются язык гипертекстовой разметки HTML.

Тема 1. Синтаксис языка HTML

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

Если развить идею гипертекста и включить в него графику, видео и звук, мы получим гипермедиа. Гипермедиа – среда, основанная, как и гипертекст, на взаимосвязях, в которой в качестве гиперссылок могут также выступать визуальные и аудиокомпоненты.

Одним из самых популярных сервисов Интернета наряду с электронной почтой является World Wide Web (WWW) – «всемирная паутина». Это название достаточно точно определяет суть сервиса. WWW – гигантская сеть страниц (документов), связанных между собой гипертекстовыми ссылками, что действительно очень напоминает своими колоссальными размерами и структурой паутину (web), протянувшуюся по всему миру.

Работа этой «паутины», созданной в конце 80-х гг. Тимом Бернерсом-Ли в CERN (Европейская организация по ядерным исследованиям, Женева), основывается на трех «китах»:

• язык гипертекстовой разметки документов (HTML – HyperText Markup Language);
• протокол обмена гипертекстовой информацией (HTTP – HyperText Transfer Protocol);
• универсальный определитель местонахождения ресурса (URL) а также на программном обеспечении – web-серверы и браузеры.

Тема 2. Теги HTML

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

Тема 3. Верстка страницы

Верстка сайта — это структурированное сочетание изображений, заголовков, подзаголовков, таблиц, инфографик, текста и других элементов на странице c помощью языка разметки HTML и языка описания внешнего вида страницы CSS.

Написанием HTML-кода верстка сайта не ограничивается. Вот еще несколько процессов, которыми занимается верстальщик:

• извлечение изображений, иконок и других графических материалов из макета, их компоновка и сортировка по папкам;
• сбор желаемых шрифтов и настройка их корректного отображения;
• написание CSS-кода для проработки дизайна страницы (об этом расскажем ниже);
• подключение JS-библиотек для создания динамических элементов;
• тестирование и валидация верстки.