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

Содержание

Слайд 2

HTML (Hyper Text Markup Language) - язык разметки гипертекста. Гипертекст -

HTML (Hyper Text Markup Language) - язык разметки гипертекста.
Гипертекст - текст,

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

Документы созданные с помощью этого языка представляют собой текстовые файлы. Эти файлы называются HTML-документами.

Документы созданные с помощью этого языка представляют собой текстовые файлы.
Эти файлы

называются HTML-документами.
Слайд 4

HTML-документ может быть создан в обычном текстовом редакторе (Блокнот, Notepad, Visual

HTML-документ может быть создан в обычном текстовом редакторе (Блокнот, Notepad, Visual Studio

Code и т.п.).
HTML-документ имеет расширение .htm или .html.
Слайд 5

HTML-документ просматриваются при помощи браузеров (Internet Explorer, Opera, Mozilla FireFox, Google

HTML-документ просматриваются при помощи браузеров (Internet Explorer, Opera, Mozilla FireFox, Google

Chrome и др.).
Конкретный вид HTML-документ окончательно определяет только браузер на компьютере пользователя Интернета. 
Слайд 6

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

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

встроенные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java.
Слайд 7

HTML-документ создается с использованием тегов. Тег (tag) – это основной элемент

HTML-документ создается с использованием тегов.
Тег (tag) – это основной элемент HTML-языка

и является специальной командой для разметки HTML-документа.
Слайд 8

Теги бывают парные (контейнеры) и одиночные. Тег записывается в угловых (например,

Теги бывают парные (контейнеры) и одиночные. Тег записывается в угловых (например,


) скобках и состоит из имени, за которым может следовать список атрибутов.
Слайд 9

Атрибуты – элементы тегов, дающие браузеру дополнительную информацию об отображении размещаемой

Атрибуты – элементы тегов, дающие браузеру дополнительную информацию об отображении размещаемой

информации.
Бывают обязательные и необязательные атрибуты
Слайд 10

Парные теги имеют два компонента: открывающий и закрывающий теги. Названия открывающего

Парные теги имеют два компонента: открывающий и закрывающий теги.
Названия открывающего

и закрывающего тегов одинаковы, но при записи перед названием закрывающего тега ставится символ « / ».
Слайд 11

Общий вид парного тега: текст Пример: Пробная страница

Общий вид парного тега:
<имя тега>текст
Пример:
Пробная страница

Слайд 12

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

Одиночный тег состоит из одного компонента – имени тега, заключенного в

угловые скобки.
Слайд 13

Общий вид одиночного тега: Пример:

Общий вид одиночного тега:
<имя тега>
Пример:


Слайд 14

Общий вид тега с атрибутами: текст

Общий вид тега с атрибутами: <имя тега атрибут1=значение … атрибутn=значение> текст

тега>
Слайд 15

Пример: Текст

Пример:

Текст

Слайд 16

Текстовые значения атрибутов пишутся в двойных кавычках (“”), а числовые – без кавычек

Текстовые значения атрибутов пишутся в двойных кавычках (“”), а числовые –

без кавычек
Слайд 17

Написание имен тегов и атрибутов большой или маленькой буквой не имеет значения.

Написание имен тегов и атрибутов большой или маленькой буквой не имеет

значения.
Слайд 18

Язык HTML нечувствителен к регистру. Например, можно написать TITLE, или Title, или title, или даже tItLE.

Язык HTML нечувствителен к регистру.
Например, можно написать TITLE, или Title,

или title, или даже tItLE.
Слайд 19

Структура HTML-документа (основные разделы)

Структура HTML-документа (основные разделы)

Слайд 20

(здесь будет заголовок) Основы HTML .... (здесь будут другие теги тела программы)


(здесь будет заголовок)
Основы HTML

....

(здесь будут другие теги тела программы)


Слайд 21

Краткое описание разделов

Краткое описание разделов

Слайд 22

Парный тег … указывает браузеру что это HTML документ.

Парный тег … указывает браузеру что это HTML документ.

Слайд 23

Парный тег … определяет место, где помещается различная информация о текущем

Парный тег … определяет место, где помещается различная информация о текущем

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

Парный тег … - тег названия документа. Текст внутри него отображается

Парный тег … - тег названия документа. Текст внутри него отображается

не на странице, а на заголовоке окна браузера.
Слайд 25

Парный тег … определяет видимую часть документа. В этом разделе располагается

Парный тег … определяет видимую часть документа. В этом разделе располагается

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

АТРИБУТЫ ПАРНОГО ТЕГА …

АТРИБУТЫ ПАРНОГО ТЕГА …

Слайд 27

1) BGCOLOR=“цвет” – устанавливает цвет фона HTML-документа Например: тело документа

1) BGCOLOR=“цвет” – устанавливает цвет фона HTML-документа
Например:

тело документа

Слайд 28

BACKGROUND=“имя файла”- позволяет использовать в качестве фона изображение из файла.

BACKGROUND=“имя файла”-
позволяет использовать в качестве фона изображение из файла.

Слайд 29

BGPROPERTIES = FIXED позволяет создать «водяной знак» (фон, который не перемещается вместе с текстом).

BGPROPERTIES = FIXED
позволяет создать «водяной знак» (фон, который не перемещается вместе

с текстом).
Слайд 30

Например: BACKGROUND=“CLOUD.GIF” BGPROPERTIES=FIXED> тело документа

Например:
BACKGROUND=“CLOUD.GIF” BGPROPERTIES=FIXED>
тело документа

Слайд 31

Пример простейшего HTML-документа

Пример простейшего HTML-документа

Слайд 32

Пример Здравствуй МИР!!!



Пример


Здравствуй МИР!!!


Слайд 33

Теги для работы с текстом

Теги для работы с текстом

Слайд 34

Курсивный текст Полужирный текст Подчеркнутый текст

Курсивный текст

Полужирный текст

Подчеркнутый текст

Слайд 35

заголовок 1-го уровня (самый большой) заголовок 2-го уровня . . . заголовок 6-го уровня (самый маленький)

заголовок 1-го уровня

(самый большой)

заголовок 2-го уровня


. . .


заголовок 6-го уровня
(самый маленький)
Слайд 36

- перевод строки (непарный) - для рисования горизонтальной черты в качестве разделителя (непарный)


- перевод строки (непарный)

- для рисования горизонтальной черты в

качестве разделителя (непарный)
Слайд 37

начало нового абзаца Атрибут ALIGN выравнивает параграф: left - слева, right


начало нового абзаца


Атрибут ALIGN выравнивает параграф:
left - слева,
right -

справа,
center – по центру
Слайд 38

Текст - определяет выводимый шрифт, его цвет и размер Атрибуты: COLOR

Текст -
определяет выводимый шрифт, его цвет и размер
Атрибуты:
COLOR

- цвет текста, FACE - гарнитуру шрифта, SIZE - размер текста в пределах от 1 до 7, где 1 - самый мелкий шрифт. По умолчанию равен 3
Слайд 39

Абзац без изменения исходного текста Выделение текста Усиленное выделение текста Отображает

 
Абзац без изменения исходного текста

Выделение текста

Усиленное выделение текста


Отображает весь

текст в одной строке, не обрывая её

Слайд 40

увеличение шрифта текста относительно текущего уменьшение шрифта текста


увеличение шрифта текста относительно текущего


уменьшение шрифта текста

Слайд 41

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

Комментарии - поясняют тексты, которые невидны при загрузки документа в браузер.
Все,

что заключено между символами  считается комментарием и не отображается в браузере.
Слайд 42

Тег служит для указания языка, на котором написан документ, его кодовой

Тег служит для указания языка, на котором написан документ, его

кодовой страницы, ключевых слов, используемых поисковыми системами для классификации этого документа и т.п.
Слайд 43

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

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

Слайд 44

Тег определяет метатеги, которые используются для хранения информации предназначенной для браузеров

Тег  определяет метатеги, которые используются для хранения информации предназначенной для браузеров

и поисковых систем. Разрешается использовать несколько метатег, которые размещаются в контейнере .
Слайд 45

Пример использования: Закрывающий тег для META не требуется.

Пример использования:



Закрывающий тег для META не требуется.

Слайд 46

Слайд 47

Пример

Пример

Слайд 48

Браузеры показывают текст в своем окне, автоматически осуществляя перенос слов. Для

Браузеры показывают текст в своем окне, автоматически осуществляя перенос слов. Для запрета

разрыва блока текста с пробелами между словами используется специализированным символом   - символом неразрывного пространства (non-breaking space). 
Слайд 49

Теги для создания списков (нумерованные и маркированные)

Теги для создания списков (нумерованные и маркированные)

Слайд 50

Маркированный список Атрибут: TYPE - тип маркера. Его значения: disk -

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

Атрибут:
TYPE - тип маркера.
Его значения:
disk - закрашенный

кружок (по умолчанию)
circle - незакрашенный кружок
square – квадратик
  • - вставка элементов списка

    • Слайд 51

    Пример: Системный блок Материнская плата Блок питания Блок ВЗУ Блок охлаждения (кулеры)

    Пример:


      Системный блок
    • Материнская плата
    • Блок питания
    • Блок ВЗУ
    • Блок охлаждения (кулеры)

    Слайд 52

    Нумерованный список Атрибуты: TYPE - тип маркера (A - заглавные буквы;

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

    Атрибуты:
    TYPE - тип маркера (A - заглавные

    буквы; a - строчные буквы, I - заглавные римские цифры, i - строчные римские цифры, 1 - арабские цифры (по умолчанию)
    Слайд 53

    START - начальное значение для нумерованного списка при использовании арабских цифр

    START - начальное значение для нумерованного списка при использовании арабских цифр


    SKIP - позволяет в середине нумерованного списка пропустить заданное число пунктов нумерации)
  • - вставка элементов списка
    • Слайд 54

    Пример: Минимальная конфигурация ПК Системный блок Монитор Клавиатура Манипулятор «Мышь» Звуковые колонки

    Пример:

      Минимальная конфигурация ПК
    1. Системный блок
    2. Монитор
    3. Клавиатура
    4. Манипулятор «Мышь»
    5. Звуковые колонки

    Слайд 55

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

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

    Слайд 56

    - вставка картинки из файла Атрибуты SRC - обязательный атрибут, указывающий

    - вставка картинки из файла
    Атрибуты
    SRC - обязательный атрибут,

    указывающий URL-адрес рисунка.
    align - выравнивает изображение к одной из сторон документа (left, right, center, bottom, top, middle).
    alt - выводит текст к картинке. Полезно, если браузер не отображает графику на странице
    Слайд 57

    Вставка бегущей строки

    Вставка бегущей строки

    Слайд 58

    Бегущая строка Атрибуты: ALIGN = “middle” ( top, bottom) Позволяет разместить

    Бегущая строка
    Атрибуты:
    ALIGN = “middle” ( top, bottom)
    Позволяет разместить текст в

    верхней, средней или нижней части области бегущей строки.
    SCROLL прокрутка циклическая
    BEHAVIOR =“slide” - выход и остановка
    ALTERNATE прыжки
    Слайд 59

    BGCOLOR=“FFF000” - используется для определения цвета фона бегущей строки. DIRECTION =

    BGCOLOR=“FFF000” - используется для определения цвета фона бегущей строки.
    DIRECTION = left

    (right) - используется для определения направления бегущей строки.
    LOOP=n текст пробегает по экрану n раз
    LOOP=INFINITE бесконечно (по умолчанию)
    WIDTH = в пикселях или в % от высоты экрана
    Позволяет сделать область бегущей строки длиннее или короче.
    Слайд 60

    HEIGHT = высота бегущей строки в пикселах или в % от

    HEIGHT = высота бегущей строки в пикселах или в % от

    высоты экрана. Позволяет сделать область бегущей строки толще или тоньше.
    HSPACE = ширина в пикселях левого и правого полей между областью бегущей строки и окружающим её текстом или графикой.
    VSPACE = размер отступа в пикселях сверху и снизу от бегущей строки до текста или графики. SCROLLAMOUNT=скорость перемещения текста [1…3000]
    – мигание объекта

    Слайд 61

    Организация ссылок

    Организация ссылок

    Слайд 62

    Для создания гипертекста (гиперссылок) служит парный тег Текст . Атрибут HREF

    Для создания гипертекста (гиперссылок) служит парный тег Текст .
    Атрибут
    HREF -

    задает URL ресурса, на который должен перейти пользователь, щелкнув по ссылке (обязательный).
    Атрибут может указывать как на внешний документ, так и на документ, расположенный в той же папке, что и исходный файл.
    Слайд 63

    Активный текст ссылка на другой HTML-документ или файл (звуковой или видеоклип)


    Активный текст
    ссылка на другой HTML-документ или файл

    (звуковой или видеоклип)

    Активный текст

    ссылка на метку в текущем HTML-документе
    Слайд 64

    Активный текст ссылка на метку в другом HTML-документе Активный текст метка


    Активный текст

    ссылка на метку в

    другом HTML-документе

    Активный текст
    метка для двух указанных выше типов ссылок
    Активный текст

    ссылка в виде графического изображения
    Слайд 65

    Примеры: В качестве ссылки может использоваться графический элемент или комбинация текста и графики. текст страница 2

    Примеры:
    В качестве ссылки может использоваться графический элемент или комбинация текста

    и графики.
    текст



    Слайд 66

    Вставка таблиц

    Вставка таблиц

    Слайд 85

    Пример использования: ТЕКСТ Атрибут NORESIZE запрещает изменение кадровой структуры.

    Пример использования:
    ТЕКСТ

    Атрибут NORESIZE запрещает изменение

    кадровой структуры.
    Слайд 86

    Подключение звукового и видео файла

    Подключение звукового и видео файла

    - Предыдущая
    Техника безопасности на рабочем месте в детском творческом объединении Мастерилка
    Следующая -
    Искусство в годы Великой Отечественной войны

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

    Преобразование (приведение) типов
    Безпека в Інтернеті
    Просмотр информации об организации, включенной в Сводный реестр
    Принципы построения и архитектура ЭВМ
    Складання та виконання алгоритмів з повторенням у середовищі Scratch. Практична робота №3. 7 клас
    Установка системы мониторинга zabbix
    Объектно-ориентированное программирование
    Профессия журналист
    Презентация "Компьютерные презентации Мультимедийные технологии" - скачать презентации по Информатике
    Информационные технологии в управлении персоналом. Понятие нейросети (лекция 6)
    Хранение информации. Создаем и сохраняем файлы
    О внедрении информационной системы сопровождения процесса перевода обучающихся с платной основы обучения на бюджетную
    Создание эскиза костюма с использованием средств графического редактора GIMP
    Homework #4 Solutions
    Расширение объектной модели Delphi (Глава 9)
    Новые медиа как продукт
    Представление числовых данных в среде табличного процессора
    Алгоритм. Ребус
    Презентация "Физкультурные минутки на уроках информатики" - скачать презентации по Информатике
    Виды и методы тестирования на разных стадиях разработки ПО
    Информационно-методическое обеспечение деятельности учреждений культуры
    Основы SQL. Запросы к базе данных
    Сетевая высокопроизводительная технология коммутации и мультиплексирования пакетов
    10 вопросов к викторине
    Электронный паспорт. Паспорт объекта системы социальной защиты населения
    Создание игры пинг-понг на языке программирования Scratch
    Редактор формул. Microsoft Word 2010
    Технология хранения, поиска и сортировки информации
    Вы можете прислать нам Вашу презентацию и мы опубликуем ее на сайте.
    Обратная связь
    Для правообладателей
    Email: Нажмите что бы посмотреть