- •Лабораторная работа Создание Web-страницы
- •Дрессировка
- •Часть 1. Форматирование текста на Web-странице по образцу
- •Часть 2. Создание нумерованных и ненумерованных списков
- •1.4. Управление цветом
- •1.5. Рисунки на Web-странице
- •Часть 1. Оформление цветом Web-страницы
- •Часть 2. Размещение графики на Web-странице
- •Часть 3. Изменение размеров изображения на Web-странице
- •1.6. Гиперссылки
- •Часть 1. Создание простейшей гиперссылки
- •Часть 2. Создание гиперссылок
- •Часть 3. Цвет гиперссылок
- •Часть 4. Использование рисунка в качестве гиперссылки
- •1.7. Таблицы
- •1.7.1. Создание и форматирование таблиц
- •Часть 1. Создание таблицы по образцу
- •Часть 2. Форматирование таблицы
- •Часть 3. Заполнение таблицы
- •Часть 4. Самостоятельное проектирование и создание таблицы
- •1.7.2. Разметка Web-страницы при помощи таблицы
Лабораторная работа Создание Web-страницы
Понятие HyperText Markup Language (HTML) – включает в себя различные способы оформления гипертекстовых документов, дизайн, гипертекстовые редакторы, браузеры и многое другое.
Для размещения в Интернете страниц с иллюстрациями, оригинальным оформлением, со своим фирменным стилем необходимо заранее продумать связь между Web-страницами, уметь все свои задумки воплотить в работающую программу.
1.1. Основные понятия языка HTML
Прежде чем приступить к изучению HyperText Markup Language, предварительно введём несколько терминов.
HyperText Markup Language – язык разметки гипертекста.
Гипертекст – информационная структура, позволяющая устанавливать смысловые связи между элементами текста на экране компьютера таким образом, чтобы можно было легко осуществлять переходы от одного элемента к другому.
Отдельный документ, выполненный в формате HTML, называется:
HTML-документом;
Web-документом;
Web-страницей.
Гиперссылка – фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.
Группа Web-страниц, принадлежащих одному автору или одному издателю и взаимосвязанных общими гиперссылками, образует структуру, которая называется Web-сайтом.
Каждая HTML-страница имеет свой уникальный URL-адрес в Интернете.
Фрейм – этот термин имеет два значения. Первое – область документа со своими полосами прокрутки. Второе значение – одиночное изображение в анимационном графическом файле.
Апплет – программа, передаваемая на компьютер клиента в виде отдельного файла и запускаемая при просмотре Web-страницы.
Скрипт или сценарий – программа, включённая в состав Web-страницы для расширения её возможностей.
CGI (Common Gateway Interface) – общее название программ, которые, работая на сервере, позволяют расширять возможности Web-страниц.
Браузер – программа для просмотра Web-страниц.
Элемент – конструкция языка HTML. Каждая Web-страница представляет собой набор элементов.
Тэг – начальный или конечный маркеры элемента. Тэги определяют границы действия элементов и отделяют элементы друг от друга. В тексте Web-страницы тэги заключаются в угловые скобки, а конечный тэг всегда снабжается косой чертой.
Атрибут – параметр или свойство элемента. Атрибуты располагаются внутри начального тэга и отделяются друг от друга пробелами. Если элемент содержит текст, то атрибуты могут задавать цвет и размер шрифта, выравнивание текстового абзаца и т.п. Если элемент содержит рисунок, то атрибуты могут задавать размер рисунка, наличие и размер рисунка, наличие и размер рамки вокруг рисунка и пр.
Замечания:
Вся полезная информация должна находиться между начальным и конечным тэгами, указывающими её формат.
Все атрибуты располагаются в начальном тэге.
Для удобства работы начальный тэг можно писать с прописной (заглавной) буквы, а конечный – со строчной буквы, хотя это и не обязательно.
Для некоторых элементов не требуется ставить конечный (закрывающий) тэг. На первых порах настоятельно рекомендуется ставить закрывающие тэги абсолютно для всех элементов, это никак не влияет на работу Web-страниц, но значительно облегчает жизнь.
Не нарушайте очерёдность написания тэгов при вложении одного элемента внутрь другого.
Написание каждого нового элемента лучше начинать с новой строки, а вложенные элементы выделять отступом. Это не обязательно, но значительно облегчает работу на первоначальном этапе.
1.2. Структура HTML-документа
Любая Web-страница начинается с тэга <HTML> и заканчивается тэгом </html>.
<HTML>
...
</html>
<HTML> – указывает на начало разметки гипертекста.
</html> – указывает на конец разметки гипертекста.
Всё, что находится между этими тэгами, можно условно разделить на две части: описание Web-странницы, которое находится между тэгами <HEAD> и <head>, и непосредственно содержание странички, которое размещается между тэгами <BODY> и </body>.
<HTML>
<HEAD>
Здесь будет размещено описание Web-страницы
</head>
<BODY>
Здесь будет размещено содержание Web-страницы
</body>
</html>
1.2.1. Описание Web-страницы
Между тэгами <TITLE> и </title> пишется название вашего сайта, Web-страницы, которое отображается в строке заголовка окна при просмотре странички в браузере. Например, сайт называется «Мой любимый город». Тогда, чтобы это название отображалось в заголовке окна браузера, нужно написать:
<TITLE> Мой любимый город </title>
Тэг <META> несёт служебную информацию о Web-сайте и не отображается в экране браузера: это информация о кодировке Web-странички, имя автора странички, набор ключевых слов, отображающих содержание сайта. Тэг <META> имеет несколько атрибутов. Рассмотрим их подробнее.
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
Этот тэг несёт служебную информацию и не отображается в окне браузера. В нашем примере речь идёт о кодировке Web-странички. Достаточно каждый раз вставлять этот тэг в таком виде на свою страничку, чтобы при её отображении использовалась кодировка Windows-1251, наиболее распространённая на сегодняшний день.
<META name="Author" content="Петров Сидор Пантелеймонович">
Имя автора Web-страницы.
<META name="Keywords" content="Город, достопримечательности, природа, люди, история">
Набор ключевых слов для поиска. Раньше этими словами пользовались поисковые машины для отбора сайтов по тематике запросов. Сегодня эти слова поисковыми машинами практически не используются, однако полезно вставить этот тэг на свою страничку и указать в нём ключевые слова, отражающие содержание вашего сайта.
Пример 1
<HTML>
<HEAD>
<TITLE> Мой любимый город </title>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
<META name="Author" content="Петров Сидор Пантелеймонович">
<META name="Keywords" content="Город, достопримечательности, природа, люди, история">
</head>
<BODY>
Здесь будет размещено содержание Web-страницы
</body>
</html>
Теперь рассмотрим то, что может находиться между элементами <BODY> и </body>.
Этот элемент заключает в себе гипертекст, который определяет собственно Web-страницу. Это та произвольная часть документа, которую разрабатывает автор и которая отображается браузером. Внутри элемента <BODY> можно использовать все элементы, предназначенные для дизайна Web-страницы. Внутри начального элемента <BODY> могут располагаться атрибуты, обеспечивающие установки для всей страницы в целом. Это могут быть атрибуты, задающие:
цвет фона Web-страницы;
«обои» или рисунок фона страницы;
цвет текста на всей странице;
цвет гиперссылок (активных, выбранных, посещённых).
ЗАДАНИЕ № 1
Создание простейшей Web-страницы в текстовом редакторе Блокнот
1. Откройте текстовый редактор Блокнот.
2. Наберите в нём структуру HTML-документа, которая приведена выше.
Вместо слов «Здесь будет размещено содержание Web-страницы» наберите следующие:
<P> Это моя первая страничка </p>
3. Сохраните файл, присвоив ему имя index.htm.
4. Откройте созданный файл в Internet Explorer и в Firefox, чтобы увидеть как выглядит созданная вами первая страница.
5. Закройте браузер.
6. Откройте в Блокноте ваш файл index.htm.
7. Внесите в него следующую информацию: ваши фамилию, имя, учебное заведение, специальность, курс, группу, любимые предметы. Используйте форматирование абзацев.
8. В строке <TITLE> укажите: «Домашняя страничка (Ваше имя и фамилия)».
9. Сохраните файл как page2.htm.
10. Просмотрите результат в браузере, при необходимости отредактируйте файл.
1.3. Форматирование текста
Для форматирования текста существует большое количество элементов. Форматировать текст можно с помощью традиционных элементов: выделять фрагменты курсивом, полужирным шрифтом, выбирать шрифт, размер и цвет шрифта, выравнивать текстовые фрагменты. Если автору не хватает простых вариантов форматирования текста, он может прибегнуть к таблицам стилей, которые существенно расширят возможности языка HTML по форматированию.
Рассмотрим подробнее стандартные элементы языка HTML, позволяющие форматировать текст.
1.3.1. Форматирование шрифта
<FONT>...</font>
Определение типа, размера и цвета шрифта. Все эти характеристики определяются при помощи соответствующих атрибутов.
Абсолютный размер шрифта задается атрибутом size (размер). Этот атрибут может принимать значения от 1 до 7, при этом шрифт первого размера – самый маленький, а седьмого – самый большой (рис. 1).
Мой любимый город. - Это шрифт 1 Мой любимый город. - Это шрифт 2 Мой любимый город. - Это шрифт 3 Мой любимый город. - Это шрифт 4 Мой любимый город. - Это шрифт 5 Мой любимый город. - Это шрифт 6 Мой любимый город. - Это шрифт 7
Рис. 1. Размеры шрифта
Пример 2
<FONT size=3> Тише едешь - дальше будешь </font>
Для элемента <FONT> можно использовать атрибут color (цвет). Название цвета задается либо числом, написанным в шестнадцатеричной системе, например, color=«#ff0000», либо просто его названием, написанным на английском языке, например, color="red".
Более подробно об управлении цветом мы поговорим позже.
Пример 3
<FONT color="blue"> Это шрифт синего цвета </font>
Атрибут face (вид) позволяет задавать определенный шрифт или несколько шрифтов (через точку с запятой).
Пример 4
<FONT face="arial"> </font>
Правда, есть одна проблема. Web-страницы просматривает множество людей, и нет гарантии, что у каждого из них окажется нужный шрифт. Если в системе не установлен шрифт точно с таким же названием, то браузер использует стандартный шрифт из числа назначенных по умолчанию: один пропорциональный, другой моноширинный.
Все эти атрибуты могут быть использованы совместно внутри тэга <FONT>.
Пример 5
<FONT face="Arial" size=3 color="blue"> Это шрифт arial размером 3, цвет синий </font>
<B> ... </b>
Выделение текста полужирным шрифтом. Очень популярный элемент.
Пример 6
Этот текст имеет обычное начертание <В>, а этот будет выделен полужирным шрифтом </b>.
<I>...</i>
Выделение текста курсивом.
Пример 7
Этот текст имеет обычное начертание <I>, а этот выделен курсивом </i>.
1.3.2. Форматирование абзаца
<P>...</p>
Элемент абзаца один из самых полезных. Он позволяет использовать только начальный тэг, так как следующий элемент <p> обозначает не только начало следующего абзаца, но и конец предыдущего. В тех случаях, когда по смыслу необходимо обозначить завершение абзаца, можно использовать и конечный тэг.
Вместе с элементом абзаца можно использовать и атрибут выравнивания align:
align="left" – выравнивание по левому краю;
align="right" – выравнивание по правому краю;
align="center" – выравнивание по центру.
Пример 8
<Р align="center"> Текст этого абзаца выровнен по центру экрана </р>
<Р align="right"> Текст этого абзаца выровнен по правому краю экрана </р>
<Р align="left"> Текст этого абзаца выровнен по левому краю экрана </р>
<BR>
Элемент, обеспечивающий принудительный переход на новую строку. Он имеет только начальный тэг. В месте его размещения строка заканчивается, а оставшийся текст печатается с новой строки.
Пример 9
Уронили мишку на пол, <BR>
Оторвали мишке лапу, <BR>
Все равно его не брошу <BR>
Потому, что он хороший.
Если таким образом расставить элемент <BR> в этом стихотворении, то в экране браузера мы увидим стандартным образом написанное четверостишие на четырех строках.
Список отличается от обычного текста тем, что пользователю не надо думать о нумерации его пунктов: эту задачу программа берет на себя. Если список дополняется новыми пунктами или укорачивается, нумерация корректируется автоматически. В случае ненумерованных списков программа ставит перед каждым пунктом маркеры: кружки, прямоугольники, ромбы или другие изображения. В результате список принимает удобочитаемый вид.
<UL><LI></ul> – ненумерованный список
Пример 10
<UL>
<LI> Пункт 1 списка
<LI> Пункт 2 списка
<LI> Пункт 3 списка
</ul>
Элемент <UL> является своеобразным обрамлением списка. Он позволяет отделять один список от другого. Элемент <LI> обозначает каждый из пунктов.
<OL><LI></ol> – нумерованный список
Структура нумерованного списка похожа на структуру ненумерованного списка.
Пример 11
<OL>
<LI> Пункт 1
<LI> Пункт 2
<LI> Пункт 3
</ol>
Для нумерованного списка используется тэг <OL>. В этом случае каждый пункт маркируется арабскими или римскими числами, буквами латинского алфавита.
Способ нумерации задается при помощи атрибута type. В табл. 1. приведены все способы нумерации.
Таблица 1. Способы нумерации
Атрибут |
Вид нумерации |
type=”1” |
1, 2, 3 |
type=”i” |
i, ii, iii, iv |
type=”I” |
I, II, III, IV |
type=”a” |
a, b, c, d |
type=”A” |
A, B, C, D |
Пример 12
<OL type="I">
<LI> Пункт 1
<LI> Пункт 2
<LI> Пункт 3
</ol>
<Н1>...</h1>
Элемент заголовка. Существует шесть уровней заголовков, которые обозначаются Н1...Н6. Заголовок первого уровня самый крупный, а уровень 6 обеспечивает самый маленький заголовок. Для заголовков можно использовать атрибуты выравнивания влево, по центру, вправо.
Пример 13
<Н1> Самый большой заголовок </h1>