Создание web-страниц
«World Wide Web» переводится как «всемирная паутина», и название достаточно точно определяет суть явления. WWW — гигантская сеть страниц (документов), связанных между собой гиперссылками.
Способ, позволяющий «общаться» компьютерам, называется протокол. Internet работает на основе двух протоколов: TCP (Transmission Control Protocol — протокол управления передачей) и IP (Internet Protocol — протокол Internet),— которые вместе стали известны как TCP/IP. Изобретение этих протоколов в начале 80-х годов позволило обмениваться данными и использовать их как компьютерам, так и компьютерным сетям разных типов.
Основа WWW — файлы в формате HTML (Hyper Text Markup Language — язык разметки гипертекста), или гипертекстовые страницы. Гипертекст — это легкая в использовании и чрезвычайно мощная система связанных слов и фраз, позволяющая легко перемещаться по особым образом организованным страницам. Она связывает фразу или слово одной страницы с любой другой страницей, абзацем, фразой или словом. Если развить идею гипертекста и включить в него графику, видео и звук, мы получим гипермедиа. Гипермедиа — среда, основанная, как и гипертекст, на взаимосвязях, в которой в качестве гиперссылок могут выступать визуальные и аудиокомпоненты. Гипертекст и гипермедиа являются фундаментальными для WWW технологиями, а HTML — средство для работы с этими технологиями.
Для создания Web-страниц используется специальный язык разметки гипертекста, который называется HTML. Страница на языке HTML представляет собой обычный текстовый файл в формате ASCII, в который добавлены специальные инструкции, называемые тэгами (дескрипторами).
Тэги — это команды, определяющие внешний вид Web-документа и формирующие связи с другими Web-ресурсами.
Существует два способа создания Web-страниц:
«вручную», посредством набора тэгов с помощью простейших текстовых редакторов (например, Блокнота);
с помощью визуальных HTML-редакторов (Microsoft FrontPage, Macromedia Dream waver, Microsoft Word и других).
В первом случае от разработчика Web-сайта требуется хорошее знание всех тэгов HTML и их атрибутов. Во втором случае разработчик вообще может ничего не знать о языке HTML, так как страницы создаются в визуальном режиме (аналогично созданию документов в текстовом редакторе), а HTML-код генерируется автоматически самим редактором и его, при необходимости, можно посмотреть и отредактировать.
Файлы с Web-содержимым обычно имеют расширение .htm или .html.
Документы, из которых состоит Web, находятся на Internet-серверах. Чтобы добраться до какого-либо WWW-документа, вы должны набрать в броузере, в строке «адрес», путь к этому документу. Этот путь называется URL (Uniform Resourse Locator — унифицированный указатель ресурса). URL состоит из названия сервера и, если требуется, названия каталога, в котором находится документ, и названия самого документа (т. е. имени файла HTML), разделенных знаком обратной косой черты (обратным слэшем) «/».
Для передачи разных типов данных были созданы протоколы, базирующиеся на TCP/IP. При работе с гипертекстовыми файлами используется HTTP (Hypertext Transfer Protocol — протокол передачи гипертекста). Пересылка по сети файлов любых типов осуществляется с помощью протокола FTP (File Transfer Protocol — протокол передачи файлов).
Файлы HTML состоят из обычного текста: вы можете просмотреть исходный код файла в любом текстовом редакторе, включая Блокнот Windows (Notepad). Но в этом случае вы увидите не web-страничку, а лишь текст в сочетании с метками HTML, из которых программа-броузер ее генерирует. Редактировать web-документы вы также можете, используя самый обычный Блокнот.
Примечание...
В WWW существует негласное правило, согласно которому первый файл, загружаемый броузером с какого-либо сервера по умолчанию, должен называться index.html. Таким образом, если вы явно не указываете имя документа, который вам требуется, а пишете только имя сервера, например www.yahoo.com, автоматически будет загружен файл index.html, находящийся на этом сервере, т. е. фактически будет выполнена команда http://www.yahoo.com/index.html.
Любой HTML-документ состоит из двух частей:
<HTML> <HEAD>
заголовок документа
</HEAD>
<BODY>
тело документа
</BODY>
</HTML>
В заголовке документа размещаются тэги, которые являются служебными и обычно не выводят на экран никакой информации (за исключением тэга <TITLE>). Между открывающим и закрывающим тэгом <BODY> располагается содержимое Web-страницы.
Многие тэги HTML могут иметь атрибуты, уточняющие их действие. Атрибуты бывают обязательными и необязательными и имеют вид: имя_атрибута=значение_атрибута. Если тэг содержит несколько атрибутов, то они отделяются друг от друга пробелом.
Метка языка HTML, или тег (англ. tag), или дескриптор, является основным средством разметки документа. При написании теги отделяются от остального текста угловыми скобками: «<» и «>». Регистр символов при этом также не имеет никакого значения, но хорошим тоном считается набор тегов в верхнем регистре, т. е. заглавными буквами. Это помогает визуально отделить теги от основного текста при последующем редактировании.
Существует два вида тегов: требующие закрытия (т. е. ограничения действия) и не требующие закрытия. Например, дескриптор <I>, изменяющий начертание шрифта на наклонное, является тегом, требующим закрытия, т. к. если он не будет закрыт, то весь текст, следующий после него, будет наклонным.
Закрывающим элементом всегда служит тот же самый тег, но со знаком «/» после первой угловой скобки.
Пример: <I>Этот текст будет отображаться как наклонный.</I> |
При закрытии тегов необходимо руководствоваться следующим правилом — если один закрывающий тег вложен внутрь второго, первым необходимо закрывать вложенный тег. Запомните, что закрывающие теги должны идти в порядке, обратном открывающим.
Пример: <I>Этот текст будет отображаться как наклонный. <U>А этот, как наклонный и подчеркнутый.</U></I> |
Теги, не требующие закрытия, всегда легко определить по смыслу их действия: обычно они выполняют какое-либо действие не над другим объектом, а сами по себе. Примером может послужить тег <BR>, вызывающий разрыв и переход на следующую строку.
Пример: На странице этот текст <BR> будет располагаться в две строки. |
Тег <HEAD> </HEAD> служит для определения заголовка документа, т. е. части файла, содержащей подробную информацию о документе, такие как: заголовок окна документа, имя создателя, индексный текст, используемый для помещения информации о странице в поисковые системы, и глобальные переменные, такие, как применяемая в документе кодировка и т. п. Этот тег также требует закрытия.
Рассмотрим теги, служащие для описания документа и располагающиеся в его заголовке. Эти теги должны располагаться в заголовке между <HEAD> и </HEAD>.
<TITLE> Этим, требующим закрытия тегом определяется название окна броузера, в котором будет просматриваться ваша страничка.
Пример: <TITLE>Моя первая web-страничка </TITLE> |
При просмотре этого документа в броузере в заголовке окна и на соответствующей этому окну кнопке на панели задач, будет текст «Моя первая web-страничка».
<META> Этот тег используется для указания подробной информации о документе. Употребляется в сочетании с описаниями атрибутов документа и не требует закрытия.
Атрибутами дескриптора <META> может быть любая информация, которую вы хотите сообщить. Существует несколько стандартных атрибутов, необходимых для указания броузеру способа кодировки документа, имени создателя и информации для поисковых систем:
<META HTTP-EQUIV=”Content-Type”CONTENT=”text/html; CHARSET=Windows-1251”> |
Атрибут CONTENT (содержание) указывает броузеру, что содержанием документа является HTML в кодировке (CHARSET) CP-1251(Windows). Информация о том, что документ размечен в формате HTML, фактически дублирует метку <HTML>, открывающую документ. А вот данные о кодировке документа нужны броузеру, чтобы сгенерировать конечный файл с тем набором символов, который принят в операционной системе пользователя. Если кодировка загружаемого документа отличается от системной, то броузер конвертирует текст документа, иначе — оставляет нетронутым.
Общая структура тега <META> такова:
<META NAME=”Имя определяемого параметра” CONTENT=”значение параметра”> |
Атрибут NAME содержит имя определяемого параметра, а CONTENT — значение параметра, определенного атрибутом NAME. Например, если вы хотите дать сведения об авторе документа, это можно сделать следующим образом:
<META NAME=”Author” CONTENT=”имя создателя странички”> |
Можно разместить ключевые слова в теге <META>:
<META NAME=”Keywords” CONTENT=”ключевые слова”> |
Ключевые слова необходимы для индексации вашей странички в поисковых системах. Чем больше слов, соответствующих содержанию вашей страницы вы напишите в этой строке, тем больше вероятность того, что вашу страницу посетит кто-нибудь кроме вас.
<HTML> <HEAD> <TITLE>Первая web-страничка</TITLE> <META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=windows-1251”> <META NAME=”Author”CONTENT=”Ivanov,Petrov, Sidorov”> <META NAME=”Keywords”CONTENT=”HTML, курс HTML, подводная лодка, курс, основы HTML, создание web-страниц”> </HEAD> </HTML> |
Заголовок HTML-документа вы уже создали. Осталось сделать «тело» нашей страницы. «Тело», как и «голова», ограничивается с двух сторон соответствующим тегом — <BODY> </BODY>. Таким образом, структура страницы выглядит следующим образом:
<HTML> <HEAD> Информация о страничке </HEAD>
<BODY> Информационное наполнение </BODY> </HTML> |
Можно сохранить файл со структурой страницы и использовать в дальнейшем как шаблон для новых HTML-документов.
В открывающий тег <BODY> могут входить элементы, определяющие параметры страницы, такие, как используемый фоновый рисунок, цвет и размер основного шрифта и гиперссылок, цвет фона и т. п. Цвета этих элементов web-страницы указываются в шестнадцатеричном исчислении.
Например, у создаваемой странички пока не будет фонового рисунка, а цвет фона и шрифта будут соответственно белым и черным. Строка с указанием этих параметров страницы будет содержать следующие элементы:
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000”> |
При таком варианте описания раздела <BODY> явно указываются только цвета фона и основного текста. Цвет гиперссылки и посещенной гиперссылки устанавливаются автоматически, в соответствии с настройками броузера. Если вы хотите установить для гиперссылок нестандартные цвета, например зеленый для непосещенной и голубой для посещенной, вам нужно будет указать цвета этих элементов. Пример:
<BODY BGCOLOR=”#FFFFFF” TEXT=”#000000” LINK=”#008000” VLINK=”#0080FF”> |
Для того чтобы оформить страничку фоновым рисунком (обоями), в теге <BODY> нужно указать параметр BACKGROUND=”имя файла”. Естественно, графический файл с фоновым рисунком также должен находиться на вашем Internet-сервере. В качестве фонового рисунка вы можете использовать только файлы формата GIF или JPEG.
Например, фоновый рисунок на нашей тестовой страничке задается файлом back.jpg, а цвета текста и гиперссылок не определены, т. е. устанавливаются согласно настройкам броузера.
Таким образом, тег <BODY> на нашей страничке выглядит так:
<BODY BACKGROUND=”back.jpg”> |
Обратите внимание, что регистр символов в имени файла имеет значение. После создания тега <BODY> с указанием цветов мы можем приступить к наполнению странички информационным содержимым.
Для оформления и форматирования текста в HTML-документах применяется в общем-то небольшое количество тегов. Если текст не оформлен никакими дескрипторами, то отображаться он будет в соответствии с настройками броузера пользователя.
Например:
<HTML> <HEAD> <TITLE>Первая web-страничка</TITLE> <META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; CHARSET=windows-1251”> </HEAD> <BODY> Этот текст не оформлен никакими дескрипторами, поэтому на странице он будет отображаться в соответствии с настройками броузера и свойствами, указанными в теге <BODY>. Броузер будет автоматически форматировать текст в зависимости от ширины окна и разрешения дисплея. </BODY> </HTML> |
Для управления шрифтовым оформлением WEB-страниц предназначен тег <FONT>. Этим тегом указываются параметры шрифта, такие, как размер, цвет и название. Параметры шрифта в теге <FONT> указываются в кавычках в любом порядке.
Определяя шрифт документа, помните, что при просмотре странички будут использоваться те шрифты, которые установлены на компьютере пользователя, а не на вашем компьютере. И если вы будете использовать на страничках необычные шрифты, никто кроме вас их не увидит.
В настоящее время стандартными шрифтами, использующимися в WWW, являются Times New Roman и Courier New. Также вы можете пользоваться и шрифтом Arial, так как он распространен не менее широко, чем указанные. Пользоваться другими шрифтами нет смысла, поскольку они недостаточно популярны.
Строка, указывающая, что данный фрагмент текста необходимо будет отображать с установленным по умолчанию шрифтом размером 6 единиц и буквами фиолетового цвета, будет выглядеть так:
<FONT SIZE=”6” COLOR=”#8080C0”>Текст.</FONT> |
Если вы желаете использовать для текста нестандартный шрифт, в теге <FONT> необходимо будет указать параметр FACE, т. е. для отображения той же строки шрифтом Arial тег будет выглядеть так:
<FONT FACE=”Arial” SIZE=”6” COLOR=”#8080C0”>Текст.</FONT> |
В параметре FACE можно указывать несколько шрифтов в порядке предпочтения. Текст будет отображаться тем шрифтом, который установлен на компьютере пользователя, в порядке предпочтения, указанном вами.
Пример: <FONT FACE=”Verdana, Tahoma, Arial”>Текст.<FONT> |
Если на компьютере пользователя, просматривающего вашу страничку, не найден ни один из указанных вами шрифтов, текст будет отображаться шрифтом, указанным в настройках броузера пользователя, и, скорее всего, им станет Times New Roman.
Для управления начертанием символов, т. е. для установки параметров Жирный (Bold), Курсив (Italic) и Подчеркнутый (Underlining), используются теги <B>, <I>, <U>. Эти теги требуют закрытия и могут использоваться, перекрывая действие друг друга.
Пример: <B>Жирный <I>Жирный-Курсив <U>Жирный-Курсив-Подчеркнутый</U></I></B> |