SlideShare a Scribd company logo
1 of 45
Web-страницы.
Язык HTML и др.
2
Что такое Web-страницы?
Гиперссылка – «активная»ссылка на другой документ.
Гипертекст – текст, содержащий гиперссылки.
Гипермедиа-документ – документ, включающий текст,
рисунки, звуки, видео, в котором любой элемент может
быть гиперссылкой.
WWW (World Wide Web) – «всемирная паутина», служба
Интернет для обмена информацией в виде гипертекста
(и гипермедиа).
Web-страница – текстовый файл, в котором описано
размещение материала на экране.
Браузер – программа для просмотра Web-страниц на
экране (Internet Explorer, Mozilla Firefox, Opera).
3
Какие бывают Web-страницы?
•статические – существуют на сервере в виде
готовых файлов:
*.htm, *.html
•динамические – полностью или частично
создаются на сервере в момент запроса (выбор
информации из базы данных)
*.shtml, *.asp, *.pl, *.php
• позволяют выбирать информацию из базы данных
по заранее неизвестным запросам
• дополнительная нагрузка на сервер
• загружаются медленнее
4
Язык HTML
HTML = Hypertext Markup Language
(язык разметки гипертекста)
HTML – это не язык программирования!!
HTML-страница – это текстовый файл (Блокнот):
<HTML>
<HEAD>
<TITLE>Моя страница</TITLE>
</HEAD>
<BODY>
Привет!
…
</BODY>
</HTML>
index.html
5
Тэги
Тэг – это команда языка HTML, которую выполняет
браузер:
• непарные тэги
• парные тэги (контейнеры)
<IMG SRC = "vasya.jpg">
вставить
рисунок
<TABLE>
...
</TABLE>
открывающий
закрывающий
область действия
тэга: описание
таблицы
6
Простейшая Web-страница
<HTML>
<HEAD>
<TITLE>Моя первая
Web-страница</TITLE>
</HEAD>
<BODY>
Привет!
</BODY>
</HTML>
first.html
<HEAD>
<TITLE>Моя первая
Web-страница</TITLE>
</HEAD>
шапка («голова»)
<BODY>
Привет!
</BODY>
основная часть
(«тело»)
Структура документа.
Специальные символы
8
Заголовки: H1 … H6
<BODY>
<H1>Заголовок документа</H1>
<H2>Заголовок раздела</H2>
<H3>Заголовок подраздела</H3>
<H4>Заголовок параграфа</H4>
<H5>Комментарий</H5>
<H6>Авторские пометки</H6>
</BODY>
выравнивание:
<H1 ALIGN=center>История</H1>
left,
center,
right
9
Абзацы
• переход на новую строку
• абзац (с отступами)
И вечный бой! Покой
нам только снится<BR>
Сквозь кровь и пыль...<BR>
Летит, летит степная
кобылица<BR>
И мнет ковыль...
<P>
Одно физическое тело захотело
поменять три своих старых варежки
на что-нибудь хорошее.
</P>
<P>
До самого вечера тело с варежками ...
</P>
10
Выравнивание
<P ALIGN="center">
Этот текст выровнен по центру.
</P>
<P ALIGN="justify">
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
</P>
left по левой границе
right по правой границе
center по центру
justify по ширине
Не используйте
выравнивание по
ширине для узких
столбцов!
!
атрибут тэга <P>
Списки
12
Маркированные списки
<UL>
<LI>Вася
<LI>Петя
<LI>Коля
</UL>
unordered list
(неупорядоченный список)
list item
(элемент списка)
изменение маркера:
<UL TYPE="disk">
...
</UL>
disk 
circle ○
square ■
13
Нумерованные списки
<OL>
<LI>Вася
<LI>Петя
<LI>Коля
</OL>
ordered list
(упорядоченный список)
изменение нумерации:
<OL TYPE=i START=3>
...
</OL>
1, i, I, a, A
14
Списки определений
<DL>
<DT>компьютер
<DD>устройство для
обработки информации
<DT>дискета
<DD>гибкий магнитный диск
<DT>винчестер
<DD>жесткий магнитный
диск
</DL>
definition list (список определений)
definition term (термин)
definition description
(описание)
15
Многоуровневые списки
<UL>
<LI>Города России
<LI>Города Украины
</UL>
<OL>
<LI>Москва
<LI>Санкт-Петерург
</OL>
<OL>
<LI>Киев
<LI>Одесса
</OL>
Гиперссылки
17
Ссылки на другие страницы сайта
<A HREF="table.htm">Таблицы</A>
•страница в той же папке
anchor (якорь)
hyper reference
(гиперссылка)
•страница во вложенной папке
<A HREF="example/ex1.htm">Пример</A>
•страница в соседней папке
<A HREF="../texts/text1.htm">Текст</A>
выйти из текущей папки
18
Ссылки на другие сайты
<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>
19
Ссылки внутри страницы
<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>
•в другом файле
<A HREF="texts.html#color">Цвет текста</A>
метка (якорь)
переход на метку
20
Запуск почтовой программы
<A HREF="mailto:vasya@mail.ru">
Напишите мне!
</A>
21
Тэг BODY – общие свойства
страницы• цвет фона и текста
• цвет гиперссылок
<BODY TEXT="white"
BGCOLOR=#00FF00>
Привет!
</BODY>
<BODY LINK="#FF8C00"
VLINK=green>
...
</BODY>
цвет текста
цвет фона
посещенные ссылки
(visited link)
цвет
ссылок
атрибуты тэга
22
Цвет гиперссылок
<BODY LINK="#FF8C00"
VLINK=green
ALINK=red>
...
</BODY>
LINK ссылки, на которых не были
VLINK посещенные ссылки
ALINK активные ссылки
23
Цвет гиперссылок
<BODY LINK="#FF8C00"
VLINK=green
ALINK=red>
...
</BODY>
LINK ссылки, на которых не были
VLINK посещенные ссылки
ALINK активные ссылки
24
Линия-разделитель
<HR>
<HR WIDTH="60%" SIZE="3" ALIGN="right">
horizontal rule
ширина в
пикселях или
процентах толщина выравнивание
Не рекомендуется
использовать –
лучше заголовки
разделов!
!
25
Кодирование цвета
•имена
red, green, blue, magenta, black,
•шестнадцатеричные коды
white
# FA8072
R G B
# FF0000
# FFFFFF
# 00FFFF
# 000000
# AAAAAA
26
Что такое CSS?
• HTML – язык логической разметки текста,
определяющий содержание и структуру страницы
(заголовки разных уровней, абзацы)
• HTML–код не должен содержать оформления!
• оформление частей документа (заголовков,
параграфов) описывается в отдельном файле
• CSS = Cascading Style Sheets – каскадные таблицы
стилей
• стилевые файлы: *.css
HTML + CSS
оформлениесодержание
+ Javascript
анимация
27
Свойства элементов страницы
body {
color: white;
background: #FF6600;
}
название тэга
свойство
селектор
color – цвет символов
background – цвет фона
my.css
значение
28
Подключение стилевого файла
<html>
<head>
<title>Пример CSS</title>
<link rel="stylesheet" href="my.css"
type="text/css">
</head>
<body>
...
</body>
</html>
qq.html
my.css
body {
color: white;
background: #0000E0;
}
<body>
...
</body>
29
Шрифты
p {
font-family: Arial,sans-serif;
font-size: 20px;
font-style: italic;
font-weight: bold;
}
для всех
абзацев
семейство
шрифтов
serif – с засечками
sans-serif – без засечек
monospace – моноширинный
размер в пикселях
normal – обычный
italic - курсив
normal – обычный
bold - жирный
Рисунки
31
Форматы рисунков
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)
• прозрачность и полупрозрачность (альфа-канал)
• нет анимации
• плохо сжимает мелкие рисунки
32
Рисунки в документе
<IMG SRC="flag.jpg">
<IMG SRC="images/flag.jpg">
<IMG SRC="../images/flag.jpg">
<IMG SRC="http://www.vasya.ru/img/flag.jpg">
из той же папки:
из другой папки:
с другого сервера:
image
(изображение)
source
(источник)
33
Выравнивание
<IMG SRC="flag.jpg" ALIGN="left">
left right
top bottom
(по умолчанию) middle
34
Отступы
<IMG SRC="net.jpg"
ALIGN="left">
<IMG SRC="net.jpg"
ALIGN="left"
HSPACE=10
VSPACE=10>
VSPACE
(vertical space)
HSPACE
(horizontal space)
35
Выравнивание и отступы (CSS)
<img src="net.jpg" class="left">
img.left {
float: left;
margin: 5px 10px;
}
= VSPACE
= HSPACE
= ALIGN
margin: 5px 10px 5px 0;
отступа слева нет!
36
Другие атрибуты
<IMG SRC="myphoto.jpg"
ALT="Моя фотография"
WIDTH=100 HEIGHT=150
BORDER=0>
• всплывающая подсказка
• надпись на месте
рисунка, если его нет
размеры позволяют:
• растянуть - сжать
• не портить дизайн,
если рисунка нет
толщина рамки
вокруг рисунка
37
Рисунок-гиперссылка
<A HREF="http://www.mail.ru">
<IMG SRC="mailru.jpg"
ALT="Бесплатная почта" BORDER=0></A>
<A HREF="table.htm">
<IMG SRC="tbl.jpg" ALT="Таблицы" BORDER=0>
</A>
локальная ссылка:
ссылка на другой сервер:
иначе будет синяя
рамка вокруг
если </A> не вплотную к
<IMG …>, будет «хвост»
не будет
«хвоста»
Понятие о Javascript
39
Что может Javascript?
• информация статична
• нет интерактивности (только переход на другую
страницу)
Чем плоха HTML-страница?
Что можно сделать с помощью Javascript?
• изменение рисунка при наведении мыши
• выпадающие меню
• всплывающие подсказки
• фотогалерея без перегрузки страницы
• движение объекта по экрану
• Javascript может быть отключен в браузере
40
Основные принципы
• каждый элемент на странице (текст, рисунок,
таблица) – это объект, имеющий свои свойства
• свойства объекта можно менять из программы
на Javascript (скрипта)
• все, что происходит – это события
• все события можно «обрабатывать», т.е. как-то
реагировать на них
Javascript – это язык программирования!!
HTML + Javascript = DHTML (Dynamic HTML)
41
Скрытый блок
<div id="details" class="hidden">
Детали &#151; это гайка, шайба, болт,
винт, шуруп, гвоздь и др.
</div>
.hidden {
display:none;
}
42
Скрытый блок: оформление
ссылки
<a href="#"
onClick="show('details');return false;">
Показать детали
</a>
остаться на
странице
по щелчку вызвать
функцию show
переход не
выполнять
Скрытый блок: как его открыть?
43
function show ( name )
{
var elem = document.getElementById(name);
if ( elem )
elem.style.display = "block";
}
<head>
<script type="text/javascript"
src="test.js">
</script>
</head>
test.js
найти блок по имени
изменить свойство
display
Формы
44
<form name="calc">
<input name="answer">
<input type="button"
value="Готово" onClick="check();">
</form>
надпись на кнопке
имя формы
имя элемента
делать по щелчку
Форма: обращение к элементам
45
function check()
{
if ( calc.answer.value == "4" )
alert("Правильно!");
else alert("Неправильно!");
}
test.js
вывести сообщение

More Related Content

What's hot

Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
Yandex
 
Noveo web intership html5, css, interface
Noveo web intership   html5, css, interfaceNoveo web intership   html5, css, interface
Noveo web intership html5, css, interface
Noveo
 
Css part2
Css part2Css part2
Css part2
ISsoft
 
Web весна 2013 лекция 8
Web весна 2013 лекция 8Web весна 2013 лекция 8
Web весна 2013 лекция 8
Technopark
 
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеровКак защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
Yandex
 
презентация занятие №1
 презентация занятие №1 презентация занятие №1
презентация занятие №1
aleksandrafanasjev
 
Css part1
Css part1Css part1
Css part1
ISsoft
 
Semanticheskaya razmetka olga_ostrenkova
Semanticheskaya razmetka olga_ostrenkovaSemanticheskaya razmetka olga_ostrenkova
Semanticheskaya razmetka olga_ostrenkova
yaevents
 
Tequila - язык для продвинутой генерации JSON
Tequila - язык для продвинутой генерации JSONTequila - язык для продвинутой генерации JSON
Tequila - язык для продвинутой генерации JSON
Ivan Nemytchenko
 
Верстка_Лекция2
Верстка_Лекция2Верстка_Лекция2
Верстка_Лекция2
itc73
 

What's hot (19)

HTML
HTMLHTML
HTML
 
04 - Web-технологии. CSS - язык описания стилей
04 - Web-технологии. CSS - язык описания стилей04 - Web-технологии. CSS - язык описания стилей
04 - Web-технологии. CSS - язык описания стилей
 
мова Html
мова Htmlмова Html
мова Html
 
03 - Web-технологии. Язык разметки HTML
03 - Web-технологии. Язык разметки HTML03 - Web-технологии. Язык разметки HTML
03 - Web-технологии. Язык разметки HTML
 
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
Основные принципы индексирования сайта, Александр Смирнов, лекция в Школе веб...
 
Noveo web intership html5, css, interface
Noveo web intership   html5, css, interfaceNoveo web intership   html5, css, interface
Noveo web intership html5, css, interface
 
Css part2
Css part2Css part2
Css part2
 
Web весна 2013 лекция 8
Web весна 2013 лекция 8Web весна 2013 лекция 8
Web весна 2013 лекция 8
 
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеровКак защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
Как защитить свой сайт, Пётр Волков, лекция в Школе вебмастеров
 
презентация занятие №1
 презентация занятие №1 презентация занятие №1
презентация занятие №1
 
Css part1
Css part1Css part1
Css part1
 
презентация 6
презентация 6презентация 6
презентация 6
 
Semanticheskaya razmetka olga_ostrenkova
Semanticheskaya razmetka olga_ostrenkovaSemanticheskaya razmetka olga_ostrenkova
Semanticheskaya razmetka olga_ostrenkova
 
Css
CssCss
Css
 
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
Инструментарий интернет-журналиста: платформы, "хард" и "софт". Основы HTML. ...
 
Tequila - язык для продвинутой генерации JSON
Tequila - язык для продвинутой генерации JSONTequila - язык для продвинутой генерации JSON
Tequila - язык для продвинутой генерации JSON
 
Семинар-практикум по Drupal
Семинар-практикум по DrupalСеминар-практикум по Drupal
Семинар-практикум по Drupal
 
Верстка_Лекция2
Верстка_Лекция2Верстка_Лекция2
Верстка_Лекция2
 
Текстовое ранжирование и тз на копирайтинг
Текстовое ранжирование и тз на копирайтингТекстовое ранжирование и тз на копирайтинг
Текстовое ранжирование и тз на копирайтинг
 

Similar to Web страницы.язык html

Web осень 2013 лекция 4
Web осень 2013 лекция 4Web осень 2013 лекция 4
Web осень 2013 лекция 4
Technopark
 
Роман Комаров — «Механизм работы браузера»
Роман Комаров — «Механизм работы браузера»Роман Комаров — «Механизм работы браузера»
Роман Комаров — «Механизм работы браузера»
Yandex
 
Артем Кувалдин: Основы HTML
Артем Кувалдин: Основы HTMLАртем Кувалдин: Основы HTML
Артем Кувалдин: Основы HTML
Yandex
 
презентация по миру
презентация по мирупрезентация по миру
презентация по миру
kuzeenka31
 

Similar to Web страницы.язык html (20)

Web осень 2013 лекция 4
Web осень 2013 лекция 4Web осень 2013 лекция 4
Web осень 2013 лекция 4
 
основы нтмл
основы нтмлосновы нтмл
основы нтмл
 
Язык Html
Язык HtmlЯзык Html
Язык Html
 
55
5555
55
 
Мировые информационные ресурсы. Лекция 4
Мировые информационные ресурсы. Лекция 4Мировые информационные ресурсы. Лекция 4
Мировые информационные ресурсы. Лекция 4
 
CSS глазами машин
CSS глазами машинCSS глазами машин
CSS глазами машин
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
dfvbfgbghbhg
dfvbfgbghbhgdfvbfgbghbhg
dfvbfgbghbhg
 
Lection1
Lection1Lection1
Lection1
 
Изучение HTML, CSS, PHP, MySQL
Изучение HTML, CSS, PHP, MySQLИзучение HTML, CSS, PHP, MySQL
Изучение HTML, CSS, PHP, MySQL
 
Язык HTML
Язык HTMLЯзык HTML
Язык HTML
 
Язык HTML
Язык HTMLЯзык HTML
Язык HTML
 
Дмитрий Прокопцев "Memory-mapped storage: ещё один подход к сериализации данных"
Дмитрий Прокопцев "Memory-mapped storage: ещё один подход к сериализации данных"Дмитрий Прокопцев "Memory-mapped storage: ещё один подход к сериализации данных"
Дмитрий Прокопцев "Memory-mapped storage: ещё один подход к сериализации данных"
 
Блоки как элементы макета сайта
Блоки как элементы макета сайтаБлоки как элементы макета сайта
Блоки как элементы макета сайта
 
5793.ppt
5793.ppt5793.ppt
5793.ppt
 
Роман Комаров — «Механизм работы браузера»
Роман Комаров — «Механизм работы браузера»Роман Комаров — «Механизм работы браузера»
Роман Комаров — «Механизм работы браузера»
 
Css_pres
Css_presCss_pres
Css_pres
 
Артем Кувалдин: Основы HTML
Артем Кувалдин: Основы HTMLАртем Кувалдин: Основы HTML
Артем Кувалдин: Основы HTML
 
презентация по миру
презентация по мирупрезентация по миру
презентация по миру
 

More from Гимназия

More from Гимназия (15)

Word
Word Word
Word
 
Windows
WindowsWindows
Windows
 
паскаль
паскальпаскаль
паскаль
 
Dlya pedagogov
Dlya pedagogovDlya pedagogov
Dlya pedagogov
 
устройства памяти
устройства памятиустройства памяти
устройства памяти
 
устройства компьютера
устройства компьютераустройства компьютера
устройства компьютера
 
системы счисления
системы счислениясистемы счисления
системы счисления
 
разбор с
разбор сразбор с
разбор с
 
презентация
презентацияпрезентация
презентация
 
вирусы и антивирусы
вирусы и антивирусывирусы и антивирусы
вирусы и антивирусы
 
моделирование
моделированиемоделирование
моделирование
 
этапы моделирования
этапы моделированияэтапы моделирования
этапы моделирования
 
Компьютерные сети
Компьютерные сетиКомпьютерные сети
Компьютерные сети
 
Глобальная компьютерная сеть
Глобальная компьютерная сетьГлобальная компьютерная сеть
Глобальная компьютерная сеть
 
работа в Excel
работа в Excelработа в Excel
работа в Excel
 

Web страницы.язык html

  • 2. 2 Что такое Web-страницы? Гиперссылка – «активная»ссылка на другой документ. Гипертекст – текст, содержащий гиперссылки. Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой. WWW (World Wide Web) – «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа). Web-страница – текстовый файл, в котором описано размещение материала на экране. Браузер – программа для просмотра Web-страниц на экране (Internet Explorer, Mozilla Firefox, Opera).
  • 3. 3 Какие бывают Web-страницы? •статические – существуют на сервере в виде готовых файлов: *.htm, *.html •динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из базы данных) *.shtml, *.asp, *.pl, *.php • позволяют выбирать информацию из базы данных по заранее неизвестным запросам • дополнительная нагрузка на сервер • загружаются медленнее
  • 4. 4 Язык HTML HTML = Hypertext Markup Language (язык разметки гипертекста) HTML – это не язык программирования!! HTML-страница – это текстовый файл (Блокнот): <HTML> <HEAD> <TITLE>Моя страница</TITLE> </HEAD> <BODY> Привет! … </BODY> </HTML> index.html
  • 5. 5 Тэги Тэг – это команда языка HTML, которую выполняет браузер: • непарные тэги • парные тэги (контейнеры) <IMG SRC = "vasya.jpg"> вставить рисунок <TABLE> ... </TABLE> открывающий закрывающий область действия тэга: описание таблицы
  • 6. 6 Простейшая Web-страница <HTML> <HEAD> <TITLE>Моя первая Web-страница</TITLE> </HEAD> <BODY> Привет! </BODY> </HTML> first.html <HEAD> <TITLE>Моя первая Web-страница</TITLE> </HEAD> шапка («голова») <BODY> Привет! </BODY> основная часть («тело»)
  • 8. 8 Заголовки: H1 … H6 <BODY> <H1>Заголовок документа</H1> <H2>Заголовок раздела</H2> <H3>Заголовок подраздела</H3> <H4>Заголовок параграфа</H4> <H5>Комментарий</H5> <H6>Авторские пометки</H6> </BODY> выравнивание: <H1 ALIGN=center>История</H1> left, center, right
  • 9. 9 Абзацы • переход на новую строку • абзац (с отступами) И вечный бой! Покой нам только снится<BR> Сквозь кровь и пыль...<BR> Летит, летит степная кобылица<BR> И мнет ковыль... <P> Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее. </P> <P> До самого вечера тело с варежками ... </P>
  • 10. 10 Выравнивание <P ALIGN="center"> Этот текст выровнен по центру. </P> <P ALIGN="justify"> Этот текст выровнен по ширине. Этот текст выровнен по ширине. Этот текст выровнен по ширине. Этот текст выровнен по ширине. </P> left по левой границе right по правой границе center по центру justify по ширине Не используйте выравнивание по ширине для узких столбцов! ! атрибут тэга <P>
  • 12. 12 Маркированные списки <UL> <LI>Вася <LI>Петя <LI>Коля </UL> unordered list (неупорядоченный список) list item (элемент списка) изменение маркера: <UL TYPE="disk"> ... </UL> disk  circle ○ square ■
  • 13. 13 Нумерованные списки <OL> <LI>Вася <LI>Петя <LI>Коля </OL> ordered list (упорядоченный список) изменение нумерации: <OL TYPE=i START=3> ... </OL> 1, i, I, a, A
  • 14. 14 Списки определений <DL> <DT>компьютер <DD>устройство для обработки информации <DT>дискета <DD>гибкий магнитный диск <DT>винчестер <DD>жесткий магнитный диск </DL> definition list (список определений) definition term (термин) definition description (описание)
  • 15. 15 Многоуровневые списки <UL> <LI>Города России <LI>Города Украины </UL> <OL> <LI>Москва <LI>Санкт-Петерург </OL> <OL> <LI>Киев <LI>Одесса </OL>
  • 17. 17 Ссылки на другие страницы сайта <A HREF="table.htm">Таблицы</A> •страница в той же папке anchor (якорь) hyper reference (гиперссылка) •страница во вложенной папке <A HREF="example/ex1.htm">Пример</A> •страница в соседней папке <A HREF="../texts/text1.htm">Текст</A> выйти из текущей папки
  • 18. 18 Ссылки на другие сайты <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>
  • 19. 19 Ссылки внутри страницы <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> •в другом файле <A HREF="texts.html#color">Цвет текста</A> метка (якорь) переход на метку
  • 20. 20 Запуск почтовой программы <A HREF="mailto:vasya@mail.ru"> Напишите мне! </A>
  • 21. 21 Тэг BODY – общие свойства страницы• цвет фона и текста • цвет гиперссылок <BODY TEXT="white" BGCOLOR=#00FF00> Привет! </BODY> <BODY LINK="#FF8C00" VLINK=green> ... </BODY> цвет текста цвет фона посещенные ссылки (visited link) цвет ссылок атрибуты тэга
  • 22. 22 Цвет гиперссылок <BODY LINK="#FF8C00" VLINK=green ALINK=red> ... </BODY> LINK ссылки, на которых не были VLINK посещенные ссылки ALINK активные ссылки
  • 23. 23 Цвет гиперссылок <BODY LINK="#FF8C00" VLINK=green ALINK=red> ... </BODY> LINK ссылки, на которых не были VLINK посещенные ссылки ALINK активные ссылки
  • 24. 24 Линия-разделитель <HR> <HR WIDTH="60%" SIZE="3" ALIGN="right"> horizontal rule ширина в пикселях или процентах толщина выравнивание Не рекомендуется использовать – лучше заголовки разделов! !
  • 25. 25 Кодирование цвета •имена red, green, blue, magenta, black, •шестнадцатеричные коды white # FA8072 R G B # FF0000 # FFFFFF # 00FFFF # 000000 # AAAAAA
  • 26. 26 Что такое CSS? • HTML – язык логической разметки текста, определяющий содержание и структуру страницы (заголовки разных уровней, абзацы) • HTML–код не должен содержать оформления! • оформление частей документа (заголовков, параграфов) описывается в отдельном файле • CSS = Cascading Style Sheets – каскадные таблицы стилей • стилевые файлы: *.css HTML + CSS оформлениесодержание + Javascript анимация
  • 27. 27 Свойства элементов страницы body { color: white; background: #FF6600; } название тэга свойство селектор color – цвет символов background – цвет фона my.css значение
  • 28. 28 Подключение стилевого файла <html> <head> <title>Пример CSS</title> <link rel="stylesheet" href="my.css" type="text/css"> </head> <body> ... </body> </html> qq.html my.css body { color: white; background: #0000E0; } <body> ... </body>
  • 29. 29 Шрифты p { font-family: Arial,sans-serif; font-size: 20px; font-style: italic; font-weight: bold; } для всех абзацев семейство шрифтов serif – с засечками sans-serif – без засечек monospace – моноширинный размер в пикселях normal – обычный italic - курсив normal – обычный bold - жирный
  • 31. 31 Форматы рисунков 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) • прозрачность и полупрозрачность (альфа-канал) • нет анимации • плохо сжимает мелкие рисунки
  • 32. 32 Рисунки в документе <IMG SRC="flag.jpg"> <IMG SRC="images/flag.jpg"> <IMG SRC="../images/flag.jpg"> <IMG SRC="http://www.vasya.ru/img/flag.jpg"> из той же папки: из другой папки: с другого сервера: image (изображение) source (источник)
  • 33. 33 Выравнивание <IMG SRC="flag.jpg" ALIGN="left"> left right top bottom (по умолчанию) middle
  • 35. 35 Выравнивание и отступы (CSS) <img src="net.jpg" class="left"> img.left { float: left; margin: 5px 10px; } = VSPACE = HSPACE = ALIGN margin: 5px 10px 5px 0; отступа слева нет!
  • 36. 36 Другие атрибуты <IMG SRC="myphoto.jpg" ALT="Моя фотография" WIDTH=100 HEIGHT=150 BORDER=0> • всплывающая подсказка • надпись на месте рисунка, если его нет размеры позволяют: • растянуть - сжать • не портить дизайн, если рисунка нет толщина рамки вокруг рисунка
  • 37. 37 Рисунок-гиперссылка <A HREF="http://www.mail.ru"> <IMG SRC="mailru.jpg" ALT="Бесплатная почта" BORDER=0></A> <A HREF="table.htm"> <IMG SRC="tbl.jpg" ALT="Таблицы" BORDER=0> </A> локальная ссылка: ссылка на другой сервер: иначе будет синяя рамка вокруг если </A> не вплотную к <IMG …>, будет «хвост» не будет «хвоста»
  • 39. 39 Что может Javascript? • информация статична • нет интерактивности (только переход на другую страницу) Чем плоха HTML-страница? Что можно сделать с помощью Javascript? • изменение рисунка при наведении мыши • выпадающие меню • всплывающие подсказки • фотогалерея без перегрузки страницы • движение объекта по экрану • Javascript может быть отключен в браузере
  • 40. 40 Основные принципы • каждый элемент на странице (текст, рисунок, таблица) – это объект, имеющий свои свойства • свойства объекта можно менять из программы на Javascript (скрипта) • все, что происходит – это события • все события можно «обрабатывать», т.е. как-то реагировать на них Javascript – это язык программирования!! HTML + Javascript = DHTML (Dynamic HTML)
  • 41. 41 Скрытый блок <div id="details" class="hidden"> Детали &#151; это гайка, шайба, болт, винт, шуруп, гвоздь и др. </div> .hidden { display:none; }
  • 42. 42 Скрытый блок: оформление ссылки <a href="#" onClick="show('details');return false;"> Показать детали </a> остаться на странице по щелчку вызвать функцию show переход не выполнять
  • 43. Скрытый блок: как его открыть? 43 function show ( name ) { var elem = document.getElementById(name); if ( elem ) elem.style.display = "block"; } <head> <script type="text/javascript" src="test.js"> </script> </head> test.js найти блок по имени изменить свойство display
  • 44. Формы 44 <form name="calc"> <input name="answer"> <input type="button" value="Готово" onClick="check();"> </form> надпись на кнопке имя формы имя элемента делать по щелчку
  • 45. Форма: обращение к элементам 45 function check() { if ( calc.answer.value == "4" ) alert("Правильно!"); else alert("Неправильно!"); } test.js вывести сообщение