Здравствуйте, дорогие подписчики спасибо вам за то ,что вы подписались на рассылку.
Немного истории. Интернет, каким вы
знаете его сейчас, появился совсем недавно - в 1992 году. Именно тогда
была реализована первая спецификация языка HTML, разработанного
человеком, которого
зовут Тим Бернерс-Ли. Название этого языка представляет собой
аббревиатуру от словосочетания HyperText Markup Language (язык
гипертекстовой разметки документов). Если не вдаваться в детали этот
язык
позволяет отобразить нелинейный (т.е. разделенный на отдельные
блоки) документ при помощи линейного текста (этот текст вы можете
увидеть выбрав пункт "Просмотр HTML-кода" в меню "Вид" Internet
Explorer'а).
Взгляните на этот текст. Там вы можете увидеть элементы
текста, заключенные между значками < и >, например <html>. Это теги языка HTML.
Браузер
воспринимает теги, как инструкции по разметке документа. Все, что не
находится между значками < и >, браузер воспринимает как текст и
просто тупо выводит его на экран.
Для того, чтобы написать веб-страницу необходимо использовать теги.
Именно они позволяют создать красивую шапочку у страницы, разместить
меню сайта слева, вверху, внизу и т.д.
Например, для того чтобы создать вот такую ссылку, необходимо
написать в текстовом файле следующий текст:
Создайте текстовый документ, напишите в нем этот текст, а затем
переименуйте его в "index.html" (папка, в которой он лежит, не имеет
значеня, хоть на Рабочем столе) и откройте его.
Возникает вопрос - что обозначают слова href, target
и т.д.? Это - параметры тега. В данном случае параметр href обозначает
адрес, на который ведет ссылка,
а параметр target="_blank" указывает браузеру, что ссылку нужно
открыть в новом окне. Практически любой тег может иметь параметры.
Правда, есть теги, у которых параметры почти никогда не используются,
например тег <br>
(он переносит текст на новую строку).
Весь документ дожен находиться между тегами <html> и
</html> (обычно говорят так: внутри тега html). Тег который имеет
слэш (/), назывется закрывающим. Для большинства тегов он обязателен,
для некоторых - желателен, а для остальных - запрещен.
Как узнать, требуется ли закрывающий тег? Надо помнить, либо иметь
справочник под рукой. Когда будет закончен сайт, я выложу там справочник
по тегам.
Каждая веб-страница может состоять из двух частей: заголовка и тела.
Под заголовком понимается не текст написанный вверху страницы большими
буквами, а внутренние параметры документа.
Найти эти части нетрудно:
<html>
<head>
Это заголовок документа
</head>
<body>
Это тело документа
</body>
</html>
То, что находится в заголовке, пользователь не увидит, заголовок
необходим для служебных целей. Например, там можно задать текст, который
будет
отображаться в заголовке окна браузера, подключить к веб-странице
другие файлы, указать ключевые слова для поисковиков и т.д.
Внутри тега <body> находится то, что будет открыто в окне
браузера.
Об использовании пакета "Denwer"
Если вы уже закачали и установили пакет, то лучше всего начать его
использование сразу. После установки у вас в папке "Мой компьютер" (или
"Компьютер" в Windows Vista) должен появиться новый диск (по умолчанию -
диск Z:).
Откройте его, после этого откройте папку "home". Там есть несколько
папок (localhost, custom, test1.ru и т.д.). Эти папки представляют собой
виртуальные хосты. Например,
если в адресной строке набрать "http://localhost", откроется
страница приветствия, установленная вместе с Денвером. Создайте в папке
"Z:\home" новую папку (назовите ее, например, webdev),
а в ней - папку "www". После этого положите туда файл "index.htm",
который мы написали чуть раньше. После этого перезапустите Денвер (ярлык
"Restart Denwer" на Рабочем столе). После этого наберите в адресной
строке браузера "webdev".
Вы должны увидеть страницу с ссылкой, которую написали ранее. Для
начала этого достаточно. Объясняется все просто - создавая новую папку,
вы автоматически создаете новый сайт на локальном хосте (т.е. на вашем
компьютере), причем адрес сайта совпадает с названием папки, а в папке
"www"
находятся файлы, относящиеся к этому сайту. Если вы рядом с папкой
"wwww" создадите папку "subdomain", то после перезапуска Денвера будет
доступен адрес "http://subdomain.webdev".
Говоря строго, Денвер нам потребуется только когда мы перейдем к
изучению PHP, но я думаю, будет лучше, чтобы вы привыкли сразу
использовать серверные технологии. Если вы еще не скачали Денвер, лучше
всего сделать это сейчас.
Новые теги
Название тега
Описание тега
Закрывающий тег
Параметры
Пример
<html>
Указывает браузеру на начало документа. Этот тег обязателен
для любой веб-страницы
</html> - обязателен
Не требуются
-
<head>
Указывает браузеру на заголовок страницы.
</head> - обязателен
Не требуются
-
<body>
Указывает браузеру на тело страницы.
</body> - обязателен
Не требуются
-
<a>
Гиперссылка
</a> - обязателен
href - адрес, на который ведет ссылка target (_blank) - окно
назначения (_blank означает в новом окне) title - подсказка к ссылке
Это<br>пример<br>использования Результат: Это пример использования
Практика
Попробуем применить полученные знания на практике. В
программировании есть традиция: программа "Hello, world!". Мы не будем
отступать от нее. Начнем.
Если у вас стоит Денвер, то в папке "Z:\home\webdev\www" (см.
выше) создаем текстовый документ, переименовываем его в "index.htm" (в
принципе, вы можете дать ему расширение *.html или *.php). Следом
открываем его с
помощью блокнота (если вы установили специальный редактор для
программистов, то с его помощью). Внутри пишем следующий текст:
<html>
<head>
<title>Моя первая веб-страница</title>
</head>
<body>
Привет, интернет, это моя первая веб-страница<br>
А это моя первая <a
href="http://subscribe.ru/archive/comp.soft.prog.webdev" target="_blank"
title="Подписаться на рассылку о
веб-разработке">гиперссылка</a><br>
А это моя первая ссылка на <a
href="mailto:author@itml.su">электронную почту</a>
</body>
</html>
Комментарий: тег <title> используется, чтобы задать текст,
который будет отображаться в заголовке окна браузера.
Сохраняем, запускаем через браузер и наслаждаемся приобщением к
славному обществу веб-разработчиков.
Итог
Сегодня мы начали изучение языка HTML. Мы ознакомились с основными
принципами построения гипертекстовых документов, изучили самые важные
теги. Также мы
научились использовать серверные технологии, которые пригодятся нам,
когда мы будем изучать серверные языки программырования (PHP). Также я
хотел бы дать несколько советов:
Набирайте текст сами, а не просто копируйте его через буфер
обмена.
Не бойтесь экспериментировать. Изучить некоторые теги
очень просто - откройте любую веб-страницу в блокноте, чтобы посмотреть,
какие теги там используются.
И, наконец, не стесняйтесь писать мне на email - буду рад
ответить.
Об этих и некоторых других тегах я расскажу в следующем выпуске:
<b>текст</b> - жирный текст
<u>текст</u> - подчеркнутый текст
<i>текст</i> - наклонный шрифт
<h[число]>текст</h[число]> - устанавливает
размер шрифта. Число может принимать значения от 1 до 6. Напрмер,
<h3>текст</h3>
<b><i>Теги можно комбинировать</i></b>.
Поэкспериментируйте с этими тегами.