Web-страницы. Язык HTML и др.
Язык HTML
Тэги
Простейшая Web-страница
Web-страницы. Язык HTML и др.
Заголовки: H1 … H6
Абзацы
Выравнивание
Тэг FONT – свойства блока текста
Специальные символы
Специальные символы
Web-страницы. Язык HTML и др.
Маркированные списки
Нумерованные списки
Списки определений
Многоуровневые списки
Web-страницы. Язык HTML и др.
Ссылки на другие страницы сайта
Примеры (ссылки из файла rock.html)
Ссылки на другие сайты
Ссылки внутри страницы
Запуск почтовой программы
Приложение
Логическая разметка
Форматированный текст (тексты программ)
Физическая разметка
Тэг BODY – общие свойства страницы
Цвет гиперссылок
Тэг FONT – свойства блока текста
Линия-разделитель
Кодирование цвета
Web-страницы. Язык HTML и др.
Форматы рисунков
Фон страницы (через HTML)
Фон страницы (через CSS)
Рисунки в документе
Выравнивание
Отступы
Другие атрибуты
Рисунок-гиперссылка
Web-страницы. Язык HTML и др.
Простейшая таблица
Размеры
Выравнивание
1.67M
Категория: ИнтернетИнтернет

Web-страницы. Язык HTML и др. Тема 1

1. Web-страницы. Язык HTML и др.

Тема 1. Введение

2. Язык HTML

2
Язык HTML
HTML = Hypertext Markup Language
(язык разметки гипертекста)
!
HTML – это не язык программирования!
HTML-страница – это текстовый файл (Блокнот):
index.html
<HTML>
<HEAD>
<TITLE>Моя страница</TITLE>
</HEAD>
<BODY>
Привет!

</BODY>
</HTML>
images
sail.jpg
bee.wav
man.jpg
clock.avi
sunset.jpg
ball.swf

3. Тэги

3
Тэги
Тэг – это команда языка HTML, которую выполняет
браузер:
вставить
• непарные тэги
рисунок
<IMG SRC = "vasya.jpg">
• парные тэги (контейнеры)
открывающий
<TABLE>
...
</TABLE>
область действия
тэга: описание
таблицы
закрывающий

4. Простейшая Web-страница

4
Простейшая Web-страница
first.html
шапка («голова»)
<HTML>
<HEAD>
<TITLE>Моя первая
Web-страница</TITLE>
</HEAD>
<BODY>
Привет!
</BODY>
</HTML>
основная часть
(«тело»)

5. Web-страницы. Язык HTML и др.

Тема 2. Структура документа.
Специальные символы

6. Заголовки: H1 … H6

6
Заголовки: H1 … H6
<BODY>
<H1>Заголовок документа</H1>
<H2>Заголовок раздела</H2>
<H3>Заголовок подраздела</H3>
<H4>Заголовок параграфа</H4>
<H5>Комментарий</H5>
<H6>Авторские пометки</H6>
</BODY>
left,
выравнивание:
center,
right
<H1 ALIGN=center>История</H1>

7. Абзацы

7
Абзацы
• переход на новую строку
И вечный бой! Покой
нам только снится<BR>
Сквозь кровь и пыль...<BR>
Летит, летит степная
кобылица<BR>
И мнет ковыль...
• абзац (с отступами)
<P>
Одно физическое тело захотело
поменять три своих старых варежки
на что-нибудь хорошее.
</P>
<P>
До самого вечера тело с варежками ...
</P>

8. Выравнивание

8
Выравнивание
атрибут тэга <P>
<P ALIGN="center">
Этот текст выровнен
</P>
<P ALIGN="justify">
Этот текст выровнен
Этот текст выровнен
Этот текст выровнен
Этот текст выровнен
</P>
left
right
center
justify
по центру.
по
по
по
по
ширине.
ширине.
ширине.
ширине.
по левой границе
по правой границе
по центру
по ширине
!
Не используйте
выравнивание по
ширине для узких
столбцов!

9. Тэг FONT – свойства блока текста

10
Специальные символы
Символ
HTML-код
Название

&mdash;
(длинное) тире
&nbsp;
неразрывный пробел
§
&sect;
параграф
©
&copy;
символ авторского права
«
&laquo;
левая русская кавычка
»
&raquo;
правая русская кавычка
®
&reg;
зарегистрированная торговая марка
°
&deg;
градус
²
&sup2;
квадрат
³
&sup3;
куб
¼
&frac14;
четверть
½
&frac12;
половина
¾
&frac34;
три четверти
×
&times;
знак умножения
÷
&divide;
знак деления

10. Специальные символы

11
Специальные символы
А.С.&nbsp;Пушкин&nbsp;&mdash; солнце
русской поэзии.
Из дома вышел А.С.
Пушкин – солнце
русской поэзии.
Вышел А.С. Пушкин
– солнце русской
поэзии.
Дом сдали в 2011&nbsp;году.
Пёс весил 12&nbsp;кг.

11. Специальные символы

Web-страницы.
Язык HTML и др.
Тема 3. Списки

12. Web-страницы. Язык HTML и др.

13
Маркированные списки
unordered list
(неупорядоченный список)
<UL>
<LI>Вася
<LI>Петя
<LI>Коля
</UL>
list item
(элемент списка)
изменение маркера:
<UL TYPE="disc">
...
</UL>
disc
circle

square ■

13. Маркированные списки

14
Нумерованные списки
ordered list
(упорядоченный список)
<OL>
<LI>Вася
<LI>Петя
<LI>Коля
</OL>
изменение нумерации:
1, i, I, a, A
<OL TYPE=i START=3>
...
</OL>

14. Нумерованные списки

15
Списки определений
definition list (список определений)
<DL>
definition term (термин)
<DT>компьютер
<DD>устройство для
обработки информации
<DT>дискета
<DD>гибкий магнитный диск
<DT>винчестер
<DD>жесткий магнитный
диск
</DL>
definition description
(описание)

15. Списки определений

16
Многоуровневые списки
<UL>
<LI>Города России
<OL>
<LI>Москва
<LI>Санкт-Петерург
</OL>
<LI>Города Украины
<OL>
<LI>Киев
<LI>Одесса
</OL>
</UL>

16. Многоуровневые списки

Web-страницы.
Язык HTML и др.
Тема 4. Гиперссылки

17. Web-страницы. Язык HTML и др.

18
Ссылки на другие страницы сайта
• страница в той же папке
anchor (якорь)
<A HREF="table.htm">Таблицы</A>
hyper reference
(гиперссылка)
• страница во вложенной папке
<A HREF="example/ex1.htm">Пример</A>
• страница в соседней папке
<A HREF="../texts/text1.htm">Текст</A>
выйти из текущей папки

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

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

story.html
novels

list.html

new
rock.html
sea.html

old
verse.html

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

20
Ссылки на другие сайты
• на главную страницу сайта
<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>

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

21
Ссылки внутри страницы
<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>

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

22
Запуск почтовой программы
<A HREF="mailto:[email protected]">
Напишите мне!
</A>

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

23
Приложение

23. Приложение

24
Логическая разметка
выделение
(emphasize)
сильное выделение
(strong)
код программы
Это моя <EM>первая</EM>
победа.
<STRONG>Вася</STRONG>
<CODE>a:= 2*b</CODE>
определение
(definition)
<DFN>Сурок</DFN> это...
цитата (citation)
<CITE>Блажен, кто
верует, ...</CITE>
сокращение
(abbreviation)
<ABBR>НИИЧАВО</ABBR>

24. Логическая разметка

25
Форматированный текст (тексты программ)
program qq;
var a, b: integer;
begin
writeln("Введите два числа");
read(a,b);
writeln(a,'+',b,'=',a+b);
отформатированный текст
end.
(preformatted)
<PRE>
program qq;
var a, b: integer;
begin
writeln("Введите два числа");
read(a,b);
writeln(a,'+',b,'=',a+b);
end.
</PRE>

25. Форматированный текст (тексты программ)

26
Физическая разметка
курсив (italic)
<I>Вася</I>
Вася
жирный (bold)
<B>Вася</B>
Вася
подчеркивание
(underline)
<U>Вася</U>
Вася
зачеркивание
(strike out)
<S>Вася</S>
Вася
верхний индекс
(superscript)
Вася<SUP>2</SUP> Вася2
нижний индекс
(subscript)
Вася<SUB>2</SUB> Вася2

26. Физическая разметка

31
Кодирование цвета
• имена
red, green, blue, magenta, black, white
• шестнадцатеричные коды
# FA8072
R G B
# FF0000
# FFFFFF
# 00FFFF
# 000000
# AAAAAA

27. Тэг BODY – общие свойства страницы

Web-страницы.
Язык HTML и др.
Тема Рисунки

28. Цвет гиперссылок

33
Форматы рисунков
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)
прозрачность и полупрозрачность (альфа-канал)
нет анимации
плохо сжимает мелкие рисунки

29. Тэг FONT – свойства блока текста

34
Фон страницы (через HTML)
<BODY BACKGROUND="back.jpg">
<BODY BACKGROUND="figures/back.jpg">
<BODY BACKGROUND="back.jpg" TEXT="white">

30. Линия-разделитель

35
Фон страницы (через CSS)
body {
background: url(back.jpg); #6e5c62;
}
'images/back.jpg'
'../images/back.jpg‘
'http://www.vasya.ru/images/back.jpg'
!
Не должно быть «швов»!
!
Фон не должен
мешать!

31. Кодирование цвета

36
Рисунки в документе
из той же папки:
image
(изображение)
source
(источник)
<IMG SRC="flag.jpg">
из другой папки:
<IMG SRC="images/flag.jpg">
<IMG SRC="../../images/night.jpg">
с другого сервера:
<IMG SRC="http://example.com/img/night.jpg">

32. Web-страницы. Язык HTML и др.

37
Выравнивание
<IMG SRC="flag.jpg" ALIGN="left">
left
top
right
bottom
(по умолчанию)
middle

33. Форматы рисунков

38
Отступы
<IMG SRC="net.jpg"
ALIGN="left">
<IMG SRC="net.jpg"
ALIGN="left"
HSPACE=10
VSPACE=10>
VSPACE
(vertical space)
HSPACE
(horizontal space)

34. Фон страницы (через HTML)

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

35. Фон страницы (через CSS)

40
Рисунок-гиперссылка
локальная ссылка:
иначе будет синяя
рамка вокруг
<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>

36. Рисунки в документе

Web-страницы.
Язык HTML и др.
Тема Таблицы

37. Выравнивание

42
Простейшая таблица
толщина рамки
<TABLE BORDER="1">
<TR>
<TD>Таблица из одной строки</TD>
<TD>из трех столбцов</TD>
<TD>без указания ширины таблицы
и ячеек.</TD>
</TR>
</TABLE>
TABLE
TR = table row
TD = table data
TH = table header
таблица
строка таблицы
данные таблицы
заголовок (жирный, по центру)

38. Отступы

43
Размеры
всей таблицы:
высота в пикселях
<TABLE WIDTH="60%" HEIGHT="300">
...
ширина в пикселях
</TABLE>
или в % от ширины
строки:
окна браузера
<TR HEIGHT="50">
...
ширина в пикселях
</TR>
ячейки:
или в % от ширины
таблицы
<TD WIDTH="25%" HEIGHT="50">
...
</TD>

39. Другие атрибуты

44
Выравнивание
всей таблицы:
<TABLE ALIGN="center">
...
</TABLE>
информации в ячейках:
left,
center,
right
left,
center,
right
<TABLE BORDER="1">
<TR ALIGN="center"
VALIGN="top">
<TD WIDTH=120 HEIGHT=100>По
центру, по верхней границе</TD>
<TD ALIGN="right" VALIGN="middle"
WIDTH=200>По правой границе,
по середине</TD>
</TR>
</TABLE>
top,
middle,
bottom

40. Рисунок-гиперссылка

45
Фон и цвет текста
цвет фона
<TABLE BORDER="1" BGCOLOR="green">
<TR HEIGHT=30 BGCOLOR="blue">
<TD><FONT COLOR="white">Привет!</FONT></TD>
<TD BGCOLOR="red"></TD>
</TR>
фоновый рисунок
<TR>
<TD BACKGROUND="web.jpg">Таблица из двух
строк</TD>
<TD>и двух столбцов</TD>
</TR>
</TABLE>

41. Web-страницы. Язык HTML и др.

46
Отступы
интервал между
ячейками
отступ внутри
ячеек
<TABLE CELLSPACING = 10 CELLPADDING = 10
BGCOLOR = blue>
<TR BGCOLOR = white>
<TD WIDTH = 100>1</TD>
<TD WIDTH = 100>2</TD>
</TR>
</TABLE>
CELLPADDING
CELLPADDING
CELLSPACING
CELLSPACING

42. Простейшая таблица

47
Отступы (CSS)
<table id="qq">
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
</table>
padding
padding
table#qq {
background: blue;
border-collapse: separate;
border-spacing: 10px;
padding: 10px;
кроме IE 6
}
#qq tr {
background: white;
}
border-spacing
border-spacing

43. Размеры

48
Объединение ячеек
<TABLE BORDER="1">
<TR>
<TD COLSPAN="3">Привет!</TD>
</TR>
<TR>
<TD>Вася,</TD>
column span
<TD>Петя,</TD>
охват столбцов
<TD>Маша!</TD>
</TR>
</TABLE>
row span
охват строк
<TABLE BORDER="1">
<TR>
<TD ROWSPAN="3">Привет!</TD>
<TD>Вася,</TD>
</TR>
<TR><TD>Петя,</TD></TR>
<TR><TD>Маша!</TD></TR>
</TABLE>

44. Выравнивание

49
Вложенные таблицы
<TABLE BORDER="0" CELLSPACING=10>
<TR><TD>
<TABLE BORDER="1">
<TR><TD>Вася</TD><TD>Петя</TD></TR>
<TR><TD>Маша</TD><TD>Даша</TD></TR>
</TABLE>
</TD>
<TD>
<TABLE BORDER="1">
<TR><TD>1</TD><TD>22</TD></TR>
<TR><TD>333</TD><TD>4444</TD></TR>
</TABLE>
</TD></TR>
</TABLE>
English     Русский Правила