kopilkaurokov.ru - сайт для учителей

Создайте Ваш сайт учителя Курсы ПК и ППК Видеоуроки Олимпиады Вебинары для учителей

  1. Главная
  2. Информатика
  3. Презентации
  4. Язык разметки гипертекста HTML

Язык разметки гипертекста HTML

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

                                   Язык разметки гипертекста HTML

Вы уже знаете о суперспособностях современного учителя?
Тратить минимум сил на подготовку и проведение уроков.
Быстро и объективно проверять знания учащихся.
Сделать изучение нового материала максимально понятным.
Избавить себя от подбора заданий и их проверки после уроков.
Наладить дисциплину на своих уроках.
Получить возможность работать творчески.

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

ГПОУ «Ленинск-Кузнецкий политехнический техникум» Информатика Язык разметки гипертекста HTML Преподаватель Щеглова Алена Александровна Теоретическое занятие для студентов I курса Ленинск-Кузнецкий, 2024

ГПОУ «Ленинск-Кузнецкий политехнический техникум»

Информатика

Язык разметки гипертекста HTML

Преподаватель Щеглова Алена Александровна

Теоретическое занятие

для студентов I курса

Ленинск-Кузнецкий, 2024

Язык разметки гипертекста HTML HTML – стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере. Гипертекст – текст, связанный с другим текстом при помощи гиперссылок. Гипертекстовые документы открываются в браузере.

Язык разметки гипертекста HTML

HTML – стандартизированный язык гипертекстовой разметки документов для просмотра веб-страниц в браузере.

Гипертекст – текст, связанный с другим текстом при помощи гиперссылок.

Гипертекстовые документы открываются в браузере.

Тег Основным элементом HTML является тег. Тег – это определенный текст, заключенный в угловые скобки. Большинство тегов парные, они имеют открывающий и закрывающий тег. Закрывающий тег отличается от открывающего добавлением слеша перед текстом. Например: ... Теги могут иметь атрибуты, которым присваиваются значения. Теги могут быть вложенными друг в друга. Например: ...

Тег

Основным элементом HTML является тег.

Тег – это определенный текст, заключенный в угловые скобки.

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

Например: ...

Теги могут иметь атрибуты, которым присваиваются значения.

Теги могут быть вложенными друг в друга.

Например: ...

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

Базовые теги

Веб-страница состоит из базового набора тегов:

 – тег, указывает на то, что это HTML код.

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

 – заголовок – тег, который содержит заголовок HTML-документа, который отображается во вкладке браузера.

– тело – основное содержимое документа, которое видит пользователь.

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

Все HTML-теги должны быть внутри корневого элемента веб-страницы.

Пример стихотворение Как часто, в жизни ошибаясь, теряем тех, кем дорожим. Чужим понравиться стараясь, порой от ближнего бежим. Возносим тех, кто нас не стоит, а самых верных предаем. Кто нас так любит, обижаем, и сами извинений ждем. Омар Хайям Голова, заголовок Тело Результат

Пример

стихотворение

Как часто, в жизни ошибаясь, теряем тех, кем дорожим.

Чужим понравиться стараясь, порой от ближнего бежим.

Возносим тех, кто нас не стоит, а самых верных предаем.

Кто нас так любит, обижаем, и сами извинений ждем.

Омар Хайям

Голова, заголовок

Тело

Результат

Форматирование текста Тег –  параграф, который содержит одно или несколько предложений. Тег имеет необязательный параметр align (выравнивание текста), который может принимать значения: left – выравнивание по левому краю; center – выравнивание по центру; right – выравнивание по правому краю; justify – выравнивание по ширине страницы. Например: центр по правому краю по левому краю Результат

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

Тег

–  параграф, который содержит одно или несколько предложений.

Тег

имеет необязательный параметр align (выравнивание текста), который может принимать значения:

  • left – выравнивание по левому краю;
  • center – выравнивание по центру;
  • right – выравнивание по правому краю;
  • justify – выравнивание по ширине страницы.

Например:

центр

по правому краю

по левому краю

Результат

Форматирование текста Перенос строк - тег . Например: стихотворение Как часто, в жизни ошибаясь, теряем тех, кем дорожим. Чужим понравиться стараясь, порой от ближнего бежим. Возносим тех, кто нас не стоит, а самых верных предаем. Кто нас так любит, обижаем, и сами извинений ждем. Омар Хайям Результат

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

Перенос строк - тег
. Например:

стихотворение

Как часто, в жизни ошибаясь, теряем тех, кем дорожим.


Чужим понравиться стараясь, порой от ближнего бежим.


Возносим тех, кто нас не стоит, а самых верных предаем.


Кто нас так любит, обижаем, и сами извинений ждем.


Омар Хайям

Результат

Форматирование текста , , , , , – теги заголовков, имеющих шесть уровней. Например: Как часто, в жизни ошибаясь, теряем тех, кем дорожим. Чужим понравиться стараясь, порой от ближнего бежим. Возносим тех, кто нас не стоит, а самых верных предаем. Кто нас так любит, обижаем, и сами извинений ждем. Омар Хайям Результат

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

,

,

,

,

, – теги заголовков, имеющих шесть уровней. Например:

Как часто, в жизни ошибаясь, теряем тех, кем дорожим.


Чужим понравиться стараясь, порой от ближнего бежим.


Возносим тех, кто нас не стоит, а самых верных предаем.


Кто нас так любит, обижаем, и сами извинений ждем.


Омар Хайям

Результат

Форматирование текста Тег используется для разделения текста документа горизонтальной линией. Например: Как часто, в жизни ошибаясь, теряем тех, кем дорожим. Чужим понравиться, стараясь, порой от ближнего бежим. Возносим тех, кто нас не стоит, а самых верных предаем. Кто нас так любит, обижаем, и сами извинений ждем. Омар Хайям Результат

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

Тег используется для разделения текста документа горизонтальной линией. Например:

Как часто, в жизни ошибаясь, теряем тех, кем дорожим.


Чужим понравиться, стараясь, порой от ближнего бежим.


Возносим тех, кто нас не стоит, а самых верных предаем.


Кто нас так любит, обижаем, и сами извинений ждем.


Омар Хайям

Результат

Форматирование текста Тег имеет необязательные параметры. Параметры Описание align = “способ выравнивания” способ выравнивания color = “указать цвет” цвет size = “число” толщина линии

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

Тег имеет необязательные параметры.

Параметры

Описание

align = “способ выравнивания”

способ выравнивания

color = “указать цвет”

цвет

size = “число”

толщина линии

Форматирование текста Тег позволяет выделить текст полужирным начер-танием шрифта. Тег позволяет выделить текст курсивом. Тег позволяет вывести подчеркнутый текст.

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

Тег позволяет выделить текст полужирным начер-танием шрифта.

Тег позволяет выделить текст курсивом.

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

Форматирование текста Как часто, в жизни ошибаясь, теряем тех, кем дорожим. Чужим понравиться стараясь, порой от ближнего бежим. Возносим тех, кто нас не стоит, а самых верных предаем. Кто нас так любит, обижаем, и сами извинений ждем. Омар Хайям Результат

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

Как часто, в жизни ошибаясь, теряем тех, кем дорожим.


Чужим понравиться стараясь, порой от ближнего бежим.


Возносим тех, кто нас не стоит, а самых верных предаем.


Кто нас так любит, обижаем, и сами извинений ждем.


Омар Хайям

Результат

Форматирование текста Тег позволяет зачеркнуть текст. Например: стихотворение

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

Тег позволяет зачеркнуть текст.

Например:

стихотворение

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

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

x 2


x 2

Форматирование текста Тег используется для того, чтобы настроить параметры шрифта. Параметры Описание font = “шрифт” шрифт color = “указать цвет” цвет size = “число” толщина линии

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

Тег используется для того, чтобы настроить параметры шрифта.

Параметры

Описание

font = “шрифт”

шрифт

color = “указать цвет”

цвет

size = “число”

толщина линии

Форматирование текста Как часто, в жизни ошибаясь, теряем тех, кем дорожим. Чужим понравиться стараясь, порой от ближнего бежим. Возносим тех, кто нас не стоит, а самых верных предаем. Кто нас так любит, обижаем, и сами извинений ждем. Омар Хайям Результат

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


Как часто, в жизни ошибаясь, теряем тех, кем дорожим.


Чужим понравиться стараясь, порой от ближнего бежим.


Возносим тех, кто нас не стоит, а самых верных предаем.


Кто нас так любит, обижаем, и сами извинений ждем.


Омар Хайям

Результат

Изображение Тег используется для того, чтобы добавить изображение. Параметры Описание align=

Изображение

Тег используется для того, чтобы добавить изображение.

Параметры

Описание

align= "bottom | left | middle | right | top"

способ выравнивания изображения в документе

border="толщина рамки"

толщина рамки вокруг изображения, чтобы убрать рамку нужно поставить значение 0

height="высота"

высота рисунка при отображении

src="URL | имя_файла"

адрес загружаемого рисунка

width="значение"

ширина рисунка при отображении

Изображение Как часто, в жизни ошибаясь, теряем тех, кем дорожим. Чужим понравиться стараясь, порой от ближнего бежим. Возносим тех, кто нас не стоит, а самых верных предаем. Кто нас так любит, обижаем, и сами извинений ждем. Омар Хайям Результат

Изображение


Как часто, в жизни ошибаясь, теряем тех, кем дорожим.


Чужим понравиться стараясь, порой от ближнего бежим.


Возносим тех, кто нас не стоит, а самых верных предаем.


Кто нас так любит, обижаем, и сами извинений ждем.


Омар Хайям

Результат

Ссылки Тег позволяет создать ссылку, имеет параметр href=

Ссылки

Тег позволяет создать ссылку, имеет параметр href="URL-адрес", определяющий URL-адрес страницы перенаправления. Например:

ссылка на биографию поэта

Списки Тег применяется для создания маркированного списка, внутри тега должен быть записан тег , который четко структурирует элементы списка, образуя из них вид списка в окне браузера. Тег имеет необязательный параметр type, позволяю-щий задавать тип маркеров перед элементами списка. По умолчанию, в качестве маркеров используются закрашенные кружки. Для изменения маркера по умолчанию, необходимо задать параметр type одним из следующих значений: disk – закрашенные кружки; circle – не закрашенные кружки; square – закрашенные квадратики. Для создания нумерованного списка используется тег , внутри которого располагаются элементы, заданные тегом .

Списки

Тег

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

      Тег

        имеет необязательный параметр type, позволяю-щий задавать тип маркеров перед элементами списка. По умолчанию, в качестве маркеров используются закрашенные кружки. Для изменения маркера по умолчанию, необходимо задать параметр type одним из следующих значений:

        • disk – закрашенные кружки;
        • circle – не закрашенные кружки;
        • square – закрашенные квадратики.

        Для создания нумерованного списка используется тег

          , внутри которого располагаются элементы, заданные тегом
        1. .

          Маркированный список Блюда из мяса и субпродуктов Блюда из мяса: отварные и притушенные жареные тушеные Блюда из субпродуктов: отварные жареные тушеные

          Маркированный список

          Блюда из мяса и субпродуктов

        2. Блюда из мяса:

          • отварные и притушенные

          • жареные

          • тушеные

        3. Блюда из субпродуктов:

          • отварные

          • жареные

          • тушеные

      Нумерованный список Блюда из мяса: отварные и притушенные жареные тушеные

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

      Блюда из мяса:

      1. отварные и притушенные

      2. жареные

      3. тушеные

      Таблицы Создание таблицы начинается с тега , который может использоваться с необязательным параметром border=”толщина рамки вокруг таблицы”. За тегом следует тег , описывающий строку таблицы. Внутри тега располагается либо тег , описывающий ячейку-заголовок таблицы, либо тег , описывающий ячейку с данными таблицы. Тег или разбивают строку таблицы на ячейки. Если нужно создать две ячейки в строке, то внутри тега должно быть два тега или . Число строк в таблице определяется количеством тегов внутри таблицы. По умолчанию каждая строка таблицы должна содержать одинаковое число ячеек.

      Таблицы

      Создание таблицы начинается с тега

      , который может использоваться с необязательным параметром border=”толщина рамки вокруг таблицы”.

      За тегом

      следует тег , описывающий строку таблицы.

      Внутри тега

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

      Тег

      		или разбивают строку таблицы на ячейки.

      Если нужно создать две ячейки в строке, то внутри тега должно быть два тега

      		или .

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

      По умолчанию каждая строка таблицы должна содержать одинаковое число ячеек.

      Таблицы Ф.И.О. Информатика Математика Физика Химия Добавить еще две строки по образцу. Иванов И.И. 4 5 5 4 Результат

      Таблицы

      Добавить еще две строки по образцу.

      Ф.И.О. Информатика Математика Физика Химия
      Иванов И.И. 4 5 5 4

      Результат


      Получите в подарок сайт учителя

      Творческие задания в Sсratch 5-6 классы

      Видеоуроки по информатике 6 класс (к...

      Информатика 5 класс ФГОС

      Электронная тетрадь по информатике 5...

      Электронная тетрадь по информатике 7...

      Информатика 7 класс ФГОС

      Основы алгоритмизации и...

      Электронная тетрадь по информатике 9...

      Предмет: Информатика

      Категория: Презентации

      Целевая аудитория: Прочее

      Скачать
      Язык разметки гипертекста HTML

      Автор: Щеглова Алена Александровна

      Дата: 13.08.2024

      Номер свидетельства: 654865

      Похожие файлы

      object(ArrayObject)#863 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(83) "Основы языка разметки гипертекста HTML. Списки."
    ["seo_title"] => string(46) "osnovy_iazyka_razmetki_giperteksta_html_spiski"
    ["file_id"] => string(6) "529959"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1575364182"
  }
}

      object(ArrayObject)#885 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(241) "Разработка урока по информатике на тему: Разработка Web-сайтов с использованием языка разметки гипертекста HTML. Web-страницы и Web-сайты."
    ["seo_title"] => string(80) "razrabotka_uroka_po_informatikie_na_tiemu_razrabotka_web_saitov_s_ispol_zovaniie"
    ["file_id"] => string(6) "410600"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1492698807"
  }
}

      object(ArrayObject)#863 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(109) "Программа элективного курса "Язык разметки гипертекста HTML" "
    ["seo_title"] => string(66) "proghramma-eliektivnogho-kursa-iazyk-razmietki-ghipiertieksta-html"
    ["file_id"] => string(6) "118169"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1413050673"
  }
}

      object(ArrayObject)#885 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(164) "Разработка урока по информатике в 10 классе по теме "Основы языка разметки гипертекста HTML" "
    ["seo_title"] => string(99) "razrabotka-uroka-po-informatikie-v-10-klassie-po-tiemie-osnovy-iazyka-razmietki-ghipiertieksta-html"
    ["file_id"] => string(6) "157084"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(5) "uroki"
    ["date"] => string(10) "1421524398"
  }
}

      object(ArrayObject)#863 (1) {
  ["storage":"ArrayObject":private] => array(6) {
    ["title"] => string(127) "Разработка Web - сайтов с использованием языка разметки гипертекста HTML"
    ["seo_title"] => string(67) "razrabotkawebsaitovsispolzovaniiemiazykarazmietkighipiertiekstahtml"
    ["file_id"] => string(6) "302194"
    ["category_seo"] => string(11) "informatika"
    ["subcategory_seo"] => string(11) "presentacii"
    ["date"] => string(10) "1457087707"
  }
}

      Полезное для учителя




      Распродажа видеоуроков!
      1480 руб.
      2110 руб.
      1580 руб.
      2260 руб.
      1550 руб.
      2220 руб.
      Смотреть все комплекты
      Курсы ПК и ППК для учителей!
      Смотреть все курсы
      ПОЛУЧИТЕ СВИДЕТЕЛЬСТВО МГНОВЕННО

      Добавить свою работу

      * Свидетельство о публикации выдается БЕСПЛАТНО, СРАЗУ же после добавления Вами Вашей работы на сайт

      Удобный поиск материалов для учителей

      Ваш личный кабинет

      Восстановить пароль
      Регистрация
      Проверка свидетельства