Основные элементы языка HTML
методическая разработка по информатике и икт (11 класс) на тему
Предварительный просмотр:
Настоящее пособие предназначено для ознакомления с основными принципами языка HTML и таких включаемых в web-страницу элементов как: каскадные таблицы стилей, слои, мета-теги, формы, скрипты, JAVA-апплеты
Содержание
Структура простейшего HTML документа
Гиперссылки
Оформление внешнего вида документа
CSS. Каскадные таблицы стилей.
Слои (Layers)
META-теги
Формы
Технология Server Side Include (SSI)
Скрипты в HTML документах
DHTML. Динамический HTML
Технология активных серверных страниц. ASP
JAVA-апплеты
Внедрение объетов. Тег
Преход к языку XML
Язык разметки гипертекста — HTML (HyperText Markup Language — возник на стыке нескольких направлений исследований и разработок. Существует три фактора, повлиявших на возникновение HTML.
Во-первых, HTML предназначен в основном для создания гипертекстовых документов.
Первые концепции и разработки, посвященные гипертексту, принадлежали Ванневару Бушу, предложившему концепцию системы Memex в сороковые годы, а также Дагласу Энгельбарту и Теодору Нельсону, работавшим над этой технологией в шестидесятые годы.
Термин "гипертекст" предложил Тед Нельсон в 1965 г. Вот как звучит определение гипертекста, которое дал Нельсон в 1987 г.: "форма письма, которое ветвится или осуществляется по запросу". Иначе говоря, HTML — это "нелинейное письмо", которое "больше, чем текст" (hypertext)
Во-вторых HTML это язык разметки. В 1986 году Международная организация по стандартизации (ISO) приняла стандарт ISO-8879, озаглавленный "Standard Generalized Markup Language (SGML)". Названный стандарт посвящен описанию SGML (http://www.webreference.com/dlab/books/html/3-0.html) — обобщенного метаязыка, позволяющего строить системы логической, структурной разметки любых разновидностей текстов. При этом управляющие коды, вносимые в текст при такой разметке, не несут никакой информации о внешнем виде документа, а лишь указывают границы и соподчинение его составных частей, т.е. задают его логическую структуру. Изначально HTML, как и положено SGML-приложению, был основан на принципах SGML.
Третьим фактором, определившим специфику HTML, было его применение в Интернете. В 1989 г., после экспериментов с собственными новыми сетевыми технологиями, Европейская лаборатория физики элементарных частиц (CERN) подсоединилась к Интернет. Этот исследовательский центр, расположенный в Женеве (Швейцария), сыграл существенную роль в разработке и принятии стандартов связи и распределенных вычислений, в частности, двух фундаментальных протоколов, которые являются базовыми для Интернет: Transmission Control Protocol (TCP) и Internet Protocol (IP).
В том же году Тим Бернерс-Ли предложил глобальную гипертекстовую систему, основанную на более раннем проекте "Enquire" и позволившую соединять связями не только текст, но и графику, звуки, видео. Глобальность этой системы, в отличие, например, от системы Теда Нельсона, предполагала, что данные будут распределяться по всему миру, а ее основой станет Интернет.
Бернерс-Ли был по образованию физиком. В 1984 г. он пришел в CERN, где занимался разработкой многозадачных операционных систем и компьютерных приложений. Изначальная цель создания новой системы, как и всей Интернет, состояла в обеспечении ученых, прежде всего физиков, новыми, удобными средствами коммуникации, обеспечивающими обмен результатами экспериментов, публикациями, совместную работу в режиме онлайн.
Через год Бернерс-Ли написал первое клиент-серверное обеспечение (гипертекстовую систему Enquire, которая по сути была записной книжкой) для того, что теперь известно как World Wide Web (WWW или W3). Эта система была впервые задействована в декабре 1990 г. и дорабатывалась вплоть до 1993 г. За это время был предложен гипертекстовый протокол передачи данных (HTTP).
Структура простейшего HTML документа
Теперь обратимся к рассмотрению самого языка разметки гипертекста, HTML.
Рассмотрим структуру простейшего HTML документа. Запишем в любом текстовом редакторе файл test.html, содержащий следующий текст:
Структурой и форматированием HTML документа управляют теги. Теги всегда располагаются в угловых скобках. Практически все теги являются парными, т.е. открывающему тегу соответствует закрывающийся, который пишется с чертой “/” после скобки: “
В случае нашего простейшего примера документ начинается с открывающего тега и заканчивается закрывающим тегом . Они очерчивают границы документа.
Затем следует “голова документа” ограниченная тегами и . В этой части документа может содержаться множество важной информации, но все содержимое секции head не отображается в окне браузера. Единственно обязательным элементом этой секции является “титул”:
Затем следует секция “тело” документа, ограниченное тегами ….. Здесь и располагается содержимое страницы, которое видит пользователь.
Что касается имен тегов и атрибутов, HTML является case-нечувствительным языком. Вы можете, например, написать TITLE, или Title, или title, или tItLE. Кроме того, для браузера не имеет значения расположение тегов, важен только их порядок. К примеру, предыдущая запись эквивалентна следующей:
Парные теги образуют "контейнеры". Понятие "контейнера", распространенное в информационных технологиях, полезно и здесь.
Перейдем теперь к содержимому секции “body”. Рассмотрим следующий пример:
первый абзац текста первый абзац текста
первый абзац текста первый абзац текста
первый абзац текста первый абзац текста
второй абзац текста второй абзац текста
второй абзац текста второй абзац текста
Здесь появился тег — тег разбиения текста на абзацы. Если не заканчивать абзац закрывающим тегом
Если набрать этот пример в любом текстовом редакторе и сохранить с расширением htm или html, а затем открыть в браузере, то мы увидим примерно следующее.
При использовании обычного набора тегов абзацы в HTML документе не имеют абзацного отступа и отделяются в браузере друг от друга пустой строкой. Если Вы хотите начать текст с новой строки, не создавая нового абзаца, используйте тег
— переход на новую строку. Это один из непарных тегов.
Гиперссылки
Рассмотрим теперь собственно самое важное свойство HTML — возможность создавать гиперссылки. Допустим для примера, что мы хотим создать ссылку на сайт http://www.freeware.ru/. Мы можем написать такой код:
Одна из лучших коллекций
бесплатных программ
Если открыть этот файл в браузере, то мы увидим:
Таким образом, гиперссылкой является слово “коллекций”. Гиперссылка в HTML-виде начинается тегом “
href="http://www.freeware.ru/",тег закрывающий.
Гиперссылка может указывать на документ на том же web-сервере. новости. Здесь гиперссылка “новости” указывает на документ pc_news.htm, находящийся во вложенной папке news. Такие гиперссылки называются относительными, так как указывают не абсолютный адрес ресурса, а относительный в данном сайте.
Кроме того, гиперссылка может указывать на другое место в том же самом документе. То место, на которое нужно сослаться, необходимо пометить “якорем”: , где x1 можно заменить на любое удобное обозначение. А ссылка записывается так: текст ссылки
Очевидно, что гиперссылка может указывать не только на HTML документ, но и на любой файл.
HTML-документ, кроме текста, может содержать еще и изображения. Пусть в том же каталоге, что и HTML-документ, находится файл с изображением class.jpg. Включение его в документ будет выглядеть так:
!["Учебная]("class.jpg")