- •Учебно-методический комплекс по дисциплине
- •Новосибирск 2013
- •1. Цели и задачи дисциплины
- •2. Место дисциплины в структуре ооп
- •3. Требования к результатам освоения дисциплины
- •4. Объем дисциплины и виды учебной работы
- •5. Содержание дисциплины
- •5.1. Разделы дисциплин и виды занятий
- •5.2. Содержание разделов дисциплины (по лекциям)
- •5.3. Соответствие компетенций, формируемых при изучении дисциплины, и видов занятий
- •6. Методы и формы организации обучения
- •7. Практические занятия (семинары)
- •8. Самостоятельная работа
- •9. Примерные темы рефератов
- •10.Рейтинговая система для оценки успеваемости учащихся
- •11. Правила аттестации по учебной дисциплине
- •12. Учебно-методическое и информационное обеспечение дисциплины
- •Основная литература
- •Дополнительная литература
- •13. Материально-техническое обеспечение дисциплины:
- •Вопросы к зачету
- •Учебно-методические материалы для студентов по подготовке рефератов по курсу «интернет – технологии»
- •Учебно-методические материалы для студентов по практическим занятиям по курсу «Интернет - технологии»
- •Глава 1. Принципы построения компьютерных сетей
- •Глава 2. Современные сетевые технологии.
- •Глава 3. Основы языка разметки гипертекста.
- •Глава 1. Принципы построения компьютерных сетей
- •1.1 Компоненты компьютерных сетей
- •1.2 Модель взаимодействия открытых систем
- •1.3 Узлы компьютерных сетей
- •1.4 Адресация в компьютерных сетях
- •Глава 2. Основные сетевые технологии
- •2.1 Основы www - технологии
- •2.2 Технологии работы в www
- •Глава 3. Основы языка разметки гипертектста.
- •3.1 Введение в html
- •3.2 Простейшая web - страница
- •3.3 Гиперссылки
- •3.4 Стили оформления
- •3.5 Списки
- •3.6 Простые таблицы
- •3.7 Ввод изображения в документ
- •3.8 Карта изображения
- •3.9 Фреймы
- •3.10 Формы
3.4 Стили оформления
Для удобства пользователей при работе с HTML – документами разработана таблица стилей (Cascading Style Sheets – CSS). Она представляет собой набор правил, которыми определяется применение стилей форматирования к дескрипторам HTML – документа. Так как стиль форматирования применяется ко всему HTML – документу, то они объявляются внутри дескриптора <HEAD>. При этом все изменения стиля должны быть описаны внутри дескриптора <STYLE>.
Например,
<HEAD>
<STYLE TYPE=”TEXT/CSS”>
BODY{BACKGROUND:YELLOW; COLOR:GREEN; TEXT – ALIGN:CENTER}
</STYLE>
</HEAD>
Комментарий к коду HTML – документа.
При обработке этого документа в браузере текстовый фон его будет желтого цвета, цвет шрифта – зеленым, а сам текст будет выровнен по центру окна. Внутри контейнерного тега <STYLE> описание тега BODY использует атрибуты BACKGROUND (фон), COLOR (цвет шрифта), TEXT – ALIGN (выравнивание текста). Все атрибуты заключены в фигурные скобки, значения связаны с атрибутами не равенством, а двоеточием без кавычек, атрибуты отделяются друг от друга точкой с запятой. Свойства стиля для текстового материала могут также задаваться с помощью атрибутов FONT – FAMILY (тип шрифта текста), FONT – SIZE ( размер шрифта) и др.
3.5 Списки
С помощью HTML можно создавать списки: маркированные (неупорядоченные) и нумерованные (упорядоченные).
Маркированные списки создаются с помощью дескриптора <UL> вместе с дескриптором строки списка <LI>.
<UL>
<LI>…</LI>
<LI>…<LI>
</UL>
По умолчанию маркером каждой строки списка будет кружок темного цвета. При использовании таблиц свойств стиля (CSS) можно выбрать другой тип маркера: например, квадрат или пустой кружок.
<HTML>
<HEAD>
<TITLE> Маркированный список</TITLE>
<STYLE TYPE=”TEXT/CSS”>
UL.SQUARE{LIST – STYLE – TYPE:SQUARE}
</STYLE>
</HEAD>
<BODY>
<UL CLASS=”SQUARE”>
<LI> Иванов </LI>
<LI> Петров </LI>
<LI> Сидоров </LI>
</UL>
</BODY>
</HTML>
Комментарий к коду HTML – документа.
Атрибут CLASS позволяет назначить конкретному списку определенные свойства стиля. В данном случае SQUARE означает «квадрат» и задается этот маркер как значение свойства LIST – STYLE – TYPE.
При создании нумерованных списков используется дескриптор <OL> совместно с дескриптором <LI>. Каждая строка списка по умолчанию нумеруется арабскими цифрами. Для изменения способа упорядочивания могут быть использованы стили LOWER – ALFA (маркировка строк строчными латинскими символами), UPPER – ALFA (прописными латинскими символами), UPPER – ROMAN (римскими цифрами).
<HTML>
<HEAD>
<TITLE> Нумерованный список</TITLE>
<STYLE TYPE=”TEXT/CSS”>
OL.ROMAN{LIST – STYLE – TYPE:UPPER – ROMAN}
</STYLE>
</HEAD>
<BODY>
<OL CLASS=”ROMAN”>
<LI> Иванов </LI>
<LI> Петров </LI>
<LI> Сидоров</LI>
</OL>
</BODY>
</HTML>
Комментарий к коду HTML – документа.
В результате в окне браузера появляется список, нумерованный римскими цифрами.
3.6 Простые таблицы
Достаточно просто создаются и HTML – таблицы, состоящие из строк и столбцов. При создании таблиц используются дескрипторы <TABLE> (дескриптор объявления таблицы), <TR> (дескриптор горизонтальной строки), <TH> (дескриптор ячейки, данные в которой являются заголовком столбца), <TD> (дескриптор ячейки данных в пределах строки таблицы).
Все эти дескрипторы – контейнеры, то есть требуют закрывающего дескриптора.
Следует учесть, что каждая ячейка таблицы имеет свою собственную границу.
<HTML>
<HEAD>
<TITLE> Простая таблица</TITLE>
<STYLE TYPE=”TEXT/CSS”>
TH{COLOR:READ; FONT – FAMILY:ARIAL}
TD{COLOR:GREEN}
</STYLE>
</HEAD>
<BODY>
<TABLE WIDTH=”50%” BORDER=”2” RULES=”ALL”>
<TR><TH> заголовок 1 </TH> <TH> заголовок 2 </TH></TR>
<TR><TD> данные 2 строка </TD> <TD> данные 2 строка </TD></TR>
<TR><TD> данные 3 строка </TD> <TD> данные 3 строка </TD></TR>
</TABLE>
</BODY>
</HTML>
Комментарий к коду HTML – документа.
Для создания этой таблицы были использованы атрибуты WIDTH(ширина таблицы в процентах по отношению к ширине страницы или в пикселях), BORDER (ширина границы между ячейками в пикселях), RULES (линии между ячейками; возможные значения: ROWS, COLS, ALL).
Можно использовать и другие атрибуты: ALIGN ( выравнивание по горизонтали содержимого ячейки; возможные значения: LEFT, RIGHT, CENTER), BGCOLOR (цвет фона таблицы), COLSPAN (количество столбцов, объединенных в один), ROWSPAN (количество строк, объединенных в одну). Два последних атрибута могут быть использованы только в дескрипторах <TH> и <TD>.