Создание сайта на HTML5

---

Урок 2. Создание главной страницы сайта

Цель: ознакомиться с редактированием текста, а так же добавлять видео на страницу.
Задачи:

– Научиться добавлять текст на вебстраницу.
– Научиться форматировать текст.
– Научиться добавлять списки.
– Научиться добавлять видоеконтент на страницу.

В результате выполнения данного урока у вас должна получиться такая веб-страница (рисунок 2.1):

2.1 - Предварительный просмотр веб-страницы

Создание главной страницы.

В первом уроке вами была создана страница с дизайном сайта, в начале второго урока вы создадите страницу index.html, которая будет являться главной страницей сайта.

В этом упражнении вы создадите главную веб-страницу.

– Запустите Visual Studio Code. Автоматически должен открыться ваш проект. Если этого не произошло, то воспользуйтесь первым уроком и откройте проект.
– Кликните на файл design.html правой кнопкой мыши и выберите пункт «Копировать».
– Кликните правой кнопкой мыши в пустой области под файлом design.html и выберите в открывшемся меню пункт «Вставить».
– Кликните на появившийся файл design copy.html правой кнопкой мыши и выберите в открывшемся меню пункт «Переименовать».
– Задайте имя файла index.html и нажмите кнопку «Enter».

В результате выполнения всех пунктов упражнения у вас должен появиться в списке файлов, файл index.html, а так же он должен быть открыт в рабочей области Visual Studio Code (рисунок 2.2).

2.2 - Результат создания файла index.html

Оформление главной страницы.

В этом упражнении вы укажите, что index.html это главная страница сайта.

– Перейдите в рабочую область Visual Studio Code.
– Переместите курсор мыши к тегу Title.
– Добавьте через тире к тексту ЮК Советник текст «Главная страница» (рисунок 2.3).

2.3 - Главная страница в теге Title

Добавления абзаца на страницу.

HTML текст представлен в спецификации тегами для форматирования и группировки текста. Теги представляют собой контейнеры для текста и не имеют визуального отображения.

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

– Выберите файл index.html.
– Кликните на строку с текстом "Контент"(рисунок 2.4).

2.4 - Область main-content

– С помощью файлового менеджера откройте папку work_files, а ней папку txt.
– С помощью текстового редактора откройте файл index.txt (рисунок 2.5).

2.5 - Файл index.txt

– Выделите мышью первый абзац, кликните правой кнопки мыши и выберите в открывшемся меню пункт "Копировать".
– Перейдите в Visual Studio Code и удалив слово "Контент" кликните правой кнопкой мышью между тегами <p>, </p>. В появившемся меню выберите пункт "Вставить".
– В конце предложений вставьте тег переноса на новую строку <br/> (рисунок 2.6).

2.6 - Вставка текста и тега переноса строки

В результате выполнения упражнения вы получили страницу с абзацем (рисунок 2.7).

2.7 - Абзац на странице

Добавления списка на страницу.

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

– Выберите файл index.html.
– Кликните на конец абзаца (на тэг </p>) и нажмите "Enter".
– Для добавления ненумерованного списка добавьте теги <ul> и </ul>.
– Для добавления одного пункта списка добавьте между предедыщими тегами, теги <li> и </li>.
– Каждый отдельный пункт списка находится между тегами <li> и </li>.
– Заполните список из файла index.txt согласно рисунку 2.8.

2.8 - Создание списка

В результате выполнения упражнений вы получили страницу с абзацем и списком (рисунок 2.9).

2.9 - Абзац и список.

Повторив упражнения на добавление абзаца и списка, добавьте второй, третий абзац и второй список из файла index.txt (рисунок 2.10).

2.10 - Главная страница. Три абзаца и два списка

Добавления видеоконтента на страницу.

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

– Выберите файл index.html.
– Кликните на строку ниже <section id="main-content">
– Для выравнивания видеоконтента по середине введите текст: <div class="center"></div>
– Для добавления видео добавьте теги <video> и </video>
– Введите между этими тегами фразу Ваш браузер не поддерживает HTML5.
– Для добавления видео перейдите к тегу видео и введите атрибут src, указав путь до файла video/present.mp4 (рисунок 2.11).

2.11 - Добавление видео

– Для того, чтобы дать пользователю право управлять воспроизведением видео, добавьте атрибут Controls.
– Видео занимает слишком большую площадь экрана, потому добавьте атрибут width и его парраметр 50% (рисунок 2.12).

2.12 - Код добавления видеоконтента

В результате выполнения всех упражнений у вас получилась главная страница сайта, на которой есть абзацы текста, ненумированные списки, а так же видеоконтент (рисунок 2.13).

2.13 - Главная страница сайта

Контрольные вопросы

1. Какой тег используется для вставки абзацев?
2. Какой тег используется для вставки списков?
3. Какой тег используется для вставки видеоконтента?
4. Какой атрибут используется для добавления кнопок контроля в теге добавления видеоконтента?
5. Какой атрибут используется для изменения размера отображения видеоплеера в теге добавления видеоконтента?