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

Содержание

• 
  Слайд 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-код простой странички с использованием материалов лекции.

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

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