Основы языка гипертекстовой разметки документов HTML. - презентация

1 Основы языка гипертекстовой разметки документов HTML

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

3 3 ЯЗЫК HTML – это универсальный язык, который понимают все компьютеры во всем мире ( HYPER TEXT Markup Language ), это язык гипертекста, который используется для создания любого сайта. Был разработан Тимом Бернес Ли( 1990г.), и благодаря росту Мировой паутины, набрал популярность. HTML – файл представляет собой простой текстовый файл, имеющий расширение HTML.

4 4 Для создания Web-сайта разработано много программ- MS FrontPage, Macromedia Dreamweawer и др. Процесс создания и редактирования страницы очень нагляден, т.к.производится в режиме WYSIWYG («What You See Is What You Get» - «Что видишь, то и получаешь». Но для создания простейшей Web-странички можно воспользоваться текстовым редактором «Блокнот». В основе HTML-файла лежат теги. Теги определяют структуру Web- страницы

5 5 HTML- файл = текст + Теги (команды) Тег (Tag)– инструкция браузеру, указывающая способ отображения текста. Теги несут ключевую информацию о том, как форматировать текст, где помещать картинки, где делать перенос и т.д. Для того, что бы отличать теги от текста, их заключают в угловые скобки. Каждый тег имеет свое имя.

6 6 ТЕГ … Одиночный Двойной (парный) Теги бывают двойные и одиночные Двойной тег состоит из открывающего (который говорит, что с этого места тег начинает действовать) и закрывающего (который говорит, что в этом месте действие тега заканчивается). ТЕГ Одинарный тег просто говорит о том, что в этом месте надо что – то сделать, например перейти на новую строку или поместить рисунок.

7 7 Главные теги Всегда начинайте с тега и заканчивайте. Это важная пара сообщает Web- браузеру о том, что он видит HTML-страничку. Внутри тегов распологается пара тегов, для включения информации о заголовке вашей страницы Заголовок заключается в парные теги, и появляется в строке заголовка браузера Теги, - тело странички. В них располагается все, что должно быть отображено на странице экрана браузера: слова, изображения и т.д.

8 8 Структура или «скелет» WEB-странички В стадии разработки Мой класс

9 9

10 10 … … Теги заголовка. Они задают уровень заголовка и гарнитуру шрифта (размер текста: Н1 - самый большой, Н6 - самый маленький) Теги, определяют деление на абзацы. Закрывающийся тег необязателен Параметр тегов ALIGN выравнивает текст: LEFT – по левому краю RIGHT – по правому краю CENTER – по центру Теги форматирования

11 11 Теги форматирования Моя первая WEB-страница Располагает заголовок по центру Мой первый WEB - сайт Создана 1 апреля 2005 года Располагает абзац по левому краю Моя первая WEB –страничка Создана 1 апреля 2005 года

12 12 … - жирный … - курсив … - подчеркивание … - форматирование текста color = цвет текста - разрыв строки Теги форматирования

13 13 Запуск БЛОКНОТА ПУСК-Программы-Стандартные- Блокнот Воспользуемся Блокнотом для создания WEB-странички

14 14 Создайте HTML-файл Мой класс Мой класс был очень шумным и веселым

15 15 Работа с блокнотом Задайте имя файла и расширение HTML Выберите место для сохранения Сохраните HTML-файл

16 16 Гиперссылки на Web- страницах

17 17 Гиперссылка на Web-странице существует в форме указателя ссылки, щелчок по которому обеспечивает переход на Web- страницу, указанную в адресной части ссылки. Гиперссылка состоит из двух частей: указателя ссылки и адресной части ссылки. Указатель ссылки – это текст или рисунок, выделенный синим цветом и подчеркиванием. Адресная часть гиперссылки представляет собой URL – адрес документа, на который указывает ссылка.

18 18 При размещении текста на Web – страницах используют различные варианты списков: Нумерованные списки; Маркированные списки; Списки определений Возможно создание вложенных списков, причем вкладываемый список может по типу отличаться от основного.

19 19 На страницах сайта располагают формы для отправления сведений администратору сайта. Формы включают в себя управляющие элементы различных типов: текстовые поля, раскрывающиеся списки, флажки, переключатели и так далее.

20 20 Тестирование и публикация Web-сайтов

21 21 Перед опубликованием сайта в Интернете надо: 1)Просмотреть страницы сайта в различных браузерах; 2)Проверить: Нормально ли читается текст на выбранном фоне; Правильно ли расположены рисунки; Правильно ли работают гиперссылки

22 22 Для публикации Web – сайта необходимо получить от провайдера следующие сведения: URL – сайта Секретное имя пользователя и пароль, которые необходимы администратору сайта для его редактирования. Варианты технологии публикации Web- сайтов: Использование инструментального средства; С помощью оригинального Диспетчера файлов; Используя возможности FTP - клиентов

23 23 Золотые правила оформления сайта: Меню может быть выделено, и бросаться в глаза даже в ущерб читабельности. Его не надо рассматривать - оно должно быть заметным. Информация должна быть представлена так, чтобы ее удобно было долго читать. Это значит: небольшая ширина колонки (чтобы не бегать глазами по горизонтали), текст с засечками (serifs, более приго­ден для долгого чтения), темным по светлому (так не утомляются глаза). На одной странице должен быть размещен только один связанный блок текста. Если надо перейти к блоку с другим содержанием - сделайте ссылку. Ссылки должны однозначно определять то место, куда они указывают! Если это заголовок статьи - сделайте рядом описание. Если это переход к целому разделу - опишите все пункты раздела. Не надо давать пользователю выбор! В смысле, в одно и то же время давать возможность выбора. Опишите одну альтернативу, со ссыл­кой. Затем другую со ссылкой. Если первая пользователю подойдет, он не будет думать о второй. Не злоупотреблять динамическими объектами.

24 24 Дизайн сайта- это художественное и функциональное оформление сайта, предполагающее единство содержательных и навигационных эле­ментов, выбранных исходя из интересов пользователей. Основные требования: правильная компоновка информации на странице; удобство и наглядность представления элементов управления и кнопок навигации; соответствие определенному стилю и самобытность; быстрая загрузка страницы; комфортное сочетание цветовой гаммы; учет интересов целевой аудитории.

25 25 Чего стоит избегать при создании страницы: Не стоит использовать часто используемые слова и фразы при поиске, поисковая система отслеживает соответствие содержания страницы ключевым словам; Не стоит превышать заданные лимиты в тэгах title, description, key words; Не стоит использовать заглавные буквы в заголовках и тексте; Не стоит использовать фреймы, поисковые системы с ними не справляются.

26 26 В качестве основных ошибок при создании Web-страниц можно отметить: неудачное цветовое решение; неработающие ссылки; слабое информационное наполнение; плохая навигация, неудобное перемещение по сайту; неработающие разделы; отсутствие контактной информации; только контактная информация.

27 27 Тогда в качестве необходимой информации на сайте должна присутствовать: Контактная информация о создателях сайта и «хозяев» сайта. Исчерпывающая информация о тех сведениях, которые имеются на сайте. Внешние и внутренние ссылки, с перекрестными ссылками между информационными объектами. Возможность перелистывания страниц. Возможность интерактивного перемещения по тексту (в случае если объем велик). Возможность коммуникативного общения. Баннеры, логотип. Карта сайта.