Добавлен: 21.10.2018
Просмотров: 852
Скачиваний: 5
2.
МЕТОДИЧЕСКИЕ УКАЗАНИЯ
1. Исходными данными для работы являются:
a. файл со справочной информацией по языку HTML «Язык HTML.doc»
b. файл-презентация с примерами «Помощь для контрольной
работы.ppt
»
c. образец выполнения работы
d. папка с контентом для страниц сайта «Контент»: иллюстрации – файлы в
формате jpg и файл с текстом для страниц сайта «Текст для Web-
страниц.doc
»
2. Цель работы – создание сайта Интернет-магазина.
3. Начать следует с создания файла в формате html.
4. Создать стартовую страницу сайта «Исходная.html». Для этого:
a. Запустить
текстовый
редактор
«Блокнот»:
Пуск–>Программы–
>
Стандартные–>Блокнот
b. Выбрать пункт меню Файл –>Сохранить как
c. Установить путь к папке «Контент»
d. Выбрать Тип файла –> Все файлы. Убедиться, что в папке «Контент»
находятся исходные файлы.
e. В поле «Имя файла» ввести имя создаваемого файла «Исходная.html».
Блокнот не закрывать.
f. Убедиться, что в папке «Контент» появился файл с эмблемой Интернет-
ресурса.
g. Кликнуть по созданному файлу двойным щелчком. Запустится браузер и
отобразит содержимое созданного файла. Браузер не закрывать.
h. Далее вносить изменения в файл, работая в Блокноте, сохранять изменения
и просматривать их в браузере, нажимая кнопку «Обновить»
5. Записать в блокноте в созданном файле скелет Web-страницы. Команды языка
следует писать в блокноте вручную. Копировать их из справочника нельзя –
не будут работать!
<HTML>
<HEAD>
<ТITLЕ>Электронный магазин</ТITLЕ>
</HEAD>
<BODY>
Все содержимое страницы должно находиться здесь
</BODY>
</HTML>
7. Далее действовать в соответствии с заданием, создавая сайт как совокупность Web-
страниц. Графические файлы брать из папки «Иллюстрации», тексты брать из
файла «Текст для Web-страниц.doc» небольшими абзацами, не выходящими за
пределы экрана браузера. Команды форматирования брать из справочника «Язык
HTML.doc». Примеры использования команд форматирования брать из файла
«Помощь для контрольной работы.ppt»
8. Для отображения на Web-странице графического файла использовать команду
<IMG SRС="имя_графического_файла">
9.
Для использования графического файла как гиперссылки применять команду
<A HREF=”имя_файла_Web-страницы”><IMG SRС="имя_графического_файла"></A>
10. Для создания таблицы использовать структуру команд:
<TABLE BORDER>
<CAPTION>Название таблицы</САРТION>
<TR>
<ТD>Первая строка, первый столбец</TD>
<ТD>Первая строка, второй столбец</TD>
<TD>Первая строка, третий столбец</TD>
</TR>
<TR>
<ТD>Вторая строка, первый столбец</TD>
<ТD>Вторая строка, второй столбец</TD>
<ТD>Вторая строка, третий столбец</TD>
</TR>
и т.д.
</TABLE>
11. Для форматирования текста использовать команды абзаца <P>, команды
заголовков <H1>, <H2>
12. Для установки внутренней гипертекстовой связи использовать команды:
<A NAME=”имя_якоря”></A>
<A HREF=”#имя_якоря”>Текст или графический объект</A>
13. Выполнять контрольную работу, используя справочник по языку HTML, примеры
из презентации и образец готовой работы.
14. Результат сравнивать с образцом
3.
СПРАВОЧНИК ОСНОВНЫХ КОМАНД ЯЗЫКА HTML
Скелет страницы Web
<HTML>
<HEAD>
<TITLE>Наименование окна, в котором браузер отображает страницу</ТITLЕ>
</HEAD>
<BODY>
Все содержимое страницы должно находиться здесь
</BODY>
</HTML>
Метки для абзацев и др.
Новый абзац
<Р>
Горизонтальная линия <HR>
Конец строки
<BR>
Заголовки <Н1> (наибольший) <Н6> (наименьший)
Форматирующие метки
Жирный <В>Текст будет жирным</В>
Курсив <I>Текст будет курсивным</I>
Подчеркивание <U>Текст будет подчеркнутым</U>
Моноширинный <ТТ>Текст будет похож на печать пишущей машинки</ТТ>
Форматированный <PRE>Текст сохраняет все пробелы и табуляции</РRЕ>
Маркированный список
<UL>
<LI>Первый элемент
<LI>Второй элемент
и т.д.
</UL>
Нумерованный список
<OL>
<LI>Первый маркер
<LI>Второй маркер
и т.д.
</OL>
Метки связей
Внешняя связь
<А HREF= “URL”> Teкст связи </А>
Якорь
<А NАМЕ="Имя якоря"> Текст якоря </А>
Внутренняя связь
<А НRЕF="#Имя якоря"> Текст связи </А>
Электронная почта
<А HREF= “mailto: Ваш адрес”>Текст связи</А>
FTP (каталог)
<А НRЕF="ftp://хост/каталог/">Текст связи</А>
FTP (файл)
<А НRЕF= "ftp:/хост/каталог/имя">Текст связи</А>
Метки изображений
Базовое изображение
<IMG SRС="имя_файла">
Изображение, выровненное с верхом
текста
<IMG SRС="имя_файла" ALIGN=TOP>
Изображение, выровненное с серединой
текста
<IMG SRС="имя_файла" ALIGN=MIDDLE>
Изображение, выровненное с низом
текста
<IMG SRС="имя_файла" ALIGN=BOTTOM>
Изображение с альтернативным текстом <IMG SRС="имя_файла" ALT= “Альт. текст”>
Метки таблиц
<TABLE BORDER>
<CAPTION>Teкст надписи.</САРТION>
<TR>
<ТD>Первая строка, первый столбец</TD>
<ТD>Первая строка, второй столбец</TD>
<TD>Первая строка, третий столбец</TD>
</TR>
<TR>
<ТD>Вторая строка, первый столбец</TD>
<ТD>Вторая строка, второй столбец</TD>
<ТD>Вторая строка, третий столбец</TD>
</TR>
и т.д.
</TABLE>
Заголовки столбцов таблицы
<TR>
<ТН>Заголовок первого столбца</TН>
<ТН>Заголовок второго столбца</TН>
<ТН>И так далее до конца</TН>
</TR>
Горизонтальное выравнивание
<ТН ALIGN=LEFT или CENTER или RIGHT>
<TD ALIGN=LEFT или CENTER или RIGHT>
Вертикальное выравнивание
<ТН VALIGN=TOP или MIDDLE или BOTTOM>
<TD VALIGN=TOP или MIDDLE или BOTTOM>
Перекрывающиеся столбцы
<ТН СОLSPAN=Число_столбцов>
<TD СОLSPAN=Число_столбцов>
Перекрывающиеся строки
<TH ROWSPAN=Число_строк>
<TD ROWSPAN=Число_строк>
Расширение HTML
Размер шрифта
<FONT SIZE = paзмер > Teкст </FONT>
Размер базового шрифта
<BASEFONT SIZE = размер>
Цвет текста
<BODY TEXT = "#nnnnnn">
Стиль нумерованного списка
<OL ТУРЕ=тип> тип м.б. 1, a, A , i, I
Стиль маркированного списка
<UL TYPE=тип>, тип м.б. disc, circle, square
Размеры изображения
<IMG SRС= “имя_файла” WIDTH = х HEIGHT = y>
Рисунок как гиперссылка
<A HREF=”URL”><IMG SRC= “имя_файла”></A>
Цвет фона
<BODY BGCOLOR="#nnnnnn"> Цвет м.б. yellow, green
Фоновое изображение
<BODY BACKGROUND = “имя_файла”>
Размер рамки таблицы
<TABLE ВОRDER = размер>
Ширина таблицы
<TABLE WIDTH = шиpинa>
Ширина клетки таблицы
<TD WIDTH = шиpинa>
Интервал клетки таблицы
<TABLE SPACING =интервал>
Заполнение клетки таблицы
<TABLE СЕLLPADDING = заполнение>
Центрирование абзацев
<CENTER> Здесь центрируемые заголовки, текст, графика
</CENTER>
Элементы экранной формы
Текстовое поле
<INPUT TYPE=TEXT NАМЕ="Имя_поля">
Текстовая область
<TEXTAREA NАМЕ="Имя_поля" ROWS=Всего_строк
СОLS=Всего_столбцов WRAP> </TЕХТАRЕА>
Контрольные боксы для ввода
информации типа Да/Нет или
Истина/Ложь
<INPUT TYPE=CHECKBOX NАМЕ="Имя_поля">
Отметка
Радиокнопки для выбора опций <INPUT TYPE=RADIO NАМЕ="Имя_поля"
VАLUЕ="Значение">Отметка
Список выбора опций
<SELECT NАМЕ="Имя_поля" SIZЕ=Элементы>
<ОРТION>Текст первого элемента</ОРТION>
<OPTION>Текст второго элемента</ОРТION>
<OPTION> и т.д. </OPTION>
</SELECT>
Командная кнопка submit
(послать данные бланка)
<INPUT TYPE=SUBMIT VALUE="Отметка">
Командная кнопка reset
(очистить данные бланка)
<INPUT TYPE=RESET VALUE="Отметка">
Цветовая палитра
№ п/п
Цвет
Наименование цвета
№ п/п
Цвет
Наименование цвета
1
aqua
аквамарин
11
olive
оливковый
2
black
черный
12
purple
пурпурный
3
blue
синий
13
red
красный
4
fuchsia
фуксиновый
14
silver
серебристый
5
green
зеленый
15
teal
сизый
6
gray
серый
16
white
белый
7
violet
фиолетовый
17
yellow
желтый
8
lime
светло-зеленый
18
orange
оранжевый
9
maroon
каштановый
19
pink
розовый
10
navy
ультрамарин
20
beige
бежевый
Цветовую палитру можно взять на http://www.ezpc.ru/wdsgn3.shtml