Учебно-методическое пособие по теме "Разработка сайта на языке HTML"

Автор: Лужкова Инна Евгеньевна

СПбГБПОУ "Невский колледж им. А.Г. Неболсина", Санкт-Петербург

 

Ключевые слова: разработка сайта, HTML, теги.

 

Схема сайта:

1 страница:

а) Рассказ про улицу, на которой Вы живёте (или любую другую улицу СПб), минимум 3 абзаца – разный цвет, тип и размер шрифта.

б) Ссылка с переходом на отдельную страницу сайта с фото улицы

2 страница:

а) Текст про Ваш дом – любое количество и в любом формате

б) Изображение Вашего дома (или любого другого дома, на той улице, что Вы выбрали)

Выполнение работы:

Шаг 1.

В своей папке на компьютере создайте папку с названием «Сайт № 1».

Затем в этой папке создадим блокнот под именем index.html

Теперь откроем блокнот и наберём туда следующий текст:

Название улицы

Ваш текст про выбранную Вами улицу

(минимум 3 абзаца, с разным шрифтом по размеру, виду и цвету)

Сохраним этот документ (Сохранить, как).

Шаг 2.

Цвет фона устанавливается тэгом:

Синтаксис тега

Шаг 3

Color – параметр (атрибут) для тэга font, он отвечает, в данном случае, за цвет заключенного в тэг текста. Выберите произвольное цветовое оформление. Название и номер цвета смотрите в файле Color.

Синтаксис тега

Ваш текст (1 абзац)

Шаг 4

Параграфы и абзацы вводятся тэгами

Синтаксис тега

Текст

Синтаксис тега

текст

текст по центру

текст слева

текст справа

текст по ширине

Пример, который необходимо набрать в блокноте, под именем index.html и обязательно сохранить!! Затем посмотреть в браузере.

(Текст с биографией будет справа)

Изменение размера.

Текст

Шаг 5

Картинка в документ:

Расширение смотрим в свойствах картинки

Картинка должна находиться в папке, где находится Ваш блокнот. Это обязательное условие!

Расположение картинки - пример.

Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):

Шаг 6. Ссылка на отдельную страницу с фото.

Мы рассмотрим пример, где будет прямой переход на картинку №2 со страницы index.html с помощью тега: посмотреть фото моей улицы

Где фраза «посмотреть мои фотографии» будет являться ссылкой.

Шаг 7. Создание ссылки на 2 и т.д. страницу

В папке, где index.html, создаём index2.html

В блокноте index.html пишем ссылку текст: это получится переход на страницу 2, при нажатии на текст

Шаг 8. Создание кнопок–ссылок.

Данный тэг пишется внутри контейнера

Тэг имеет свои атрибуты, один из которых и отвечает за ссылки.

Атрибут action (HTML тега) определяет адрес, куда отправляется форма.

Синтаксис:

Вариант 1 – простая кнопка с переходом на другую страницу

Вариант 2 – кнопка с рисунком

Вариант 3 – размер кнопки

Вариант 4 – размер рисунка на кнопке

Справочник тегов HTML.

Предназначен для создания одной ячейки таблицы.

Создаёт ячейку в таблице, которая определяется как заголовок.

Обычно браузеры выравнивают содержимое ячейки/заголовка по центру и делают текст жирным.

 

Список литературы:

1. Цветкова М. С. Ц274 Информатика и ИКТ: учебник для нач. и сред проф. образования / М.С. Цветкова, Л.С.Великович. — 3-е изд., стер. — М.: Издательский центр «Академия», 2012. — 352 с., [8] л. цв. ил. ISBN 978-5-7695-9102-0.

2. Лоусон Б., Шарп Р. Л81 Изучаем HTML5. Библиотека специалиста. 2-е изд. — СПб.: Питер, 2012. — 304 с.: ил. ISBN 978-5-459-01156-2.  

3. Подробное руководство, 6-е изд. Авторы: Муссиано Ч., Кеннеди Б. Год: 2008 Издательство: СПб: Символ Плюс Язык: русский Страниц: 748.

4. Е.В. Михеева Информационные технологии в профессиональной деятельности: учеб. пособие для студ. сред. проф. образования / Е.В. Михеева. – 12-е изд., стер. – М.: Издательский центр «Академия», 2013. – 384 с.