Современные веб-технологии

Содержание

Слайд 2

Понятие «HTML» HTML (Hyper Text Markup Language, Язык разметки гипертекста) –

Понятие «HTML»

HTML (Hyper Text Markup Language, Язык разметки гипертекста) – стандартный

язык разметки документов во Всемирной паутине
Язык НТМL позволяет размечать электронный документ, который отображается на экране с полиграфическим уровнем оформления
Слайд 3

История «HTML» Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно

История «HTML»

Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в

1989—1991 годах.
В апреле 1994 г. под эгидой созданного в том же году Консорциума Всемирной паутины (World Wide Web Consortium, W3C) началась подготовка новой версии языка HTML 2.0, ставшей официальной рекомендацией W3C в сентябре 1995 г.
В марте 1995 г. началась работа над проектом HTML 3. Вводится поддержка нового средства – каскадных таблицей стилей (Cascading Style Sheets, CSS). CSS предназначены только для визуального форматирования структурных элементов документа.
В декабре 1997 г. консорциум W3C опубликовал новую версию HTML 4.0 в качестве рекомендации
Слайд 4

История «HTML» В декабре 1997 г. консорциум W3C опубликовал новую версию

История «HTML»
В декабре 1997 г. консорциум W3C опубликовал новую версию HTML

4.0 в качестве рекомендации.
История HTML5 начинается в 2004 году.
В 2009 году W3C прекратил развитие XHTML 2.0 и начал разрабатывать HTML5 (решили писать без пробела) уже совместно с WHATWG.
К 2012-му году, практически все современные браузеры в мире, начинают понимать язык HTML5, хотя еще и остаются некоторые теги которые браузеры пока не понимают.
На данный момент, работа над языком HTML5 продолжается.
Слайд 5

Факты о «HTML» HTML-документы имеют расширение .html или .htm) HTML-документы отображаются

Факты о «HTML»

HTML-документы имеют расширение .html или .htm)
HTML-документы отображаются Веб-браузерами или

Интернет - обозревателями (Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera,…)
Слайд 6

Редакторы для верстки веб-страниц Редактор HTML— компьютерная программа, позволяющая создавать и

Редакторы для верстки веб-страниц

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

HTML-страницы.
Вёрстка веб-страниц — процесс формирования веб-страниц в текстовом либо WYSIWYG-редакторе.
Все редакторы делятся на два класса: визуальные и текстовые.
Слайд 7

Визуальные редакторы Визуальные редакторы не требуют от разработчика знаний HTML, CSS

Визуальные редакторы

Визуальные редакторы не требуют от разработчика знаний HTML, CSS

и других технологий разметки документов. Пользователь просто располагает различные элементы будущей страницы в окне редактирования, а редактор сам генерирует соответствующий код. Именно поэтому визуальные редакторы еще называют WYSIWYG-редакторами, что означает - что видишь, то и получаешь.
Слайд 8

Визуальные редакторы

Визуальные редакторы

Слайд 9

Текстовые редакторы Ни один визуальный редактор не совершенен, и все они

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

Ни один визуальный редактор не совершенен, и все они

так или иначе ограничены в своих возможностях. Поэтому профессиональные разработчики пользуются небольшими текстовыми редакторами, которые содержат набор функций, облегчающих разработчику написание кода. К наиболее распространенным функциям относятся подсветка кода, различные горячие клавиши и т.д.
Слайд 10

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

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

Слайд 11

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

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

Слайд 12

Основные типы DOCTYPE

Основные типы DOCTYPE

Слайд 13

Пример1 Первая страница Это моя первая страница. ПРИМЕР 1

Пример1





Первая страница

marginheight="10">
Это моя первая страница.


ПРИМЕР 1
Слайд 14

Кодировка символов и язык HTML Запись в теге заголовка указывает браузеру

Кодировка символов и язык HTML

Запись в теге заголовка указывает браузеру

кодировку, в которой была написана данная страница - формат документа и раскладку клавиатуры.

Charset=Windows-1251"> - документ для Windows – Кириллица, где 1251 кодировка раскладки клавиатуры
В настоящее время рекомендуют использовать кодировку UTF 8 - <…. charset= "utf-8">
При неправильной установке языка и раскладки клавиатуры текст на странице отобразится в виде непонятных " иероглифов" .
Слайд 15

Тэги и их атрибуты Раздел документа BODY: Атрибуты: ALINK, VLINK ,

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

Раздел документа BODY:
Атрибуты:
ALINK, VLINK , LINK -

цвета активной, просмотренной,
еще не просмотренной (по умолчанию #0000ff - синий) и
просмотренной ссылок,
BGCOLOR- цвет фона документа,
BACKGROUND - URL- адрес фонового рисунка,
TEXT- цвет текста (задается в шестнадцатеричном формате,
например #ff0000, либо словом, например RED),
LEFTMARGIN, TOPMARGIN, RIGHTMARGIN,
BOTTOMMARGIN - размеры левого, верхнего, правого и
нижнего полей документа. Пример 2
BACKGROUND = "image1.jpg">

Белый цвет на фоне картинки



Слайд 16

Работа с текстом, основные теги … - абзац; … - вывод

Работа с текстом, основные теги

…

- абзац; 
…
- вывод отформатированного текста;

- переход на следующую строку.
Атрибуты:
ALIGN= "LEFT" (RIGHT, CENTER, JUSTIFY)
выравнивание текста по левому краю, по правому, по центру
и разбивка по ширине.
Пример:

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

;
Шрифты

…

- размер шрифта (от 1 до 6; h1- наибольший), …- полужирный; …- курсив; …- подчеркивание; …- зачеркивание; ..- подстрочный; < sup >..- надстрочный;
Слайд 17

Тег … - Атрибуты: FACE="Arial" ("Times New Roman", "Courier",…) - шрифт,

Тег …-
Атрибуты:
FACE="Arial" ("Times New Roman", "Courier",…) - шрифт,
SIZE=

целое число (от 1 до 7, 1- наименьший)- размер шрифта, COLOR- цвет. Пример: Темно-зеленый
- горизонтальная линия.
Атрибуты:
ALIGN- выравнивание;
WIDTH- длина линии(в пикселях или в % от окна просмотра); SIZE- толщина линии в пикселях; COLOR- цвет,
NOSHADE- отменяет рельеф линии.
Пример:

Слайд 18

Графический файл - вставка графического файла. Атрибуты: ALIGN= " LEFT "(RIGHT)-

Графический файл
- вставка графического файла.
 Атрибуты:
ALIGN=

" LEFT "(RIGHT)- текст, идущий после изображения, будет обтекать его справа(слева);
HEIGHT- высота; WIDTH- ширина;
ALT= " Текст " - текст на месте изображения,
BORDER- толщина рамки; HSPASE (VSPACE)- расстояние по горизонтали(вертикали) от картинки до начала текста.
Пример: Книга
- комментарий ( не отображается браузером)   – пробел, &mesp - табулирование.
Слайд 19

СПИСКИ Нумерованный: тег … …-заголовок списка, …- элемент списка, Атрибуты тэга

СПИСКИ
Нумерованный: тег

    …

…-заголовок списка,
  • …- элемент списка, Атрибуты тэга
      : TYPE - тип

    • нумерации.
    Значения: А - заглавные(a - строчные) латинские буквы; I- большие (i- маленькие) римские цифры; 1- арабские цифры; START = целое число - начальный номер списка.
     Маркированный: тег
      …

    ,
  • … Атрибуты тэга
      : :
      TYPE= disk(square, circle) - тип маркеров Можно вместо маркеров вставлять свои картинки:
        Текст1
        Текст2

    • Слайд 20

    СПИСКИ Меню: Список определений: … … - термин … …- описание

    СПИСКИ
    Меню: Список определений:

  • …
    …
    -

    • термин
  • …
    …- описание термина
    Пример:

    SGML

    Международный стандарт методов представления текстов в электронной форме.


    • Слайд 21

    ССЫЛКИ Тег Указатель - тэг осуществляет гиперссылку. Атрибуты тэга : HREF=

    ССЫЛКИ
    Тег Указатель - тэг осуществляет гиперссылку. Атрибуты тэга :
    HREF= "

    URL"; TITLE - по аналогии с ALT у тэга ;
    NAME= " Имя " - метка для внутренней гиперссылки. Пример внутренней ссылки:
     Текст1 - устанавливаем имя “якоря”,
    … Текст2 - щелкнув на Текст2, перейдем по метке к Текст1 (ссылка на якорь, используем атрибут "href" и обязательно присутствие " # ".
    Пример внешних ссылок: Текст
    Слайд 22

    Таблицы Тэги таблицы: … - заголовок таблицы, … - контейнер строки,

    Таблицы

    Тэги таблицы:

    …- заголовок таблицы, …- контейнер строки, - контейнер столбца, - контейнер
    заголовка,
    ……
    Атрибуты тэга : BORDER- ширина рамки вокруг таблицы в пикселях,
    ALIGN- выравнивает таблицу в окне браузера ( LEFT, RIGHT, CENTER),
    FRAME- прорисовка границы вокруг таблицы. Значения: BORDER- везде; ABOVE- вверху; BELOW- внизу, LHS- слева; RHS- справа; HSIDES- сверху и снизу; VSIDES- слева и справа.
    Слайд 23

    Таблицы Атрибуты тэга : HEIGHT- высота таблицы(в точках или в %

    Таблицы

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

    :
    HEIGHT- высота таблицы(в точках или в % от высоты
    экрана) WIGHT- ширина, CELLPADDING - расстояние от содержимого ячейки до ее границы CELLSPACING - расстояние между смежными ячейками, RULES- способ разлиновки (ALL- вертикальная и горизонтальная) COLS – вертикальная, ROWS-горизонтальная,
    GROUPS- количество объединяемых столбцов,
    определяется параметром SPAN тэга
    .
    Атрибуты тэгов
    , ,
    Слайд 25

    Таблицы Атрибуты тэга : ALIGN- выравнивание: TOP, BOTTOM, LEFT, RIGHT, -

    Таблицы

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

    , : BGCOLOR - изменяет цвет фона ячейки, BORDERCOLOR - изменяет цвет рамки, VALIGN - выравнивание содержимого по вертикали. Значения: TOP, BOTTOM, MIDDLE.
    Слайд 24

    Таблицы Пример: Объединение столбцов 5 4 3 2 1 5 4

    Таблицы

    Пример:









    FACE=”ARIAL”> Объединение столбцов
    5 4 3 2 1
    54321

    RULES= "groups« - линия отображается между группами, которые образуются тегами 

    :
    ALIGN- выравнивание: TOP, BOTTOM, LEFT, RIGHT, - по центру
    таблицы вверху, внизу; LEFT, RIGHT - вверху по левому (правому) краю.
    Атрибуты объединения ячеек:
    ROWSPAN - объединить строки,
    COLSPAN - объединить столбцы. Пример: фрагмент кода
    ……………………………





    Объединение ячеек по горизонтали

    100000 300000
    400000 500000 600000

    Слайд 26

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

    Формы

    Форма задается тегами

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

    без ее обработки.
    Атрибуты:
    name - имя формы.
    action - определяет URL-адрес, для отправки информации.
    method - определяет способ отправки информации
    target - указывает имя окна, в котором будут отображаться результаты обработки отправленной формы.
    Пример:
    Слайд 27

    Элементы формы ТЕКСТОВОЕ ПОЛЕ – задается тегом Атрибуты: name - имя

    Элементы формы

    ТЕКСТОВОЕ ПОЛЕ – задается тегом
    Атрибуты:
    name - имя элемента,
    type -

    тип элемента (в данном случае - text),
    size - размер текстового поля в символах,
    maxlength - максимальное количество символов,
    value – текст, отображаемый в поле,
    disabled – блокирует от любых изменений,
    readonly – поле только для чтения.
    Слайд 28

    ТЕКСТОВОЕ ПОЛЕ ДЛЯ ВВОДА ПАРОЛЯ По аналогии с предыдущим элементом, кроме

    ТЕКСТОВОЕ ПОЛЕ ДЛЯ ВВОДА ПАРОЛЯ

    По аналогии с предыдущим элементом, кроме параметра

    type="password". Вводимый текст отображается специальными символами - ***.
    МНОГОСТРОЧНОЕ ТЕКСТОВОЕ ПОЛЕ

    Атрибуты:
    name - имя поля,
    cols - ширина поля в символах,
    rows - количество строк текста, видимых на экране,
    wrap - способ переноса слов:
    off - переноса не происходит,
    virtual - перенос отображается, но на сервер поступает неделимая строка,
    physical - перенос и на экране и на сервере.
    disabled - неактивное поле, readonly - только для чтения.
    Слайд 29

    ПРИМЕР МНОГОСТРОЧНЫХ ПОЛЕЙ

    ПРИМЕР МНОГОСТРОЧНЫХ ПОЛЕЙ

    Слайд 30

    РАСКРЫВАЮЩИЕСЯ СПИСКИ – … , внутри заключены элементы значений, заданных тегом

    РАСКРЫВАЮЩИЕСЯ СПИСКИ – , внутри заключены элементы значений, заданных

    тегом
    15IST2
    указывает программе обработчику формы, какой пункт выбрал пользователь,
    value - значение элемента,
    checked - помечают наиболее вероятные для выбора пункты.
    Пример:
    Отели
    София
    Астория
    Адора
    Слайд 33

    ПЕРЕКЛЮЧАТЕЛИ тег Атрибуты: name -значения параметра должны быть одинаковы для всех

    ПЕРЕКЛЮЧАТЕЛИ тег
    Атрибуты: name -значения параметра должны быть одинаковы для

    всех элементов группы,
    type="radio", все остальные такие же, как у флажков. Пример:
    Слайд 34

    КНОПКИ Submit - кнопка отправки содержимого формы web-серверу. Атрибуты: type="submit" -

    КНОПКИ
    Submit - кнопка отправки содержимого формы web-серверу. Атрибуты:
    type="submit" - тип кнопки,


    name - имя,
    value - надпись.
    Image - графическая кнопка отправки содержимого формы web-серверу.
    Атрибуты:
    type="image" - тип графической кнопки,
    name - имя,
    src - адрес картинки для кнопки.
    Reset - кнопка, позволяющая восстановить все значения по умолчанию в форме.
    type="reset" - тип кнопки очищения,
    name - имя,
    value - надпись.
    Слайд 35

    button - произвольная кнопка, ее действия назначаются вами. Атрибуты: type="button" -

    button - произвольная кнопка, ее действия назначаются вами.
    Атрибуты:
    type="button" - тип

    произвольной кнопки,
    name - имя,
    value – надпись,
    onclick - указывает, что делать при щелчке по кнопке.
    - Предыдущая
    Захисти себе від СНІДу
    Следующая -
    Теоретические основы поисков и разведки газовых газоконденсатных залежей и месторождений. Лекция 16

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

    Процесс проектирования и разработки ПО Введение
    Алгоритм и его свойства
    Презентация "Системы счисления. Понятия, виды, развернутая форма записи числа" - скачать презентации по Информатике
    Функциональная схема компьютера
    Гибридная контрольно-проверочная аппаратура
    Информационные технологии. Проектирование Базы данных
    От индустриального общества к информационному
    Концепция баз данных, понятие моделей данных
    Модели жизненного цикла программного обеспечения
    Разработка компьютерного сурдопереводчика непрерывной русской речи на разговорный русский жестовый язык для глухих
    Компьютер
    Создание базы данных в СУБД Access
    Andmebaasisüsteemide Oracle ja PostgreSQL kasutamine
    Проектирование реляционной базы данных. Основные принципы проектирования
    Алгоритмические структуры программирования (9 класс)
    Теоретические основы языков манипулирования данными
    Робототехника
    Теория вычислений
    Презентация "Электронная таблица MS Excel" - скачать презентации по Информатике
    Oператори циклу
    Name of presentation. Наши страницы в соцсетях
    Использование подзапросов
    Презентация "Пример атаки на IP-сеть. &#039;&#039;Переполнение буфера&#039;" - скачать презентации по Информатике
    Программные средства ПК. Основные понятия операционной системы
    SQLite менеджер данных. Просмотр данных. (Часть 2)
    Логическое программирование
    Виды информации
    К проекту 11 игр
    Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
    Обратная связь
    Для правообладателей
    Email: Нажмите что бы посмотреть