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