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

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

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

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

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

5 Форматирование текста Тег Задает параграф в тексте. Тег парный. Основной атрибут: align - выравнивание текста Пример: текст по правому краю содержание

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

7 Пример: Москва Рим 1.Москва 2.Рим 3.Париж содержание

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 Ячейка 1Ячейка 2 Ячейка 3Ячейка 4 содержание

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

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

17 Пример 4: Ячейка 11 Ячейка 12 Ячейка 13 Ячейка 21 Ячейка 23 Ячейка содержание

18 Работа с изображениями В HTML-документах, помимо текста и таблиц, можно использовать графику. HTML, а точнее браузеры поддерживают три формата графических файлов: JPG, GIF, PNG.JPGGIF 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". содержание