Основы создания Web-страниц

Содержание

Слайд 3

Оглавление

Термины и понятия

Структура HTML-документа

Текст

Отступы, Списки, Таблицы

Вставка Графических изображений и Ссылок

Атрибуты редактирования текста

Атрибуты

Оглавление Термины и понятия Структура HTML-документа Текст Отступы, Списки, Таблицы Вставка Графических
для списков и таблиц

Бегущая строка

Фон

Кадры (фреймы)

Изображение -Карта

Вставка видео и звука

Слайд 4

Термины и понятия

WWW (Word Wide Web) – cистема навигации, поиска и доступа

Термины и понятия WWW (Word Wide Web) – cистема навигации, поиска и
к мультимедийным средствам с помощью средств гипертекста.
Браузер – программа просмотра гипертекстовых страниц WWW.
Гипертекст – текст, содержащий связи с другими текстами, графической, видео- или звуковой информацией).
HTML (Hypertext Markup Language) – язык разметки гипертекста. HTML-документы представляют собой текстовые файлы, в которые встроены специальные команды.
Тэги (tags) – команды языка HTML
CGI (Common Gateway Interface) – это протокол для выполнения сценариев на серверах; в свою очередь серверы осуществляют конечную обработку, например связь с базой данных по запросу со страницы Web. Все коммерческие серверы Web поддерживают сценарии CGI. Сценарии CGI пишутся на Perl, а программы CGI – на С++ или других компилируемых языках.

Слайд 5

Java – язык программирования компании JavaSoft синтаксически подобен C++, но он

Java – язык программирования компании JavaSoft синтаксически подобен C++, но он предусматривает
предусматривает такие ограничения, как запрет на использование указателей.
Приложения Web могут выполняться внутри операционной системы, или браузера Web, или внутри эмулирующей среды, известной как виртуальная машина Java. Microsoft предложила свою альтернативу Java в виде ActiveX.
ActiveX – в 1996 году Microsoft дала это название своим программным компонентам OCX (OLE Control Extension), причем последние представляют собой модификацию VBX или управляющих элементов Visual Basic. При включении в документы HTML компоненты ActiveX загружаются и выполняются на клиенте. В настоящее время ActiveX работают только в среде Windows.
JavaScript – простой язык сценариев, созданный Netscape. Поначалу именовавшийся LiveScript, код JavaScript (никакого отношения к языку Java компании Sun он не имеет) включается в документы на HTML. Он конкурирует с VBScript производства Microsoft.

Слайд 6

Cтруктура HTML-документа
(основные разделы)



Служебная информация
<br> информация о имени страницы<br>



Web документ




Cтруктура HTML-документа (основные разделы) Служебная информация информация о имени страницы Web документ

Слайд 8

– курсив

– подчёркивание

– выделение

– усиленное выделение

– отображает

– курсив – подчёркивание – выделение – усиленное выделение – отображает весь
весь текст в одной строке, не
обрывая её

Слайд 9

Отступы и списки

    – отступ
– возврат
    – начало нумерованного списка

Отступы и списки – отступ – возврат – начало нумерованного списка –
– конец нумерованного списка
  • – элемент нумерованного или
    маркированного списка
    – начало маркированного списка
    – конец маркированного списка
  • Слайд 10

    Таблицы

    – начало таблицы
    – конец таблицы
    – начало заголовка таблицы

    Таблицы – начало таблицы – конец таблицы – начало заголовка таблицы –

    – конец заголовка таблицы
    – начало заголовка столбца или строки
    – конец заголовка столбца или строки
    – начало строки
    – конец строки
    – начало столбца
    – конец столбца

    Слайд 11

    Вставка графических изображений
    вставка картинки из файла

    Вставка графических изображений вставка картинки из файла Вставка гипертекстовых ссылок активный текст

    Вставка гипертекстовых ссылок
    активный
    текст
    ссылка на другой HTML-документ или файл
    (звуковой или видеоклип)
    активный
    текст
    ссылка на метку в текущем HTML-документе

    Слайд 12

    активный
    текст
    ссылка на метку

    активный текст ссылка на метку в другом HTML-документе активный текст метка для
    в другом HTML-документе
    активный
    текст
    метка для двух указанных выше типов ссылок
    изображение“>активный
    текст
    ссылка в виде графического изображения
    Атрибуты (использующиеся в тэге )
    LINK = “цвет“
    определяет цвет ссылки, которой ещё не пользовались
    VLINK = “цвет“
    определяет цвет ссылки, на которой уже щёлкали
    ALINK = “цвет“
    определяет цвет ссылки в момент щелчка

    Слайд 13

    Атрибуты
    дополняют тэги, позволяя описывать внешний вид части страницы,
    окружённой тэгами.
    LEFT
    ALIGN

    Атрибуты дополняют тэги, позволяя описывать внешний вид части страницы, окружённой тэгами. LEFT
    = RIGHT
    CENTER
    Позволяет выравнивать текст по левому, правому краю
    или по центру соответственно. Используется в тэгах

    , .
    Например:

    .
    LEFT
    CLEAR = RIGHT
    ALL
    Используется, чтобы установить в указанной точке обтекание текстом объекта слева, справа или без обтекания соответственно. Используется в тэге
    .

    Слайд 14


    BORDER = число в пикселах
    Определяет рамку вокруг изображения. Используется тэгом .
    HSPACE

    BORDER = число в пикселах Определяет рамку вокруг изображения. Используется тэгом .
    = число в пикселах
    VSPACE = число в пикселах
    Определяют горизонтальный и вертикальный отступы вокруг изображения. Используется тэгом .

    Слайд 15

    Шрифты
    – увеличение шрифта текста относительно текущего

    – уменьшение шрифта

    Шрифты – увеличение шрифта текста относительно текущего – уменьшение шрифта текста –
    текста

    – смена цвета текста
    red green
    black maroon (тёмно-красный)
    olive navy (синий)
    aqua (морской волны) purple (фиолетовый) teal (зеленовато-синий) lime (известковый)
    fuchsia (ярко-малиновый) silver (серебристый) white yellow
    blue gray

    Слайд 16


    – смена гарнитуры
    шрифта.
    Например:

    – смена гарнитуры шрифта. Например: . – позволяет задавать размер шрифта в
    “Arial”>.

    – позволяет задавать
    размер шрифта в данной области, используется в середине
    строки, т.к. после окончания своего действия не разбивает
    строку.
    Например: .

    Слайд 17

    Атрибуты тэгов для списков (маркированных и
    нумерованных)
    DISC
    TYPE = CIRCLE

    Атрибуты тэгов для списков (маркированных и нумерованных) DISC TYPE = CIRCLE SQUARE
    SQUARE
    Позволяет задавать тип маркера в произвольном месте текста. Например:

    • первый элемент списка
    • второй элемент списка

    Слайд 18

    Text Form
    Audio Home
    DINGBAT = Folder Next
    Disc drive Previous
    Позволяет создавать специальные типографские символы-картинки в

    Text Form Audio Home DINGBAT = Folder Next Disc drive Previous Позволяет
    качестве маркеров в списках.
    Например:

  • 1 1,2,3,...
    TYPE = A A,B,C,…
    a a,b,c,…
    I I,II,III,...
    Позволяет использовать в качестве маркеров цифры и буквы.
  • Слайд 19

    Например:

      SKIP = значение
      Позволяет в середине нумерованного списка пропустить
      заданное

    Например: SKIP = значение Позволяет в середине нумерованного списка пропустить заданное число
    число пунктов нумерации.
    Например:
  • – пропустит четыре следующих пункта.
    START = значение
    Используется для указания того, с какого места в заданном
    типе нумерации начать нумерованный список.
    Например:
      – нумерация будет начинаться с
      буквы E и будет продолжаться далее по алфавиту.
  • Слайд 20

    Атрибуты тэгов для создания таблиц
    BORDER = ширина границы
    Позволяет задавать ширину внешней

    Атрибуты тэгов для создания таблиц BORDER = ширина границы Позволяет задавать ширину
    границы таблицы в пикселах или в %.
    Например:

    CELLSPACING = ширина границы
    Позволяет задавать ширину фронтальной грани таблицы в пикселах или в %.
    Например:

    CELLPADDING = ширина
    Позволяет задавать ширину пустого пространства между содержимым ячейки и её границами.
    Например:

    Слайд 21


    COLSPAN = количество ячеек
    Позволяет растягивать строку на заданное количество ячеек

    COLSPAN = количество ячеек Позволяет растягивать строку на заданное количество ячеек (как
    (как бы объединять их).
    Например:

    Слайд 22

    Бегущая строка


    Используется для создания бегущей строки.
    TOP
    ALIGN

    Бегущая строка Используется для создания бегущей строки. TOP ALIGN = MIDDLE BOTTOM
    = MIDDLE
    BOTTOM
    Позволяет разместить текст в верхней, средней или нижней
    части области бегущей строки.
    SCROLL прокрутка циклическая
    BEHAVIOR = SLIDE выход и остановка
    ALTERNATE прыжки
    Используется, чтобы установить режим вывода строки.

    Слайд 23

    BGCOLOR = название цвета
    Используется для определения цвета фона бегущей строки.

    BGCOLOR = название цвета Используется для определения цвета фона бегущей строки. DIRECTION
    DIRECTION = LEFT RIGHT
    Используется для определения направления бегущей строки.
    n текст пробегает по экрану n раз
    LOOP = INFINITE бесконечно (по умолчанию)
    Используется для определения повторений бегущей строки.
    WIDTH = в пикселах или в % от высоты экрана
    Позволяет сделать область бегущей строки длиннее
    или короче.

    Слайд 24

    HEIGHT = высота бегущей строки в пикселах или
    в % от высоты

    HEIGHT = высота бегущей строки в пикселах или в % от высоты
    экрана.
    Позволяет сделать область бегущей строки толще или
    тоньше.
    HSPACE = ширина в пикселях левого и правого полей
    между областью бегущей строки и
    окружающим её текстом или графикой.
    VSPACE = размер отступа в пикселях сверху и снизу
    от бегущей строки до текста или графики. SCROLLAMOUNT = скорость перемещения текста [1…3000]
    – мигание объекта

    Слайд 25

    Атрибуты изменение фона
    BGCOLOR = “цвет”
    Позволяет изменить фоновый цвет станицы, используется

    Атрибуты изменение фона BGCOLOR = “цвет” Позволяет изменить фоновый цвет станицы, используется
    тэгом .
    Например:

    BACKGROUND = “имя файла”
    Позволяет использовать в качестве фона изображение из
    файла.
    BGPROPERTIES = FIXED
    Позволяет создать «водяной знак» (фон, который не перемещается вместе с текстом).
    Например:

    Слайд 26

    Кадры (frames) (позволяют разбивать страницу на независемые окна)


    Позволяет задавать кадровую структуру

    Кадры (frames) (позволяют разбивать страницу на независемые окна) Позволяет задавать кадровую структуру
    (страница с кадровой структурой не содержит тэга ).

    Позволяет определить отдельный кадр.
    Атрибуты
    ROWS = “ширина части,...”
    Позволяет определить число и размер строк.
    Например:

    COLS = “ширина части,...”
    Позволяет определить число и размер столбцов.

    Слайд 27

    Например:

    SRC = “имя файла”
    Позволяет вставить картинку или страницу

    Например: SRC = “имя файла” Позволяет вставить картинку или страницу в кадр.
    в кадр.
    Например:

    YES
    SCROLLING = NO
    AUTO
    Позволяет задать линейки прокрутки.
    MARGINWIDTH = “значение”
    MARGINHIGHT = “значение”
    Позволяет задать внутреннюю границу кадра.

    Слайд 28

    Атрибуты рамки кадра
    BORDER = число
    YES
    FRAMEBORDER = NO
    BORDERCOLOR = “цвет”
    NAME =

    Атрибуты рамки кадра BORDER = число YES FRAMEBORDER = NO BORDERCOLOR =
    “имя”
    Позволяет задать имя кадра.
    Например:

    -имя кадра загружает указанный файл в кадр
    -blank загружает файл в окно без названия TARGET = -self загружает в окно, откуда сделан вызов
    -parent в старший кадр
    -top в новое окно, разрушая страницу кадров
    Используется для ссылок в кадр.

    Слайд 29

    Например:
    ТЕКСТ NORESIZE
    Запрещает изменение кадровой

    Например: ТЕКСТ NORESIZE Запрещает изменение кадровой структуры. Подключение звукового файла n LOOP
    структуры.
    Подключение звукового файла

    n
    LOOP = INFINITE
    Например:

    Подключение видеофайла

    n
    LOOP = INFINITE

    Слайд 30

    Карты
    Это такие изображения, отдельные части которых связаны со ссылками и позволяют

    Карты Это такие изображения, отдельные части которых связаны со ссылками и позволяют
    выполнять переходы.


    Позволяет определить карту. Внутри него определяются области карты при помощи элементов AREA и задаётся имя карты при помощи атрибута name.
    name=“имя”

    Для каждой области карты должен быть создан свой элемент AREA, который должен включать атрибут, определяющий ссылку:
    HREF=“адрес ссылки”

    Слайд 31

    Атрибуты, определяющие форму области на карте
    rect (x,y)(x1,y1)
    Shape = poly

    Атрибуты, определяющие форму области на карте rect (x,y)(x1,y1) Shape = poly (x,y)(x1,y1)
    (x,y)(x1,y1) ...
    circle (x,y),r
    point(x,y)
    Coords = “ , , , ,…”
    usemap – определяет имя карты; это имя ставится в соответствии со значением соответствующих атрибутов, которые определяют карту
    usemap = “#имя”
    alt – атрибут для задания текста, заменяющего изображение карты, не является обязательным
    alt = “Текст подсказки”

    ROWSPAN = количество строк
    Позволяет растягивать ячейку на заданное количество строк.
    Например: