Отправляет email-рассылки с помощью сервиса Sendsay

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

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Заметки Дизайнера" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

  Июнь 2007   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Автор
ImHoster.net

Статистика

8.556 подписчиков
-7 за неделю
←   Все выпуски   →

Самоучитель по HTML и CSS - 1


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

Добрый день.

Поскольку это первый выпуск рассылки, то сегодня хотел бы сразу оговорить некоторые моменты. Во-первых, эта рассылка ограничена по времени, иными словами, она будет выходить до тех пор, пока не закончится список уроков, их ориентировочно 40-50. Во-вторых, это самоучитель, поэтому к материалам прилагается набор вопросов для самопроверки и задачи. Ответы и решения на них будут даваться в последующих выпусках.

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

В процессе выхода рассылки она может видоизменяться, например, материалы по HTML и CSS станут перемежаться, а не выходить в одном выпуске. Свои предложения и размышления по этому поводу шлите мне на ящик vlad@htmlbook.ru.

Соглашения

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

В качестве основного браузера берется Firefox, он наиболее полно отвечает спецификациям HTML и CSS. В других браузерах примеры также будут работать, но код и скриншоты в первую очередь "заточены" именно под Firefox.

1. Введение в HTML

HTML (HyperText Markup Language, язык разметки гипертекста) представляет собой систему верстки веб-страниц и определяет, где и как в документе отображать отдельные элементы (текст, рисунки, ссылки и др.).

Исходный код самой веб-страницы является обычным текстовым документом и состоит всего из двух основных компонентов, которые перемежаются между собой:

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

Таким образом, освоение HTML сводится к изучению основных тегов (их около двух десятков) и правил их использования.

Разметка документа

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

В случае с HTML в качестве подобных ключевых слов выступают теги, они как раз и определяют действия, которые необходимо совершить с текстом. Поэтому теги еще называются элементами разметки. Например, <B>текст</B> означает, что текст, находящийся между <B> и </B> должен отображаться жирным начертанием. Аналогично с помощью тегов создаются списки, таблицы, добавляются изображения и другие элементы веб-страницы.

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

Браузеры

Сам HTML-файл обычно размещается на сервере и для его просмотра необходима специальная программа — браузер, например, Mozilla Firefox. В задачу браузера входит подключение к удаленному серверу, получение кода HTML и его интерпретация согласно спецификации. Иными словами, браузер преобразует HTML-документ в веб-страницу, которую мы и наблюдаем, когда "ходим" по Интернету. Заметим также, что браузер вполне корректно работает и на локальном компьютере, это позволяет легко проверять работу HTML-документов.

Быстрый старт

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

В листинге 1.1 приведен несложный пример такого кода.

Листинг 1.1. Первая веб-страница

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Моя первая веб-страница</title>
</head>
<body>
<h1>Заголовок страницы</h1>
<p>Основной текст.</p>
</body>
</html>

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

1. В Windows откройте программу Блокнот (Пуск > Выполнить > набрать "notepad" или Пуск > Программы > Стандартные > Блокнот).

2. Наберите или скопируйте код в Блокноте (рис. 1.1).

Рис. 1.1

Рис. 1.1. Вид HTML-кода в программе Блокнот

3. Сохраните готовый документ (Файл > Сохранить как...) под именем c:\www\example11.html, при этом обязательно поставьте в диалоговом окне сохранения тип файла: Все файлы. Обратите внимание, что расширение у файла должно быть именно html.

4. Запустите браузер Internet Explorer (Пуск > Выполнить > набрать "iexplore" или Пуск > Программы > Internet Explorer).

5. В браузере выберите пункт меню Файл > Открыть и укажите путь к вашему файлу.

6. Если все сделано правильно, то в браузере вы увидите результат, как показано на рис. 1.2.

Рис. 1.2

Рис. 1.2. Вид веб-страницы в окне браузера

В случае возникновения каких-либо ошибок проверьте правильность набора кода согласно листингу 1.1, расширение файла (должно быть html) и путь к документу.

Рецепты CSS

Как разместить два слоя рядом по горизонтали?

Слой, создаваемый через тег <DIV>, является блочным элементом веб-страницы. Это означает, что по ширине слой занимает все доступное пространство и всегда начинается с новой строки. Поэтому ограничение ширины слоев никак не приведет к тому, что блоки станут располагаться рядом. Для этого следует воспользоваться стилевым параметром float, как показано в примере 1.

Пример 1. Слои заданной ширины

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Слои по горизонтали</title>
<style type="text/css">
#layer1 {
 background-color: #fc0; /* Цвет фона слоя */
 border: 1px solid #000; /* Параметры рамки вокруг */
 padding: 5px; /* Поля вокруг текста */
 float: left; /* Обтекание по правому краю */
 width: 200px; /* Ширина слоя */
}
#layer2 {
 background-color: #c0c0c0; /* Цвет фона слоя */
 border: 1px solid #000; /* Параметры рамки вокруг */
 padding: 5px; /* Поля вокруг текста */
 width: 300px; /* Ширина слоя */
 float: left; /* Обтекание по правому краю */
}
.clear {
 clear: both; /* Отмена обтекания */
}
</style>
</head>
<body>
<div id="layer1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
</div>

<div id="layer2">
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
</div>

<div class="clear"></div>
<p>Duis te feugifacilisi. Duis autem dolor in hendrerit in vulputate velit esse molestie consequat.</p>
</body>
</html>

Данный пример работает только для слоев, у которых ширина задана явно в процентах или пикселах через параметр width. Чтобы обтекание не распространялось дальше на последующие элементы, необходимо воспользоваться атрибутом clear, он отменяет действие float.

В избранное