КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Краткие теоретические и учебно-методические материалы по теме практической работы
|
|
|
|
Практическое занятие 10
Веб-студия Заказчик
Задания для практического занятия:
1. Составьте техническое задание на разработку web-сайта по вариантам:
| № варианта | Название сайта (тематика) |
| Личный сайт | |
| Сайт туристической фирмы | |
| Сайт Интернет магазина | |
| Сайт библиотеки | |
| Сайт новостей | |
| Сайт погоды | |
| Сайт спортивного клуба | |
| Сайт выставочного комплекса | |
| Сайт концертного зала | |
| Сайт инструментального ансамбля | |
| Сайт железнодорожного вокзала | |
| Сайт телеграфа | |
| Сайт фотоателье | |
| Сайт транспортной компании | |
| Сайт поликлиники | |
| Сайт института | |
| Сайт центрального рынка | |
| Сайт ресторана | |
| Сайт парка культуры и отдыха | |
| Сайт журнала | |
| Сайт коммерческой фирмы | |
| Сайт Интернет аукциона | |
| Сайт архива | |
| Сайт трамвайного маршрута | |
| Сайт web-студии | |
| Сайт кадрового агентства | |
| Сайт кафе | |
| Сайт газеты | |
| Сайт молодежной одежды | |
| Сайт театра |
Контрольные вопросы
1. Что такое техническое задание?
2. Как выглядит в общем виде техническое задание на разработку web-сайта
«Применение тегов HTML при создании web-страниц»
Цель работы: закрепить знания по теме «Синтаксис HTML»
Образовательные результаты, заявленные во ФГОС третьего поколения:
Студент должен
уметь:
- составлять HTML-код страницы;
- проектировать web-приложения;
знать:
- синтаксис HTML.
Для освоения HTML Вам понадобятся две вещи:
1. Любой браузер, т.е., программа, пригодная для просмотра HTML-файлов. Например, Intrnet Exрlorer.
2. Любой редактор текстовых файлов, поддерживающий русский язык в выбранной Вами кодировке. Если на Вашем компьютере установлен Windows, вполне подойдет Notepad.
|
|
|
HTML-документ — это просто текстовый файл с расширением *.html. Вот самый простой HTML-документ:
<html> <head> <title> Пример 1 </title> </head> <body> <H1> Привет! </H1> <P> Это простейший пример HTML-документа. </P> <P> Этот *.html-файл может быть одновременно открыт и в Notepad, и в Explorer. Сохранив изменения в Notepad, просто нажмите кнопку F5 в Explorer, чтобы увидеть эти изменения реализованными в HTML-документе. </P> </body> </html>Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками "<" и ">". Такой фрагмент (например, <html>) называется меткой (по-английски — tag, читается "тэг").
Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением "/".
Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.
Обязательные метки <html>... </html>
Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.
<head>... </head>
Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки <title> ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.
<title>... </title>
Все, что находится между метками <title> и </title>, толкуется браузером как название документа. Explorer, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.
|
|
|
<body>... </body>
Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.
<H1>... </H1> — <H6>... </H6>
Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
<P>... </P>
Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.
Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN, например:
<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1>или
<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>Подытожим
<html> <head> <title>Пример 2</title> </head> <body> <H1 ALIGN=CENTER>Привет!</H1> <H2>Это чуть более сложный пример HTML-документа</H2> <P>Теперь мы знаем, что абзац можно выравнивать не только влево, </P> <P ALIGN=CENTER>но и по центру</P> <P ALIGN=RIGHT>или по правому краю.</P> </body> </html>С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца. В следующем разделе мы поговорим, как можно улучшить наш простой HTML-документ. Начнем с малого — с абзаца.
|
|
|
|
|
Дата добавления: 2014-12-24; Просмотров: 479; Нарушение авторских прав?; Мы поможем в написании вашей работы!