<h2>Создание Web-страниц в HTML</h2> <h2><b>План</b></h2> <br> Web-сайты и Web-страницы<br> HTML – язык разметки гипертекста<br> Задание для самостоятельного выполнения<br> <br> <h2><b>Web-сайты и Web-страницы </b></h2> Публикации во всемирной паутине реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц. Сайт является интерактивным средством представления информации. Интерактивность сайта обеспечивают различные формы, с помощью которых посетитель сайта может зарегистрироваться на сайте, заполнить анкету и так далее. Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы (Web-страницы). Гиперссылки также имеются на других Web-страницах, что обеспечивает возможность пользователю свободно перемещаться по сайту. Такие гиперссылки называют системой навигации сайта. <h2> Web-сайты обычно являются <i><b>мультимедийными</b></i>, так как кроме текста могут содержать иллюстрации, анимацию, звуковую и видеоинформацию.</h2> <h2> <b>Основными достоинствами HTML-документов являются:</b> </h2> <br> Малый информационный объем;<br> Возможность просмотра на персональных компьютерах, оснащенных различными операционными системами.<br> Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение БЛОКНОТ. <br> <h2><b>HTML – язык разметки гипертекста</b></h2> <br> Создание Web-страницы <br> Структура Web-страницы<br> Заголовки <br> Форматирование текста<br> Изображения<br> Списки<br> Гиперссылки<br> Мета-тэги<br> Цветовые схемы<br> Таблицы<br> Интерактивные формы<br> <br> <h2><b>Создание Web-страницы</b></h2> <br> Открыть окно текстового редактора БЛОКНОТ;<br> Набрать HTML-код страницы;<br> Сохранить под именем index.htm (обязательно титульная страница сайта называется этим именем), установив в поле Тип файла «все файлы»;<br> <br> <br> Запустить браузер и открыть созданный файл командой [Файл – открыть] (или двойным щелчком левой кнопки мыши непосредственно по значку файла). В заголовке окна браузера высвечивается название Web-страницы (текст, записанный в тэге )<br> Для корректной работы сайта все объекты, используемые в нем (файлы, рисунки и т.д.), должны храниться в одной папке с файлом index.htm. Обычно для сайта создают отдельную папку.<br> <br> <h2><b>Структура Web-страницы</b></h2> <br> Вид Web-страницы задается тэгами, которые заключаются в угловые скобки. Тэги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тэгов (такая пара тэгов называется контейнером). Закрывающий тэг содержит прямой слэш (<b>/</b>) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами.<br> Любая страница должна иметь следующую структуру:<br> <h2>Например:</h2> <h2> </h2> <h2> </h2> <h2> </h2> <h2>Все о компьютере</h2> <h2>Все о компьютере</h2> <h2> <h2> Все о компьютере </h2> </h2> <h2> <h2> Все о компьютере </h2> <br> <b> Жирный </b><br> <i> Курсив </i><br> <u> Подчеркнутый </u><br> <b> <i> <u> Жирный подчеркнутый курсив </u></i></b><br> <tt> Равноширинный </tt><br> <em> Выделение </em><br> <b> Усиленное выделение </b><br> </h2> <h2> <h2> Все о компьютере </h2> </h2> <h2><hr></h2> <h2> <h2> Все о компьютере </h2> </h2> <h2> <hr> </h2> <h2><b><img src="https://images.student-it.ru/files/173233/comp.jpg" alt="" style="max-width:100%;"></b></h2> <h2> <h2> Программное обеспечение </h2> </h2> <h2><hr></h2> <h2><b><ol></ol></b></h2> <h2><b><li> Системные программы</li></b></h2> <h2><b><li> Прикладные программы</li></b></h2> <h2><b><li> Системы программирования </li></b></h2> <h2><b></b></h2> <h2> <h2> Программное обеспечение </h2> </h2> <h2><hr></h2> <h2><ol></ol></h2> <h2></h2> <li> Системные программы <h2></h2> </li> <li> Прикладные программы <h2><b><ul></ul></b></h2> <h2><b><li type="“square”"> текстовые редакторы;</li></b></h2> <h2><b><li> графические редакторы;</li></b></h2> <h2><b><li> электронные таблицы;</li></b></h2> <h2><b><li> системы управления базами данных.</li></b></h2> <h2><b><br></b></h2> <h2></h2> </li> <li> Системы программирования <h2></h2> <h2> <h2> Компьютерные термины </h2> </h2> <h2><hr></h2> <h2><b><dl></dl></b></h2> <h2><b><dt> Процессор</dt></b></h2> <h2><b><dd> Центральное устройство компьютера, производящее обработку информации в двоичном коде.</dd></b></h2> <h2><b><dt> Оперативная память</dt></b></h2> <h2><b><dd> Устройство, в котором хранятся программы и данные.</dd></b></h2> <h2><b></b></h2> <h2> <h2> Все о компьютере </h2> </h2> <h2> <hr> </h2> <h2><img src="https://images.student-it.ru/files/173233/comp.jpg" alt="" style="max-width:100%;"></h2> <h2> <b><br></b> </h2> <h2><b>[Программы] &nbsp [Соварь] &nbsp [Комплектующие] &nbsp [Анкета] </b></h2> <h2><b> <br></b></h2> </li>

---

с помощью атрибутов:
Цвет фона : BGCOLOR=“#RRGGBB”
Текстура фона : BACKGROUND=“file_name”
Цвет текста : TEXT=“#RRGGBB”
Цвет текста ссылки : LINK=“#RRGGBB”
Цвет текста активной ссылки: ALINK=“#RRGGBB”
Цвет текста просмотренной

ссылки : VLINK=“#RRGGBB”

Цветовые схемы

При использовании текстуры, закрывающей собой всю площадь страницы, применение однотонного фона кажется излишним. Однако рисунки загружаются несколько медленнее, чем текст. Все это время посетители страницы будут видеть цвет фона, заданный атрибутом BGCOLOR. Поэтому для фона указывают цвет, совпадающий с основным цветом фонового рисунка.
Чтобы текст хорошо читался, цвета на странице подбирают контрастирующими по яркости: пастельный фон – темный текст, или темный фон – светлый текст. Нежелательны буквы белого цвета – они могут оказаться невидимыми при печати страницы на принтере.

Цветовые схемы

Например: Для оформления страницы о программном обеспечении можно использовать следующую цветовую схему:

Цветовые схемы

Цветовые схемы

В браузере страница будет выглядеть так:

(в данном случае неудачно выбрана цветовая схема для оформления страницы)

Таблицы

Таблицу формируют несколько различных тэгов:
Таблица задается контейнером , внутри которого содержится описание структуры таблицы и её содержания.
Любая таблица состоит из строк, которые задаются контейнером (Table row), в который помещается описание ячеек.
Формат ячеек и их содержание помещается в контейнер (Table data), а заголовки столбцов таблицы – в контейнер (Table header).
Толщина разделительных линий в таблице задается с помощью атрибута BORDER, а для выравнивания информации внутри ячейки по горизонтали применяют атрибут ALIGN.

Таблицы

Чтобы получить в браузере следующий вид Web-страницы, нужно внести в код соответствующие тэги (смотри следующий слайд)

Таблицы

Код страницы:

Комплектующие

---

наименование	производитель	характеристики	цена

Анкета

---

фамилия

Анкета

---

фамилия

Имя

Анкета

---

фамилия

Имя

Являюсь:

VALUE="1" Checked> учащимся школы

VALUE="2" > студентом

Анкета

---

фамилия

Имя

возраст:

VALUE="1" Checked> до 13 лет

VALUE="2" > 13-15 лет

VALUE="3" > старше 15 лет

Анкета

---

фамилия

Имя

Регион:

Москва

Санкт-Петербург

Хабаровский край

Анкета

---

фамилия

Имя

напишите свои пожелания

Анкета

---

фамилия

Имя

напишите свои пожелания

---

Смотрите также файлы

• 1 Выберите в приведённом списке верные суждения о рынке и его видах и запишите цифры.docx

• Операционное окружение.docx

• Задачи иc. Структура схемы функционирования информационной системы.docx

• Исследование поляризованного света в. П. Савельев Цель работы Исследовать свойства поляризованного света. Задачи.pdf

• 7 Практические задания по дисциплине для самостоятельной подготовки к экзамену.docx