Перейти к содержанию

Самоучитель HTML

Добавить ссылки
Материал из Викиучебника — открытых книг для открытого мира

Что такое HTML?

[править]

Термин HTML (HyperText Markup Language) означает «язык разметки гипертекста». Первую версию HTML разработал сотрудник Европейской лаборатории физики элементарных частиц Тим Бернерс-Ли.

Со времени создания первой версии HTML претерпел некоторые изменения. Как и многое другое в компьютерном мире, версии, или спецификации, HTML оказались пронумерованными. Известны спецификации 2.0, 3.2, 4.0 и 4.01. Текущую спецификацию HTML всегда можно найти на сервере W3C [1].

Всё, о чём написано в Самоучителе HTML, будет гарантированно работать с программным обеспечением, поддерживающим любую известную на сегодня спецификацию HTML. Естественно, для этого пришлось опустить некоторые детали, которые описаны не во всех спецификациях или описаны в разных спецификациях по-разному. Однако могу Вас уверить, что Ваши документы будут полностью работоспособными и вполне приличными по внешнему виду.

Что Вам понадобится для освоения HTML?

[править]

Для освоения HTML по этому Самоучителю Вам понадобятся две вещи:

  • Любой браузер, то есть, программа, пригодная для просмотра HTML-файлов.
  • Любой редактор текстовых файлов, поддерживающий русский язык в выбранной Вами кодировке. Если на Вашем компьютере установлен Windows, вполне подойдет Notepad.

Мы будем использовать текстовый редактор для подготовки HTML-файлов, а браузер — как инструмент контроля за сделанным.

Свои первые HTML-файлы Вы будете разрабатывать у себя на локальном диске. Другими словами, компьютер, на котором Вы будете заниматься, может и не иметь подключения к Интернет. При этом один и тот же *.html-файл может быть одновременно открыт и в Notepad, и в Netscape Navigator. Сохранив изменения в Notepad, просто нажмите кнопку Reload («перезагрузить») в браузере, чтобы увидеть эти изменения реализованными в HTML-документе.

Необходимое отступление о редакторах HTML

[править]

В настоящее время широко используются два типа редакторов HTML:

  • Редакторы типа «что видишь, то и получишь» (Namo WebEditor 2006, Microsoft Front Page). Пользователь не видит «внутренностей» документа, с которым он работает, точно так же, как при работе с текстовым процессором типа Microsoft Word или Word Perfect. Кстати говоря, существует довольно много конвертеров, способных преобразовывать документы, созданные в Microsoft Word или Word Perfect, в HTML-документы.
  • Редакторы собственно HTML-текстов (HotDog, Ken Nesbitt Web Editor и многие другие). В процессе работы пользователь видит внутреннее содержание HTML-файла и может изменять его либо вручную, либо вызывая команды меню для вставки определенных элементов HTML. Работа с таким редактором очень похожа на работу с интерактивной средой программирования типа Microsoft Visual Basic или Borland Delphi.

Теги HTML-документа

[править]

Как устроен HTML-документ

[править]

HTML-документ — это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ: 

<html> 
     <head> 
          <title> 
               Пример 1 
          </title>
     </head> 
     <body> 
          <H1> 
               Привет! 
          </H1> 
          <P> 
               Это простейший пример HTML-документа. 
          </P> 
          <P> 
               Этот *.html-файл может быть 
			   одновременно открыт и в Notepad, и в браузере. 
			   Сохранив изменения в Notepad, просто нажмите
			    кнопку Reload ('перезагрузить') в браузере,
				 чтобы увидеть эти изменения реализованными 
				 в HTML-документе. 
          </P> 
     </body> 
</html>

Попробуйте написать этот документ в программе Блокнот и просмотреть в браузере.

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

<html> 
<head> 
<title>Пример 1</title> 
</head> 
<body> 
<H1>Привет!</H1> 
<P>Это простейший пример HTML-документа.</P> 
<P>Этот *.html-файл может быть одновременно открыт
 и в Notepad, и в браузере. 
Сохранив изменения в Notepad, просто нажмите кнопку
 Reload ('перезагрузить') в браузере, чтобы увидеть
 эти изменения реализованными в HTML-документе.</P> 
</body> 
</html>

Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками «<» и «>». Такой фрагмент (например, <html>) называется тегом (по-английски — tag, читается «тэг»).

Большинство HTML-тегов — парные, то есть на каждый открывающий тег вида <tag> есть закрывающий тег вида </tag> с тем же именем, но с добавлением «/».

Теги можно вводить как большими, так и маленькими буквами. Например, теги <body>, <BODY> и <Body> будут восприняты браузером одинаково.

Многие теги, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущий тег. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.

Обязательные теги

[править]
<html> ... </html>

Тег <html> должен открывать HTML-документ. Аналогично, тег </html> должен завершать HTML-документ. 

<head> ... </head>

Эта пара тегов указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание тега <title> ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже. 

<meta>

Тег meta определяет кодировку сайта, хранит служебную информацию для поисковых роботов и браузеров. 

<title> ... </title>

Всё, что находится между тегами <title> и </title>, толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов. 

<body> ... </body>

Эта пара тегов указывает на начало и конец тела HTML-документа, которое и определяет содержание документа. 

<H1> ... </H1> — <H6> ... </H6>

Теги вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий. 

<P> ... </P>

Такая пара тегов описывает абзац. Всё, что заключено между 

<P>

и 

</P>

воспринимается как один абзац. Теги 

<Hi>

и 

<P>

могут содержать дополнительный атрибут ALIGN (читается «элайн», от английского «выравнивать»), например: 

<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1>

или 

<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>

Подытожим всё, что мы знаем, с помощью примера 2: 

<html> 
<head> 
<title>Пример 2</title> 
</head> 
<body> 
<H1 ALIGN=CENTER>Привет!</H1> 
<H2>Это чуть более сложный пример
 HTML-документа</H2> 
<P>Теперь мы знаем, что абзац можно выравнивать
 не только влево, </P> 
<P ALIGN=CENTER>но и по центру</P> 
<P ALIGN=RIGHT>или по правому краю.</P> 
</body> 
</html>

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

Форматирование абзаца HTML-документа

[править]

Непарные теги

[править]

В этом разделе Самоучителя HTML мы поговорим о тегах, которые не подчиняются двум основным правилам HTML: все они непарные, а некоторые (так называемые &-последовательности) к тому же должны вводиться только маленькими буквами. 

<BR>

Этот тег используется, если необходимо перейти на новую строку, не прерывая абзаца. Его можно писать разными способами. 

<BR>
</BR>
<BR/>
<BR />

Но это не обязательно. Очень удобно при публикации стихов (см. пример 3): 

<html>
<head>
<title>Пример 3</title>
</head>
<body>
<H1>Стих</H1>
<H2>Автор неизвестен</H2>
<P>Однажды в студеную зимнюю пору<BR>
Сижу за решеткой в темнице сырой.</BR>
Гляжу - поднимается медленно в гору<BR/>
Вскормленный в неволе орел молодой.</P>
<P>И шествуя важно, в спокойствии чинном,<BR />
Мой грустный товарищ, махая крылом,<BR>
В больших сапогах, в полушубке овчинном,<BR>
Кровавую пищу клюет под окном.</P>
</body>
</html>

Тег

<HR>

описывает вот такую горизонтальную линию:

Тег может дополнительно включать атрибуты SIZE (определяет толщину линии в пикселах) и/или WIDTH (определяет размах линии в процентах от ширины экрана). В примере 4 приведена небольшая коллекция горизонтальных линий: 

<html>
<head>
<title>Пример 4</title>
</head>
<body>
<H1>Коллекция горизонтальных линий</H1>
<HR SIZE=2 WIDTH=100%><BR>
<HR SIZE=4 WIDTH=50%><BR>
<HR SIZE=8 WIDTH=25%><BR>
<HR SIZE=16 WIDTH=12%><BR>
</body>
</html>

&-последовательности

[править]

Поскольку символы «<» и «>» воспринимаются браузерами как начало и конец HTML-меток, возникает вопрос: а как показать эти символы на экране? В HTML это делается с помощью &-последовательностей (их еще называют символьными объектами или эскейп-последовательностями). Браузер показывает на экране символ «<», когда встречает в тексте последовательность &lt; (по первым буквам английских слов less than — меньше, чем). Знак «>» кодируется последовательностью &gt; (по первым буквам английских слов greater than — больше, чем).

Символ «&» (амперсанд) кодируется последовательностью &amp;

Двойные кавычки (") кодируются последовательностью &quot;

Помните: точка с запятой — обязательный элемент &-последовательности. Кроме того, все буквы, составляющие последовательность, должны быть в нижнем регистре (то есть, маленькие). Использование меток типа &QUOT; или &AMP; не допускается.

Вообще говоря, &-последовательности определены для всех символов из второй половины ASCII-таблицы (куда, естественно, входят и русские буквы). Дело в том, что некоторые серверы не поддерживают восьмибитную передачу данных, и поэтому могут передавать символы с ASCII-кодами выше 127 только в виде &-последовательностей.

Комментарии

[править]

Браузеры игнорируют любой текст, помещенный между <!-- и -->. Это удобно для размещения комментариев. 

<!-- Это комментарий -->

Форматирование шрифта

[править]

HTML допускает два подхода к шрифтовому выделению фрагментов текста. С одной стороны, можно прямо указать, что шрифт на некотором участке текста должен быть жирным или наклонным, то есть изменить физический стиль текста. С другой стороны, можно пометить некоторый фрагмент текста как имеющий некоторый отличный от нормального логический стиль, оставив интерпретацию этого стиля браузеру. Поясним это на примерах.

Физические стили

[править]

Под физическим стилем принято понимать прямое указание браузеру на модификацию текущего шрифта. Например, всё, что находится между тегами 

<B>

и 

</B>

, будет написано жирным шрифтом. Текст между тегами 

<I>

и 

</I>

будет написан наклонным шрифтом. Несколько особняком стоит пара тегов 

<TT>

и 

</TT>

. Текст, размещенный между этими тегами, будет написан шрифтом, имитирующим пишущую машинку, то есть имеющим фиксированную ширину символа.

Логические стили

[править]

При использовании логических стилей автор HTML документа не может знать заранее, что увидит на экране читатель. Разные браузеры толкуют одни и те же теги логических стилей по-разному. Некоторые браузеры игнорируют некоторые теги вообще и показывают нормальный текст вместо выделенного логическим стилем. Вот самые распространенные логические стили: 

<EM> ... </EM>

От английского emphasis — акцент. 

<STRONG> ... </STRONG>

От английского strong emphasis — сильный акцент. 

<CODE> ... </CODE>

Рекомендуется использовать для фрагментов исходных текстов. 

<SAMP> ... </SAMP>

От английского sample — образец. Рекомендуется использовать для демонстрации образцов сообщений, выводимых на экран программами. 

<KBD> ... </KBD>

От английского keyboard — клавиатура. Рекомендуется использовать для указания того, что нужно ввести с клавиатуры. 

<VAR> ... </VAR>

От английского variable — переменная. Рекомендуется использовать для написания имен переменных. 

<BUTTON> ... </BUTTON> - от английского button - кнопка.Создаёт кнопку. Без тега <FORM> отображение невозможно.</BUTTON>


Подытожим наши знания о логических и физических стилях с помощью примера 5. Заодно Вы сможете увидеть, как Ваш браузер показывает те или иные логические стили.

<syntaxhighlight lang="html4strict">
<html>
<head>
<title>Пример 5</title>
</head>
<body>
<H1>Шрифтовое выделение фрагментов текста.</H1>
<P>Теперь мы знаем, что фрагменты текста можно выделять <B>жирным</B> или <I>наклонным</I> шрифтом.</P>
<P>Кроме того, можно включать в текст фрагменты с фиксированной шириной символа <TT>(имитация пишущей машинки).</TT></P>
<P>Кроме того, существует ряд логических стилей:</P>
<P><EM>EM - от английского emphasis - акцент,</EM><BR>
<STRONG>STRONG - от английского strong emphasis - сильный акцент,</STRONG><BR>
<CODE>CODE - для фрагментов исходных текстов,</CODE><BR>
<SAMP>SAMP - от английского sample - образец,</SAMP><BR>
<KBD>KBD - от английского keyboard - клавиатура,</KBD><BR>
<VAR>VAR - от английского variable - переменная.</VAR></P>
<BUTTON> - от английского button - кнопка.Без тега <FORM> отображение невозможно.</BUTTON>
</body>
</html>


Источник — https://ru.wikibooks.org/w/index.php?title=Самоучитель_HTML&oldid=226921