Практическая работа № 2

ПРАКТИЧЕСКАЯ РАБОТА № 1

Основы языка HTML

Цель: Изучить основные возможности языка HTML для создания и связывания web-документов.

Инструментарий:

1) Любой редактор программного кода, например, notepad++, который можно бесплатно скачать с сайта разработчика по адресу https://notepad-plus-plus.org/downloads/

2) Любой современный браузер

ЗАДАНИЯ

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

По аналогии реализовать свой сайт, используя только возможности языка HTML, на любую интересующую Вас тему. Меню вашего сайта должно быть вертикальным. Необходимо задействовать все известные вам типы тегов: заголовки, абзацы, списки, изображения, таблицы, формы.

Выполнение задания 1:

Шаг 1. Создадим главную страницу сайта.

На этом шаге мы показываем реализацию в среде Notepad++. Следующие шаги описываются только кодами страниц, которые Вы также должны вводить и отлаживать в Notepad++.

Итак, в среде Notepad++ создадим новый документ и сохраним его в отдельной папке под именем index.html.

Введем следующий текст:

<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Сайт туристической компании </title> </head> <body> <div id="content"> <header> <h1> ПУТЕШЕСТВУЙ С НАМИ! </h1> </header> <nav> <a href="index.html"> Главная страница </a> <a href="turs.html"> Наши туры </a> <a href="contacts.html"> О нас </a> </nav> <div id="main"> <p> Концепция отдыха с нашей компанией - это отдых в новом формате, где учтены интересы всех поколений </p> <p> Наши основные направления: <ul> <li>Турция,</li> <li>Египет, </li> <li>Таиланд</li> </ul> </p> <p> Акции и скидки </p> </div> <footer> Это сайт, предназначенный для обучения </footer> </div> </body> </html>

Если открыть этот файл в любом из браузеров, должен получиться примерно такой результат:

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

В область <head>…</head> необходимо добавить следующий код:

<!--Начало описания стилей--!> /*--Описание стиля всей страницы--*/ /*—Ширина- 80% от всего экрана--*/ /*—Рамка отсутствует--*/ /*—Выравнивание по центру занимаемой области--*/ /*—Описание стиля заголовка и подвала --!> /*— Отступ текста от края блока – 1em - текущий размер шрифта, для увеличения или уменьшения можно брать любые пропорции от текущего:2em,0.5em; --*/ /*—Цвет шрифта-белый --*/ /*—Цвет фона --*/ /*— Отменяет обтекание с левого края элемента, все другие элементы на этой стороне будут располагаться под текущим элементом --*/ /*—Выравнивание текста по центру --*/ /*—Описание стиля блока меню --*/ /*—Высота блока в пикселях --*/ /*—Ширина и цвет линии обрамления --*/ /*—Описание стиля ссылки в меню --!> /*—Для ссылок используется оформление по умолчанию--*/ /*—Описание стиля основного блока страницы --*/

Результат просмотра этих изменений в браузере:

Шаг 3. Добавим оформление к элементам главной страницы.

В папке, содержащей наш файл index.html создадим папку img для хранения картинок, которые будут использоваться на сайте.

Скопируем в нее картиноку по тематике сайта, и, пусть, например, она имеет имя logo.jpg.

Поместим картинку logo.jpg слева от заголовка сайта. Для этого в блоке <header>…</header> нужно создать два блока – один для вывода логотипа, другой – для названия. Соответствующие изменения нужно внести в описание стилей.

Изменения в структуре:

<header> <div id="logo"> <img src="img/logo.jpg"> </div> <div id="name"> <h1>ПУТЕШЕСТВУЙ С НАМИ!</h1> </div> </header>

Добавление к стилям:

div#logo img{ width:200px; height:150px; float:left; }

/*—для тега img, который размещен в блоке с идентификатором logo: ширина- 200 пикселей, высота- 150 пикселей, прижать к левой части родительского блока и заставить следующий блок обтекать его справа--*/

В результате получим:

Шаг 4. Создайте две копии полученной страницы в той же папке, и дайте им имена turs.html и contacts.html. Именно так, если вы помните, называются файлы, на которые уже имеются ссылки в нашем меню. Теперь, для поддержания общей структуры и оформления сайта мы будем изменять только содержимое страницы, которое размещается внутри блока с идентификатором main.

Шаг 5. На второй странице с именем turs.html создадим таблицу, содержащую список туров. Это можно было бы сделать с использованием блоков div, но иногда полезно применять таблицы, и, мы потренируемся делать это. Итак, пусть необходимо создать таблицу, содержащую три строки с названиями туров, каждая из которых содержит также фото и еще две строки с названиями отелей.

В блок main поместим следующий код:

<div id="main"> <table id="tours"> <tr> <td rowspan=2>Туры в Египет</td> <td>Отель "RESORT"</td> </tr> <tr> <td>Отель "NewWave"</td> </tr> <tr> <td rowspan=2>Туры в Таиланд</td> <td>Отель "RESORT"</td> <tr> <td>Отель "NewWave"</td> </tr> <tr> <td rowspan=2>Туры в Турцию</td> <td>Отель "RESORT"</td> <tr> <td>Отель "NewWave"</td> </tr> </table> </div>

…

Добавим стили для таблицы:

table#tours{ width:80%; margin:auto; } table#tours td{ text-align: left; border: 2px solid red; }

/*—Для всей таблицы:--*/ /*—Ширина 80% от ширины родительского блока--*/ /*—Выравнивание по центру--*/ /*—Для отдельной ячейки таблицы:--*/ /*—Текст выровнен по левому краю--*/ /*—Сплошная красная рамка толщиной 2 пикселя--*/

Получим:

Шаг 6. На примере страницы contacts.html продемонстрируем использование форм. Пусть на третьей странице сайта необходимо создать форму для обращение от пользователя к администратору сайта.

Лоя более аккуратного вывода форму можно также разместить в виде таблицы. Для этого в блок main третьей страницы добавим следующий код:

<p> Наш адрес: г. Белогорск, ул. Ракетная, 18 </p> <p>Для связи с нами заполните форму: </p> <form method="get" action="#"> <table id="form"> <tr> <td>Введите свое имя</td> <td><input name="name"></td> </tr> <tr> <td>Введите ваш номер телефона </td> <td><input name="tel"></td> </tr> <tr> <td>Введите ваш электронный адрес</td> <td><input name="mail"></td> </tr> <tr> <td>Введите Ваше сообщение</td> <td> <textarea name="text" rows="3"> </textarea> </td> </tr> <tr> <td colspan=2> <input name="otp" type="submit" value="Отправить"> </td> </tr> </table>