Основы HTML
С этой главы мы начинаем непосредственную разработку веб-страниц. Они создаются с помощью HTML – языка разметки гипертекста (Hyper Text Make up Language).
Представьте себе следующую ситуацию. Преподаватель объясняет студентам, как нужно оформлять диплом: оглавление, название первой главы, основной текст главы, и т.д. Аналогично с помощью языка HTML, мы сообщаем броузеру, как он должен выводить веб-страницу на экран, задаем разметку. Как мы “размечаем” гипертекст? С помощью специальных элементов разметки – тегов. Теги, применённые к тексту, сообщают броузеру о структуре документа и о том, как документ должен выглядеть. Например, если нужно какую-то часть текста вывести жирным шрифтом, то её нужно окружить тегами выделения:
<B>Жирный текст</B>.
Тогда в окне броузера мы увидим:
Жирный текст
Существуют парные теги (состоящие из открывающего и закрывающего) и одиночные. Открывающий и закрывающий теги образуют контейнер, между ними располагается содержимое контейнера. Пример – <B>…</B>. Одиночные теги - это так называемые пустые элементы, например <BR>, <HR>.
Теги подразделяются по видам форматирования на теги структурного форматирования и теги физического форматирования. Первые задают структуру страницы, вторые – только оформление.
Структура простейшей веб-страницы:
<HTML>
<HEAD>
<TITLE>Заголовок веб-страницы </TITLE> </HEAD>
<BODY>
Текст моей первой веб-страницы
</BODY>
</HTML>
Самый большой контейнер <HTML>…</HTML>. Он вмещает в себя всё содержимое html-файла, которое в свою очередь состоит из головы и тела. Голова <HEAD>…</HEAD> содержит дополнительную информацию о документе (заголовок <TITLE>…</TITLE>, мета-информацию). Мета-информация – это информация об информации. В случае веб-страницы это информация о самой веб-
8
странице. В теле <BODY>…</BODY> располагается то, что мы выводим на экран.
Атрибуты.
Практически у любого тега существуют атрибуты, т.е. свойства, изменяющие действие этого тега. В свою очередь, почти каждый атрибут может принимать различные значения.
Синтаксис: <Имя тега Имя атрибута=“Значение атрибута”> Пример: Выравнивание по центру
<DIV ALIGN=“center”>
Атрибутов может быть несколько. Они отделяются один от другого и от имени тега пробелами.
Пример.
<BODY BGCOLOR=“black” TEXT=“silver”>…</BODY>
У некоторых тегов не существует атрибутов. Например, тег начала новой строки <BR>.
Некоторые атрибуты не имеют значений. Например, вывод на экран линии без тени:
<HR NOSHADE>
9
|
Основные теги: |
||
Теги структурного (логического) форматирования: |
|||
|
|
|
|
<P>…</P> |
|
|
Абзац |
<CENTER>…</CENTER> |
|
|
Центрирование |
<BLOCKQUOTE>…</BLOCKQUOTE> |
Цитата |
||
<H1>…</H1> |
|
|
|
<H2>…</H2> |
|
|
Заголовки разных уровней. |
<H3>…</H3> |
|
|
|
|
|
Н1 – самый большой, |
|
<H4>…</H4> |
|
|
|
|
|
Н6 – самый маленький |
|
<H5>…</H5> |
|
|
|
|
|
|
|
<H6>…</H6> |
|
|
|
<BR> |
|
|
Переход на новую строку |
<DIV>…</DIV> |
|
|
Выравнивание |
<PRE>…</PRE> |
|
|
Преформатированный текст1 |
<HR> |
|
|
Горизонтальная линейка |
<ADDRESS>…</ADDRESS> |
|
|
Подпись автора или адрес орга- |
|
|
|
низации |
<!-- … --> |
|
|
Комментарии2 |
Теги физического форматирования: |
|||
|
|
|
|
<B>…</B> |
|
Жирный |
|
<I>…</I> |
|
Курсив |
|
<U>…</U> |
|
Подчёркнутый |
|
<STRIKE>…</STRIKE>, |
|
Перечёркнутый |
|
<S>…</S> |
|
||
|
|
|
|
<SUB>…</SUB> |
|
Нижний индекс |
|
<SUP>…</SUP> |
|
Верхний индекс |
|
<TT>…</TT> |
|
Печатная машинка (моноширинный |
|
|
|
текст) |
|
<BIG>…</BIG> |
|
Увеличенный шрифт (на один пункт |
|
|
|
больше) |
|
<SMALL>…</SMALL> |
|
Уменьшенный шрифт (на один пункт |
|
|
|
меньше) |
|
<FONT>…</FONT> |
|
Тег, задающий размер, цвет и начертание |
|
|
|
шрифта |
|
1 Преформатированный текст – текст, в котором сохранены все отступы, созданные с помощью клавиш “пробел” и “Enter”
2 Данный тег позволяет скрыть любой кусок текста или html-кода
10
Правила написания HTML-кода.
1.имена тегов и имена атрибутов регистронезависимы3 Пример.
html-код:
<B>Жирный текст</b> <b>Жирный текст</B> <b>Жирный текст</b> Вид в окне броузера:
Жирный текст
Жирный текст Жирный текст
3 Рекомендуется имена тегов и атрибутов писать в верхнем регистре. Для удобства их отличия от остального текста.
11