Основы 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 Служебная информация информация об имени страницы основная часть документа Структура HTML-документа

3



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


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


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

Слайд 5

4 – начинает блок служебной информации. – завершает блок служебной информации.

4

– начинает блок служебной информации.
– завершает блок служебной информации.
</div></h2><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

8

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


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

1

2

2

1

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

Слайд 10

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

9

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

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

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

1

2

2

1

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

Слайд 11

10 Линии Создает горизонтальные линии. Атрибуты тега SIZE =толщина линии в

10

Линии


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

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

ширина линии в пикселах или 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 Вставка графических изображений вставка картинки из файла. Атрибуты тега SRC=

12

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

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

из файла.
Атрибуты тега
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 вида списков: ненумерованные (маркированные) и нумерованные. Ненумерованные

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

    (Unordered List) –

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

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

      1

      2

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

      1

      2

    • Слайд 17

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

    Нумерованные списки:
      (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

    - Предыдущая
    Создание стикерпака для мессенджера Telegram
    Следующая -
    Связь времён

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

    Расчет узла доступа и узла агрегации для технологии PON. Фиксированные сети широкополосного доступа
    Редактирование текста. Работа с фрагментами
    Привлечение аудитории в Instagram
    Операционная система MD_DOS Создание каталогов и файлов
    Операторные скобки Сложные условия
    Использование базы данных в приложениях Tizen
    Презентация на тему Как устроена сеть Интернет
    Система управления базами данных. Моделирование и формализация
    Презентация на тему POWER POINT «ЧАСЫ»
    Как устроен компьютер
    Объекты в JavaScript. (Лекция 8)
    Курсовая работа по информатике. Создание UserForm Калькулятор
    Алгоритм и его формальное исполнение _
    Обработка цифровых изображений Digital Image Processing
    Представление информации
    Corel Draw. Работа с компьютерной графикой
    Кодирование информации. 5 класс
    DDE (Dynamic Data Exchange, Динамический обмен данными) OLE (Object Linking and Embedding, Встраивание и Связывание Объектов)
    Презентация "Алгоритмы и исполнители 6 класс" - скачать презентации по Информатике
    Информационно-аналитические технологии государственного и муниципального управления 2
    Надежность цифровых систем и каналов передачи информации
    Компьютерная графика
    Базовый курс банни-хоппинга
    Информационные процессы. Хранение и передача информации. 7 класс
    Умножение. Основные алгоритмы
    Информационная архитектура. Пользовательский интерфейс
    Редактор формул Microsoft Equation 3.0
    Презентация "Двумерные массивы" - скачать презентации по Информатике
    Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
    Обратная связь
    Для правообладателей
    Email: Нажмите что бы посмотреть