HTML - сайт СОШ "№5
advertisement
HTML
Язык
гипертекстовой
разметки страниц
Содержание:
Структура HTML
документа
Заголовок
Абзац
Атрибуты тегов
Inline-описание
(style)
Атрибуты тега
body
Фиксированный
текст
Вставка рисунка
Линии
Списки
Ссылки
Таблицы
Фреймы
Web-страница
Web-страница – это документ в
формате HTML, содержащий текст
и специальные инструкции –
дескрипторы (тэги) HTML.
Документы HTML хранятся в файле
с расширением .html, или .htm
(например, index.html)
Дескрипторы HTML
Дескрипторы HTML сообщают Web-броузеру
информацию о структуре и особенностях
форматирования web-страницы. Каждый
дескриптор содержит определенную
инструкцию и заключен в уголковые скобки
(< и >)
Многие дескрипторы обладают атрибутами,
позволяющие указывать значения параметров
Структура HTML документа
<html>
<head>
Служебная информация
</head>
<body>
тело документа
</body>
</html>
Создание текста
Текст написанный между тегами отображается на экране
<html>
<head> <title>Цветы и фрукты</title>
</head>
<body>
Фрукты и цветы. У вас нет собственного сада? Не
беда! Наши специальные патентованные удобрения
позволяют выращивать роскошные и пышущие здоровьем
фрукты прямо ДОМА! Вырастите чудесные экзотические
цветы и подарите своим друзьям
</body>
</html>
Отображение в окне
броузера
Фрукты и цветы. У вас нет собственного
сада? Не беда! Наши специальные
патентованные удобрения позволяют
выращивать роскошные и пышущие
здоровьем фрукты прямо ДОМА!
Вырастите чудесные экзотические цветы
и подарите своим друзьям
Создание заголовков
Заголовки создаются тегом <h>. Используется
6 уровней заголовков от <h1> до <h6>
Например:
Заголовок
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
Заголовок 2
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
Заголовок 3
<h5>Заголовок 5</h5>
Заголовок 4
<h6>Заголовок 6</h6>
Заголовок 5
Заголовок 6
1
Абзац
Абзац создается тегом <p>
Например:
<p>Текст абзаца</p>
Форматирование текста
<body>
<h1>Фрукты и цветы</h1>
<p>У вас нет собственного сада? Не беда!
Наши специальные патентованные
удобрения позволяют выращивать
роскошные и пышущие здоровьем фрукты
прямо ДОМА!</p>
<p> Вырастите чудесные экзотические
цветы и подарите своим друзьям</p>
</body>
Фрукты и цветы
У вас нет собственного сада? Не беда!
Наши специальные патентованные
удобрения позволяют выращивать
роскошные и пышущие здоровьем
фрукты прямо ДОМА!
Вырастите чудесные экзотические
цветы и подарите своим друзьям
Атрибуты тегов
<Имя тега атрибут1=значение1
атрибут2=значение2>
Текст
</ имя тэга>
Например:
<p align="center">Текст</p>
Атрибут style
Устанавливает стиль написания текста
<a style="параметры">текст<p>
Style="параметр1:значение1;
параметр2:значение2;…"
Основные параметры
шрифта
font-weight: [bold|normal|number] жирность шрифта
font-style: [normal|italic|oblique] - наклон
шрифта
font-size: number - размер шрифта
font-family: name - гарнитура шрифта
color: number - цвет шрифта
background-color: number - цвет
подложки
background: url - текстурная подложка
Например:
<p style="font-weight:bold;font-style:italic;
font-size:72;font-family:arial;color:red;">
текст абзаца
</p>
текст абзаца
Основные параметры
абзаца
text-align: [left|right|center|justify]
– выравнивание
text-indent: number - отступ
красной строки
line-height: number – интерлиньяж
letter-spacing: number – трекинг
(межстрочный интервал)
(межбуквенный интервал)
Основные параметры
абзаца (отступы от текста)
padding-left: number - отступ от
текста слева
padding-right: number - отступ от
текста справа
padding-top: number - отступ от
текста сверху
padding-bottom: number - отступ
от текста снизу
Основные параметры
абзаца (отступы от границ)
margin-left: number - отступ от
границы слева
margin-right: number - отступ от
границы справа
margin-top: number - отступ от
границы сверху
margin-bottom: number - отступ от
границы снизу
Атрибуты тега <body>
•Text – цвет текста
•Bgcolor – цвет фона
•Background=url – фоновый рисунок
Например:
<body text=#338833 bgcolor =#112233>
Текст страницы (относится ко всей странице)
</body>
Отступы на странице
LEFTMARGIN=0
– отступ слева
TOPMARGIN=0 – отступ сверху
MARGINWIDTH=0 – ширина
поля (левого и правого)
MARGINHEIGHT=0 – ширина
поля (верхнего и нижнего)
Начертание шрифтов
<b> Полужирный текст </b>
<i> курсив </i>
<u> Подчеркнутый текст </u>
<tt>Пропорциональный</tt>
Фиксированный текст
<pre> текст </pre>
Текст, записанный в тэге pre
выводится с точностью до
пробела. Его можно
использовать для написания
стихотворений
Вставка рисунка
<img src="my.jpg">
<img src="my/my.jpg">
<img src="../my.jpg">
<img
src="http://www.homepage.r
u /my/my.jpg">
Атрибуты тэга <img>
Горизонтальное выравнивание
<img src="pr1.png" align="left">
Вертикальное выравнивание
<img src="pr.png"align="bottom">
<img src="pr.png" align="middle">
<img src="pr.png" align="top">
Другие атрибуты тэга IMG
<img
<img
<img
<img
<img
<img
src="pr.png" Vspace="10">
src="pr.png" Hspace="30">
src="pr.png" alt="фото">
src="pr.png" width="100">
src="pr.png" height="200">
src="pr1.png" border="5">
Выравнивание рисунка
<p><imp src="cat.gif" align="top">
текст расположен сверху</p>
<p><imp src="cat.gif" align="middle">
текст расположен посередине</p>
<p><imp src="cat.gif" align="bottom">
текст расположен снизу</p>
Расположение текста
Текст расположен сверху
Текст расположен посередине
Текст расположен снизу
Обтекание рисунка
<h1>Зоопарк города Бердичева</h1>
<img src=“cat.gif” align=“left”>
Зоопарк города Бердичева, за
неимением ничего другого,
приглашает взглянуть на кота
обыкновенного <br clear=“all”>
Впрочем мы готовы предложить вам
лекцию о диких животных
Пример обтекания рисунка
Зоопарк города Бердичева
Зоопарк города Бердичева, за
неимением ничего другого,
приглашает взглянуть на кота
обыкновенного
Впрочем мы готовы предложить вам лекцию о
диких животных
Линии <hr>
<Hr align="right"> (center или left)
<Hr width="30%"> (ширина линии
в процентах/пикселях)
<Hr size="6"> (толщина линии)
<Hr NoShade> (отмена объемности)
<Hr color=“#cc0000"> (цвет линии,
только в IE)
Маркированный список
<!-- disc, circle, square -->
<ul type="disc">
Результат
<li>роза</li>
•роза
<li>мимоза</li>
•мимоза
<li>мак</li>
•мак
<li>василек</li>
•василек
</ul>
Нумерованный список
<!-- start= " number" type=“1|A|a|I|i“-->
<ol>
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ol>
Результат
1.Первый
2.Второй
3.Третий
Графические маркеры
<ul>
<br><img src=“1.jpg”>
<li>Первый</li>
<br><img src=“1.jpg”>
<li>Второй</li>
<br><img src=“1.jpg”>
<li>Третий</li>
</ul>
Результат
Первый
Второй
Третий
Ссылки
Главный документ web-узла
должен иметь имя index.html.
Остальные могут именоваться как
угодно, например, index1.html, …
Ссылкой может являться
текст или картинка
Формат ссылки и цвет
<a href=“ссылка”>текст ссылки</a>
Атрибуты тэга body
link – цвет ссылки
alink – цвет активной ссылки
vlink – цвет посещенной ссылки
<body link=#336633 vlink=#336699
alink=#996633>
Текстовые ссылки
<a href=“ссылка”>текст ссылки</a>
<a href=“i1.html">новости</a>
<a href=“image/f1.jpg">фото</a>
<a href="http://www.hp.ru/
list.html"> комментарий
</a> Ссылка на стр. новостей i1.html
новости фото комментарий
Графическая ссылка
<a href=“index1.html”>
<img src=“cat.gif”></a>
Рисунок является
ссылкой на страницу
index1.html
Ссылка на часть картинки
Навигационные карты задаются
тэгом Map. Тэг Map включает себя
тэг(и) Area, которые определяют
геометрические области внутри
карты (в нашем примере это
будут прямоугольники,
окружности, области) и ссылки,
связанные с каждой областью
Навигационная карта 1
Сделать область №1
рисунка (240Х140)
навигационной ссылкой
на документ index1.html
В нашем примере у прямоугольника №1
координаты: x1=25, y1=36, x2=114, y2=98
Прямоугольная область
<img src="bluerects.gif“
usemap="#karta1">
... Куча текста и всякого содержания,
или ничего...
<map name="karta1">
<area href="index1.html" shape="rect"
coords="25,36,114,98">
</map>
Навигационная карта 2
Сделать область №1
рисунка (240Х140)
навигационной
ссылкой на документ
index2.html
В нашем примере у окружности №1 координаты:
x=46, y=48, r=35
Круговая область
<img src="mapcircle.gif" usemap="#karta2">
... Куча текста и всякого содержания, или
ничего...
<map name="karta2">
<area href="index2.html" shape="circle"
coords="46,48,35"
alt="маленький круг">
</map>
Навигационная карта 3
Координаты пишутся по
следующему принципу:
<area shape="poly"
coords="x1,y1,x2,y2,...,xN,yN">
Многоугольная область
<img src="mappoly.gif" usemap="#karta3">
... Куча текста и всякого содержания, или
ничего...
<map name="karta3">
<area href="index3.html" shape="poly"
coords="168,9,232,29,200,97,223,129,
153,119">
</map>
(возможно одновременное использование разных
областей)
Ссылка на e-mail
<a href="mailto:имя@сервер">
текст ссылки</a>
<a href="mailto:_nick_@e-mail.ru">
_nick_@e-mail.ru</a>
Ссылка на «почтовый ящик»
Результат
_nick_@e-mail.ru
Опции mailto
-?subject=Тема пиcьма
- &Body=Текст вашего сообщения
- &cc=copy@mail.ru,copy2@mail.ru
(копии письма через запятую)
- &bcc=hidden_copy@mail.ru,
hidden_copy2@mail.ru
(скрытые копии письма через запятую)
Получение бланка e-mail
<a href="mailto:pochta@mail.ru
?subject=Hello
&Body=text &cc=copy@mail.ru
&bcc=hidden_copy@mail.ru">
pochta@mail.ru </a>
При нажатии на ссылку почтовая
программа выдаст бланк с
заполненным адресом
Бланк. Что это такое?
Внутренние ссылки
Чтобы сделать ссылку внутри
документа создают закладку
(якорь) опцией name,или id,
задающей уникальное имя закладки
<A name="stih1">текст закладки</A>
Часть текста делают ссылкой на имя
закладки
<A href="#stih1">текст ссылки</A>
Ссылка на закладку
из другого документа
<A href="ancorpri.html#stih3">
Ссылка из какого-то документа
</A>
<A href="http://www.mysite.ru/
"ancorpri.html#stih3"> Ссылка из
какого-то документа </A>
Ссылка на другие
документы (пример 1)
Можно ссылаться на любые
документы, *.doc, *.mp3, *.jpg,
*.gif, *.txt, *.zip, *.exe и т.д:)
<a href="big.jpg" target="_blank">
<img src="small.jpg">
</a>
Ссылка на другие
документы (пример 2)
<img src="images/b2_m.jpg"
width="100" height="100"
alt="Посмотреть"
onClick="window.open('b2.jpg',
'b2', 'toolbar=no; width=456;
height=509', 'replace=true');">
Таблица
(2 строки и 3 столбца)
<table>
<caption>название</caption>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>4</td><td>5</td><td>6</td>
</tr>
</table>
название
123
456
Атрибуты table
Border="?" – обрамление таблицы
Bordercolor="?" – цвет обрамления
bgcolor ="?" – цвет фона
cellspacing=0 – ширина границы
между ячейками
cellpadding=5 – отступ текста от
границ ячеек
Атрибуты tr и td
width="25%" – ширина ячейки
height="150" – высота ячейки
bgcolor="цвет" – цвет фона ячейки
valign="top" – вертикальное выравнивание
align= "left" – горизонтальное выравнивание
colspan="number" – объединение колонок
rowspan="number" – объединение строк
Фреймы
Фреймы позволяют открыть в окне
Броузера не один, а несколько
документов. Например:
Menu.html
Logo.html
Content.html
Вставка фрема
<html>
<head>
<title>фреймы</title>
<frameset></frameset>
</head>
</html>
Варианты фреймов
Структура 1
<head> /* rows – ширина ряда */
<frameset rows="100,*,150">
<frame src="logo.html">
<frame src="content.html">
<frame src="menu.html">
</frameset>
</head>
Структура 2
<head> /* rows–ширина колонки */
<frameset cols="100,*,150">
<frame src="logo.html">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</head>
итоги
Мы можем делить окно нашего
броузера либо на ряды, либо на
колонки, с помошью параметров
тэга <frameset> Cols и Rows.
Другого способа деления не
существует. Одновременно эти
параметры использовать нельзя.
Фреймы внутри фреймов
<html>
<head>
<frameset rows="100,*">
<frame src="logo.html">
<frameset cols="150,*">
<frame src="menu.html">
<frame src="content.html">
</frameset>
</frameset>
</head>
</html>
Продолжение
<head>
<frameset cols="150,*">
<frameset rows="100,*">
<frame src="logo.html">
<frame src="menu.html">
</frameset>
<frame src="content.html">
</frameset>
</head>
Атрибуты frame
scrolling="no" – наличие
полосы прокрутки (yes, auto)
marginwidth="0" – ширина
поля левого и правого
marginheight="0" – ширина
поля верхнего и нижнего
name="name" – имя фрейма
для ссылки
Border="0" – бордюр (frameset)
Ссылки на фрейм
<a href="project.html"
target="_top"> Мой проект о
рыбках</a>
<a href="content.html"
target="window-1">
Главная</a
Простейшая структура Web-узла
Логотип сайта (logo.html)
Меню
Главная
Полезные ссылки
- Страшный всемирный заговор - почему
фреймы не так страшны
- Я люблю фреймы
- Фреймы как альтернативное средство
навигации
- Встроенные фреймы : элемент IFRAME
Это пока все
Конец
