1. Принципы создания html-документов Цель – познакомиться с
advertisement
1. Принципы создания html-документов Цель – познакомиться с понятием языка гипертекстовой разметки html, освоить технологию написания html-кода и построения html-файлов. После изучения данного раздела Вы сможете: Описать общую структуру html-файлов. Создавать простейшие документы формата html, используя html-код. Web-страница (web-документ) – документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью web-браузера. Web-страницы обычно создаются на языках разметки html или xhtml и могут содержать гиперссылки для быстрого перехода на другие страницы [1]. Браузер (интернет-обозреватель) – программа, которая применяется для поиска и просмотра документов в сети Internet. Браузер интерпретирует html-код и отображает html-документ в его форматированном виде. Наиболее распространенными браузерами являются Internet Explorer, Mozilla Firefox, Opera, Google Chrome. HTML-код — текст программы, написанной на языке html. 1.1 Введение в язык гипертекстовой разметки html HTML (от англ. HyperText Markup Language - «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство web-страниц создаются при помощи языка html (или xhtml). Язык html интерпретируется браузером и отображается в виде документа, в удобной для человека форме [1]. Конструкции самого языка при этом от пользователя скрыты. Они нужны, по сути, для того, чтобы отформатировать содержимое документа, разместить в нужных местах рисунки, текст, приложения и другое. Без использования соответствующих элементов языка html содержимое документа будет отображаться браузером сплошным текстом в один абзац. Любой html-код представляет собой набор элементов. Элемент - это конструкция языка html, содержащая какие-то данные, например: <BODY> текст </BODY> - это элемент, в котором можно выделить три части: <BODY> - открывающий тег; текст - содержимое элемента (тега); </BODY> - закрывающий тег. Почти все теги в html парные, т.е. имеют открывающий и закрывающий тег. Теги начинаются символом "<" и заканчиваются символом ">", а закрывающий тег отличается от открывающего наличием символа "/". Пара тегов <BODY> </BODY> называется контейнером. Открывающий тег может содержать так называемые параметры или атрибуты, которые также как и сами теги предназначены для форматирования содержимого тега. Например: <BODY color="blue">. В этом примере: color –атрибут (параметр), blue – значение атрибута (параметра). Данный атрибут тега <BODY> даёт команду браузеру окрасить весь текст документа в синий цвет. 1.2 Структура html-документов Любой html-документ состоит из контейнера <HTML></HTML>, внутри которого располагаются еще два контейнера <HEAD></HEAD> и <BODY></BODY>. Элемент <HTML></HTML> указывает браузеру на то, что документ разработан с помощью языка разметки html. Все содержимое html-страницы должно помещаться в этот контейнер, начинаясь с тега <HTML> и заканчиваясь тегом </HTML>. Элемент <HEAD></HEAD> - «головной контейнер», содержащий внутренние сведения о документе (название, автора, ключевые слова). В «головной контейнер» входит обязательный элемент <TITLE></TITLE>, предназначенный для указания имени электронного документа, и мета-теги <META>, содержащие служебную информацию о внутренних свойствах документа. Элемент <BODY></BODY> указывает на начало "тела" (основной части) web-страницы. В этом разделе размещается весь материал (текст, графика, таблицы и другие элементы содержимого документа), который увидят пользователи, обратившиеся к html-странице. Общую структуру всех html-страниц можно представить в виде: <HTML> <HEAD> <TITLE>Название страницы</TITLE> </HEAD> <BODY> Текст страницы </BODY> </HTML> Для создания html-файлов можно использовать любые текстовые редакторы, такие как Блокнот или Word. Достаточно прописать в документе html-код и сохранить файл с расширением .htm или .html. Открыть полученный html-документ необходимо с помощью браузера (см. глоссарий). 1.3 Практикум Задание 1. Откройте программу Блокнот. Перепишите общую структуру html-страницы, приведенную выше. Сохраните файл, поменяв расширение .txt на .htm (или .html). Откройте сохраненный файл с помощью браузера. Примечание. При сохранении html-файла название файлу рекомендуется присваивать латинскими буквами во избежание возможных проблем при регистрации или размещении в Интернет учебного издания. А также имя файла целесообразно давать исходя из его содержания. Задание 2. Откройте Ваш файл с помощью Блокнота. В html-коде поменяйте «Текст страницы» и «Название страницы» на любой другой текст и сохраните изменения. Откройте файл с помощью браузера. Проанализируйте результат. Задание 3. Зайдите в интернет и откройте любую web-страницу. В браузере в зависимости от его версии выберите одну из предложенных команд «Вид/Исходный код страницы» или «Страница/Просмотр HTML-кода». Таким образом в интернете понравившейся web-страницы. реализуется возможность Библиографический список 1. http://ru.wikipedia.org 2. Иванов Г.Ф. Технология создания электронных учебных пособий. просмотра html-кода
