Конспект лекции по дисциплине «Создание WEB страниц с использованием HTML», Word формат

ЛЕКЦИЯ № 2 WEB-технологии и компьютерное моделирование Краткий учебны й курс 1 Структура учебного курса  Лекция 1. Введение в интернет технологии и компью терное моделирование.  Лекция 2. Создание WEB страниц с использованием HTML.  Лекция 3. Работа с графикой в Adobe Photoshop и Flash CS.  Лекция 4. Создание динамических WEB страниц с использованием JavaScript и PHP.  Лекция 5. Базы данны х и PHP.  Лекция 6. Пример реализации «Эконометрической модели экономики России» под WEB.  Лекция 7. Основы компьютерного моделирования с использованием Powersim и AnyLogic. 2 Введение в HTML Для того, чтобы текстовый файл превратился в HTML-файл, поменять его расширение с ".txt" на ".html" недостаточно. Надо соблюсти "правило первой строки“. Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML ! DOCTYPE, которая обычно выглядит так: Для создания HTML страниц можно использовать обычный текстовый редактор, например Notepad (Блокнот), но лучше установить профессиональный редактор WEB-страниц, например HomeSite. Использование такого редактора, позволяет существенно сократить время разработки сайта, так как в нем имеются встроенные мастера (Wizards), предназначенные для автоматической генерации типовых блоков HTML-кода (таблиц, форм, и др.). При этом, в отличие от других подобных редакторов, сохранятся доступ к исходному коду. 3 Введение в HTML 4 Создание простейшего документа HTML Дескриптор (тег) – это простой элемент разметки, который всегда имеет такой тип <ДЕСКРИПТОР>. Контейнером называется пара дескрипторов <ДЕСКРИПТОР> . Это предложение выделено курсивом А это нет. Простейший документ HTML Название документа Здесь расположен текст самого документа HTML. 5 Важнейшие дескрипторы HTML -дескриптор всего блока HTML-команд. -дескриптор заголовка документа HTML. -дескриптор заголовка окна просмотра. <META> - этот непарный тег применяется для указания подробной информации о документе. <BODY> -дескриптор HTML-команд документа для просмотра <P> - дескриптор абзаца. <BR> -дескриптор перевода строки. <HR> -дескриптор изображения горизонтальной линии. 6 Пример простейшего HTML документа Простейший документ HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Мой первый документ.

Первый абзац моего документа.

Второй абзац моего документа.

7 Пример простейшего HTML документа. Отображение в Internet Explorer. 8 Пример простейшего HTML документа Простейший документ HTML Мой первый документ.

Первый абзац моего документа.

Второй абзац моего документа.

9 Гиперссы лки Ссылки на другие документы в HTML создаются либо с помощью элемента A, либо с помощью навигационных карт. Элемент A применяется, если ссылкой планируется сделать часть текста или целое изображение. Навигационные карты имеет смысл применять, если ссылкой будет часть изображения. Например, линк Документация будет ссылаться на файл title.html в подкаталоге docs (относительно текущего). Атрибуты тега : HREF – определяет находящийся между начальным и конечным тегами текст или изображение как гипертекстовую ссылку (URL, или линк) на документ (и/или область документа), указанный в значении данного атрибута. Наиболее часто используемые значения: http://... – создает ссы лку на www-документ; ftp://... – создает ссы лку на ftp-сайт или расположенны й на нем файл; mailto:... – запускает почтовую программу-клиент с заполненны м полем имени получателя. Если после адреса поставить знак вопроса, то можно указать дополнительны е атрибуты , разделенны е знаком " &" ; 10 Гиперссы лки Атрибуты тега : NAME – помечает находящуюся между начальным и конечным тегами область документа как возможный объект для ссылки. В качестве значения нужно латиницей написать любое словоуказатель, уникальное для данного документа. Например: Раздел1. Теперь вы можете ссылаться на помеченную область простым указанием ее имени после имени документа. Например, линк Раздел1 отправит вас в раздел "part" файла document.html, а линк В конец документа – в раздел "bottom" текущего документа. (см. Пример 1) TARGET – определяет окно (фрейм), на которое указывает гипертекстовая ссылка. Этот атрибут используется только совместно с атрибутом HREF. В качестве значения необходимо задать либо имя одного из существующих фреймов, либо одно из следующих зарезервированных имен: _self – указывает, что определенный в атрибуте HREF документ должен отображаться в текущем фрейме; _parent – указывает, что документ должен отображаться во фрейме-родителе текущего фрейма. Иначе говоря, _parent ссылается на окно, содержащее FRAMESET, включающий текущий фрейм; _top – указывает, что документ должен отображаться в окне-родителе всей текущей фреймовой структуры; _blank – указывает, что документ должен отображаться в новом окне. 11 Пример гиперссы лки Первый линк Второй линк 12 Текстовы е блоки Тег - H1,H2,...H6 Используются для создания заголовков текста - P Используется для разметки параграфов. - DIV Отделяет блок HTML-документа от остальной его части - ADDRESS Оформляет текст как почтовый адрес - BLOCKQUOTE Оформляет текст как цитату - BR Осуществляет перевод строки - HR Вставляет в текст горизонтальную разделительную линию. - PRE Включает в документ (моноширинным шрифтом) блок предварительно отформатированного текста LISTING, PLAINTE XT, XMP Включают в документ (моноширинным шрифтом) блок предварительно отформатированного текста (устаревшие элементы) 13 Текстовы е блоки. Примеры

Самый большой заголовок посередине

Заголовок поменьше

...

Маленький заголовок

Примечание. ALIGN – определяет способ вы равнивания заголовка по горизонтали. Возможны е значения: left, right, center. 14 Текстовы е блоки. Важнейшие теги DIV Используется для логического выделения блока HTML-документа. Элемент группировки, как и элемент SPAN. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать – перемещать, включать/выключать, создавать слои, регулировать отступы и т.п. В частности, можно использовать оперативны й стиль для управления текстовы м блоком.

Этот текст находится внутри дескриптора div. Обратите внимание, как его ширина управляется свойством width.

15 Текстовы е блоки. Важнейшие теги DIV (Использование стилей).

Этот текст находится внутри дескриптора div. Обратите внимание, как его ширина управляется свойством width.

16 Текстовы е блоки. Важнейшие теги DIV (Использование стилей). Обратите внимание, через атрибут ID программа на JavaScript может получить доступ ко всем свойствам блока

, в частности прописанным в атрибуте STYLE. 17 Форматирование текста Тег - BASEFONT Определяет основной шрифт, которым должен отображаться текст документа - FONT Позволяет изменять цвет, размер и тип шрифта текста - I Выделяет текст курсивом - EM Используется для смыслового выделения текста (курсивом) - B Выделяет текст жирным шрифтом - STRONG Усиленное выделение текста (жирным) - U Выделяет текст подчеркнутым - S, STRIKE Выделяет текст перечеркнутым - BIG Отображает текст увеличенным шрифтом (относительно текущего) - SMALL Отображает текст уменьшенным шрифтом (относительно текущего) - SUP Отображает текст со сдвигом вверх (верхний индекс) - SUB Отображает текст со сдвигом вниз (нижний индекс) - Оформляют текст как формулу или программный код - CODE, SAM P TT Отображает текст моноширинным шрифтом - KBD Выделяет текст, который предлагается набрать на клавиатуре - VAR Используется для обозначения в тексте переменных - CITE Оформляет текст как цитату или ссылку на источник 18 Списки Списки в HTML бывают двух видов: упорядоченные (пронумерованные) и неупорядоченные (непронумерованные). Отличаются они лишь способом оформления. Перед пунктами неупорядоченных списков обычно ставятся символы-буллеты (bullets), например, точки, ромбики и т.п., в то время как пунктам упорядоченных списков предшествуют их номера. Тег - UL Создает неупорядоченный список - OL Создает упорядоченный список - LI Создает пункт меню внутри элементов OL или UL - Создает неупорядоченный список, подобный UL - MENU, DIR DL - DT Создает термин в списке определений внутри элемента DL - DD Cоздает определение термина внутри элемента DL Открывает и закрывает список определений 19 Объекты Объекты – это графические и мультимедийные вставки в HTML-документ, такие как картинки, Flash-анимация, Java-апплеты, звуки, музыка, и др. Тег - IMG Используется для вставки в HTML изображений - EMBED, OBJECT Используется для вставки в HTML различных объектов - NOEMBED Используется, если браузер не поддерживает элемент EMBED - APPLET Используется для вставки в HTML Java-апплетов - PARAM Используется для передачи параметров Java-программе, Flashролику и др. 20 Объекты - пример Например, на первой странице сайта «Эконометрическая модель экономики России» есть вставленный объект типа Flash, что обеспечивается следующим HTML кодом. ………………………………………………………………………………………………….

………………………………………………………………………………………………….. Здесь GRAF.SWF – имя файла типа Flash, включенного в данную WEBстраницу. Атрибуты PARAM – параметры, передаваемые приложению Flash 21 Объекты - пример Вклю ченное в страницу Flash-приложение (интерактивное меню сайта) Обратите внимание, что приложение Flash вставлено в страницу «бесшовно». 22 Таблицы Таблицы в HTML формируются нетрадиционным способом – построчно. Сначала c помощью элемента TR необходимо создать ряд таблицы, в который затем элементом TD помещаются ячейки. Обратите внимание. В HTML таблицы используются не только для отображения таблиц как таковых, но и для дизайна. С помощью таблиц можно создать невидимый "каркас" страницы, помогающий расположить текст и изображения так, как вам нравится. 23 Таблицы Теги для создания таблиц: - TABLE Создает таблицу - CAPTION Задает заголовок таблицы - TR Создает новый ряд (строку) ячеек таблицы - TD и TH Создает ячейку с данными в текущей строке Пример

A1	B1	C1
A2	B2	C2

Результат A1 B1 C1 A2 B2 C2 24 Таблицы Обратите внимание. Для бы строго формирования сложны х (многострочны х, вложенны х и т.д.) таблиц можно использовать мастер таблиц в HomeSite. 25 Таблицы . Пример Обратите внимание. Стандартная таблица в HTML, как правило, не эргономична. Однако использование стилей, позволяет придать таблице «особы й» вид. Пример ……………………………………………………………………………………………………. 26 Таблицы . Пример (Форма регистрации пользователей на сайте). Здесь таблица используется для оформления формы регистрации пользователей 27 Таблицы . Пример Обратите внимание. Стандартная таблица в HTML, как правило, не эргономична. Однако использование стилей, позволяет придать таблице «особы й» вид. Пример

Вход для зарегистрированны х пользователей

……………………………………………………………………………………………………. 28 Формы С помощью описанных ниже элементов вы можете создавать заполняемые анкеты, опросники и различные поля для ввода текста пользователем с возможностью последующей отправки заполненной формы на ваш сервер. Тег - FORM Создает заполняемую форму - TEXTAREA Создает поле для ввода нескольких строк текста - SELECT Создает меню в заполняемой форме - OPTION Создает отдельные пункты в меню (см. SELECT) - INPUT Создает поле в форме Обратите внимание, что INPUT может бы ть различного типа (имеет атрибут TYPE), в частности: text, textarea, file, password, checkbox, radio, image, hidden, button, submit. Этот атрибут определяет функциональность элемента INPUT (форма ввода, кнопка и т.д.). 29 Формы . Пример Пример создания формы Фамилия:
' Результат Здесь, test.php – PHP- скрипт обработчик формы , т.е. программа принимающая и обрабаты вающая значения формы GET/POST – метод передачи данны х формы скрипту 30 Фреймы Фреймы (frames) использую тся для разбивки окна браузера на несколько областей, каждая из которы х представляет собой отдельны й HTML-документ (фрейм). Как правило, фреймы использую тся для облегчения навигации по сайту, создания навигационного меню. Тем не менее, большинство разработчиков избегаю т использования фреймов, к чему, имеют довольно веские основания. Тег - FRAMESET Определяет фреймовую (оконную) структуру документа: размеры и расположение фреймов на странице - FRAME Определяет фрейм и его свойства внутри FRAMESET-структуры - NOFRAMES Определяет что показывать, если браузер не поддерживает фреймы 31 Фреймы . Пример (файл index.html) Ваш браузер не поддерживает фреймы ... Обратите внимание. Все рассматриваемы е элементы (frames) должны находится вне тела . 32 Использование технологии SSI SSI расшифровы вается как Server Side Include. SSI - это набор команд, позволяющий включить в страницу информацию, недоступную средствами HTML, такую как вывод программ, значения переменных окружения и статистику по файлам (размер, дата создания и др.). Для этого достаточно давать расширения WEB-файлам .shtml и использовать «включения». Пример.

Документ с баннером внизу страницы

Директива include позволяет вставить в документ текстовы й файл, результат работы скрипта и т.д. Обратите внимание. Использование технологии SSI совместно с таблицами позволяет формировать страницу сайта лю бой структуры (по аналогии с фреймами, но более эффективно) и существенно облегчает процедуру обновления информации на сайте. 33 Расширенны й HTML - XHTML XHTML (англ. Extensible Hypertext Markup Language — Расширяемый язык разметки гипертекста) — язык разметки веб-страниц, по возможностям сопоставимый с HTML, созданный на базе XML. Как и HTML, XHTML соответствует спецификации SGML, поскольку XML является её подмножеством. Вариант XHTML 1.1 одобрен в качестве Рекомендации Консорциума Всемирной паутины (W3C) 31 мая 2001 года. Преимущества Для XHTML можно применять множество технологий, разработанных для XML. Например, XSLT и XPath. Анализ XHTML проще и быстрее, чем HTML. Поскольку синтаксис XML строже, чем SGML, обработка XHTML возможна даже на мобильных телефонах с малыми ресурсами Файл имеет расширение *.xhtml Обратите внимание. XHML – отличается от HTML. Это новый расширенный язык разметки документов (с более жесткими требованиями к коду). Сейчас развивается направление XHTML + CSS (каскадны е таблицы стилей). 34 Использование каскадны х листов стилей (CSS)

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

В файле CSS (в частности, bach.css) определяем стиль используемы х элементов selector {property1: value1; property2: value2; property3: value3; property4: value4} 35

Разместил пособие