HTML (HyperText Markup Language) - Язык Разметки Гипертекста презентация

Содержание

Создание Web-страниц. Основные теги языка HTML. Атрибуты таблицы. Графические элементы.

Слайд 1HTML (HyperText Markup Language) - Язык Разметки Гипертекста


Слайд 2Создание Web-страниц.

Основные теги языка HTML.
Атрибуты таблицы.
Графические элементы.



Слайд 3Структура простого HTML-документа
    Моя первая страничка     ... прочие теги и

текст ...

содержание




Слайд 4Основные теги языка TML.
Тег Основной тег документа. Не содержит

атрибутов. Все прочие теги строятся в области действия данного тега. Тег парный. Тег "Голова" HTML-документа. В нем располагаются теги заголовка-названия документа и различная вспомогательная информация, такая как язык документа и имя автора. Тег парный. Содержит заголовки HTML-документа. Также не содержит атрибутов. Тег Определяет название страницы. Браузер показывает его в заголовке окна при открытии страницы. Тег парный. Тег Отмечает начало и конец непосредственно содержимого веб-страницы. Тег парный. Основные атрибуты:
bgcolor - цвет фона страницы
background - фоновый рисунок

содержание




Слайд 5Форматирование текста
Тег Задает параграф в тексте. Тег парный.

Основной атрибут:
align - выравнивание текста
Пример:


текст по правому краю


содержание




Слайд 6 Тег Определяет границы нумерованного списка. Тег парный.

Тег
Определяет границы ненумерованного списка. Тег парный. Тег
  • Определяет элемент списка (нумерованного или ненумерованного). Тег парный.

    Списки

    содержание




    Слайд 7Пример:
        Москва     Рим    


    содержание




    Слайд 8Тег Задает шрифт для блока текста. Тег парный.
    Атрибуты:


    face - начертание(шрифт)
    color - цвет
    size - размер
    Пример:
    этот текст будет зеленого цвета

    содержание




    Слайд 9 Тег Выделяет блок текста жирным шрифтом. Тег парный.

    Тег Выделяет блок текста курсивным шрифтом. Тег парный. Тег
    Переводит каретку на новую строку. Тег не парный

    содержание




    Слайд 10Таблицы:





    содержание



    Слайд 11Тег Описывают границы таблицы.

    Тег Описывают строки таблицы.
    Тег

    Описывают столбцы таблицы. В каждой строке должно быть одинаковое количество ячеек.

    содержание




    Слайд 12Основные атрибуты
    border - толщина рамки. Задается в пикселях (единицах

    измерения экрана). Пример: border="1"
    width - ширина таблицы. Может задаваться в пикселях, а может в процентах (от размера окна, в котором просматривается страница).
    height - высота таблицы. Как и в предыдущем случае, может задаваться в пикселях, а может в процентах.
    align - выравнивание информации в ячейке по горизонтали. Значения: left (по умолчанию), center, right.
    background - путь к фоновой картинке. Например: "/images/back.gif".
    bgcolor - цвет фона. Как и цвет шрифта может содержать код цвета или его имя.

    содержание




    Слайд 13Основные атрибуты и
    align - выравнивание по горизонтали.
    valign - выравнивание вертикали.


    background - фоновый рисунок.
    bgcolor - цвет фона.
    colspan - количество занимаемых ячейкой колонок.
    rowspan - количество занимаемых ячейкой строк.
    height - высота ячейки.
    width - ширина ячейки.

    содержание




    Слайд 14Пример 1:
      Ячейка 1   Ячейка 2   Ячейка 3   Ячейка 4
    содержание



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


    Ячейка1


    Ячейка3
    Ячейка 4


    содержание




    Слайд 16Пример 3:


    Ячейка 1
    Ячейка 2


    Ячейка 4


    содержание




    Слайд 17Пример 4:


    Ячейка 11
    Ячейка 12
    Ячейка

    13


    Ячейка 21
    Ячейка 23


    Ячейка 31


    содержание




    Слайд 18Работа с изображениями
    В HTML-документах, помимо текста и таблиц, можно использовать графику.

    HTML, а точнее браузеры поддерживают три формата графических файлов: JPG, GIFJPG, GIF, PNG.

    содержание




    Слайд 19содержание
    JPG - предназначен для хранения полноцветных фотографий. JPG - формат кодирования

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

    содержание




    Слайд 20содержание
    GIF - предназначен для хранения картинок с ограниченной цветовой палитрой (256

    цветов).

    содержание




    Слайд 21содержание
    PNG - универсальный формат, специально разработанный для передачи изображений через сеть.

    PNG - формат сжатия без потери качества.

    содержание




    Слайд 22тег -вставка картинки
    Основные атрибуты:
    src - источник картинки, src="/sample_image.jpg";
    width -

    ширина картинки, width="119";
    height - высота картинки, height="89";
    alt - подсказка для картинки, alt="кнопка";
    border - толщина рамки, border="0".

    содержание




    Слайд 23Использование картинок в качестве фонового заполнения
    Для страницы, таблицы и ячейки

    используется один и тот же атрибут - background, который указывает местоположение картинки-фона: background="sample_image.jpg".

    содержание




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

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

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

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

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


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

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