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

Содержание

Слайд 1Лекция №1. Основы HTML - языка

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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

Слайд 11Общий вид парного тега:
текст

Пример:
Пробная страница

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

угловые скобки.

Слайд 13Общий вид одиночного тега:

Пример:


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

тега>

Слайд 15Пример:

Текст

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

без кавычек

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

значения.

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

или title, или даже tItLE.

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

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

....

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


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

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

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

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

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

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

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

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

Слайд 26АТРИБУТЫ ПАРНОГО ТЕГА …

Слайд 271) BGCOLOR=“цвет” – устанавливает цвет фона HTML-документа

Например:

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

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

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

с текстом).

Слайд 30 Например:


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

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

Слайд 32

Пример


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


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

Слайд 34 Курсивный текст

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

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

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


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

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

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

Слайд 37
начало нового абзаца

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

справа,
center – по центру

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

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

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

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

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


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

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

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



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

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

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

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

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

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

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

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

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



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

Слайд 47Пример

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

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

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

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

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

  • - вставка элементов списка

    • Слайд 51Пример:

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

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

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

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


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

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

    Слайд 55Вставка картинок

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

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

    Слайд 57Вставка бегущей строки

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

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

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

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

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

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

    Слайд 61Организация ссылок

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

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

    Слайд 63
    Активный текст

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

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


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

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

    Слайд 64
    Активный текст

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

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


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

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

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

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

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

    Слайд 66Вставка таблиц

    Слайд 67Парный тег … создает таблицу.
    Атрибуты:
    ALIGN [center, left, right ]- выравнивание

    таблицы относительно документа.
    BACKGROUND - определяет рисунок для заднего фона
    BGCOLOR - определяет цвет заднего фона таблицы

    Слайд 68BORDER - Позволяет задавать ширину внешней границы таблицы в пикселах или в

    %. Например:
    CELLSPACING - задает ширину фронтальной грани таблицы в пикселах или в %.
    Например:

    CELLPADDING - Позволяет задавать ширину пустого пространства между содержимым ячейки и её границами.
    Например:

    Слайд 69Текст -
    определяет строку в таблице
    Текст-
    определяет отдельную ячейку в таблице
    Текст

    -
    определяет заголовок для столбца в таблице.

    Слайд 70Атрибуты:
    COLSPAN - позволяет растягивать строку на заданное количество ячеек (как бы

    объединять их).
    Например:

    Слайд 71Пример простой таблицы

    Слайд 72Код для этой таблицы:



    Заголовок столбца 1
    Заголовок

    столбца 2










    ROWSPAN - позволяет растягивать ячейку на заданное количество строк.
    Например:
    Ячейка столбца 1, ряд 1 Ячейка столбца 2, ряд 1
    Ячейка столбца 1, ряд 2 Ячейка столбца 2, ряд 2

    Слайд 73Вставка форм

    Слайд 74Для создания форм используется парный тег ….
    Текстовое поле

    SIZE=10>
    NAME - атрибут для указания имени текстового поля, для дальнейшего применения этого имени в программном коде.
    SIZE - атрибут для указания размера (длины) текстового поля в пикселях.

    Слайд 75Группа радиокнопок

    Группа флажков

    TYPE=”checkbox” NAME=”имя элемента” VALUE=”значение элемента” >

    Слайд 76Раскрывающийся список

    1-й элемент списка
    2-й элемент списка
    ………………
    n-й элемент списка

    Слайд 77Текстовая область


    ROWS – количество строк (в данном случае

    10)
    COLS – количество столбцов (в данном случае 100).

    Слайд 78Кнопка «Отправить»


    Кнопка «Очистить»

    Слайд 79Вставка фреймов

    Слайд 80Кадры (frames) позволяют разбивать страницу на независимые окна
    Парный тег

    задает

    кадровую структуру
    Web-страница с кадровой структурой не содержит тег .
    Тег - позволяет определить отдельный кадр.

    Слайд 81Атрибуты
    ROWS - определяет число и размер строк.
    Например:

    COLS - определяет

    число и размер столбцов.
    Например:

    Слайд 82SRC = “имя файла” - вставка картинки или страницы в кадр.
    Например:

    SRC =“cостав. html”>
    SCROLLING = (yes, no, auto)- задает линейки прокрутки.
    MARGINWIDTH = “значение”
    MARGINHЕIGTH= “значение”
    Позволяет задать внутреннюю границу кадра.

    Слайд 83Атрибуты
    BORDER = число – толщина границы
    FRAMEBORDER=NO(yes) – наличие границы
    BORDERCOLOR =

    “цвет”
    NAME = “имя”- имя кадра.
    Например:

    Слайд 84Атрибут TARGET используется для ссылок в кадр.
    Значения TARGET:
    имя кадра - загружает

    указанный файл в кадр
    blank - загружает файл в окно без названия
    self - загружает в окно, откуда сделан вызов
    parent – загружает в старший кадр
    top - в новое окно, разрушая страницу кадров

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

    ТЕКСТ


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

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

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

    Слайд 87 - звуковой файл
    Например:

    файла”>- видео файл
    Например:
    < IMG DYNSRC =“Tuva.avi”>

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

    НОВЫЕ 226
    ЕГЭ по Обществознанию 748
    Веселый и дружный класс. Фотоальбом 211
    Нахождение металлов в природе 336
    Методическое сопровождение учителя – конкурсантаРекомендации Лобановой Татьяны Анатольевны 220
    снежинки Интернет-ресурсы. 232

    Обратная связь

    Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

    Email: Нажмите что бы посмотреть 

    Что такое ThePresentation.ru?

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

    Для правообладателей

    Яндекс.Метрика