Знакомство с Internet. Первая HTML-страница
Лабораторная работа №1
Цель работы:
- Знакомство с Internet, программами-браузерами (Internet Explorer и Netscape Navigator) и Web-документами.
- Научиться пользоваться поисковыми системами для поиска нужной информации в Internet.
- Создание HTML-страницы с использованием материала прочитанных лекций.
Теоретическая часть:
Поисковые системы:
Одним из самых больших недостатков WWW является отсутствие в ней чёткой структуры. В некоторой степени это отражает присущую Internet открытость. откуда можно узнать, что появился новый ресурс, и как убедиться, что пользователи смогут найти Ваш ресурс. Самыми популярными в настоящее время Web-службами являются каталоги Web-страниц и системы поиска. Они содержат перечни Web-страниц, в которых можно выполнять поиск по определённой теме и на которые затем можно переходить прямо из каталога.
Например, на сервере Yahoo! содержится обширный каталог Web-страниц. Для помещения в него ссылки на свою страницу необходимо заполнить специальную форму. С помощью Yahoo! можно найти далеко не всю информацию, так как некоторые авторы могут быть просто не зарегистрированными на этом сервере. Системы поиска, например AltaVista, содержат сведения о любых доступных Web-страницах, поскольку информация в них собирается автоматически.
Если Вы находитесь в России и ищите информацию на русском языке, то лучше всего воспользоваться российской поисковой системой, к тому же скорость общения с такой системой выше из-за её территориального расположения.
Некоторые каталоги и поисковые системы в WWW. | |
Каталог | URL |
Yahoo! | www.yahoo.com |
Web Crawler | www.webcrawler.com |
Lycos | www.lycos.com |
HotBot | www.hotbot.com |
AltaVista | www.altavista.digital.com |
InfoSeek | www.inforseek.com |
Российские | |
Rambler | www.rambler.ru |
Яndex | www.yandex.ru |
Большинство поисковых систем имеют свои правила составления запросов, справку по которым обычно можно прочитать там же.
Порядок выполнения работы:
Перед началом работы необходимо создать свой каталог на диске, который по окончанию работы надо стереть и в который в процессе выполнения лабораторной работы Вы будите записывать всю информацию, но отчёт по первой лабораторной работе нужно будет сохранить на дискете для выполнения лабораторной работы №2.
1. Загрузить браузер, ввести адрес “bmstu.ru” и перейти на Web-страницу нашего университета. Изучить её. Найти страницу нашей кафедры. Сохранить страницу и одну из картинок на жёсткий диск.
2. Изучение поисковых систем.
Ввести адрес поисковой системы Rambler или Яndex ("rambler.ru", "yandex.ru"). Изучить язык запросов поисковой системы. Ввести строку поиска любой тематики. Загрузить любую страницу из списка найденных. Сохранить её на диск.
3. Создайте собственную страницу(проверяя её вид в окне браузера на каждом этапе проектирования):
1. Запустите программу "Блокнот" (notepad.exe). Создайте файл с именем и расширением <Ваша фамилия>.htm.
2. В этом файле напечатайте текст HTML-страницы (в ней обязательно должен присутствовать заголовок и комментарий). HTML-страница должна отображать в окне браузера какую-нибудь строку.
3. Допишите текст страницы так, чтобы получилось два абзаца произвольной тематики. При этом первый абзац должен быть выровнен по центру, а второй - по левому краю. Шрифт первого абзаца должен быть "bold" (жирный), "underline" (подчёркнутый) и на размер больше второго, а шрифт второго абзаца – "italic" (курсив). Задайте разные шрифты для абзацев.
4. Добавьте в Web-документ после второго абзаца гиперссылку на сайт МГТУ им. Н.Э.Баумана.
5. Измените вид странички следующим образом:
Задайте отличные от установленных по умолчанию цвета: текста, фона и гиперссылок. Задайте отступ для строки от верхнего и левого края окна браузера. Сделайте так, чтобы цвет второго абзаца был отличен от первого.
6. Вставьте между абзацами картинку из пункта 1 и обведите её рамкой с толщиной более 1 пиксела. Установите текст второго абзаца справа от картинки на определённом расстоянии.
7. Добавьте после абзаца с картинкой и до гиперссылки красную нерельефную линию шириной в 2 пиксела и длиной 80% от ширины окна браузера, выровняв её по середине странички.
8. Просмотрите свою страницу (если это возможно) в двух различных браузерах.
Примеры, используемых тэгов и их параметров:
1. <body bgcolor="blue">
2. <body> <p align="left"> <font face="italic"> <font size=5>
3. <p align="center"> <font face="italic"> <font size=3>
4. <img src="rsrvitv.png" align="center">
<img align=left BORDER="9" src="s.png">
5. <body scroll link=yellow bgcolor=8a0001 >
<p align="center" >
<FONT color=white size=10 face="Arial">
6. <body scroll link=yellow bgcolor=8a0001 =>
<p align="center" >
<FONT color=white size=10 face="Arial">
7. <a href="http://www.sut.ru/">
8. <FONT color=white size=10 face="Arial">
Тэг шрифта <FONT> позволяет задавать размер текущего шрифта в отдельных местах текста. Диапазон установки текущего шрифта – от 1 до 7.
Тэг <FONT> предоставляет возможности управления размером, начертанием и цветом текста. Изменение гарнитуры шрифта выполняется простым добавлением к тэгу <FONT> атрибута FACE. Например, для изображения текста шрифтом Arial необходимо записать <FONT FACE="ARIAL">.
Для изменения цвета шрифта в тэге <FONT> можно использовать атрибут COLOR="X".
Вместо Х надо подставить либо название цвета (в кавычках), либо его шестнадцатеричное значение. При задании цвета шестнадцатеричным числом можно представить этот цвет разложенным на три составляющие:
красную(R), зеленую (G), синюю (B), каждая из которых имеет значение от 0 до FF.
Существует три тэга выделения фрагментов текста:
<B> … </B> для выделения полужирным,
<I> … </I> для выделения курсивом,
<U> …</U> для выделения подчеркиванием.
Возможно использование комбинированных шрифтов:
<I><B>ффффф ффффф </B></I> <I>ыыыыы ыыыыы</I> <U> вввввв вввввв</U>
Примеры записи цвета в формате RGB приведены в таблице:
Цвет | RRGGBB | Цвет | RRGGBB | ||
black | черный | purple | фиолетовый | FF00FF | |
white | белый | FFFFFF | yellow | желтый | FFFF00 |
red | красный | FF0000 | brown | коричневый | |
green | зеленый | 00FF00 | orange | оранжевый | FF8000 |
azure | бирюзовый | 00FFFF | violet | лиловый | 8000FF |
blue | синий | 0000FF | gray | серый | A0A0A0 |
return false">ссылка скрыта