Задания для самостоятельного выполнения
Вариант выбирается по последней цифре порядкового номера студента в журнале группы.Тема сайта является продолжением лабораторной работы №1.
1 Новостной блог
2 Электронная библиотека
3 Форум
4 Корпоративный сайт
5 Дистанционное обучение
6 Электронный каталог компаний
7 Доска объявлений
8 Фотогалерея
9 Сайт знакомств
10 Риэлторская компания
Лабораторная работа №3. Блоки
Цели и задачи
Цель:Научиться работать с HTML – документами, создавать многостраничные сайты на основе блоков, размещать на них контент.
Задание:Создайте HTML – страничку, разместив на ней не менее 3 блоков. Оформите вид страницы с блоками как главную страницу сайта различными шрифтами, заголовками, рамками, бегущей строкой. В блоках разместите навигационную панель, ранее разработанную страницу в соответствии с темой, выбранной в лабораторной работе №1.
Теоретические сведения
Немного о верстке
Общее форматирование
<!-- Это комментарий -->
<h1>Заголовок</h1>
<p align="center">Абзац по центру</p>
<p align="right">Абзац по правому краю</p>
<p>Обычный текст — <b>полужирный текст</b></p>
Листинг 1. Простой пример.
Возможности HTML и CSS позволяют создавать гипертекстовые страницы как с линейной, так и с нелинейной структурой. Линейные структуры (где текст представлен последовательно) приведен в Листинге 1.
Рассмотрим основные способы организации нелинейной структуры:
|
|
|
1.С использованием фреймов.
2.С использованием табличной верстки.
3.С использованием блочных элементов.
Пусть требуется создать документ, логически разделенный на три блока (рис. 1): «head» — верхний блок, «menu» — левый блок, «content» — правый блок. Примеры, иллюстрирующие как это можно сделать перечисленными способами, приведены в листингах 2, 3 и 4.
Рисунок 1 Веб-страница с тремя блоками
Листинг 2. Фреймовая структура
<!--
Содержимое блоков хранится в файлах top.html, left.html, content.html Сборка выполнена в файле index.html, имеющем следующий вид:
-->
<html>
<head>
<title>Фреймы</title>
</head>
<frameset rows="10%,*">
<frame name="top" src="top.html">
<frameset cols="10%,*">
<frame name="left" src="left.html">
<frame name="cont" src="content.html">
</frameset>
<noframes>Это для браузеров, не поддерживающих фреймы.</noframes>
</frameset>
</html>
Листинг 3. Табличная структура
<html>
<head>
<title>Таблицы</title>
</head>
<body><table style="width: 100%; height: 100%; border: solid 1px black;">
<tr>
<td colspan=2 height="10%">HEAD</td></tr>
<tr>
<td
</tr>
</table>
<body>
</html>
Листинг 4. Блочнаяструктура
<html>
<head>
<title>Блоки (div)</title>
|
|
|
<style>
body {margin: 10px;}
div {border: solid 1px black;}
.top {position: relative; height: 100px; width: 100%;}
.left {position: absolute; top: 114px; left: 10px; width: 200px; }
.main {position: absolute; top: 114px; left: 214px; margin-right:8px;}
</style>
</head>
<body>
<div class="top">TOP</div>
<div class="left">LEFT</div>
<div class="main">CONTENT</div>
</body>
</html>
Контрольные вопросы
1.Что такое HTML? Что такое гипертекстовый документ?
2.Что такое тег? Структура тега HTML. Формат записи тега HTML.
3.Привести структуру HTML документа. Описать назначение тегов <HTML>, <HEAD>, <META>, <BODY>.
4.Что такое атрибут тега? Формат записи атрибутов тега HTML.
5.Перечислить теги для представления текстовой информации и дать их описание.
6.Как представляются гиперссылки в HTML документе? Дать пример внутренних и внешних ссылок.
7.Перечислить виды списков, существующих в HTML. Привести теги, представляющие списки в HTML.
8.Что такое вложенные списки в HTML? Привести пример вложенного списка HTML.
9.Как включаются графические объекты в HTML документы?
10.Куда будет указывать ссылка, если атрибут href оставить пустым (<a href="">какой-то адрес</a>)?
11.Как будет отображаться страница, если мета-тег charset не будет соответствовать фактической кодировке текста? Что произойдет, если в странице использовать следующий код:
<metahttp-equiv="refresh" content="0;">
Дата добавления: 2018-04-04; просмотров: 439; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!