Структура команд языка html
Термины
Приведем некоторые термины, которые вам будут встречаться далее.
- WWW — общеизвестная аббревиатура World Wide Web, синоним Интернета.
- Web — сокращенное название World Wide Web.
- Веб-страница (Web Page) — отдельный документ (текстовый файл, подготовленный специальным образом), хранящийся в Интернете.
- Веб-браузер — программное обеспечение, необходимое для вывода на экран веб-страницы.
- Сайт (site) — набор веб-страниц, принадлежащих одному владельцу.
- Домашняя страница (Home Page) — главная (титульная) страница сайта.
- URL — унифицированный указатель ресурсов (Uniform Resource Locator), используется для указания адреса страницы в WWW.
- Веб-сервер — компьютер со специальным программым обеспечением, на котором должны помещаться веб-страницы, для того, чтобы их можно было увидеть в Интернете.
Что такое гипертекст?
Основное достоинство WWW состоит в создании гипертекстовых документов, и если вас заинтересовал какой либо пункт в таком документе, то достаточно «ткнуть» в него курсором для получения нужной информации. Также в одном документе возможно делать ссылки на другие, написанные другими авторами или даже расположенные на другом сервере. Одно из главных преимуществ WWW над другими средствами поиска и передачи информации — «многосредность». В WWW можно увидеть на одной странице одновременно текст и изображение, звук и анимацию. Очень кратко об истории гипертекста можно прочитать на сайте Артемия Лебедева.
Что такое HTML?
HTML расшифровывается как Hyper Text Markup Language, т.е. язык разметки гипертекста. Это стандарт, в соответствии с которым веб-документы отображаются браузерами. Как ясно из названия, HTML — это метод разметки простого текста таким образом, чтобы браузер отображал информацию в нужном формате. Файлы, содержащие текст с html-разметкой, должны иметь расширение htm или html.
Команды языка HTML называются тегами (tag), они указывают, какую операцию необходимо выполнить, например, вывести на экран текст, нарисовать линию или использовать графику. Содержащиеся в тексте теги могут изменять шрифты, стили и создавать специальные эффекты. Это позволяет обеспечить интересный графический интерфейс при отображении стандартного текстового файла. Кроме изменения стиля текста, HTML также сообщает браузеру, когда некий текст на странице должен считаться гипертекстовой ссылкой, в каком месте вставить графические и специальные элементы, команды отправки почты и другие специальные возможности.
HTML не является языком программирования в полном смысле слова. У него специфический формат, который является мировым стандартом. Этот стандарт называется Document Type Definition (Определение типа документа), или DTD. Первым DTD-стандартом на HTML, представленным в Интернете, была версия 1.0. Затем была создана версия 2.0 для WWW, более продуманная. Сейчас стандартом является HTML версии 4.0.
Структура команд языка HTML
Команды (теги) языка HTML заключаются в угловые скобки:
<название_команды> - начало команды
поле действия команды
</название_команды> - конец команды
Стандарт языка HTML требует обязательного присутствия тега «конец команды», кроме особо оговоренных случаев.
Самой первой командой html-документа является команда <html>, соответственно самой последней командой будет — </html> (произносится«не html»).
А в целом, структура html-документа имеет следующий вид:
т.е. четко выделяются два раздела: <head> («голова») и <body> («тело»).
ЗАМЕЧАНИЕ. Язык HTML не чувствителен к регистру. Команды языка могут набираться как прописными так и строчными буквами, т.е. команда<body> эквивалентна команде <BODY> или <Body>.
Если браузер не поддерживает команду, он ее просто игнорирует.
Самой первой строкой html-документа является служебная команда, которая позволяет броузеру идентифицировать тип документа (DOCTYPE), как документ в стандарте HTML 4.0, определенном IETF (Internet Engineering Task Force). В этой строке также указывается соответствующий DTD (Document Type Declaration — описание типа документа): документ есть PUBLIC (т.е. не зависит от системных установок) и язык документа — русский (RU).
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 4.0//RU">
В головной части html-документа располагается команда, выводящая название страницы в заголовок окна браузера (синяя полоса в самом верху окна):
<title>Название страницы</title>
Собственно текст, который должен быть в html-документе, помещается между командами <body> и </body>, например:
<html>
<head>
<title>Пример HTML-текста</title>
</head>
<body>
Добро пожаловать в HTML!
</body>
</html>
Для того, чтобы увидеть как будет выглядеть этот пример в браузере, необходимо все скопировать в Блокнот, сохранить файл под именем primer.htm, а затем в Проводнике щелкнуть мышью по названию файла — в результате этого данный html-документ автоматически откроется в окне Internet Explorer:
Атрибуты
Команды могут иметь параметры, которые называются атрибутами. Атрибуты модифицируют исполнение команды, ставятся сразу после названия команды, внутри угловых скобок, и имеют следующий формат:
АТРИБУТ="значение_атрибута"
Если значение_атрибута состоит из одного слова, то ставить кавычки не обязательно. Если же значение_атрибута содержит пробелы или небуквенные символы, то кавычки обязательны.
Если команда имеет несколько атрибутов, то они разделяются пробелами:
<название_команды
атрибут1="значение_атрибута1"
атрибут2="значение_атрибута2">
В качестве примера атрибутов рассмотрим команду <meta>, которая задает кодировку Windows для букв русского алфавита и располагается строго внутри раздела <head>:
<html>
<head>
<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=Windows-1251">
<title>Пример атрибутов</title>
</head>
<body>
...
</body>
</html>
Если же команду <meta> пропустить, то возможны ситуации, когда на экране браузера вместо русских букв будут «кракозябры». А при использовании этой команды такого не произойдет!
Html-редакторы
Все html-документы записываются как обычный текст, поэтому могут быть созданы и отредактированы в любом текстовом редакторе, например, в Блокноте. Но гораздо удобнее использовать специализированные html-редакторы, например UltraEdit (лицензионный) или Smart Web Builder(бесплатный).
В этих редакторах все команды языка HTML отображаются одним цветом, а атрибуты команд — другим. Тогда как просто текст будет черного цвета. Благодаря этому, если в названии команды (или атрибута) будет допущена ошибка, оно отобразится черным цветом, как обычный текст.
Цвет в html-документе
Команда <body> имеет несколько атрибутов.
Атрибут bgcolor= позволяет задать цвет фона страницы:
<body bgcolor="yellow">
Эта страница имеет желтый фон.
</body>
Задание цвета можно производить двумя способами:
- Заданием имени выбранного цвета.
- Заданием номера цвета в виде соотношения оттенков красного, зеленого и синего (Red-Green-Blue=RGB).
RGB-номер цвета задается либо тремя двухзначными шестнадцатиричными (HEX) числами (перед номером обязательно ставится знак #), либо с помощью встроенной функции rgb(), каждый из трех аргументов которой может меняться от 0 до 255, например: rgb(153,102,255). Каждое число из интервала [00–FF] ([0–255]) определяет интенсивность соответствующего цвета.
Например, номер цвета "#FF0000"=rgb(255,0,0) соответствует красному цвету (Red), так как имеет максимальную интенсивность для красной составляющей, а зеленая и голубая составляющие имеют значения равные нулю. Аналогично, номер "#00FF00"=rgb(0,255,0) соответствует зеленому цвету (Green), а номер "#0000FF"=rgb(0,0,255) — синему (Blue).
Существуют 16 стандартных имен цветов, поддерживаемыми Windows:
| Black = "#000000" | Green = "#008000" | ||
| Silver = "#C0C0C0" | Lime = "#00FF00" | ||
| Gray = "#808080" | Olive = "#808000" | ||
| White = "#FFFFFF" | Yellow = "#FFFF00" | ||
| Maroon = "#800000" | Navy = "#000080" | ||
| Red = "#FF0000" | Blue = "#0000FF" | ||
| Purple = "#800080" | Teal = "#008080" | ||
| Fuchsia = "#FF00FF" | Aqua = "#00FFFF" |
Помимо этих 16 имен цветов, существует еще расширенная таблица цветов. Названия цветов из этой таблицы использовать можно, но все же надежнее задавать RGB-номер. Дело в том, что хотя задание Red-Green-Blue теоретически позволяет выводить «миллион» цветов, на самом деле все определяется видеокартой и монитором, которые использует клиент.
При создании изображения для публикации в Интернете главной проблемой является правильная передача цветов на разных типах компьютеров, мониторов и браузеров. Когда браузер не в состоянии правильным образом передать тот или иной цвет, он подбирает другой цвет или смешивает несколько соседних цветов. Иногда цвет может быть заменен на что-то совершенно неподходящее. Поэтому была разработана так называемая«безопасная» палитра цветов. При использовании цветов из этой палитры вы можете быть уверены в том, что каждый цвет будет передан правильным образом и без искажений. Любой из 216 цветов «безопасной» палитры может быть использован для графики, текста и фонов. Палитра состоит из 32 сочетаний 6 оттенков красного, зеленого и синего.
Заголовки
Язык HTML имеет шесть уровней заголовков, имеющих номера с 1 по 6 (заголовок первого уровня является заголовком самого большого размера). По сравнению с нормальным текстом, заголовки выделяются жирным шрифтом автоматически.
Синтаксис заголовков:
<h1 align=center>Самый большой заголовок, расположенный по центру</h1>
<h4 align=right>Средний по размеру заголовок, расположенный как?</h4>
<h6>Самый маленький заголовок</h6>
здесь h — собственно команда задания заголовка (Header), а число от 1 до 6, определяет размер заголовка,
align= — атрибут, задающий расположение заголовка на экране:
align=left — разместить слева (принято по умолчанию, т.е. можно не указывать)
align=center — разместить по центру окна
align=right — разместить справа в окне браузера.
Абзацы
Команда задания абзаца <p> также имеет атрибут align=, который, кроме указанных выше трех значений, может иметь еще значение justify:
<p align=justify>
устанавливающее выравнивание правого края текста на экране (как это сделано в данном тексте).
В отличие от документов, созданных в редакторе Word, в html-документах прерывания строк не существенны. Обрыв строки может происходить на любом пробеле в вашем исходном файле, при просмотре это прерывание будет проигнорировано. Например:
<h1 align=center>Глава 1</h1>
<p>Добро пожаловать в HTML!
Здесь будет рассказано, как надо и как не надо делать веб-страницы.
<p align=right>Это не так сложно.
В исходном файле два предложения первого абзаца находятся на двух разных строках. Браузер игнорирует это перерывание строки и начинает новый абзац только после команды <p>:
| Глава 1 Добро пожаловать в HTML! Здесь будет рассказано, как надо и как не надо делать веб-страницы. Это не так сложно. |
Однако, чтобы сохранить удобочитаемость в исходных html-файлах, рекомендуется заголовки размещать на отдельных строках, а абзацы отделять пустыми строками (в дополнение к команде <p>).
Прерывание строки
Используя команду <br> можно перейти на новую строку, не начиная нового абзаца (в большинстве браузеров абзацы выделяются дополнительными пустыми строками). Например, строка
Факультет<br>на котором мы учимся
будет выглядеть на экране так:
| Факультет на котором мы учимся |
Неразрывный пробел
Поскольку браузер игнорирует перерывание строки в html-файле, где на самом деле закончится одна строка на экране и начнется другая — зависит от размера шрифта на экране у клиента. Кроме того, браузер игнорирует и любое количество пробелов между словами — все пробелы заменяются одним. Поэтому, если требуется поставить подряд несколько пробелов, применяется так называемый символьный примитив «неразрывный пробел», который начинается амперсандом (&) и заканчивается точкой с запятой: (сокращение от Non Break SPace).
Символьные примитивы чувствительны к регистру: НЕЛЬЗЯ использовать &Nbsp; вместо .
Например, строка
Факультет на котором мы учимся
будет выглядеть на экране так:
| Факультет на котором мы учимся |
Так как браузер обрывает строку на пробеле, то возможна ситуация, когда, например, инициалы останутся на одной строке, а фамилия «переедет» на другую. Чтобы этого не происходило, между инициалами и фамилией обязательно следует ставить неразрывный пробел.
В русской типографике существуют жёсткие правила расстановки символа неразрывного пробела.
Символ неразрывного пробела (обозначим его как •) ставится в следующих случаях.
- Перед тире:
Это•— пример
т.е. тире не имеет права начинать строку, если это не начало предложения с прямой речью. - Между двумя инициалами и инициалами и фамилией:
И.•И.•Иванов
т.е. вариант совсем без пробелов: И.И.Иванов — категорически недопустим! - Между знаком номера (№) или параграфа (§) и идущими следом цифрами:
№•7, §•3
и здесь вариант без пробела: №7 — типичнейшая грубейшая ошибка! - Между числом и идущей следом единицей измерения:
XVIII•в., 10•кг, 2000•г. - Между сокращённым обозначением и фамилией:
г-н•Петров - После географических сокращений:
г.•Новосибирск, р.•Обь
Сдвиг текста
Для вывода на экран текста с небольшим сдвигом вправо (от левого края экрана), например стихов, применяются команды <blockquote> и</blockquote>:
<blockquote> Факультет<br>на котором мы учимся </blockquote>
будет выглядеть на экране так:
| Факультет на котором мы учимся |
Cписки
Сегодня списки можно увидеть почти на каждой веб-странице. Существует несколько форматов списков, позволяющих выделить определенные фрагменты информации в стандартном тексте. В обычном абзаце текст переносится со строки на строку. Текст в списках выглядит по-другому. Пункты списка отступают от полей, отделены от остальных абзацев текста и, кроме того, маркированы или нумерованы.
При правильном использовании списки делают большие объемы информации легко читаемыми и хорошо заметными. Списки могут быть вложены друг в друга, образуя сложную структуру. Вы можете, например, использовать список для организации ссылок.
Существует три основных типа списков: маркированные (ненумерованные), нумерованные и списки определений. Они сходны в том, что все они располагают каждый пункт на новой строке, и вы можете выделить нужный текст. Главное различие перечисленных типов состоит в способе нумерации и структуре.
Маркированный список
Наиболее часто используется ненумерованный, или маркированный список. Каждый пункт такого списка начинается с миниатюрной пиктограммы.
Маркированный список задается командами <ul> и </ul> (Unordered List), а пункты списка между командами — с помощью команды <li> (List Item).
Например, список
<h4>Системы счисления</h4>
<ul>
<li>Непозиционные
<li>Позиционные
</ul>
будет выглядеть так:
Системы счисления
|
Команда задания списка <ul> имеет атрибут type=, который устанавливает вид маркера у элементов списка:
<ul type=disc> — черный кружок (значение по умолчанию)
<ul type=circle> — светлый кружок
<ul type=square> — квадратик
Если один список вложен в другой, то вид маркера меняется автоматически:
<h4>Системы счисления</h4>
<ul type=square>
<li>Непозиционные
<ul>
<li>Древнеегипетская
<li>Римская
<li>Старославянская
</ul>
<li>Позиционные
<ul>
<li>Вавилонская
<li>Индийская
</ul>
</ul>
На экране это выглядит так:
Системы счисления
|
Нумерованный список
Нумерованный список очень напоминает маркированный. Единственным отличием является то, что в нумерованном списке перед каждым пунктом вместо графических маркеров автоматически помещаются последовательные номера или буквы. Благодаря этому вам не придется вручную набирать номер каждого пункта списка.
Нумерованный список задается с помощью команд <ol> (Ordered List) и </ol>. Как и в маркированном списке, каждый пункт задается командой <li>, например:
<h4>Системы счисления</h4>
<ol>
<li>Непозиционные
<li>Позиционные
</ol>
будет выглядеть так:
Системы счисления
|
Как видите, в исходном файле номеров (1, 2) рядом с элементами списка нет.
По умолчанию списки HTML автоматически нумеруются с помощью арабских цифр — 1, 2, 3 и т. д. Вы можете задать другой способ нумерации, например буквы (прописные или строчные) или римские цифры. Чтобы изменить стандартный тип нумерации, добавьте в команду <ol> атрибут type=.
Ниже приведены пять возможных способов нумерации:
<ol type=1>: стандартная цифровая нумерация — 1, 2, 3, ...
<ol type=A>: прописные буквы — A, B, C, D, ...
<ol type=a>: строчные буквы — a, b, c, d, ...
<ol type=I>: римские цифры — I, II, III, IV, V, ...
<ol type=i>: строчные римские цифры — i, ii, iii, iv, v, ...
Если необходимо, чтобы нумерация списка начиналась с определенного номера, надо добавить в команду <ol> еще атрибут start=, например,<ol start=10>.
Вложенный список
<h4>Системы счисления</h4>
<ol type=I>
<li>Непозиционные
<ol type=a>
<li>Древнеегипетская
<li>Римская
<li>Старославянская
</ol>
<li>Позиционные
<ol type=i start=4>
<li>Вавилонская
<li>Индийская
</ol>
</ol>
на экране выглядит так:
Системы счисления
|
Список определений
Хотя списки определений используются не так часто, как маркированные или нумерованные списки, они также могут быть полезны в некоторых случаях. В списке определений для каждого пункта предоставляется не одна, а две строки, что может быть полезно когда вы приводите дополнительную информацию.
Списки определений выглядят несколько иначе, чем другие типы списков. Для задания собственно списка применяются команды <dl> (Definition List) и </dl>. Для описания каждого пункта списка в этом случае применяется две команды, а не одна. Команда <dt> (Definition Term) задает отдельный элемент, то есть определяемый термин, а команда <dd> (Definition Description) — остальную информацию, которая выводится на следующей строке с отступом. Вторая строка информации называется определением.
Пример списка определений:
<dl>
<dt>ММФ
<dd>Механико-математический факультет.
<dt>ФИТ
<dd>Факультет информационных технологий.
</dl>
на экране выглядит так: