Ваша первая страница

С чего начать? Разумеется, с теории.

В момент появления интернета его размер был очень маленьким, а количество страниц измерялось десятками. Естественно, что и объем их был невелик. Страницы состояли только из текста и ни о каких изображениях, и тем более музыке, скриптах, видео, flash не было и речи. К тому же их в цифровом виде еще и не было. Поэтому, все страницы хранились в виде простых текстовых файлов.

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

Было решено все форматы по возможности объединить в несколько форматов. Были созданы форматы скриптов и формат отображения страниц, который был назван HTML.

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

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

Вместо комманд в HTML используют теги
В отличие от большинства языков программирования, HTML и все сопутствующие ему языки программирования, кроме Flash и Java, являются интерпритируемыми

Тэг - команда языка HTML, которая сообщает, что или как должно располагаться на странице браузера. Большинство тегов (те, которые отвечают за разметку именно текста) имеют закрывающий аналог. Между открывающим и закрывающим тегом и располагается текст.
Например:
<strong>жирный</strong> - это жирный
Здесь тег strong показывает браузеру, что текст, заключенный между его открывающим и закрывающим тегом, должен отображаться жирным шрифтом. Тэг strong будет изучен на 2 уроке.

Интерпритируемый язык программирования - такой язык программирования, который не создает для своей работы программный файл(exe или com), а использует код, написанный программистом и специальную программу для правильного отображения этого кода. Каждый раз при открытии файла необходима программа-интерпретатор. Для языка XHTML(HTML) интерпретатором является браузер.

Таким образом, - браузер - интерпретатор языка XHTML(HTML).

Языки программирования, создающие конечные файлы, называются компилируемыми. Для создания такого файла необходим текстовый редактор для набора кода (как и для интерпритатора) и программа-компилятор. Компилятор превращает код в машинный язык и создает программный файл(exe, com) и(или) сопутствующие ему файлы (например sav файлы, содержащие информацию о сохраненных играх). После компилирования программы, ей больше не нужно вспомогательных программ для ее открытия, а для интерпритируемой программы интерпретатор нужен каждый раз при открытии. У каждого метода есть преимущества и недостатки, однако чаще всего используется компилирование.

Сейчас мы начнем изучать первые теги и откроем для себя интересный мир HTML

От теории к практике

Несмотря на наличие множества редакторов web-сайтов, таких как Macromedia Dreamweaver или Microsoft FrontPage, изучать XHTML лучше вручную, используя простые текстовые редакторы. Есть много ситуаций, когда невозможна работа с редактором сайтов, вплоть до его отсутствия. Здесь Вас и выручит знание XHTML. Кроме того, многие редакторы вводят множество непонятных тегов, которые легко могут привести к неправильной работе готового сайта. Понимание XHTML поможет избежать этого.

Полигоном для наших уроков будет служить самый обычный текстовый редактор, причем не Microsoft Word, т.к. он чрезвычайно неудобен для элементарного форматирования страниц, а обычный Блокнот (или Notepad).

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

Откроем Блокнот. Вы можете сохранить страницу по окончании работы, но рекомендуется сохранить ее сразу после открытия и сохранять периодически во время работы. Создадим папку на жестком диске для наших работ. В блокноте нажмем Файл -> Сохранить как. В поле "Тип файла" выбрать Все файлы. По традиции всех программистов первая программа называется hello world! В поле имя наберем hello world.html .html - расширение статического файла HTML(XHTML также поддерживается языками серверного программирования, такими как ASP, ColdFusion, PHP, но о них отдельно(гораздо позже)).

Сохраните hello world.html в Вашу папку с проектами. Теперь в файле мы напишем код, выводящий на экран браузера строку "Hello world!"

Внимание! В дальнейшем следует всегда вводить теги, названия файлов и расширения строчными буквами. Это связано с издержками некоторых браузеров различать прописные и строчные буквы. Если Вы набираете теги, пути к файлам (что это, мы изучим в уроке "Гиперссылки") разными регистрами, эти браузеры откажутся их понимать! Особенно этот пункт касается расширений файлов, т.к. многие современные браузеры различают буквы разных регистров в расширениях.

Главное в каждой странице - ее скелет - содержимое, которое неизменно для всех страниц Сети. Прежде всего нужно показать браузеру, что это XHTML документ. В HTML это делали 2 тега - <html> и </html>(в дальнейшем для удобства открывающий и закрывающий теги - 2 тега), однако теперь еще необходимо подключить XHTML - стандарт. Закрывающий тег оставляем без изменений, а вместо <html> пишем
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">.

Раньше существовало всего несколько стандартов - HTML, JavaScript, VBScript. Впоследствии появился консорциум W3C, классифицирующий и создающий новые стандарты, например XHTML(eXtensible HTML - расширяемый язык разметки гипертекста), XML(eXtensible Marque Language - расширяемый язык разметки, позволяющий создавать свои теги). Все новые стандарты подключаются особым тегом <!DOCTYPE> - единственным тегом, идущим до тега <html>.

На самом деле - Doctype - тема отдельного разговора. Вы можете прочитать статью сейчас, но лучше - после изучения курса XHTML.

Далее, между тегами <html> и </html> идет собственно сама страница. Однако, она также делится на две части: на само содержание и на информацию об этом содержании, которую браузер получит еще до загрузки контента. Информация загружается в теги <head> и </head> сразу после тега <html> . После тега </head> идет содержание, заключенное в теги <body> и </body>. Таким образом структура страницы:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<информация о странице>
</head>
<body>
<ваше содержание>
</body>
</html>

<!doctype> - информация о присоединенных W3C стандартах. Пишется в самом начале документа до тега <html>.

<html> и </html> Основные теги любой страницы, показывающие браузеру на то, что это web-документ. Все теги, кроме тега <!doctype>, пишутся внутри этих 2 тегов.

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

Резидент - тип программ, когда результат работы программы не виден пользователю при отсутствии деятельности с его стороны; но когда эти программы перехватывают действия пользователя или других программ в реальном времени и осуществляют какое-либо действие. Например, в XHTML можно написать скрипт(на JavaScript), который будет перехватывать изменение размеров окна и перезагружать страницу.

<body> и </body> - Содержимое вашей страницы. Пишется после </head> и до </html>.

Помимо этих тегов, в скелет входят теги <title> и </title>, между которыми заключается название вашей страницы(сайта), которое отображается сверху браузера.

Эти тэги заключаются между тегами <head> и </head>, т.к. в них отображена информация о странице.

<title> и </title> - название вашей страницы. Теги пишутся между тегами <head> и </head>.

На следующих уроках будут изучены теги, которые можно (и нужно!) помещать в тегах <head> - </head> и <body> - </body>.

Сейчас впишите этот скелет в вашу страницу(в Блокноте), поставьте в название "Hello world!" и этот же текст впишите между тегами <body> и </body>. Сохраните документ и выйдете из редактирования. Теперь откройте его в любом браузере.

Если Вы видете что-то подобное, то у Вас все получилось! Пора переходить к следующему уроку, где вы научитесь редактировать страницы!

uroki.webservis.ru