Меню
Разработки
Разработки  /  Информатика  /  Проверочные работы  /  Введение в Web-дизайн

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

Методические указания представляют собой описание основных элементов языка HTML. Для лучшего усвоения материала здесь приведены примеры и рекомендации по использованию элементов языка. Для закрепления изученного в конце каждой темы даны контрольные вопросы или задания.
06.02.2013

Описание разработки

Практическая работа №1

Задание 1. Изучите теоретический материал:

Способность компьютеров передавать и принимать информацию используют для объединения двух или более компьютеров для совместной работы с программами и данными. Такое объединение называется локальной сетью.

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

Компьютеры, постоянно подключенные к Интернету и управляющие перемещением информации в Сети, называются серверами Интернета.

World Wide Web – самая известная и популярная служба Интернета. Она предназначена для «очной», интерактивной работы, представляет возможность поиска и сбора информации

Считается, что идея World Wide Web возникла в 1983 году, а ее реализация началась в 1992 году. Иногда начало развития Интернета относится к 70-м годам XX века и связывают с интересами военного ведомства США. В настоящее время интернет охватывает десятки миллионов пользователей и несколько десятков сетевых служб, включая электронную почту, WWW (World Wide Web),  FTP. Наибольшую популярность сейчас приобрела World Wide Web (Всемирная паутина) – гипертекстовая среда Интернета, объединяющая мультимедийные документы средствами гипертекста.

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

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

Web-страницы можно просматривать с помощью специальной программы – браузера. Документы, содержащие тексты графику, звуковые и видеофайлы находятся на компьютере – сервере, а просматриваются с помощью компьютера-клиента. Пользователь Интернета обычно является его клиентом и получает доступ к ресурсам сети с помощью сервера. Когда клиенту нужна информация, то он посылает запрос  на сервер. Сервер обрабатывает запрос и отправляет клиенту соответствующую ответную информацию. Совокупность правил приема и передачи сообщений между сервером и клиентом называется протоколом, Весь Интернет работает на основе протокола TCP/IP.

Для ускорения поиска надо грамотно сформулировать запрос. Чем больше слов в запросе, тем меньше объем полученной информации.

Для создания web-страниц достаточен скоромный набор технических средств.

Задание 2.  Работа с браузером. Просмотр Web-страниц

  • запустите браузер;
  • выберите один из сайтов, просмотрите все внутренние гиперссылки, опишите страницы, на которые происходили переходы;
  • вернитесь на главную страницу;
  • пройдите последовательно цепочку из 5-6 внешних ссылок, начиная с одной из гиперссылок главной страницы сайта. Опишите увиденные страницы;
  • вернитесь к главной странице сайта, используя команду «Назад»,

Для просмотра web-страниц используйте следующие адреса:

http://www.nns.ru

http://www.dog.ru

http://www.song.homepage.ru

http://www.computer-museum.ru

Задание 3. Найдите ответы на поставленные вопросы в WWW, испо­льзуя поисковые серверы:

RAMBLER – www. Rambler.ru;

YANDEX – www yandex.ru;

NAROD  - www. Narod.ru

Вопросы:

  1. Место и дата рождения Бориса Николаевича Ельцина - первого президента России.
  2. Место и дата рождения Франклина Рузвельта — президента США.
  3. В каком году была написана картина Ивана Константиновича Айвазовского «Море. Коктебельская бухта»?
  4. Настоящая фамилия писателя Кира Булычева.
  5. Место и дата рождения математика Николая Ивановича Лобачевского.
  6. В каком году и какую школу окончила Алла Пугачева?
  7. В каком году и где родился Мишель Нострадамус?
  8. Назвать издателя и разработчика игры «Братья пилоты».
  9. Какой король правил Францией во время похода Жанны д'Арк на Орлеан?
  10. В каком году Андрей Дмитриевич Сахаров стал лауреатом Нобелевской премии мира?
  11. В каком году Алла Пугачева получила Гран-при фестиваля «Золотой Орфей» с песней «Арлекино»?
  12. Когда и где родился Александр Исаевич Солженицын?
  13. Когда и за что Александр Исаевич Солженицын получил Нобелевскую премию?
  14. Когда и где родился Петр Аркадьевич Столыпин?
  15. Когда и где родился Дж. Р. Р. Толкиен — английский писатель?
  16. Когда и где родился Владимир Семенович Высоцкий?
  17. В каком году образовалась группа «Машина времени»?
  18. Дата рождения Филиппа Киркорова.

Сдайте отчет преподавателю.

Практическая работа №2

Тема: Структура HTML-документа. Ввод текста

Задание 1. Изучите теоретический материал:

Чтобы создать Web-страницу, нужно написать программу на языке HTML (HyperText Markup Language), то есть на языке разметки (форматирования) гипертекстовых документов.  HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-браузеров.

Язык   HTML появился одновременно со службой  World Wide Web  и развивался вместе с ней. Он является основой World Wide Web и одновременно причиной ее широчайшей популярности. Смысл и название языка HTML можно понять, исходя из его названия.

Язык HTML появился одновременно со службой  World Wide Web и развивался вместе с ней. Он является основой World Wide Web и одновременно причиной ее широчайшей популярности. Смысл и название языка HTML можно понять, исходя из его названия.

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

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

Документ HTML состоит из основного текста документа и тегов разметки, которые являются наборами обычных символов. Документ HTML –это обычный текстовый файл. Для его создания можно использовать любой текстовый редактор (Блокнот).

Описания Web – страниц содержатся в HTML-программах (HTML-кодах) и хранятся в обычных текстовых файлах с расширением HTM или HTML. Программы на языке HTML содержат инструкции (коды), называемые тегами. Тег в переводе с английского означает «метка». Теги представляют собой последовательность символов, заключенные в угловые скобки, например

. Как правило, теги записываются прописными буквами, однако, большинство современных браузеров допускают запись тегов в любом регистре.

Структура HTML - документа

  и  и содержит информацию о документе в целом. В частности, этот раздел должен содержать внутри себя  теги

 

, между которыми размещают «официальный» заголовок документа. Большинство браузеров, работающих в системе Windows, используют этот заголовок, чтобы заполнить строку заголовка окна браузера.

  • Сам текст документа располагается в теле документа. Тело документа располагается между тегами .

и

Четыре перечисленных парных тега определяют основную структуру документа HTML.

Задание 2.

Раскроем окно текстового редактора «Блокнот» и напишем в нем текст   HTML- программы. Вот как это будет выглядеть

 

 

 

 

 

  Этот текст можно прочитать на экране

 

     

Сохраним нашу программу в папке своей группы в файле с расширением  HTM или HTML. Например, назначим ей имя PROBA.HTML.

 Теперь надо раскрыть этот файл в браузере. Для этого в проводнике найдите файл PROBA.HTML и дважды щелкните левой кнопкой мыши по его имени или на его значке. В Windows все файлы с расширением HTM или HTML открываются в окне браузера Internet Explorer, если, конечно, вы не установили какой-нибудь другой браузер.

Если Вам потребуется что-то изменить в HTML – коде, то, не выходя из окна браузера, в меню Вид выберите команду (опцию) В виде HTML. В результате раскроется окно текстового редактора Блокнот с файлом Вашей программы. Внесите нужные изменения и сохраните файл под тем же именем. После этого в окне браузера выполните команду Вид > Обновить. В результате загрузится обновленный  HTML-файл.

Покажите выполненное задание преподавателю.

Для обозначения абзацев используют тег

(и соответствующий закрывающий

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

 

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

Важным средством создания разделителей в тексте являются горизонтальные полоски – линейки, визуально отделяющие разные части документа друг от друга. Горизонтальная линейка создается тегом


. Это одиночный тег.

 

Пример 2

Раскроем окно текстового редактора «Блокнот» и напишем в нем текст   HTML- документа

 

 

 

 

 

 

Эти строки отображаются слитно, несмотря на то, что в документе они отделены друг от друга

 

Закрывающий тег абзаца не обязателен.

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

 


Текст после начала линейки
разбит на две строки.

 

 

 

Сохраните эту  программу в папке своей группы в файле с расширением  HTM или HTML.

Задание:

Создайте  HTML- документ по образцу. Сохраните его в папке вашей группы с именем PROBA_2.HTML. Покажите выполненное задание преподавателю.

Содержимое разработки

Практическая работа №1


Тема: Введение в Web-дизайн


Задание 1. Изучите теоретический материал:

Способность компьютеров передавать и принимать информацию используют для объединения двух или более компьютеров для совместной работы с программами и данными. Такое объединение называется локальной сетью.

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

Компьютеры, постоянно подключенные к Интернету и управляющие перемещением информации в Сети, называются серверами Интернета.

World Wide Web – самая известная и популярная служба Интернета. Она предназначена для «очной», интерактивной работы, представляет возможность поиска и сбора информации

Считается, что идея World Wide Web возникла в 1983 году, а ее реализация началась в 1992 году. Иногда начало развития Интернета относится к 70-м годам XX века и связывают с интересами военного ведомства США. В настоящее время интернет охватывает десятки миллионов пользователей и несколько десятков сетевых служб, включая электронную почту, WWW (World Wide Web), FTP. Наибольшую популярность сейчас приобрела World Wide Web (Всемирная паутина) – гипертекстовая среда Интернета, объединяющая мультимедийные документы средствами гипертекста.

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

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

Web-страницы можно просматривать с помощью специальной программы – браузера. Документы, содержащие тексты графику, звуковые и видеофайлы находятся на компьютере – сервере, а просматриваются с помощью компьютера-клиента. Пользователь Интернета обычно является его клиентом и получает доступ к ресурсам сети с помощью сервера. Когда клиенту нужна информация, то он посылает запрос на сервер. Сервер обрабатывает запрос и отправляет клиенту соответствующую ответную информацию. Совокупность правил приема и передачи сообщений между сервером и клиентом называется протоколом, Весь Интернет работает на основе протокола TCP/IP.

Для ускорения поиска надо грамотно сформулировать запрос. Чем больше слов в запросе, тем меньше объем полученной информации.

Для создания web-страниц достаточен скоромный набор технических средств.


Задание 2. Работа с браузером. Просмотр Web-страниц


  • запустите браузер;

  • выберите один из сайтов, просмотрите все внутренние гиперссылки, опишите страницы, на которые происходили переходы;

  • вернитесь на главную страницу;

  • пройдите последовательно цепочку из 5-6 внешних ссылок, начиная с одной из гиперссылок главной страницы сайта. Опишите увиденные страницы;

  • вернитесь к главной странице сайта, используя команду «Назад»,

Для просмотра web-страниц используйте следующие адреса:

http://www.nns.ru

http://www.dog.ru

http://www.song.homepage.ru

http://www.computer-museum.ru




Задание 3. Найдите ответы на поставленные вопросы в WWW, испо­льзуя поисковые серверы:

RAMBLER – www. Rambler.ru;

YANDEX – www yandex.ru;

NAROD - www. Narod.ru

Результаты поиска отразите в отчете, созданном в тексто­вом редакторе, заполнив следующую таблицу:

Результат

Использованный поисковый сервер

1



2




Вопросы:

  1. Место и дата рождения Бориса Николаевича Ельцина - первого президента России.

  2. Место и дата рождения Франклина Рузвельта — президента США.

  3. В каком году была написана картина Ивана Константиновича Айвазовского «Море. Коктебельская бухта»?

  4. Настоящая фамилия писателя Кира Булычева.

  5. Место и дата рождения математика Николая Ивановича Лобачевского.

  6. В каком году и какую школу окончила Алла Пугачева?

  7. В каком году и где родился Мишель Нострадамус?

  8. Назвать издателя и разработчика игры «Братья пилоты».

  9. Какой король правил Францией во время похода Жанны д'Арк на Орлеан?

  10. В каком году Андрей Дмитриевич Сахаров стал лауреатом Нобелевской премии мира?

  11. В каком году Алла Пугачева получила Гран-при фестиваля «Золотой Орфей» с песней «Арлекино»?

  12. Когда и где родился Александр Исаевич Солженицын?

  13. Когда и за что Александр Исаевич Солженицын получил Нобелевскую премию?

  14. Когда и где родился Петр Аркадьевич Столыпин?

  15. Когда и где родился Дж. Р. Р. Толкиен — английский писатель?

  16. Когда и где родился Владимир Семенович Высоцкий?

  17. В каком году образовалась группа «Машина времени»?

  18. Дата рождения Филиппа Киркорова.

Сдайте отчет преподавателю.



Практическая работа №2


Тема: Структура HTML-документа. Ввод текста


Задание 1. Изучите теоретический материал:

Чтобы создать Web-страницу, нужно написать программу на языке HTML (HyperText Markup Language), то есть на языке разметки (форматирования) гипертекстовых документов. HyperText Markup Language (HTML) является стандартным языком, предназначенным для создания гипертекстовых документов в среде WEB. HTML-документы могут просматриваться различными типами WEB-браузеров.

Язык HTML появился одновременно со службой World Wide Web и развивался вместе с ней. Он является основой World Wide Web и одновременно причиной ее широчайшей популярности. Смысл и название языка HTML можно понять, исходя из его названия.

Язык HTML появился одновременно со службой World Wide Web и развивался вместе с ней. Он является основой World Wide Web и одновременно причиной ее широчайшей популярности. Смысл и название языка HTML можно понять, исходя из его названия.

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

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

Документ HTML состоит из основного текста документа и тегов разметки, которые являются наборами обычных символов. Документ HTML –это обычный текстовый файл. Для его создания можно использовать любой текстовый редактор (Блокнот).

Описания Web – страниц содержатся в HTML-программах (HTML-кодах) и хранятся в обычных текстовых файлах с расширением HTM или HTML. Программы на языке HTML содержат инструкции (коды), называемые тегами. Тег в переводе с английского означает «метка». Теги представляют собой последовательность символов, заключенные в угловые скобки, например P. Как правило, теги записываются прописными буквами, однако, большинство современных браузеров допускают запись тегов в любом регистре.

Структура HTML - документа

  1. Документ должен начинаться с открывающего тега HTML и заканчиваться соответствующим закрывающим тегом HTML. Эта пара тегов сообщает браузеру, что перед ним действительно документ HTML.

  2. Документ HTML состоит из раздела заголовков и тела документа, идущих именно в таком порядке. Раздел заголовков заключен между тегами HEAD и HEAD и содержит информацию о документе в целом. В частности, этот раздел должен содержать внутри себя теги TITLE и TITLE, между которыми размещают «официальный» заголовок документа. Большинство браузеров, работающих в системе Windows, используют этот заголовок, чтобы заполнить строку заголовка окна браузера.

  3. Сам текст документа располагается в теле документа. Тело документа располагается между тегами BODY и BODY.

Четыре перечисленных парных тега определяют основную структуру документа HTML.

Задание 2.

Раскроем окно текстового редактора «Блокнот» и напишем в нем текст HTML- программы. Вот как это будет выглядеть

HTML

HEAD

TITLEЗаголовок документа TITLE

HEAD

BODY

Этот текст можно прочитать на экране

BODY

HTML


Сохраним нашу программу в папке своей группы в файле с расширением HTM или HTML. Например, назначим ей имя PROBA.HTML.

Теперь надо раскрыть этот файл в браузере. Для этого в проводнике найдите файл PROBA.HTML и дважды щелкните левой кнопкой мыши по его имени или на его значке. В Windows все файлы с расширением HTM или HTML открываются в окне браузера Internet Explorer, если, конечно, вы не установили какой-нибудь другой браузер.

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

Покажите выполненное задание преподавателю.


Для обозначения абзацев используют тег P (и соответствующий закрывающий P). Теги, описывающие обычные абзацы, являются необязательными. Однако при наличии этих тегов браузеры четко отслеживают границы между абзацами.

В языке HTML нет никаких средств для создания абзацного отступа (красной строки), поэтому между абзацами браузер обычно вводит пустую строку. Для этого используют тег br (одиночный тег).

Важным средством создания разделителей в тексте являются горизонтальные полоски – линейки, визуально отделяющие разные части документа друг от друга. Горизонтальная линейка создается тегом HR. Это одиночный тег.

Пример 2

Раскроем окно текстового редактора «Блокнот» и напишем в нем текст HTML- документа


Ввод текста

Эти строки отображаются слитно,

несмотря на то, что в документе

они отделены

друг от друга

Закрывающий тег абзаца не обязателен.

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

Текст после начала линейки
разбит на две строки.

-75%
Курсы профессиональной переподготовке

Учитель, преподаватель информатики в начальной школе

Продолжительность 300 или 600 часов
Документ: Диплом о профессиональной переподготовке
13800 руб.
от 3450 руб.
Подробнее
Скачать разработку
Сохранить у себя:
Введение в Web-дизайн (68.86 КB)

Комментарии 1

Чтобы добавить комментарий зарегистрируйтесь или на сайт

Гума, 08.04.2013 18:11
Здраствуйте Дмитри!Спасибо за ваше урок они мне очень помогли. Могу ли я попросить у вас о программе дельфи который можно сделать анимацию. Если увас есть то можете отослать мне анимацию с программами и кодом. Заранее спасибо!

Вы смотрели