| Основы Web-технологий | Введение в Web-дизайн | Первая Web-страница | Графика web-дизайне | Специальные возможности HTML | Каскадные таблицы стилей | Полезные приемы в Web-дизайне | Обслуживание Web-сайта | Программирование на JavaScript и VBScript | Раскрутка сайта | Деньги и интернет | Партнерские программы | Web-софт | Поисковая оптимизация | Хостинг |
Первая web-страница
Изучаем HTML Общая
структура Как и любой другой язык программирования, HTML подразумевает некую
стандартизированную структуру построения программы — в данном случае,
html-документа. Такая структура описывает даже не последовательность
команд, а очередность следования ряда обязательных блоков, которые
содержат непосредственно программный код. В отличие от иных языков
программирования, директивы HTML называются не командами, процедурами
или операторами, а имеют собственное наименование — теги (от англ,
tag — отметка). Теги HTML заключаются в угловые скобки, синтаксис
их записи в общем виде выглядит как <тег>. Все объекты, не
заключенные в угловые скобки, интерпретатор воспринимает как текстовые
элементы, отображая их на экране компьютера как есть. У HTML имеется еще одна значительная особенность, отличающая его
от других языков программирования: практически все теги данного
языка, за исключением некоторых отдельно оговоренных случаев, —
парные. Такая пара состоит из открывающего и закрывающего тега,
которые отличаются лишь наличием в последнем символа / Все, что
расположено между открывающими закрывающим тегом, обрабатывается
интерпретатором согласно алгоритму, присвоенному данному конкретному
тегу. В общем виде программная строка HTML с открывающим и закрывающим
тегами выглядит так: <тег>0брабатываемое значение</тег> Данное свойство HTML позволяет использовать принцип вложения одного
тега в другой, когда обрабатываемым значением одной команды может
служить другая команда. Вот простой пример вложения двух тегов друг
в друга: <тег1> <тег2>0брабатываемое значение</тег2></тег1>
ВНИМАНИЕ При роботе с кодом HTML необходимо
запомнить одно простое правило: если где-то в тексте программы встречается
открывающий тег, обязательно должен присутствовать и закрывающий.
Несоблюдение этого правила вызовет ошибку при обработке такого документа
интерпретатором броузера. Однако вернемся к изображенной на рис. 4.1 структуре документа
HTML. Как видно из иллюстрации, основной, глобальной конструкцией
внутреннего кода web-страницы является нечто, обозначенное на рисунке
прямоугольником с надписью Документ HTML. Вполне логично было бы
предположить, что это нечто — какая-то специальная команда, призванная
объяснить броузеру, что он имеет дело именно с документом HTML,
а не с текстовым или, например, графическим файлом. Такая команда
действительно есть. Называется она тег верхнего уровня и записывается
так: <НТМL>.Содержимое </НТМL> Тег верхнего уровня, как становится ясно из предложенного примера,
— парный, причем его содержимое как раз и есть весь код HTML, составляющий
документ. Таким образом, правило применения данной директивы также
очевидно: открывающий тег записывается самой первой строкой html-документа,
а закрывающий — самой последней. Следующим на очереди у нас прямоугольник, обозначенный на схеме
фразой Заголовок документа. Для чего нужен этот заголовок? Заголовок web-страницы содержит исчерпывающую информацию о самом
документе, а иногда также специальные директивы транслятора, подсказывающие
встроенному в броузер интерпретатору HTML правила, по которым следует
обрабатывать составляющий страницу код. Необходимо отметить, что
содержимое заголовка не отображается в броузере и не влияет на внешний
вид документа: это, если можно так выразиться, служебная информация,
которая необходима, прежде всего, самому броузеру. Синтаксис тега
заголовка в общем виде выглядит так: <HEAD> Содержимое </HEAD> Из приведенной схемы видно, что раздел HEAD следует в html-документе
непосредственно за тегом <HTML> и является второй обязательной
командой, которую необходимо включать в код web-страницы. Перейдем к следующему объекту html-документа — разделу Внешний
заголовок, который, как показано на схеме, является вложенной командой
тега <HEAD>. Мнемоника внешнего заголовка записывается следующим
образом: <ТITLE>Внешний заголовок</TITLE> Чем же внешний заголовок отличается от просто заголовка документа
HTML? Все очень просто: именно он отображается в верхнем поле броузера
в качестве названия страницы при ее открытии, и именно значение
тега <TITLE>подставляется по умолчанию в соответствующее диалоговое
окно, когда пользователь заносит документ в папку избранное. Теперь, уверен, все неясности ликвидированы. Последняя структурна
составляющая кода web-страницы — раздел Тело документа. Тело документа, описываемое тегами <BODY> </BODY>,
включает в себя весь основной код разметки страницы, который и определяет
отображение html-документа на экране монитора. Основной текст, иллюстрации,
элементы навигации и все, что вы хотите продемонстрировать посетителям
вашего сайта, размещается внутри данного тега. Теперь мы располагаем достаточным объемом информации для того,
чтобы представить нашу абстрактную графическую схему в виде вполне
конкретного кода HTML: <HTML> <HEAD> <ТITLE>Моя первая web-страничка</TITLE> </HEAD> <BODY> </BOOY> </HTML> Создайте с помощью Проводника Windows новую директорию на вашем
жестком диске и назовите ее, например, MySite. Внутри этой папки
создайте каталог с названием images, туда вы будете впоследствии
помещать иллюстрирующие ваш проект изображения. Теперь необходимо
проделать следующие действия: открыть Блокнот (Пуск > Программы
> Стандартные > Блокнот), набрать в нем полученный выше код,
сохранить текущий файл в папке MySite под именем index.html, воспользовавшись
функцией Сохранить как, и открыть его в броузере путем двойного
щелчка мышью на значке данного файла в Проводнике. Постойте, скажете вы, но ведь этот html-документ отображается
в главном окне броузера абсолютно пустым! Разумеется, ведь вы еще
не внесли в него никакого контекстного содержимого. Для того чтобы
это содержимое наполнило вашу страничку, необходимо изучить базовые
теги разметки гипертекста. А для начала я предлагаю обратить пристальное
внимание на приведенную ниже информацию, которая может пригодиться
вам в последующей работе. Несколько предварительных замечаний
Теги и атрибуты Для того чтобы в будущем у вас не возникло каких-либо затруднений,
необходимо прежде всего разобраться в понятиях тегов и их атрибутов.
Итак, тег —это некая команда HTML, указывающая интерпретатору броузера,
каким образом он должен обрабатывать соответствующее каждой конкретной
директиве значение. Это значение и называется атрибутом тега. Тег может иметь атрибут или не иметь его. Например, тег верхнего
уровня<HTML> не имеет атрибутов, а в строке создания новой
таблицы <TABLE BORDER="1"WIDTH="100">
выражение BORDER="1" WIDTH="100" является атрибутом
тега <TABLE>. В общем виде синтаксис записи тега HTML в совокупности с его атрибутами
выглядит следующим образом: <ТЕГ ИМЯ_АТРИБУТА-1="ЗНАЧЕНИЕ" ИМЯ_АТРИБУТА-2="ЗНАЧЕНИЕ"
...ИМЯ_АТРИБУТА-n="ЗНАЧЕНИЕ"> В данном примере первый атрибут тега <TABLE> — это параметр
"BORDER", второй атрибут — параметр "WIDTH",
а их значения составляют соответственно "1" и"100".
Значения атрибутов заключаются в прямые кавычки, записываемые символом
". Если внутри атрибута какого-либо тега встречается другое
значение, заключенное в кавычки, то есть имеет место вложение одних
кавычек в другие, в качестве внутренних кавычек рекомендуется использовать
одинарные, записываемые символом '. В общем случае такое выражение
выглядит следующим образом: <ТЕГ ИМЯ_АТРИБУТА-1="ЗНАЧЕНИЕ-1; 'ЗНАЧЕНИЕ-2'; ЗНАЧЕНИЕ-3">
Спецификация языка HTML позволяет опускать кавычки для следующих
видов атрибутов:
- Атрибуты, записываемые только строчными или заглавными символами
латинского алфавита и не включающие иных символов, например, цифр.
- Атрибуты, состоящие только из цифр от 0 до 9.
- Атрибуты, обозначающие промежутки времени.
Например, запись атрибутов BORDER="1" или ALIGN="CENTER"
допустимо представить как BORDER=1 и ALIGN=CENTER. Регистр записи команд HTML является одним из немногих языков программирования, не чувствительных
к регистру, в котором вы записываете команды (в данном случае —
теги и имена их атрибутов). Интерпретатор броузера одинаково обработает
директивы<HEAD>, <head>, <Head> или <hEaD>.
Иными словами, вы вольны записывать теги как в строчном, так и в
заглавном варианте, на собственный вкус. Однако рекомендуется все
же применять для написания тегов HTML заглавный регистр, прежде
всего, для улучшения читаемости кода, поскольку в этом случае команды
языка будет легко отличить от интегрированного в документ информационного
текста. Единственным исключением из этого правила служат два элемента
HTML, небезразличных к регистру. Это адреса URL и escape-последовательности,
о которых мы подробно побеседуем ниже. Escape-последовательности Иногда у web-мастера возникает необходимость использовать в тексте
своей web-странички символы, зарезервированные для обозначения элементов
кодаHTML. Это могут быть угловые скобки (символы < и >), в
которые обычно заключаются теги, прямые кавычки ("), употребляемые
при задании значений атрибутов, и т. д. Иными словами, web-мастеру
необходимо, чтобы данные символы отображались в окне броузера как
есть, то есть как текст, интерпретатор же воспринимает их как часть
команд разметки гипертекста. Для того чтобы избежать проблем при
отображении подобных элементов, и были придуманы так называемые
escape-последовательности, или, как их еще иногда называют, нотации
символьных объектов. Запись escape-последовательности подразумевает замену служебных
символов специальными командами, которые в процессе интерпретации
документа замещаются выводимыми на экран искомыми знаками. Все escape-последовательности
начинаются с символа амперсанд (&) и заканчиваются точкой с
запятой, а между ними размещается сама команда, записываемая в строчном
регистре. В табл. 4.1 приведен список наиболее часто используемых
escape-последовательностей. Таблица 4.1. Наиболее распространенные escape-последовательности
|
Символ |
Значение |
Команда |
|
< > " &
© ® |
Символ меньше, чем; левая угловая скобка Символ больше, чем; правая угловая скобка Прямые кавычки Амперсанд Неразрывный пробел (словосочетания, разделенные таким пробелом,
не разрываются при переносе) Символ копирайта Символ зарегистрированной торговой марки |
< > " &атр; &сору; ® |
Escape-последовательности записываются в тексте по тем же правилам,
по которым употребляются обозначаемые ими символы, иными словами,
нотация символьного объекта просто вставляется в тот участок текста,
где по расчетам web-мастера должен следовать соответствующий служебный
символ. Например, строка html-кода На этой страничке изложены мои ":мысли вслух"
по данному вопросу отобразится в окне броузера следующим образом:
На этой страничке изложены мои "мысли вслух" по данному
вопросу Перевод строки, пробелы, табуляция
При подготовке web-страниц обязательно следует помнить, что введенное
пользователем с помощью клавиатуры форматирование текста, включающее
в себя пробелы, отступы табуляции и переводы строки, игнорируются
броузером при интерпретации html-документа. Иными словами, такие элементы текста, как данное словосочетание или данное словосочетание на экране монитора будут выглядеть одинаковым образом: данное словосочетание Таким образом, любое количество пробелов между словами, отступ,
выполненный посредством клавиши Tab, или перевод строки по нажатии
клавиши Enter преобразуются при компиляции документа в один символ
пробела. Поэтому для форматирования основного текста на web-странице
применяются специальные теги, которые мы изучим в рамках этого же
урока. Исключением из этого правила может служить только текст,
помеченный специальным тегом <PRE> — командой предварительного
форматирования. Мнемоника записи этого тега выглядит следующим образом:
<PRE> предварительно отформатированный текст </PRE> В этом случае все, что расположено между открывающим и закрывающим
тегами <PRE>, а в нашем примере это выражение предварительно
отформатированный текст, отобразится в окне броузера с сохранением
всех введенных дизайнером пробелов, переводов строк и отступов табуляции.
Однако злоупотреблять применением данной команды не рекомендуется,
поскольку в силу несхожести алгоритмов обработки кода HTML различными
броузерами возможно искажение отформатированного таким образом текста
в зависимости от экранных настроек пользователей. Помните, что внутри
тега PRE запрещено использовать другие теги форматирования текста.
Очевидно также, что запись <ТЕГ>текст эквивалентна записи <ТЕГ>текста запись текст</ТЕГ> идентична записи текст</ТЕГ>В указанных случаях переводы строки также игнорируются.
1>>>2>>>3>>>4 Обсудить
в форуме...>>>>
|
