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

Содержание

Слайд 2

Слайд 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-документа (основные разделы) Служебная информация информация о имени страницы Web документ

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



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



Web документ




Слайд 7

Слайд 8

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

– курсив

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

– выделение

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

–

отображает весь текст в одной строке, не
обрывая её

Слайд 9

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

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

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

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

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

    Таблицы

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

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

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

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

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

    активный текст ссылка на метку в другом HTML-документе активный текст метка

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

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

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

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

    ALIGN = RIGHT
    CENTER
    Позволяет выравнивать текст по левому, правому краю
    или по центру соответственно. Используется в тэгах

    , .
    Например:

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

    Слайд 14

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


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


    HSPACE = число в пикселах
    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
    Позволяет задавать тип маркера в произвольном месте текста. Например:

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

    Слайд 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 = MIDDLE

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


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

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

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

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

    строки.
    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

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

    = “имя”
    Позволяет задать имя кадра.
    Например:

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

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

    Например:
    ТЕКСТ NORESIZE
    Запрещает изменение

    кадровой структуры.
    Подключение звукового файла

    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) ...
    circle (x,y),r
    point(x,y)
    Coords = “ , , , ,…”
    usemap – определяет имя карты; это имя ставится в соответствии со значением соответствующих атрибутов, которые определяют карту
    usemap = “#имя”
    alt – атрибут для задания текста, заменяющего изображение карты, не является обязательным
    alt = “Текст подсказки”
    - Предыдущая
    Управление огнем гранатометного взвода в ходе обороны населенного пункта, на основе опыта ведения боевых действий
    Следующая -
    Элементы и узлы ЭВМ

    Похожие презентации

    Относительные, абсолютные и смешанные ссылки
    Проект: календарь. Индивидуальный образ настенного календаря
    Коллекции в Java. (Лекция 8)
    Компиляция. Препроцессор
    Информационная безопасность
    Современные тренды развития ИТ профессии
    Способы доступа СУБД к БД
    Кодирование графической информации
    ICQ, или же аська
    ПРОЦЕССОР Назначение, функции, состав
    Основы информационной безопасности в РФ
    Порядок участия в торгах на электронных площадках
    Tequila Creek – with Charging (Mini Dock). Thunderbolt Dual Power Device to Dual DP, Dual USB3 &amp; GbE
    Методы сетевого планирования и управления
    Подключение ПК, периферийного и мультимедийного оборудования к электросети, запуск оборудования. Урок 21
    Методы сортировки данных
    Презентация "Методы сортировки данных" - скачать презентации по Информатике
    Массивы. Описание массивов
    программа: планета «Мир компьютера 1-4» автор: Волохович Любовь Николаевна заместитель директора ММЦ-74331, педагог дополнительн
    Вебінари 1. Що це? 2. Вебінари – нова форма навчання 3. Організація вебінару
    Среда программирования Qt
    Система обработки налоговой отчетности Logo
    Создание и обработка графической информации. Практическое занятие № 5
    Технологии разработки ПО. Основные понятия и определения
    Знаешь ли ты названия носителей информации?
    Растровая графика
    Основы ООП
    Системы управления базами данных. PL/SQL. (Часть 2)
    Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
    Обратная связь
    Для правообладателей
    Email: Нажмите что бы посмотреть

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