Главная страница Случайная страница
КАТЕГОРИИ:
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника
Теоретическая часть. Тема.Создание HTML-документа.
|
|
Лабораторная работа № 21
Тема. Создание HTML-документа.
Цель работы. Научиться создавать гипертекстовый документ средствами Блокнот с использованием простейших тэгов.
Оборудование. ПК Pentium.
Ход работы
1. Ознакомиться с теоретической частью.
2. Выполнить практическое задание.
3. Ответить на контрольные вопросы.
4. Оформить отчет.
Теоретическая часть
Стандарт HTML является основой для составления документов, публикующихся в WEB-службе.
Документ, написанный на языке HTML, представляет собой текст, в который вписаны тэг и (markup tags) или тэг и разметки. Тэги помогают программе просмотра разобраться, как должен быть расположен текст на экране, в каком месте будут находиться рисунки, хранящиеся в совсем других файлах, и т.д. С помощью тэгов формируются связи с другими web-документами и ресурсами Интернета. Текст с тэгами называется исходным кодом (Source). Просмотреть готовый файл, написанный на HTML, можно в программах-браузерах. На экране просмотра тэги не отображаются.
Тэг и – определенные последовательности символов, заключенные между знаками < (больше)? который обозначает начало тэга, и > (меньше), означающий конец тэга. Все, что заключено между тэгами, является HTML-документом.
Любой HTML-документ состоит их двух частей. Первая часть – заголовок, который находится между тэгами < HEAD > и < / HEAD >. В нем содержится информация о документе, которая не выводится на экран. Название странички располагается между тэгами < TITLE > и < / TITLE > и появляется в верхней части окна программы просмотра. Прописные или строчные буквы, используются в написание тэгов, значения не имеет. Компьютер одинаково отреагирует на записи < title > и < TITLE >. Вторая часть – тело, которое выводится на экран программой просмотра – текст, картинки, видеофрагменты и т.д. Оно заключается между тэгами < BODY > и < / BODY>.
Форматирующие тэги бывают парными и непарными, открывающими и закрывающими. Область действия парного тэга начинается с того места, где стоит открывающий тэг, а кончается там, где встречается закрывающий. Признак закрывающего тэга – символ /. Почти все форматирующие тэги всегда следуют парами, и для открывающего тэга должен существовать закрывающий. Непарных тэгов мало, например, для перехода на новую строку используется тэг < br > (Line Break).
Основные тэги приведены в табл.1, основные тэги вставки рисунков, закладок и гиперссылок в табл.2. Таблица основных цветов представлена в табл. 3.
Таблица 1 – Основные тэги 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> Перечеркнутый< /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> |
Таблица 2 – Основные тэги вставки рисунков, закладок и гиперссылок
| Название | Вид тэга | Пример | |
| Вставка изображений | |||
| Вставка графического файла | < IMG SRC=”файл” WIDTH=”ширина” 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=”#$$$$$$”> | ||
Таблица 3 – Таблица основных цветов
| Цвет | 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 |
Контрольные вопросы
1. Из каких частей состоит HTML-документ и каково их назначение?
2. Что такое тэг и для чего он используется?
3. Какие бывают тэги? Приведите примеры.
4. В какой системе исчисления кодируются цвета при создании HTML-документов?