СДЕЛАЙТЕ СВОИ УРОКИ ЕЩЁ ЭФФЕКТИВНЕЕ, А ЖИЗНЬ СВОБОДНЕЕ

Благодаря готовым учебным материалам для работы в классе и дистанционно

Скидки до 50 % на комплекты
только до 17.07.2025

Готовые ключевые этапы урока всегда будут у вас под рукой

Организационный момент

Проверка знаний

Объяснение материала

Закрепление изученного

Итоги урока

Основы языка HTML

Категория: Информатика

Нажмите, чтобы узнать подробности

В данной презентации "Основы языка HTML" Вы можете найти понятия HTML-документов, тегов и атрибутов. Также как создаются HTML-документы, списки и таблицы HTML-документах. Рассмотреть примеры. 

Просмотр содержимого документа
«Основы языка HTML»

Основы языка HTML: тэги, атрибуты тэгов, списки, таблицы МОУ «Ропшинская школа» Хирьянова В.А.

Основы языка HTML: тэги, атрибуты тэгов, списки, таблицы

МОУ «Ропшинская школа»

Хирьянова В.А.

HTML-документ HTML-документ – это обычный текстовый документ, содержащий  специальные разметочные указатели (тэги). HTML-файл имеет расширение  .htm или .html

HTML-документ

  • HTML-документ – это обычный текстовый документ, содержащий специальные разметочные указатели (тэги).
  • HTML-файл имеет расширение .htm или .html
Теги Тэг –  инструкция браузеру, указывающая способ отображения текста.

Теги

  • Тэг – инструкция браузеру, указывающая способ отображения текста.
ПРАВИЛА ЗАПИСИ ТЭГОВ   Тэг всегда начинается со знака «меньше» ()   Например:

ПРАВИЛА ЗАПИСИ ТЭГОВ

  • Тэг всегда начинается со знака «меньше» () Например:
Виды тегов Одиночный 2. Парный (контейнер)  открывающий   закрывающий

Виды тегов

  • Одиночный 2. Парный (контейнер)

открывающий

закрывающий

СТРУКТУРНЫЕ ТЭГИ Всё содержимое файла Интернет-страницы заключается в контейнер …, указывающий браузеру, что данный текст представляет собой HTML-документ и, возможно содержит в себе тэги, которые браузер должен выявить, распознать, интерпретировать.

СТРУКТУРНЫЕ ТЭГИ

  • Всё содержимое файла Интернет-страницы заключается в контейнер …, указывающий браузеру, что данный текст представляет собой HTML-документ и, возможно содержит в себе тэги, которые браузер должен выявить, распознать, интерпретировать.
СТРУКТУРНЫЕ ТЭГИ  начало контейнера HTML-документа   начало контейнера заголовка    начало контейнера строки – названия страницы   … строка названия страницы    конец контейнера строки – названия страницы   конец контейнера заголовка   начало контейнера тела страницы  … тело (всё содержимое) страницы   конец контейнера тела страницы  конец контейнера HTML-документа

СТРУКТУРНЫЕ ТЭГИ

начало контейнера HTML-документа

начало контейнера заголовка

начало контейнера строки – названия страницы

строка названия страницы

конец контейнера строки – названия страницы

конец контейнера заголовка

начало контейнера тела страницы

тело (всё содержимое) страницы

конец контейнера тела страницы

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

Рассмотрим пример

Рассмотрим пример

Списки в HTML-документах

Списки в HTML-документах

Списки в HTML-документах могут быть следующих видов: Неупорядоченные (маркированные) списки Упорядоченные (нумерованный) списки Многоуровневые списки

Списки в HTML-документах могут быть следующих видов:

  • Неупорядоченные (маркированные) списки
  • Упорядоченные (нумерованный) списки
  • Многоуровневые списки
Неупорядоченные (маркированные) списки   Необходим следующий HTML-код:    Первый элемент   Второй элемент   Третий элемент   Например, для того чтобы создать вот такой список: Первый элемент Второй элемент Третий элемент Текст нужно расположить между тэгами  и . А каждый новы элемент начинается с метки

Неупорядоченные (маркированные) списки

Необходим следующий HTML-код:

  • Первый элемент

  • Второй элемент

  • Третий элемент

Например, для того чтобы создать вот такой список:

  • Первый элемент
  • Второй элемент
  • Третий элемент

Текст нужно расположить между тэгами

    и
.

А каждый новы элемент начинается с метки

  • Атрибуты тэга  TYPE определяет вид маркера. Может иметь значения: disk - закрашенный кружок square – закрашенный квадратик circle – не закрашенный кружок По умолчанию используется type=‘’disc’’ Пример написания:

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

      TYPE определяет вид маркера. Может иметь значения:

      disk - закрашенный кружок

      square – закрашенный квадратик

      circle – не закрашенный кружок

      По умолчанию используется type=‘’disc’’

      Пример написания:

        Упорядоченные (нумерованный) списки   Текст нужно расположить между тэгами  и . Необходим следующий HTML-код: Например, для того чтобы создать вот такой список:  Первый элемент Второй элемент Третий элемент   Первый элемент   Второй элемент   Третий элемент

        Упорядоченные (нумерованный) списки

        Текст нужно расположить между тэгами и .

        Необходим следующий HTML-код:

        Например, для того чтобы создать вот такой список:

          • Первый элемент
          • Второй элемент
          • Третий элемент

        1. Первый элемент

        2. Второй элемент

        3. Третий элемент

        Атрибуты тэга  TYPE определяет стиль нумерации пунктов. Может иметь значения:   А – Нумерация заглавными латинскими буквами  а - Нумерация маленькими латинскими буквами  I – нумерация большими римскими цифрами  i- нумерация маленькими римскими цифрами  1 - нумерация арабскими цифрами START определяет первое число, с которого начинается нумерация пунктов (используйте только целые числа) По умолчанию используется type=‘’1’’, start =‘’1’’. Пример написания:

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

          TYPE определяет стиль нумерации пунктов. Может иметь значения:

          А – Нумерация заглавными латинскими буквами

          а - Нумерация маленькими латинскими буквами

          I – нумерация большими римскими цифрами

          i- нумерация маленькими римскими цифрами

          1 - нумерация арабскими цифрами

          START определяет первое число, с которого начинается нумерация пунктов (используйте только целые числа)

          По умолчанию используется type=‘’1’’, start =‘’1’’.

          Пример написания:

            Многоуровневые списки рассмотрите самостоятельно!!!

            Многоуровневые списки рассмотрите самостоятельно!!!

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

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

            Границы таблицы  Таблица начинается с тега  и заканчивается тегом

            Границы таблицы

            • Таблица начинается с тега и заканчивается тегом
            Атрибуты тега   задает толщину рамки таблицы  устанавливает выравнивание ячеек в таблице, принимает значения: left, center, right.  задает расстояние между ячейками  задает расстояние между содержимым ячейки и ее рамкой  устанавливает ширину таблицы в пикселях или процентах от ширины документа  устанавливает высоту таблицы в пикселях или процентах от ширины документа

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

            задает толщину рамки таблицы
          1. устанавливает выравнивание ячеек в таблице, принимает значения: left, center, right.
          2. задает расстояние между ячейками
          3. задает расстояние между содержимым ячейки и ее рамкой
          4. устанавливает ширину таблицы в пикселях или процентах от ширины документа
          5. устанавливает высоту таблицы в пикселях или процентах от ширины документа
            Строки таблицы Каждая строка таблицы начинается с тега  и заканчивается тэгом

            Строки таблицы

            • Каждая строка таблицы начинается с тега
            и заканчивается тэгом
            Атрибуты тега   устанавливает выравнивание ячеек в таблице, принимает значения: left, center, right.  устанавливает вертикальное выравнивание ячеек в таблице, принимает значения: top, middle, bottom.

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

            устанавливает выравнивание ячеек в таблице, принимает значения: left, center, right.
          6. устанавливает вертикальное выравнивание ячеек в таблице, принимает значения: top, middle, bottom.
            Ячейки таблицы Каждая ячейка таблицы начинается с тега  и заканчивается тегом

            Ячейки таблицы

            • Каждая ячейка таблицы начинается с тега
            Атрибуты тега   устанавливает выравнивание ячеек в таблице, принимает значения: left, center, right.  устанавливает вертикальное выравнивание ячеек в таблице, принимает значения: top, middle, bottom.  устанавливает ширину ячейки  устанавливает высоту ячейки  Указывает количество столбцов, которое объединено в одной ячейке (По умолчанию = 1)  Указывает количество строк, которое объединено в одной ячейке (По умолчанию = 1)  Не позволяет программе просмотра делать перевод строки в ячейке таблицы

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

            и заканчивается тегом

            устанавливает выравнивание ячеек в таблице, принимает значения: left, center, right.
          7. устанавливает вертикальное выравнивание ячеек в таблице, принимает значения: top, middle, bottom.
          8. устанавливает ширину ячейки
          9. устанавливает высоту ячейки
          10. Указывает количество столбцов, которое объединено в одной ячейке (По умолчанию = 1)
          11. Указывает количество строк, которое объединено в одной ячейке (По умолчанию = 1)
          12. Не позволяет программе просмотра делать перевод строки в ячейке таблицы

            Рассмотрим пример

            Рассмотрим пример


            Скачать

            Рекомендуем курсы ПК и ППК для учителей

            Вебинар для учителей

            Свидетельство об участии БЕСПЛАТНО!