- •Практикум по созданию сайта.
- •1. Язык html.
- •1.1 Общие сведения о языке.
- •Структура html-документа
- •1.2 Некоторые тэги и их назначение (справочник).
- •1.3 Работа с таблицами, фреймами, формами Работа с таблицами
- •1.4 Работа с фреймами
- •1.5 Работа с формами
- •1.6. Вставка звуковых файлов в сайт
- •1.6.1 Вставка фонового звука.
1.2 Некоторые тэги и их назначение (справочник).
Тег Назначение
Базовые элементы
<html> </html> Начало/конец HTML-документа
<head> </head> Шапка HTML-документа
<title> </title> Заголовок HTML-документа
<body> </body> Содержимое HTML-документа
Внешний вид
<b> </b> Включить полужирный шрифт
<i> </i> Включить шрифт курсивом
<u> </u> Включить вывод подчеркнутым шрифтом
<strike>
</strike> Перечеркнуть
слово Перечеркнуть
<s>
</s> Перечеркнуть
слово Перечеркнуть
<small>
...
</small> Включает малый
шрифт относительно основного текста
<big>
...
</big>
Включает
большой шрифт относительно основного
текста
<em>...</em> Выделение текста курсивом <strong>...</strong> Полужирное выделение текста
<font face =“...”> </font> Выбор шрифта
<font color=“#.....” ></font> Выбор цвета шрифта
<font size=“5” ></font> Выбор размера шрифта (с “1” до “7”)
<font size=“+5” ></font> Увеличение стандартного размера шрифта
<pre> ... </pre> Вставка текста - выводится с точностью до пробела
<sub> ... </sub> Определяет нижний индекс: словоsub
<sup> ... </sup> Определяет верхний индекс: словоsup
<blockquote>...</blockquote> Ввод большой цитаты ( Элемент представляется на
экране, как блок с отступом)
<cite>...</cite> Ввод цитаты (обычно выделяется на экране курсивом)
<div>...</div> Блок (контейнер).
<div align=“center”>…</ div > Горизонтальное выравнивание блока по центру.
<div align=“ right ”>…</ div > Горизонтальное выравнивание блока по правому краю.
<div align=“ justify ”>…</ div > Горизонтальное выравнивание блока по ширине.
<center>...</center> Центрировать. Аналог <div align=“center”>
Разделители
<p> текст </p> Параграф, абзац
<p align=“center”>текст</p> Центрировать по центру
<p align=“right”>текст</p> Центрировать по правому краю документа
<p align=“left”>текст</p> Центрировать по левому краю документа
<p align=“justify”>текст</p> Центрировать по обоим краям документа
<br> Новая строка
<hr> Горизонтальная линия
<hr align=”right”> (center или left) Центрирование горизонтальной линии
<hr width="40%"> Ширина линии в процентах (можно в пикселях)
<hr size="36"> Толщина линии <hr color="СС0000"> Цвет линии, только в Internet Explorer
Списки
<ol type=1> Создание упорядоченного списка, нумерация
<li> первый элемент списка выполняется арабскими цифрами 1, 2, 3
<li> второй элемент списка (может быть i, I, A)
</ol>
<ul>
<li> первый элемент списка Неупорядоченный список
<li> второй элемент списка
</ul>
<ul type=disc> Создание упорядоченного списка,
<li> первый элемент списка нумерация выполняется в виде фигуры диск
<li> второй элемент списка (может быть circle - окружность, square - квадрат)
</ul>
<dl> <dt> <dd> </dl> Список определений
<menu> <li> </menu> Меню
<dir> <li> </dir> Каталог
Фон, цвета и графика
<img src="x.jpg"> Добавление картинки (учитывайте регистр!)
<img src="ABC/../xxx.jpg" alt="Ждите"> Добавление картинки с указанием пути к картинке и альтернативного текста, который отобразится браузером на стадии загрузки изображения или в том случае, если изображение не может быть отображено.
<body bgcolor="#$$$$$$"> Цвет фона
<body background="xxx.bmp"> Фоновая картинка
<body text="#$$$$$$"> Цвет текста
<font color="#$$$$$$"></font> Цвет шрифта
<h2> текст </h2> Размер заголовка (6 уровней заголовков – от h1 до h6)
палитра цветов http://www.artlebedev.ru/tools/colors/
Чтобы при нажатии на разные части одной и той же картинки, мы попадали на разные страницы надо воспользоваться навигационной картой. Например:
<img src="x.jpg" usemap="#karta"> <map name="karta">
<area href="ddf.html" shape="rect" coords="45,35,110,115"> </map>
Например, в приведенном примере только часть картинки определенного размера прямоугольной формы сделана ссылкой.
На web-страницах могут использоваться графические форматы - GIF, JPG, RNG,BMP.
-
GIF используют чаще всего для логотипов, заголовков и рисунков, имеющих четкие цветовые границы. Рисунки этого формата поддерживают 256 цветов.
-
JPG используют для сложных рисунков и для фотографий. Формат поддерживает миллионы цветов и позволяет получать фотографии очень высокого качества.
-
BMP используют для хранения пиксельных изображений для работы в Windows.
Обычно графические файлы хранят в отдельной от HTML страниц папке. Несмотря на это, желательно разместить Ваш рисунок в той же папке, где хранятся все странички сайта. В этом случае путь к файлу указывать не надо будет.
Ссылки
<a href="имя файла"> текст гиперссылки Гиперссылка, при нажатии на которую выполняется
</a> «имя файла». На экран выводится текст гиперссылки.
<a href="x.jpg" target="_blank"> <img src="x.jpg"> Гиперссылка на картинку. При нажатии на
</a> картинку, она откроется в отдельном окне(атрибут target).
<a href="#метка"> текст гиперссылки Гиперссылка переходит на метку на этой же странице.
<a name="метка"></a> Необходимо определить закладку (место в тексте,
куда должна переходить гиперссылка).
<a href="#метка"> текст гиперссылки Гиперссылка переходит на метку на этой же странице.
<p id="метка"> текст </p> Закладка может быть определена также через атрибут id,
примененному к почти любому тэгу.
<a href="URL" title="текст "> </a> Предлагает подсказку об элементе, для которого
он устанавливается
<a href=" mailto: xxx@yyy.ru"> </a> Ссылка на почту
<body link="#....."> Цвет ссылки
<body alink="#......"> Цвет активной ссылки (нажатой)
<body vlink="#......"> Цвет уже посещенной ссылки
<marquee height="80" width="300" scrollamount="7" loop="3"> текст </marquee> Бегущая строка
из текста движется со скоростью 7 и повторяется 3 раза.
Таблицы
<table> </table> Определение таблицы
<tr> </tr> Строка таблицы
<td> </td> Ячейка таблицы
<th> </th> Заголовок таблицы
<td bgcolor="#...."> </td> Цвет ячейки таблицы
<caption> </caption> Заглавие таблицы
Формы
<form action=”URL” mothod get\post></form> Определение формы
<input type=“text|password|checkbox|submit|reset”> Поле ввода
<select></select> Множественный выбор
Фреймы
<frameset rows=...></frameset> Документ с фреймами строчной формы
<frameset cols=...></frameset> Документ с фреймами столбиковой формы
<frame src=“URL”> Определить HTML-документ во фрейме
Добавление фрейма в виде окошка c указанием размеров окна, использованием скроллинга и отображением границы встроенного фрейма.
<iframe src="x.html" width="300" height="250" scrolling="auto" frameborder="1"></iframe>
Полосу прокрутки вводит атрибут scrolling, его значения: no - полосы прокрутки не будет никогда; yes - полоса прокрутки будет всегда; auto - полоса прокрутки появится только тогда, когда она нужна. Атрибут frameborder указывает границы встроенного фрейма, его значения: 1 - отображать границу; 0 - не отображать границу.