html

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><h3>Заголовок 3</h3><h4>Заголовок 4</h4><h5>Заголовок 5</h5><h6>Заголовок 6</h6>

Заголовок 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.ru /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 src="pr.png" Vspace="10"> <img src="pr.png" Hspace="30"> <img src="pr.png" alt="фото"> <img src="pr.png" width="100"> <img src="pr.png" height="200"> <img 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)

Маркированный список



<ul type="disc">

<li>роза</li>

<li>мимоза</li>

<li>мак</li>

<li>василек</li>

</ul>

Результат

•роза

•мимоза

•мак

•василек

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

<ol>

<li>Первый</li>

<li>Второй</li>

<li>Третий</li>

</ol>

Результат1.Первый2.Второй3.Третий

Графические маркеры

Результат

Первый

Второй

Третий

<ul>

<br><img src=“1.jpg”>

<li>Первый</li>


<li>Второй</li>


<li>Третий</li>

</ul>

Ссылки

Главный документ web-узла должен иметь имя index.html. Остальные могут именоваться как угодно, например, index1.html, …

Ссылкой может являться текст или картинка

Формат ссылки и цвет

<a href=“ссылка”>текст ссылки</a>

Атрибуты тэга bodylink – цвет ссылки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>


Сделать область №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>


Координаты пишутся по следующему принципу: <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:[email protected]"> [email protected]</a>

Результат[email protected]

Ссылка на «почтовый ящик»

Опции mailto

-?subject=Тема пиcьма- &Body=Текст вашего сообщения- &[email protected],[email protected] (копии письма через запятую)- &[email protected],

[email protected](скрытые копии письма через запятую)

Получение бланка e-mail

<a href="mailto:[email protected]?subject=Hello&Body=text &[email protected]&[email protected]"> [email protected] </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>

название

1 2 3

4 5 6

Атрибуты 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>

Атрибуты framescrolling="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

Это пока все

Конец

html

Documents