Советы по HTML и Web-дизайну. Примеры страниц

Kruphi kruphi@yandex.ru

HTML: краткие сведения-1

Теги
Пробелы, разрыв строки, комментарии
Структура web-страницы
Оформление страницы (некоторые теги)

HTML – язык разметки гипертекста (HyperText Markup Language).
Гипертекст – текст + ссылки для автоматического перехода (гиперссылки).
Разметка – указания к оформлению и расположению текста и других элементов на странице.

HTML = гипертекст + теги разметки

В начало страницы

Тег (tag) заключается в угловые скобки <...>.
Область действия тега – между открывающим и закрывающим тегами.
Открывающий тег может содержать параметры.
Закрывающий тег начинается с символа слеш </...>.
Регистр при написании имен тегов и параметров не важен.
Тег неизвестный браузеру – игнорируется.

тег (открывающий, параметры, область д-вия, закрывающий)

Вложенные теги: Теги могут вкладываться друг в друга как матрешки. Вложенный тег должен заканчиваться до закрытия внешнего.

`<font size="+3">большой текст <b>полужирный</b></font>`	- правильно
`<font color="#BB0000">красный текст <b>добавим жирности</font> не красный</b>`	- не правильно

Пробелы, разрыв строки, комментарии...

Внутри документа HTML (web-страницы):

Несколько пробелов или несколько новых строк игнорируются - считаются за один пробел.
Для указания новой строки используйте тег разрыва строки <br>.
Текст, заключенный в блок (<p>...</p>, <h1>...</h1> и т.д), автоматически начинается с новой строки.
Пропускаются текст и теги внутри комментария: .
Только текст в пердварительно форматированном блоке (<pre>...</pre>) отображается "как есть", т.е. со всеми пробелами и разрывами строк.

В начало страницы

Структура web-страницы

Первым идет необязательный тег <!DOCTYPE..., задющий формат документа: html, xml и их версию.

Тег <html>...</html> определяет границы HTML-документа, который делится на голову - <head>...</head> и тело - <body>...</body>.

Между <head>...</head> задаются общие свойства документа, например, текст заголовка <title>...</title>, дополнительная информация <meta> (в частности тип документа и кодировка <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">), данные для поисковых серверов и т.д.

Внутри тега <body>...</body> собственно и пишется визуальная часть документа.

Структура web-страницы (<html>, <head>, <body>)

В начало страницы

Оформление страницы (некоторые теги)

`<body>` - обрамляет видимую часть страницы и задает общие цвет (текста, ссылок, фона), отступы.
Текст (символ) Физическое форматирование: `<i>...</i>` – курсив; `<b>...</b>` – полужирный; `<u>...</u>` – подчеркнутый; `<s>...</s>` – перечеркнутый; `<sub>...</sub>` – нижний индекс; `<sup>...</sup>` – верхний индекс; `<font>...</font>` – размер, цвет и шрифт текста. Логическое форматирование: `<em>...</em>` – выделенный (курсив); `<strong>...</strong>` – усиленный (полужирный). `<span>...</span>` – контейнер текста.	Блок (абзац) `<p>...</p>` – параграф (абзац); `<hn>...</hn>` – заголовки (шесть уровней: n=1...6); `<pre>...</pre>` – предварительно форматированный текст; `<div>...</div>` – контейнер блока; `<center>...<center>` – центрирование; `<nobr>...</nobr>` – запрет разрыва строки; `<br>` – разрыв строки текста; `<hr>` – разделительная линия.	Список `<ul>...<ul>` – маркированный список; `<ol>...</ol>` – нумерованный список; `<li>` – элемент списка.	Таблица `<table>...</table>` – таблица; `<tr>...</tr>` – строка ячеек; `<td>...</td>` – ячейка; `<th>...</th>` – ячейка с заголовком (текст – полужирный, горизонтальное выравнивание – по центру); `<caption>... </caption>` – подпись около таблицы.

В начало страницы