Основы HTML

Содержание

Слайд 2

1

Если мы загрузим какой-нибудь сайт и выберем в главном меню обозревателя команду

1 Если мы загрузим какой-нибудь сайт и выберем в главном меню обозревателя
Вид | Просмотр HTML-кода, то откроется окно Блокнота и в нем отобразится текст документа, написанный на HTML (Hypertext Markup Language) – на языке разметки гипертекста.
HTML-документы представляют собой текстовые файлы, в которые встроены специальные команды.
Теги (tags) – команды языка HTML
Для файлов, являющихся HTML-документами, принято расширение htm или html.

1

2

2

1

Назначение и основные понятия

Слайд 3

Формат тега (правила его записи):
<тег атрибут=«значение» атрибут=«значение»…>
У многих тегов есть свои атрибуты.

Формат тега (правила его записи): У многих тегов есть свои атрибуты. Их
Их назначение – уточнять теги, более подробно описывать действия над текстом, графикой или другими объектами.
Атрибуты можно записывать в произвольном порядке через пробел. Значения атрибутов можно не заключать в кавычки и даже лучше не заключать (если это не два слова!), чтобы не запутаться, т.к. непарные кавычки – это ошибка, из-за которой команда не выполняется.
Особенность создания HTML-документа – в том, что создается он в Блокноте, а просматривать его можно в окне обозревателя, например, Internet Explorer.
Каждый раз, внося изменения в текст HTML-документа, следует его сохранять и обновлять в окне Internet Explorer, выбирая соответствующую команду или кнопку на панели инструментов , или клавишу .

2

1

Сообщения об ошибках, допущенных в формате тегов, не появляются.
Ошибки нужно искать самостоятельно, если результат при просмотре сайта не соответствует ожидаемому!

Назначение и основные понятия

1

2

2

Слайд 4

3



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


основная часть документа


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

3 Служебная информация информация об имени страницы основная часть документа Структура HTML-документа

Слайд 5

4

– начинает блок служебной информации.
– завершает блок служебной информации.
–</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="4 – начинает блок служебной информации. – завершает блок служебной информации. –" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/420349/slide-4.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/420349/slide-4.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/420349/slide-4.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/420349/slide-4.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/420349/slide-4.jpg" class="slides-image"><!----><div class="slides-content">начинает блок информации, которая будет отображаться в строке заголовка обозревателя.<br> – завершает блок информации, которая будет отображаться в строке заголовка обозревателя.
– содержит служебную информацию.
Каждый тег содержит пару атрибутов name и content, определяющих соответственно тип данных и содержание.
Варианты:

описывает краткое содержание страницы.

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

описывает имя автора страницы.

через 5 секунд автоматически загрузит сайт с указанным адресом, интервал времени и адрес задаем по своему усмотрению.

Служебные теги

1

2

2

1

Слайд 6

5

– изменение размера шрифта.
– отмена выбранного размера шрифта.
N∈[1…6]

5 – изменение размера шрифта. – отмена выбранного размера шрифта. N∈[1…6] –
– полужирный шрифт.
 – отмена полужирного шрифта.
– курсив.
 – отмена курсива.
– подчёркивание.
 – отмена подчёркивания.
– полужирный шрифт.
 – отмена полужирного шрифта.
– увеличение шрифта относительно текущего.
 – отмена увеличения шрифта относительно текущего.
– уменьшение шрифта относительно текущего.
 – отмена уменьшения шрифта относительно текущего.
Введя в Блокноте HTML-код и сохранив файл в формате htm, можно запустить его, и в окне Internet Exploter отобразится содержание документа.

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

1

2

2

1

Слайд 7

6


– переход на следующую строку.

 – отображение без изменения форматирования.

6 – переход на следующую строку. – отображение без изменения форматирования. –
– отмена отображения без изменения форматирования.
Пример действия этого тега:
первый абзац отображается так, как введен в блокноте, т.к. на него распространяется действие тега, а второй абзац отображается произвольным образом.
– текст сдвигается вверх (верхний индекс).
 – отмена сдвига.
– текст сдвигается вниз (нижний индекс).
 – отмена сдвига.

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

1

2

1

2

Слайд 8

7

– изменение шрифта.
– отмена действия шрифта.
Атрибуты тега
COLOR=

7 – изменение шрифта. – отмена действия шрифта. Атрибуты тега COLOR= «название
«название цвета или его шестнадцатеричный код»
изменение цвета текста.
Например, чтобы в окне обозревателя
текст отображался красным цветом, нужно ввести в HTML-код такую команду:
текст

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

1

2

2

1

Слайд 9

8

Шестнадцатеричный код любого цвета можно определить, загрузив графический редактор Adobe Photoshop.
В

8 Шестнадцатеричный код любого цвета можно определить, загрузив графический редактор Adobe Photoshop.
палитре инструментов подвести указатель мыши к цвету переднего плана или цвету фона. Двойным щелчком левой кнопки мыши на цвете переднего плана или фона можно запустить диалоговое окно Сборщик цветов.
В нижней части этого окна справа есть поле (на рисунке оно обведено), в котором отображён соответствующий данному цвету шестнадцатеричный код.

1

2

2

1

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

Слайд 10

9

FACE = название шрифта – изменение гарнитуры (начертания) шрифта.
SIZE = размер

9 FACE = название шрифта – изменение гарнитуры (начертания) шрифта. SIZE =
шрифта – изменение размера шрифта фрагмента текста, используется в середине строки, т.к. после окончания своего действия не разбивает строку.
Атрибуты могут перечисляться через пробел в произвольном порядке.
Пример записи и результат действия этих тегов.

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

1

2

2

1

Лучше, однако, не использовать «экзотические» шрифты, которых может не оказаться у пользователя при просмотре вашего сайта. В этом случае они автоматически будут заменяться на стандартные.

Слайд 11

10

Линии


Создает горизонтальные линии.
Атрибуты тега

SIZE =толщина линии в пикселах
WIDTH= ширина

10 Линии Создает горизонтальные линии. Атрибуты тега SIZE =толщина линии в пикселах
линии в пикселах или 80%
LEFT
ALIGN = RIGHT
CENTER
Выравнивание линии относительно ширины страницы

– абзац.

– конец абзаца.
Атрибуты тега

для выравнивания текста
Атрибуту ALIGN может быть присвоено одно из 4-х значений:
LEFT
ALIGN = RIGHT
CENTER
JUSTIFY
Позволяет выравнивать текст по левому, правому краю по центру или по ширине.
Пример записи и результат действия этого тега с различными значениями атрибутов.

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

1

2

2

1

Слайд 12

11

Фон страницы задается в начале основной части документа, т.е. атрибутами тега .
Атрибуты

11 Фон страницы задается в начале основной части документа, т.е. атрибутами тега
тега для изменения
цвета текста и фона
TEXT= название цвета или его код
Задает цвет текста.
BGCOLOR= название цвета или его код
Задает цвет фона.
Пример записи и результат действия этого тега.
BACKGROUND= имя файла
Использование в качестве фона изображения из файла. Изображение-текстуру можно создать в графическом редакторе.
BGPROPERTIES=FIXED
Создание фона – «водяного знака»
(фона, который не перемещается вместе с текстом).

1

2

2

1

Создание фона

Слайд 13

12

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

вставка картинки из

12 Вставка графических изображений вставка картинки из файла. Атрибуты тега SRC= имя
файла.
Атрибуты тега
SRC= имя файла.расширение
ALT= название картинки или поясняющий текст
Используется в качестве текстового описания к данному изображению, появляется при наведении указателя мыши на картинку.
WIDTH = ширина (в пикселах или в %)
HIGHT = высота (в пикселах или в %)
BORDER = число в пикселах
Определяет рамку вокруг изображения.
HSPACE = число в пикселах
VSPACE = число в пикселах
Определяют горизонтальный и вертикальный отступ вокруг изображения соответственно.
Пример записи и результат действия этого тега с различными значениями атрибутов.

1

2

2

Вставка графики, видео, звука

1

Все файлы с изображениями должны находиться в том же каталоге, что и HTML-документ, или в качестве значения атрибута IMG кроме имени файла и расширения имени файла нужно указывать путь к файлу.

Слайд 14

13

LEFT
ALIGN = RIGHT
CENTER
Используется, чтобы сдвинуть картинку к левому, правому краю, по центру

13 LEFT ALIGN = RIGHT CENTER Используется, чтобы сдвинуть картинку к левому,
и установить обтекание картинки текстом.
LEFT
CLEAR = RIGHT
ALL
Используется, чтобы очистить поле слева, справа или с обеих сторон графического объекта, а затем продолжить текст в пустой области за объектом.
Пример записи и результат действия тега с различными значениями атрибутов.

1

2

2

1

Вставка графики, видео, звука

Практическая
работа №1

Материалы для
работы

Если картинка не отображается, возможно неправильно указано имя файла, его расширение, или файл отсутствует в нужной папке.

Слайд 15

Пример записи и результат действия тегов с различными значениями атрибутов.

14
Вставка видео и

Пример записи и результат действия тегов с различными значениями атрибутов. 14 Вставка
звука

Вставка звукового файла.

Вставка видео файла.

Вставка видео или звукового файла (с панелью управления).
Атрибут тегов ,
n true
LOOP = INFINITE AUTOSTART= f alse

1

2

2

1

Вставка графики, видео, звука

Практическая
работа №2

Материалы для
работы

Если видео не отображается, возможно, неправильно указано имя файла, или его расширение, или файл отсутствует в нужной папке.

Количество повторений видео или звукового клипа и непрерывное повторение соответственно.

Автоматическое воспроизведение и воспроизведение при нажатии кнопки соответственно.

Слайд 16

15
Списки
Есть 2 вида списков: ненумерованные
(маркированные) и нумерованные.
Ненумерованные списки:

    (Unordered List) – начало

15 Списки Есть 2 вида списков: ненумерованные (маркированные) и нумерованные. Ненумерованные списки:
списка
– конец списка.
  • (List Item) – элемент списка.
    Атрибут тега

      DISC
      TYPE = CIRCLE
      SQUARE
      Определяет вид маркера
      Пример записи и результат действия тегов.

      1

      2

      Создание списков и таблиц

      1

      2

    • Слайд 17

    Нумерованные списки:
      (Ordered List) – начало списка.
    – конец списка.
  • (List Item)

    • Нумерованные списки: (Ordered List) – начало списка. – конец списка. (List Item)
    – элемент списка.
    Атрибуты тега

      1
      TYPE = A
      I
      …
      Определяет тип нумерации: арабскими цифрами, русскими буквами, римскими цифрами и т.д.
      Пример записи и результат действия тегов с различными значениями атрибутов.

      16

      1

      2

      Создание списков и таблиц

      1

      2

      Практическая
      работа №3

      Материалы для
      работы

    Слайд 18

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

    Таблицы – начало таблицы. – конец таблицы. – начало заголовка таблицы. –
    – конец заголовка таблицы.
    Заголовок располагается прямо по центру относительно ширины таблицы.
    (Table Header) – начало заголовков столбцов или строк таблицы.
    – конец заголовков столбцов или строк таблицы.
    (Table Row) – начало строки таблицы.
    – конец строки таблицы.
    – начало ячейки таблицы.
    – конец ячейки таблицы.
    Пример записи и результат действия тегов с различными значениями атрибутов.

    17

    1

    2

    Создание списков и таблиц

    1

    2

    Слайд 19

    Атрибуты тега
    WIDTH=ширина таблицы в пикселах или %
    BORDER=ширина границы таблицы в пикселахАтрибуты тега WIDTH=ширина таблицы в пикселах или % BORDER=ширина границы таблицы в
    или %
    Если она равна нулю – границы становятся невидимы.
    CELLSPACING= ширина промежутков между ячейками в пикселах или %
    CELLPADDING= ширина промежутков между содержимым ячейки и её границами в пикселах или %
    Атрибуты тега
    ,
    ,

    Таблица может быть простой (пример на предыдущем слайде) или сложной, когда несколько строк или столбцов объединяются.
    ROWSPAN = количество объединяемых строк
    COLSPAN = количество объединяемых столбцов
    BGCOLOR = цвет фона заголовка, строки, ячейки
    Пример записи и результат действия тегов с различными значениями атрибутов.

    18

    1

    2

    Практическая
    работа №4

    Материалы для
    работы

    Создание списков и таблиц

    2

    1

    Слайд 20

    Бегущая строка
    – начало бегущей строки.
    – конец бегущей строки.
    Фрагмент текста, картинки

    Бегущая строка – начало бегущей строки. – конец бегущей строки. Фрагмент текста,
    или любые другие объекты между этими тегами будут двигаться так, как определят атрибуты.
    Атрибуты тега
    WIDTH = ширина области бегущей строки в пикселах или
    в % от высоты экрана
    BGCOLOR = название цвета или его код
    Определяет цвет фона бегущей строки.
    DIRECTION = LEFT
    RIGHT
    Определяет направление бегущей строки.
    Пример записи и результат действия тегов с различными значениями атрибутов.

    19

    1

    2

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

    2

    1

    Слайд 21

    n
    LOOP = INFINITE
    Определяет количество «прокруток» бегущей
    строки: при первом значении атрибута –

    n LOOP = INFINITE Определяет количество «прокруток» бегущей строки: при первом значении
    n , при
    втором значении атрибута – бесконечно (по умолчанию).
    TOP
    ALIGN = MIDDLE
    BOTTOM
    Позволяет разместить текст в верхней, средней или нижней части области бегущей строки.
    SCROLL
    BEHAVIOR = SLADE
    ALTERNATE
    Определяет режим вывода («поведения») бегущей строки: прокрутка циклическая, выход и остановка и прыжки соответственно.
    SCROLLAMOUNT = скорость перемещения текста или графики в строке [1…3000]
    HIGHT= высота бегущей строки (в пикселах или в % от высоты экрана )
    Пример записи и результат действия тегов с различными значениями атрибутов.

    20

    1

    2

    2

    1

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

    Слайд 22

    Формат тега, создающего ссылку на другой
    документ:
    активный

    Формат тега, создающего ссылку на другой документ: активный текст или изображение Если

    текст или изображение
    Если файл находится в другой папке, то нужно
    указывать путь к нему.
    Если создается ссылка на ресурс Интернета, то нужно
    указать его URL:
    активный текст или изображение
    Можно организовать сообщение по электронной почте
    активный текст или изображение
    Атрибуты тега для задания цвета ссылок
    LINK= цвет или код цвета
    Задает цвет ссылки.
    VLINK= цвет или код цвета
    Задает цвет просмотренной ссылки
    Пример записи и результат действия тегов с различными значениями атрибутов.

    21

    1

    2

    2

    Создание ссылок

    ALINK= цвет или код цвета
    Задает цвет выбранной ссылки

    Практическая
    работа №5

    Материалы для
    работы

    1

    Слайд 23

    22

    1

    2

    2

    1

    Создание ссылок

    Ссылки на метки
    Можно организовать ссылку на другую часть
    этого же документа,

    22 1 2 2 1 Создание ссылок Ссылки на метки Можно организовать
    если предварительно расставить в начале таких частей метки.
    активный текст или изображение
    Создает ссылку на метку в текущем HTML-документе:
    начало текстового фрагмента
    Можно также создать ссылку на метку в другом документе:
    активный текст или изображение
    Пример записи и результат действия тегов.

    Практическая
    работа №6

    Материалы для
    работы

    Слайд 24

    23

    Создание фреймов

    Кадры (frames) – это независимые части,
    на которые можно разбить окно

    23 Создание фреймов Кадры (frames) – это независимые части, на которые можно
    браузера, и в
    каждую часть можно загружать отдельную страницу. Эти страницы могут быть связаны между собой ссылками.
    Количество частей (кадров) и их размеры, выбор горизонтального или вертикального деления, т.е. кадровая (фреймовая) структура задается тегом:

    Он пределяет фреймовую структуру.

    Завершает определение фреймовой структуры.

    Позволяет задать, какой документ (HTML-документ, текстовый, графический и т.д.) будет загружаться в отдельный кадр.
    Пример записи и результат действия тегов.

    Использование тега исключает использование тега !

    Определяя структуру, кадры задают сверху вниз и слева направо.

    1

    1

    2

    1

    2

    Слайд 26

    25

    Создание фреймов

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

    25 Создание фреймов Фреймовую структуру можно создать также с помощью тегов для
    и тега

    Этот тег имеет такие же атрибуты, как и тег .
    Удобство состоит в том, что не надо сначала создавать в отдельном документе фреймовую структуру, а потом задавать содержимое каждого фрейма. Любая ячейка может быть объявлена фреймом, для которого можно задать имя для обновления его содержимого по ссылкам из других ячеек.
    Пример записи и результат действия тегов.

    1

    2

    1

    2

    Практическая
    работа №8

    Материалы для
    работы

    Слайд 27

    26

    Можно создавать ссылки с разных частей одного изображения, если предварительно выделить эти

    26 Можно создавать ссылки с разных частей одного изображения, если предварительно выделить
    части (области) и определить их координаты. Такое изображение называют картой (map).
    Изображения-карты часто используют для показа расположения помещений на планах и перехода по ссылке к описанию выбранного помещения.
    Тег, который позволяет определить карту:


    Между открывающим и закрывающим тегами определяются области карты при помощи тега

    Для каждой области карты должен быть создан свой элемент , который должен включать атрибут, определяющий ссылку HREF= адрес ссылки
    Атрибуты тега
    Задаётся имя изображения-карты при помощи
    атрибута NAME.
    NAME= имя

    1

    Изображение-карта

    1

    Слайд 28

    27

    Атрибуты тега
    alt= название области изображения-карты
    Это атрибут для задания текста, заменяющего

    27 Атрибуты тега alt= название области изображения-карты Это атрибут для задания текста,
    изображение-карту, не является обязательным.
    TARGET= имя фрейма
    Определяет имя фрейма для загрузки документа, на который делается ссылка с данной области.
    Атрибут, определяющий форму области на карте:
    rect
    SHAPE = poly
    сircle
    point
    COORDS =x,y,x1,y1
    Описывает координаты прямоугольника rect (значения атрибута – координаты левого верхнего угла прямоугольника и правого нижнего).
    COORDS =x,y,x1,y1… xn,yn
    Описывает координаты многоугольника poly (значения атрибута – пары координат всех вершин многоугольника).
    COORDS =x,y,r
    Описывает координаты сircle (значения атрибута – координаты центра окружности и радиус).
    COORDS =x,y
    Описывает координаты точки point (значения атрибута – её координаты).

    Изображение-карта

    Определение координат областей для
    изображения-карты.

    Слайд 29

    28

    Более простой способ получить значения координат – воспользоваться
    Он устанавливается дополнительно и

    28 Более простой способ получить значения координат – воспользоваться Он устанавливается дополнительно
    совместим со всеми версиями редактора Adobe Photoshop.

    Изображение-карта

    Определение координат областей для
    изображения-карты с помощью специального фильтра.

    специальным фильтром.

    Слайд 30

    29

    Удобно использовать изображение-карту, когда страница разделена на два фрейма.
    В одном фрейме

    29 Удобно использовать изображение-карту, когда страница разделена на два фрейма. В одном
    можно поместить изображение-карту (например, справа), а в другом фрейме (например, слева) будет отображаться описание, соответствующее выделенной в данный момент области изображения.
    Пример записи и результат действия тегов

    Изображение-карта

    Практическая
    работа №9

    Материалы для
    работы

    1

    2

    2

    1

    Слайд 31

    30

    Web-галереи можно видеть на многих сайтах, особенно на сайтах музеев, а также

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

    Создание Web-галереи.

    Web-галерея

    Практическая
    работа №10

    Материалы для
    работы

    Имя файла: Основы-HTML.pptx
    Количество просмотров: 199
    Количество скачиваний: 1
    - Предыдущая
    Сертификат социальной безответственности
    Следующая -
    Современные подходы к сопровождению процедуры аттестации педагогических работников

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

    СПП с придаточным изъяснительным
    РАННЕЕ СРЕДНЕВЕКОВЬЕ
    В мире синонимов
    Советы бармену. Встреча гостей, заказ, расчет
    Масштаб
    Память и обучение
    Initial Public Offering. Шаблон
    Пословица - мудрость народная
    В.Поленов Есть в осени первоначальной Короткая, но дивная пора – Весь день стоит как бы хрустальный. И лучезарны вечера… Ф.И.Тютчев
    План-график мероприятий по созданию и продвижению Центра прототипирования и Наноцентра полимерных композитных материалов и покр
    Презентация на тему: Антенны Выполнила: Булдакова С.Г. 271 гр.
    Российские журналы, входящие в систему «Scopus»
    ОДНКР
    моу сош № 1кафедра русского языка и литературы
    Общие сведения о воздушных линиях электропередачи
    В поисках сокровищ
    Тип Круглые черви
    Первое поколение ЭВМ
    Организация работы налоговых органов при исключении недействующих индивидуальных предпринимателей
    Мотив Великой Отечественной войны в творчестве художника С.Н. Виноградова
    Поэтапное рисование зимнего пейзажа
    Поговорим о сложном
    Автоматизированная поддержка пользовательской документацииWeb-приложений, разрабатываемых в среде WebRatio
    Правописание не с глаголами 3 класс
    Действия работников при пожарах
    הבנק - הקנית אוצר מילים מטרה 26
    Ранцы и рюкзаки ТМ Berlingo 2018
    Управление поставками оборудования. Задачи транспортной логистики. Компоненты системы eSales
    LiveInternet
    Обратная связь
    Для правообладателей
    Email: Нажмите что бы посмотреть