Это займет всего пару минут! А пока ты можешь прочитать работу в формате 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.
-дескриптор заголовка окна просмотра.
- этот непарный тег применяется для указания подробной
информации о документе.
-дескриптор HTML-команд документа для просмотра
- дескриптор абзаца.
-дескриптор перевода строки.
-дескриптор изображения горизонтальной линии.
6
Пример простейшего HTML документа
Простейший документ HTML
Мой первый документ.
Первый абзац моего документа.
Второй абзац моего документа.
7
Пример простейшего HTML документа. Отображение в Internet Explorer.
8
Пример простейшего HTML документа
Простейший документ HTML
Примечание. 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- скрипт
обработчик формы , т.е. программа
принимающая и обрабаты вающая
значения формы