Отправляет 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
Автор
Александр Левитас

Статистика

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

Программирование в Web Выпуск 7 от 30/04/2006 Основы HTML - Урок-2


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

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

Решил этим выпуском пока продолжить изучение HTML и его расширения, или точнее его нового воплощения (стандарта или как хотите), - XHTML (последнее, идя навстречу предложению одного из подписчиков). Сегодня мы также, как и в предыдущем уроке, коснемся только общих вопросов, но тем, кто только начинает знакомиться с HTML, я бы все же порекомендовал не пропускать этот урок. Итак, продолжаем…



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

HTML - самое начало. Часть-2
Теги и что они из себя представляют?

В прошлом уроке я уже говорил, что теги - это своеобразные маркеры, с помощью которых мы можем показать браузеру, как отображать тот или иной участок нашего документа. Все маркеры строятся по одному общему для них принципу. А именно, каждый тег начинается с левой угловой скобки - «<» - знака «меньше» (естественно без кавычек), следом за которым без пробелов идет имя тега, которое заканчивается правой угловой скобкой «>» - знака «больше» (естественно также без кавычек). Многие теги, между левой и правой угловой скобок, через пробел после имени тега, могут содержать некоторые атрибуты, которые не являются обязательными, но могут задавать тегу некоторую специфичную окраску. Большинство тегов являются контейнерными, то есть парными, - имеют откывающий тег и парный ему закрывающий, все отличие которого от открывающего заключается в то м, что сразу после левой угловой скобки ставится знак «</» - слэш, далее идет имя тега и закрывающая угловая скобка. Закрывающие теги не могут содержать никаких атрибутов, они лишь показывают браузеру, что после этого маркера заканчивается действие конкретного тега. Четыре таких контейнерных тега мы уже рассматривали в первом уроке, это <html> и парный ему (закрывающий) - </html>, <title> и парный ему (закрывающий) - </title>, <head> и парный ему (закрывающий) - </head> и <body> и парный ему (закрывающий) - </body>. Теперь вы представляете себе как могут выглядеть теги (в данном случае контейнерного типа).

Помимо тегов контейнерного типа, есть еще и простые одиночные теги, они выглядят как обычный открывающий тег и также могут содержать атрибуты. Теперь, здесь же, затронем некоторые отличия тегов в простом HTML и в XHTML. Помните, в прошлом уроке я говорил, что в HTML нет никакой разницы, в каком регистре будут написаны имена тегов? Так вот, это справедливо по отношению к HTML, но в XHTML имена тегов должны записываться строчными буквами, то есть буквами в нижнем регистре. Кроме того, в XHTML простые одиночные теги (не контейнерного типа), в отличии от таких же тегов в HTML, должны перед правой угловой скобкой иметь знак «/» - слэш, перед которым обязательно должен стоять пробел, то есть такой тег должен выглядеть примерно так - <hr />. Также в XHTML требуется более строгая расстановка тегов, пересечение их не допускается, хоть это не рекомендовалось делать и в HTML, но там это не было строгим правилом. Это, если не считать немного другой заголовочной части и некоторых особенностей применения отдельных тегов (буду оговаривать по мере необходимости), является основным отличием HTML от XHTML. Учитывая, что XHTML является более новым стандартом и развиваться будет именно он, а не простой HTML, также то, что в XHTML включены практически все теги простого HTML, в дальнейших уроках будем учиться писать теги придерживаясь спецификаций XHTML.

Давайте теперь вспомним последний пример из прошлого урока и перепишем его в соответствии со спецификациями XHTML:

<?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>
Вот тут будет помещен весь основной текст нашего документа, возможно, оформленный с помощью кода html.
</body>
</html>

Обратили внимание на то, что перед первой строкой мы добавили еще одну? А также в открывающем теге <html> добавилось несколько атрибутов. Второй же строкой опять же указывается стандарт, по которому браузер должен ориентироваться при отображении такого документа. В прошлом уроке я указывал именно эту строку в качестве стандарта. Вообще же, для простого HTML-документа эта строка должна была выглядеть так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


Вот теперь мы создали наш первый документ в формате XHTML.


Атрибуты тега <html>, я думаю, не требуют никаких объяснений, они указывают на язык документа. В теге, в первой строке, указывается кодировка документа. То есть здесь тоже все должно быть понятно.

Основы построения html-документов я рассказал, настало время чуть поподробнее рассказать о тегах <head></head> и <body></body>


Внутри контейнерного тега <head></head>, помимо тега <title></title> (заголовка документа) могут содержаться так называемые мета-теги. О них мы поговорим подробнее в дальнейших уроках, сейчас же скажу только, что эти теги сами по себе не влияют никак на оформление документа, но они имеют другое назначение, а именно, задают описание документа, ключевые слова, кодировку и язык документа, информацию об авторе и много чего еще. Наиболее употребительные мета-теги будем рассматривать когда пройдем основной материал наших уроков и вы будете полностью готовы написать свою первую страничку. Также, внутри этих тегов можно указывать стили CSS (каскадные таблицы стилей - оформление), объявлять функции j-скриптов и java-скриптов. Об этом мы тоже поговорим позже.


Тег <body></body> и его атрибуты.

А вот теперь поговорим о теге <body></body>. Он является, можно сказать, основным тегом документа. С его помощью можно задавать начальное оформление внешнего вида страниц. Сам по себе, пустой (без атрибутов) тег <body></body> на оформление страниц практически не влияет, но вот если в нем указать некоторые атрибуты, наша страница сразу преобразится. Так, например, с помощью атрибутов можно указать графическую картинку, которая будет показана как фон документа, можно задать границы основной части страницы, цвет фона, некоторые события dhtml (динамического html), внешний вид гипер-ссылок (ссылок на адреса ресурсов или почтовые адреса), и многое другое. Как видите, с помощью этого тега можно сделать многое. Кроме того в нем также можно включать атрибуты, призванные сделать правильным отображение ваших страниц в браузерах, построенных на различных движках.


Приведу пример, который примирит ваш документ с браузерами, построенными на различных движках:


<?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 topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
Вот тут будет помещен весь основной текст нашего документа, возможно, оформленный с помощью кода html.
</body>
</html>

Атрибуты topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginwidth="0" marginheight="0" заставят любой браузер отображать ваш документ в полную ширину окна браузера, без просветов от краев окна. Если вместо нуля поставить какое-то значение, ваша страница будет отстоять от краев окна браузера на это значение. В качестве значений, обычно, использую определенное число пикселей (точек) изображения. При этом left-, right-, bottom- и topmargin - это атрибуты для браузера IE, а marginwidth и marginheight - для браузеров Netscape Navigator, Mozilla и Opera.



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

Теперь вот такой пример с атрибутами для тега <body></body>:


<?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 link="blue" alink="red" vlink="maroon">
Вот тут будет помещен весь основной текст нашего документа, возможно, оформленный с помощью кода html.
</body>
</html>

Такие атрибуты заставят ссылки в нормальном состоянии отображаться синим цветом, активные ссылки будут отображаться красным цветом, а уже посещенные - бурым. Цвет можно задавать и не только по его имени (есть целые таблицы цветов с именами), но и в виде шестнадцатеричного значения в формате RGB (Red, Green, Blue) предваренного решеткой (#). Вот как будет это выглядеть:


<?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 link="#0000ff" alink="#ff0000" vlink="#800000">
Вот тут будет помещен весь основной текст нашего документа, возможно, оформленный с помощью кода html.
</body>
</html>

Вот такой простой пример. Ну а теперь последние три атрибута, которые мы будем рассматривать для тега <body></body> - background, bgcolor и text. Их названия говорят сами за себя. Атрибут background задает абсолютный или относительный путь к картинке, которую вы можете использовать в качестве фона документа, а атрибут bgcolor - цвет фона документа, ну а атрибут text задает цвет шрифта основного текста страницы. Вот как это можно использовать:


<?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 bgcolor="#002d59" background="img/fonpicture.gif" text="#ffff00">
Вот тут будет помещен весь основной текст нашего документа, возможно, оформленный с помощью кода html.
</body>
</html>

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


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


Комментарии:

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


Комментарии всегда должны начинаться со следующей последовательности символов - левая угловая скобка (<), затем без пробела символ восклицательный знак (!) и затем без пробелов два подряд дефиса (или минуса), в целом он будет выглядеть так - «<!--» (естественно без кавычек). Затем, после открывающей последовательности идет ваш текст комментария (или блок тегов) и заканчивается комментарий следующей последовательностью - два подряд идущих дефиса (или минуса) и без пробела правая угловая скобка - «>», то есть - «-->» (естественно тоже без кавычек). Вот пример комментария:


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

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

Ниже приведен пример правильной и неправильной постановки комментария:


<?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 <!-- Комментарий поставлен НЕПРАВИЛЬНО, внутри тега и тег разорван -->>
<!-- Правильно поставлен комментарий -->
Вот тут будет помещен весь основной текст нашего документа, возможно, оформленный с помощью кода html.
</body>
</html>

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


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


PS. Еще раз повторюсь, кому не интересны уроки по HTML и кто считает, что знает об этом языке разметки все, - можете поставить фильтр в своей любимой почтовой программе и выпуски, помеченные в теме как «Основы HTML», - не скачивать с сервера. Спешу заверить, что уроки PHP я не прекращаю. Уроки по HTML будут вестись параллельно урокам по PHP и CSS (последний будем рассматривать чуть позже). В дальнейшем планирую открыть уроки по ASP, ASP.NET, PERL… Если вы чувствуете, что можете помочь своими знаниями в различных языках программирования, - пишите на мой адрес

  
 
Внимание!!!
Все материалы уроков, публикуемых в этом и во всех последующих выпусках рассылки «Программирование в web», являются интеллектуальной собственностью авторов и ведущих рассылки. По всем вопросам размещения или публикации данных материалов на собственных ресурсах или где-либо еще, или иного использования, не связанного с личным ознакомлением и самостоятельным обучением, - обращайтесь на адрес автора. Любое использование этих материалов в коммерческих или иных целях, явно не разрешенное автором, является незаконным.
  
 
Автор рассылки — anatolick
Сайт проекта — «russian discussions zone» — http://rdzone.org.ru
Движок для сайтов — «tanat-engine» — http://tanat.al.ru
Дискуссионный лист — «Все для Всех о РС»
Группа стандартизации в Web — W3C.org
  
В избранное