Реферат: Основы HTML



Основы HTML

HTML (Hypertext Markup Language) был впервые разработан Тимом Бернерс-Ли (Tim Berners-Lee) в то время когда он работал в ЦЕРНе и приобрел популярность благодаря броузеру "Мозаика" разработанному в NCSA. Первая спецификация этого универсального и общедоступного языка разметки - HTML 0 была утверждена в 1991 году. Уже через два года W3C объявил о выходе HTML 3. Затем, почти сразу, последовала спецификация версии 3.2, с которой мы имеем дело сейчас на подавляющем большинстве Web-страниц. В HTML 4 произошла лишь переработка концепций, и не было добавлено ничего принципиально нового.

На сегодняшний день HTML остается самым универсальным, даже незаменимым средством разметки гипертекста, а, следовательно, и публикации в Интернет. Язык разметки гипертекста по определению должен интерпретироваться броузером. Это, безусловно, накладывает некоторые ограничения на возможности языка и на совместимость новых конструкций со старыми версиями броузеров.

Однако, именно эта особенность языков разметки оставляет прекрасную возможность генерировать HTML-код другими программами (CGI-скриптами). Современные Web-страницы уже не обходятся одним только HTML. Его гармонично дополняют средства динамического HTML: скрипт языки JavaScript и/или VBScript, каскадные таблицы стилей(CSS), иногда присутствуют Java-апплеты.

Web-страничка – это обычный текстовый файл в соответствующей кодировке. В нем описывается вся страничка с помощью языка гипертекстовой разметки – HTML (HyperText Markup Language). Когда вы в своем браузере (Internet Explorer / Nestcape Navigator) загружаете web-страничку, то браузер выполняет команды, записанные на языке HTML, и, подчиняясь им, выводит на экран страничку.

Создавать HTML-файлы нужно в текстовых редакторах, которые умеют сохранять файлы в формате "Только текст" (расширение .txt). Если вы создадите такой файл в Word'e и сохраните в формате "Документ", а потом поменяете расширение .doc на .html, то у вас получится полная абракадабра, т.к. Word и сам не лыком шит и добавляет в свои "фирменные файлы" массу специальных команд форматирования, очень сильно отличающихся от тэгов HTML. Поэтому на первое время, чтобы не запутаться, идеальным редактором является "Блокнот" (Notepad) из стандартной поставки Windows.

Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки".

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML , которая обычно выглядит так:

Эта строка поможет браузеру определить, как правильно интерпретировать данный документ. В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 4.1, которая хоть и не отличается новизной, но, в отличие от более поздних версий, является полноценным, широко распространенным стандартом без каких-либо неопределенностей.

После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тэга-контейнера . Необходимо отметить, что любой HTML-документ открывется тэгом и им же закрывается.
Эти тэги сообщают браузеру, что текст между ними следует интерпритировать как HTML-текст. Поскольку документы HTML чисто текстовые, тэг говорит о том, что файл написан на языке HTML (HyperTextMarkupLanguage - Язык гипертекстовой разметки).

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

Начнем с пары тэгов . Внутрь этого контейнера рядышком положим два "ящика" поменьше: и (именно в такой последовательности! не может же "голова" быть ниже "тела"!). Затем внутрь "ящика-головы" вложим "ящичек-название" - , а внутрь "ящика-тела" - "ящички-блоки", рядышком, друг за другом:

и . Ну а теперь можно наполнить наши коробки содержимым - обычным текстом.

Если приведенный выше пример пояснить схематически, получится следующее:

Из схемы видно, что документ состоит из двух основных блоков - "заголовка" и "тела документа". Заголовок определяется с помощью элемента HEAD, а тело - элементом BODY.

Тэги-контейнеры можно (и нужно!) вкладывать друг в друга. При этом важно соблюдать правильную вложенность тэгов. Если вы представите себе тэги-контейнеры в виде настоящих ящичков, вы быстро разберетесь во вложенности. В самом деле, ведь нельзя вложить маленький ящик в большой, закрыв при этом большой ящик крышечкой от маленького! Нужно закрыть маленький ящичек маленькой крышечкой, поместить его вместе с крышечкой в большой ящик, а тот уже накрыть большой крышкой. Так же и с тэгами - один в другой нужно вкладывать целиком, нельзя оставлять закрывающий тэг или часть содержимого вместе с закрывающим тэгом снаружи!

Правильно:	Неправильно:	Неправильно:
Здесь все сверстано верно.	А здесь допущена ошибка.	А здесь тоже допущена ошибка.

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

Атрибут HTTP-EQUIV

META-таги с атрибутом HTTP-EQUIV эквивалентны HTTP-заголовкам. Обычно они управляют действиями броузеров и могут быть использованы для совершенствования информации, выдаваемой обычными заголовками. Таги такой формы могут дать такой же эффект, что и HTTP-заголовки, и на некоторых серверах автоматически могут быть переведены в настоящие HTTP-заголовки. HTTP-заголовки описываются в RFC1945 (HTTP/1.0) и RFC2068 (HTTP/1.1).

HTTP-заголовки могут быть сгенерированы с помощью CGI-скриптов. Это позволяют сделать серверы Apache и CERN. В других серверах могут использоваться другие механизмы генерирования заголовков. Некоторые генерируемые сервером поля заголовков не могут быть подменены значениями из META-тагов (в частности Date), другие подменяются только при ненормальном статус-коде (<>200). Когда заголовок не понятен, то значение HTTP-заголовка превалирует над значением META-тагов.

Expires

Источники: HTTP/1.1 (RFC2068)

Дата устаревания. Управление кэшированием в HTTP/1.0. В Netscape Navigator это выглядит следующим образом: если указанная дата прошла, то очередной запрос этого документа вызывает повторный сетевой запрос, а не подгрузку документа из кэша. Дата со значением "0" интерпретируется как "сейчас". Такое значение заставляет броузер каждый раз при запросе проверять - изменялся ли этот документ. Это, кстати относится и к прокси-агентам. Поисковые роботы могут либо совсем не индексировать такой документ, либо постоянно "обнюхивать" его.

Дата должна быть задана в формате, описываемом в RFC850,

что эквивалентно HTTP-заголовку

Expires: Wed, 26 Feb 1997 08:21:57 GMT

Pragma

Контроль кэширования для HTTP/1.0. Значением должно быть "no-cache". Очень полезный контейнер, я всегда использую его при выдаче результатов работы любого скрипта.

Content-Type

Источники: HTTP/1.0 (RFC1045)

Указание типа документа. Может быть расширено указанием кодировки страницы (charset). Если же указывать charset в содержании META-тага, то Netscape Navigator выводит такую страницу уже в заданном charset. Однако будьте аккуратны, если текст страницы в кодировке Windows, а значение charset=KOI8-r, то никакими силами пользователь не сможет поменять encoding, чтобы увидеть нормальные слова!

Content-language

Источники: HTTP/1.0

Указание языка документа. Может использоваться поисковыми машинами при индексировании страниц. Комбинация поля Accept-Language (посылаемого броузером) с содержимым Content-language может быть условием выбора сервером того или иного языка.

что эквивалентно HTTP-заголовку

Content-language: en-GB

Язык описывается парой значений (язык-диалект). В примере: Английский-Великобритания

В недавно вышедшей спецификации HTML 4.0 появилась другая возможность явного указания языка -

Refresh

Источники: Netscape

Определение задержки в секундах, после которой броузер автоматически обновляет документ. Дополнительная возможность - автоматическая загрузка другого документа.

что эквивалентно HTTP-заголовку

Refresh: 3; URL=http://www.name.com/page.html

В Netscape Navigator это дает такой же эффект, что и нажатие на кнопку Reload.

Window-target

Источники: Jahn Rentmeister

Определяет окно текущей страницы; может быть использован для прекращения появления новых окон броузера при применении фреймовых структур. Действует для многих (но не для всех) броузеров.

что эквивалентно HTTP-заголовку

Window-target: _top

Ext-cache

Источники: Netscape

Определяет имя альтернативного кэша для Netscape Navigator

Set-Cookie

Устанавливает cookie броузера.

PICS-Label

Platform-Independant Content rating Scheme. Обычно используется для определения рейтинга "взрослости" (adult) содержания (sex,violence, ...):-)) однако это довольно гибкая схема и может использоваться для других целей.

Cache-Control

Источники: HTTP/1.1

Определяет действия кэша по отношению к данному документу. Возможные значения:

• Public - документ кэшируется в доступных для всех кэшах

• Private - только в частном кэше

• no-cache - не может быть кэширован

• no-store - может быть кэширован, но не сохраняется

Vary

Источники: HTTP/1.1

Определяет доступные альтернативы для указанных в CONTENT полей HTTP-заголовка.

что эквивалентно HTTP-заголовку

Vary: Content-language

Lotus

Lotus-редакторы генерируют свои собственные поля Bulletin-Date и Bulletin-Text атрибуты. Bulletin-Text содержит описание документа

Атрибут NAME

META-таги с атрибутом NAME используются в случаях, когда поля не соотносятся с HTTP-заголовками. Иногда ясность теряется: некоторые агенты могут интерпретировать таг "Keywords" описанный как NAME, другие - как HTTP-EQUIV

Robots

Источники: Spidering

Управление индексацией страницы для поисковых роботов.

Возможные значения:

• ALL

• NONE

• INDEX

• NOINDEX

• FOLLOW

• NOFOLLOW

Description

Источники: Spidering, Altavista, Infoseek

Краткая аннотация содержания документа. Используется поисковыми системами для описания документа. Этот таг сильно полезен в случаях, когда в документе мало текста, когда это управляющий фреймами файл (frameset) или в начале документа используются скрипты. Длина текста до 100 символов.

Keywords

Источники: Altavista, Infoseek

Используется поисковыми системами для индексирования документа. Обычно здесь указываются синонимы к словам в заголовке (title) или альтернативный заголовок. Длина списка до 1000 символов. Не допускается использование одного и того же ключевого слова более 7 раз, поисковые системы просто будут игнорировать это слово.

Document-state

Источники: Spidering

Управление индексацией страницы для поисковых роботов. Определяет частоту индексации - или один раз индексировать, или реиндексировать документ регулярно.

Возможные значения:

• Static

• Dynamic

URL

Источники: Spidering

Управление индексацией страницы для поисковых роботов. Определяет частоту индексации - или один раз индексировать, или реиндексировать документ регулярно.

Author

Источники: HTML редакторы

Обычно имя автора, формат произвольный.

Generator

Источники: HTML редакторы

Обычно название и версия редактора, с помощью которого создана эта страница. Может быть использована для определения доли рынка, занимаемого тем или иным продуктом.

Copyright

Источники: HTML редакторы

Обычно описание авторских прав на документ в произвольном формате

Distribution

Возможные значения

• global

• local

• iu (internal use)

Resource-type

Текущее состояние данного файла. Важен для поисковых систем, т.е. если его значение document, то поисковая система приступает к его индексированию.

Прочие

• Classification

• Formatter

• Site-languages

• Version

• Template

• Operator

• Rating

• Creation

• Host

• Document

• Subject

• Build

• Random text ()

Помимо перечисленных более или менее стандартных тагов существует еще множество других специализированных, например, для конкретной поисковой машины тагов.

Таг LINK

Таг LINK предоставляет документу независимый от среды метод определения отношения данного документа к другим документам и ресурсам Сети. Используется с аргументами REL и REV. С помощью тага LINK можно:

• создавать в документе специальные навигационные кнопки или меню

• управлять процессом отображения набора HTML файлов в печатные документы

• привязывать такие ассоциированные ресурсы, как таблицы стилей и скрипты

• предоставлять альтернативные формы для данного документа

где http://www.name.com/help.html - страница помощи по данному документу.

Атрибуты REL и REV могут также использоваться с тагом A. Таги LINK могут использоваться только в заголовке документа (head)

Атрибут REL

HTML 3.2 REL-таги

top, contents, index, glossary, copyright, next, previous, search

Некоторые из рекомендованных типов взаимосвязей:

rel=top

Данная связь указывает на вершину в некой иерархической структуре, например на первую, либо титульную страницу в неком наборе документов.

rel=contents

Данная связь указывает на некий файл, где приводится оглавление к данному документу.

rel=index

Данная связь указывает на другой документ, который можно использовать в целях индексного поиска по текущему документу.

rel=glossary

Данная связь указывает на некий документ, где содержится глоссарий терминов, относящихся к текущему документу.

rel=copyright

Данная связь ссылается на текст, где указаны авторские права на данный документ.

rel=next

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

rel=previous

Данная связь ссылается на предыдущий документ в неком предопределенном маршруте просмотра.

rel=help

Данная связь указывает на документ, предлагающий некую помощь, например это может быть текст, дающий более развернутое описание и предлагающий ссылки на другие документы по этой теме. Назначение этой связи - оказание помощи тем читателям, кто потерял свой путь в Web.

rel=search

Данная ссылка ведет к поисковой странице, контролирующей некий набор страниц, связанных общей темой.

Многие системы изобретают свои дополнительные значения аргументов REL и REV Таг Schema Этот таг содержит URL документа-шаблона. Действие всех метаданных из документа-шаблона будут распространены на документ с тагом Schema (так работает Dublin Core). ViewCall REL-таги home, bookmark, tickertape, vmail, icon, prefetch, keyn, fastxx AOLpress REL-таги AOLpress использует несколько дополнительных, по сравнению с HTML 3.2, тагов Home, ToC, Index, Glossary, Copyright, Up, Next, Previous, Help, Bookmark, First, Last

Атрибут REV

Используется в конструкции LINK для индикации обратного соотношения документов.

где текущая страница является страницей помощи для документа http://www.name.com/index.html

Использование в случае использования Lynx вызовет автоматическую отсылку почты по адресу document-owner.

Таг BASE

Этот таг определяет для данного документа базовый адрес URL, который затем будет использоваться для переопределения относительных адресов. Таг BASE полезен, если документ может быть скопирован в другое место или запрошен по другому пути с использованием символической ссылки, или редиректа с imagemap, и т.д.

Форматирование текста в HTML

Рассмотрим форматирование символов. Для того, чтобы выделить какую либо часть текста, можно использовать теги:

• , при этом различные слова и фразы вашего документа будут отображены жирным шрифтом

• - позволяют отображать различные части вашего документа курсивным шрифтом

• - подчеркивают текст.

• - этот тег существует для перечёркивания какого-либо текта.

замечание: в настоящее время для форматирования рекомендуется использовать таблицы стилей (CSS)

В последних версиях HTML появилось еще два новых тега - теги нижнего и верхнего индексов. Вряд ли вы будете часто использовать эти теги, но они очень удобны, когда вам нужно отобразить в своей странице такую специфическую информацию как химические формулы (H2O) или математические формулы (a2=b c2).

Чтобы текст выводился в виде нижнего индекса, его следует пометить между тегами _и , в виде верхниего - ^и . Например:

H₂0 (Код: - H₂0)

a²=b c² (Код: a²=b c²)

Задания размера текста желательно выполнять через стили. Он позволяют произвольно задавать размер текста. Поместив текст между тегами , где N - целое число, вы придадите ему нужный вам размер. Пример:

Это размер 10px
Это размер 12px
Это размер 14px
Это размер 16px

Результат

Это размер 10px
Это размер 12px
Это размер 14px
Это размер 16px

Задание шрифта производится с помощью тегов .

Очень аккуратно с этим параметром, так как заданный шрифт должен присутствовать на компьютере пользователя - в противном случае броузер подставит шрифт, определенный по умолчанию. Применяйте шрифты, в наличии которых вы уверены, иначе пользователь увидит текст иначе, чем вы. Пример:

Times New Roman
Arial
Courier New
System

Times New Roman
Arial
Courier New

Выбор хостинга

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

В добавок вы имеете имя предоставляемое вашим хостингом вида www.ваш_сайт.freehosting.ru; обязательное требование по размещению баннеров бесплатных, отсутствие множества полезных функций: поддержка PHP, CGI, VB, MySQL, FTP. Как известно бесплатным бывает только сыр в мышеловке.

Бесплатные службы хостинга уместны только для домашних страничек. Уверяем Вас, что организовать свой бизнес, размещая свой сайт на narod.ru, chat.ru, boom.ru, bizland.com, h1.ru, nm.ru и т.п., не удастся!

Очень неприятная особенность бесплатного хостинга - к вам относятся как к "халявщикам", не обмениваются ссылками с вами, не размещают в популярных каталогах, не индексируют поисковые сервера (или индексируют крайне плохо, дают низкий рейтинг)

Ни один серьезный клиент никогда не обратится в фирму, которая держит свой сайт на бесплатном хостинге.

Сегодня на рынке услуг хостинга существует жесткая конкуренция. Нужно привлекать клиента лучшими условиями и меньшими ценами. Это отчасти объясняет невысокие цены на хостинг. Но, на наш взгляд, основная причина, по которой возможно предоставлять недорогой хостинг, - это глобальное снижение цен на техническое оборудование. Легко проследить тенденцию к снижению цен как на жесткие диски, так и на память, процессоры и пр.

Все это позволяет снижать тарифы на услуги хостинга. Может сложиться впечатление, что по этой причине любая компания может оказывать профессиональные услуги хостинга. Это не так. Недостаточно купить (или арендовать) компьютер и подключить его к сети. Нужны профессиональные сотрудники и умение управлять сервером. Специалисты компании IHO Networks - профессионалы своего дела.

Клиент может сформировать свой собственный тарифный план, заказав дополнительные сервисы. Во многих компаниях это недоступно. Вам просто отвечают: "Извините, наши тарифные планы не предусматривают предоставление дополнительных услуг". Политика компании IHO Networks направлена на индивидуальный подход к клиенту. Каждому клиенту уделяется внимание.

Действительно, хостинг от IHO Networks можно рекомендовать не только для корпоративных клиентов, но и для домашних страниц. Разнообразие тарифных планов (от $4.5) позволит сделать оптимальный выбор.

Кроме того IHO Networks предлагает систему скидок для некоммерческих проектов, веб-мастеров и веб-студий