Презентация на тему "Язык гипертекстовой разметки HTML" 11 класс

Презентация: Язык гипертекстовой разметки HTML
Включить эффекты
1 из 42
Ваша оценка презентации
Оцените презентацию по шкале от 1 до 5 баллов
  • 1
  • 2
  • 3
  • 4
  • 5
3.0
1 оценка

Комментарии

Нет комментариев для данной презентации

Помогите другим пользователям — будьте первым, кто поделится своим мнением об этой презентации.


Добавить свой комментарий

Аннотация к презентации

Презентация для 11 класса на тему "Язык гипертекстовой разметки HTML" по информатике. Состоит из 42 слайдов. Размер файла 0.19 Мб. Каталог презентаций в формате powerpoint. Можно бесплатно скачать материал к себе на компьютер или смотреть его онлайн с анимацией.

Содержание

  • Презентация: Язык гипертекстовой разметки HTML
    Слайд 1

    HTML

    1

    Язык гипертекстовой разметкидля написания кода страниц сайта

  • Слайд 2

    «Каркас» страницы

    2

    < html >

     

    Посмотреть в браузере

  • Слайд 3

    Текст в HTML

    3

    < html >

     

    Текст в HTML

    Посмотреть в браузере

  • Слайд 4

    Теги

    , , ,

    4

    Полужирный текст в HTML

    Наклонный текст в HTML

    Текст1 в HTML

    Текст2 в HTML

    Посмотреть в браузере

  • Слайд 5

    Теги заголовков

    5

    Заголовок 1 уровня Заголовок 2 уровня

    Посмотреть в браузере

  • Слайд 6

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

    6

    • Элемент списка 1
    • Элемент списка 2

    Посмотреть в браузере

  • Слайд 7

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

    7

    1. Элемент списка 1
    2. Элемент списка 2

    Посмотреть в браузере

  • Слайд 8

    Вложение ненумерованных списков

    8

    • Элемент списка 1
      • Элемент списка 1.1
      • Элемент списка 1.2
    • Элемент списка 2

    Посмотреть в браузере

  • Слайд 9

    Вложение нумерованных списков

    9

    1. Элемент списка 1
      1. Элемент списка 1.1
      2. Элемент списка 1.2
    2. Элемент списка 2

    Посмотреть в браузере

  • Слайд 10

    Сложные списки

    10

    1. Элемент списка 1
      • Элемент списка 1.1
      • Элемент списка 1.2
    2. Элемент списка 2

    Посмотреть в браузере

  • Слайд 11

    Вставка картинок

    11

    Посмотреть в браузере

  • Слайд 12

    Таблицы

    12

    1 2

    Посмотреть в браузере

  • Слайд 13

    Таблицы (продолжение 1)

    13

    1

    2

    Посмотреть в браузере

  • Слайд 14

    Таблицы (продолжение 2)

    14

    1

    2

    Посмотреть в браузере

  • Слайд 15

    Таблицы в HTML-документах - …

  • Слайд 16

    Таблицы в HTML-документах - …

  • Слайд 17

    17

  • Слайд 18

    Таблицы - Пример

    18

    Requirements for Netscape Gold Platform, OS PC Requirements Windows 486, HDD 5MB, 8MB Macintosh 68020, HDD 5MB, 8 MB Unix N/A, HDD 6 MB, 16 MB
  • Слайд 19

    Формы - Интерактивный элемент World Wide Web

    19

  • Слайд 20

    Пример HTML-текста формы

    20

     

    Добавить запись в гостевую книгу

    Имя: E-Mail: URL: Город: Страна:

    Комментарии:

  • Слайд 21

    Формы

    21

    …. …. (

    )….

    Aтрибуты:

    ACTION="URL" - URL, по которому передается содержимое формы

    METHOD="GET" or “POST" - способ/метод пересылки протоколом HTTP содержимого формы

    METHOD="GET" (по умолчанию) - содержимое формы добавляется к URL

    METHOD= “POST" - содержимое формы пересылается HTTP-серверу в виде сообщения

    ENCTYPE = "MIME type" - MIME-тип данных, пересылаемых к HTTP-серверу методом POST

  • Слайд 22

    - Определитель полей ввода в формах

    22

    Атрибуты:

    TYPE= "type" - ввод строки текста

    VALUE="default_string" - начальное значение содержимого полей ввода

    NAME="var-name" - присваивает имя "var-name" вводимым данным

    SIZE="n" , MAXLENGTH="nmax" - определяют размер отображаемого поля текста и длину текстового буфера для типов "text" и "password"

    ALIGN="top", “middle", “bottom" - привязка текста и графического образа дляTYPE="image"

    SRC="URL"- используется для указания URL интерактивного образа

  • Слайд 23

    TYPE - Атрибут типа полей ввода в формах

    23

    TYPE= "text" - ввод строки текста

    "password"- ввод пароля - при вводе текст заменяется “звездочками"

    "radio" - группа “радиокнопок", из которых может быть выбрана только одна

    "checkbox" - ввод логических элементов, определяемых значением Вкл./Выкл.

    "hidden" - неотображаемый элемент текста, применяемый для связи форм

    "reset" - управляющая кнопка для сброса всех полей формы

    "submit" - управляющая кнопка, инициирующая пересылку данных к серверу

    "image" - управляющая кнопка, инициирующая пересылку данных к серверу

  • Слайд 24

    - Элементы меню в формах

    24

    Item_1Item_2

    Атрибуты:

    NAME="var-name" - имя переменной, ассоциированное с вводимым элементом SELECT

    MULTIPLE - определяет формат меню в виде списка с прокруткой, а такжедопускает выбор множества элементов списка OPTION

    SIZE="n" - определяет количество элементов в списке прокрутки

    OPTION - элементы списка SELECT

    VALUE="value" - определяет величину, присвоенную данному элементу списка OPTION

    SELECTED - отмечает предварительно выбранный элемент списка OPTION

  • Слайд 25

    - Ввод нескольких строк текста

    25

    Default text to be displayed </ TEXTAREA > Атрибуты: NAME="var-name" - имя переменной, ассоциированное с вводимым текстом в форме TEXTAREA ROWS="n" - количество рядов в зоне ввода текста COLS="m" > - количество колонок в зоне ввода текста

  • Слайд 26

    - Ввод нескольких строк текста - Пример

    26

    Comments: Any comments are highly appreciated. Thank you!

  • Слайд 27

    Элементы -Флаги-переключатели

    27

    Text_Item_#

    ….

    Text_Item_#

    Example

    Текст 1 Текст 2:

    Текст 3: Текст 4 Текст 5 Текст 6

  • Слайд 28

    28

  • Слайд 29

    Элементы -Переключатели-”радиокнопки”

    29

    Text_Item_#

    Text_Item_#

    Example

    Текст 1 Текст 2 :

    Текст 3: Текст 4 Текст 5 Текст 6

  • Слайд 30

    30

  • Слайд 31

    Активные графические образы

    31

    Атрибуты

    HREF=

    SRC=“directory/image.gif"

    ISMAP - серверный вариант формирования ссылок по координатам

    USEMAP - клиентский (в браузере) вариант формирования ссылок по координатам

    Формат HTTP-запроса к WWW-серверу

    GET http://host/cgi-bin/imagemap/table_or_base?x,y HTTP1.0

  • Слайд 32

    Формат таблицы IMAGE.MAP

    32

    METHOD URL Coordinates pairs

    # Image map for image.gif

    circle dir1/capital.html 50,20 50,30

    rec dir2/region.html 80,40 120,60

    poly dir3/area.html 10,20 10,45 15,55 20,78

    default dir/default.html

    circle - круг - задаются координаты центра и правой крайней точки

    rectangle (rec) - прямоугольник - задаются координаты левой верхней и правой нижней точек

    polygon (poly) - задаются координаты вершин многоугольника

    point - задаются координаты точки

    default - задается URL, который выдается, если указатель мыши не попадает на выделенную зону образа

  • Слайд 33

    Активные графические образы клиентского типа USEMAP

    Атрибуты

    SHAPE=shape -определяет очертание активной зоны (circle, rectangle (rec),polygon (poly), point, default)

    HREF=URL- гипертекстовая ссылка, соответствующая выделенной области

    COORDS="x1,y1,x2,y2, …, xN, yM" - координаты опорных точек активной зоны

    ALT="Alt Text" - текст, который отображается неграфическим броузером

  • Слайд 34

    Использование фреймов в HTML-документах

     

     

    <a data-cke-saved-href="“server/pathename/file.html&quot;" href="“server/pathename/file.html&quot;" target="“framename&quot;">- # информация, которая должна отображаться в&amp;amp;amp;lt;/p&amp;amp;amp;gt;&amp;amp;amp;lt;p&amp;amp;amp;gt; &amp;amp;hellip; # броузерах, не понимающих фреймы&amp;amp;amp;lt;/p&amp;amp;amp;gt;&amp;amp;amp;lt;p&amp;amp;amp;gt; &amp;amp;amp;amp;amp;lt;NOFRAMES&amp;amp;amp;amp;amp;gt;&amp;amp;amp;lt;/p&amp;amp;amp;gt;&amp;amp;amp;lt;p&amp;amp;amp;gt;&amp;amp;amp;amp;amp;lt;FRAMESET &amp;amp;amp;amp;amp;gt;</a>
  • Слайд 35

    Задание параметров фреймов -

    35

    Атрибуты:

    ROWS=“m,n,p" - задает параметры деления экрана браузера на фреймы по вертикали в %, пикселях или по умолчанию (*)

    COLS=“a,b,c" - задает параметры деления экрана браузера на фреймы по горизонтали в %, пикселях или по умолчанию (*)

  • Слайд 36

    Атрибуты фреймов -

    36

    Атрибуты:

    NAME=“framename#" - имя фрейма (для использования в атрибуте TARGET в директиве …

    SRC=“URL" - адрес документа: отображаемого в данном фрейме

    MRGINWIDTH=“k"- отступ отображаемой информации от горизонтальных границ

    MRAGINHEIGHT=“l" -отступ отображаемой информации от горизонтальных границ

    SCROLLING=“method" - параметр режима скроллинга во фрейме (yes, no, auto)

    NORESIZE - запрещает изменение размера фрейма

  • Слайд 37

    Пример -документа с фреймами

    37

     

     

    &amp;amp;amp;lt;/p&amp;amp;amp;gt;&amp;amp;amp;lt;p&amp;amp;amp;gt;Alternative content no-frames browsers.&amp;amp;amp;lt;/p&amp;amp;amp;gt;&amp;amp;amp;lt;p&amp;amp;amp;gt;
  • Слайд 38

    Ссылки

  • Слайд 39

    Фон страницы

  • Слайд 40

    Стиль ссылок (цвет и подчеркивание)

    40

    <!--

    a:link {color: #000000; text-decoration: none;}

    a:visited {color: #FF0000; text-decoration: none;}

    a:hover {color: #00FF00; text-decoration: underline;}

    a:active {color: #0000FF; text-decoration: none;}

    -->

    Посмотреть в браузере

  • Слайд 41

    Элемент разметки SCRIPT

    41

    Элемент разметки SCRIPT служит для размещения кода JavaScript, VBScript или JScript. Вообще говоря, SCRIPT можно использовать не только в заголовке документа, но в его теле.

  • Слайд 42

    Задание

    42

    В «Блокноте» написать HTML-код простой странички с использованием материалов лекции.

    Просмотреть страницу в браузере.

    Спасибо за внимание!

Посмотреть все слайды

Сообщить об ошибке