Всего на сайте:
148 тыс. 196 статей

Главная | Информатика

Введение в web-дизайн, Введение в web-дизайн Методические указания к выполнению лаборато..  Просмотрен 43

Введение в web-дизайн

 

Методические указания

к выполнению лабораторной работы

для студентов

по направлениям 190000, 200000, 260000, 280000

специальностей 140211, 150202, 151001,

190601, 190603, 190702, 200503, 260601, 280101

 

Курган 2007

 

 

Кафедра: Информатики

 

Дисциплина: «Информатика»

(по направлениям 190000, 200000, 260000, 280000

специальностей 140211, 150202, 151001, 150002

192001, 190601, 190603, 190702, 200503, 260601, 280101)

 

Составила:

ассистент кафедры

Информатики Соколова Наталья Николаевна

 

ВВЕДЕНИЕ

 

WWW (World Wide Web) можно перевести с английского как «всемирная паутина». Главная задача WWW – передача между компьютерами документов, сочетающих в себе текст с элементами форматирования, графические иллюстрации, ссылки на другие документы. Документы в системе WWW создаются с помощью языка разметки гипертекста HTML (HyperText Markup Language). Этот язык предназначен для того, чтобы документ имел приблизительно одинаковый вид при просмотре на различных компьютерах, работающих под управлением всевозможных операционных систем.

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

Отдельный документ, выполненный в формате HTML, называется:

– HTML-документом;

– Web-документом;

– Web-страницей.

Такие страницы, как правило имеют расширение htm или html.

Гиперссылка – фрагмент текста, который является указателем на другой файл или объект. Гиперссылки необходимы для того, чтобы обеспечить возможность перехода от одного документа к другому.

Группа Web-страниц, принадлежащих одному автору или одному издателю и взаимосвязанных общими гиперссылками, образует структуру, которая называется Web-узлом или Web-сайтом.

Каждая HTML-страница имеет свой уникальный URL-адрес в интернете. URL-адрес ресурса образуется объединением доменного имени компьютера, на котором он хранится, и пути поиска (пути доступа), который ведет от корневого каталога жесткого диска этого компьютера через все вложенные каталоги к файлу, представляющему ресурс.

Типичный URL для WWW имеет вид:

http://www.название.домен/имя файла

Здесь название – это часть адреса, который часто употребляется для обозначения владельца сайта, а домен – обозначение крупного "раздела" Интернета: страны (ru), области деятельности (com) и т.д.

 

1. СТРУКТУРА WEB-СТРАНИЦЫ

 

Web-страница помещается в контейнер

и состоит из двух частей: заголовка и отображаемого в браузере (обозревателе) содержания. Большая часть тегов образует контейнер, состоящий из открывающего и закрывающего тегов. Теги можно набирать как заглавными, так и строчными буквами.

Заголовок страницы помещается в контейнер

. Заголовок содержит название страницы, которое помещается в контейнер

и при просмотре отображается в верхней строке окна браузера. Также в заголовок помещаются не отображаемые при просмотре мета-теги, задающие кодировку страницы для её правильного отображения в браузере, а также содержащие описание и ключевые слова страницы, которые в первую очередь просматривают роботы поисковых систем.

Отображаемое в браузере содержание страницы помещается в контейнер

.

 

2. ОСНОВНЫЕ ТЕГИ HTML

 

Задание 1.Создайте Web – страницу, знакомящую с основными тегами HTML.

 

1. Запустите текстовый редактор Блокнот командой [ Пуск-Программы-Стандартные-Блокнот].

 

2. Введите HTML – код страницы:

 

Первое знакомство с тегами HTMLСодержание документа

 

 

3. Введите команду [Файл-Сохранить как…]. Файлу Web – страницы присвойте имя index.htm, тип файла задайте – Все файлы.

 

4. Запустите браузер и откройте созданный файл командой [Файл-Открыть]. В заголовке окна браузера высвечивается название Web – страницы Первое знакомство с тегами HTML, в браузере - Содержание документа.

 

5. Введите в текст страницы теги заголовков различных уровней (размеров):

 

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвёртого уровня

Заголовок пятого уровня
Заголовок шестого уровня

 

6. Внесите в текст страницы теги, определяющие начертание шрифта. Отделите этот фрагмент от остального текста с помощью горизонтальных разделительных линий.

 

  Обычный текст Жирный Курсив Подчёркнутый Жирный подчёркнутый курсив Выделение Усиленное выделение

 

7. Введите в текст страницы теги, задающие списки нумерованные и ненумерованные, а также списки определений:

 

 
  1. Первый элемент списка
  2. Второй элемент списка
  3. Третий элемент списка
 
  • Первый элемент списка
  • Второй элемент списка
  • Третий элемент списка
 

 

 

ТЕРМИН 1

Пояснение к термину 1

ТЕРМИН 2

Пояснение к термину 2

ТЕРМИН 3

Пояснение к термину 3

 

 

В процессе создания Web – страницы приходится добавлять новые теги и просматривать получаемый результат. Активизируйте блокнот с открытой в нём Web – страницей. Внесите в содержание страницы необходимые изменения и сохраните новый вариант страницы. Затем активизируйте браузер, щёлкнув на кнопку Обновить. В браузере отобразится обновлённая Web – страница.

 

3. ЦВЕТОВАЯ СХЕМА, ВСТАВКА

ИЗОБРАЖЕНИЙ И ГИПЕРССЫЛОК

 

Web – сайты обычно являются мультимедийными и интерактивными, то есть содержат изображения и гиперссылки. При форматировании текста, вставке изображений и гиперссылок используются теги с атрибутами. Атрибуты и присвоенные им значения записываются внутри открывающего тега. В одном теге можно использовать несколько атрибутов, разделённых между собой пробелами, а одни и те же атрибуты могут использоваться в различных тегах.

 

Задание 2.Создайте Web – страницу «Визитная карточка».

 

Рассмотрим создание Web – страницы на примере создания сайта о себе. Начальная страница должна содержать сведения: Фамилия, имя, отчество, год рождения, место учёбы (факультет, группа), краткий рассказ о себе и о своих увлечениях, иллюстрацию к рассказу. Вторая страница содержит уже подробный рассказ о своём хобби и несколько (2-3) иллюстраций. Страницы связаны между собой гиперссылками.

Предыдущая статья:Экономическая география Следующая статья:Создадим начальную Web – страницу, в процессе работы над которой познакомимся с применением атрибутов тегов для вставки изображений, гиперссылок, таблиц.
page speed (0.0118 sec, direct)