Тема: «Структура HTML-документа. Тэг».
Лабораторная работа
Цель: Ознакомиться HTML, структурой Web-документа, понятием тэг, атрибут. Сформировать умение создавать простейшие HTML-странички.
Оборудование:для проведения работы необхом любой стандартный браузер, например, Internet Explorer,простой текстовый редактор, например, Блокнот и подключение Интернет.
Создайте на диске отдельную директорию (папку) для будущей страницы D:\первые шаги. Теперь откроем блокнот (notepad) и скопируем туда следующий текст:
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
Добро пожаловать! :)
</body>
</html>
А теперь сохраним этот документ, присвоив ему имя *.html D:\первые шаги\index.html. Теперь откроем, допустим, Internet Explore (не закрывайте блокнот, он нам еще пригодится). Файл - Открыть - кнопка Обзор - Наш документ (index.html). Если мы что-то изменили в нашем *.html документе (в блокноте), то, чтобы посмотреть, как это выглядит в Internet Explorer, надо не забывать нажимать в IE (Internet Explorer) кнопку ОБНОВИТЬ (тоже самое касается других браузеров:) Если изменений не видно, то это значит, что вы где-то что-то неправильно написали, или забыли сохранить документ).
Рис. Так будет выглядеть наша первая страничка
Первое, что нам нужно усвоить, что хтмл (html) это то, что мы сейчас изучаем. Второе, что нам нужно усвоить: Html не является языком программирования, он предназначен для разметки текстовых документов (т.е. для форматирования текста). То, как будет выглядеть ваш текст, определяют метки (tags или тэг).
Пример тэга: <br> (перенос текста на другую строку, что-то вроде Enter).
Задание: Попробуйте между тэгами Body вставить тэг <br> в нескольких местах - посмотрите, что получится.
Т.е. все, что находится между < и > - это тэг. Текст, не находящийся между такими скобками < > - весь виден при просмотре в браузере.
Как мы видим на нашем примере тэгов много и они разные. Обратите внимание на картинку, она тут не просто так, она показывает нам обязательные тэги.
<html>
Этот тэг должен открывать документ. Если есть открывающий тэг, то должен быть и закрывающий:
</html>
И так всегда по умолчанию. Некоторые тэги, вроде <br>, не требуют закрывающего тэга. Но вернемся к нашему документу и рисунку.
Все тэги, расположенные между <head> </head>, это что-то вроде служебной информации. Например, <title> - заголовок. Откройте IE (Internet Explore) с нашим документом и устремите свой взгляд выше всех командных строк (на заголовок окна)... Увидели?
Все тэги, расположенные между <body> </body> - непосредственное содержание документа.
Мы будем учиться раскрашивать. Для начала нам нужна палитра, так как все цвета прописываются определенным способом.
Например белый цвет - ffffff
Но вернемся к нашей страничке. Давайте окрасим слова «Добро Пожаловать» в красный цвет.
<font color="#CC0000">Добро пожаловать! :)</font>
Теперь попробуйте вместо СС0000 подставлять другие значения цветов.
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body>
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать! :) </font>
</body>
</html>
Рис. Страничка, где использован цвет текста
Тэг <font></font> - многофункционален. Им может задаваться не только цвет текста в конкретной части документа, но и размер шрифта, и вид шрифта (Arial), но об этом чуть позже. Как же еще задавать цвета в документе? - вспомним об открывающем теге <body>:
<body text="#336699">
Это значит, что весь текст страницы будет синим, кроме текста, для которого мы специально прописали <font></font> (если цвет в <body> не задавать, то по умолчанию он будет черным).
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :)
</body>
</html>
Рис. Введение синего цвета в тэг <body>.
С цветами для текста мы разобрались, теперь подумаем о фоне.
Мы узнаем, как изменять цвет фона документа, и поговорим немного об этике. Цвет фона устанавливается в уже знакомом тэге <body>:
<body bgcolor="#000000">
Для наглядности пропишем черный цвет, вы же свой документ можете расскрасить любым другим (если цвет в <body> не указывать, то по умолчанию он будет белым, хотя иногда цветом по умолчанию может являться любой другой, кроме белого, поэтому лучше уж прописывайте цвет фона в body).
<html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#D1D1D1">
Здравствуйте, это моя первая страница.
<br>
<font color="#CC0000"> Добро пожаловать!</font> :)
</body>
</html>
Рис. Страничка, где использован серый цвет фона.
Обратите внимание: мы одновременно можем прописать в тэге <body> и цвет текста в документе, и цвет фона.
<body text="#336699 bgcolor="#000000">
Упражнение для самостоятельной работы:
Проделайте все предложенные в работе манипуляции по оформлению Web-страницы. Создайте самостоятельно Web-страницу на тему «Моя персональная страничка» с использованием, полученных в работе знаний по ее оформлению: создание заголовка и содержания самой странички, используя различный цвет текста и фона вашей странички.
Контрольные вопросы:
1. Что такое HTML?
2. Для чего необходим браузер?
3. Что такое тэг? С какими тэгами вы познакомились?
4. Что такое заголовок, тело Web-страницы?
5. Что такое палитра? Как прописываются цвета в HTML?
6. Как организовать фон Web-страницы?
Литература
1. Хольцнер С., Dynamic HTML, Руководство разработчика, БХВ Киев, 1999 г.
2. Кузин А., JavaScript шаг за шагом, [email protected].
3. Алленова Н., Первые шаги – учебник (руководство) по хтмл (html), http://www.postroika.ru.
Лабораторная работа