Slide 0
HTML (HyperText Markup Language) - Язык Разметки Гипертекста
Slide 1
Создание Web-страниц.
Основные теги языка HTML.
Атрибуты таблицы.
Графические элементы.
Slide 2
Структура простого HTML-документа
<html> <head> <title>Моя первая страничка</title> </head> <body> ... прочие теги и текст ... </body>
</html>
содержание
Slide 3
Основные теги языка TML.
Тег <html> </html> Основной тег документа. Не содержит атрибутов. Все прочие теги строятся в области действия данного тега. Тег парный. Тег <head> </head> "Голова" HTML-документа. В нем располагаются теги заголовка-названия документа и различная вспомогательная информация, такая как язык документа и имя автора. Тег парный. Содержит заголовки HTML-документа. Также не содержит атрибутов. Тег <title> </title> Определяет название страницы. Браузер показывает его в заголовке окна при открытии страницы. Тег парный. Тег <body></body> Отмечает начало и конец непосредственно содержимого веб-страницы. Тег парный. Основные атрибуты:
bgcolor - цвет фона страницы
background - фоновый рисунок
содержание
Slide 4
Форматирование текста
Тег <p> </p> Задает параграф в тексте. Тег парный. Основной атрибут:
align - выравнивание текста
Пример:
<p align="right">
текст по правому краю
</p>
содержание
Slide 5
Тег <ol> </ol> Определяет границы нумерованного списка. Тег парный. Тег <ul> </ul> Определяет границы ненумерованного списка. Тег парный. Тег <li> </li> Определяет элемент списка (нумерованного или ненумерованного). Тег парный.
Списки
содержание
Slide 6
Пример:
<ol> <li>Москва</li> <li>Рим</li> <livПариж</li> </ol>
содержание
Slide 7
Тег <font> </font> Задает шрифт для блока текста. Тег парный.
Атрибуты:
face - начертание(шрифт)
color - цвет
size - размер
Пример:
<font color="green"> этот текст будет зеленого цвета </font>
содержание
Slide 8
Тег <b> </b> Выделяет блок текста жирным шрифтом. Тег парный. Тег <i> </i> Выделяет блок текста курсивным шрифтом. Тег парный. Тег <br> Переводит каретку на новую строку. Тег не парный
содержание
Slide 9
Таблицы:
<table>
<tr>
<td></td>
</tr>
</table>
содержание
Slide 10
Тег <table></table> Описывают границы таблицы.
Тег <tr></tr> Описывают строки таблицы.
Тег <td></td> Описывают столбцы таблицы. В каждой строке должно быть одинаковое количество ячеек.
содержание
Slide 11
Основные атрибуты <table>
border - толщина рамки. Задается в пикселях (единицах измерения экрана). Пример: border="1"
width - ширина таблицы. Может задаваться в пикселях, а может в процентах (от размера окна, в котором просматривается страница).
height - высота таблицы. Как и в предыдущем случае, может задаваться в пикселях, а может в процентах.
align - выравнивание информации в ячейке по горизонтали. Значения: left (по умолчанию), center, right.
background - путь к фоновой картинке. Например: "/images/back.gif".
bgcolor - цвет фона. Как и цвет шрифта может содержать код цвета или его имя.
содержание
Slide 12
Основные атрибуты <tr>и<td>
align - выравнивание по горизонтали.
valign - выравнивание вертикали.
background - фоновый рисунок.
bgcolor - цвет фона.
colspan - количество занимаемых ячейкой колонок.
rowspan - количество занимаемых ячейкой строк.
height - высота ячейки.
width - ширина ячейки.
содержание
Slide 13
Пример 1:
<table border="1"> <tr> <td>Ячейка 1</td> <td>Ячейка 2</td> </tr> <tr> <td>Ячейка 3</td> <td>Ячейка 4</td> </tr> </table>
содержание
Slide 14
Пример 2:
<table border="1">
<tr>
<td colspan="2">Ячейка1</td>
</tr>
<tr>
<td>Ячейка3</td>
<td>Ячейка 4</td>
</tr></table>
содержание
Slide 15
Пример 3:
<table border="1">
<tr>
<td rowspan="2">Ячейка 1</td>
<td>Ячейка 2</td>
</tr>
<tr>
<td>Ячейка 4</td>
</tr>
</table>
содержание
Slide 16
Пример 4:
<table border="1">
<tr>
<td>Ячейка 11</td>
<td>Ячейка 12</td>
<td>Ячейка 13</td>
</tr>
<tr>
<td colspan="2">Ячейка 21</td>
<td>Ячейка 23</td>
</tr>
<tr>
<td colspan="3">Ячейка 31</td>
</tr>
</table>
содержание
Slide 17
Работа с изображениями
В HTML-документах, помимо текста и таблиц, можно использовать графику. HTML, а точнее браузеры поддерживают три формата графических файлов: JPG, GIF, PNG.
содержание
Slide 18
JPG - предназначен для хранения полноцветных фотографий. JPG - формат кодирования изображений с потерей, т.е. при сжатии картинки в JPG-файл часть (не существенная) информации отбрасывается за ненадобность.
содержание
Slide 19
GIF - предназначен для хранения картинок с ограниченной цветовой палитрой (256 цветов).
содержание
Slide 20
PNG - универсальный формат, специально разработанный для передачи изображений через сеть. PNG - формат сжатия без потери качества.
содержание
Slide 21
тег <IMG> -вставка картинки
Основные атрибуты:
src - источник картинки, src="sample_image.jpg";
width - ширина картинки, width="119";
height - высота картинки, height="89";
alt - подсказка для картинки, alt="кнопка";
border - толщина рамки, border="0".
содержание
Slide 22
Использование картинок в качестве фонового заполнения
Для страницы, таблицы и ячейки используется один и тот же атрибут - background, который указывает местоположение картинки-фона: background="sample_image.jpg".
содержание
