Материал: 181484

Вторая вэб-страница (page2.htm) должна содержать заголовок 1-го уровня и ссылку на первую страницу.

ПРИМЕР ВЫПОЛНЕНИЯ ЗАДАНИЯ 1

Создать вэб-страницу содержащую: Заголовок 1-го уровня (<h1>)

Два абзаца (<p>) Список

тип списка: <ul>

тип маркера: square Таблица

число строк – 2 число столбцов – 3 width – 70% border – 2

Структуру из двух вложенных таблиц, в которой: Таблица контейнер

число строк – 2 число столбцов – 2 width – 70% border – 2

номер ячейки вложения – 2,2 Вложенная таблица

число строк – 2 число столбцов – 3 width – 70% border – 1 cellspacing – 5 cellpadding – 5

Обычную ссылку на страницу 2 target – по умолчанию

Ссылка на страницу 2, реализованная с помощью рисунка target – _blank

В редакторе Notepad или в какой-либо программе вэб-дизайна, например Dreamweaver, создаем файл, имеющий имя page1 и расширение htm (page1.htm). Далее пишем код, отвечающий условиям задания:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>

<head>

<title>Страница 1</title>

<meta http-equiv="Content-Type" content="text/html; char- set=windows-1251">

</head>

13

<body>

<h1>Страница 1</h1>

<p><em>HTML</em>создавался для логической (смысловой) разметки документа и не предназначен для управления отображением содержимого на экране пользователя или при выводе на печатающее устройство. Тем не менее в течение длительного времени его неправомерно использовали для управления визуализацией. Ситуация изменилась, когда были созданы каскадные таблицы стилей (<em>CSS</em>). Именно они служат для указания браузеру способа отображения содержимого вэбстраницы.</p>

<p>Таким образом, при создании вэб-страниц необходимо использовать HTML-теги <strong>лишь для логического форматирования</strong>. Способ же отображения содержимого вэб-страницы следует задавать при помощи каскадных таблиц стилей <em>CSS</em>.</p>

<ul type="square">

<li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li>

</ul>

<table width="70%" border="2" > <caption>Таблица</caption>

<tr>

<td>1.1</td>

<td>1.2</td>

<td>1.3</td>

</tr>

<tr>

<td>2.1</td>

<td>2.2</td>

<td>2.3</td>

</tr>

</table>

<br>

<table width="100%" border="2" > <caption>Таблица-контейнер</caption> <tr>

<td>1.1</td>

<td>1.2</td>

</tr>

<tr>

<td>2.1</td>

<td>

<table width="70%" border="1" cellspacing="5" cellpadding="5">

<caption>Вложенная таблица</caption> <tr>

<td>1.1</td>

<td>1.2</td>

<td>1.3</td>

14

</tr>

<tr>

<td>2.1</td>

<td>2.2</td>

<td>2.3</td>

</tr>

</table>

</td>

</tr>

</table>

<br>

<a href="page2.htm">Ссылка на страницу 2 </a>

<br>

<br>

<br>

<a href="page2.htm" target="_blank"><img src="fig1.jpg" alt="Ссылка на Страницу 2" border="0"></a>

</body>

</html>

ЗАДАНИЕ 2

ТЕОРЕТИЧЕСКАЯ ЧАСТЬ

Если HTML предназначен для логического форматирования документов, то управление отображением содержимого задается с помощью каскадных таблиц стилей (Cascade Style Sheet, CSS). CSS является мощным инструментом, позволяющим очень точно управлять отображением содержимого документа, и могут использоваться не только совместно с HTML, но и с расширяемым язы-

ком разметки (Extensible Markup Language, XML).

Коробочная модель CSS

ВCSS принята коробочная модель форматирования, которая обеспечивает единообразное форматирование различных тегов (рис. 1).

Вкачестве примера приведем форматирование двух абзацев текста при

помощи стиля style1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; char- set=windows-1251">

<style type="text/css"> <!--

.style1 {

15

font-family: "Times New Roman", Times, serif; font-size: 24px;

font-style: italic; font-weight: bold; background-color: #CCCCCC; text-align: left; padding: 50px;

height: 200px; width: 400px; margin-top: 40px; margin-right: 80px; margin-bottom: 40px; margin-left: 80px;

border-top-width: 5px; border-right-width: 5px; border-bottom-width: 5px; border-left-width: 5px; border-top-style: groove; border-bottom-style: groove; border-top-color: #0000FF; border-bottom-color: #0000FF;

}

--> </style> </head> <body>

<p class="style1">Абзац 1</p> <p class="style1">Абзац 2</p>

</body>

</html>

Сам стиль определяется в заголовке веб-страницы (тег <head>). Форматирование тега выполняется при помощи атрибута class:

<p class="style1">Абзац 1</p>

Если все четыре параметра одинаковые, то он задается лишь один раз, без указания сторон:

styleA {

font-size: 18px;

border: medium solid #FF0000; margin: 10px;

padding: 5px;

}

.styleB {

border: thin dashed #0000FF; font-size: 16px; font-weight: bold;

color: #FF0000;

}

16