Учебное пособие 1400
.pdfМИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное бюджетное образовательное учреждение высшего образования
«Воронежский государственный технический университет»
Кафедра технологии сварочного производства и диагностики
ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ
МЕТОДИЧЕСКИЕ УКАЗАНИЯ
к проведению практических занятий для студентов направления 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