Отправляет 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 Выпуск 6 от 26/04/2006 Основы HTML - Урок-1


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

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

Любое web-приложение само по себе будет не очень популярным, если его не оформить должным образом. В данном контексте под web-приложениями я подразумеваю системы управления контентом, то есть сайты, порталы, форумы и так далее. Ведь именно они являются лицом WWW. А как можно оформить ваш сайт, чтобы он выглядел презентабельно? Конечно для этого надо использовать некоторые ухищрения, например, воспользоваться языком разметки страниц, а именно HTML. Вот именно его мы и будем изучать параллельно с изучением PHP (пока только PHP). А еще, параллельно с HTML и PHP будем изучать CSS - каскадные таблицы стилей (но о них позднее, в других выпусках нашей рассылки).



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

HTML - самое начало
Что есть HTML и как к нему подступиться?

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

Итак, что же такое HTML? В дословном переводе эта аббревиатура обозначает - язык гипертекстовой разметки текста. Первая версия была разработана достаточно давно, еще во времена первых версий знаменитых браузеров Netscape Navigator и IE. Тогда она содержала в себе только самое необходимое и страницы, оформленные с его помощью выглядели минималистски, но все же намного лучше, чем простой текст. Затем этот язык стал развиваться и в конечном итоге превратился в то, что есть. HTML это не язык программирования, это просто набор определенных меток (тегов), указывающих браузеру, как отобразить тот или иной участок текста. Файл, содержащий код html - все такой же простой текстовый файл, который вы легко можете прочесть или изменить с помощью простого текстового редактора. Браузер, получая от сервера такой файл находит в нем определенные метки и в соответствии с их значениями, заложенными в механизм браузеров, отображают обрамленный этими метками текст. На настоящий момент есть три различных механизма обработки гипертекста - это так называемые движки, построенные на ядрах IE, Mozilla, Opera. В разных браузерах, работающих на этих разных движках, некоторые теги (метки оформления) обрабатываются по разному. Это надо учитывать. Хотя в последних версиях этих браузеров отличия постепенно стираются. Ну, думаю, такие случаи отличия буду оговаривать отдельно.

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

Первая строка любого html документа должна содержать ссылку на стандарт.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtitional.dtd">
Например, эта ссылка указывает браузеру, что документ, предваренный этой ссылкой должен обрабатываться по правилам языка XHTML версии 1.0. Вообще говоря, эта ссылка не является обязательной, но было бы неплохо ее все же указывать. Так вы укажете браузеру более точные правила обработки документа и он будет отображаться более корректно. Если вы решились ставить эту ссылку, то она должна быть самой первой строкой в вашем файле с html-документом. Подобных правил существет несколько, подробнее вы сможете ознакомиться на сайте группы стандартизации W3C.

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


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtitional.dtd">
<HTML>
Текст нашего документа
</HTML>

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtitional.dtd">
<HTML>
<HEAD>
<Title>Это моя первая страница html</Title>
</HEAD>
Текст нашего документа
</HTML>

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

Думаю вы заметили, что заголовок вашего документа, который должен отображаться в заголовочной части вашего браузера находится между тегов <Title> и </Title>, которые, в свою очередь, должны помещаться между тегов <HEAD> и </HEAD>. Кроме тегов заголовка вашего документа внутри тегов <HEAD> и </HEAD> могут содержаться так называемые мета-теги (теги, с помощью которых вы можете задавать описание для своего документа, ключевые слова для поиска, программу-генератор документа, авторские права, различные стили CSS, объявление функций скриптов и так далее… Но о них мы поговорим позднее. Сейчас же поговорим о том, где вы должны будете помещать тело своего документа, то есть весь основной контент. Посмотрите на следующий пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transtitional.dtd">
<HTML>
<HEAD>
<Title>Это моя первая страница html</Title>
</HEAD>
<BODY>
Вот тут будет помещен весь основной текст нашего документа, возможно, оформленный с помощью кода html.
</BODY>
</HTML>

Именно таким образом и строится обычно структура всех html-документов. Внутри тегов <BODY> и </BODY> вы можете размещать то, что должно отображаться браузером, а также то, как это все должно отображаться.

Попробуйте создать текстовый файл с расширением *.htm или *.html, поместите в него содержимое наших примеров и откройте в своем любимом браузере. Таким образом вы создатите свой первый, правильный html-докумет.

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

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
Дискуссионный лист — «Все для Всех о РС»
 
В избранное