Создание простейшей веб-страницы.
HTML – это теговый язык разметки документов.
Элементы – это структуры, которые описывают отдельные составляющие HTML-документа. Элемент состоит из трех частей: начального тега, содержимого и конечного тега.
Тег – это специальный текст, заключенный в угловые скобки "<" и ">". Конечный тег имеет то же имя, что начальный тег, но начинается с косой черты "/".
Атрибуты элемента определяют его свойства. Значение атрибута может быть заключено в одинарные или двойные кавычки. Порядок следования атрибутов в теге не важен. Атрибут действует от открывающего тега, в котором он задан, до закрывающего, или только внутри тега, если тег не имеет парного.
Таблица 1. Оформление тела веб-страницы
| Атрибут | Действие | Значения атрибута |
| BACKGROUND="URL" | Фоновая картинка | *.jpg, *.gif, .png. графический файл расположен в одной папке с Вашим документом |
| BGCOLOR="цвет " | Цвет фона | |
| TEXT=”color” | Цвет текста | |
| LEFTMARGIN="40" | Определяет ширину левого и правого полей документа | Пикселы |
| MARGINWIDTH="40" | Определяет ширину верхнего и нижнего полей документа | Пикселы |
Таблица 2. Таблица цветов НТМL
| pink | розовый | blue | синий |
| cyan | оттенок бирюзового | teal | ярко-голубой |
| orange | оранжевый | gray | серый |
| brown | коричневый | yellow | желтый |
| fuchsia | ярко-фиолетовый | olive | оливковый |
| aqua | бирюзовый | purple | фиолетовый |
| silver | светло-серый | red | красный |
| black | черный | green | зеленый |
Таблица 3. Базисные теги
| Тип документа | <HTML></HTML> | Начало и конец файла | атрибуты |
| Имя документа | <TITLE></TITLE> | Должно быть в заголовке | |
| Заголовок | <HEAD></HEAD> | Описание документа | |
| Тело | <BODY></BODY> | Содержимое страницы |
Форматирование текста на веб-странице.Для того, чтобы отформатировать текст, который будет располагаться на вашей веб-странице, необходимо воспользоваться следующими тегами:
Таблица 4
| Форматирование | ||
| Заголовки | <H*></H*> * - от 1 до 6 | Стандарт определяет 6 уровней заголовков |
| Конец строки | <TR> | |
| Начало абзаца | <P> | |
| Выравнивание | <H* ></H*> *-ALIGN= LEFT|CENTER|RIGHT | По левому краю, по правому, по центру |
| Цитата | <BLOCKQUOTE> </BLOCKQUOTE> | Обычно выделяется отступом |
| Шрифт | ||
| Жирный | <B></B> | |
| Курсив | <I></I> | |
| Размер шрифта | <FONT SIZE=?></FONT> | От 1 до 7 |
| Цвет шрифта | <FONT COLOR="#$$$$$$"> </FONT> |
Веб-страницы с гиперссылками и изображениями. Важнейшую роль в оформлении страницы играют иллюстрации.
Для размещения рисунков в документе служит одиночный тег <IMG>, который должен обязательно содержать атрибут SCR=, значение которого составляет адрес файла изображения.
Изображение переносится на страницу с сохранением размеров. Нужные размеры рисунка можно задать с помощью атрибутов WIDTH= (ширина) и HEIGHT= (высота).
Альтернативный текст – словесное описание изображения задаётся при помощи атрибута ALT=.
Для создания гиперссылки в документе используются теги <A> и </A>. Текст ссылки помещается между этими тегами. Для того, чтобы указать адрес, на который указывает ссылка, необходим атрибут HERF=. Некоторые гиперссылки могут указывать на определённое место внутри страницы (якоря). Для него является обязательным атрибут NAME=. Значением этого атрибута является имя якоря, которое может состоять только из латинских букв и цифр и не должно содержать пробелов.
В качестве гиперссылки можно использовать изображения. Для этого теги разметки изображения должны быть помещены между тегами гиперссылок.
Размещение на веб-страницах списков и таблиц. Рассмотрим процесс создания нумерованных и маркированных списков. Они создаются примерно одинаковым образом. Список всегда располагается между открывающим и закрывающим тегом списка: <OL> и </OL> в случае упорядоченного списка; <UL> и </UL> - в случае неупорядоченного. Внутри списка располагаются его элементы. Их заключают между тегами <LI> и </LI>.
Таблица начинается открывающимся тегом <TABLE> и завершается закрывающимся </TABLE>.
Строки таблицы начинаются открывающимся тэгом <TR> и завершаются закрывающимся </TR>, а каждая ячейка таблицы начинается тегом <TD> и завершается </TD>.
Создание веб-документов средствами MicrosoftOffice.С помощью MicrosoftOffice можно создавать веб-страницы точно так же, как и обычные документов MicrosoftWord, MSExcel, MSPowerPoint.
Можно использовать шаблон веб-страницы или сохранить документ в качестве веб-страницы. Для того, чтобы приступить в процессу создания документа, можно воспользоваться меню Формат, Вставка и панелью инструментов Веб-компоненты. Однако не все приёмы форматирования поддерживаются. В частности, таковыми являются таблицы, анимация текста и т.п.
Практическая часть
Задание 1
Создать файл с гипертекстовым документом:
1. Запустить редактор Блокнот, ввести текст:
Приветствую Вас на моей первой web-страничке!
2. Сохранить файл в созданной папке. При сохранении, в окне диалога Сохранить как… в строке Тип файла: выбрать вариант Все файлы (*.*) , а в строке Имя файла задать имя с расширением .html, например 1_name.html(где name – ваше имя).
3. Закрыть документ, найти его пиктограмму в окне Мой компьютер или в окне программы Проводник.
4. Открыть файл. Проанализировать, с помощью какого приложения отображается файл и как выглядит введенная фраза.
Ввести теги, определяющие структуру html-документа.
С помощью контекстного меню открыть файл с помощью редактора Блокнот. Ввести приведенные ниже теги, в разделе заголовка документа (между тегами <TITLE></TITLE>) указать свою фамилию.
<HTML>
<HEAD><TITLE>Фамилия</TITLE>
</HEAD>
<BODY>
Приветствую Вас на моей первой web-страничке!
</BODY>
</HTML>
Сохранить документ под тем же именем, обновить его отображение в браузере (выполнить Вид/Обновитьили нажать кнопку Обновить на панели инструментов). Проанализировать произошедшие изменения в отображении документа.
Отредактировать документ.
Вызвать меню браузераВид/Просмотр HTML-кода и добавить после текста «Приветствую Вас на моей первой web-страничке!»текст подписи:
Студент группы NNN Фамилия Имя
Сохранить документ (но не закрывать) и обновить его просмотр в браузере.
Используя одиночный тег<BR>, отредактировать документ так, чтобы подпись начиналась с новой строки, а Фамилия Имя – в следующей строке. Просмотреть в браузере новый вариант.
Внимание! После каждого изменения документ нужно сохранять, а просмотр в браузере начинать с обновления загрузки документа с помощью кнопки «Обновить» на панели инструментов.
Оформить фрагменты текста с помощью стилей Заголовков:
Первую строку документа оформить стилем Заголовок 1-го уровня с помощью парного тега <H1> …</H1>. Вторую строку оформить как Заголовок 6-го уровня, а третью как Заголовок 4-го уровня.
Просмотреть документ в браузере, изменяя настройку отображения шрифтов (меню Вид / Размер шрифта / Самый крупный, Средний, МелкийиСамый мелкий).
Поменять стиль оформления первой строки на Заголовок 2 уровня, второй строки - на Заголовок 5 уровня, последней строки - наЗаголовок 3-го уровня.
Выполнить форматирование шрифта.
После строки Фамилия Имя добавить еще одну строку текста