HTML

Оценка 5
ppt
09.05.2020
HTML
HTML.ppt

Web-страницы. Язык HTML и др. Введение

Web-страницы. Язык HTML и др. Введение

Web-страницы. Язык HTML и др.

Введение
Структура документа
Списки
Гиперссылки
Оформление документа

Рисунки
Таблицы
Фреймы
Блоки (DIV)
Понятие о JavaScript

Web-страницы. Язык HTML и др. Тема 1

Web-страницы. Язык HTML и др. Тема 1

Web-страницы. Язык HTML и др.

Тема 1. Введение

Что такое Web-страницы? Гиперссылка – «активная»ссылка на другой документ

Что такое Web-страницы? Гиперссылка – «активная»ссылка на другой документ

3

Что такое Web-страницы?

Гиперссылка – «активная»ссылка на другой документ.
Гипертекст – текст, содержащий гиперссылки.
Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой.
WWW (World Wide Web) – «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа).
Web-страница – текстовый файл, в котором описано размещение материала на экране.
Браузер – программа для просмотра Web-страниц на экране (Internet Explorer, Mozilla Firefox, Opera).

Какие бывают Web-страницы? статические – существуют на сервере в виде готовых файлов: *

Какие бывают Web-страницы? статические – существуют на сервере в виде готовых файлов: *

4

Какие бывают Web-страницы?

статические – существуют на сервере в виде готовых файлов: *.htm, *.html
динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из базы данных) *.shtml, *.asp, *.pl, *.php

позволяют выбирать информацию из базы данных по заранее неизвестным запросам

дополнительная нагрузка на сервер
загружаются медленнее

Язык HTML HTML = Hypertext Markup

Язык HTML HTML = Hypertext Markup

5

Язык HTML

HTML = Hypertext Markup Language (язык разметки гипертекста)

HTML-страница – это текстовый файл (Блокнот):



Моя страница


Привет!


index.html

Тэги Тэг – это команда языка HTML, которую выполняет браузер: непарные тэги парные тэги ( контейнеры ) вставить рисунок

Тэги Тэг – это команда языка HTML, которую выполняет браузер: непарные тэги парные тэги ( контейнеры ) вставить рисунок

6

Тэги

Тэг – это команда языка HTML, которую выполняет браузер:

непарные тэги


парные тэги (контейнеры)

вставить рисунок


...

открывающий

закрывающий

область действия тэга: описание таблицы

Простейшая Web-страница Моя первая

Простейшая Web-страница Моя первая

7

Простейшая Web-страница



Моя первая <br> Web-страница


Привет!


first.html


Моя первая <br> Web-страница

шапка («голова»)


Привет!

основная часть («тело»)

Редактор HEFS файловые операции буфер обмена один экран запуск браузера (F9) назад вперед текстовый редактор браузер (IE) отмена

Редактор HEFS файловые операции буфер обмена один экран запуск браузера (F9) назад вперед текстовый редактор браузер (IE) отмена

8

Редактор HEFS

файловые операции

буфер обмена

один экран

запуск
браузера (F9)

назад

вперед

текстовый редактор

браузер (IE)

отмена

9 Вставка тэгов в HEFS

9 Вставка тэгов в HEFS

9

Вставка тэгов в HEFS

Web-страницы. Язык HTML и др. Тема 2

Web-страницы. Язык HTML и др. Тема 2

Web-страницы. Язык HTML и др.

Тема 2. Структура документа.
Специальные символы

Заголовки: H1 … H6 Заголовок документа

Заголовки: H1 … H6 Заголовок документа

11

Заголовки: H1 … H6


Заголовок документа


Заголовок раздела


Заголовок подраздела


Заголовок параграфа


Комментарий

Авторские пометки

выравнивание:

История

left,
center,
right

Абзацы переход на новую строку абзац (с отступами)

Абзацы переход на новую строку абзац (с отступами)

12

Абзацы

переход на новую строку




абзац (с отступами)

И вечный бой! Покой
нам только снится

Сквозь кровь и пыль...

Летит, летит степная
кобылица

И мнет ковыль...


Одно физическое тело захотело поменять три своих старых варежки
на что-нибудь хорошее.


До самого вечера тело с варежками ...

Выравнивание Этот текст выровнен по центру

Выравнивание Этот текст выровнен по центру

13

Выравнивание


Этот текст выровнен по центру.



Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.

left по левой границе
right по правой границе
center по центру
justify по ширине

атрибут тэга

14 Абзацы в HEFS

14 Абзацы в HEFS

14

Абзацы в HEFS

Специальные символы Символ HTML-код

Специальные символы Символ HTML-код

15

Специальные символы

 Символ 

 HTML-код 

 Название 

(длинное) тире

 

 

неразрывный пробел  

§

§

параграф

©

©

символ авторского права

«

«

левая русская кавычка

»

»

правая русская кавычка

®

®

зарегистрированная торговая марка 

°

°

градус

²

²

квадрат

³

³

куб

¼

¼

четверть

½

½

половина

¾

¾

три четверти

×

×

знак умножения

÷

÷

знак деления

Специальные символы А.С. Пушкин — солнце русской поэзии

Специальные символы А.С. Пушкин — солнце русской поэзии

16

Специальные символы

А.С. Пушкин — солнце русской поэзии.





Дом сдали в 2011 году.

Пёс весил 12 кг.

Из дома вышел А.С. Пушкин – солнце
русской поэзии.

Вышел А.С. Пушкин – солнце русской поэзии.

17 Специальные символы в HEFS

17 Специальные символы в HEFS

17

Специальные символы в HEFS

Web-страницы. Язык HTML и др. Тема 3

Web-страницы. Язык HTML и др. Тема 3

Web-страницы. Язык HTML и др.

Тема 3. Списки

Маркированные списки Вася Петя

Маркированные списки Вася Петя

19

Маркированные списки


  • Вася
  • Петя
  • Коля

unordered list (неупорядоченный список)

list item (элемент списка)

изменение маркера:


    ...

disk 
circle ○
square ■

Нумерованные списки Вася Петя

Нумерованные списки Вася Петя

20

Нумерованные списки


  1. Вася
  2. Петя
  3. Коля

ordered list (упорядоченный список)

изменение нумерации:


    ...

1, i, I, a, A

Списки определений компьютер устройство для обработки информации дискета гибкий магнитный диск винчестер жесткий магнитный диск definition list (список определений) definition term (термин) definition description (описание)

Списки определений компьютер устройство для обработки информации дискета гибкий магнитный диск винчестер жесткий магнитный диск definition list (список определений) definition term (термин) definition description (описание)

21

Списки определений


компьютер
устройство для обработки информации
дискета
гибкий магнитный диск
винчестер
жесткий магнитный диск

definition list (список определений)

definition term (термин)

definition description (описание)

Многоуровневые списки Города

Многоуровневые списки Города

22

Многоуровневые списки

  • Города России       



  • Города Украины   



      
  1. Москва   
  2. Санкт-Петерург

      
  1. Киев   
  2. Одесса

Списки в HEFS Ctrl-L вставить элемент списка

Списки в HEFS Ctrl-L вставить элемент списка

23

Списки в HEFS

Ctrl-L вставить элемент списка

  • Web-страницы. Язык HTML и др. Тема 4

    Web-страницы. Язык HTML и др. Тема 4

    Web-страницы. Язык HTML и др.

    Тема 4. Гиперссылки

    Ссылки на другие страницы сайта

    Ссылки на другие страницы сайта

    25

    Ссылки на другие страницы сайта

    Таблицы

    страница в той же папке

    anchor (якорь)

    hyper reference (гиперссылка)

    страница во вложенной папке

    Пример

    страница в соседней папке

    Текст

    выйти из текущей папки

    Примеры (ссылки из файла rock

    Примеры (ссылки из файла rock

    26

    Примеры (ссылки из файла rock.html)

    Ссылки на другие сайты Почта на главную страницу сайта index

    Ссылки на другие сайты Почта на главную страницу сайта index

    27

    Ссылки на другие сайты

    Почта

    на главную страницу сайта

    index.htm, index.html, default.asp, …

    на конкретную страницу сайта (URL)


    Васин текст

    на файл для скачивания


    Скачать

    Ссылки внутри страницы Глава 1

    Ссылки внутри страницы Глава 1

    28

    Ссылки внутри страницы


    Глава 1

    Глава 2


    Глава 1


    Это текст главы 1. Это текст главы 1.
    Это текст главы 1. Это текст главы 1.

    Наверх

    Глава 2


    Это текст главы 2. Это текст главы 2.
    Это текст главы 2. Это текст главы 2.

    Наверх

    в другом файле

    Цвет текста

    метка (якорь)

    переход на метку

    Запуск почтовой программы Напишите мне!

    Запуск почтовой программы Напишите мне!

    29

    Запуск почтовой программы


    Напишите мне!

    Гиперссылки в HEFS локальная ссылка

    Гиперссылки в HEFS локальная ссылка

    30

    Гиперссылки в HEFS

    локальная ссылка

    Ctrl-A гиперссылка на выделенный блок, адрес вводить вручную

    вставить только адрес файла

    Web-страницы. Язык HTML и др. Тема 5

    Web-страницы. Язык HTML и др. Тема 5

    Web-страницы. Язык HTML и др.

    Тема 5. Оформление документа. Стилевые файлы (CSS)

    Содержание и оформление Сборник задач по физике

    Содержание и оформление Сборник задач по физике

    32

    Содержание и оформление

    Сборник задач по физике


    Григорий Остер


    Задача 61

    Петя ехал к бабушке на электричке, и всю дорогу над ним издевались какие-то два неведомые ему явления. Одно при каждой остановке толкало Петю вперед, а другое, когда вагон трогался – дергало назад. Что это за хулиганские явления, и может ли транспортная милиция с ними справиться?

    содержание (контент)

    логическая разметка
    (*.html)

    оформление

    физическая разметка
    (*.css)

    main.css

    mini.css

    print.css

    Логическая разметка выделение ( emphasize )

    Логическая разметка выделение ( emphasize )

    33

    Логическая разметка

    выделение (emphasize)

    Это моя первая победа.

    сильное выделение (strong)

    Вася

    код программы

    a:= 2*b

    определение (definition)

    Сурок - это...

    цитата (citation)

    Блажен, кто верует, ...

    сокращение (abbreviation)

    НИИЧАВО

    Форматированный текст (тексты программ) program qq; var a, b: integer; begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b); end

    Форматированный текст (тексты программ) program qq; var a, b: integer; begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b); end

    34

    Форматированный текст (тексты программ)

    program qq;
    var a, b: integer;
    begin
    writeln("Введите два числа");
    read(a,b);
    writeln(a,'+',b,'=',a+b);
    end.


    program qq;
    var a, b: integer;
    begin
    writeln("Введите два числа");
    read(a,b);
    writeln(a,'+',b,'=',a+b);
    end.

    отформатированный текст
    (preformatted)

    Физическая разметка курсив ( italic )

    Физическая разметка курсив ( italic )

    35

    Физическая разметка

    курсив (italic)

    Вася

    Вася

    жирный (bold)

    Вася

    Вася

    подчеркивание (underline)

    Вася

    Вася

    зачеркивание (strike out)

    Вася

    Вася

    верхний индекс (superscript)

    Вася2

    Вася2

    нижний индекс (subscript)

    Вася2

    Форматирование текста в HEFS Ctrl-B

    Форматирование текста в HEFS Ctrl-B

    36

    Форматирование текста в HEFS

    Ctrl-B

    Тэг BODY – общие свойства страницы цвет фона и текста цвет гиперссылок

    Тэг BODY – общие свойства страницы цвет фона и текста цвет гиперссылок

    37

    Тэг BODY – общие свойства страницы

    цвет фона и текста





    цвет гиперссылок


    Привет!


    ...

    цвет текста

    цвет фона

    посещенные ссылки
    (visited link)

    цвет ссылок

    атрибуты тэга

    Вставка атрибутов в HEFS вставить только код цвета

    Вставка атрибутов в HEFS вставить только код цвета

    38

    Вставка атрибутов в HEFS

    вставить только код цвета

    Цвет гиперссылок ... LINK ссылки, на которых не были

    Цвет гиперссылок ... LINK ссылки, на которых не были

    39

    Цвет гиперссылок


    ...

    LINK ссылки, на которых не были
    VLINK посещенные ссылки
    ALINK активные ссылки

    Тэг FONT – свойства блока текста цвет текста размер шрифта

    Тэг FONT – свойства блока текста цвет текста размер шрифта

    40

    Тэг FONT – свойства блока текста

    цвет текста




    размер шрифта

    Привет!

    Как дела?

    Привет!
    SIZE=6>
    Как дела?

    от 1 до 7
    (3 – нормальный)

    Линия-разделитель horizontal rule ширина в пикселях или процентах толщина выравнивание

    Линия-разделитель horizontal rule ширина в пикселях или процентах толщина выравнивание

    41

    Линия-разделитель



    horizontal rule

    ширина в пикселях или процентах

    толщина

    выравнивание

    Кодирование цвета имена red, green, blue, magenta, black, шестнадцатеричные коды white

    Кодирование цвета имена red, green, blue, magenta, black, шестнадцатеричные коды white

    42

    Кодирование цвета

    имена
    red, green, blue, magenta, black,
    шестнадцатеричные коды

    white

    R

    G

    B

    # F F 0 0 0 0

    # F F F F F F

    # 0 0 F F F F

    # 0 0 0 0 0 0

    # A A A A A A

    Что такое CSS? HTML – язык логической разметки текста, определяющий содержание и структуру страницы (заголовки разных уровней, абзацы)

    Что такое CSS? HTML – язык логической разметки текста, определяющий содержание и структуру страницы (заголовки разных уровней, абзацы)

    43

    Что такое CSS?

    HTML – язык логической разметки текста, определяющий содержание и структуру страницы (заголовки разных уровней, абзацы)
    HTML–код не должен содержать оформления!
    оформление частей документа (заголовков, параграфов) описывается в отдельном файле
    CSS = Cascading Style Sheets – каскадные таблицы стилей
    стилевые файлы: *.css

    HTML + CSS

    оформление

    содержание

    + Javascript

    анимация

    Свойства элементов страницы body { color: white; background: #FF6600; } название тэга свойство селектор color – цвет символов background – цвет фона my

    Свойства элементов страницы body { color: white; background: #FF6600; } название тэга свойство селектор color – цвет символов background – цвет фона my

    44

    Свойства элементов страницы

    body {
    color: white;
    background: #FF6600;
    }

    название тэга

    свойство

    селектор

    color – цвет символов
    background – цвет фона

    my.css

    значение

    Подключение стилевого файла Пример

    Подключение стилевого файла Пример

    45

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



    Пример CSS
    type="text/css">


    ...


    qq.html

    my.css

    body {
    color: white;
    background: #0000E0;
    }


    ...

    Шрифты p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold; } для всех абзацев семейство шрифтов serif – с засечками sans-serif – без засечек…

    Шрифты p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold; } для всех абзацев семейство шрифтов serif – с засечками sans-serif – без засечек…

    46

    Шрифты

    p {
    font-family: Arial,sans-serif;
    font-size: 20px;
    font-style: italic;
    font-weight: bold;
    }

    для всех абзацев

    семейство шрифтов

    serif – с засечками
    sans-serif – без засечек
    monospace – моноширинный

    размер в пикселях

    normal – обычный
    italic - курсив

    normal – обычный
    bold - жирный

    Классы (стили оформления) p.spec { font-style: italic; background: green; } для абзацев класса spec

    Классы (стили оформления) p.spec { font-style: italic; background: green; } для абзацев класса spec

    47

    Классы (стили оформления)

    p.spec {
    font-style: italic;
    background: green;
    }

    для абзацев класса spec


    L’Etat c’est moi.

    qq.html

    L’Etat c’est moi.

    .spec {
    font-style: italic;
    background: green;
    }

    для всех элементов
    класса spec


    Россия молодая

    Размеры, выравнивание p { background: #E6E6FF; width: 80%; height: 100px; text-align: left; text-indent: 20px; } ширина высота

    Размеры, выравнивание p { background: #E6E6FF; width: 80%; height: 100px; text-align: left; text-indent: 20px; } ширина высота

    48

    Размеры, выравнивание

    p {
    background: #E6E6FF;
    width: 80%;
    height: 100px;
    text-align: left;
    text-indent: 20px;
    }

    ширина

    высота

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem.

    выравнивание:
    left
    center
    right
    justify

    100px

    80%

    20px

    фон

    абзацный отступ

    Рамка и поля p { background: #ccffcc; border: 1px solid green; margin: 0 40px 20px 40px; padding: 5px; } рамка отступы снаружи отступы внутри сверху,…

    Рамка и поля p { background: #ccffcc; border: 1px solid green; margin: 0 40px 20px 40px; padding: 5px; } рамка отступы снаружи отступы внутри сверху,…

    49

    Рамка и поля

    p {
    background: #ccffcc;
    border: 1px solid green;
    margin: 0 40px 20px 40px;
    padding: 5px;
    }

    рамка

    отступы снаружи

    отступы внутри

    сверху, справа, снизу, слева

    со всех сторон

    толщина

    solid – сплошная
    dashed - штриховая
    dotted – точечная

    цвет

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur felis velit, tempus sit amet cursus at, porta ut turpis. Sed augue tellus, tincidunt id ultricies at, tempor quis sem.

    40px

    40px

    20px

    Фоновый рисунок Привет, Вася! p

    Фоновый рисунок Привет, Вася! p

    p.hallo {
    background: white url(images/grad.jpg);
    }

    50

    Фоновый рисунок


    Привет, Вася!

    p.hallo {
    background: url(grad.jpg) repeat-y;
    }

    Фоновый рисунок без повторения p

    Фоновый рисунок без повторения p

    51

    Фоновый рисунок без повторения

    p.email {
    background: url(letter.gif) no-repeat;
    padding-left: 20px;
    }

    qq@mail.ru

    qq@mail.ru

    Ссылки p.email a { color: green; text-decoration:none; } p

    Ссылки p.email a { color: green; text-decoration:none; } p

    52

    Ссылки

    p.email a {
    color: green;
    text-decoration:none;
    }

    p.email a:hover {
    color: #00F;
    text-decoration:underline;
    }

    p.email a:visited {
    color: #F0F;
    }

    ссылки внутри абзаца стиля email

    убрать подчеркивание

    посещённые ссылки

    подчеркнуть

    когда мышь над ссылкой

    Выделение отдельных слов .latin { color: green; font-style: italic; } класс, применимый ко всему курсив

    Выделение отдельных слов .latin { color: green; font-style: italic; } класс, применимый ко всему курсив

    53

    Выделение отдельных слов

    .latin {
    color: green;
    font-style: italic;
    }

    класс, применимый ко всему

    курсив


    Собака(лат. 
    Canis lupus
    familiaris
    ) — одно из наиболее
    Домашних "животных-компаньонов".

    Web-страницы. Язык HTML и др. Тема 6

    Web-страницы. Язык HTML и др. Тема 6

    Web-страницы. Язык HTML и др.

    Тема 6. Рисунки

    Форматы рисунков GIF (Graphic

    Форматы рисунков GIF (Graphic

    55

    Форматы рисунков

    GIF (Graphic Interchange Format)
    сжатие без потерь
    прозрачные области
    анимация
    только с палитрой (2…256 цветов)
    рисунки с четкими границами, мелкие рисунки

    JPEG (Joint Photographer Expert Group)
    сжатие с потерями
    только True Color (16,7 млн. цветов)
    нет анимации и прозрачности
    рисунки с размытыми границами, фото

    PNG (Portable Network Graphic)
    сжатие без потерь
    с палитрой (PNG-8) и True Color (PNG-24)
    прозрачность и полупрозрачность (альфа-канал)
    нет анимации
    плохо сжимает мелкие рисунки

    Фон страницы (через CSS) body { background: url(back

    Фон страницы (через CSS) body { background: url(back

    56

    Фон страницы (через CSS)

    body {
    background: url(back.jpg);
    }

    'images/back.jpg'
    '../images/back.jpg‘
    'http://www.vasya.ru/images/back.jpg'

    #6e5c62;

    Рисунки в документе из той же папки: из другой папки: с другого сервера: image (изображение) source (источник)

    Рисунки в документе из той же папки: из другой папки: с другого сервера: image (изображение) source (источник)

    57

    Рисунки в документе

    из той же папки:

    из другой папки:

    с другого сервера:

    image (изображение)

    source (источник)

    Выравнивание left right top bottom ( по умолчанию ) middle

    Выравнивание left right top bottom ( по умолчанию ) middle

    58

    Выравнивание

    left

    right

    top

    bottom
    (по умолчанию)

    middle

    Отступы VSPACE ( vertical space )

    Отступы VSPACE ( vertical space )

    59

    Отступы

    VSPACE
    (vertical space)

    HSPACE
    (horizontal space)

    Выравнивание и отступы (CSS) img

    Выравнивание и отступы (CSS) img

    60

    Выравнивание и отступы (CSS)

    img.left {
    float: left;
    margin: 5px 10px;
    }

    = VSPACE

    = HSPACE

    = ALIGN

    margin: 5px 10px 5px 0;

    отступа слева нет!

    Другие атрибуты всплывающая подсказка надпись на месте рисунка, если его нет размеры позволяют: растянуть - сжать не портить дизайн, если рисунка нет толщина рамки вокруг…

    Другие атрибуты всплывающая подсказка надпись на месте рисунка, если его нет размеры позволяют: растянуть - сжать не портить дизайн, если рисунка нет толщина рамки вокруг…

    61

    Другие атрибуты

    Моя фотография

    всплывающая подсказка
    надпись на месте рисунка, если его нет

    размеры позволяют:
    растянуть - сжать
    не портить дизайн, если рисунка нет

    толщина рамки вокруг рисунка

    Рисунок-гиперссылка ALT="Бесплатная почта"

    Рисунок-гиперссылка ALT="Бесплатная почта"

    62

    Рисунок-гиперссылка


    ALT="Бесплатная почта" BORDER=0>


    Таблицы

    локальная ссылка:

    ссылка на другой сервер:

    иначе будет синяя рамка вокруг

    если не вплотную к , будет «хвост»

    не будет «хвоста»

    Рисунки в HEFS вставить рисунок

    Рисунки в HEFS вставить рисунок

    63

    Рисунки в HEFS

    вставить рисунок

    Web-страницы. Язык HTML и др. Тема 7

    Web-страницы. Язык HTML и др. Тема 7

    Web-страницы. Язык HTML и др.

    Тема 7. Таблицы

    Простейшая таблица Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек

    Простейшая таблица Таблица из одной строки из трех столбцов без указания ширины таблицы и ячеек

    65

    Простейшая таблица







    Таблица из одной строки из трех столбцов без указания ширины таблицы
    и ячеек.

    толщина рамки

    TABLE таблица
    TR = table row строка таблицы
    TD = table data данные таблицы
    TH = table header заголовок (жирный, по центру)

    Размеры ... ширина в пикселях или в % от ширины окна браузера высота в пикселях

    Размеры ... ширина в пикселях или в % от ширины окна браузера высота в пикселях

    66

    Размеры


    ...

    ширина в пикселях или в % от ширины окна браузера

    высота в пикселях


    ...

    всей таблицы:

    строки:

    ячейки:


    ...

    ширина в пикселях или в % от ширины таблицы

    Размеры (через CSS) table.spec { width: 60%; height: 300; } table

    Размеры (через CSS) table.spec { width: 60%; height: 300; } table

    67

    Размеры (через CSS)

    table.spec {
    width: 60%;
    height: 300;
    }

    table.spec tr {
    height: 50px;
    }

    всей таблицы:

    строки:

    ячейки:

    table.spec td.qq {
    width: 25%;
    height: 50px;
    }


    ...

    Выравнивание VALIGN="top">

    Выравнивание VALIGN="top">

    68

    Выравнивание


    VALIGN="top">



    По
    центру, по верхней границе
    WIDTH=200>По правой границе,
    по середине


    ...

    всей таблицы:

    информации в ячейках:

    left,
    center,
    right

    left,
    center,
    right

    top,
    middle,
    bottom

    Выравнивание (через CSS) По центру, по верхней границе

    Выравнивание (через CSS) По центру, по верхней границе

    69

    Выравнивание (через CSS)






    По центру,
    по верхней границе
    По правой
    границе, по середине

    table.ex tr.centop {
    text-align: center;
    vertical-align: top;
    height:100px;
    }
    table.ex td.rmid {
    text-align: right;
    vertical-align: middle;
    width:200px;
    }

    left,
    center,
    right

    top,
    middle,
    bottom

    Фон и цвет текста Привет!

    Фон и цвет текста Привет!

    70

    Фон и цвет текста










    Привет!
    Таблица из двух строк и двух столбцов

    цвет фона

    фоновый рисунок

    Фон и цвет текста (CSS) Привет!

    Фон и цвет текста (CSS) Привет!

    71

    Фон и цвет текста (CSS)










    Привет!

    Таблица
    из двух строк
    и двух столбцов

    table.qq td {
    background: green;
    }
    table.qq tr.spec td {
    background: blue;
    color: white;
    }
    table.qq tr.spec td.r {
    background: red;
    }
    table.qq td.pic {
    background: url("web.jpg");
    }

    цвет фона

    рисунок

    Отступы BGCOLOR = blue> 1 2 интервал между ячейками отступ внутри ячеек

    Отступы BGCOLOR = blue> 1 2 интервал между ячейками отступ внутри ячеек

    72

    Отступы

    BGCOLOR = blue>




    1 2

    интервал между ячейками

    отступ внутри ячеек

    CELLSPACING

    CELLSPACING

    CELLPADDING

    CELLPADDING

    Отступы (CSS) 1 2 border-spacing border-spacing padding padding table#qq { background: blue; border-collapse: separate; border-spacing: 10px; padding: 10px; } #qq tr { background: white; }…

    Отступы (CSS) 1 2 border-spacing border-spacing padding padding table#qq { background: blue; border-collapse: separate; border-spacing: 10px; padding: 10px; } #qq tr { background: white; }…

    73

    Отступы (CSS)






    1 2

    border-spacing

    border-spacing

    padding

    padding

    table#qq {
    background: blue;
    border-collapse: separate;
    border-spacing: 10px;
    padding: 10px;
    }
    #qq tr {
    background: white;
    }

    кроме IE 6

    Объединение ячеек Привет! Вася,

    Объединение ячеек Привет! Вася,

    74

    Объединение ячеек










    Привет!
    Вася, Петя, Маша!








    Привет! Вася,
    Петя,
    Маша!

    column span охват столбцов

    row span охват строк

    Вложенные таблицы Вася

    Вложенные таблицы Вася

    75

    Вложенные таблицы



















    ВасяПетя
    МашаДаша




    122
    3334444

    76 Таблицы в HEFS

    76 Таблицы в HEFS

    76

    Таблицы в HEFS

    Web-страницы. Язык HTML и др. Тема 8

    Web-страницы. Язык HTML и др. Тема 8

    Web-страницы. Язык HTML и др.

    Тема 8. Фреймы

    Фреймы Фрейм ( frame ) – это часть сложной

    Фреймы Фрейм ( frame ) – это часть сложной

    78

    Фреймы

    Фрейм (frame) – это часть сложной Web-страницы, в которую может быть загружена другая Web-страница.

    3 файла:
    left.html – страница в левой части
    right.html – страница в правой части
    index.html – описание структуры

    Описание структуры index.html

    Описание структуры index.html

    79

    Описание структуры

    index.html



    Фреймы-столбцы





    columns
    столбцы

    ширина в пикселях или %

    все остальное место

    source
    источник

    имя фрейма (для ссылок)

    Граница между фреймами ... ... граница между фреймами: 0 – невидима, 1 - видима ширина полосы между фреймами, за которую можно перетащить границу

    Граница между фреймами ... ... граница между фреймами: 0 – невидима, 1 - видима ширина полосы между фреймами, за которую можно перетащить границу

    80

    Граница между фреймами


    ...


    ...

    граница между фреймами:
    0 – невидима, 1 - видима

    ширина полосы между фреймами, за которую можно перетащить границу

    Настройка фрейма (FRAME)

    Настройка фрейма (FRAME)

    81

    Настройка фрейма (FRAME)

    MARGINHEIGHT="0"
    NORESIZE
    SCROLLING="auto">

    убрать отступы от края фрейма до содержимого

    полоса прокрутки:
    auto – появляется, когда надо
    yes – есть всегда
    no – нет никогда

    запретить изменение размеров

    Фреймы-строки index.html Фреймы-строки

    Фреймы-строки index.html Фреймы-строки

    82

    Фреймы-строки

    index.html



    Фреймы-строки



    NAME="qq">

    строки

    ширина в пикселях или %

    Сложные структуры (3 фрейма) index

    Сложные структуры (3 фрейма) index

    83

    Сложные структуры (3 фрейма)

    index.html











    Как открыть ссылку в другом фрейме

    Как открыть ссылку в другом фрейме

    84

    Как открыть ссылку в другом фрейме

    TARGET="qq">Глава 2

    TARGET
    _blank – в новом окне
    _parent – в родительском окне
    _top – в главном окне
    (убрать фреймы)

    85 Фреймы в HEFS

    85 Фреймы в HEFS

    85

    Фреймы в HEFS

    Работа с несколькими страницами переключение страниц закрыть текущую страницу (

    Работа с несколькими страницами переключение страниц закрыть текущую страницу (

    86

    Работа с несколькими страницами

    переключение страниц

    закрыть текущую страницу (Ctrl-W)

    просмотр активной страницы

    Web-страницы. Язык HTML и др. Тема 9

    Web-страницы. Язык HTML и др. Тема 9

    Web-страницы. Язык HTML и др.

    Тема 9. Блоки (DIV)

    Блоки (DIV) – любое содержимое

    Блоки (DIV) – любое содержимое

    88

    Блоки (DIV) – любое содержимое


    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris.





    1

    Блоки (DIV) – рамки и отступы Lorem ipsum dolor sit amet, consectetur adipiscing elit

    Блоки (DIV) – рамки и отступы Lorem ipsum dolor sit amet, consectetur adipiscing elit

    89

    Блоки (DIV) – рамки и отступы

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nunc libero, semper ac feugiat sed, sollicitudin et mauris. In hac habitasse platea dictumst. Cras dapibus nulla ac metus commodo viverra eget vitae erat. Donec ut mi tellus. Mauris eu turpis vel tellus tincidunt pulvinar.

    padding

    border

    margin

    #qq {
    padding: 5px 10px;
    border: 1px solid green;
    margin: 5px 15px 5px 10px;
    }

    Плавающие» блоки .picture { float: left; margin: 5px; }

    Плавающие» блоки .picture { float: left; margin: 5px; }

    90

    «Плавающие» блоки

    .picture {
    float: left;
    margin: 5px;
    }
    .picture p {
    margin: 0;
    text-align: center;
    font-family: sans-serif;
    font-size: 80%;
    font-weight: bold;
    }



    На природе


    свойства блока

    свойства абзаца внутри блока

    Web-страницы. Язык HTML и др. Тема 10

    Web-страницы. Язык HTML и др. Тема 10

    Web-страницы. Язык HTML и др.

    Тема 10. Понятие о Javascript

    Что может Javascript ? информация статична нет интерактивности (только переход на другую страницу)

    Что может Javascript ? информация статична нет интерактивности (только переход на другую страницу)

    92

    Что может Javascript?

    информация статична
    нет интерактивности (только переход на другую страницу)

    Чем плоха HTML-страница?

    Что можно сделать с помощью Javascript?

    изменение рисунка при наведении мыши
    выпадающие меню
    всплывающие подсказки
    фотогалерея без перегрузки страницы
    движение объекта по экрану

    Javascript может быть отключен в браузере

    Основные принципы каждый элемент на странице (текст, рисунок, таблица) – это объект , имеющий свои свойства свойства объекта можно менять из программы на

    Основные принципы каждый элемент на странице (текст, рисунок, таблица) – это объект , имеющий свои свойства свойства объекта можно менять из программы на

    93

    Основные принципы

    каждый элемент на странице (текст, рисунок, таблица) – это объект, имеющий свои свойства
    свойства объекта можно менять из программы на Javascript (скрипта)
    все, что происходит – это события
    все события можно «обрабатывать», т.е. как-то реагировать на них

    HTML + Javascript = DHTML (Dynamic HTML)

    Замена рисунка при движении мыши когда курсор мыши над рисунком после ухода мыши

    Замена рисунка при движении мыши когда курсор мыши над рисунком после ухода мыши

    94

    Замена рисунка при движении мыши

    когда курсор мыши над рисунком

    после ухода мыши

    События:
    onMouseOver – курсор мыши над объектом
    onMouseOut – курсор мыши ушел с объекта

    начальный рисунок

    this – этот объект
    this.src – свойство SRC этого объекта

    Скрытый блок Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др

    Скрытый блок Детали — это гайка, шайба, болт, винт, шуруп, гвоздь и др

    95

    Скрытый блок

    .hidden {
    display:none;
    }

    Скрытый блок: оформление ссылки onClick="show('details');return false;">

    Скрытый блок: оформление ссылки onClick="show('details');return false;">

    96

    Скрытый блок: оформление ссылки

    onClick="show('details');return false;">
    Показать детали

    остаться на странице

    по щелчку вызвать функцию show

    переход не выполнять

    Скрытый блок: как его открыть? 97 function show ( name ) { var elem = document

    Скрытый блок: как его открыть? 97 function show ( name ) { var elem = document

    Скрытый блок: как его открыть?

    97

    function show ( name )
    {
    var elem = document.getElementById(name);
    if ( elem )
    elem.style.display = "block";
    }



    test.js

    найти блок по имени

    изменить свойство display

    Формы 98 value="Готово" onClick="check();"> надпись на кнопке имя формы имя элемента делать по щелчку

    Формы 98 value="Готово" onClick="check();"> надпись на кнопке имя формы имя элемента делать по щелчку

    Формы

    98



    value="Готово" onClick="check();">

    надпись на кнопке

    имя формы

    имя элемента

    делать по щелчку

    Форма: обращение к элементам 99 function check() { if ( calc

    Форма: обращение к элементам 99 function check() { if ( calc

    Форма: обращение к элементам

    99

    function check()
    {
    if ( calc.answer.value == "4" )
    alert("Правильно!");
    else alert("Неправильно!");
    }

    test.js

    вывести сообщение

    Конец фильма ПОЛЯКОВ Константин

    Конец фильма ПОЛЯКОВ Константин

    100

    Конец фильма

    ПОЛЯКОВ Константин Юрьевич
    д.т.н., учитель информатики высшей категории,
    ГОУ СОШ № 163, г. Санкт-Петербург
    kpolyakov@mail.ru

    Скачать файл