Язык разметки гипертекстовых документов

Методическая разработка

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

к практическому занятию по теме

Структура Web -страниц. Технология создания Web -страниц в среде MSPublisher .

1. Научно-методическое обоснование темы:

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

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

Программа Microsoft Publisher представляет собой настольную издательскую систему, содержащую множество различных шаблонов. С помощью этой программы можно создать газеты, брошюры, визитные карточки, открытки, объявления, подарочные сертификаты, а также веб-страницы, для создания которых В Publisher включено множество готовых макетов. И как только вы овладеете основными навыками для начала работы с публикацией и для ее изменения, вы сможете применять эти навыки к публикациям любого типа.

2. Краткая теория:

Основныепонятия

Для того чтобы узнать что же на самом деле представляет из себя веб-страница достаточно средств браузера. Допустим в браузере GoogleChrome или InternetExplorer достаточно кликнуть правой кнопкой в свободном месте окна браузера и выбрать пункт «просмотр HTML-кода»(«просмотр кода страницы»).

Что мы видим? Все это множество пока непонятных для Вас символов и знаков есть код на языке HTML . Веб-страница отличается от обычного текста тем, что в ее коде фигурируют управляющие конструкции разметки, определяющие логическую структуру документа — так называемые теги. Теги заключены в угловые скобки. О том что обозначает каждый из тегов, мы поговорим позже. В коде страницы может быть не только HTML код, но и, например, таблицы стилей, javascript. Об этом тоже позднее.

В процессе загрузки и отображения (рендеринга) веб-страницы, браузер анализирует ее код. И если в нем встретится тег, предписывающий вставить тот или иной объект, скажем, изображение, браузер отправляет серверу соответствующий запрос. Веб-старицы обычно содержат около десятка связанных с ней объектов — и загрузка каждого из них сопровождается парой HTTP-сообщений запрос/ответ.

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

А страницы могут храниться на сервере в виде статических HTML-документов. В этом случае сервер, получив запрос от клиента (браузера), должен просто-напросто отправить в ответ содержимое готового файла. Казалось бы, как все хорошо! Запросы обрабатываются очень быстро.

Но вдруг вам захотелось поменять один из пунктов меню Вашего сайта. Для этого Вам нужно будет отредактировать каждую страницу сайта. А если у Вас десятки, сотни страниц? Представляете сколько усилий нужно потратить?

Так же статические страницы не обеспечивают ни какой интерактивности (комментарии, голосования, поиск, покупка товаров...).

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

Для создания WEB-страницы удобнее всего использовать мастер. Он запускается на вкладке WEB-страницы, вызываемой командой «Файл» «Создать». Разработаем для примера деловое письмо. Создание документа с помощью мастера можно поделить на несколько этапов:

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

2. Следующий шаг - выбор стиля страницы, то есть художественного оформления. Редактор использует для создания стиля рисунки, которые находятся в папках пакета MS Offiсe. Выберем стиль «Загородный» - орнамент из листьев. На этом создание заготовки WEB-страницы заканчивается. Можно нажать кнопку «Готово», и мастер завершит работу.

3. Теперь работа с WEB-страницей будет идти как с обычным документом. Здесь некоторые инструменты изменили свой вид. Например, исчез список для выбора размера шрифта, а его место заняли кнопки «Увеличить размер шрифта» и «Уменьшить размер шрифта». Создадим в самом начале документа новый абзац, выберем самый мелкий шрифт и введем адрес фирмы.

4. Преобразуем строку заголовка. Сотрем имеющийся в шаблоне текст-подсказку и введем название фирмы. А в правой части строки вставим логотип, то есть рисунок.

5. Осталось ввести текст письма, и документ готов.

Особенность WEB-страницы заключается в том, что для их оформления можно применять стандартные элементы: линии, гиперпосылки, рисунки форматов GIF и т.д. Для их создания используется меню «Вставка». Документ можно редактировать и в режиме источника, если выбрать страницу «Вид» - «Источник HTML». Тогда будет понятно, как создана та или иная деталь страницы. Но этот режим полезен только для пользователей, знающих HTML. Если на WEB-странице неправильно отображаются русские буквы, надо открыть ее в режиме источника и исправить соответствующий атрибут элемента МЕТА. Сохранять WEB-страницы необходимо в оригинальном формате (документ HTML). В этом случае файлу присваивается тип НТМ или HTML. При конвертации таких документов в формат DOS или обратно некоторые параметры форматирования не будут сохранены.

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

Все HTML документы записываются в ASCII формате и поэтому могут быть созданы и отредактированы в любом текстовом редакторе, например стандартное приложение "Блокнот" операционной системы Windows. Многие Web-мастера используют в работе редакторы, и правят тексты непосредственно на HTML. С помощью специализированных программ с использованием технологии WYSIWYG (что вижу, то и получу - примерный перевод) на подобие "Microsoft FrontPage", которые дают возможность, создавать документы графически без знания HTML. Подобные программы сами расставляют теги - вам останется только взять готовые текст, графику и, оформить страницу. Создавать страницу со сложной структурой, имея перед глазами только HTML-код трудно, но никакая программа не создаст текст, оптимальнее чем опытный Web-мастер, да и встраивать специфические теги значительно удобней вручную.

Язык разметки гипертекстовых документов

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

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

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

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

Создание HTML-документов

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

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

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

Для того чтобы создать Web-страницу, необходимо запустить Блокнот из Windows командой [Пуск-Программы-Стандартные-Блокнот] или из InternetExplorer командой [Вид-В виде HTML]. Сохранить файл под именем index.htm (имя index всегда присваивается стартовой странице, расширение htm в имени файла задает формат Web-страницы).

Минимальная Web-страница имеет вид:

<HTML>

<HEAD>

<TITLE> Заголовок в окне браузера </TITLE>

</HEAD>

<BODY>

Основное содержание страницы

</BODY>

</HTML>

Все теги записываются в угловых скобках "<" и ">". Документ должен начинаться тегом <HTML> и заканчиваться закрывающим тегом </HTML>. Эти теги указывают браузеру на то, что дальше будет идти документ в формате HTML. Для удобства, в HTML-коде, надо писать каждый тег с новой строки.

Любая Web-страница должна содержать следующие теги, их условно можно разделить на две категории:

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

Тег <HTML> обычно является первым и размещается в начале документа. Он информирует браузер о том, что используется язык HTML. Тэг </HTML> является последним тегом и размещается в самом конце документа. Между тегами <HTML> и </HTML> должны находиться теги <HEAD></HEAD> и <BODY></BODY>. Описательная часть документа <HEAD> Тег описательной части документа должен быть использован сразу после тега <HTML>, и более нигде. Данный тег представляет собой общее описание документа. Не следует размещать какой-либо текст внутри тега <HEAD>. Стартовый тег <HEAD> помещается непосредственно перед тегом <TITLE> и другими тегами, описывающими документ, а завершающий тег </HEAD> размещается сразу после окончания описания документа. В описании помещается название странички (то, которое показывается в заголовке окна) и некоторая другая информация. Для задания названия странички используются теги <TITLE></TITLE>. Внутри контейнера <BODY></BODY> будут происходить основные события по разметки страницы, работой с текстом и графикой в том числе.

Внимание! Технически, стартовые и завершающие теги типа <HTML>, <HEAD> и <BODY> необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тегов позволяет браузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть.

Все теги HTML начинаются с < (левой угловой скобки) и заканчиваются символом > (правой угловой скобки). Как правило, существует стартовый тег и завершающий тег. Для примера приведем теги заголовка, определяющие текст, находящийся внутри стартового и завершающего тега и описывающий заголовок документа:

<TITLE> Заголовок документа </TITLE>

Завершающий тег, выглядит также как стартовый, но отличается от него прямым слешем "/" перед текстом внутри угловых скобок. Тег <TITLE> говорит браузеру о задании названия страницы, а тег </TITLE> - о завершении названия.

Некоторые теги, такие, как <P> (параграф), не требуют завершающего тега, но его использование придает документу улучшенную читаемость и структурность.

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

Дата добавления: 2019-02-26; просмотров: 275; Мы поможем в написании вашей работы!

Поделиться с друзьями:

12 3 4 Следующая ⇒

Мы поможем в написании ваших работ!