«Введение в информационные технологии» Семинар №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