Главная страница Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Заголовки
|
|
· От 1-го до 6-го уровня
Абзацы
· Выравнивание
· Разрыв строк внутри абзаца
· С использованием переформатирования.
8. Предъявить результаты работы преподавателю.
Таблица основных тегов 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> |
| Курсив | < 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 | |||
| Темно-синий | navy | |||
| Голубой | blue | FF | ||
| Зеленый | green | |||
| Темно-зеленый | teal | |||
| Салатный | lime | FF | ||
| Бледно-голубой | aqua | FF | FF | |
| Вишневый | maroon | |||
| Фиолетовый | purple | |||
| Оливковый | olive | |||
| Серый | gray | |||
| Светло-серый | silver | C0 | C0 | C0 |
| Красный | red | FF | ||
| Лиловый | fushsia | FF | FF | |
| Желтый | yellow | FF | FF | |
| Белый | white | FF | FF | FF |
Вставка в HTML-документ рисунков. Создание закладок и гиперссылок
Цель работы:
· Научиться выполнять вставку рисунков в HTML-документ
· Научиться создавать закладки и гиперссылки
1. Скопировать из Интернета или какой-либо папки в личную папку файлы три графических файла (например, Arrows1.wmf, Arrows2.wmf, Arrows3.wmf).
Убедиться, что созданные ранее документы 1_name.htm, 2_name.htm и 3_name.htm также находятся в вашей папке на жёстком диске.
2. Вставка рисунков в документ.
· Открыть в Блокноте документ 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. Создание гиперссылок и закладок.
· В документе 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».
· Проверить правильность переходов по всем гиперссылкам.
4. Закрепить гиперссылки за графическими файлами:
· Отредактировать тег вставки рисунка Arrows1.wmf, ввести в тег атрибут ALT для отображения текста подсказки «Вернуться». Просмотреть в броузере как реагирует рисунок на наведение курсора мыши.
· Закрепить за рисунком Arrows1.wmf в документе 4_name.htm гиперссылку на документ 3_name.htm. Выполнить переход между документами.
5. Предъявить результат преподавателю.