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

Программирование в Web

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

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

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

←   Май 2006   →
 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
31
Автор
Александр Левитас

Статистика

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

Программирование в Web Выпуск 9 от 05/05/2006 Основы HTML - Урок-3


 
Программирование в web

ОСНОВЫ HTML
 
 
Внимание!!!
Все материалы уроков, публикуемых в этом и во всех последующих выпусках рассылки «Программирование в web», являются интеллектуальной собственностью авторов и ведущих рассылки. По всем вопросам размещения или публикации данных материалов на собственных ресурсах или где-либо еще, или иного использования, не связанного с личным ознакомлением и самостоятельным обучением, - обращайтесь на адрес автора. Любое использование этих материалов в коммерческих или иных целях, явно не разрешенное автором, является незаконным.
 
 
У Р О К    3
Здравствуйте уважаемые подписчики!

Ну что же, еще один урок по HTML и следом выйдет урок по PHP. Как я уже говорил, или хотел сказать, знание PHP без знания HTML практически бесполезно, а я сомневаюсь, что все наши подписчики знают HTML. Так что придется немного потерпеть. Итак, продолжаем…



Примечание: Если вы знаете html и не хотели бы читать выпуски с уроками по этому языку, вы можете поставить фильтр на тему сообщений. В теме я обязательно буду указывать чему посвящен конкретный выпуск. Например, для уроков по php в теме выпусков будет содержаться «Основы PHP» (естественно без кавычек), для уроков по html будет содержаться «Основы html» и так далее. То есть вы всегда сможете настроить свою почтовую программу, чтобы она не принимала ненужные выпуски. Почему я все таки решил сделать выпуски параллельными? Да все просто. php достаточно глубоко интегрирован с html, и в наших примерах я буду использовать и html тоже. Так вот, чтобы вы могли легко ориентироваться в коде, стоит изучить, хотя бы на начальном уровне, и html. Если вы знаете этот язык разметки, у вас не возникнет трудностей в понимании кода и вы смело можете пропускать эти выпуски, но есл и вы не знаете html, - рекомендую все же ознакомиться с ним.

Теги форматирования текста
Теги <h…></h…>

Начнем с одного из самых распространенных тегов - <h…></h…> (вместо многоточия должна стоять цифра от единицы до шести). Этим контейнерным тегом мы можем отображать различные заголовки. По умолчанию, если не заданы специфические настройки для этих тегов, распределение внешнего вида будет таким: самый крупный шрифт будет у заголовка с тегом <h1></h1>, а самым мелким шрифтом будет отображен заголовок указанный тегом <h6></h6>. Но это по умолчанию, вы же всегда можете изменить такое положение, правда, с использованием стилей css.

Посмотрим на следующий код:

<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Это моя первая страница html</title>
</head>
<body>
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
</body>
</html>

И вот, что показал бы нам браузер по этому коду:

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5
Заголовок 6

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

<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Это моя первая страница html</title>
</head>
<body>
<h1 align="left">Заголовок 1</h1>
<h2 align="center">Заголовок 2</h2>
<h3 align="right">Заголовок 3</h3>
<h4 align="left" title="Это заголовок номер 4">Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
</body>
</html>

И вот, что показал бы нам браузер по этому коду в этот раз:

Заголовок 1

Заголовок 2

Заголовок 3

Заголовок 4

Заголовок 5
Заголовок 6

Атрибут align, как можно было бы догадаться по его значениям, служит для изменения позиции текста относительно левого и правого краев страницы, и может принимать следующие значения: left, right и center. А атрибут title служит для вставки всплывающей подсказки, которая появляется при наведении курсора мыши. Тут в общем-то вроде все понятно. Замечу только, что спецификации XHTML вместо этих атрибутов, да и не только вместо них, но и вообще везде, где это возможно, рекомендуют использовать стили css, но о них мы будем говорить позднее, в последующих уроках.


Тег абзаца - <p></p>

Данный тег служит для оформления абзацев, - выделенных блоков текста, которые чаще всего начинаются с красной строки. Он имеет практически такие же атрибуты, что и теги <h…></h…>, но у align появляется еще одно значение - justify, это значение позволяет отформатировать строку по всей ширине страницы (работает так же, как и в Word, то есть, если строка короче, - добавляются пробелы между слов). Существуют, конечно, и другие атрибуты, как для тегов <p></p>, так и для тегов <h…></h…>, но они применяются довольно редко, за исключением атрибутов, объявляющих стили. В качестве примера применения этого тега можете посмотреть на этот абзац, в котором я и привожу его описание, а также на другие абзацы текста рассылки.


Тег преформатированного текста - <pre></pre>

Данный тег формирует правильный вывод предварительно отформатированного текста в окно браузера. Допустим у вас имеется какой-то текст, набранный в обычном текстовом формате, но достаточно неплохо в нем отформатирован и гарантированно будет помещаться в окне браузера при любом разрешении монитора, в этом случае наверное не имеет смысла использовать никакие другие теги, кроме тега <pre></pre>, который покажет браузеру, что обрамленный ими текст должен выводиться в том виде, в котором он был вами введен. В этом случае, также, можно будет сэкономить на используемом коде. Но у этого тега-контейнера есть и кое-какие недостатки. Внутри него нежелательно применять теги с именами: img, object, big, small, sub или sup. Вот пример:


<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Это моя первая страница html</title>
</head>
<body>
<pre>
Буря мглою небо кроет,
Вихри снежные крутя.
То как зверь она завоет,
То заплачет как дитя.
</pre>
</body>
</html>

А вот результат:


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


Тег выделения блока текста - <blockquote></blockquote>

Данный тег обычно служит для отделения от основного текста различных текстовых блоков, например, длинных цитат. Обычно отделяется пустыми строками от основного текста и отображается с отступами с обеих сторон.


<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Это моя первая страница html</title>
</head>
<body>
<p>
Основной текст. Здесь мы можем написать что нам нужно
<blockquote>
А вот тут наша цитата
</blockquote>
и снова основной текст.
</p>
</body>
</html>

Примечание: Отступы, пробелы и переводы строк я делаю только для удобочитаемости, вы же можете их не делать, если вам так удобнее.

Вот как, например, это может выглядеть:


Основной текст. Здесь мы можем написать что нам нужно

А вот тут наша цитата
и снова основной текст.


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


Тег <i></i>:

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


Тег <b></b>:

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


Тег <u></u>:

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


Тег <s></s>:

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


Тег <big></big>:

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


Тег <small></small>:

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


Тег <strong></strong>:

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


Тег <sub></sub>:

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


Тег <sup></sup>:

Тег контейнерного типа, то есть должен быть обязательно открывающий тег и парный ему закрывающий. Все, что будет помещено внутри этого контейнера, будет отображено в верхнем индексе. То есть так вы можете отобразить, например, число в степени или еще что-то. Вот так - a2 - a в квадрате.


Тег <em></em>:

Тег контейнерного типа, то есть должен быть обязательно открывающий тег и парный ему закрывающий. Предназначен для логического выделения текста. В общем, его можно заменить и другими тегами, и комбинацией тегов, и стилями (последнее наиболее предпочтительно в XHTML).


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

 
 
Внимание!!!
Все материалы уроков, публикуемых в этом и во всех последующих выпусках рассылки «Программирование в web», являются интеллектуальной собственностью авторов и ведущих рассылки. По всем вопросам размещения или публикации данных материалов на собственных ресурсах или где-либо еще, или иного использования, не связанного с личным ознакомлением и самостоятельным обучением, - обращайтесь на адрес автора. Любое использование этих материалов в коммерческих или иных целях, явно не разрешенное автором, является незаконным.
 
 
Автор рассылки — Anatolick
Сайт проекта — «Russian discussions Zone»
Движок для сайтов — «Tanat-Engine»
Дискуссионный лист — «Все для Всех о РС»
Дискуссионный лист — «File Info Masters»
Дискуссионный лист — «Напряги мозги»
Дискуссионный лист — «Ищем все…»
Дискуссионный лист — «Все обо Всем по Email»
Дискуссионный лист — «Внимание! Розыск…»
Дискуссионный лист — «Английский для Всех и каждого»
Группа стандартизации в Web — W3C.org
 
В избранное