 |
АвтоАвтоматизацияАрхитектураАстрономияАудитБиологияБухгалтерияВоенное делоГенетикаГеографияГеологияГосударствоДомДругоеЖурналистика и СМИИзобретательствоИностранные языкиИнформатикаИскусствоИсторияКомпьютерыКулинарияКультураЛексикологияЛитератураЛогикаМаркетингМатематикаМашиностроениеМедицинаМенеджментМеталлы и СваркаМеханикаМузыкаНаселениеОбразованиеОхрана безопасности жизниОхрана ТрудаПедагогикаПолитикаПравоПриборостроениеПрограммированиеПроизводствоПромышленностьПсихологияРадиоРегилияСвязьСоциологияСпортСтандартизацияСтроительствоТехнологииТорговляТуризмФизикаФизиологияФилософияФинансыХимияХозяйствоЦеннообразованиеЧерчениеЭкологияЭконометрикаЭкономикаЭлектроникаЮриспунденкция
Заголовки
|
Читайте также: |
· От 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. Предъявить результат преподавателю.
Поиск по сайту: