
- •Internet – технологии
- •А.В. Лагутин
- •Методические указания
- •Структура и способы доступа к Internet
- •Доменная система имен
- •Основные службы Internet:
- •Основы html
- •Обязательные теги html
- •Управление структурой документа
- •Форматирование шрифта
- •Гиперссылки
- •Использование графики
- •Каскадные таблицы стилей
- •Атрибуты определения цветов
- •Атрибуты определения параметров шрифта
- •Атрибуты определения параметров текста
- •Атрибуты определения некоторых параметров абзаца
- •Internet – технологии
- •392000, Тамбов, Советская, 106, к. 14
Атрибуты определения параметров шрифта
font-family: “имя шрифта”, … – задает вид шрифта для текста, например, “Arial”, “Times New Roman”, “Tahoma”. При задании этого атрибута необходимо, чтобы требуемый шрифт присутствовал на компьютере. Допускается задавать несколько шрифтов через запятую. Если первый шрифт не найден, ищется второй, и т.д.
font-size: – определяет размер шрифта, который указывается в пунктах (pt) или принимает одно из значений xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller.
font-weight: – устанавливает жирность шрифта – normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800,900. Значение 400 соответствует нормальному начертанию (normal), 700 – полужирному (bold).
font-style: – задает начертание шрифта – normal (по умолчанию), italic (курсив), oblique (наклон);
Атрибуты определения параметров текста
Атрибуты этой группы характеризуют не отдельные символы текста, а целые текстовые блоки.
word-spacing: – определяет величину интервала между словами. Абсолютное значение может быть выражено в различных единицах: в пикселах (например, 10), в миллиметрах (5mm), в сантиметрах (0.6cm), в дюймах (0.8in), в пунктах (14pt).
letter-spacing: - задает величину интервала между буквами в слове. выражается аналогично предыдущему атрибуту.
text-decoration – определяет“украшение”, которое применяется к тексту. Допускаются следующие значения:
none – “украшение” отсутствует (значение по умолчанию);
underline – подчеркнутый текст;
overline – надчеркнутый текст;
line-through – перечеркнутый текст;
blink – мерцающий текст (поддерживает только Netscape Navigator)/
vertical-align: – задает вертикальное выравнивание текста. Возможны следующие значения:
baseline – задает выравнивание базовой линии элемента по базовой линии родителя (значение по умолчанию);
sub – превращает текст в верхний индекс;
super – превращает текст в нижний индекс;
top – выравнивание верха элемента по самому верху родителя;
text-top – выравнивание верха текста элемента по самому верху текста родителя;
middle – выравнивание центра элемента по центру родителя;
bottom – выравнивание низа элемента по самому низу родителя;
text-botoom – выравнивание низа текста элемента по самому низу текста родителя.
text-align: – определяет горизонтальное выравнивание текста. Значения: left – выравнивание по левому краю (значение по умолчанию); right – выравнивание по правому краю; center – выравнивание по центру; justify – выравнивание по ширине.
line-height: – задает величину вертикальное расстояние между строками текста. Высота может быть задана как абсолютной величиной, так и в процентах.
text-indent: – задает отступ для красной строки.
Атрибуты определения некоторых параметров абзаца
Атрибуты этой группы позволяют украсить фрагменты текста рамками различного вида и формы, задать отступы.
margin-left:, margin-right:, margin-top:, margin-bottom: – эти атрибуты позволяют установить дополнительные отступы соответственно слева, справа, сверху, снизу.
padding-left:, padding-right:, padding-top:, padding-bottom: – эти атрибуты задают промежуток между элементом и рамкой, если она есть.
border-top-color:, border-bottom-color: |
– определяют цвет линии соответствующей границы рамки. |
border-top-width:, border-bottom-width: |
– задают толщину линии соответствующей границы рамки. |
Здесь можно задать либо числовое значение толщины рамки, либо одно из предопределенных значений:
thin – тонкая линия;
medium – средняя линия (значение по умолчанию);
thick – толстая линия.
border-top-style:, border-bottom-style: |
– задают стили линии соответствующей границы рамки или ее отсутствие. |
Здесь доступны следующие значения:
none – отсутствие соответствующей границы рамки (значение по умолчанию);
dotted – пунктирная линия;
dashed – штриховая линия;
solid – сплошная линия;
double – двойная линия;
groove – вдавленная трехмерная линия;
ridge – выпуклая трехмерная линия;
inset – трехмерная ступенька вверх;
outset – трехмерная ступенька вниз;
Лабораторная работа 1
Знакомство с Internet Explorer
Цель работы: Ознакомиться с браузером Internet Explorer и с его помощью произвести поиск требуемой информации в сети Internet.
Задание:
Ознакомиться с пунктами меню «Файл», «Правка», «Вид», «Избранное», «Сервис».
Сохранить загруженные web-страницы целиком, только HTML-текст. Отметить разницу.
Скопировать фрагмент web-страницы и обработать его в редакторе Microsoft Word.
Произвести изменение размера шрифта и используемой кодировки загруженной web-страницы.
Создать папку избранных ссылок и поместить в нее ссылку на загруженную вами web-страницу.
Оптимизировать работу браузера, при этом отключить демонстрацию рисунков, анимацию, воспроизведение звуков и видео в окне браузера.
Произвести поиск информации, заданной преподавателем, с использованием поисковых систем rambler и google.
Лабораторная работа 2
Настройка электронной почты
Цель работы: Ознакомиться с программой Outlook Express и научиться с использованием ее работать с электронной почтой.
Задание:
Ознакомиться с пунктами меню «Файл», «Правка», «Вид», «Сервис», «Сообщение».
Создать учетные записи, заданные преподавателем.
Создать несколько правил для сообщений.
Создать и отправить электронное письмо по заданному преподавателем адресу. Прикрепить к этому письму хотя бы один файл.
Лабораторная работа 3
Первое знакомство с HTML
Цель работы: Ознакомится с основными понятиями HTML, разработать простейшие HTML страницы.
Задание: Ознакомиться со структурой HTML документа. Изучить обязательные теги <HTML>, <HEAD>, <TITLE>, <BODY>. Изучить теги управления разметкой документа: <P>, <H1>-<H6>, <BR>, <HR>. Изучить теги форматирования шрифтов. Создать в редакторе Notepad несколько простейших web-страниц, содержащих перечисленные теги.
Лабораторная работа 4
Списки
Цель работы: Изучить принципы построения различного рода списков.
Задание: Изучить теги для создания маркированных, нумерованных списков и списков определения; создать списки с различными видами маркеров и видами нумерации. С помощью необходимых атрибутов изменить порядок нумерации в списке. Создать вложенные списки, сочетая при этом различные виды списков.
Лабораторная работа 5
Гиперссылки
Цель работы: Изучить принципы построения гиперссылок.
Задание: Изучить тег <A> и его атрибуты для создания гиперссылок на другие HTML-документы. Научиться производить переход на конкретные элементы web-страниц (переход по анкеру).
Лабораторная работа 6
Использование графики в web-страницах
Цель работы: Изучить принципы построения иллюстрированных web-страниц.
Задание: Изучить тег <IMG> и его атрибуты для вставки графики в HTML-документы. Научиться использовать рисунки в качестве управляющих кнопок гиперссылок.
Лабораторная работа 7
Таблицы
Цель работы: Получить навыки использования таблиц в web-страницах.
Задание: Изучить теги <TABLE>, <TR>, <TD>, <TH> и их атрибуты. Создать простые таблицы и таблицу с наличием горизонтального и вертикального объединения ячеек (конкретный вид таблиц задается преподавателем). Использовать невидимые таблицы для улучшения структуры представляемой информации.
Лабораторная работа 8
Фреймы
Цель работы: Получить навыки использования фреймов при создании web-страниц.
Задание: Изучить теги <FRAMESET>, <FRAME> и их атрибуты. Создать многооконные web-страницы с использованием простых и вложенных 0фреймов. Создать статические фреймы и поместить в них управляющие кнопки. С помощью атрибута TARGET тега <A> научиться осуществлять переходы между фреймами.
Лабораторная работа 9
Формы
Цель работы: Получить навыки создания форм для сбора информации.
Задание: Изучить теги <FORM>, <INPUT>, <TEXTAREA>, <SELECT> и их атрибуты. В HTML-документе создать форму для сбора разнородных данных, состоящую из различных управляющих элементов: управляющих кнопок, полей для ввода текста и пароля, радиокнопок и флажков выбора, текстовых областей редактирования, списков.
Лабораторная работа 10
Каскадные таблицы стилей
Цель работы: Получить навыки создания web-страниц с использованием современной технологии - каскадных таблиц стилей.
Задание: изучить правила создания стилей, ознакомиться с основными стилевыми атрибутами цвета, шрифтов, текста и абзацев. Переоформить разработанные HTML-страницы с использованием таблиц стилей, при этом стили могут быть определены как в отдельном файле, так и в самом HTML-документе.
Учебное издание