- •2. Создание web-страниц и web-сайтов
- •2.1 Общие сведения о создании Web-страниц
- •2.2 Html-тэги и их атрибуты
- •2.3 Создание и оформление Web-страниц
- •2.4 Форматирование текста в html
- •2.5 Вставка иллюстраций
- •2.6 Создание списков
- •2.7 Создание форм
- •2.8 Вставка гипертекстовых ссылок
- •2.9 Создание таблиц
- •2.10 Создание фреймов
- •2.11 Анимация на Web-страницах
- •2.12 Мета теги
- •2.13 Контрольные вопросы к раздела 2.1-2.13
- •2.14 Размещение Web-страниц в Интернете
- •2.15 Регистрация в поисковых системах и каталогах
- •Контрольные вопросы к разделам 2.14-2.15
2.3 Создание и оформление Web-страниц
Для создания Web-страниц нужен любой браузер - Internet Explorer или Netscape Communicator. Многие элементы HTML по-разному отображаются в разных программах просмотра (браузерах) и желательно контролировать эту разницу. Кроме того, нужен любой текстовой редактор, например, Блокнот из Windows. Блокнот нужен для подготовки HTML-файлов, а браузер – для просмотра и контроля документа.
С помощью этих инструментов мы создадим сайт на своем локальном компьютере. После этого поместим его на один из WWW-серверов в Интернете, сделав, таким образом, разработанные Web-страницы доступными всему миру.
В качестве примера создадим сайт лаборатории. Цель сайта – рассказать о лаборатории, её разработках, найти коллег, партнеров, спонсоров. Для файлов нашего сайта нужна отдельная папка. Создадим папку с именем Lab на жестком диске компьютера.
Теперь запустим программу Блокнот и приступим к работе.
Можно использовать любой другой текстовый редактор. Однако в этом случае следует сохранять файл как простой текст, чтобы избежать включения в Web-документ посторонних символов форматирования.
Сначала введем в окне Блокнота тэги, определяющие структуру любого HTML-документа. Напомним, что в HTML-коде допускается использовать любой регистр символов – верхний или нижний.
Введем с клавиатуры следующие основные тэги, поместив каждый из них, кроме закрывающего тэга </title>, в новой строке.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Для ввода парных тэгов можно использовать операции копирования и вставки через буфер обмена Windows с последующим добавлением символа слэш /.
Напомним, что тэги <html> и </html> означают соответственно начало и конец документа. Элемент <head>...</head> определяет заголовок Web-страницы, а элемент <body>...</body> – тело документа. В элементе <title>…</title укажем название Web-страницы.
Между открывающим <title> и закрывающим </title> тэгами вставим название документа: Лаборатория АСУТП. Этот элемент должен выглядеть следующим образом:
<title> Лаборатория АСУТП </title>
Название Web-страницы должно быть коротким и в максимальной степени отражать ее содержание.
Наша следующая задача – вставить в тело документа между тэгами <body>...</body> короткий текст – приветствие посетителям Web-страницы:
<html>
<head>
<title>Лаборатория АСУТП</title>
</head>
<body>
Добро пожаловать на страницу нашей лаборатории. Здесь Вы узнаете о
наших достижениях и планах на будущее
</body>
</html>
Сохраним этот документ. Для этого в меню Файл нажмём кнопку Сохранить как, откроем ранее созданную папку Lab, введём имя файла Lab1.html.
2.4 Форматирование текста в html
Выделение текста
Весь текст страницы или его часть могут быть выделены каким-либо способом: подчёркиванием, наклоном (курсивом), толщиной шрифта и т.д. Для этого используются следующие тэги.
Выделение текста полужирным шрифтом
<b>текст </b> или
<strong>текст</strong>
Выделение текста курсивом
<i>текст</i>
<em>текст</em>
Подчёркивание текста
<u>текст</u>
Перечеркивание текста
<strike>текст</strike>
Нижний индекс
<sub>текст</sub>
Верхний индекс
<sup>текст</sup>
Определения слова
<dfn>текст</dfn>
Текст обычно выводится курсивом.
Выделение слов и усиление
<em>текст</em>
Текст отображается курсивом.
Выделить текст телетайпным шрифтом
<tt>текст</tt>
Увеличение размера шрифта текста
<big>текст</big>
Уменьшение размера шрифта текста
<small>текст</small>
Выделение названий книг, фильмов, спектаклей и т.д
<cite>текст</cite>
Текст выводится курсивом.
Выделение фрагментов кода программ
<code>текст</code>
Показывается на экране шрифтом фиксированной ширины.
Выделение текста, который пользователь вводит с клавиатуры
<kbd>текст</kbd>
В разных браузерах может отображаться разными шрифтами.
Выделение сообщений программ
<samp>текст</samp>
Выводится шрифтом фиксированной ширины.
Выделение особо важных фрагментов
<strong>текст</strong>
Обычно выделяется полужирным начертанием.
Выделение текста, являющегося символьной переменной
<var>текст</var>
Используется для указания, что часть текста или слово является символьной переменной, т.е. текстом, который может быть заменен различными выражениями. Отображается курсивом.
Оформление текста в виде параграфа
< p>текст параграфа</p>
После текста будет вставлена пустая строка.
Разрыв строки с переходом на следующую
<br>
Написание текста без разрыва строки
<nobr>
Предварительно форматированный текст
<pre>текст</pre>
Используется для копирования текста из текстового редактора с сохранением форматирования.
Заголовки
Для создания заголовков текста в HTML существуют специальные элементы - h1, h2, h3, h4, h5 и h6. Номера от 1 до 6 определяют уровень важности заголовка. Заголовки объявляются парой тэгов с номерами, соответствующими уровню, например, <h1></h1> – заголовок раздела первого уровня, а <h6></h6> – заголовок раздела шестого уровня. От нормального текста заголовки отличаются размером и толщиной букв. Заголовок первого уровня h1 отображается обычно очень крупным шрифтом, в то время как заголовок шестого уровня h6 – очень мелким.
Пример:
<h1>Заголовок 1-го уровня</h1>
Используя шесть уровней заголовков, можно создать легко читаемый документ с интуитивно ясной структурой. Документ всегда будет читаться значительно лучше, если в нем будет четкое разделение на разделы и подразделы.
По умолчанию заголовок выравнивается по левому краю страницы. Но его можно также выровнять по правому краю или центрировать. Для правостороннего выравнивания в тэге <h1> используется атрибут align=right, а для центрирования – align=center. Допускается также явное указание левостороннего выравнивания – align=left.
Выравнивание текста
Для выравнивания текста и изображений используется атрибут align.
Примеры:
<p align="justify">Выравнивание параграфа по ширине страницы</p>
<p align="left">Выравнивание параграфа по левому краю</p>
<p align="right">Выравнивание параграфа по правому краю</p>
<center>Центрирование текста</center>
Работа с шрифтом
Для форматирования шрифта также может использоваться тег font с атрибутами size, color, face.
В качестве значения атрибута size используют числа от 1 до 7 со знаком + (плюс) или - (минус). В этом случае размер шрифта соответственно увеличивается или уменьшается, по сравнению с исходным. Например, тэги <font size=+1>текст</font> увеличат размер шрифта текста, по сравнению с текущим, на один порядок.
Атрибут color используется для указания цвета шрифта, ограниченного тэгами текста. Значения этого атрибута такие же, как и для атрибутов, описывающих цвет фона и текста документа.
Атрибут face задаёт тип шрифта.
Пример:
<font face=verdana color=blue size=10> Шрифт </font>
В результате отображается текст Шрифт синего цвета, шрифт Verdana, размер 10.
Цвет фона и цвет текста Web-страницы
Они могут быть заданы с помощью атрибутов bgcolor и text открывающего тэга <body>. Для определения цвета как значения атрибутов существует два варианта:
словесное указание названия цвета, например, white (белый). В языке HTML предусмотрено шестнадцать таких имен;
цифровое обозначение в шестнадцатеричной форме, например, "#ffffff" – белый, которое указывает, каким образом цвет формируется из основных цветов – красного, зеленого, синего.
Конечно, словесное указание цвета более удобно и понятно, но ограничено только шестнадцатью цветами. Численные обозначения дают больше возможностей, так как позволяют указать практически любой из 16777215 оттенков.
Изменим нашу Web-страницу:
<html>
<head>
<title>Лаборатория АСУТП</title>
</head>
<body bgcolor=blue text=yellow >
Добро пожаловать на страницу нашей лаборатории. Здесь Вы узнаете о
наших достижениях и планах на будущее
</body>
</html>
Теперь документ следует сохранить. В меню Файл нажмём кнопку Сохранить.
Расширение имени файла должно быть .html или .htm.
Для изменения размера шрифта страницы необходимо выполнить манипуляцию Вид → Размер шрифта → Средний в браузере Internet Explorer или Вид → Увеличить шрифт или Вид → Уменьшить шрифт в браузере Netscape Communicator.
Разные браузеры могут по-разному отображать содержимое одного и того же HTML-документа. Поэтому при создании Web-страниц желательно всегда просматривать результат в обоих наиболее популярных браузерах – Internet Explorer и Netscape Communicator.
Так как в элементе <body></body> мы ввели текст без разбивки на абзацы, то в браузере он отображается в виде одного абзаца и выровнен влево. Теперь следует придать тексту более наглядный вид.
Вложение элементов разметки
Элементы разметки могут быть вложенными. Современные браузеры способны правильно обрабатывать вложенные тэги. Поэтому необходимо следить за тем, чтобы не нарушался порядок вложения. Работа браузера окажется затрудненной, если вложенность будет нарушена. Пример правильного написания вложенных тегов <b><i>текст</i></b>. Здесь элемент <i>… </i> вложен в элемент<b>…</b>.
Подводя итоги, оформим наш документ следующим образом.
<html>
<head>
<title>Лаборатория АСУТП</title>
</head>
<body bgcolor=blue text=yellow >
<h1 align=center>
Добро пожаловать на страницу нашей лаборатории!
</h1>
<center><font size=5><b><i>
Здесь Вы узнаете о наших достижениях и планах на будущее
</i></b></font><center>
</body>
</html>