Добавил:

Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.

Вуз:

Новосибирский государственный технический университет

Предмет:

[НЕСОРТИРОВАННОЕ]

Файл:

Metodichka_Informatika_2007_dlya_studentov.doc

Скачиваний:

Добавлен:

27.03.2015

Размер:

1.12 Mб

Скачать

☆

<<< < Предыдущая 1 2 3 4 5 6 78 / 178 9 10 11 12 13 14 15 16 17 > Следующая >>>

Лабораторная работа №8 Создание Web-страницы с помощью языка программирования html

Цель работы: получение навыков создания Web-страниц.

Используемое программное обеспечение: Операционная система Windows, блокнот или другой текстовый редактор, создающий исполняемые файлы, средство просмотра WEB-страницы - браузер (Netscape, Explorer)

Основные сведения.

HTML - язык World Wide Web

Документ HTML состоит из специальных команд, определяющих форму его отображения при просмотре. Для создания документа воспользуйтесь одним из существующих редакторов (Блокнот, FAR, Microsoft FrontPage).

Для просмотра документов используется специальная программа - "браузер", например, Netscape Navigator или Explorer. Для редактирования программы щелкните правой клавишей мыши по пустому месту документа и выберите ПРОСМОТР HTML-кода.

Структура HTML документа

Символы, заключенные в угловые скобки <> являются HTML командами (тегами), по которым "браузер" распознает, как следует преобразовать части текста, заключенные между этими командами. Документ должен начинаться командой <HTML> и заканчиваться командой </HTML>.

Документ состоит из 2 частей: Заголовка (Head) и Собственно документа (Body). Для выделения заголовка следует ввести: <HEAD> Заголовок документа </HEAD>. Каждый WWW - документ имеет название, которое вводится в титульной строке "браузера".

Для ввода титульной строки в заголовок документа следует воспользоваться следующими командами: <HEAD><TITLE>

Title of Document </TITLE></HEAD>

Для записи основного текста следует ввести <BODY> Основной текст </BODY>.

Таким образом, общая схема документа в формате HTML выглядит следующим образом:

<HTML>

<HEAD>

<TITLE> Заголовок страницы, отображаемый браузером </TITLE>

</HEAD>

<BODY> Основной текст документа и дополнительные теги, указывающие на другие объекты.

</BODY>

</HTML>

Задание №1. Создать Web-страницу, предлагаемую в данной лабораторной работе.

Порядок выполнения работы: следуя нижеприведенным указаниям выполняйте предлагаемые действия, в результате чего вы должны получить Web-страницу, содержащую основные компоненты языка HTML.

Создайте с помощью текстового редактора свой файл, состоящий из приведенных выше команд. Файл должен иметь расширение .htm. При помощи браузера просмотрите созданный файл. Обратите внимание, где располагается заголовок TITLE и где - основная информация (body).

При написании команд HTML не имеет значение, какими буквами - строчными или прописными Вы пишете команды.

Метки для абзацев и другое.

В документе HTML невозможно создать абзац, используя клавишу [Enter].

Для перехода на следующую строку воспользуйтесь командой <br>

Для создания пустой строки воспользуйтесь командой <p>

Для создания горизонтальной черты воспользуйтесь командой <hr>

Заголовки в документе создаются с помощью команд: <Hi> Заголовок </Hi>

причем при i = 1 заголовок самый крупный, а при i = 6 - самый мелкий.

Добавьте в Ваш файл следующий текст и просмотрите результат.

<P> Новый абзац

<HR> Горизонтальная линия

<BR> Конец строки

Заголовки <H1> Самый большой </H1>

<H6> Самый маленький</H6>

Создание списков

Списки предназначены для представления информации в упорядоченном виде.

В HTML - документах используется 3 вида списков:

1.Неупорядочные списки (Тег <UL>),

2. Маркированные списки (Тег <OL>),

Элемент списка задается тегом <LI>.

Добавьте в файл следующий текст и запустив браузер, посмотрите результат.

<P> Маркированный список.

<UL>

<LI>Первый маркер.

<LI>Второй маркер.

</UL>

Нумерованный список.

<OL>

<LI>Первый маркер.

<LI>Второй маркер.

</OL>

Метки форматирования

Для выделения отдельных частей текста можно воспользоваться следующими стилями:

- жирный (Bold);

- курсив (Italic);

- с подчеркиванием (Underline);

Для выделения текста жирным шрифтом воспользуйтесь командами:

Для выделения текста курсивом воспользуйтесь командами:

Для выделения текста подчеркиванием воспользуйтесь командами:

Одинаковая ширина символов текста:

Сохранение всех пробелов и других форматирующих символов:

Самостоятельно вставьте в файл указанные выше теги и просмотрите результат через браузер.

Управление цветом

Для изменения цвета текущего текста можно в любом месте домашней страницы воспользоваться

командами:

<FONT COLOR= Код цвета > Текущий текст </FONT COLOR>

Определено несколько именованных цветов. Их значения видны из таблицы:

Отображаемый текст Запись в формате HTML

black <FONT COLOR= black > black </FONT COLOR>

maroon <FONT COLOR= maroon > maroon </FONT COLOR>

green <FONT COLOR= green > green </FONT COLOR>

olive <FONT COLOR= olive > olive </FONT COLOR>

navy <FONT COLOR= navy > navy </FONT COLOR>

purple <FONT COLOR= purple > purple </FONT COLOR>

teal <FONT COLOR= teal > teal </FONT COLOR>

gray <FONT COLOR= gray > gray </FONT COLOR>

silver <FONT COLOR= silver > silver </FONT COLOR>

red <FONT COLOR= red > red </FONT COLOR>

lime <FONT COLOR= lime > lime </FONT COLOR>

yellow <FONT COLOR= yellow > yellow </FONT COLOR>

blue <FONT COLOR= blue > blue </FONT COLOR>

fuchsia <FONT COLOR= fuchsia > fuchsia </FONT COLOR>

aqua <FONT COLOR= aqua > aqua </FONT COLOR>

white <FONT COLOR= white > white </FONT COLOR>

Создание таблиц

В HTML начало таблицы задается тегом <TABLE> и следующими атрибутами:

- BORDER - определяет линии, разграничивающие клетки в таблице. Ширина линии задается командой BORDER = N.

- BGCOLOR - Определяет цвет фонового изображения в таблице.

- CAPTION - название таблицы.

- ALIGN = TOP/BOTTOM - расположение названия таблицы (сверху и внизу).

Теги:

- <TR> - задает начало строки.

- </TR> - задает конец строки.

- <TH> - задает начало блока заголовков столбцов.

- </TH> - задает конец блока заголовков столбцов.

- <TD> - задает текстовое содержание ячейки данных на данной строке.

- </TD> - закрывает текстовое содержание ячейки.

Тег </TABLE> является конечным тегом таблицы.

Добавьте в Ваш файл следующие строки:

<CAPTION ALIGN = BOTTOM> Текст названия </CAPTION>

<TR>

<TH>Заголовок 1-го столбца</TH>

<TH>Заголовок 2-го столбца</TH>

<TH>Заголовок 3-го столбца</TH>

</TR>

<TD> Ячейка (1 строка, 1 столбец) </TD>

<TD> Ячейка (1 строка, 2 столбец) </TD>

<TD> Ячейка (1 строка, 3 столбец) </TD>

</TR>

<TR>

<TD> Ячейка (2 строка, 1 столбец) </TD>

<TD> Ячейка (2 строка, 2 столбец) </TD>

<TD> Ячейка (2 строка, 3 столбец) </TD>

</TR>

</TABLE>

Некоторые дополнительные метки расширения HTML.

- Размер рамки таблицы <TABLE BORDER =размер>

- Ширина таблицы <TABLE WIDTH = ширина>

- Ширина клетки таблицы <TD WIDTH = ширина>

- Интервал клетки таблицы <TABLE SPACING= интервал>

- Заполнение клетки таблицы <TABLE CELLPADDING =заполнение>

- Размер шрифта <FONT SIZE = размер>Текст</FONT>

- Размер базового шрифта <BASEFONT SIZE = размер>

- Цвет текста <BODY TEXT=#nnnnnn>

- Цвет фона <BODY BGCOLOR=#nnnnnn>

- Центрирование абзацев <CENTER>Центрированный абзац</CENTER>

Самостоятельно вставьте в файл указанные выше теги и просмотрите результат через браузер.

Метки изображений.

С помощью приведенных ниже таблиц 1 и 2 возможно делать гиперссылки на различные ресурсы.

Таблица 1.

Изображение

Формат метки изображения

Общий формат изображений

Выравнивание по верху

Выравнивание по середине

Выравнивание по низу

Задание альтернативного текста

Самостоятельно вставьте в файл указанные выше теги и просмотрите результат через браузер. В качестве графического файла используйте файл, из коллекции картинок или заданный преподавателем (для упрощения написания гиперссылки графический файл лучше скопировать в папку с вашей Web-страницей). Выясните, в каких случаях на экране появляется альтернативный текст.

Метки гиперссылок.

Таблица 2.

Ресурс	Способ построения гиперссылки
Общий формат гиперссылки	<A HREF="URL">Текст гиперссылки</A>
Закладка на данной HTML-странице	<A NAME="Имя закладки на данной странице"> Текст закладки </A>
Гиперссылка на закладку	<A HREF="#Имя закладки">Текст гиперссылки</A>
Электронная почта	<A HREF=mailto:Адрес>Текст гиперссылки</A>
Файл (или каталог)FTP	<A HREF="ftp://имя сервера /каталог/файл"> Текст гиперссылки</A>
Файл Gopher	<A HREF="Gopher://имя сервера /каталог/файл"> Текст гиперссылки</A>
Группа новостей Usenet гиперссылки</A>	<A HREF="news:имя группы новостей"> Текст
Telnet гиперссылки</A>	<A HREF="telnet://имя компьютера">Текст

Самостоятельно вставьте в файл гиперссылки на www.nstu.ru (это сайт НГТУ). Выполните закладку и ссылку на нее.

Просмотрите результат через браузер и покажите преподавателю.

<<< < Предыдущая 1 2 3 4 5 6 78 / 178 9 10 11 12 13 14 15 16 17 > Следующая >>>

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]

#
27.03.2015122.88 Кб9Metodichka.doc
#
27.03.2015486.41 Кб12metodichka_2_semestr.pdf
#
20.04.2019152.06 Кб1metodichka_dlja_zaochnikov_OTK_(2).doc
#
27.03.2015592.38 Кб5metodichka_EK.doc
#
08.11.2018814.08 Кб28Metodichka_Fakultety.doc
#
27.03.20151.12 Mб11Metodichka_Informatika_2007_dlya_studentov.doc
#
11.03.20162.77 Mб11Metodichka_Informatika_2015_1_semestr.pdf
#
06.05.2019278.53 Кб1Metodichka_kursovaya_pravka1.doc
#
27.03.20155.46 Mб10Metodichka_otredaktirovannaya_1_05_2013.pdf
#
27.03.2015780.8 Кб66Metodichka_po_kontrolyu_kachestva.doc
#
11.03.2016926.62 Кб6Metodichka_po_napisaniyu_NIRS.pdf