На главную | Отправить SMS | Сделать стартовой | Поставить закладку |
Разделы сайта

 Главная
 Новости
 Регистрация
 Region Free Keys
 Телефония
 Железо
 Software
 Секреты Windows
 Безопасность
 Web-дизайн
 Web-мастерам
 Фото-приколы
 Хостинги
 Раскрутка сайта
 Анекдоты
 Игромания
 Фотогалерея
 Разное
 Знакомства
 Мир техники
 Флейм
 Голосования
 Музыка
 Спорт
 Кино
 Авто
 Зал суда
 Программа TB
 Форум
 Авторам статей
 Реклама на сайте

Рассылка


Подписаться на рассылку
"Все о WEB-дизайне"

Content.Mail.Ru

Реклама



Error. Page cannot be displayed. Please contact your service provider for more details. (31)




Web-дизайн

| Основы 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-последовательности

Символ

Значение

Команда

<

>

"

&

                  ©

®

Символ меньше, чем; левая угловая скобка 

Символ больше, чем; правая угловая скобка 

Прямые кавычки 

Амперсанд

Неразрывный пробел (словосочетания, разделенные таким пробелом, не разрываются при переносе)

Символ копирайта

Символ зарегистрированной торговой марки

&lt;

&gt;

&quot;

&атр;

&nbsp;

&сору;

&reg;

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

На этой страничке изложены мои &quot:мысли вслух&quot; по данному вопросу отобразится в окне броузера следующим образом:

На этой страничке изложены мои "мысли вслух" по данному вопросу

  Перевод строки, пробелы, табуляция

При подготовке web-страниц обязательно следует помнить, что введенное пользователем с помощью клавиатуры форматирование текста, включающее в себя пробелы, отступы табуляции и переводы строки, игнорируются броузером при интерпретации html-документа.

Иными словами, такие элементы текста, как

данное       словосочетание

или

данное

словосочетание

на экране монитора будут выглядеть одинаковым образом:

данное словосочетание

Таким образом, любое количество пробелов между словами, отступ, выполненный посредством клавиши Tab, или перевод строки по нажатии клавиши Enter преобразуются при компиляции документа в один символ пробела. Поэтому для форматирования основного текста на web-странице применяются специальные теги, которые мы изучим в рамках этого же урока. Исключением из этого правила может служить только текст, помеченный специальным тегом <PRE> — командой предварительного форматирования. Мнемоника записи этого тега выглядит следующим образом:

<PRE>

предварительно отформатированный текст

</PRE>

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

Очевидно также, что запись

<ТЕГ>текст

эквивалентна записи

<ТЕГ>текста запись

текст</ТЕГ>

идентична записи

текст</ТЕГ>В указанных случаях переводы строки также игнорируются.

1>>>2>>>3>>>4

Содержание

Обсудить в форуме...>>>>

 

Каталог

Реклама


Rambler's Top100 Rambler's Top100

© 2002-2012, DIWAXX.RU. Дизайн Freeline Studio. Хостинг http://www.mtw.ru. Вопросы, пожелания, предложения: admin@diwaxx.ru