Методическая разработка. для студентов 1 курса фармацевтического факультета

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

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

«Структура Web-страниц»

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

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

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

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

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

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

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

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

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

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

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

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

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

Для создания 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?

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

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

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

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