Информатика и ЭВМ в психологии Методика создания WEB

Информатика и ЭВМ в психологии Методика создания WEB ресурса (сайта) Лектор: к. т. н. Бакланов Владимир Николаевич

Вопросы: 1. Структура WEB ресурса (сайта) 2. Программирование при помощи HTML (языка гипертекстовой разметки) 3. Качество WEB сайта 4. Способы и инструментальные средства создания WEB сайта 2

Структура WEB ресурса (сайта) HTML-документ всегда должен начинаться отрывающим тэгом <HTML> и заканчиваться закрывающим </HTML>. 1. На первом месте – заголовок - между тэгами <HEAD></HEAD> должна находиться следующая информация: - о кодировки страницы, в нашем случае (для поддержки русского языка) - <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> - название страницы, которое определяется тэгами <TITLE></TITLE>. 2. На втором месте - содержимое документа (или «ТЕЛО» ) - между тегами <BODY></BODY> располагается пользовательская информация (тексты, рисунки, видеофайлы, аудиофайлы. . . ), представляемая и визуализированная браузером в окне

Первый способ - «с помощью блокнота» 1. (пуск -> все программы ->стандартные->блокнот). Написать в ней: <html> <head> <title>Первый сайт от Иванова</title> </head> <body> </html> 2. Затем нажать файл ->сохранить как в строке имя файла написать иванов. html и сохранить в папке «ЛР 1 по Web» . Все HTML файлы имеют расширение html и htm - это то, что указывается после имени файла. 3. Открыть браузером иванов. html и в его верхней строчке можно увидеть - Первый сайт от Иванова 4

Второй пример  <html> начало «заголовка» <head>  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> <title>Ваш заголовок</title> конец «заголовка» </head> <body>  Название Вашего раздела Здесь Ваш текст. начало «тела»  <center> <img border=0 src="Имя графического файла с расширением" Width="Его размер по горизонтали" Height="Его размер по вертикали" alt="Здесь Вы указываете выпадающую подсказку – альтернативный текст – вместо "> </center> </body> конец «тела» </html> 5

Работа с заголовком Для его создания используют тэги <Hn></Hn>, где n – число от 1 до 6. Заключив текст между этими тэгами, вы получите заголовок определенного размера или формата. <H 1>Заголовок</H 1> <H 2>Заголовок</H 2> <H 3>Заголовок</H 3> <H 4>Заголовок</H 4> <H 5>Заголовок</H 5> <H 6>Заголовок</H 6> Для создания нового абзаца используется тэг , а для перехода на новую строчку без создания абзаца - тэг . Эти тэги «одинарные» - т. е. закрывать их не обязательно. Но если Вы используете в тэге какой-либо атрибут, тогда необходим и закрывающий тег. Примеры тегов и атрибутов, которыми может задаваться выравнивание абзаца: По левому краю По центру По правому краю Текст, находящийся между этими элементами 6 выравнивается по ширине

В заголовке принято указывать мета значения <META name="Description" content="Описание страницы" >- что здесь укажешь, то и будет отражаться поисковиками; <META name="Keywords " content="Ключевые слова "> - слова, которые набирает пользователь при поиске информации в поисковике. <META HTTP-EQUIV="Keywords" content="Ключевые слова "> - ещё один тег с ключевыми словами. <META name="Robots" content=INDEX, FOLLOW > - отвечает за управление поисковыми роботами. <META http-equiv="Reply-to" content=lomachenko@narod. ru > - указывает адрес электронной почты автора. <META name="Author" content="Igor Lomachenko" > - в него можно писать своё имя, название студии или e-mail. Формат произвольный. <META name= "Copyright" content="Авторские права"> - описание авторских прав на документ. <META name= "Classification" content="Классификация"> - отвечает за аудиторию, на которую направлен сайт. <META HTTP-EQUIV="Content-Language" content="en, ru "> - отвечает за язык, использованный на странице. Если содержание страницы часто меняется, то ставят следующие два тега: <META NAME="Document-state " content="Dynamic "> или <META NAME="Revizit-after " content="10 days "> - здесь робот будет переиндексировать страницу каждые 10 дней. Периодичность можно выбирать любую. 7

Работа с текстом 8

9

Работа с фоном и рисунками 10

11

Работа с картами 12

13

Работа с ссылками 14

Работа с таблицами 15

16

17

Работа со списками 18

19

20

Работа с формами 21

22

23

24

Работа с фреймами 25

Работа с видео Работа с флеш-роликами (анимацией) 26

27

28

Элементы языка HTML 29

30

31

Качество WEB сайта 32

Способы создания WEB сайта - ручные или автоматизированные - автономно или в сети - по частям или сразу все - по шаблону или оригинально - самостоятельно или при методической и технической поддержке - … 33

Инструментальные средства создания WEB сайта 34

Lite. Editor Site Create (возможность моментального просмотра текущей редактируемой страницы) Web Coder (русский редактор html, php и java) обеспечивает подсветку синтаксиса для определённого языка, однозначно указывает на ссылки, картинки, формы и скрипты) редактор Tea Dz. Soft PHP Editor х (для написания, редактирования и отладки PHP сценариев и HTML страниц, встроенные FTP-клиент и браузер, Code Explorer и File Explorer, настраиваемые шаблоны, удобный "однокликовый" механизм просмотра результатов работы и многие другие полезные опции) Ace. HTML Pro 6. 6 (для создания и обслуживания веб-сайтов) Поддержка XHTML, менеджер проектов, линк-чекер, оптимизация кода, проверка синтаксиса HTML, CSS и Java. Script, редактор стилей, встроенный интерпретатор Perl и PHP, модуль для обновления сайта по FTP). Кроме всего прочего, включает в себя десятки примеров оформления сайтов, а также автоматизированный доступ к большой базе с графикой. 35

Вопросы: 1. Структура WEB ресурса (сайта) 2. Программирование при помощи HTML (языка гипертекстовой разметки) 3. Качество WEB сайта 4. Способы и инструментальные средства создания WEB сайта 36

37

Задание: - изучить справочник; - ручное автономное изготовление сайта при помощи блокнота и браузера; - тоже самое в WORD, но вставить вторую страницу и связать гиперссылками (низ – вверх, первая – вторая, вторая – первая) страницы; - подготовить тему и материал (исходные для сайта) для работы на семинарах 38

Задание на ЛР по WEB 39