Презентация "Построение одностраничного документа" скачать бесплатно

Презентация "Построение одностраничного документа"


Подписи к слайдам:
Построение одностраничного документа

Построение одностраничного документа

Оформление страницы сайта.

Тело программы

Между тегами <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>

Неразрывный пробел

&nbsp; И. Иванов (И. &nbsp; Иванов)

32 541 (32&nbsp;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>