Заглавная страница Избранные статьи Случайная статья Познавательные статьи Новые добавления Обратная связь КАТЕГОРИИ:  Археология Биология Генетика География Информатика История Логика Маркетинг Математика Менеджмент Механика Педагогика Религия Социология Технологии Физика Философия Финансы Химия ЭкологияТОП 10 на сайте Приготовление дезинфицирующих растворов различной концентрацииТехника нижней прямой подачи мяча. Франко-прусская война (причины и последствия) Организация работы процедурного кабинета Смысловое и механическое запоминание, их место и роль в усвоении знаний Коммуникативные барьеры и пути их преодоления Обработка изделий медицинского назначения многократного применения Образцы текста публицистического стиля Четыре типа изменения баланса Задачи с ответами для Всероссийской олимпиады по праву 
Мы поможем в написании ваших работ! ЗНАЕТЕ ЛИ ВЫ?
Влияние общества на человека
Приготовление дезинфицирующих растворов различной концентрации Практические работы по географии для 6 класса Организация работы процедурного кабинета Изменения в неживой природе осенью Уборка процедурного кабинета Сольфеджио. Все правила по сольфеджио Балочные системы. Определение реакций опор и моментов защемления |
Нас утро встречает прохладой
В слове УТРО все буквы должны иметь разные цвета. В слове ПРОХЛАДОЙ оформить буквы ПРО – красным цветом, ОЙ – синим. - Оформить строку с подписью (Студент группы NNN Фамилия Имя) курсивом, размер шрифта задать относительным изменением. Использовать теги <FONT SIZE=«+2»> и <I> - Просмотреть полученный документ в броузере.
- Создать новый документ 2_name.htm, сохранить его в той же рабочей папке. - Ввести текст (использовать копирование текста из документа 1_name.htm): <HTML> <HEAD> <TITLE> Фамилия </TITLE> </HEAD> <BODY> Приветствую Вас на моей второй web-страничке! <BR> Монолог Гамлета </BODY> </HTML> - Выровнять текст по центру. - Ввести текст: Быть иль не быть - вот в чем вопрос. Что благороднее: сносить удары неистовой судьбы - иль против моря невзгод вооружиться, в бой вступить. И все покончить разом... - Оформить выравнивание абзаца по ширине. - Ограничить абзац горизонтальными разделительными линиями сверху и снизу, используя тег <HR>. - Скопировать монолог и разбить его на абзацы. Выровнять по центру. Быть иль не быть - вот в чем вопрос. - Сохранить документ. - Просмотреть документ в окне броузера, изменяя размер окна.
- Создать новый документ 3_name.htm, сохранить его в той же рабочей папке жесткого диска. - Ввести текст: <HTML> <HEAD> <TITLE> Фамилия </TITLE> </HEAD> <BODY> Приветствую Вас на моей третьей web-страничке! </BODY> </HTML> - Дополнить текст документа (между тегами <BODY>…</BODY>) следующим текстом: Я знаю как оформлять: - Оформить три последние строки как список нумерованный. Для этого использовать следующую конструкцию тегов: <OL> <LI> Шрифты, </LI> <LI> Заголовки, </LI> <LI> Абзацы </LI> </OL> - Поменять оформление списка на список маркированный. Использовать теги <UL>, </UL> - Создать «смешанный» список: Я знаю как оформлять:
Таблица основных тегов HTML-документа. Теги форматирования шрифта и абзаца
Общая структура документа HTML | |||||||||
| Тип документа | <HTML></HTML> | Начало и конец документа | ||||||||
| Имя документа | <HEAD></HEAD> | Не отображается броузером | ||||||||
| Заголовок | <TITLE></TITLE> | Содержимое строки заголовка окна броузера | ||||||||
| Тело документа | <BODY></BODY> | Содержимое WEB-страницы | ||||||||
|
Структура содержания документа | ||||||||||
| Внутренние заголовки различного уровня | <H№> текст </H№> | Где № – номер уровня заголовка (от 1 до 6). Например, <H1>…</H1> - заголовок 1-го уровня. | ||||||||
| Заголовок с выравниванием | <H№ ALIGN=”LEFT| CENTER| RIGHT”> текст </H№> | LEFT - по левому краю, CENTER - по центру, RIGHT - по правому краю. | ||||||||
|
Форматирование абзацев | ||||||||||
| Создание абзаца (параграфа) | <P> текст </P> | Абзацы отделяются двойным межстрочным интервалом | ||||||||
| Перевод строки внутри абзаца | <BR> | Одиночный тег | ||||||||
| Выравнивание абзаца | <P ALIGN=”LEFT”>текст </P> <P ALIGN= ”CENTER”>текст </P> <P ALIGN=”RIGHT”> текст</P> <P ALIGN=”JUSTIFY”> текст </P> | LEFT - по левому краю CENTER - по центру RIGHT - по правому краю JUSTIFY – по ширине | ||||||||
| Разделительная горизонтальная линия между абзацами | <HR SIZE=«?»> | Одиночный тег. «?» - толщина линии в пикселях. Толщину линии можно не указывать. | ||||||||
|
Форматирование шрифта | ||||||||||
| Жирный | <B> текст </B> | <B> Жирный </B> <I> Курсив </I> <U> Подчеркнутый </U> <S>
<SUP> Верхний индекс </SUP> <SUB> Нижний индекс </SUB> | ||||||||
| Курсив | <I> текст </I> | |||||||||
| Подчеркнутый | <U> текст </U> | |||||||||
| Перечеркнутый | <S> текст </S> | |||||||||
| Увеличенный размер | <BIG> текст </BIG > | |||||||||
| Уменьшенный размер | <SMALL> текст </SMALL> | |||||||||
| Верхний индекс | <SUP> текст </SUP> | |||||||||
| Нижний индекс | <SUB> текст </SUB> | |||||||||
| Размер шрифта | <FONT SIZE=«?»> текст </FONT> | ?- значения от 1 до 7 или относительное изменение (например, +2) | ||||||||
| Базовый размер шрифта | <BASEFONT SIZE=«?»> | Одиночный тег ? – размер от 1 до 7; по умолчанию равен 3 и задается для всего документа в целом | ||||||||
| Гарнитура шрифта | <FONT FASE=«название1, название2, …»> текст </FONT> | Текст оформляется первым, установленным на компьютере шрифтом из списка названий | ||||||||
| Цвет шрифта | <FONT COLOR=”$$$$$$”> текст </FONT> | Цвет задается либо ключевым словом, либо шестнадцатеричным кодом с символом # RED –красный, #FF0000 – шестнадцатеричный код – красного цвета | ||||||||
|
Создание списков
| ||||||||||
| Нумерованный | <OL>элементы списка</OL> | <OL> <LI>Элемент списка 1 </LI> <LI>Элемент списка 2</LI> <LI>Элемент списка 3</LI> </OL> | ||||||||
| Маркированный | <UL> элементы списка </UL> | |||||||||
| Элемент списка | <LI> элементы списка </LI> | |||||||||
Таблица основных цветов
|
Цвет |
Color's name |
Шестнадцатеричный код цвета | ||
| Red | Green | Blue | ||
| Черный | black | 00 | 00 | 00 |
| Темно-синий | navy | 00 | 00 | 80 |
| Голубой | blue | 00 | 00 | FF |
| Зеленый | green | 00 | 80 | 00 |
| Темно-зеленый | teal | 00 | 80 | 80 |
| Салатный | lime | 00 | FF | 00 |
| Бледно-голубой | aqua | 00 | FF | FF |
| Вишневый | maroon | 80 | 00 | 00 |
| Фиолетовый | purple | 80 | 00 | 80 |
| Оливковый | olive | 80 | 80 | 00 |
| Серый | gray | 80 | 80 | 80 |
| Светло-серый | silver | C0 | C0 | C0 |
| Красный | red | FF | 00 | 00 |
| Лиловый | fushsia | FF | 00 | FF |
| Желтый | yellow | FF | FF | 00 |
| Белый | white | FF | FF | FF |
Лабораторная работа №8. Вставка в HTML-документ рисунков. Создание закладок и гиперссылок
Цель работы:
- Научиться выполнять вставку рисунков в HTML-документ
- Научиться создавать закладки и гиперссылки
Задание: для изучения темы, произвести действия в соответствии с методическими указаниями
Порядок действий:
- Скопировать из Интернета или какой-либо папки в личную папку файлы три графических файла (например, wmf, Arrows2.wmf, Arrows3.wmf).
Убедиться, что созданные ранее документы 1_name.htm, 2_name.htm и 3_name.htm также находятся в вашей папке на жёстком диске.
- Вставка рисунков в документ.
- Открыть в Блокноте документ 2_name.htm.
- Вставить рисунок Arrows1.wmf в начало документа 2_name.htm. Для вставки использовать тег IMG с параметрами WIDTH и HEIGHT для установки размеров рисунка 50 пикселов по горизонтали и по вертикали.
- Сохранить документ под именем 4_name.htm.
- Просмотреть в броузере полученный результат.
- Ввести в тег рисунка параметр ALIGN для выравнивания рисунка по правому краю. Просмотреть результат в броузере.
- Вставить рисунок Arrows2.wmf в конец документа 4_name.htm перед, подобрать тип выравнивания рисунка на свое усмотрение. Установить размер рисунка 100 пикселов по горизонтали и по вертикали. С помощью параметра ALT создать всплывающую подсказку «Рисунок 2», появляющуюся при наведении курсора мыши на рисунок.
- Просмотреть в броузере полученный результат.
- Создание гиперссылок и закладок.
- В документе 3_name.htm закрепить гиперрсылки за следующими элементами списка:
За словом Шрифт – гиперссылка на документ 1_name.htm.
За словом Заголовки – на документ 1_name.htm.
За словом Абзацы - на документ 2_name.htm.
- Создать закладку в документе 1_name.htm перед фразой «Нас утро встречает прохладой». Дать ей имя «Morning».
- Изменить первую гиперссылку (слово Шрифт) так, чтобы она указывала на закладку «Morning» в документе 1_name.htm.
- Создать закладку в начале текущего документа 3_name.htm.. Присвоить ей имя «Hello».
- Изменить вторую гиперссылку (на слове Заголовки), определив для неё переход в начало текущего документа на установленную закладку «Hello».
- Создать закладку в документе 2_name.htm перед фрагментом монолога. Присвоить ей имя «Mono».
- Установить на слово переформатирования гиперссылку на закладку «Mono».
|
|
- Проверить правильность переходов по всем гиперссылкам.
- Закрепить гиперссылки за графическими файлами:
- Отредактировать тег вставки рисунка Arrows1.wmf, ввести в тег атрибут ALT для отображения текста подсказки «Вернуться». Просмотреть в броузере как реагирует рисунок на наведение курсора мыши.
- Закрепить за рисунком Arrows1.wmf в документе 4_name.htm гиперссылку на документ 3_name.htm. Выполнить переход между документами.
- Предъявить результат преподавателю.
Основные теги вставки рисунков, закладок и гиперссылок
|
Вставка изображений | |||
| Вставка графического файла | <IMG SRC=”файл” HEIGHT=”высота” > | Пример: <IMG SRC=”grafica.gif” WIDTH=”550” HEIGHT=”240” ALIGN=” right” ALT=”Графический файл”>
| |
| Выравнивание картинки относительно текста | <IMG SRC=”файл” ALIGN=”left|right|top|bottom”> | ||
| Вывод текста всплывающей подсказки при наведении курсора мыши на рисунок | <IMG SRC=”файл” ALT=”текст”> | ||
| Вставка ссылок | |||
| Ссылки на другую страницу | <A HREF=” страница”> текст </A> | <A HREF=”str2.htm”> Ссылка1</A> | |
| Ссылка на закладку в другом документе | <A HREF=” страница # имя закладки”> текст</A> | <A HREF=” index.htm #met1”> На главную страницу </A>” | |
| Ссылка на закладку в том же документе | <A HREF=”#имя закладки ”> текст </A> | <A HREF=” #metka1”> Ссылка2</A> | |
| Определить закладку | <A NAME=”имя закладки”>текст</A> | <A NAME=”metka1”></A> | |
| Цвет фона, текста и ссылок | |||
| Фоновая картинка | <BODY BACKGROUND=”файл рисунка”> | <BODY BACKGROUND =”grafica.gif” TEXT=”black” (черный) LINK=”#FF0000” (красный) VLINK=”#FFFF00” (желтый) ALINK=”#FFFFFF” (белый) </BODY> | |
| Цвет фона | <BODY BGCOLOR=”#$$$$$$”> | ||
| Цвет текста | <BODY TEXT=”#$$$$$$”> | ||
| Цвет ссылки | <BODY LINK=”#$$$$$$”> | ||
| Цвет пройденной ссылки | <BODY VLINK=”#$$$$$$”> | ||
| Цвет активной ссылки | <BODY ALINK=”#$$$$$$”> | ||
