Добавить материал

и получить 10 документов
и свидетельство СМИ

Изображение пользователя Акатова Галина Сергеевна Акатова Галина Сергеевна

презентация к занятию по теме "Основы языка HTML"

  • Презентации учебные
  • ppt
  • 13.07.2020
Публикация в СМИ для учителей

Публикация в СМИ для учителей

Бесплатное участие. Свидетельство СМИ сразу.
Мгновенные 10 документов в портфолио.

Добавить материал
Иконка файла материала Информационные технологии_лекция_Основы языка HTML.ppt
ОСНОВЫ ЯЗЫКА HTML Акатова Галина

ОСНОВЫ ЯЗЫКА HTML

Акатова Галина Сергеевна, преподаватель г(о)б поу «Задонский политехнический техникум»
Основные понятия HTML расшифровывается

Основные понятия

HTML расшифровывается HyperText Markup Language (в переводе означает Язык Разметки ГиперТекста).
HTML предназначен для создания Web-страниц во всемирной паутине. язык, предназначенный для создания форматированного текста, который насыщен изображениями, звуком, анимацией и ссылками на другие объекты, например, гипертекстовые документы, графические файлы и т.д.,

Основные понятия Тег (Tag) - это метка, которая используются для указания браузеру, как он должен показывать web-сайт

Основные понятия

Тег (Tag) - это метка, которая используются для указания браузеру, как он должен показывать web-сайт.
Большая часть HTML тегов состоит из двух частей:
открывающий тег <...> 
 закрывающий тег 
Теги не чувствительны к регистру

Тег состоит из следующих элементов: левой угловой скобки < необязательного слэша /, который означает, что тег является конечным тегом, закрывающим некоторую структуру имени тега необязательных…

Тег состоит из следующих элементов:

левой угловой скобки <
необязательного слэша /, который означает, что тег является конечным тегом, закрывающим некоторую структуру
имени тега
необязательных атрибутов
правой угловой скобки >

ОСНОВЫ ЯЗЫКА HTML

Структура HTML документа. Абсолютно любой документ, построенный на базе

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

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


Спецификация атрибута имя атрибута, например

Спецификация атрибута

имя атрибута, например WIDTH;
знак равенства =;
значение атрибута, которое задается строкой символов, например, "80".

ОСНОВЫ ЯЗЫКА HTML

Парный тег имеет открывающий тег закрывающий тег с тем же именем

Парный тег

имеет открывающий тег
закрывающий тег с тем же именем
В таких случаях два тега и часть документа, отделенная ими, образуют блок, называемый HTML элементом

ОСНОВЫ ЯЗЫКА HTML

Название, оглавление страницы, предназначен для поисковых машин, этот тег всегда помещается внутри - … -

</strong>- Название, оглавление страницы, предназначен для поисковых машин, этот  тег всегда помещается внутри - <head><title>…
- В этот тег помещается информация, которая должна отображаться в окне браузера.  …

Пример: Это моя первая страница

Пример:

    Это моя первая страница    Привет, мир!

ОБЩИЙ ВИД ДОКУМЕНТА HTML ОСНОВЫ

ОБЩИЙ ВИД ДОКУМЕНТА HTML

ОСНОВЫ ЯЗЫКА HTML

Чтобы расширить возможности отдельных тегов и более гибко управлять их содержимым применяются атрибуты тегов

Чтобы расширить возможности отдельных тегов и более гибко управлять их содержимым применяются атрибуты тегов.
Атрибуты тега тела документа
 - Цвет фона документа, используя значение цвета в виде RRGGBB.
- Цвет текста документа

Определяет величину заголовка по их степени важности

.....
- Определяет величину заголовка по их степени важности. 

.....

 - Самый большой заголовок. 
.....
- Самый маленький заголовок.
….. - Определяет текст жирным шрифтом.  …..- Определяет текст наклонным (курсив) шрифтом.  …..- Имитирует стиль печатной машинки.  ….. - Задаёт цвет текста, шестнадцатеричном коде. …..- Задаёт величину шрифта в пределах от “1” до “7”. 
…..- Увеличивает размер текст на условную 1-цу от заданного.  …..- Этот тег, браузер определяет как жирное начертание текста. 
…..- Этот тег, браузер определяет как наклонное (курсив) начертании текста. 

Атрибуты текст документа

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

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

…..

- Определяет новый параграф текста с предварительным пропуском одной строки.  < P ALIGN=”…”> - Выравнивает текст относительно одной из сторон документа. Значения: “left”, “right”, “justify, “ center”.  Пример: текст

Текст по центру.

СОЗДАНИЕ СПИСКОВ ОСНОВЫ ЯЗЫКА HTML

СОЗДАНИЕ СПИСКОВ

ОСНОВЫ ЯЗЫКА HTML

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



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


  1. Первый
  2. Второй
  3. ...



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

  • Первый
  • Второй
  • ...

ОСНОВЫ ЯЗЫКА HTML

Список определений Первый термин


Список определений


Первый термин
Первое определение
Второй термин
Второе определение

ОСНОВЫ ЯЗЫКА HTML

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

    - Определяет нумерованный список. 
  1. - Объекту, заключённому в этот тег присваивается номер.  Также применяется атребут:  start - Указывает стартовый номер.  type - Определяет характер обозначение, буквенный “Ж”, ”ж”, “J”, ”j” или цифровой – “10”, “Х”.
    ...



Пример: 

Результат:

 

  • морковь 
  • капуста 
  • яблоки 
  • уксус 
  • сахар 
  • соль 

    • 3. морковь
    4. капуста
    5. яблоки
    6. уксус
    7. сахар
    8. соль

    Графические элементы на странице

    Графические элементы на странице

              Вставляет изображение на страницу.
     Форматирует положение изображения в документе. Может иметь значения: left, right, center; bottom, top, middle.
    Устанавливает толщину рамки вокруг изображения
    Устанавливает поля сверху и снизу
    Устанавливает поля слева и справа.

    - Добавляет горизонтальную линию.
     
         Указывает ширину линии в пикселах или процентах.
    Линия без тени. 
     Определяет цвет линии.

    Создание таблиц Тег создающий таблицу

    Создание таблиц

     

      Тег создающий таблицу.
    Задает строку в таблице. 
    Задает отдельную ячейку в таблице.
    Задает заголовок таблицы (обычная ячейка с форматированием по центру и полужирным текстом)

    РАБОТА С ТАБЛИЦАМИ ОСНОВЫ ЯЗЫКА

    РАБОТА С ТАБЛИЦАМИ

    ОСНОВЫ ЯЗЫКА HTML

    Атрибуты таблицы Определяет толщину рамки

    Атрибуты таблицы

     

            Определяет толщину рамки.
     Определяет расстояние между ячейками
    Устанавливает ширину таблицы. (Значение параметра может быть в пикселях или процентах)
    Устанавливает высоту таблицы. (Значение параметра может быть в пикселях или процентах)
    Указывает количество столбцов, объединенных в одной ячейке.
    		 Указывает количество строк, объединенных в одной ячейке. 
    		 Задает ширину ячейки таблицы в пикселях или процентах.
    		Задает высоту ячейки таблицы в пикселях или процентах.

    Это заглавие Здесь титул Это тело страницы



    Это заглавие
    Здесь титул


    Это тело страницы


    ОСНОВЫ ЯЗЫКА HTML

    РАЗБИЕНИЕ ТЕКСТА НА СТРОКИ И АБЗАЦЫ

    РАЗБИЕНИЕ ТЕКСТА НА СТРОКИ И АБЗАЦЫ

    ОСНОВЫ ЯЗЫКА HTML

    Это заглавие Здесь титул Это тело страницы



    Это заглавие
    Здесь титул




    Это тело страницы



    Предварительно
    отформатированный
    текст



    ОСНОВЫ ЯЗЫКА HTML

    ЗАГОЛОВКИ ОСНОВЫ ЯЗЫКА HTML

    ЗАГОЛОВКИ

    ОСНОВЫ ЯЗЫКА HTML

    Заголовок Это тело страницы Предварительно отформатированный текст




    Заголовок


    Это тело страницы


    Предварительно
    отформатированный
    текст


    ОСНОВЫ ЯЗЫКА HTML

    ВЫРАВНИВАНИЕ ТЕКСТА ОСНОВЫ ЯЗЫКА

    ВЫРАВНИВАНИЕ ТЕКСТА

    ОСНОВЫ ЯЗЫКА HTML

    Влево По центру ОСНОВЫ ЯЗЫКА HTML





    Влево




    По центру

    ОСНОВЫ ЯЗЫКА HTML

    ФОРМАТИРОВАНИЕ ШРИФТОВ ОСНОВЫ ЯЗЫКА

    ФОРМАТИРОВАНИЕ ШРИФТОВ

    ОСНОВЫ ЯЗЫКА HTML

    Пример работы с текстом Пишущая машинка




    Пример работы с текстом



    Пишущая машинка



    Что-то Верхний индекс


    Что-то Нижний индекс

    ОСНОВЫ ЯЗЫКА HTML

    РАЗМЕР ШРИФТА ОСНОВЫ ЯЗЫКА HTML

    РАЗМЕР ШРИФТА

    ОСНОВЫ ЯЗЫКА HTML

    ГАРНИТУРА И ЦВЕТ ШРИФТА ОСНОВЫ

    ГАРНИТУРА И ЦВЕТ ШРИФТА

    ОСНОВЫ ЯЗЫКА HTML

    Жёлтый текст на синем фоне ОСНОВЫ




    Жёлтый текст на синем фоне

    ОСНОВЫ ЯЗЫКА HTML

    Синиий Arial ОСНОВЫ ЯЗЫКА HTML





    Синиий Arial

    ОСНОВЫ ЯЗЫКА HTML

    Работа с цветом “#RRGGBB”, где

    Работа с цветом

    “#RRGGBB”, где RR, GG, BB соответственно интенсивность красного, зеленого или синего цветов. Интенсивность задается в виде двузначного шестнадцатеричного числа (от 00 до FF).
    атрибут COLOR=”НАЗВАНИЕ ЦВЕТА”

    ОСНОВЫ ЯЗЫКА HTML

    Стандартные цвета ОСНОВЫ ЯЗЫКА

    Стандартные цвета

    ОСНОВЫ ЯЗЫКА HTML

    Стандартные цвета ОСНОВЫ ЯЗЫКА

    Стандартные цвета

    ОСНОВЫ ЯЗЫКА HTML

    РАБОТА С ГРАФИЧЕСКИМИ ИЗОБРАЖЕНИЯМИ

    РАБОТА С ГРАФИЧЕСКИМИ ИЗОБРАЖЕНИЯМИ

    ОСНОВЫ ЯЗЫКА HTML

    РАБОТА С ГРАФИЧЕСКИМИ ИЗОБРАЖЕНИЯМИ (пояснение)

    РАБОТА С ГРАФИЧЕСКИМИ ИЗОБРАЖЕНИЯМИ (пояснение)


    ОСНОВЫ ЯЗЫКА HTML

    РАБОТА С ГРАФИЧЕСКИМИ ИЗОБРАЖЕНИЯМИ (продолжение)

    РАБОТА С ГРАФИЧЕСКИМИ ИЗОБРАЖЕНИЯМИ (продолжение)

    ОСНОВЫ ЯЗЫКА HTML

    СОЗДАНИЕ ССЫЛОК ОСНОВЫ ЯЗЫКА HTML

    СОЗДАНИЕ ССЫЛОК

    ОСНОВЫ ЯЗЫКА HTML

    СОЗДАНИЕ ССЫЛОК (продолжение) ОСНОВЫ

    СОЗДАНИЕ ССЫЛОК (продолжение)

    ОСНОВЫ ЯЗЫКА HTML

    ОСНОВЫ ЯЗЫКА HTML



    ОСНОВЫ ЯЗЫКА HTML

    Оформление гиперссылок - Задаёт переход на другие ресурсы

    Оформление гиперссылок

    - Задаёт переход на другие ресурсы.
    - Название страницы - Задаёт переход на другие страницы сайта.
    <a href="Имя файла содержащего информацию" target="_blank"> - Название страницы - Задаёт переход на другую страницу сайта в новом окне.

    Атрибуты гиперссылок Указывает в каком окне открывать гиперссылку

    Атрибуты гиперссылок

    Указывает в каком окне открывать гиперссылку.  

    Параметры:

    Значение

    _Blank -

    Открыть в новом окне

    _Parent

    Открыть в текущем окне

    Цвет текста гиперссылок
    Атрибут LINK служит для выделения гиперссылок, которые еще не посещались пользователем.
    Атрибут VLINK - уже посещенные ссылки.
    Атрибут ALINK - выделяет активную гиперссылку.

    Пример: Гиперссылка может связывать страницы как в пределах одного сайта, так и указывать на любую страницу в

    Пример:

    Гиперссылка может связывать страницы как в пределах одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http://www.site.com/page.html).
    Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html). Делая графическую гиперссылку, помните, что некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы.

    HTML-код: Ссылка на главную страницу сайта

    HTML-код:
    Ссылка на главную страницу сайта
    Отображение в браузере:
    Ссылка на главную страницу сайта
    HTML-код:
    Ссылка на главную страницу сайтаОтображение в браузере:
    Ссылка на главную страницу сайта

    Гиперссылка в пределах html страницы

    Гиперссылка в пределах html страницы
    Иногда необходимо сделать гиперссылку в пределах одной страницы. Например, в начале страницы это гиперссылки, позволяющие перейти к просмотру конкретного вопроса, и в самом низу страницы - позволяющей перейти в начало страницы.
    Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга . Имя должно содержать только буквы и цифры.
    Таким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта.
    Пример:
    HTML-код:
    Наверх страницы
    В то место, куда надо сделать переход надо вставить:

    Отображение в браузере:
    Наверх страницы

    БЕГУЩАЯ СТРОКА ОСНОВЫ ЯЗЫКА HTML

    БЕГУЩАЯ СТРОКА

    ОСНОВЫ ЯЗЫКА HTML

    БЕГУЩАЯ СТРОКА (продолжение) ОСНОВЫ

    БЕГУЩАЯ СТРОКА (продолжение)

    ОСНОВЫ ЯЗЫКА HTML

    БЕГУЩАЯ СТРОКА (окончание) ОСНОВЫ

    БЕГУЩАЯ СТРОКА (окончание)

    ОСНОВЫ ЯЗЫКА HTML

    СОЗДАНИЕ ФРЕЙМОВ ОСНОВЫ ЯЗЫКА HTML

    СОЗДАНИЕ ФРЕЙМОВ

    ОСНОВЫ ЯЗЫКА HTML

    Атрибуты фрейма ОСНОВЫ ЯЗЫКА

    Атрибуты фрейма

    ОСНОВЫ ЯЗЫКА HTML

    Атрибуты фрейма (окончание) ОСНОВЫ

    Атрибуты фрейма (окончание)

    ОСНОВЫ ЯЗЫКА HTML

    Спасибо за внимание! ОСНОВЫ ЯЗЫКА

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

    ОСНОВЫ ЯЗЫКА HTML

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

    Посмотрите также