«Введение в информационные технологии» Семинар №8 Тема: «Web программирование (HTML)» План занятия
advertisement
«Введение в информационные технологии»
Семинар №8
Тема: «Web программирование (HTML)»
План занятия
HTML
1. HTML документ
2. HTML тэги, атрибуты тэгов
3. Тэг комментария <!-- -->
Структура документа
1. Необязательный заголовок DOCTYPE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2. Общая структура документа
<html>
<head>
<title></title>
<meta …>
<link …>
<style></style>
</head>
<body>
</body>
</html>
3. Определение типа содержимого и кодировки документа
<meta http-equiv="Content-Type" content="text/html; charset=koi8-r">
Основные тэги форматирования текста
1.
2.
3.
4.
5.
Наклонный шрифт <I></I>
Жирный шрифт <B></B>
Установки шрифта <FONT></FONT>
Увеличенный размер шрифта <BIG></BIG>
Уменьшенный размер шрифта <SMALL></SMALL>
Основные тэги структурного форматирования
1.
2.
3.
4.
5.
6.
7.
8.
Заголовки <Hn> (<H1></H1>)
Разделительная линия <HR>
Абзац <P></P>
Перевод строки <BR>
Центрирование <CENTER></CENTER>
Цитата <BLOCKQUOTE></BLOCKQUOTE>
Объединение элементов с заданием нового абзаца <DIV></DIV>
Блочный элемент без задания абзаца <SPAN></SPAN>
Основные тэги организация списков
1. Список <UL></UL>
1
2. Пронумерованный список <OL></OL>
3. Элемент списка <LI></LI>
Гипертекстовые ссылки
1.
2.
3.
4.
Ссылка на внешний документ <a href=”URL”>…</a>
Определение ссылки в документе <a name=”NAME”>…</a>
Ссылка на локальное имя <a href=”#NAME”>…</a>
Ссылка на внешнее имя <a href=”URL#NAME”>…</a>
Создание таблиц
1. Объявление таблицы <table></table>
2. Объявление строки <tr></tr>
3. Объявление ячейки <td></td>
Вставка внешних объектов в документ
1. Картинка <img src=”URL”>
Вложенные таблицы стилей CSS
1. Задание стиля через атрибут STYLE
<p style="font-weight: bold">text</b>
2. Создание списка стилей
<style>
b {font-weight: normal}
i {font-weight: normal}
</style>
3. Именование стилей
<style>
.bs {font-weight: normal}
</style>
4. Использование именованных стилей
<b class="bs">normal</b>
5. Подключение внешних стилей
<link rel="stylesheet" type="text/css" href="URL">
Задания
1. Создать HTML страницу task.html максимально похожую на документ,
отображенный на картинке example.gif. Текст содержимого страницы представлен
в файле task.txt. Страница должна быть доступна по адресу
http://ccfit.nsu.ru/~USER/seminar9/task.html
Обязательно! Все ссылки на странице должны вести на соответствующие
абзацы на этой странице. HTML редакторы не использовать!
Результат работы запаковать в архив и выслать преподавателю.
http://ccfit.nsu.ru/~chvanov/it/Seminar9/task.txt
http://ccfit.nsu.ru/~chvanov/it/Seminar9/example.gif
http://ccfit.nsu.ru/~chvanov/it/Seminar9/bang.gif
2
Пример
<html>
<head>
<title>Пример</title>
<style>
/* общие стили */
H1{font-weight: bold; font-family: Arial; font-size:140%; margin-bottom:5px; margintop:10px}
TD {background: white; color: #000000; padding-left: 0px; padding-top: 0px; padding-bottom:
20px;}
/* классы стилей */
.myH2{font-weight: bold; font-family: Arial; font-style: italic; text-align: left; font-size:20px; }
.myTD {background: #FFFFFF; color: Green; padding-top: 20px; padding-bottom: 0px;}
.toc{background: #000000;}
.toc a{color: #DDEE77;}
</style>
</head>
<body>
<div style="font-weight: bold; font-family: Arial; font-size:140%; margin-bottom:20px">
Пример
</div>
<div class="toc">
<span style="margin-left: 300px">
<a href="#p" style="text-decoration: none">BASH Programming - Introduction HOW-TO</a>
</span>
</div>
<H1><a name="p4">4 Конвейеры</a></H1>
<div class="myH2"><a name="p4.1">4.1 Что&nbsp;это&nbsp;такое</a></div>
<table border="1" bordercolor="Gray" cellpadding="0" cellspacing="0" width="600px">
<tr>
<td nowrap width="50%" style="text-align: left">Команды DOS</td>
<td class="myTD" width="50%" style="text-align: right">Описание</td>
</tr>
</table>
</body>
</html>
3
