ТОР 5 статей:
Методические подходы к анализу финансового состояния предприятия
Проблема периодизации русской литературы ХХ века. Краткая характеристика второй половины ХХ века
Характеристика шлифовальных кругов и ее маркировка
Служебные части речи. Предлог. Союз. Частицы
КАТЕГОРИИ:
- Археология
- Архитектура
- Астрономия
- Аудит
- Биология
- Ботаника
- Бухгалтерский учёт
- Войное дело
- Генетика
- География
- Геология
- Дизайн
- Искусство
- История
- Кино
- Кулинария
- Культура
- Литература
- Математика
- Медицина
- Металлургия
- Мифология
- Музыка
- Психология
- Религия
- Спорт
- Строительство
- Техника
- Транспорт
- Туризм
- Усадьба
- Физика
- Фотография
- Химия
- Экология
- Электричество
- Электроника
- Энергетика
Практическая работа. Тема: Методы и средства создания и сопровождения сайта
Тема: Методы и средства создания и сопровождения сайта
Цель: освоение приемов создания web-страниц и web-сайтов на языке HTML: знакомство с элементами и структурой htrnl-документа; управление форматами текста и шрифтами; организация гиперсвязей между документами.
Оборудование: ПК, блокнот
Литература:
- Основные источники:
1. Колмыкова Е.А., Кумскова И.А. Информатика, ОИЦ «Академия», 2012
2. Астафьева Г.Е., Гаврилова С.А., Цветкова М.С. (под ред. Цветковой М.С.) Информатика и ИКТ. Практикум для профессий и специальностей технического и социально-экономического профилей, ОИЦ «Академия», 2013.
3. Цветкова М.С. Великович Л.С. Информатика и ИКТ., ОИЦ «Академия», 2013
- Дополнительные источники:
1. Е.П. Жукова, Е.Г. Бурда «Информатика», Академцентр,2010
2. Т.И. Немцова, Ю.В. Назарова «Практикум по информатике», Форум, 2009
3. С.В. Беседина «Информатика», Учебно-методическое пособие, Издательско-полиграфический центр Воронежского государственного университета 2009 - http://www.edu.ru/
4. Р.Р. Толстяков, Т.Ю. Забавикова, Т.В. Попова «Информатика», ФГБОУВПО «ТГТУ», 2011 - http://www.edu.ru/
Ход работы:
1. Ознакомиться с теоретической частью
2. Выполнить практическую часть.
3. Оформить отчет по работе.
4. Ответить на вопросы.
5. Показать преподавателю, выполненную работу.
Теоретическая часть.
Интернет - это сложная электронная информационная структура, представляющая собой глобальную сеть, которая позволяет связывать между
собой компьютеры в любой точке земного шара.
WWW - World Wide Web («Всемирная паутина») - это общемировая гипертекстовая информационная система (является частью Интернета).
Web - страница - это отдельный комбинированный документ сети WWW, который может содержать текст, графику, анимацию, звуковые и другие объекты. Хранится в файле *.html.
Сайт (веб-сайт, ресурс) - это место в интернете, которое определяется своим адресом (URL), имеет своего владельца и состоит из веб-страниц, которые воспринимаются как единое целое.
Пример структуры сайта
|
Создание сайтов - составной процесс, состоящий из нескольких этапов:
1. разработка дизайна,
2. вёрстка,
3. программирование,
4. безопасность.
Сопровождение сайтов:
§ это техническая поддержка сайта;
§ помощь в обновлении контента;
§ внесение корректировок в работу ресурса.
Методы создания и сопровождения сайтов:
о вручную на языке HTML (в БЛОКНОТе);
о с помощью редакторов сайтов (HEFS, DreamWeaver и др.);
о с помощью Конструктора сайтов на основе готового шаблона (ucoz.ru, narod.ru и др.);
о с помощью систем управления сайтов (Joomla, 1C Битрикс и др.).
Этапы создания WEB-страницы:
• Разработка проекта (Постановка задачи);
• Главная тема страницы.
• Текстовое содержание (грамотный язык).
• Планировка размещения информации на странице (верстка).
• Графика (набор рисунков, анимации).
• Стиль дизайна (сочетания цветов, фоны и т. п.)
• Алгоритм заполнения страницы.
• Программирование.
Программа для WEB-страницы записывается на языке HTML в виде текстовых файлов в текстовом редакторе Блокнот.
Эти файлы имеют название имя.html
Операторы (команды) языка HTML называются тегами. Общий вид записи тега:
<Тег>Фрагмент страницы </Тег>
Базисные теги
<HTML> </HTML> - начало и конец файла
<TITLE> </TITLE> - имя документа (должно быть в заголовке)
<HEAD> </HEAD>- голова документа
<BODY></BODY> - тело документа
Пример программы:
<HTML>
<HEAD>
<title> Моя страница </title>
</HEAD>
<BODY>
Содержимое страницы </BODY>
</HTML>
Атрибуты
Атрибуты элемента определяют его свойства. Значение атрибута может быть заключено в одинарные или двойные кавычки. Порядок следования атрибутов в теге не важен. Атрибут действует от открывающего тега, в котором он задан, до закрывающего, или только внутри тега, если тег не имеет парного.
Тэги и их атрибуты
| Атрибут | Действие |
| <FONT COLOR=’’цвет” size=“число от 1 до 7” FАСЕ=“шрифт”> | Меняет цвет, Размер, гарнитуру шрифта текста |
| <BODY TEXT=’color” BGCOLOR="цвет”> | Меняет цвет всего текста Цвет фона страницы |
| <BODY BACKGROUND="URL"> | Добавляет фоновую картинку (графический файл формата *.jpg, *.gif) j |
| <IMG SRC=’файл” ALIGN=”значение”> | вставка графического изображения |
|
Таблица цветов
Практическая часть
Задание 1. Создайте с помощью языка HTML в БЛОКНОТЕ web-сайт «Мой сайт», состоящий из пяти страниц:
Страница 1 должна содержать:
• заголовок;
• гиперссылки: «Обо мне», «Моя семья», «Друзья», «Мои увлечения». Страницы 2, 3, 4 и 5 должны содержать:
• заголовок;
• по два или более отформатированных абзаца текста (один абзац не менее трех полных строк);
• фотографии (минимум по одной на каждой странице).
Сайт должен содержать информацию о вас, а также ваших родственниках, друзьях и т.п.
Требования к сайту:
• заголовки и гиперссылки выравнивать по центру;
• для абзацев текста использовать различные варианты выравнивания (по ширине, по левому краю, по правому краю);
• использовать разные способы выравнивания фотографий;
• обязателен фоновый цвет страницы;
• на каждой странице должен быть заголовок окна;
• для заголовков использовать шрифт Time New Roman, для основного текста - Arial (размеры подобрать самостоятельно).
Задание 2. Протестируйте работоспособность сайта в браузере (по возможности в двух различных). Протестируйте работоспособность сайта при выключенной графике.
Задание 3. Измените в настройках браузера шрифт по умолчанию на Courier New, размер 14 и убедиться, что это не повлияет на внешний вид страниц сайта.
Задание 4. Разместите созданный сайт на любом бесплатном хостинге.
Проверьте работоспособность.
5. Контрольные вопросы
• Что такое WWW?
• Что такое web-страница?
• Что такое сайт?
• Что включает в себя сопровождение сайта?
• Что такое тег (атрибуты тега)?
• Этапы создания web-страницы?
Не нашли, что искали? Воспользуйтесь поиском: