Помощничек
Главная | Обратная связь


Археология
Архитектура
Астрономия
Аудит
Биология
Ботаника
Бухгалтерский учёт
Войное дело
Генетика
География
Геология
Дизайн
Искусство
История
Кино
Кулинария
Культура
Литература
Математика
Медицина
Металлургия
Мифология
Музыка
Психология
Религия
Спорт
Строительство
Техника
Транспорт
Туризм
Усадьба
Физика
Фотография
Химия
Экология
Электричество
Электроника
Энергетика

HTML - язык World Wide Web



Документ HTML состоит из специальных команд, определяющих форму его отображения при просмотре. Для создания документа воспользуйтесь одним из существующих редакторов (Блокнот, FAR, Microsoft FrontPage).

Для просмотра документов используется специальная программа - "браузер", например, Netscape Navigator или Explorer. Для редактирования программы щелкните правой клавишей мыши по пустому месту документа и выберите ПРОСМОТР HTML-кода.

 

Структура HTML документа

Символы, заключенные в угловые скобки <> являются HTML командами (тегами), по которым "браузер" распознает, как следует преобразовать части текста, заключенные между этими командами. Документ должен начинаться командой <HTML> и заканчиваться командой </HTML>.

Документ состоит из 2 частей: Заголовка (Head) и Собственно документа (Body). Для выделения заголовка следует ввести: <HEAD> Заголовок документа </HEAD>. Каждый WWW - документ имеет название, которое вводится в титульной строке "браузера".

Для ввода титульной строки в заголовок документа следует воспользоваться следующими командами: <HEAD><TITLE>

Title of Document </TITLE></HEAD>

Для записи основного текста следует ввести <BODY> Основной текст </BODY>.

Таким образом, общая схема документа в формате HTML выглядит следующим образом:

<HTML>

<HEAD>

<TITLE> Заголовок страницы, отображаемый браузером </TITLE>

</HEAD>

<BODY> Основной текст документа и дополнительные теги, указывающие на другие объекты.

</BODY>

</HTML>

Задание №1. Создать Web-страницу, предлагаемую в данной лабораторной работе.

Порядок выполнения работы: следуя нижеприведенным указаниям выполняйте предлагаемые действия, в результате чего вы должны получить Web-страницу, содержащую основные компоненты языка HTML.

Создайте с помощью текстового редактора свой файл, состоящий из приведенных выше команд. Файл должен иметь расширение .htm. При помощи браузера просмотрите созданный файл. Обратите внимание, где располагается заголовок TITLE и где - основная информация (body).

При написании команд HTML не имеет значение, какими буквами - строчными или прописными Вы пишете команды.

Метки для абзацев и другое.

В документе HTML невозможно создать абзац, используя клавишу [Enter].

Для перехода на следующую строку воспользуйтесь командой <br>

Для создания пустой строки воспользуйтесь командой <p>

Для создания горизонтальной черты воспользуйтесь командой <hr>

Заголовки в документе создаются с помощью команд: <Hi> Заголовок </Hi>

причем при i = 1 заголовок самый крупный, а при i = 6 - самый мелкий.

Добавьте в Ваш файл следующий текст и просмотрите результат.

<P> Новый абзац

<HR> Горизонтальная линия

<BR> Конец строки

Заголовки <H1> Самый большой </H1>

<H6> Самый маленький</H6>

Создание списков

Списки предназначены для представления информации в упорядоченном виде.

В HTML - документах используется 3 вида списков:

1.Неупорядочные списки (Тег <UL>),

2. Маркированные списки (Тег <OL>),

Элемент списка задается тегом <LI>.

Добавьте в файл следующий текст и запустив браузер, посмотрите результат.

 

<P> Маркированный список.

<UL>

<LI>Первый маркер.

<LI>Второй маркер.

</UL>

Нумерованный список.

<OL>

<LI>Первый маркер.

<LI>Второй маркер.

</OL>

 

Метки форматирования

Для выделения отдельных частей текста можно воспользоваться следующими стилями:

- жирный (Bold);

- курсив (Italic);

- с подчеркиванием (Underline);

Для выделения текста жирным шрифтом воспользуйтесь командами:

<b> text </b>

Для выделения текста курсивом воспользуйтесь командами:

<i> text </i>

Для выделения текста подчеркиванием воспользуйтесь командами:

<u> text </u>

Одинаковая ширина символов текста:

<TT> text </TT>

Сохранение всех пробелов и других форматирующих символов:

<PRE> text </PRE>

Самостоятельно вставьте в файл указанные выше теги и просмотрите результат через браузер.

 

Управление цветом

Для изменения цвета текущего текста можно в любом месте домашней страницы воспользоваться

командами:

<FONT COLOR= Код цвета > Текущий текст </FONT COLOR>

Определено несколько именованных цветов. Их значения видны из таблицы:

 

Отображаемый текст Запись в формате HTML

black <FONT COLOR= black > black </FONT COLOR>

maroon <FONT COLOR= maroon > maroon </FONT COLOR>

green <FONT COLOR= green > green </FONT COLOR>

olive <FONT COLOR= olive > olive </FONT COLOR>

navy <FONT COLOR= navy > navy </FONT COLOR>

purple <FONT COLOR= purple > purple </FONT COLOR>

teal <FONT COLOR= teal > teal </FONT COLOR>

gray <FONT COLOR= gray > gray </FONT COLOR>

silver <FONT COLOR= silver > silver </FONT COLOR>

red <FONT COLOR= red > red </FONT COLOR>

lime <FONT COLOR= lime > lime </FONT COLOR>

yellow <FONT COLOR= yellow > yellow </FONT COLOR>

blue <FONT COLOR= blue > blue </FONT COLOR>

fuchsia <FONT COLOR= fuchsia > fuchsia </FONT COLOR>

aqua <FONT COLOR= aqua > aqua </FONT COLOR>

white <FONT COLOR= white > white </FONT COLOR>

Создание таблиц

В HTML начало таблицы задается тегом <TABLE> и следующими атрибутами:

 

- BORDER - определяет линии, разграничивающие клетки в таблице. Ширина линии задается командой BORDER = N.

- BGCOLOR - Определяет цвет фонового изображения в таблице.

- CAPTION - название таблицы.

- ALIGN = TOP/BOTTOM - расположение названия таблицы (сверху и внизу).

Теги:

- <TR> - задает начало строки.

- </TR> - задает конец строки.

- <TH> - задает начало блока заголовков столбцов.

- </TH> - задает конец блока заголовков столбцов.

- <TD> - задает текстовое содержание ячейки данных на данной строке.

- </TD> - закрывает текстовое содержание ячейки.

Тег </TABLE> является конечным тегом таблицы.

Добавьте в Ваш файл следующие строки:

 

<TABLE BORDER = 1 >

<CAPTION ALIGN = BOTTOM> Текст названия </CAPTION>

<TR>

<TH>Заголовок 1-го столбца</TH>

<TH>Заголовок 2-го столбца</TH>

<TH>Заголовок 3-го столбца</TH>

</TR>

<TD> Ячейка (1 строка, 1 столбец) </TD>

<TD> Ячейка (1 строка, 2 столбец) </TD>

<TD> Ячейка (1 строка, 3 столбец) </TD>

</TR>

<TR>

<TD> Ячейка (2 строка, 1 столбец) </TD>

<TD> Ячейка (2 строка, 2 столбец) </TD>

<TD> Ячейка (2 строка, 3 столбец) </TD>

</TR>

</TABLE>

 




Поиск по сайту:

©2015-2020 studopedya.ru Все права принадлежат авторам размещенных материалов.