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


The Presentation inside:

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". содержание


×

HTML:





Ссылка: