Это займет всего пару минут! А пока ты можешь прочитать работу в формате 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
Примечание. 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
Оставляя свои контактные данные и нажимая «Попробовать в Telegram», я соглашаюсь пройти процедуру
регистрации на Платформе, принимаю условия
Пользовательского соглашения
и
Политики конфиденциальности
в целях заключения соглашения.
Пишешь реферат?
Попробуй нейросеть, напиши уникальный реферат с реальными источниками за 5 минут
