Презентация "Web - страницы. Язык HTML" 10 класс
Подписи к слайдам:
<BODY>
<H1>Заголовок документа</H1>
<H2>Заголовок раздела</H2>
<H3>Заголовок подраздела</H3>
<H4>Заголовок параграфа</H4>
<H5>Комментарий</H5>
<H6>Авторские пометки</H6>
</BODY>
выравнивание:
<H1 ALIGN=center>История</H1>
left,
center,
right
Абзацы- переход на новую строку
- абзац (с отступами)
И вечный бой! Покой
нам только снится <BR>
Сквозь кровь и пыль...<BR>
Летит, летит степная
кобылица <BR>
И мнет ковыль...
<P>
Одно физическое тело захотело поменять три своих старых варежки
на что-нибудь хорошее. </P>
<P> До самого вечера тело с варежками ...
</P>
Выравнивание<P ALIGN="center">
Этот текст выровнен по центру.
</P>
<P ALIGN="justify">
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине. </P>
left по левой границе
right по правой границе
center по центру
justify по ширине
Не используйте выравнивание по ширине для узких столбцов!
!
атрибут тэга <P>
Специальные символы|
Символ |
HTML-код |
Название |
|
– |
— |
(длинное) тире |
|
|
|
неразрывный пробел |
|
§ |
§ |
параграф |
|
© |
© |
символ авторского права |
|
« |
« |
левая русская кавычка |
|
» |
» |
правая русская кавычка |
|
® |
® |
зарегистрированная торговая марка |
|
° |
° |
градус |
|
² |
² |
квадрат |
|
³ |
³ |
куб |
|
¼ |
¼ |
четверть |
|
½ |
½ |
половина |
|
¾ |
¾ |
три четверти |
|
× |
× |
знак умножения |
|
÷ |
÷ |
знак деления |
<UL>
<LI>Вася
<LI>Петя
<LI>Коля
</UL>
unordered list (неупорядоченный список)
list item (элемент списка)
изменение маркера:
<UL TYPE="disk">
...
</UL>
disk
circle ○
square ■
Нумерованные списки<OL>
<LI>Вася
<LI>Петя
<LI>Коля
</OL>
ordered list (упорядоченный список)
изменение нумерации:
<OL TYPE=i START=3>
...
</OL>
1, i, I, a, A
Списки определений<DL>
<DT>компьютер
<DD>устройство для обработки информации
<DT>дискета
<DD>гибкий магнитный диск
<DT>винчестер
<DD>жесткий магнитный диск
</DL>
definition list (список определений)
definition term (термин)
definition description (описание)
Многоуровневые списки<UL> <LI>Города России
<LI>Города Украины
</UL>
<OL> <LI>Москва <LI>Санкт-Петерург </OL>
<OL> <LI>Киев <LI>Одесса </OL>
Тэг FONT – свойства блока текста- цвет текста
- размер шрифта
Привет!
<FONT COLOR=red>
Как дела?
</FONT>
Привет!
<FONT COLOR=red
SIZE=6>
Как дела?
</FONT>
от 1 до 7
(3 – нормальный)
Форматирование текста|
курсив (italic) |
<I>Вася</I> |
Вася |
|
жирный (bold) |
<B>Вася</B> |
Вася |
|
подчеркивание (underline) |
<U>Вася</U> |
Вася |
|
зачеркивание (strike out) |
<S>Вася</S> |
Вася |
|
верхний индекс (superscript) |
Вася<SUP>2</SUP> |
Вася2 |
|
нижний индекс (subscript) |
Вася<SUB>2</SUB> |
Вася2 |
- цвет фона и текста
- цвет гиперссылок
<BODY TEXT="white" BGCOLOR=#00FF00>
Привет!
</BODY>
<BODY LINK="#FF8C00" VLINK=green>
...
</BODY>
цвет текста
цвет фона
посещенные ссылки
(visited link)
цвет ссылок
атрибуты тэга
Цвет гиперссылок<BODY LINK="#FF8C00" VLINK=green ALINK=red>
...
</BODY>
LINK ссылки, на которых не были
VLINK посещенные ссылки
ALINK активные ссылки
Линия-разделитель<HR>
<HR WIDTH="60%" SIZE="3" ALIGN="right">
horizontal rule
ширина в пикселях или процентах
толщина
выравнивание
Рисунки в документе<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 (источник)
Выравнивание<IMG SRC="flag.jpg" ALIGN="left">
left
right
top
bottom
(по умолчанию)
middle
Отступы<IMG SRC="net.jpg" ALIGN="left">
<IMG SRC="net.jpg" ALIGN="left" HSPACE=10 VSPACE=10>
VSPACE
(vertical space)
HSPACE
(horizontal space)
Другие атрибуты<IMG SRC="myphoto.jpg" ALT="Моя фотография" WIDTH=100 HEIGHT=150 BORDER=0>
- всплывающая подсказка
- надпись на месте рисунка, если его нет
размеры позволяют:
- растянуть - сжать
- не портить дизайн, если рисунка нет
толщина рамки вокруг рисунка
Простейшая таблица<TABLE BORDER="1">
<TR>
<TD>Таблица из одной строки</TD>
<TD>из трех столбцов</TD>
<TD>без указания ширины таблицы
и ячеек.</TD>
</TR>
</TABLE>
толщина рамки
TABLE таблица
TR = table row строка таблицы
TD = table data данные таблицы
TH = table header заголовок (жирный, по центру)
Размеры<TABLE WIDTH="60%" HEIGHT="300">
...
</TABLE>
ширина в пикселях или в % от ширины окна браузера
высота в пикселях
<TR HEIGHT="50">
...
</TR>
всей таблицы:
строки:
ячейки:
<TD WIDTH="25%" HEIGHT="50">
...
</TD>
ширина в пикселях или в % от ширины таблицы
Выравнивание<TABLE BORDER="1">
<TR ALIGN="center"
VALIGN="top">
<TD WIDTH=120 HEIGHT=100>По
центру, по верхней границе</TD>
<TD ALIGN="right" VALIGN="middle"
WIDTH=200>По правой границе,
по середине</TD>
</TR>
</TABLE>
<TABLE ALIGN="center">
...
</TABLE>
всей таблицы:
информации в ячейках:
left,
center,
right
left,
center,
right
top,
middle,
bottom
Отступы<TABLE CELLSPACING = 10 CELLPADDING = 10
BGCOLOR = blue>
<TR BGCOLOR = white>
<TD WIDTH = 100>1</TD>
<TD WIDTH = 100>2</TD>
</TR>
</TABLE>
интервал между ячейками
отступ внутри ячеек
CELLSPACING
CELLSPACING
CELLPADDING
CELLPADDING
Объединение ячеек<TABLE BORDER="1">
<TR>
<TD COLSPAN="3">Привет!</TD>
</TR>
<TR>
<TD>Вася,</TD>
<TD>Петя,</TD>
<TD>Маша!</TD>
</TR>
</TABLE>
<TABLE BORDER="1">
<TR>
<TD ROWSPAN="3">Привет!</TD>
<TD>Вася,</TD>
</TR>
<TR><TD>Петя,</TD></TR>
<TR><TD>Маша!</TD></TR>
</TABLE>
column span охват столбцов
row span охват строк
