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

Содержание

Слайд 2

Основные понятия HTML расшифровывается HyperText Markup Language (в переводе означает

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

HTML расшифровывается HyperText Markup Language (в переводе означает Язык Разметки ГиперТекста).
HTML предназначен для

создания веб-страниц во всемирной паутине.
Слайд 3

Программы для просмотра Web - страниц Microsoft Internet Explorer Netscape Communicator The Bat! Opera и т.д.

Программы для просмотра Web - страниц

Microsoft Internet Explorer
Netscape Communicator
The Bat!
Opera и

т.д.
Слайд 4

Блокнот (для создания страницы) Internet Explorer (для интерпретации файлов) Программы для создания HTML – файлов:

Блокнот
(для создания страницы)
Internet Explorer
(для интерпретации файлов)

Программы

для создания HTML – файлов:
Слайд 5

Гипертекст (hypertext) – текст, содержащий ссылки на другие веб-страницы, серверы

Гипертекст (hypertext) – текст, содержащий ссылки на другие веб-страницы, серверы или

ресурсы с возможностями выполнения переходов.

Гипертекст

Слайд 6

Основные понятия Теги - это метки, которые используются для указания

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

Теги - это метки, которые используются для указания браузеру, как

он должен показывать web-сайт.
Большая часть HTML тегов состоит из двух частей:
открывающий тег <...> 
закрывающий тег 
Теги не чувствительны к регистру
Слайд 7

Одинарные Двойные Пример: …. Пример: Тег


Одинарные

Двойные

Пример:  
….
 

Пример:

Тег

Слайд 8

ТЕКСТ с которым работаем

<Открывающий ТЕГ_Атрибут= «детали атрибута»> ТЕКСТ с которым работаем

Слайд 9

Они передают программе просмотра страницы основную информацию для идентификации и

Они передают программе просмотра страницы основную информацию для идентификации и

организации документа.

Три самых важных управляющих кода


….


…


…

Слайд 10

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

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

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

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

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

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

Слайд 12

Слайд 13

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

Пример:

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

Слайд 14

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

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

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

Задание цвета на языке HTML Шестнадцатеричные значения (цветовая система базируется

Задание цвета на языке HTML

Шестнадцатеричные значения
(цветовая система базируется на трёх

основных цветах – красном, зеленом и синем – обозначается RGB)
Например: #000000, #0000FF, #FF0000,
#FFFFFF
Мнемонические обозначения
(название цвета)
Например: Red, White, Blue, Green
Слайд 16

Таблица цветов HTML

Таблица цветов HTML

Слайд 17

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

.....

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

.....

- Самый

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

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

Слайд 18

Форматирование текста документа ….. - Определяет новый параграф текста с

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

…..

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

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

Текст по центру.
Слайд 19

Пример Теги для заголовка Самый большой заголовок Заголовок 2 Заголовок

Пример Теги для заголовка

Самый большой заголовок


Заголовок 2


Заголовок

3

Заголовок 4


Заголовок 5

Самый маленький заголовок 6

Слайд 20

Слайд 21

Изменение фона страницы Чтобы создать цвет фона страницы, внутри начального

Изменение фона страницы

Чтобы создать цвет фона страницы, внутри начального элемента

указывается атрибут bgcolor= «цвет», например:

Основные цвета:
Белый white
Желтый yellow
Зеленый green
Красный red
Синий blue
Черный black

Слайд 22

Тестовая страница Эта страница является тестовой Самый большой заголовок Заголовок


Тестовая страница

Эта страница является тестовой

Самый большой заголовок


Заголовок 2


Заголовок 3


Заголовок 4


Заголовок 5

Самый маленький заголовок 6



Слайд 23

Слайд 24

Отображение текста курсивом и жирным шрифтом Для обозначения курсива используют

Отображение текста курсивом и жирным шрифтом

Для обозначения курсива используют парный тег

...
Для отображения жирным шрифтом использут парный тег ...
Например:

Тестовая страница

Эта страница является тестовой


Слайд 25

Слайд 26

Пример Изменение цвета текста Для изменения цвета текста используют атрибут text тега :

Пример Изменение цвета текста

Для изменения цвета текста используют атрибут text тега :

bgcolor=«yellow» text=«blue»>
Слайд 27

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

    - Определяет нумерованный список. 
  1. - Объекту, заключённому в этот тег

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

Пример: морковь капуста яблоки уксус сахар соль Результат: 3. морковь

Пример: 
 

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

    • Слайд 29

    Графические элементы на странице Вставляет изображение на страницу. Форматирует положение

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

              Вставляет изображение на страницу.
     Форматирует положение изображения

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

    Устанавливает поля сверху и снизу или поля слева и справа.

    Устанавливает поля сверху и снизу или поля слева и

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

    Создание таблиц Тег создающий таблицу. Задает строку в таблице. Задает

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

     

      Тег создающий таблицу.
    Задает строку в таблице. 
    Задает отдельную ячейку

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

    Атрибуты таблицы Определяет толщину рамки. Определяет расстояние между ячейками Устанавливает

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

     

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

    Указывает количество столбцов, объединенных в одной ячейке. Указывает количество строк,


    Разбиваем СТРОЧКУ НА СТОЛБЦЫ с помощью тега
    Разбиваем её и т.д.
    Слайд 35

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

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

    - Задаёт переход на другие ресурсы.

    файла"> - Название страницы - Задаёт переход на другие страницы сайта.
    - Название страницы - Задаёт переход на другую страницу сайта в новом окне.
    Слайд 36

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

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

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

    Цвет текста гиперссылок
    Атрибут LINK

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

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

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

    Слайд 38

    В общем виде любой одиночный или парный тег можно представить схематически в следующем виде:

    В общем виде любой одиночный или парный тег можно представить схематически

    в следующем виде:
    Слайд 39

    Схема страницы сайта Заголовок ТЕКСТ И ДРУГИЕ НЕОБХОДИМЫ ТЕГИ И ИХ АТРИБУТЫ

    Схема страницы сайта



    Заголовок


    ТЕКСТ И ДРУГИЕ НЕОБХОДИМЫ ТЕГИ И ИХ АТРИБУТЫ


    Имя файла: Основы-языка-HTML.pptx
    Количество просмотров: 98
    Количество скачиваний: 0
    - Предыдущая
    Сетевые экраны
    Следующая -
    Бронхиальная астма

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

    Інформаційні процеси. (2 клас)
    Тип даних множина
    Кибербуллинг: как помочь ребенку в ситуации онлайн-травли
    Клавиатура. Функциональные, специальные и вспомогательные клавиши
    Игровые приложения
    О необходимости освещения деятельности некоммерческих национально-культурных объединений
    Construct 2. Урок # 2
    Фрагментация и персонификация контента в интернете
    Сопровождение программного обеспечения компьютерных систем
    Package Assistant для настройки смартфонов. Инструкция
    Автоматизированная торговая система участия в биржевых торгах
    Компьютерная локальная сеть в ЗАГСе
    Глава 2. Деревья. Тема 3. Оптимальное дерево поиска
    Introduction to CFX. Workshop 3 Room Temperature Study
    Форма и язык представления информации
    Краткая характеристика действующих ССС. Спутниковая связь
    Инструкция по регистрации работников подрядной организации на Портале знаний
    Простая анимация. Основы объективно-ориентированного программирования в среде Lazarus
    Проверка знаний
    Роль аккаунт-менеджера
    Обработка текстовой информации в MS Word
    Графический интерфейс операционных систем и приложений
    Табличная форма представления информации. Урок в 5 классе
    Дипломный проект. Разработка web–дизайна сайта кафе Шафран
    Системы счисления. Основные понятия. Двоичная система счисления
    Новый стандарт ГОСТ 7.1: 2006 Библиографическая запись. Библиографическое описание. Общие требования и правила составления
    Запись числа в различных системах счисления. ОГЭ - 4 (N10)
    Базы данных. СУБД. Модели представления данных
    Обратная связь
    Email: Нажмите что бы посмотреть
    Указывает количество столбцов, объединенных в одной ячейке.
    		 Указывает количество строк,
    объединенных в одной ячейке. 
    		 Задает ширину ячейки таблицы в пикселях или процентах.
    		Задает высоту ячейки таблицы в пикселях или процентах.
    Слайд 34

    Создание таблиц В теги пишем тег для вставки таблица ,

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

    В теги пишем тег для вставки таблица

    ,
    если надо, указываем ширину бордюра таблицы(
    ) и т.д. Закрывающий тег
    ставим в конце таблицы.
    Создаём СТРОЧКУ тегом


    Создаём вторую строчку тегом