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

Учебное пособие 1400

.pdf
Скачиваний:
4
Добавлен:
30.04.2022
Размер:
1.1 Mб
Скачать

МИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ

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

«Воронежский государственный технический университет»

Кафедра технологии сварочного производства и диагностики

ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ

МЕТОДИЧЕСКИЕ УКАЗАНИЯ

к проведению практических занятий для студентов направления 15.03.01 «Машиностроение»

(профили «Оборудование и технология сварочного производства», «Технологии, оборудование и автоматизация машиностроительных производств») всех форм обучения

Воронеж 2021

1

УДК

ББК

Составитель: канд. техн. наук М. В. Семеноженков

Информационные технологии: методические указания к проведению практических занятий для студентов направления 15.03.01«Машиностроение» (профили «Оборудование и технология сварочного производства», «Технологии, оборудование и автоматизация машиностроительных производств») всех форм обучения / ФГБОУ ВО «Воронежский государственный технический университет»; cост.: М. В. Семеноженков. – Воронеж: Изд-во ВГТУ, 2021.– 21 с.

В методических указаниях приведены возможности языка гипертекста для создания статических web-страниц.

Предназначены для студентов направления 15.03.01«Машиностроение» (профили «Оборудование и технология сварочного производства», «Технологии, оборудование и автоматизация машиностроительных производств») 1 курса очной формы обучения и 2 курса заочной формы обучения.

Методические указания подготовлены в электронном виде и содержатся в файле МУ_Пр_ИТ.pdf

Ил. 8. Табл. 2

УДК

ББК

Рецензент – И. Б. Корчагин, канд. техн. наук, доц. кафедры технологии сварочного производства и диагностики ВГТУ

Издается по решению редакционно-издательского совета Воронежского государственного технического университета

ИСПОЛЬЗОВАНИЕ ЯЗЫКА НТМL ДЛЯ СОЗДАНИЯ

СТАТИЧЕСКИХ WEB-СТРАНИЦ

Цель работы – прибрести умение создавать простейшие статические Webстраницы на основе стандартного языка разметки гипертекста НТМL.

Основные теоретические сведения Основные понятия Web-технологий

WWW (World Wide Web – всемирная паутина) – глобальное информационное пространство, основанное на физической инфраструктуре Интернета и протоколе передачи данных HTTP.

Понятие WWW часто путают с понятием Интернет – глобальной телекоммуникационной сетью. Интернет состоит из огромного количества компьютеров и сетей, в то время как всемирную паутину составляет множество Web-страниц. Помимо WWW посредством Интернета работает множество различных служб: email, IP-телефония, Интернет-радио и телевидение, файловые серверы, компьютерные игры и др.

HTTP (Hypertext Transfer Protocol – протокол передачи гипертекста) –

предназначен для установления связи с Web-сервером и обеспечения доставки Web-страниц Web-браузеру клиента. Иначе говоря, HTTP – это язык, на котором общаются браузер и сервер.

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

Несколько Web-страниц, объединенных общей темой и дизайном, образуют Web-сайт. Программа, демонстрирующая Web-страницу, называется Web-браузер или просто браузер. Наиболее широко распространенными в настоящее время являются такие браузеры, как Internet Explorer, Opera, Netscape Navigator и т.п.

Web-сервер (HTTP-сервер) – это программное обеспечение (ПО), предоставляющее доступ к сайтам. Наиболее популярными веб-серверами являют-

ся Apache (для ОС Windows и Unix) и Micr

osoft IIS (для Windows). Также

Web-сервером называют компьютер, на котором установлено такое ПО.

URL (Uniform Resource Locator) – адрес Web-страницы или другого ре-

сурса во всемирной паутине (изображение,

файл для загрузки и т.д.).

Общая структура URL имеет следующий вид:

протокол ://пользователь: пароль @ хост: порт/ путь ? запрос

Некоторые элементы URL могут быть опущены. Чаще всего адрес имеет

вид:

протокол :// хост / путь,

где протокол – http, https, ftp, skype и др; хост – доменное имя (или IP-

адрес), путь – местонахождение ресурса на хосте. Например: http://www.example.com/docs/about.html.

3

При помощи URL можно ссылаться на любой открытый ресурс, будь то страница. Механизм взаимодействия Web-браузера и Web-сервера заключается в выполнении следующих операций:

1). Браузер открывает соединение с сервером.

2). Браузер отправляет серверу запрос на получение страницы.

3). Сервер формирует ответ (HTML-код или, например, графическое изображение) браузеру и закрывает соединение.

4). Браузер обрабатывает HTML-код и отображает страницу.

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

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

Обычно статическая часть Web-страницы создается текстовым редактором, обеспечивающим сохранение данных в формате HTML, а динамическая часть программируется на языках VBScript и JavaScript.

Синтаксис HTML

Язык HTML (от англ. Hyper Text Markup Language – язык разметки гипертекста) служит для создания Web-страниц. Создаваемые с помощью HTML Web-страницы называют HTML-документами, которые имеют расширение имени файла html или htm.

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

Java-Script и VBScript.

Структура тега имеет следующий вид: <имя_тега атрибут_1 атрибут_2="значение_2" ...>

Тег состоит из имени тега, за которым может следовать список атрибутов, помещаемых между открывающей и закрывающей угловыми скобками (<имя_тега>). Атрибуты позволяют управлять поведением тега. Они могут иметь конкретные значения, задаваемые после знака равенства. Значения атрибутов заключаются в кавычки ("значение"). Атрибуты отделяются друг от друга пробелом, порядок следования атрибутов значения не имеет.

Имена тэгов и атрибутов нечувствительны к регистру.

Пример.

<font color=" blue" face="Arial">

Тег <font> предназначен для управления внешним видом текста. В приведенном примере он задает начертание текста светло-синим цветом шрифтом Arial.

4

Теги подразделяются на парные и непарные. Парные теги имеют з а- крывающий тег, непарные – не имеют. Закрывающий тег содержит косую черту перед именем и не имеет атрибутов.

Между открывающим и закрывающим тегами помещается текст и другие теги. Атрибуты указываются только в открывающем теге.

Примерами парных тегов является тег <b>, используемый для выделения текста жирным, а также тег <i>, предназначенный для выделения текста курсивом.

Пример. HTML-код:

текст <b>жирный текст</b> текст <i>курсив</i> текст В браузере:

текст жирный текст текст курсив текст.

Примером непарного тега является тег <br>, предназначенный для перевода строки. Обычный перевод строки клавишей Enter браузер игнорирует (как и несколько поставленных подряд пробелов или знаков табуляции).

Неправильно: HTML-код:

первая строка вторая строка В браузере:

первая строка вторая строка

Правильно: HTML-код:

первая строка<br>вторая строка В браузере:

первая строка вторая строка

Парный тег обязательно должен иметь закрывающий! Например, если не закрыть тег <b>, весь текст на странице за ним станет жирным.

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

Неправильно:

HTML-код: <b><i>жирный курсив</b></i>

Правильно:

HTML-код: <b><i>жирный курсив</i></b>

В браузере: жирный курсив

Цвет в HTML может быть задан ключевыми словами – названиями цветов на английском языке: black, white, grey, red, green, blue и др. (табл. 1).

5

Таблица 1

Например, красный цвет шрифта можно задать, присвоив атрибуту color тега font значение red:

<font color="red">

Альтернативным способом задания цвета является указание кода цвета в системе RGB (от англ. red, green, blue – красный, зеленый, синий). Любой цвет в системе RGB может быть представлен как смешение основных цветов – красного, зеленого и синего и записан в виде шестнадцатеричной 6-имвольной кодовой комбинации.

Первые две цифры кода в RGB соответствуют красной компоненте, следующие две – зеленой, последние две – синей. Значение 0016 означает полное отсутствие составляющей, значение FF16 = 25510 – максимум составляющей. Таким образом, получается 2563 ≈ 16.7 млн. цветов – этого достаточно, чтобы воспроизвести любой цвет, который различает человеческий глаз.

Значение цвета в системе RGB указывается в теге после символа решетки (#). Например, зададим синий цвет шрифта:

<font color="#0000FF">

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

СТРУКТУРА ДОКУМЕНТА HTML

Общая структура HTML-документа имеет вид, показанный на рис. 1.

Рис. 1. Общая структура HTML-документа

6

HTML-документ заключен в тег <html> и состоит из заголовка и т е- ла. То есть любой HTML-документ должен начинаться тэгом <html> и закан-

чиваться тэгом </html>.

 

 

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

тега <head></head> и, как пра-

вило, содержит только текст заглавия HTML-документа. С помощью парного

тэга <title> текст заглавия отображается в

заголовке окна

браузера. Этот

текст используется поисковыми системами Интернет.

 

Тело документа заключено в тег <body></body> и

содержит текст

и теги, которые должен обработать и вывести браузер.

 

Тег <body> имеет больше двадцати

атрибутов, среди

которых можно

отметить следующие:

 

 

bgcolor="цвет" – назначает цвет фона документа (по умолчанию белый);

text="цвет" – указывает цвет обычного текста в документе (по умолчанию черный);

link="цвет" – определяет цвет еще не просмотренной ссылки (по умолчанию синий);

vlink="цвет" – указывает цвет уже просмотренной ссылки (по умолчанию сиреневый).

Теги <html>, <head>, <title> и <body> задаются в документе только 1

раз!

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

<!-- Текст комментария -->

Первый HTML-документ Задание 1. Первый HTML-документ

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

<!-- Пример "Первый HTML-документ" -->

<html>

<head> <title>Заголовок</title>

</head>

<body bgcolor="#D0D0D0">

<font color="#FF0000" face="Arial">

Мой первый <i>HTML-документ!</i></font><br> <b>(это пример)</b>

</body>

</html>

7

Текстовый файл следует сохранить с расширением html. Полученный HTML-документ необходимо запустить через браузер. Результат отображения HTML-документа в окне браузера Internet Explorer показан на рис. 2.

Не рекомендуется использовать кириллические названия файлов и папок для HTML-документов.

Рис. 2. Первый HTML-документ в окне браузера

Работа с текстом. Списки

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

<b></b> – выделение текста жирным. <i></i> – выделение текста курсивом. <u></u> – подчеркивание текста.

<sub></sub> – форматировать текст как подстрочный индекс. <sup></sup> – форматировать текст как надстрочный индекс.

HTML-код:

101<sub>2</sub> = 5<sub>10</sub>

2<sup>8</sup> = 256

В браузере:

1012 = 510

28 = 256

<center></center> – выравнивание текста по центру. <br> – перенос строки.

<font></font> – устанавливает размер, цвет и гарнитуру текста. Основными атрибутами тега <font> являются:

color="цвет" – задает цвет текста;

face="шрифт" – определяет гарнитуру текста; значением атрибута может быть список шрифтов, перечисленных через запятую – в этом случае выбирается первый доступный шрифт;

size="1-7" – устанавливает размер шрифта (от 1 до 7).

HTML-код:

<font face="Tahoma" size="2" color="gray">текст</font>

8

В браузере: текст

<p></p> – задает начало и конец параграфа. Атрибутом тега <p> является align="…", который определяет режим выравнивания текста, задаваемый следующими значениями:

align="left" – по левому краю (по умолчанию);

align="center" – по центру;

align="right" – по правому краю;

align="justify" – по ширине.

<hN></hN> – вложенный текст, является заголовком документа уровня N, N принимает значения от 1 до 6. Размер шрифта заголовка более низкого уровня пропорционально уменьшается, то есть наибольшим заголовком является <h1>, наименьшим <h6>.

<hr> – вывод горизонтальной разделительной линию. Атрибутами тега являются:

• size="N" – толщина линии в пикселях;

• width="N" – ширина линии в пикселях или процентах по отношению к ширине экрана;

• noshade – использовать сплошную линию вместо объемной;

align="…" – определяет режим выравнивания линии с помощью следующих значений:

align="left" – по левому краю;

align="center" – по центру (по умолчанию);

align="right" – по правому краю;

В HTML есть возможность создавать нумерованные и маркированные списки.

<ol></ol> – создает нумерованный список элементов. Атрибутами тега <ol> являются:

start="N" – начать нумерацию с числа N;

type="…" – определяет формат нумерации с помощью значений:

type="1" – арабские цифры (по умолчанию)

type="A" – прописные буквы (A, B, C)

type="а" – строчные буквы (a, b, c)

type="I" – прописные римские цифры (I, II, III)

type="i" – строчные римские цифры (i, ii, iii)

<ul></ul> – создает маркированный список элементов.

Атрибутом данного тега является type="…", который определяет формат маркера с помощью значений:

type="disk" – диск (по умолчанию);

type="circle" – окружность;

type="square" – квадрат.

9

<li></li> – задает элемент списка в нумерованном или маркированном списке. Тэг <li> может быть записан и без закрывающего тэга. Атрибутами тега <li> являются:

type="…" – формат номера или маркера (см. описание <ol> и <ul>);

value="N" – задает номер элемента списка.

Задание 2. Создание списка

HTML-код:

<html>

<head> <title>Список</title>

</head>

<body>

<ol>

<li>арабские цифры (по умолчанию) <li type="A">прописные буквы

<li type="a">строчные буквы

<li type="I">прописные римские цифры <li type="i">строчные римские цифры

</ol>

<ul>

<li>диск (по умолчанию)

<li type="circle">окружность <li type="square">квадрат

</ul>

</body>

</html>

В браузере Internet Explorer приведенный пример будет иметь вид, показанный на рис. 3.

Рис. 3. Пример создания списка в окне браузера

10