Уч_Kabanov / Информатика / 26. HTML 2 / HTML2
.pdf
Простейшая HTML-страничка
Язык HTML есть язык программирования, предназначенный для создания документов, размещаемых на Web- сервере, доступ к которому осуществляется по сети Интернет, а “выполнение” “программ”, написанных на HTML, происходит в приложениях-просмотрщиках, которые называются браузерами (например, в Microsoft Internet Explorer или
Netscape Navigator).
Команды языка HTML задаются между специальными символами < ... > и называются тегами. Теги могут быть двух видов:
1)одноэлементный тег: <...>; его достаточно просто вставить в текст для того, чтобы совершить какое-либо
действие;
2)парный тег: <...>...</...>; он выполняется с того места, где употреблен, до того места, где указан признак окончания его действия. Признаком завершения команды служит тот же самый тег, только начинающийся с символа слэш " / ": <...> - открывающийся тег, </...> - закрывающийся тег.
HTML не чувствителен к регистру, т.е. все равно какими буквами писать: прописными или строчными (например BODY эквивалентно body или Body).
Задание1.
1.На диске D создайте свою папку (если ее нет).
2.Откройте Блокнот, создайте файл example1.html (html – расширение файла, показывающее, что это – HTML- документ) и сохраните его в вашей папке. В окне этого файла запишите следующие команды (они выделены жирным):
<HTML> <HEAD > <TITLE>
Простейшая страничка
</TITLE>
</HEAD>
<BODY>
Это моя HTML-страница
</BODY>
</HTML>
3. Загрузите Microsoft Internet Explorer, в строке “Адрес” выберете вашу папку и файл example1.html в этой папке. Посмотрите, как выглядит ваша страничка.
Любой HTML-документ должен начинаться (и заканчиваться) тегом HTML. Этот тег указывает на то, что данный документ содержит в себе HTML-текст. Таким образом, <HTML>...</HTML> - границы HTML-программы.
Далее документ разбивается на две части тегами HEAD и BODY.
Тег HEAD называется заголовком HTML-документа. Все, что находится между тегами <HEAD> ... </HEAD> является головной частью программы. <BODY> ... </BODY> - тело HTML-программы.
В головной части HTML-программы обычно используется тег TITLE для написания названия странички (не более 64 символов). Это название показывается в заголовке окна браузера.
Все, что мы будем изучать далее (кроме фреймов) пишется в теге BODY.
Теги форматирования текста
Задание 2.
В файле example1.html сотрите строчку
Это моя HTML-страница
и вместо нее вставьте следующие строчки
Глава 1. HTML и создание WEB-страниц Что такое HTML?
Язык HTML не является языком программирования в том смысле, в каком мы привыкли представлять себе такие языки программирования, как C, C++, Java, Basic и другие. Он предназначен для создания документов, размещаемых на Web-сервере, доступ к которому осуществляется по сети Интернет
Сохраните написанное, снова загрузите Microsoft Internet Explorer и посмотрите, что получилось.
(Вы должны увидеть сплошной неформатированный текст, несмотря на то, что в HTML-файле текст был разделен на абзацы и строки.)
Для отделения одного абзаца от другого используется тег <P>, который надо ставить в начало каждого абзаца. Закрывающий тег </P> не нужен.
Если вы просто хотите отделить строку от последующего текста, то в начало это строки надо поставить тег <BR>, для которого также не нужен закрывающий тег </BR>.
Чем отличаются теги <P> и <BR>? Они оба отделяют строку, но тег <P> еще добавляет пустую строку, которая зрительно выделяет абзац.
Задание 3.
1. В файле example1.html в начало строк Глава 1. … Что такое… Язык HTML …
поставьте тег <BR>, сохраните файл, откройте Microsoft Internet Explorer и посмотрите, что получилось.
2. Теперь в начало этих строк поставьте тег <P>, сохраните файл, откройте Microsoft Internet Explorer и посмотрите, что получилось.
Для оформления иерархии заголовков в HTML используются теги <H1>, <H2>, <H3>, <H4>, <H5>, <H6>, <H7>. Закрывающие теги необходимо помещать сразу после окончания текста соответствующего заголовка.
Задание 4.
1
1. В файле example1.html в начало (после тега <P>) строки
Глава 1. HTML и создание WEB-страниц
поставьте тег <H1>, а в конец этой строки поставьте закрывающий тег </H1>. 2. В начало (после тега <P>) строки
Что такое HTML?
поставьте тег <H2>, а в конец этой строки поставьте закрывающий тег </H2>.
3.Cохраните файл, откройте Microsoft Internet Explorer и посмотрите, что получилось.
Втегах можно указывать значения свойств для этих тегов. Давайте выровняем заголовки нашего текста по центру, а второе предложение основного текста выделим в отдельный столбец и выровняем по правому краю. Для этого используется свойство ALIGN в тегах <H1> и <H2>, а также в теге <P> в обычном тексте основного содержания параграфа.
Задание 5.
1. Создайте в блокноте новый файл example2.html – копию example1.html, сохраните его в вашей папке и сделайте в нем изменения так, чтобы получилась следующая программа:
<HTML> <HEAD > <TITLE>
Простейшая страничка
</TITLE>
</HEAD>
<BODY>
<P><H1 align= “center”> Глава 1. HTML и создание WEB-страниц </H1> <P><H2 align= “center”> Что такое HTML? </H2>
<P> Язык HTML не является языком программирования в том смысле, в каком мы привыкли представлять себе такие языки программирования, как C, C++, Java, Basic и другие.
<P align=”right”>Он предназначен для создания документов, размещаемых на Web-сервере, доступ к которому осуществляется по сети Интернет
</BODY>
</HTML>
2.Cохраните файл example2.html, откройте Microsoft Internet Explorer и посмотрите, что получилось.
3.Теперь выровняйте второе предложение основного текста по левому краю, используя left в свойстве ALIGN и посмотрите, что получилось.
Фон странички
Для тега <BODY> мы можем задать свойства BGCOLOR (цвет фона странички) и BACKGROUND (подключение файла, который будет использоваться в качестве заднего фона странички). Цвет в HTML-документе можно задавать либо в виде стандартного слова, обозначающего цвет, например, white или yellow, а можно указать его в виде шестнадцатеричной величины RRGGBB, где параметры RR показывают интенсивность красного цвета, GG – интенсивность зеленого цвета, GG
– интенсивность синего цвета. |
Таблица 16-и стандартных цветов |
|
|
|
|||
|
Название |
Код RGB |
Имя |
Название |
Код RGB |
Имя |
|
|
черный |
#000000 |
black |
серебряный |
#C0C0C0 |
silver |
|
|
темно-бордовый |
#800000 |
maroon |
красный |
#FF0000 |
red |
|
|
зеленый |
#008000 |
green |
известь |
#00FF00 |
lime |
|
|
оливковый |
#808000 |
olive |
желтый |
#FFFF00 |
yellow |
|
|
темно-синий |
#000080 |
navy |
синий |
#0000FF |
blue |
|
|
фиолетовый |
#800080 |
purple |
фуксия |
#FF00FF |
fuchsia |
|
|
чирок |
#008080 |
teal |
аква |
#00FFFF |
aqva |
|
|
серый |
#808080 |
gray |
белый |
#FFFFFF |
white |
|
Пример: каждая из команд |
<BODY BGCOLOR= #800000> или <BODY BGCOLOR=maroon> задает темно-бордовый |
фон странички. |
Задание 6. |
Последовательно задайте зеленый, желтый, серый и красный цвета фона вашей странички сначала с помощью стандартного слова, затем с помощью кода. Затем опять сделайте белым фон странички.
Можно также задать свой фон. Командное слово BACKGROUND подключает картинку в качестве заднего фона.
Задание 7.
В вашей папке находятся файлы 1.jpg – 8.jpg. Посмотрите каждый из них и затем понравившуюся картинку вставьте в качестве фона. Это можно сделать так: вместо команды <BODY> запишите команду
<BODY BACKGROUND=”1.jpg”>.
Задание 8.
Откройте графический редактор Paint, нарисуйте какую-нибудь картинку, сохраните ее как файл pucture.bmp в вашей папке и в файле exam2.html вместо команды <BODY> запишите команду <BODY BACKGROUND=”pucture.bmp”>. Откройте Microsoft Internet Explorer и посмотрите, что получилось.
Цвет и шрифт
Цвет – свойство многих текстовых элементов. Изменив свойство “цвет” для параграфа, легко можно выделить тот или иной фрагмент текста цветом. Это делается с помощью тега <FONT> и свойства COLOR.
Задание 9.
2
Давайте сделаем первую строку красной, вторую – фиолетовой, а остальные – фуксией. Для этого в начало первой строчки надо поставить команду <FONT COLOR= ”red”>, а в конец этой строчки – закрывающий тег </FONT>. В начало второй строки поставьте команду <FONT COLOR= ”purple ”>, а в конец этой строчки – закрывающий тег </FONT>. В начало третьей строки поставьте команду <FONT COLOR= ”fuchsia”>, а в конце последней строки поставьте – закрывающий тег </FONT>. Сохраните файл и посмотрите, что получилось.
Для задания шрифта также используется тег <FONT>.
Задание 10.
Создайте в блокноте новый файл example3.html, сохраните его в вашей папке и запишите в нем следующую программу
<HTML> <HEAD > <TITLE>
Работаем с текстом
</TITLE>
</HEAD>
<BODY>
<P> Демонстрируем изменение размеров и цвета шрифта. <P align=”center”> Обычный шрифт
<P align=”center”><font size=+1 color=”red”>Указан размер size=+1 и красный цвет</font> <P align=”center”><font size=+2 color=”blue”>Указан размер size=+2 и синий цвет</font>
<P align=”center”><font size=+3 color=”green ”>Указан размер size=+3 и зеленый цвет</font> </BODY>
</HTML>
Сохраните этот файл, откройте Microsoft Internet Explorer и посмотрите, что получилось.
|
|
Некоторые шрифты |
|
|
|
<TT> |
телеграфный шрифт; |
<I> |
курсив; |
<B> |
жирный шрифт; |
<BIG> |
крупный шрифт; |
<SMALL> |
мелкий шрифт; |
<S> |
перечеркнутый шрифт; |
<U> |
подчеркнутый шрифт. |
|
|
|
|
Для всех этих тегов обязательны закрывающие теги. Например, чтобы написать подчеркнутым шрифтом словосочетание “язык HTML”, надо записать команду: <U>язык HTML</U>
Задание 11.
Создайте в блокноте новый файл example4.html, сохраните его в вашей папке, и напишите HTML-программу, которая выводит на экран красивую красочную поздравительную открытку.
3