Лабораторная работа №21. Технологии создания Web-страниц средствами html-конструирования
HTML – язык логической, структурной разметки документов, включающий возможность определения таких элементов, как гипертекстовых ссылок, заголовков, абзацев, списков, а также графических изображений и веб-форм.
Первое, что нам нужно усвоить: хтмл (html) - это то, что мы сейчас изучаем. Второе, что нам нужно усвоить: html не является языком программирования, он предназначен для разметки текстовых документов (т.е. с помощью него мы размечаем текст, таблицы, картинки и т.д. на нашей странице). То, как будут выглядеть картинки, текст и другие элементы на вашей странице, и как они будут располагаться относительно друг друга, определяют метки (tags или тэги).
Задание 1.
Порядок прежде всего, поэтому перед началом работы создайте в своей папке отдельную папку ПЕРВЫЕ ШАГИ для будущей страницы.
Теперь откройте блокнот (пуск – программы – стандартные – блокнот) и наберите туда следующий текст:
<
html>
<head>
<title>Мой первый шаг </title>
</head>
<body>Здравствуйте, это моя первая страница.
<br>
Добро пожаловать! :)
</body>
</html>
Сохраните этот документ, присвоив ему имя index.html (Файл - Сохранить Как, дальше вводите имя своего документа)
Обязательные теги, это такие теги, которые вы всегда должны прописывать для каждой своей страницы.
<html> Этот тэг должен открывать документ.
</html> Этот тэг должен закрывать документ
<head> </head> - голова документа
<body> </body> - тело документа
Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации. Например <title>- заголовок.
Все тэги, расположенные между <body> </body> - непосредственное содержание документа.
Теперь откроем браузер Internet Explorer (не закрывайте блокнот, он нам еще пригодится), и откроем в браузере наш документ: Файл - Открыть - кнопка Обзор - Наш документ index.html.
Если мы чего-то изменим в нашем *.html документе (в блокноте), то, чтобы посмотреть, как это выглядит в нашем браузере, надо не забывать нажимать в браузере кнопку ОБНОВИТЬ. Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ.
Задание 2.
Давайте окрасим слова Добро Пожаловать в красный.
Добавьте к этой строчке команды, как представлено ниже:
<font color="#CC0000"> Добро пожаловать! :) </font>
Color – параметр (атрибут) для тэга font, он отвечает, в данном случае, за цвет заключенного в контейнер текста.
Если цвет текста в <body> не задавать, то весь текст страницы по умолчанию будет черным.
Задание 3.
Давайте сделаем текст синим, кроме текста, для которого мы специально прописали <font></font>. Цвет фона устанавливается в уже знакомом нам тэге <body>. Для наглядности установим черный цвет. Тогда ваша программа будет иметь вид:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :)
</body>
</html>
Обратите внимание: мы одновременно можем прописать в тэге <body> и цвет текста в документе, и цвет фона
Задание 4.
С помощью параграфов мы можем центрировать текст:
<p align="center">текст</p>
С помощью параграфов мы можем выровнять текст по левому краю:
<p align="left">текст</p>
По правому краю документа:
<p align="right">текст</p>
По обоим краям документа (по ширине):
<p align="justify">текст</p>
Теперь введем параграфы в наш документ и дополним текст. Внесите изменения в ваш текст:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<p align="center">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </p>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится еще один виртуальный друг? :)
</p>
</body>
</html>
Задание 5.
Существуют шесть уровней заголовков:
<H1> текст </H1>
<H2> текст </H2>
<H3> текст </H3>
<H4> текст </H4>
<H5> текст </H5>
<H6> текст </H6>
Итак, h1 – самый важный, h6 – наименее важный. Вводя заголовки в текст, вы позволяете вашему посетителю более легко ориентироваться на странице.
Но, если вы хотите выделить большой фрагмент текста, то заголовки для этого использовать нельзя. Для этого предназначен атрибут size тэга <font></font>, который устанавливает желаемый размер шрифта:
<font size="+4"> текст </font>
<font size="+3"> текст </font>
<font size="+2"> текст </font>
<font size="+1"> текст </font>
<font size="+0"> текст </font>
<font size="-1"> текст </font>
<font size="-2"> текст </font>
С помощью face мы можем задать тип шрифта. Какие же типы шрифтов являются стандартными, и по идее должны находиться на компьютере каждого пользователя - это: Times; Times New Roman; Arial; Helvetica; Courier; Verdana; Tahoma; Comic Sans; Garamond.
Давайте теперь изменим наш документ.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<H3>
<p align="center">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </p></H3>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится
<font size="+3"> еще один виртуальный друг? :)</font>
</p>
<font face="arial"> пример шрифта Arial</font>
</body>
</html>
Задание 6.
Чтобы вставлять картинки в документ необходимо добавить:
<img src="*.*">
Для вашего удобства скопируйте картинки (из папки указанной преподавателем) в ту же папку, что и документ.
Задание 7.
Измените текст нашей программы и вставьте 2 картинки.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<H3>
<p align="center">
Здравствуйте, это моя первая страница.
<br>
<img src="черепаха.gif">
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </p></H3>
<p align="justify">
Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится
<font size="+3"> еще один виртуальный друг? :)</font>
</p>
<img src="машина.jpg">
<br>
<font face="arial"> пример шрифта Arial</font>
</body>
</html>
Задание 8.
Сохраните документ (теперь достаточно просто Файл – Сохранить). Просмотрите его в браузере (если он был открыт, то достаточно просто нажать кнопку ОБНОВИТЬ).
Наша страничка может состоять из нескольких документов. Один из них главный (index.html) - он открывается первым и должен обязательно лежать на вашем сайте в интернете. При помощи ссылок мы связываем эти документы. Так с главной страницы по ссылкам мы можем перейти на страницу с фотографиями, с этой страницы мы можем перейти обратно на главную страницу, или, допустим, на страницу с нашими стихотворениями, и т.д.
Ссылкой на эти другие документы (части нашей странички) может быть текст (фраза, слово), а может быть и картинка.
Задание 9.
Для начала создадим ссылку на пока не существующий документ:
……………
<br>
<font face="arial"> пример шрифта Arial</font>
<br>
<a href="primer.html">посмотреть далее</a>
</body>
</html>
Сохраните документ (теперь достаточно просто Файл – Сохранить).
Задание 10.
Создадим новый документ (Файл - Создать). Сохраним его primer.html (Файл – Сохранить как…) в той же папке, где находится наш главный документ index.html.
В этом документе мы создадим таблицу.
Таблица задается тэгом: <table></table>
Таблица состоит из строк и столбцов (ячеек), поэтому нам надо еще указать и их.
<tr></tr> - строчка таблицы
<td></td> - столбец (ячейка) таблицы
Итак, теперь нам надо задать свою таблицу:
<html>
<head>
<title>Мой второй шаг </title>
</head>
<body>
<table>
<tr>
<td>1x1</td>
<td>1x2</td>
<td>1x3</td>
</tr>
<tr>
<td>2x1</td>
<td>2x2</td>
<td>2x3</td>
</tr>
</table>
</body>
</html>
Задание 11.
Фон задается атрибутом bgcolor="цвет_фона". Фон можно задать для таблицы в целом, для ряда, для ячейки (в пределе одного ряда). В нашем случае мы задаем фон для каждой ячейки. Измените соответствующие строки:
<table>
<tr>
<td bgcolor="#FFCC33">1x1</td>
<td bgcolor="#336699">1x2</td>
<td bgcolor="#FFCC33">1x3</td>
</tr>
<tr>
<td bgcolor="#336699">2x1</td>
<td bgcolor="#FFCC33">2x2</td>
<td bgcolor="#336699">2x3</td>
</tr>
</table>
Сохраните документ (теперь достаточно просто Файл – Сохранить). Просмотрите его в браузере.
Задание 12.
Самостоятельно измените цвета ячеек. Коды находятся в файле Таблица цветов.htm
Задание 13.
Вы можете задать высоту и ширину для всей таблицы, атрибутами height и width.
Зададим в нашем примере не только высоту и ширину, но и сразу выровняем содержимое ячеек по центру.
……………….
<table>
<tr>
<td height="35" width="50" bgcolor="#FFCC33"> <center> 1x1 </center> </td>
<td width="50" bgcolor="#336699"> <center> 1x2 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center>1x3 </center> </td>
</tr>
<tr>
<td height="35" width="50" bgcolor="#336699"> <center> 2x1 </center> </td>
<td width="50" bgcolor="#FFCC33"> <center> 2x2 </center> </td>
<td width="50" bgcolor="#336699"> <center> 2x3 </center> </td>
</tr>
</table>
………………..
Задание 14.
Линия задается тэгом <Hr> и не требует закрывающего тэга:
(1) <Hr align="right"> (center или left)
(2) <Hr width="30%"> (ширина линии в процентах/пикселях)
(3) <Hr size="6"> (толщина линии)
(4) <Hr NoShade> (отмена объемности)
(5) <Hr color="cc0000"> (цвет линии)
Добавьте после таблицы линию:
…………
</table>
<Hr align="left" width="30%" size="6" color="cc0000">
</body>
………….
Задание 15.
HTML допускает задание в документах списков двух типов:
Маркированный список
Каждый элемент этого списка браузер предваряет меткой в начале строки, а сами строки смещает вправо.
Нумерованный список
В нумерованных списках каждый элемент снабжен номером, вид и начальное значение которого настраивается специальным атрибутом.
Нумерованный список задается при помощи команды <OL>.
После линии добавьте следующие строки:
<UL>
<LI>Какой он, этот Слонопотам?</LI>
<LI>Неужели очень злой?</LI>
<LI>И как он их любит?</LI>
</UL>
<OL>
<LI>Хамите.</LI>
<LI>Хо-хо!</LI>
<LI>Жуть.</LI>
</OL>
Задание 16.
В таких документах можно задавать не только статический текст, но и бегущую строку или картинку.
Ниже списков добавьте следующие строки:
…………
<br>
<br>
<marquee height="10" width="270" bgcolor="#99CCFF">
побежали
</marquee>
……………..
Задание 17.
Сохраните документ (теперь достаточно просто Файл – Сохранить).
Закройте все блокнотовские документы и запустите наш первый файл index.html в браузере. Проверьте нашу ссылку (она должна переходить на наш второй документ).