Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:

1473

.pdf
Скачиваний:
36
Добавлен:
27.05.2015
Размер:
646.55 Кб
Скачать

Министерство образования и науки Российской Федерации

Государственное образовательное учреждение высшего профессионального образования

«СИБИРСКИЙ ГОСУДАРСТВЕННЫЙ ИНДУСТРИАЛЬНЫЙ УНИВЕРСИТЕТ»

Кафедра прикладной информатики

ОСНОВЫ ЯЗЫКА HTML

Методические указания к выполнению лабораторных работ по дисциплине «Вычислительная техника и сети»

Специальности: 190701 – Организация перевозок и управление на транспорте (автомобильном и железнодорожном)

Новокузнецк 2010

УДК 004.43(07) О 753

Рецензенты:

Кафедра информационных технологий в металлургии ГОУ ВПО СибГИУ

(Зав. кафедрой В.П. Цымбал)

О 753 Основы языка HTML. метод. указ. / Сост. Н.В. Балицкая : СибГИУ. – Новокузнецк, 2010. – 41 с.

Приведены основные теоретические положения, описывающие создание WEB-страниц при помощи языка HTML, набор практических упражнений, задания для выполнения лабораторных и самостоятельных работ по дисциплине «Вычислительная техника и сети».

Предназначены для студентов специальностей: 190701 – Организация перевозок и управление на транспорте (автомобильном и железнодорожном), а также может быть рекомендована для студентов других специальностей.

СОДЕРЖАНИЕ

 

ОБЩИЕ СВЕДЕНИЯ..........................................................................

3

ВЕДЕНИЕ..............................................................................................

4

Базовые элементы языка гипертекстовой разметки документов

HTML .....................................................................................................

6

Структура HTML - документа ..........................................................

7

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

8

Теги форматирования шрифта.......................................................

11

Списки..................................................................................................

14

Таблицы...............................................................................................

17

Ссылки.................................................................................................

23

Фреймы................................................................................................

26

ГЛОССАРИЙ......................................................................................

29

Приложение 1......................................................................................

33

Приложение 2......................................................................................

33

2

ОБЩИЕСВЕДЕНИЯ

Цель работы

Изучить основы языка разметки гипертекста – HTML (HyperText Markup Language) и приобрести навыки создания простейших Webстраниц.

Что необходимо знать и уметь

После выполнения лабораторной работы необходимо знать:

1.что такое Web-страница;

2.для чего нужен язык разметки гипертекста;

3.что такое тэг, элемент;

4.что такое базовые элементы HTML;

5.каковы основы построения HTML-документа.

После выполнения лабораторной работы необходимо уметь:

разрабатывать Web-страницы;

использовать тэги для оформления страниц;

применять тэги списков, заголовков, таблиц, форматирования шрифтов;

уметь связывать несколько HTML-страниц по средствам гиперсвязи и ссылок;

вставлять объекты в HTML-страницы.

3

Порядок выполнения работы

1.Изучить теоретическую часть методических рекомендаций (понятия тэг, атрибуты тэгов).

2.Выполнить предложенные промежуточные задания.

3.Ответить на контрольные вопросы.

4.Выбрать индивидуальное задание для самостоятельной работы.

5.Создать HTML-страницы в соответствии с заданием.

6.Результаты показать преподавателю.

7.По окончанию работы отключить компьютер.

ВЕДЕНИЕ

Современный этап развития Интернета начался с появлением нового протокола обмена информацией – HTTP (HyperText Transfer Protocol – протокол передачи гипертекста). Вместе с этим протоколом появилась и служба World Wide Web (WWW-Всемирная паутина), которая представляет собой обширную сеть серверов HTTP, передающих файлы через Интернет.

Основную часть этих файлов представляют собой Web-страницы

специальные файлы, написанные на языке HTML (HyperText Markup Language) – языке разметки гипертекста. Web –страницы публикуются в Интернете путем размещения таких файлов на

серверах HTTP (Web-узлах или We-сайты). Важной особенностью языка HTML является его независимость от типа компьютерных платформ. HTML представляет собой компьютерный язык, в некотором смысле родственный языкам программирования. Он включает достаточно строгие правила, которые необходимо соблюдать, чтобы получить правильные результаты.

Содержание Web-страниц может быть разным, и посвящено совершенно произвольным темам, но они используют одну и ту же основу – язык HTML. Документы HTML имеют расширение .НТМ или .HTML (например, list1.htm). Простейшие HTML-документы представляют собой обычные текстовые файлы, для просмотра и редактирования которых можно воспользоваться любым текстовым редактором. Чтение WWW-страниц в Интернет производится по протоколу HTTP (обозначение http://).

Для создания Web–страниц можно использовать не только язык

4

HTML, но и различные программные продукты, в том числе и специально предназначенные программы WYS/WYG, среди которых конверторы – FrontPage, MS PowerPoint, DreamViewer, Astound Presentation, HomeSite, Adobe GoLive!, MS Access, MS Word, MS Publisher, Macromedia Flash и др.

Гипертекст — это текст, в который встроены специальные коды, управляющие дополнительными элементами, такими как форматирование, иллюстрации, мультимедийные вставки и гиперссылка на другие документы. Под разметкой понимается вставка в текст этих кодов, определяющих то, как итоговый гипертекстовый документ должен отображаться специальной программой – браузером. Разметка используется для определения формата или стиля, который будет применен при выводе размеченного документа на экран монитора. Браузеры интерпретируют файлы, размеченные по правилам языка HTML. Разметка может быть простой или сложной, но в любом случае исходный текст сохраняется в документе в неизменном виде.

Основными достоинствами HTML – документов являются:

малый информационный объем;

возможность просмотра на персональных компьютерах, оснащенных различными операционными системами;

для создания web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста.

Кроме версии языка HTML существуют последняя версия XHTML

(eXtensible HyperText Markup Language) и версия XML (eXtensible Markup Language).

"Замечание по выполнению лабораторной работы

Для работы (создание, редактирование) с документом HTML можно использовать любое приложение, предназначенное для работы с текстовыми документами (например: Блокнот или WordPad), а для просмотра созданной страницы любой браузер

(например Internet Explorer и др.).

5

Базовые элементы языка гипертекстовой разметки документов

HTML

В HTML есть два вида базовых элементов: символьные константы и тэги разметки. Язык разметки HTML представляет собой набор текстовых символов, называемых элементами, который используется для задания структуры и правил оформления документа.

Элемент (element) – конструкция языка HTML. Это контейнер, содержащий данные и правила их форматирования.

Элементы языка HTML состоят из буквенно–цифровых символов помещенных в угловые скобки.

Тэг (tag- дескриптор, признак, ярлык) – маркер элемента HTML. Все тэги заключаются между символами-ограничителями <…>,

между которыми записывается идентификатор (имя) тэга. Примеры тэгов:

<B> - отображает текст полужирным шрифтом; <I> - отображает текст курсивом.

Здесь B и I имена тэгов.

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

<B> Информация </B>

Здесь <B> - открывающий и </B> - закрывающий тэги, которые предписывают браузеру выделить слово Информация полужирным шрифтом.

Эффект применения тэга может видоизменяться используя

атрибуты.

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

6

Пример:

<TABLE BORDER ALIGN=”left”>

Здесь для тэга <TABLE> задано два атрибута. Первый атрибут BORDER указан без значения, второй ALIGN имеет значение left.

Структура HTML - документа

Все документы HTML имеют строго заданную структуру. Любой документ начинается с тега <HTML> и заканчивается тэгом </HTML>. Между парой тэгов <HTML> и </HTML> располагается сам документ. Структура HTML – документа состоит из раздела

заголовков (начинается тэгом <HEAD>)

и тела документа

(начинается тэгом <BODY>).

 

Раздел заголовков заключён между тэгами <HEAD> и </HEAD> и содержит информацию о документе в целом. Радел <TITLE> является единственным обязательным элементов заголовка документа и служит для того, чтобы дать документу название, которое должно кратко характеризовать его содержание. Название обычно показывается в заголовке окна браузера. Этот тэг нельзя путать с названием файла документа, он представляет собой текстовую строку, совершенно не зависимую от имени и местоположения файла.

В теле документа располагается сам текст документа, который помещается между тэгами <BODY> и </BODY>. Тэг <BODY> имеет ряд параметров, основные из них:

ALINK – определяет цвет активной ссылки;

BACKGROUND – указывает на URL-адрес изображения, которое используется в качестве фонового;

BGCOLOR – определяет цвет фона документа (см. приложение 1); LINK – определяет цвет еще не просмотренной ссылки;

SCROLL – устанавливает наличие или отсутствие полос прокрутки окна браузера;

TEXT – определяет цвет текста;

VLINK – определяет цвет уже просмотренной ссылки.

Пример:

Для создания HTML документ Пример1.htm, используются

7

известные тэги.

<HTML> <HEAD>

<TITLE> Название документа </TITLE> </HEAD>

<BODY> Этот текст можно прочитать на экране

</BODY> </HTML>

Результат просмотра HTML документа по средствам браузера показан на рисунке 1.

Заголовок документа

Имя

файла

Текст документа

Рисунок 1 – Окно браузера отображающее HTML документ

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

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

Для разметки заголовков используются парные тэги <H1>, <H2>, <H3>, <H4>, <H5> и <H6>, которые соответствуют заголовку 1,2,3,4,5 и 6 уровня. Каждому заголовку соответствует определенный размер шрифта, чем выше уровень заголовка, тем больше размер шрифта. При использовании тэгов заголовков осуществляется вставка пустой строки до и после заголовка. Тэги заголовков могут задаваться с параметром горизонтального выравнивания <ALIGN>. Возможные значения параметра <ALIGN>следующие:

LEFT – выравнивание по левой границе окна браузера;

CENTER – выравнивание по центру окна браузера; RIGHT – выравнивание по правой границе окна браузера;

8

JUSTIFY – выравнивание по ширине окна браузера.

Пример:

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

<HTML> <HEAD>

<TITLE>ВЫРАВНИВАНИЕ ЗАГОЛОВКОВ</TITLE> </HEAD> <BODY>

<H1>Заголовок размера 1</H1>

<H3 ALIGN="CENTER">Заголовок размера 3</H3>

<H6 ALIGN="RIGHT">Заголовок размера 6</H6>

Основной текст документа

</BODY> </HTML>

Рисунок 2 – Пример HTML документа содержащего заголовки разного уровня и способы выравнивания

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

задание абзацев;

9

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]