Задание. Выполните приведенные примеры. Объясните полученный результат.
Nbsp; Министерство культуры РФ Федеральное государственное бюджетное образовательное учреждение высшего профессионального образования
Красноярский государственный художественный институт
Сборник практических заданий
По дисциплине «Информационные технологии»
Тема: Создание WEB – структур с помощью языка HTML
| Разработчик: К.п.н. Ершова Е.А. |
г.Красноярск 2011г.
Основные тэги разметки
Лабораторная №1
1. HTML-документ (страничка) - документ, написанный на языке разметки гипертекста (HTML). Заключается между тэгами <HTML> и </HTML>.
Тэги разметки - специальные команды для расположения на экране текста, графики, видео и аудио фрагментов, а также команды, служащие для связи с другими HTML-документами и ресурсами Интернет.
<HEAD> и </HEAD>. Между этими тэгами располагается информация о документе.
<TITLE> и </TITLE>. В них заключается название странички, которое будет выведено в рамке окна программы просмотра.
<BODY> и </BODY>. "Тело" документа (текст, графика и т.д.) располагается между этими двумя тэгами.
<BR> тэг, служащий для переноса текста на другую строку. Может также служить для отделения графики от текста на интервал.
<PRE> и </PRE> Между этими тэгами располагается предварительно отформатированный текст. На экран он выводится шрифтом типа "курьер".
ПРОГРАММЫ => СТАНДАРТНЫЕ => БЛОКНОТ.
|
|
|
Набрать в поле редактирования Блокнота следующий текст:
<HTML>
<HEAD>
<TITLE>Первая web-страничка</TITLE>
</HEAD>
<BODY>
Информационное наполнение
</BODY>.
</HTML>
Сохранить документ в рабочей папке под именем index.htm Просмотреть результат работы в браузере.
2. Форматировать текст можно с помощью так называемых физических стилей (текст выделенный физическим стилем во всех браузерах отображается одинаково)
<B> Полужирный
<I> Курсив
<TT> Шрифт, как у пишущей машинки
<U> Подчеркивание
<SUB> Подстрочный текст
<SUP> Надстрочный текст
<STRIKE> Перечеркивание
3. FONT-задает размер и цвет шрифта, атрибут SIZE позволяет указать абсолютный размер шрифта (от1 до 7), COLOR – задает цвет с помощью названия или шестизначного шестнадцатеричного числа.
Например: <FONT SIZE=7 Color=red>
4. <HR>– создание линий в HTML
Атрибуты дескриптора <HR>
SIZE – толщина горизонтальной линии в пикселях
WIDTH – длина горизонтальной линии в пикселях или процентах от ширины окна броузера
Например:И
ЗАДАНИЕ: Отразить в файле index.htm фразу «Скоро весна» разными стилями, размерами и цветом. Применить 3 разных горизонтальных линии.
|
|
|
Включение таблицы в WEB документ
Лабораторная работа №2
Таблица – упорядоченный набор данных, размещенных в строках и таблицах.
1. <TABLE> </TABLE> — главный тег, применяющийся для описания начала и конца таблицы, а также параметров отображения таблицы, таких, как ее размеры, оформление границ ячеек и т. п.
<TR> </TR> - тег, описывающий начало и конец строки таблицы.
<TD> </TD> - тег, описывающий начало и конец ячейки.
<HTML> <BODY>
<TABLE border=4<TR><TD bgcolor="yellow">Название турфирм
|
<TR><TD>Приют отшельника
<TD>Пустыня Сахара
<TR><TD>Морской Бриз
<TD>Остров Пасхи
</TABLE> </BODY></HTML>
2. Для управления размещением таблицы на Web-странице и для форматирования данных внутри таблицы служат параметры ALIGN и VALIGN.
Параметр ALIGN может иметь значения LEFT, RIGHT и CENTER.
VALIGN может принимать значения TOP, MIDDLE и BOTTOM.
При отсутствии этих параметров таблица всегда будет выравниваться относительно левого края страницы, а содержимое ячеек – по горизонтали относительно левого края ячейки и по вертикали относительно ее центра.
|
|
|
При употреблении в теге <TABLE> параметр ALIGN управляет выравниванием таблицы относительно окна броузера, а при употреблении в тегах <TD> и <TR> — выравниванием содержимого относительно границ ячейки.
Параметр VALIGN применяется только внутри тегов <TR> и <TD>. При употреблении параметров ALIGN и VALIGN внутри тега <TR> выравнивание задается сразу для всех ячеек, содержащихся в этой строке.
<TABLE BORDER HEIGHT=150>
<TR>
<TD
<TD ALIGN=CENTER>ALIGN=CENTER
<TD ALIGN=RIGHT>ALIGN=RIGHT
</TR> </TABLE>
Задание. Выполнить приведенные примеры, объяснить результат. Создать таблицу 6Х6, в каждую ячейку поместите название городов, обеспечьте заливку ячеек разным цветом. Сохранить файл по именем Tab.htm
Гиперссылки
Лабораторная работа №3
Существует три типа ссылок:
- внутристраничные (задают переходы в пределах одной страницы)
- внутрисистемные (ссылки между страницами в пределах одного и того же сервера)
- межсистемные (ссылки на страницы, расположенные на удаленных узлах WEB)
|
|
|
Чтобы создать гиперссылку, необходимо указать, куда должен осуществляться переход, и создать в точке назначения именованную метку. исходная точка и точка назначения называются якорями (ANCHOR - сокращенно А), каждая из которых помечается парой тегов <A> и </A>.
В большинстве случаев стоит делать WEB страницы короткими, читателю будет удобнее, если страница целиком уместится на экране (хотя есть и противоположные примеры: прайс-лист, какой-либо список).
Внутристраничные
<HTML>
<BODY>
Сейчас необходимо переместиться на <a href="#end">конец</a> документа
|
<br><br><br> <HR>
Конец документа
<a name="end"></a>
А сейчас необходимо переместиться в <a href="#begin">начало</a> документа
</BODY> </HTML>
При создании документов для публикации в WEB лучше всего делать отдельные страницы небольшими. Это поможет избавиться от запутанных внутристраничных перекрестных ссылок.
Внутрисистемные
Предположим - есть две WEB страницы 1.htm и Fr3.htm (находящиеся в одной папке), необходимо организовать переход с одной страницы на другую и обратно.
Исходный текст для первой страницы (1.htm) будет выглядеть так:
<HTML>
<BODY>
<a href="Fr3.htm">перейди вперед</a>
</BODY>
</HTML>
Программа для второй страницы (Fr3.htm):
<HTML>
<BODY>
<a href="1.htm">перейди назад</a>
</BODY>
</HTML>
Если нужная страница находится в другой папке, то указывается полный адрес.
Задание. Выполните приведенные примеры. Объясните полученный результат.
Выполнить задание «Светофор»
Графика в WEB
Лабораторная работа №4
Подготовка и размещение графических изображений в HTML – документах является нетривиальной задачей. Всегда необходимо поддерживать баланс между красочностью изображения и объемом графического файла, в котором оно хранится. Чаще всего применяются файлы форматов GIF и JPEG. Исторически GIF появился раньше:
- в файлах этого формата рисунок хранится с большим коэффициентом сжатия;
- один рисунок можно сделать прозрачным;
- в этом формате могут быть сохранены анимированные изображения (мультики)
- удобен для хранения рисунков с четкими контурами.
Формат JPEG основан на сжатии изображения с потерями качества, подходит для рисунков и фотографий с плавными переходами цвета и яркости, с высоким цветовым разрешением (до 16 млн. цветов, а в GIF – 256 цветов).
1. Скопировать в папку Images не менее 6 работ, для публикации графического изображения его размер должен не превышать 120-150 Кб (Контекстное меню - Свойства);
1.1. Обработать графические файлы:
· открыть графический файл в программе Microsoft Office Picture Mananger(Контекстное меню - Открыть с помощью -Microsoft Office Picture Mananger);
· Изменить рисунки – Изменение размера;
· Веб крупный;
· Файл – сохранить.
1.2. Переименовать графические файлы (латиница или цифры).
2. Для размещения картинок на Web-страницах существует специальный тег <IMG>, имеющий обязательный параметр SRC="путь к графическому файлу" (Если файл находится на сервере в том же каталоге, что и документ, то путь к нему указывать не нужно — требуется указать только имя файла. Если файл изображения находится на том же сервере, но в другом каталоге, требуется указать путь к файлу от рабочего каталога).
Например: <HTML> <BODY> <IMG SRC=”Dog.jpg”> </BODY>. </HTML>
Дата добавления: 2018-06-01; просмотров: 221; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!