2020-07-12
148Основы HTML
Служба World Wide Web (WWW или Web) представляет собой миллионы связанных между собой документов — Web-страниц.
Web-страница — это документ (например, текстовый), размеченный с помощью специальных элементов HTML — тегов, или html-тегов, языка. Такие страницы часто называют html-страницами. Они имеют расширение.html или.htm. Например: about.html или about.htm
Специальные программы — браузеры служат для интерпретации html-тегов и отображения содержимого Web-страниц. На экран html-теги не выводятся, они только указывают браузеру, как отображать содержимое документа.
Для просмотра html-кода в браузере необходимо в верхнем меню браузера Internet Explorer найти пункт Вид/Просмотр HTML-кода.
Иными словами, в браузер встроен интерпретатор языка HTML. Интерпретаторы, встроенные в различные браузеры, работают неодинаково, и одна и та же html-страница может отображаться в них по-разному.
Что же такое HTML — Hyper Text Markup Language? Это язык гипертекстовой разметки, разработанный специально для создания Web-документов. Отметим два важных момента:
|
|
|
1) HTML не является языком программирования! В нем нет логических последовательностей. Это именно язык разметки документов (текста).
HTML определяет логическую структуру документа.
Существует два способа формирования HTML-документа.
- Первый состоит в разметке документа вручную. Для этого можно использовать текстовый редактор, например Блокнот.
- Второй способ предполагает использование специальных редакторов для языка HTML, например FrontPage Express, HomeSite. Этот способ проще освоить, т.к. он не требует знания языка HTML.
Разметка документа осуществляется с помощью тегов (англ. tag — отметка).
Все документы HTML имеют одну и ту же структуру. Документ всегда должен начинаться с тега <HTML> и заканчиваться соответствующим закрывающим тегом </HTML>.
Структура HTML-документа:
| <HTML> <HEAD> <TITLE> Заголовок документа </TITLE> </HEAD> <BODY> Тело документа </BODY> </HTML> |
По структуре видно, что документ состоит из двух частей – заголовка и тела (пары тегов <HEAD>…</HEAD> и <BODY>…</BODY> соответственно). В заголовке документа размещается некоторая информация о документе. В нашем случае это будет название документа. Оно выделяется тегами <TITLE>…</TITLE>.
Содержание документа размещается в теле документа. Заголовок первого уровня (Главы) выделяется тегами <H1> и </H1>. Заголовки последующих уровней (параграфы, пункты, подпункты и т.п.) выделяются тегами <Hx> и </Hx>, где x – числа 2, 3,… При отображении Web-обозревателем эти заголовки показываются при помощи шрифтов разного размера.
Для создания абзаца недостаточно нажать на клавишу ENTER. Язык HTML рассматривает символ конца строки, как обычный пробел. Поэтому текст, являющийся абзацем, помещается между тегами <P> и </P>. Закрывающий тег </P> является необязательным. Язык HTML не содержит средств для создания красной строки, поэтому при отображении на экране абзацы разделяются пустой строкой.
|
|
|
Теги html бывают двух типов — контейнерные и одиночные — и заключаются в угловые скобки <Имя_тега>
Контейнерные теги состоят из пары — открывающий и закрывающий тег.
Перед именем закрывающего тега необходимо ставить косую черту "/" (прямой слэш). <Имя_тега> Содержимое, обрабатываемое данным тегом </Имя_тега>.
Одиночный тег состоит только из открывающего и не требует закрывающего.
Главное преимущество HTML состоит в его способности связываться с другими документами с помощью ключевых слов, являющихся гипертекстовыми ссылками (гиперссылками). Описывается ссылка на другой документ следующим образом:
<A HREF=” имя файла ”> Текст, который будет служить как обращение к другому документу
ТАБЛИЦА 1. Основные HTML-теги
| <HTML>………….</HTML> | <Начало>………….</Конец программы на HTML > |
| <BODY>………….</BODY> | <Тело программы>………….</Закрыть> |
| <TITLE>………….</TITLE > | <Заголовок>………….</Отмена заголовка> |
| <BODY BGCOLOR=TEXT=> | Настройка цвета бумаги и цвета текста |
| <H1>………….</H1> соответственно - H2,...H6. | Используются для создания заголовков текста. Существует шесть уровней заголовков, различающихся величиной шрифта. С их помощью можно разбивать текст на смысловые уровни - разделы и подразделы. |
| <FONT COLOR=”BLACK”> | Установлен шрифт черного цвета |
| <FONT SIZE=”+2”> | Увеличить размер шрифта на 2 пункта |
| <B>………….</B> | <Жирный шрифт>………….</Закрыть> |
| <U>………….</U> | <Подчеркнутый шрифт>………….</Закрыть> |
| <S>………….</S> | <Зачеркнутый шрифт>………….</Закрыть> |
| <TT>………….</TT> | <Шрифт телетайп>………….</Закрыть> |
| <I>………….</I> | <Шрифт курсив>………….</Закрыть> |
| <SUP>………….</SUP> | <Верхний индекс символов>………….</Закрыть> |
| <SUB>………….</SAB> | <Нижний индекс символов >………….</ Закрыть > |
| <CENTER>………….</CENTER> | <Центрирование текста>………….</Закрыть> |
| <LEFT>………….</LEFT> | <Выравнивание текста по левому краю>………….</Закрыть> |
| <RIGHT>>………….</RIGHT> | <Выравнивание текста по правому краю>………….</Закрыть> |
| <MARQUEE>………….</ MARQUEE > | <Бегущая строка>………….</Закрыть> |
| <BR> | Перейти на новую строку, не начиная нового абзаца |
| <HR> | Разделительная горизонтальная линия |
| <HR ALIGN=”CENTER SIZE=”3> | Подчеркнуть Надпись линией шириной – и толщиной SIZE =… |
| <UL TYPE=”DISK> | Создание маркированного списка, тип маркера - диск |
| <LI> | Начало строки маркированного списка |
| </UL> | Отмена маркированного списка |
| <OL> <LI> Тема 1 <LI> Тема 2 </OL> | Задание нумерованного списка 1. Тема 1 2. Тема 2 </Закрыть> |
| <P>………….</P> | <Параграф>………….</Закрыть> |
| <BODY BACKGROUND=”FON.gif”> | Загрузка фона страницы из графического файл FON.gif |
| <TABLE BORDEN=”2” CELLSPACING=”1”> | Объявление таблицы с шириной бордюра = 2 и бордюром ячеек = 1 |
| <TR> | Объявление строки таблицы. Создает новый ряд (строку) ячеек таблицы. Ячейки в ряду создаются с помощью элементов TD и TH |
| <TD> | Объявление ячейки таблицы. Текст – нормальный шрифт |
| <TH> | Объявление ячейки таблицы. Текст – нормальный шрифт |
| </TABLE> | </Завершение таблицы> |
| <IMG SRC=”name.bmp”> | Загрузка картинки с именем name.bmp |
| <IMG SRC=”name.bmp” WIDTD=”300” HEIGHT=”260” ALIGN=”MIDDLE”> | Загрузка картинки с выравниванием - ALIGN и масштабированием - WIDTD, HEIGHT |
