Вы находитесь на странице: 1из 27

Язык 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>
Лабораторная работа.

Вам также может понравиться