Построение одностраничного документа
Оформление страницы сайта.
Тело программы
Между тегами <BODY> и </ BODY > располагаются команды, следуя которым браузер выводит информацию в окно документа.
Заголовки: <H1> ………….. </H1> ;
Цифры: от 1 до 6, 1 самый крупный шрифт, 6 – мелкий.
Горизонтальная линия: <HR>. Размеры линий: <HR size=1>. Если размер не задан, имеет толщину 2 или 3 пикселя («объемные» линии),
<HR size=1 noshade> («плоские» линии).
Абзац: <P> …………… </P>.
В данном случае перед абзацем выводится пустая строка. Браузер игнорирует тег </P>. Поэтому, чтобы перед строками не было пустых абзацев, в конце строчки используется тег <BR> (не имеет парного).
Цвет фона, цвет шрифта
|
Текст HTML
|
Комментарий
|
|
<HTML>
<HEAD>…………………
</HEAD>
<BODY bgcolor=white text=black>
<P align=right>
</BODY >
</HTML>
|
Начало программы.
Начало головной части.
Начало тела программы: задан цвет фона и шрифта для всей программы.
Абзац выровнен справа.
Конец тела программы.
Конец программы.
|
Оформление отдельных элементов текста
|
Текстовые ссылки и цитаты.
Название книги и др. можно выделить курсивом.
Для больших цитат удобно использовать увеличенный отступ, лев. и прав., от края страниц.
Выделение текста полужирным шрифтом
|
<CITE>………… </CITE>
<BLOCKQUOTE>……….. </BLOCKQUOTE>
<STRONG>……………….</STRONG>
|
|
Авторское форматирование
(запись «лесенкой»)
|
<PRE>……………….</PRE>
|
|
Неразрывный пробел
|
И. Иванов (И. Иванов)
32 541 (32 541)
|
Маркированный и нумерованный списки
Команда UL (OL) – задает маркированный (нумерованный) список, имеет следующую структуру:
<UL> (< OL >)
<LI> первый элемент списка </LI>
<LI> второй элемент списка </LI>
<LI> третий элемент списка </LI>
</UL>
Картинка в тексте
Картинку можно помещать в документ почти также, как текстовый символ. Для этого используют команду <IMG>, имеет атрибуты:
<IMG src= img.jpg width=200 height=200 border=1 align=top hspace=1 vspace=0 alt= «МОУ СОШ №3»>
ширина высота рамка положение иллюстрации
свободное пространство «слева и справа»
свободное пространство «над и под»
Пример записи программы
<HTML>
<HEAD><body bgcolor="#FFFFCC">
<TITLE>Любимый мой, Петровск родной ...</TITLE>
</HEAD>
<BODY>
<Font COLOR='#330033'></FONT>
<P Align='center'>
<A href = 'Petr1.htm'> О Петровске</A>
<А href = 'Novosti1.html'>Новости нашего города </a>
<A href = 'ist1.htm'> Образование в Петровске </A>
<A href = 'muse1.htm'> Музей им И.В.Панфилова </A>
<A href = 'foto1.htm'> Фотогалерея </A> </p>
<img src="123.jpg" alt="" width="205" height="300" align="left" />
<h1 Align= 'right'><font color="#330033">Любимый мой, </font></h1>
<h1 Align= 'right'><font color="#330033">Петровск родной...</font></h1>
<HR align="right"> <p Align='right'> На этом сайте предоставлены : <div align="right">
<UL NYPE='square'>
<LI>История развития города Петровска;
<LI>Сведения о герое Советского Союза И. В. Панфилова;
<LI>Сведения о городе Петровске.
<P Align='right'>
<strong>Фотогалерея: "Петровск сегодня".</strong></p>
</UL>
</div>
</P>
