Министерство культуры РФ
Государственное образовательное учреждение высшего профессионального образования
Красноярский государственный художественный институт
Сборник практических заданий
по дисциплине «Информационные технологии»
Тема: Создание WEB – структур с помощью языка HTML
Разработчик: К.п.н. Ершова Е.А.
|
|
г.Красноярск 2009г.
Основные тэги разметки
Лабораторная №1
HTML-документ (страничка) - документ, написанный на языке разметки гипертекста (HTML). Заключается между тэгами <HTML> и </HTML>.
Тэги разметки - специальные команды для расположения на экране текста, графики, видео и аудио фрагментов, а также команды, служащие для связи с другими HTML-документами и ресурсами Интернет.
<HEAD> и </HEAD>. Между этими тэгами располагается информация о документе.
<TITLE> и </TITLE>. В них заключается название странички, которое будет выведено в рамке окна программы просмотра.
<BODY> и </BODY>. "Тело" документа (текст, графика и т.д.) располагается между этими двумя тэгами.
<P> и </P> тэги, служащие для выделения абзацев. Новый абзац всегда отделяется от предыдущего пустой строкой
<BR> тэг, служащий для переноса текста на другую строку. Может также служить для отделения графики от текста на интервал.
<PRE> и </PRE> Между этими тэгами располагается предварительно отформатированный текст. На экран он выводится шрифтом типа "курьер".
ПРОГРАММЫ => СТАНДАРТНЫЕ => БЛОКНОТ.
Набрать в поле редактирования Блокнота следующий текст:
<HTML>
<HEAD>
<TITLE>Первая web-страничка</TITLE>
</HEAD>
<BODY>
Информационное наполнение
</BODY>.
</HTML>
Сохранить документ в рабочей папке под именем index.htm Просмотреть результат работы в браузере Internet Explorer.
Форматировать текст можно с помощью так называемых физических стилей (текст выделенный физическим стилем во всех браузерах отображается одинаково)
<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 разных горизонтальных линии. Просмотреть результат работы в браузере Internet Explorer.
Включение таблицы в web документ Лабораторная работа №2
Таблица – упорядоченный набор данных, размещенных в строках и таблицах.
1. <TABLE> </TABLE> — главный тег, применяющийся для описания начала и конца таблицы, а также параметров отображения таблицы, таких, как ее размеры, оформление границ ячеек и т. п.
<TR> </TR> - тег, описывающий начало и конец строки таблицы.
<TD> </TD> - тег, описывающий начало и конец ячейки.
<HTML> <BODY>
<TABLE border=4> <TR><TD bgcolor="yellow">Название турфирм
border-
определяет ширину в пикселях граница
таблицы.
Может применяться
для оформления графических изображений,
особенно для созданных на прозрачном
фоне.
<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 WIDTH=400 HEIGHT=150>
<TR>
<TD VALIGN=TOP>VALIGN=TOP</TD>
<TD VALIGN=MIDDLE ALIGN=CENTER>ALIGN=CENTER
VALIGN=MIDDLE</TD>
<TD VALIGN=BOTTOM ALIGN=RIGHT>ALIGN=RIGHT
VALIGN=BOTTOM</TD>
</TR> </TABLE>
Задание. Выполнить приведенные примеры, объяснить результат. Создать таблицу 6Х6, в каждую ячейку поместите название городов, обеспечьте заливку ячеек разным цветом. Сохранить файл по именем Tab.html
Гиперссылки Лабораторная работа №3
Существует три типа ссылок:
внутристраничные (задают переходы в пределах одной страницы)
внутрисистемные (ссылки между страницами в пределах одного и того же сервера)
межсистемные (ссылки на страницы, расположенные на удаленных узлах WEB)
Чтобы создать гиперссылку, необходимо указать, куда должен осуществляться переход, и создать в точке назначения именованную метку. исходная точка и точка назначения называются якорями (ANCHOR - сокращенно А), каждая из которых помечается парой тегов <A> и </A>.
В
большинстве случаев стоит делать WEB
страницы короткими, читателю будет
удобнее, если страница целиком уместится
на экране (хотя есть и противоположные
примеры: прайс-лист, какой-либо список).
1. Внутристраничные
<HTML>
<BODY>
Сейчас необходимо переместиться на <a href="#end">конец</a> документа
<
атрибут href
определяет исходную ссылку
атрибут name
- точку назначения
<br><br><br> <HR>
Конец документа
<a name="end"></a>
А сейчас необходимо переместиться в <a href="#begin">начало</a> документа
</BODY> </HTML>
При создании документов для публикации в WEB лучше всего делать отдельные страницы небольшими. Это поможет избавиться от запутанных внутристраничных перекрестных ссылок.