Язык HTML

Графика
 2

Форматы рисунков
GIF (Graphic Interchange Format)
• сжатие без потерь
• прозрачные области
• анимация
• только с палитрой (2…256 цветов)
рисунки с четкими границами, мелкие рисунки
JPEG (Joint Photographer Expert Group)
• сжатие с потерями
• только True Color (16,7 млн. цветов)
• нет анимации и прозрачности
рисунки с размытыми границами, фото

PNG (Portable Network Graphic)

• сжатие без потерь
• с палитрой (PNG-8) и True Color (PNG-24)
• прозрачность и полупрозрачность (альфа-канал)
• нет анимации
• плохо сжимает мелкие рисунки
 3

Выравнивание
<IMG SRC="flag.jpg" ALIGN="left">
left right

top bottom middle

(по умолчанию)
 5

Рисунки в документе
из той же папки:
image source
(изображение) (источник)

<IMG SRC="flag.jpg">

из другой папки:
<IMG SRC="images/flag.jpg">

<IMG SRC="../images/flag.jpg">

с другого сервера:
<IMG SRC="http://www.vasya.ru/img/flag.jpg">
 6

Отступы
<IMG SRC="net.jpg" <IMG SRC="net.jpg"
ALIGN="left"> ALIGN="left"
HSPACE=10
VSPACE=10>

VSPACE
(vertical space)

HSPACE
(horizontal space)
 7

Другие атрибуты
• всплывающая
подсказка
• надпись на месте
рисунка, если его нет
<IMG SRC="myphoto.jpg"
ALT="Моя фотография"
размеры позволяют:
WIDTH=100 HEIGHT=150 • растянуть - сжать
• не портить дизайн,
BORDER=0> если рисунка нет

толщина рамки
вокруг рисунка
 8

Рисунок-гиперссылка
локальная ссылка: иначе будет синяя
рамка вокруг
<A HREF="table.htm">
<IMG SRC="tbl.jpg" ALT="Таблицы" BORDER=0>
</A>

если </A> не вплотную к

<IMG …>, будет «хвост»

ссылка на другой сервер: не будет

«хвоста»
<A HREF="http://www.mail.ru">
<IMG SRC="mailru.jpg"
ALT="Бесплатная почта" BORDER=0></A>
 9

Язык HTML

Мультимедиа
 10

Вставка мультимедийных файлов

Звуковой файл: имя файла
<embed src="myaw.wav"
autostart="false"></embed>

автозапуск

Флэш-анимация: имя файла

<embed src="cube.swf"
width="275" height="200">
</embed>
размеры
 11

Вставка мультимедийных файлов

Видео:
адрес ролика
<embed
src="http://www.youtube.com/v/YvLNA5OW6xZ"
width="425" height="350">
</embed>
размеры
 12

HTML5 – тэг audio

<audio имя файла

src="nature.ogg"
autostart="false" показывать элементы
управления
controls="controls"
width="425"
height="350">
размеры
</audio>
 13

HTML5 – тэг video

<video src="sail.ogv"
controls="controls"
autostart="false"
width="425" height="350">
Ваш браузер не поддерживает элемент video.
</video>
<video width="425" height="350"
controls="controls">
<source src="start.mp4"
type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>

<video width="425" height="350"

controls="controls">
<source src="finish.webm"
type='video/webm; codecs="vp8, vorbis"'>
</video>
 14

Язык HTML

Списки
 15

Маркированные списки
unordered list
(неупорядоченный список)

list item
<ul> (элемент списка)
<li>Вася</li>
<li>Петя</li>
<li>Коля</li>
</ul>

изменение маркера:
disk 
<ul type="disk">
... circle ○
</ul> square ■
 16

Нумерованные списки
ordered list
(упорядоченный список)

<ol>
<li>Вася</li>
<li>Петя</li>
<li>Коля</li>
</ol>
изменение нумерации:
1, i, I, a, A

<ol type="i" start="4">

...
</ol>
 17

Многоуровневые списки
<ol>
<li>Россия
<ul>
<li>Москва</li>
<li>Санкт-Петербург</li>
</ul>
</li>
<li>Украина
<ul>
<li>Киев</li>
<li>Одесса</li>
</ul>
</li>
</ol>
Лабораторная работа.
Лабораторная работа.
Лабораторная работа.
Язык HTML
Гиперссылки
 22

Ссылки на другие страницы сайта

• страница в той же папке
anchor (якорь)

<A HREF="table.htm">Таблицы</A>

hyper reference
(гиперссылка)
• страница во вложенной папке
<A HREF="example/ex1.htm">Пример</A>
• страница в соседней папке
<A HREF="../texts/text1.htm">Текст</A>

выйти из текущей папки

 23

Примеры (ссылки из файла rock.html)

– stories
story.html
– novels
list.html
– new
rock.html
sea.html
– old
verse.html
 24

Ссылки на другие сайты

• на главную страницу сайта

<A HREF="http://www.mail.ru">Почта</A>

index.htm, index.html, default.asp, …

• на конкретную страницу сайта (URL)

<A HREF="http://www.vasya.ru/text/a.htm">
Васин текст</A>

• на файл для скачивания

<A HREF="http://www.vasya.ru/prog.zip">
Скачать</A>
 25

Ссылки внутри страницы

<A NAME="up"></A> переход на метку
<A HREF="#chap1">Глава 1</A><br>
<A HREF="#chap2">Глава 2</A><br>
<A NAME="chap1"></A>
<H1>Глава 1</H1>
метка (якорь)
Это текст главы 1. Это текст главы 1.
Это текст главы 1. Это текст главы 1.<BR>
<A HREF="#up">Наверх</A>
<A NAME="chap2"></A>
<H1>Глава 2</H1>
Это текст главы 2. Это текст главы 2.
Это текст главы 2. Это текст главы 2.<BR>
<A HREF="#up">Наверх</A>
 26

Запуск почтовой программы

<A HREF="mailto:vasya@mail.ru">
Напишите мне!
</A>
Лабораторная работа.