Министерство образования и науки Российской Федерации
Федеральное государственное бюджетное образовательное учреждение высшего
профессионального образования
«НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ ТОМСКИЙ
ПОЛИТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ»
УТВЕРЖДАЮ
Зав. каф. ОСУ
Канд. техн. наук, доцент
______________О.Б.Фофанов
"_____" _____________________ 20__ г.
Компьютерный практикум
(часть 1)
Методические указания к лабораторным работам
2013
1
Рекомендация:
Для более подробного изучения HTML, CSS и JavaScript можно использовать информацию
различных источников Интернет. Например,
http://htmlbook.ru/
http://css.manual.ru/
http://html.manual.ru/
2
Оглавление
ЛАБОРАТОРНАЯ РАБОТА №1 .................................................................................................. 4
1. Знакомство с языком разметки гипертекста HTML ................................................................ 5
2. Структура html-документа........................................................................................................ 7
3. Комментарий в html-коде ......................................................................................................... 7
4. Атрибуты тега ........................................................................................................................... 7
5. Форматирование текста ............................................................................................................ 8
5.1 Отступы от края ...................................................................................................................... 8
5.2 Фон странички......................................................................................................................... 8
5.3 Цвет текста .............................................................................................................................. 8
5.4 Курсив, жирный шрифт и подчеркивание.............................................................................. 9
5.6 Абзацы ..................................................................................................................................... 9
5.7 Абзац с атрибутами............................................................................................................... 10
5.8 Разрыв строки........................................................................................................................ 10
5.9 Специальные символы .......................................................................................................... 10
5.10 Заголовки ............................................................................................................................. 11
5.11 Шрифты ............................................................................................................................... 11
5.12 Списки ................................................................................................................................. 12
6. Гиперссылка ............................................................................................................................ 14
6.1 Атрибут гиперссылки href .................................................................................................... 14
6.2 Атрибут гиперссылки target................................................................................................. 16
6.3 Цвет гиперссылок.................................................................................................................. 16
6.4 Ссылки, которые не являются ссылками ............................................................................. 16
7 Графические объекты на web-странице .................................................................................. 18
7.1 Вставка графики ................................................................................................................... 18
7.2 Размер изображения............................................................................................................. 18
7.3 Подсказка.............................................................................................................................. 18
7.4 Выравнивание картинки по горизонтали. Обтекание текстом........................................... 19
7.5 Выравнивание картинки по вертикали относительно текущей строки............................. 19
7.6 Рамки и отступы ................................................................................................................... 20
7.7 Ссылки-картинки ................................................................................................................. 20
7.7.1 Карта изображений............................................................................................................. 20
7.7.2 Атрибуты зон...................................................................................................................... 21
8. Связь с поисковыми системами............................................................................................. 22
План выполнения работы ....................................................................................................... 23
Контрольные вопросы к лабораторной работе 1 ................................................................... 25
Приложение 1............................................................................................................................. 26
Таблица названий цветов, воспринимаемых браузерами.......................................................... 26
3
ЛАБОРАТОРНАЯ РАБОТА №1
Знакомство с языком разметки гипертекста HTML
(текст, гиперссылки и графические элементы на web-страничке)
Цель работы - изучение основных элементов HTML для работы с текстом,
гиперссылками и графическими элементами.
Задачи лабораторной работы:
- ознакомиться с теоретическим материалом, посвященным основным элементам
языка HTML, используемым в процессе разработки статических web-страниц для
оформления текста и гиперссылок;
- ознакомиться с теоретическим материалом, посвященным основным элементам
языка HTML, используемым для размещения на web-странице графических
объектов и для организации взаимодействия web-страницы с поисковыми
системами;
- закрепить на практике изученный материал, применив элементы работы со
шрифтами, гиперссылками и графическими элементами, разметкой абзаца,
некоторые служебные и непечатные символы и др.
Теоретическая часть
Web-сайт - это совокупность Web-страниц с повторяющимся дизайном, объединенных
по смыслу и физически находящихся на одном Web-сервере, обеспечивающем
предоставление информации в службе глобального соединения. Web-сервер хранит и
предоставляет во внешнюю сеть данные, организованные в виде Web-страниц.
Можно назвать несколько основных видов Web-сайтов.
1) «Интернет-визитка» фирмы - аналог обычной визитной карточки,
информирующей о владельце, только информации можно представить значительно больше,
чем умещается на обычной визитке размером 5 на 9 см. Примерами таких сайтов может быть
любой сайт небольшой компании.
2) корпоративный сайт - дальнейшее развитие «Интернет-визитки», сайт с мощной
информационной поддержкой деятельности фирмы. Примеры: www.gazprom.ru,
www.beeline.ru.
3) средство поддержки электронного бизнеса. К таким сайтам относятся
всевозможные интернет-магазины и электронные торговые площадки. Например:
www.ozon.ru, www.rusmet.ru.
4) средство формирования Интернет-сообщества. Вокруг таких сайтов формируется
сообщество людей, которые, общаясь между собой, сами участвуют в развитии сайта.
Примерами являются www.wikipedia.com, www.livejournal.com, www.developing.ru.
5) средство самовыражения. Эту цель преследуют многие домашние странички и
проекты, которые создаются в первую очередь для удовлетворения интересов их авторов.
Мало кому интересны фотографии любимого питомца или список ссылок на любимые
сайты, кроме самого владельца сайта. Таких проектов в Сети очень много. Их можно увидеть
на сайтах бесплатного хостинга: www.narod.ru, www.boom.ru и других. Тем не менее
отметим, что такое любительское сайтостроительство может служить хорошей стартовой
площадкой для серьезных сетевых проектов.
Пусть такой стартовой площадкой послужит для читателей изучаемый курс.
Пока не будем вдаваться в подробности увлекательного мира профессионального Web-
программирования, а займемся созданием простого Web-сайта, состоящего из нескольких
Web-страничек, написанных на языке HTML в текстовом редакторе.
Рекомендуется использовать не стандартный Блокнот (Notepad) Windows, а текстовый
редактор Notepad++.
4
Notepad++ - это бесплатный редактор текстовых файлов, отличная замена
стандартного Блокнота Windows с поддержкой синтаксиса большого количества языков
программирования: С, С++, Java, C#, XML, HTML, PHP, Javascript, Pascal, Fortran, Perl,
Python, VB и т.д. Он ориентирован для работы в операционной системе MS Windows,
позволяет подсвечивать синтаксис в файлах, поддерживает поиск и замену по тексту, работу
одновременно с несколькими файлами, а также поддержку функции drag & drop.
Отметим также, что существует большое количество визуальных редакторов Web-
страниц. Эти редакторы обладают богатым набором инструментальных средств и
предоставляют пользователю возможность создавать великолепно выглядящие страницы,
используя многочисленные шаблоны и библиотеки картинок, как правило, входящие в
комплект поставки редактора.
Одними из самых популярных визуальных редакторов являются пакеты Microsoft
FrontPage (www.microsoft.com/frontpage), Macromedia HomeSite, Macromedia Dreamweaver
(www.macromedia.com/software/dreamweaver), NetObjects Fusion (www.netobjects.com).
Несомненно, визуальные редакторы позволяют значительно ускорить создание
типовых страниц и программирование некоторых элементов, например сложных таблиц, на
написание которых от руки уходит много времени. Но, для того чтобы как следует
разобраться со структурой HTML-документов и основными элементами HTML, лучше
создать несколько страниц, не пользуясь этими сложными средствами. Это позволит в
будущем как следует приглядывать за работой визуальных редакторов и корректировать код.
Как правило, люди, знающие HTML «в лицо», в дальнейшем практически не пользуются
визуальными редакторами.
1. Знакомство с языком разметки гипертекста html
Итак, Web-страница - это текстовый документ, размеченный с помощью специальных
элементов HTML, которые называются теги, или html-теги. Такие страницы часто называют
html-страницами. Они имеют расширение .html или .htm (браузеры поддерживают оба
расширения, поэтому решите для себя, какое расширение будете использовать). На экран
html-теги не выводятся, они только указывают браузеру, как отображать содержимое
документа.
Всегда можно посмотреть исходный html-код любой страницы в браузере, вызвав на
этой странице контекстно-зависимое меню (нажав правой кнопкой мыши) и щелкнув по
строке «Просмотр HTML-кода». Можно выбрать аналогичную строку в главном меню
браузера (опция «Вид»).
Тег (тег) – это «вехи», которыми размечают гипертекст. В обычном, некомпьютерном
английском языке слово tag означает «признак «метка».
Тег (или дескриптор) в HTML – это некое ключевое слово или сокращение, которое
служит признаком того или иного форматирования данной части документа.
Теги бывают контейнерными (парными) и неконтейнерными (одиночными) и
заключаются в угловые скобки <имя_тега>. Регистр записи имени тега не имеет значения.
Контейнерные теги состоят из пары - открывающий тег <имя_тега> и закрывающий
тег </имя_тега>. Обратите внимание на то, что открывающий и закрывающий теги пишутся
по-разному. Закрывающий тег завершает действие открывающего, например теги <html> и
</html> начинают и заканчивают html-страницу.
Одиночный тег не требует закрывающего тега, например тег <br> начинает новую
строку.
Итак, откроем Блокнот (лучше, как было сказано выше, Notepad++) и наберем
следующий текст с тега ми (рис. 1):
<html>
<head>
5
<title>Моя первая Web-страница</title>
</head>
<body>
ЗАГОЛОВОК <br>
Содержимое страницы
</body>
</html>
Рис. 1. Код html в Notepad++
Сохраним этот текст в файле с именем 1.html в папке Мой сайт, выбрав Тип файлов
All types (".") (рис.2).
C таким значком сохранится
ваш файл, если браузером по
умолчанию является MS Internet
Рис. 2. Первое сохранение html-страницы
Закроем Блокнот и перейдем в папку Мой сайт. Сохраненный файл как html-документ
по умолчанию будет открываться браузером, например. MS Internet Explorer (рис. 3).
6
Рис. 3. Отображение html-страницы в браузере
Теперь вся дальнейшая работа будет заключаться в добавлении все новой и новой
информации в этот пока унылый «информационный пейзаж» по следующему алгоритму:
1) открыть html-файл с помощью Блокнота;
2) внести изменения в html-код;
3) сохранить изменения;
4) обновить Web-страницу (кнопка F5 на клавиатуре или кнопка Обновить в Панели
инструментов браузера) и проанализировать изменения;
5) повторить с позиции 2.